API tools faq
paste
Guest User

Untitled

a guest
Nov 14th, 2024
36
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.62 KB | None | 0 0
raw download clone embed print report
  1. <script>
  2. import { onMount, onDestroy } from 'svelte';
  3. import { setPageTitle } from '$lib/utils';
  4. import { appVariables } from '/src/stores/appVariables.js';
  5. import Card from '/src/components/bootstrap/Card.svelte';
  6. import CardBody from '/src/components/bootstrap/CardBody.svelte';
  7. import CardHeader from '/src/components/bootstrap/CardHeader.svelte';
  8. import CardExpandToggler from '/src/components/bootstrap/CardExpandToggler.svelte';
  9. import ApexCharts from '/src/components/plugins/ApexCharts.svelte';
  10. import 'jsvectormap/dist/jsvectormap.min.css';
  11.  
  12. let statsData;
  13. let serverData;
  14. let trafficData;
  15. let productData;
  16. let logData;
  17. let jsVectormap;
  18. let vectorMap;
  19. let unsubscribe;
  20.  
  21. function randomNo() {
  22. return Math.floor(Math.random() * 60) + 30
  23. }
  24.  
  25. function getStatsData(appVariables) {
  26. statsData = [
  27. {
  28. title: 'SITE VISITORS', total: '4.2m',
  29. info: [ { icon: 'fa fa-chevron-up fa-fw me-1', text: '33.3% more than last week' }, { icon: 'far fa-user fa-fw me-1', text: '45.5% new visitors' }, { icon: 'far fa-times-circle fa-fw me-1', text: '3.25% bounce rate'} ],
  30. chartOptions: {
  31. chart: { height: '30px', type: 'bar', sparkline: { enabled: true } }, colors: [appVariables.color.theme], plotOptions: { bar: { horizontal: false, columnWidth: '65%', endingShape: 'rounded' } },
  32. series: [{ name: 'Visitors', data: [randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo()] }]
  33. }
  34. },
  35. {
  36. title: 'STORE SALES', total: '$35.2K',
  37. info: [ { icon: 'fa fa-chevron-up fa-fw me-1', text: '20.4% more than last week' }, { icon: 'fa fa-shopping-bag fa-fw me-1', text: '33.5% new orders' }, { icon: 'fa fa-dollar-sign fa-fw me-1', text: '6.21% conversion rate'} ],
  38. chartOptions: {
  39. chart: { height: '30px', type: 'line', sparkline: { enabled: true } }, colors: [appVariables.color.theme], stroke: { curve: 'straight', width: 2 },
  40. series: [{ name: 'Visitors', data: [randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo()] }]
  41. }
  42. },
  43. { title: 'NEW MEMBERS', total: '4,490',
  44. info: [ { icon: 'fa fa-chevron-up fa-fw me-1', text: '59.5% more than last week' }, { icon: 'fab fa-facebook-f fa-fw me-1', text: '45.5% from facebook' }, { icon: 'fab fa-youtube fa-fw me-1', text: '15.25% from youtube'} ],
  45. chartClass: 'mb-n2',
  46. chartOptions: {
  47. chart: { height: '45px', type: 'pie', sparkline: { enabled: true } }, colors: ['rgba('+ appVariables.color.themeRgb + ', 1)', 'rgba('+ appVariables.color.themeRgb + ', .75)', 'rgba('+ appVariables.color.themeRgb + ', .5)'], stroke: { show: false },
  48. series: [randomNo(), randomNo(), randomNo()]
  49. }
  50. },
  51. {
  52. title: 'BANDWIDTH', total: '4.5TB',
  53. info: [ { icon: 'fa fa-chevron-up fa-fw me-1', text: '5.3% more than last week' }, { icon: 'far fa-hdd fa-fw me-1', text: '10.5% from total usage' }, { icon: 'far fa-hand-point-up fa-fw me-1', text: '2MB per visit'} ],
  54. chartClass: 'mb-n2',
  55. chartOptions: {
  56. chart: { height: '45px', type: 'donut', sparkline: { enabled: true } }, colors: ['rgba('+ appVariables.color.themeRgb + ', .15)', 'rgba('+ appVariables.color.themeRgb + ', .35)', 'rgba('+ appVariables.color.themeRgb + ', .55)', 'rgba('+ appVariables.color.themeRgb + ', .75)', 'rgba('+ appVariables.color.themeRgb + ', .95)'], stroke: { show: false, curve: 'smooth', lineCap: 'butt', colors: 'rgba(' + appVariables.color.blackRgb + ', .25)', width: 2, dashArray: 0 }, plotOptions: { pie: { donut: { background: 'transparent' } } },
  57. series: [randomNo(), randomNo(), randomNo(), randomNo(), randomNo()]
  58. }
  59. }
  60. ];
  61. }
  62.  
  63. function getServerData(appVariables) {
  64. let Apex = {
  65. title: {
  66. style: {
  67. fontSize: '14px',
  68. fontWeight: 'bold',
  69. fontFamily: appVariables.font.bodyFontfamily,
  70. color: appVariables.color.bodyColor
  71. },
  72. },
  73. legend: {
  74. fontFamily: appVariables.font.bodyFontfamily,
  75. labels: {
  76. colors: appVariables.color.bodyColor
  77. }
  78. },
  79. tooltip: {
  80. style: {
  81. fontSize: '12px',
  82. fontFamily: appVariables.font.bodyFontfamily
  83. }
  84. },
  85. grid: {
  86. borderColor: 'rgba('+ appVariables.color.bodyColorRgb + ', .25)',
  87. },
  88. dataLabels: {
  89. style: {
  90. fontSize: '12px',
  91. fontFamily: appVariables.font.bodyFontfamily,
  92. fontWeight: 'bold',
  93. colors: undefined
  94. }
  95. },
  96. xaxis: {
  97. axisBorder: {
  98. show: true,
  99. color: 'rgba('+ appVariables.color.bodyColorRgb + ', .25)',
  100. height: 1,
  101. width: '100%',
  102. offsetX: 0,
  103. offsetY: -1
  104. },
  105. axisTicks: {
  106. show: true,
  107. borderType: 'solid',
  108. color: 'rgba('+ appVariables.color.bodyColorRgb + ', .25)',
  109. height: 6,
  110. offsetX: 0,
  111. offsetY: 0
  112. },
  113. labels: {
  114. style: {
  115. colors: appVariables.color.bodyColor,
  116. fontSize: '12px',
  117. fontFamily: appVariables.font.bodyFontfamily,
  118. fontWeight: 400,
  119. cssClass: 'apexcharts-xaxis-label',
  120. }
  121. }
  122. },
  123. yaxis: {
  124. labels: {
  125. style: {
  126. colors: appVariables.color.bodyColor,
  127. fontSize: '12px',
  128. fontFamily: appVariables.font.bodyFontfamily,
  129. fontWeight: 400,
  130. cssClass: 'apexcharts-xaxis-label',
  131. }
  132. }
  133. }
  134. };
  135. serverData = {
  136. chartOptions: {
  137. series: [
  138. { name: 'MEMORY USAGE', data: [ randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo() ] },
  139. { name: 'CPU USAGE', data: [ randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo(), randomNo() ] }
  140. ],
  141. colors: ['rgba('+ appVariables.color.inverseRgb + ', .25)', appVariables.color.theme],
  142. xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], labels: { show: false } },
  143. fill: { opacity: .65 },
  144. tooltip: { y: { formatter: function (val) { return "$ " + val + " thousands" } } },
  145. chart: { height: '100%', type: 'bar', toolbar: { show: false } },
  146. plotOptions: { bar: { horizontal: false, columnWidth: '55%', endingShape: 'rounded' } },
  147. dataLabels: { enabled: false },
  148. grid: { show: true, borderColor: 'rgba('+ appVariables.color.inverseRgb +', .15)' },
  149. stroke: { show: false }
  150. },
  151. stats: [
  152. {
  153. name: 'DISK USAGE', total: '20.04 / 256 GB', progress: '20%', time: 'Last updated 1 min ago',
  154. info: [ { title: 'DISK C', value: '19.56GB', class: 'text-theme' }, { title: 'DISK D', value: '0.50GB', class: 'text-theme text-opacity-50' } ],
  155. chartOptions: {
  156. chart: { height: 50, type: 'donut', sparkline: { enabled: true } },
  157. colors: ['rgba('+ appVariables.color.themeRgb + ', .15)', 'rgba('+ appVariables.color.themeRgb + ', .35)', 'rgba('+ appVariables.color.themeRgb + ', .55)', 'rgba('+ appVariables.color.themeRgb + ', .75)', 'rgba('+ appVariables.color.themeRgb + ', .95)'],
  158. stroke: { show: false, curve: 'smooth', lineCap: 'butt', colors: 'rgba(' + appVariables.color.blackRgb + ', .25)', width: 2, dashArray: 0 },
  159. plotOptions: { pie: { donut: { background: 'transparent' } } },
  160. series: [randomNo(), randomNo(), randomNo(), randomNo(), randomNo()]
  161. }
  162. },
  163. {
  164. name: 'BANDWIDTH', total: '83.76GB / 10TB', progress: '10%', time: 'Last updated 1 min ago',
  165. info: [ { title: 'HTTP', value: '35.47GB', class: 'text-theme' }, { title: 'FTP', value: '1.25GB', class: 'text-theme text-opacity-50' } ],
  166. chartOptions: {
  167. chart: { height: 50, type: 'donut', sparkline: { enabled: true } },
  168. colors: ['rgba('+ appVariables.color.themeRgb + ', .15)', 'rgba('+ appVariables.color.themeRgb + ', .35)', 'rgba('+ appVariables.color.themeRgb + ', .55)', 'rgba('+ appVariables.color.themeRgb + ', .75)', 'rgba('+ appVariables.color.themeRgb + ', .95)'],
  169. stroke: { show: false, curve: 'smooth', lineCap: 'butt', colors: 'rgba(' + appVariables.color.blackRgb + ', .25)', width: 2, dashArray: 0 },
  170. plotOptions: { pie: { donut: { background: 'transparent' } } },
  171. series: [randomNo(), randomNo(), randomNo(), randomNo(), randomNo()]
  172. }
  173. }
  174. ]
  175. };
  176. }
  177.  
  178. function getTrafficData(appVariables) {
  179. trafficData = {
  180. country: [
  181. { name: 'FRANCE', visits: '13,849', pct: '40.79%', class: '' },
  182. { name: 'SPAIN', visits: '3,216', pct: '9.79%', class: '' },
  183. { name: 'MEXICO', visits: '1,398', pct: '4.26%', class: 'fw-bold text-theme' },
  184. { name: 'UNITED STATES', visits: '1,090', pct: '3.32%', class: '' },
  185. { name: 'BELGIUM', visits: '1,045', pct: '3.18%', class: ''}
  186. ],
  187. source: [
  188. { name: 'FEED', percentage: '25.70%', class: 'bg-theme bg-opacity-95' },
  189. { name: 'ORGANIC', percentage: '24.30%', class: 'bg-theme bg-opacity-75' },
  190. { name: 'REFERRAL', percentage: '23.05%', class: 'bg-theme bg-opacity-55' },
  191. { name: 'DIRECT', percentage: '14.85%', class: 'bg-theme bg-opacity-35' },
  192. { name: 'EMAIL', percentage: '7.35%', class: 'bg-theme bg-opacity-15' }
  193. ],
  194. chart: {
  195. options: {
  196. chart: { height: 70, type: 'donut', sparkline: { enabled: true } },
  197. colors: ['rgba('+ appVariables.color.themeRgb + ', .15)', 'rgba('+ appVariables.color.themeRgb + ', .35)', 'rgba('+ appVariables.color.themeRgb + ', .55)', 'rgba('+ appVariables.color.themeRgb + ', .75)', 'rgba('+ appVariables.color.themeRgb + ', .95)'],
  198. stroke: { show: false, curve: 'smooth', lineCap: 'butt', colors: 'rgba(' + appVariables.color.blackRgb + ', .25)', width: 2, dashArray: 0 },
  199. plotOptions: { pie: { donut: { background: 'transparent' } } } ,
  200. series: [randomNo(), randomNo(), randomNo(), randomNo(), randomNo()]
  201. },
  202. }
  203. };
  204.  
  205. document.getElementById('map-container').innerHTML = '<div id="map"></div>';
  206. var map = new jsVectorMap({
  207. selector: '#map',
  208. map: 'world',
  209. zoomButtons: true,
  210. normalizeFunction: 'polynomial',
  211. hoverOpacity: 0.5,
  212. hoverColor: false,
  213. zoomOnScroll: false,
  214. series: { regions: [{ normalizeFunction: 'polynomial' }] },
  215. labels: { markers: { render: (marker) => marker.name } },
  216. focusOn: { x: 0.5, y: 0.5, scale: 1 },
  217. markers: [
  218. { name: "Egypt", coords: [26.8206, 30.8025] },
  219. { name: "Russia", coords: [61.524, 105.3188] },
  220. { name: "Canada", coords: [56.1304, -106.3468] },
  221. { name: "Greenland", coords: [71.7069, -42.6043] },
  222. { name: "Brazil", coords: [-14.235, -51.9253] }
  223. ],
  224. markerStyle: { initial: { fill: appVariables.color.theme, stroke: 'none', r: 5 }, hover: { fill: appVariables.color.theme } },
  225. markerLabelStyle: { initial: { fontFamily: appVariables.font.bodyFontFamily, fontSize: '12px', fill: 'rgba('+ appVariables.color.inverseRgb + ', .75)' } },
  226. regionStyle: { initial: { fill: appVariables.color.inverse, fillOpacity: 0.35, stroke: 'none', strokeWidth: 0.4, strokeOpacity: 1 }, hover: { fillOpacity: 0.5 } },
  227. backgroundColor: 'transparent',
  228. });
  229. }
  230.  
  231. onMount(async () => {
  232. setPageTitle('Dashboard');
  233.  
  234. jsVectormap = await import ('jsvectormap');
  235. await import ('jsvectormap/dist/maps/world.js');
  236.  
  237. productData = [
  238. { img: '/img/dashboard/product-1.jpeg', no: '1', sku: 'SKU90400', title: 'Huawei Smart Watch', price: '$399.00', qty: '129', revenue: '$51,471', profit: '$15,441' },
  239. { img: '/img/dashboard/product-2.jpeg', no: '2', sku: 'SKU85999', title: 'Nike Shoes Black Version', price: '$99.00', qty: '108', revenue: '$10,692', profit: '$5,346' },
  240. { img: '/img/dashboard/product-3.jpeg', no: '3', sku: 'SKU20400', title: 'White Sony PS4', price: '$599', qty: '72', revenue: '$43,128', profit: '$4,312' },
  241. { img: '/img/dashboard/product-4.jpeg', no: '4', sku: 'SKU19299', title: 'Apple Watch Series 5', price: '$1,099', qty: '53', revenue: '$58,247', profit: '$2,912' },
  242. { img: '/img/dashboard/product-5.jpeg', no: '5', sku: 'SKU19299', title: 'Black Nikon DSLR', price: '1,899', qty: '50', revenue: '$90,950', profit: '$2,848' }
  243. ];
  244.  
  245. logData = [
  246. { title: 'You have sold an item - $1,299', time: 'just now', badge: 'PRODUCT', highlight: true},
  247. { title: 'Firewall upgrade', time: '1 min ago', badge: 'SERVER', highlight: false},
  248. { title: 'Push notification v2.0 installation', time: '1 mins ago', badge: 'ANDROID', highlight: false},
  249. { title: 'New Subscription - 1yr Plan', time: '1 min ago', badge: 'SALES', highlight: true},
  250. { title: '2 Unread enquiry', time: '2 mins ago', badge: 'ENQUIRY', highlight: false},
  251. { title: '$30,402 received from Paypal', time: '2 mins ago', badge: 'PAYMENT', highlight: true},
  252. { title: '3 payment received', time: '5 mins ago', badge: 'PAYMENT', highlight: true},
  253. { title: '1 pull request from github', time: '5 mins ago', badge: 'GITHUB', highlight: false},
  254. { title: '3 pending invoice to generate', time: '5 mins ago', badge: 'INVOICE', highlight: false},
  255. { title: '2 new message from fb messenger', time: '7 mins ago', badge: 'INBOX', highlight: false}
  256. ];
  257.  
  258. unsubscribe = appVariables.subscribe(value => {
  259. if (value.color) {
  260. getStatsData(value);
  261. getServerData(value);
  262. getTrafficData(value);
  263. }
  264. });
  265. });
  266.  
  267. onDestroy(() => {
  268. if (unsubscribe) {
  269. unsubscribe();
  270. }
  271. });
  272. </script>
  273.  
  274. <!-- BEGIN row -->
  275. <div class="row">
  276. <!-- BEGIN col-3 -->
  277. {#if statsData}
  278. {#each statsData as stat}
  279. <div class="col-xl-3 col-lg-6">
  280. <Card class="mb-3">
  281. <CardBody>
  282. <!-- BEGIN title -->
  283. <div class="d-flex fw-bold small mb-3">
  284. <span class="flex-grow-1">{stat.title}</span>
  285. <CardExpandToggler />
  286. </div>
  287. <!-- END title -->
  288. <!-- BEGIN stat-lg -->
  289. <div class="row align-items-center mb-2">
  290. <div class="col-7">
  291. <h3 class="mb-0">{stat.total}</h3>
  292. </div>
  293. <div class="col-5">
  294. <div class="mt-n2 {stat.chartClass}">
  295. {#if stat.chartOptions}
  296. <ApexCharts options={stat.chartOptions}></ApexCharts>
  297. {/if}
  298. </div>
  299. </div>
  300. </div>
  301. <!-- END stat-lg -->
  302. <!-- BEGIN stat-sm -->
  303. <div class="small text-inverse text-opacity-50 text-truncate">
  304. {#if stat.info}
  305. {#each stat.info as info}
  306. <div><i class={info.icon}></i> {info.text}</div>
  307. {/each}
  308. {/if}
  309. </div>
  310. <!-- END stat-sm -->
  311. </CardBody>
  312. </Card>
  313. </div>
  314. {/each}
  315. {/if}
  316. <!-- END col-3 -->
  317.  
  318. <!-- BEGIN server-stats -->
  319. <div class="col-xl-6">
  320. <Card class="mb-3">
  321. <CardBody>
  322. <div class="d-flex fw-bold small mb-3">
  323. <span class="flex-grow-1">SERVER STATS</span>
  324. <CardExpandToggler />
  325. </div>
  326. <div class="ratio ratio-21x9 mb-3">
  327. {#if serverData && serverData.chartOptions}
  328. <ApexCharts options={serverData.chartOptions}></ApexCharts>
  329. {/if}
  330. </div>
  331. <div class="row">
  332. {#if serverData && serverData.stats}
  333. {#each serverData.stats as stat}
  334. <div class="col-lg-6 mb-3 mb-lg-0">
  335. <div class="d-flex align-items-center">
  336. <div class="w-50px h-50px">
  337. {#if stat.chartOptions}
  338. <ApexCharts options={stat.chartOptions}></ApexCharts>
  339. {/if}
  340. </div>
  341. <div class="ps-3 flex-1">
  342. <div class="fs-10px fw-bold text-inverse text-opacity-50 mb-1">{stat.name}</div>
  343. <div class="mb-2 fs-5 text-truncate">{stat.total}</div>
  344. <div class="progress h-3px mb-1">
  345. <div class="progress-bar bg-theme" style="width: {stat.progress}"></div>
  346. </div>
  347. <div class="fs-11px text-inverse text-opacity-50 mb-2 text-truncate">
  348. {stat.time}
  349. </div>
  350. {#if stat.info}
  351. {#each stat.info as info}
  352. <div class="d-flex align-items-center small">
  353. <i class={'bi bi-circle-fill fs-6px me-2 '+ info.class}></i>
  354. <div class="flex-1">{info.title}</div>
  355. <div>{info.value}</div>
  356. </div>
  357. {/each}
  358. {/if}
  359. </div>
  360. </div>
  361. </div>
  362. {/each}
  363. {/if}
  364. </div>
  365. </CardBody>
  366. </Card>
  367. </div>
  368. <!-- END server-stats -->
  369.  
  370. <!-- BEGIN traffic-analytics -->
  371. <div class="col-xl-6">
  372. <Card class="mb-3">
  373. <CardBody>
  374. <div class="d-flex fw-bold small mb-3">
  375. <span class="flex-grow-1">TRAFFIC ANALYTICS</span>
  376. <CardExpandToggler />
  377. </div>
  378. <div class="ratio ratio-21x9 mb-3">
  379. <div class="jvm-without-padding" id="map-container"></div>
  380. </div>
  381.  
  382. <div class="row gx-4">
  383. <div class="col-lg-6 mb-3 mb-lg-0">
  384. <table class="w-100 small mb-0 text-truncate text-inverse text-opacity-60">
  385. <thead>
  386. <tr class="text-inverse text-opacity-75">
  387. <th class="w-50">COUNTRY</th>
  388. <th class="w-25 text-end">VISITS</th>
  389. <th class="w-25 text-end">PCT%</th>
  390. </tr>
  391. </thead>
  392. <tbody>
  393. {#if trafficData && trafficData.country}
  394. {#each trafficData.country as country}
  395. <tr class={country.class}>
  396. <td>{country.name}</td>
  397. <td class="text-end">{country.visits}</td>
  398. <td class="text-end">{country.pct}</td>
  399. </tr>
  400. {/each}
  401. {:else}
  402. <tr>
  403. <td colspan="3">No records found</td>
  404. </tr>
  405. {/if}
  406. </tbody>
  407. </table>
  408. </div>
  409. <div class="col-lg-6">
  410. <Card>
  411. <CardBody class="py-2">
  412. <div class="d-flex align-items-center">
  413. <div class="w-70px">
  414. {#if trafficData && trafficData.chart}
  415. <ApexCharts options={trafficData.chart.options}></ApexCharts>
  416. {/if}
  417. </div>
  418. <div class="flex-1 ps-2">
  419. <table class="w-100 small mb-0 text-inverse text-opacity-60">
  420. <tbody>
  421. {#if trafficData && trafficData.source}
  422. {#each trafficData.source as source}
  423. <tr>
  424. <td>
  425. <div class="d-flex align-items-center">
  426. <div class={'w-6px h-6px rounded-pill me-2 '+ source.class}></div>
  427. {source.name}
  428. </div>
  429. </td>
  430. <td class="text-end">{source.percentage}</td>
  431. </tr>
  432. {/each}
  433. {:else}
  434. <tr><td colspan="2">No records found</td></tr>
  435. {/if}
  436. </tbody>
  437. </table>
  438. </div>
  439. </div>
  440. </CardBody>
  441. </Card>
  442. </div>
  443. </div>
  444. </CardBody>
  445. </Card>
  446. </div>
  447. <!-- END traffic-analytics -->
  448.  
  449. <!-- BEGIN top-products -->
  450. <div class="col-xl-6">
  451. <Card class="mb-3">
  452. <CardBody>
  453. <div class="d-flex fw-bold small mb-3">
  454. <span class="flex-grow-1">TOP PRODUCTS</span>
  455. <CardExpandToggler />
  456. </div>
  457. <div class="table-responsive">
  458. <table class="w-100 mb-0 small align-middle text-nowrap">
  459. <tbody>
  460. {#if productData}
  461. {#each productData as product}
  462. <tr>
  463. <td>
  464. <div class="d-flex">
  465. <div class="position-relative mb-2">
  466. <div class="bg-position-center bg-size-cover w-80px h-60px" style="background-image: url({product.img})"></div>
  467. <div class="position-absolute top-0 start-0">
  468. <span class="badge bg-theme text-theme-900 rounded-0 d-flex align-items-center justify-content-center w-20px h-20px">{product.no}</span>
  469. </div>
  470. </div>
  471. <div class="flex-1 ps-3">
  472. <div class="mb-1"><small class="fs-9px fw-500 lh-1 d-inline-block rounded-0 badge bg-inverse bg-opacity-25 text-inverse text-opacity-75 pt-5px">{product.sku}</small></div>
  473. <div class="fw-500 text-inverse">{product.title}</div>
  474. {product.price}
  475. </div>
  476. </div>
  477. </td>
  478. <td>
  479. <table class="mb-2">
  480. <tbody>
  481. <tr>
  482. <td class="pe-3">QTY:</td>
  483. <td class="text-inverse text-opacity-75 fw-500">{product.qty}</td>
  484. </tr>
  485. <tr>
  486. <td class="pe-3">REVENUE:</td>
  487. <td class="text-inverse text-opacity-75 fw-500">{product.revenue}</td>
  488. </tr>
  489. <tr>
  490. <td class="pe-3 text-nowrap">PROFIT:</td>
  491. <td class="text-inverse text-opacity-75 fw-500">{product.profit}</td>
  492. </tr>
  493. </tbody>
  494. </table>
  495. </td>
  496. <td><a href="#/" class="text-decoration-none text-inverse"><i class="bi bi-search"></i></a></td>
  497. </tr>
  498. {/each}
  499. {:else}
  500. <tr>
  501. <td colspan="3">
  502. No records found
  503. </td>
  504. </tr>
  505. {/if}
  506. </tbody>
  507. </table>
  508. </div>
  509. </CardBody>
  510. </Card>
  511. </div>
  512. <!-- END top-products -->
  513.  
  514. <!-- BEGIN activity-log -->
  515. <div class="col-xl-6">
  516. <Card class="mb-3">
  517. <CardBody>
  518. <div class="d-flex fw-bold small mb-3">
  519. <span class="flex-grow-1">ACTIVITY LOG</span>
  520. <CardExpandToggler />
  521. </div>
  522. <div class="table-responsive">
  523. <table class="table table-striped table-borderless mb-2px small text-nowrap">
  524. <tbody>
  525. {#if logData}
  526. {#each logData as log}
  527. <tr>
  528. <td>
  529. <span class="d-flex align-items-center">
  530. <i class="bi bi-circle-fill fs-6px me-2" class:text-theme={log.highlight}></i>
  531. {log.title}
  532. </span>
  533. </td>
  534. <td><small>{log.time}</small></td>
  535. <td>
  536. <span class="badge d-block rounded-0 pt-5px w-70px"
  537. class:bg-theme={log.highlight}
  538. class:text-theme-900={log.highlight}
  539. class:bg-inverse={!log.highlight}
  540. class:bg-opacity-25={!log.highlight} style="min-height: 18px">{log.badge}</span>
  541. </td>
  542. <td><a href="#/" class="text-decoration-none text-inverse"><i class="bi bi-search"></i></a></td>
  543. </tr>
  544. {/each}
  545. {:else}
  546. <tr>
  547. <td colspan="4">
  548. No records found
  549. </td>
  550. </tr>
  551. {/if}
  552. </tbody>
  553. </table>
  554. </div>
  555. </CardBody>
  556. </Card>
  557. </div>
  558. <!-- END activity-log -->
  559. </div>
  560. <!-- END row -->
  561.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!