@evershop/evershop 1.0.0-beta

package/src/modules/checkout/migration/Version-1.0.0.js

@@ -0,0 +1,199 @@
+const { execute } = require('@evershop/mysql-query-builder');
+const { pool } = require('../../../lib/mysql/connection');
+
+// eslint-disable-next-line no-multi-assign
+module.exports = exports = async () => {
+  await execute(pool, `CREATE TABLE \`cart\` (
+  \`cart_id\` int(10) unsigned NOT NULL AUTO_INCREMENT,
+  \`currency\` varchar(11) NOT NULL,
+  \`customer_id\` int(10) unsigned DEFAULT NULL,
+  \`customer_group_id\` smallint(6) DEFAULT NULL,
+  \`customer_email\` varchar(255) DEFAULT NULL,
+  \`customer_full_name\` varchar(255) DEFAULT NULL,
+  \`user_ip\` varchar(255) DEFAULT NULL,
+  \`status\` tinyint(5) NOT NULL,
+  \`coupon\` varchar(255) DEFAULT NULL,
+  \`shipping_fee_excl_tax\` decimal(12,4) DEFAULT NULL,
+  \`shipping_fee_incl_tax\` decimal(12,4) DEFAULT NULL,
+  \`discount_amount\` decimal(12,4) NOT NULL,
+  \`sub_total\` decimal(12,4) NOT NULL,
+  \`total_qty\` int(10) unsigned NOT NULL,
+  \`total_weight\` decimal(12,4) DEFAULT NULL,
+  \`tax_amount\` decimal(12,4) NOT NULL,
+  \`grand_total\` decimal(12,4) NOT NULL,
+  \`shipping_method\` varchar(255) DEFAULT NULL,
+  \`shipping_method_name\` char(255) DEFAULT NULL,
+  \`shipping_address_id\` int(10) unsigned DEFAULT NULL,
+  \`payment_method\` char(255) DEFAULT NULL,
+  \`payment_method_name\` char(255) DEFAULT NULL,
+  \`billing_address_id\` int(10) unsigned DEFAULT NULL,
+  \`shipping_note\` text DEFAULT NULL,
+  \`created_at\` timestamp NOT NULL DEFAULT current_timestamp(),
+  \`updated_at\` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp(),
+  PRIMARY KEY (\`cart_id\`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='Cart';
+`);
+
+  await execute(pool, `CREATE TABLE \`cart_address\` (
+  \`cart_address_id\` int(10) unsigned NOT NULL AUTO_INCREMENT,
+  \`full_name\` varchar(255) DEFAULT NULL,
+  \`postcode\` varchar(255) DEFAULT NULL,
+  \`telephone\` varchar(255) DEFAULT NULL,
+  \`country\` varchar(255) DEFAULT NULL,
+  \`province\` varchar(255) DEFAULT NULL,
+  \`city\` varchar(255) DEFAULT NULL,
+  \`address_1\` varchar(255) DEFAULT NULL,
+  \`address_2\` char(255) DEFAULT NULL,
+  PRIMARY KEY (\`cart_address_id\`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='Cart address';
+`);
+
+  await execute(pool, `CREATE TABLE \`cart_item\` (
+  \`cart_item_id\` int(10) unsigned NOT NULL AUTO_INCREMENT,
+  \`cart_id\` int(10) unsigned NOT NULL,
+  \`product_id\` int(10) unsigned NOT NULL,
+  \`product_sku\` varchar(255) NOT NULL,
+  \`product_name\` text NOT NULL,
+  \`product_weight\` decimal(12,4) DEFAULT NULL,
+  \`product_price\` decimal(12,4) NOT NULL,
+  \`product_price_incl_tax\` decimal(12,4) NOT NULL,
+  \`qty\` int(11) NOT NULL,
+  \`final_price\` decimal(12,4) NOT NULL,
+  \`final_price_incl_tax\` decimal(12,4) NOT NULL,
+  \`tax_percent\` decimal(12,4) NOT NULL,
+  \`tax_amount\` decimal(12,4) NOT NULL,
+  \`discount_amount\` decimal(12,4) NOT NULL,
+  \`total\` decimal(12,4) NOT NULL,
+  \`variant_group_id\` int(10) unsigned DEFAULT NULL,
+  \`variant_options\` text DEFAULT NULL,
+  \`product_custom_options\` text DEFAULT NULL,
+  \`created_at\` timestamp NOT NULL DEFAULT current_timestamp(),
+  \`updated_at\` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp(),
+  PRIMARY KEY (\`cart_item_id\`),
+  KEY \`FK_CART_ITEM\` (\`cart_id\`),
+  KEY \`FK_CART_ITEM_PRODUCT\` (\`product_id\`),
+  CONSTRAINT \`FK_CART_ITEM\` FOREIGN KEY (\`cart_id\`) REFERENCES \`cart\` (\`cart_id\`) ON DELETE CASCADE ON UPDATE CASCADE,
+  CONSTRAINT \`FK_CART_ITEM_PRODUCT\` FOREIGN KEY (\`product_id\`) REFERENCES \`product\` (\`product_id\`) ON DELETE CASCADE ON UPDATE NO ACTION
+) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='Cart item';
+`);
+
+  await execute(pool, `CREATE TABLE \`order\` (
+  \`order_id\` int(10) unsigned NOT NULL AUTO_INCREMENT,
+  \`order_number\` varchar(255) NOT NULL,
+  \`cart_id\` int(10) unsigned NOT NULL,
+  \`currency\` varchar(11) NOT NULL,
+  \`customer_id\` int(10) unsigned DEFAULT NULL,
+  \`customer_email\` varchar(255) DEFAULT NULL,
+  \`customer_full_name\` varchar(255) DEFAULT NULL,
+  \`user_ip\` varchar(255) DEFAULT NULL,
+  \`user_agent\` varchar(255) DEFAULT NULL,
+  \`coupon\` varchar(255) DEFAULT NULL,
+  \`shipping_fee_excl_tax\` decimal(12,4) DEFAULT NULL,
+  \`shipping_fee_incl_tax\` decimal(12,4) DEFAULT NULL,
+  \`discount_amount\` decimal(12,4) DEFAULT NULL,
+  \`sub_total\` decimal(12,4) NOT NULL,
+  \`total_qty\` int(10) unsigned NOT NULL,
+  \`total_weight\` decimal(12,4) DEFAULT NULL,
+  \`tax_amount\` decimal(12,4) NOT NULL,
+  \`shipping_note\` text DEFAULT NULL,
+  \`grand_total\` decimal(12,4) NOT NULL,
+  \`shipping_method\` varchar(255) DEFAULT NULL,
+  \`shipping_method_name\` char(255) DEFAULT NULL,
+  \`shipping_address_id\` int(10) unsigned DEFAULT NULL,
+  \`payment_method\` varchar(255) DEFAULT NULL,
+  \`payment_method_name\` char(255) DEFAULT NULL,
+  \`billing_address_id\` int(10) unsigned DEFAULT NULL,
+  \`shipment_status\` varchar(255) NOT NULL DEFAULT '0',
+  \`payment_status\` varchar(255) NOT NULL DEFAULT '0',
+  \`created_at\` timestamp NOT NULL DEFAULT current_timestamp(),
+  \`updated_at\` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp(),
+  PRIMARY KEY (\`order_id\`),
+  UNIQUE KEY \`ORDER_NUMBER_UNIQUE\` (\`order_number\`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='Order';
+`);
+
+  await execute(pool, `CREATE TABLE \`order_activity\` (
+  \`order_activity_id\` int(10) unsigned NOT NULL AUTO_INCREMENT,
+  \`order_activity_order_id\` int(10) unsigned NOT NULL,
+  \`comment\` text NOT NULL,
+  \`customer_notified\` smallint(5) unsigned NOT NULL,
+  \`created_at\` timestamp NOT NULL DEFAULT current_timestamp(),
+  \`updated_at\` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp(),
+  PRIMARY KEY (\`order_activity_id\`),
+  KEY \`FK_ORDER_ACTIVITY\` (\`order_activity_order_id\`),
+  CONSTRAINT \`FK_ORDER_ACTIVITY\` FOREIGN KEY (\`order_activity_order_id\`) REFERENCES \`order\` (\`order_id\`) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='Order activity';
+`);
+
+  await execute(pool, `CREATE TABLE \`order_address\` (
+  \`order_address_id\` int(10) unsigned NOT NULL AUTO_INCREMENT,
+  \`full_name\` varchar(255) DEFAULT NULL,
+  \`postcode\` varchar(255) DEFAULT NULL,
+  \`telephone\` varchar(255) DEFAULT NULL,
+  \`country\` varchar(255) DEFAULT NULL,
+  \`province\` varchar(255) DEFAULT NULL,
+  \`city\` varchar(255) DEFAULT NULL,
+  \`address_1\` varchar(255) DEFAULT NULL,
+  \`address_2\` varchar(255) DEFAULT NULL,
+  PRIMARY KEY (\`order_address_id\`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='Order address';
+`);
+
+  await execute(pool, `CREATE TABLE \`order_item\` (
+  \`order_item_id\` int(10) unsigned NOT NULL AUTO_INCREMENT,
+  \`order_item_order_id\` int(10) unsigned NOT NULL,
+  \`product_id\` int(10) unsigned NOT NULL,
+  \`referer\` int(10) unsigned DEFAULT NULL,
+  \`product_sku\` varchar(255) NOT NULL,
+  \`product_name\` text NOT NULL,
+  \`product_weight\` decimal(12,4) DEFAULT NULL,
+  \`product_price\` decimal(12,4) NOT NULL,
+  \`product_price_incl_tax\` decimal(12,4) NOT NULL,
+  \`qty\` int(11) NOT NULL,
+  \`final_price\` decimal(12,4) NOT NULL,
+  \`final_price_incl_tax\` decimal(12,4) NOT NULL,
+  \`tax_percent\` decimal(12,4) NOT NULL,
+  \`tax_amount\` decimal(12,4) NOT NULL,
+  \`discount_amount\` decimal(12,4) NOT NULL,
+  \`total\` decimal(12,4) NOT NULL,
+  \`variant_group_id\` int(10) unsigned DEFAULT NULL,
+  \`variant_options\` text DEFAULT NULL,
+  \`product_custom_options\` text DEFAULT NULL,
+  \`requested_data\` text DEFAULT NULL,
+  PRIMARY KEY (\`order_item_id\`),
+  KEY \`FK_ORDER\` (\`order_item_order_id\`),
+  KEY \`FK_PRODUCT\` (\`product_id\`),
+  CONSTRAINT \`FK_ORDER\` FOREIGN KEY (\`order_item_order_id\`) REFERENCES \`order\` (\`order_id\`) ON DELETE CASCADE,
+  CONSTRAINT \`FK_PRODUCT\` FOREIGN KEY (\`product_id\`) REFERENCES \`product\` (\`product_id\`) ON DELETE NO ACTION ON UPDATE NO ACTION
+) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='Order item';
+`);
+
+  await execute(pool, `CREATE TABLE \`payment_transaction\` (
+  \`payment_transaction_id\` int(10) unsigned NOT NULL AUTO_INCREMENT,
+  \`payment_transaction_order_id\` int(10) unsigned NOT NULL,
+  \`transaction_id\` varchar(100) DEFAULT NULL,
+  \`transaction_type\` char(255) NOT NULL,
+  \`amount\` decimal(12,4) NOT NULL,
+  \`parent_transaction_id\` varchar(100) DEFAULT NULL,
+  \`payment_action\` varchar(15) DEFAULT NULL,
+  \`additional_information\` text DEFAULT NULL,
+  \`created_at\` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp(),
+  PRIMARY KEY (\`payment_transaction_id\`),
+  UNIQUE KEY \`UNQ_PAYMENT_TRANSACTION_ID_ORDER_ID\` (\`payment_transaction_order_id\`,\`transaction_id\`),
+  CONSTRAINT \`FK_PAYMENT_TRANSACTION_ORDER\` FOREIGN KEY (\`payment_transaction_order_id\`) REFERENCES \`order\` (\`order_id\`) ON DELETE CASCADE ON UPDATE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='Payment transaction';
+`);
+
+  await execute(pool, `CREATE TABLE \`shipment\` (
+  \`shipment_id\` int(10) unsigned NOT NULL AUTO_INCREMENT,
+  \`shipment_order_id\` int(10) unsigned NOT NULL,
+  \`carrier_name\` varchar(255) DEFAULT NULL,
+  \`tracking_number\` varchar(255) DEFAULT NULL,
+  \`created_at\` timestamp NOT NULL DEFAULT current_timestamp(),
+  \`updated_at\` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp(),
+  PRIMARY KEY (\`shipment_id\`),
+  KEY \`FK_ORDER_SHIPMENT\` (\`shipment_order_id\`),
+  CONSTRAINT \`FK_ORDER_SHIPMENT\` FOREIGN KEY (\`shipment_order_id\`) REFERENCES \`order\` (\`order_id\`) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='Shipment';
+`);
+};

package/src/modules/checkout/migration/Version-1.0.1.js

@@ -0,0 +1,10 @@
+const { execute } = require('@evershop/mysql-query-builder');
+const { pool } = require('../../../lib/mysql/connection');
+
+// eslint-disable-next-line no-multi-assign
+module.exports = exports = async () => {
+  await execute(pool, `ALTER TABLE \`cart\` ADD \`sid\` text DEFAULT NULL AFTER \`user_ip\``);
+  await execute(pool, `ALTER TABLE \`order\` ADD \`sid\` text DEFAULT NULL AFTER \`user_ip\``);
+  await execute(pool, `ALTER TABLE \`cart_item\` ADD \`thumbnail\` text DEFAULT NULL AFTER \`product_name\``);
+  await execute(pool, `ALTER TABLE \`order_item\` ADD \`thumbnail\` text DEFAULT NULL AFTER \`product_name\``);
+};

package/src/modules/checkout/migration/Version-1.0.2.js

@@ -0,0 +1,14 @@
+const { execute } = require('@evershop/mysql-query-builder');
+const { pool } = require('../../../lib/mysql/connection');
+
+// eslint-disable-next-line no-multi-assign
+module.exports = exports = async () => {
+  await execute(pool, `ALTER TABLE \`cart\` ADD \`uuid\` varchar(255) DEFAULT replace(uuid(),'-','') AFTER \`cart_id\``);
+  await execute(pool, `ALTER TABLE \`order\` ADD \`uuid\` varchar(255) DEFAULT replace(uuid(),'-','') AFTER \`order_id\``);
+  await execute(pool, `ALTER TABLE \`cart_item\` ADD \`uuid\` varchar(255) DEFAULT replace(uuid(),'-','') AFTER \`cart_item_id\``);
+  await execute(pool, `ALTER TABLE \`order_item\` ADD \`uuid\` varchar(255) DEFAULT replace(uuid(),'-','') AFTER \`order_item_id\``);
+  await execute(pool, `ALTER TABLE \`cart_address\` ADD \`uuid\` varchar(255) DEFAULT replace(uuid(),'-','') AFTER \`cart_address_id\``);
+  await execute(pool, `ALTER TABLE \`order_address\` ADD \`uuid\` varchar(255) DEFAULT replace(uuid(),'-','') AFTER \`order_address_id\``);
+  await execute(pool, `ALTER TABLE \`payment_transaction\` ADD \`uuid\` varchar(255) DEFAULT replace(uuid(),'-','') AFTER \`payment_transaction_id\``);
+  await execute(pool, `ALTER TABLE \`shipment\` ADD \`uuid\` varchar(255) DEFAULT replace(uuid(),'-','') AFTER \`shipment_id\``);
+};

package/src/modules/checkout/pages/admin/all/CheckoutMenuGroup.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import Icon from '@heroicons/react/solid/esm/CubeIcon';
+import NavigationItemGroup from '../../../../cms/components/admin/NavigationItemGroup';
+
+export default function CheckoutMenuGroup({ orderGrid }) {
+  return <NavigationItemGroup
+    id="checkoutMenuGroup"
+    name="Sale"
+    items={[
+      {
+        Icon: Icon,
+        url: orderGrid,
+        title: "Orders"
+      }
+    ]}
+  />
+}
+
+export const layout = {
+  areaId: 'adminMenu',
+  sortOrder: 40
+}
+
+export const query = `
+  query Query {
+    orderGrid: url(routeId:"orderGrid")
+  }
+`

package/src/modules/checkout/pages/admin/dashboard/Bestcustomers.js

@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { useAppState } from '../../../../../lib/context/app';
+import { Card } from '../../../../cms/components/admin/Card';
+
+export default function BestCustomers({ listUrl }) {
+  const context = useAppState();
+  const currency = context.currency || 'USD';
+  const customers = context.bestCustomers || [];
+
+  return (
+    <Card
+      title="Best customers"
+      actions={[{ name: 'All customers', onAction: () => { window.location.href = listUrl; } }]}
+    >
+      <Card.Session>
+        <table className="listing">
+          <thead>
+            <tr>
+              <th>Full name</th>
+              <th>Orders</th>
+              <th>Total</th>
+            </tr>
+          </thead>
+          <tbody>
+            {customers.map((c, i) => {
+              const grandTotal = new Intl.NumberFormat('en', { style: 'currency', currency }).format(c.total);
+              return (
+                // eslint-disable-next-line react/no-array-index-key
+                <tr key={i}>
+                  <td><a href={c.editUrl || ''}>{c.full_name}</a></td>
+                  <td>{c.orders}</td>
+                  <td>{grandTotal}</td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </Card.Session>
+    </Card>
+  );
+}
+
+BestCustomers.propTypes = {
+  listUrl: PropTypes.string.isRequired
+};

package/src/modules/checkout/pages/admin/dashboard/Bestsellers.js

@@ -0,0 +1,99 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { useAppState } from '../../../../../lib/context/app';
+import { Card } from '../../../../cms/components/admin/Card';
+import './Bestsellers.scss';
+
+export default function BestSellers({ api }) {
+  const context = useAppState();
+  const currency = context.currency || 'USD';
+  const [products, setProducts] = React.useState([]);
+  const [fetching, setFetching] = React.useState(true);
+
+  React.useEffect(() => {
+    if (window !== undefined) {
+      fetch(api, {
+        method: 'POST', // or 'PUT'
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })
+        .then((response) => response.json())
+        .then((json) => {
+          setProducts(json);
+          setFetching(false);
+        })
+        .catch((error) => {
+          toast.error(error.message);
+        });
+    }
+  }, []);
+  if (fetching) {
+    return <Card
+      title="Best Sellers"
+    >
+      <div className='skeleton-wrapper-bestsellers'>
+        <div class="skeleton"></div>
+        <div class="skeleton"></div>
+        <div class="skeleton"></div>
+        <div class="skeleton"></div>
+        <div class="skeleton"></div>
+      </div>
+    </Card>
+
+  } else {
+    return (
+      <Card
+        title="Best Sellers"
+        actions={[{ name: 'All products', onAction: () => { window.location.href = listUrl; } }]}
+      >
+        <Card.Session>
+          <table className="listing bestsellers">
+            <tbody>
+              {products.map((p, i) => {
+                const formatedPrice = new Intl.NumberFormat('en', { style: 'currency', currency }).format(p.price);
+                return (
+                  // eslint-disable-next-line react/no-array-index-key
+                  <tr key={i}>
+                    <td>
+                      <div className="grid-thumbnail text-border border border-divider p-075 rounded flex justify-center" style={{ width: '6rem', height: '6rem' }}>
+                        {p.imageUrl && <img className="self-center" src={p.imageUrl} alt="" />}
+                        {!p.imageUrl && (
+                          <svg className="self-center" xmlns="http://www.w3.org/2000/svg" width="2rem" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                          </svg>
+                        )}
+                      </div>
+                    </td>
+                    <td><a href={p.editUrl || ''} className="font-semibold hover:underline">{p.name}</a></td>
+                    <td>{formatedPrice}</td>
+                    <td>
+                      {p.qty}
+                      {' '}
+                      solded
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </Card.Session>
+      </Card>
+    );
+  }
+}
+
+BestSellers.propTypes = {
+  listUrl: PropTypes.string.isRequired
+};
+
+export const layout = {
+  areaId: 'leftSide',
+  sortOrder: 20
+}
+
+export const query = `
+  query Query {
+    api: url(routeId: "bestsellers")
+  }
+`

package/src/modules/checkout/pages/admin/dashboard/Bestsellers.scss

@@ -0,0 +1,51 @@
+.bestsellers {
+    td,
+    th {
+        &:first-child {
+            padding-left: 0;
+        }
+        &:last-child {
+            padding-right: 0;
+            text-align: right;
+        }
+    }
+    tr {
+        &:first-child {
+            td {
+                border-top: 0;
+            }
+        }
+        &:last-child {
+            td {
+                border-bottom: 0;
+            }
+        }
+    }
+
+        
+}
+.skeleton-wrapper-bestsellers {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    padding: 20px;
+    box-sizing: border-box;
+    .skeleton:empty {
+            width: 100%;
+            height: 50px;
+            margin-top: 10px;
+            cursor: progress;
+            background:
+                linear-gradient(0.25turn, transparent, #fff, transparent),
+                linear-gradient(#eee, #eee);
+            background-repeat: no-repeat;
+            animation: loading 1.5s infinite;
+        }
+    
+        @keyframes loading {
+            to {
+                background-position: 315px 0, 0 0, 0 190px, 50px 195px;
+            }
+        }
+}

package/src/modules/checkout/pages/admin/dashboard/Lifetimesales.js

@@ -0,0 +1,134 @@
+/* eslint-disable camelcase */
+import React from 'react';
+import {
+  PieChart, Pie, Cell, ResponsiveContainer
+} from 'recharts';
+import { toast } from 'react-toastify';
+import Dot from '../../../../../lib/components/Dot';
+import { Card } from '../../../../cms/components/admin/Card';
+import './Lifetimesales.scss';
+
+const COLORS = ['#aee9d1', '#fed3d1', '#a4e8f2'];
+
+export default function LifetimeSale({ api }) {
+  const [data, setData] = React.useState({});
+  const [fetching, setFetching] = React.useState(true);
+  const {
+    orders, total, completed_percentage, cancelled_percentage
+  } = data;
+
+  const chartData = [
+    { name: 'Completed', value: completed_percentage },
+    { name: 'Cancelled', value: cancelled_percentage },
+    { name: 'Others', value: 100 - completed_percentage - cancelled_percentage }
+  ];
+
+  React.useEffect(() => {
+    if (window !== undefined) {
+      fetch(api, {
+        method: 'POST', // or 'PUT'
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })
+        .then((response) => response.json())
+        .then((json) => {
+          setData(json);
+          setFetching(false);
+        })
+        .catch((error) => {
+          toast.error(error.message);
+        });
+    }
+  }, []);
+
+  if (fetching) {
+    return <Card
+      title="Lifetime Sale"
+    >
+      <Card.Session>
+        <div className='skeleton-wrapper-lifetime'>
+          <div class="skeleton"></div>
+          <div class="skeleton"></div>
+          <div class="skeleton"></div>
+          <div class="skeleton"></div>
+        </div>
+      </Card.Session>
+      <Card.Session>
+        <div className='skeleton-wrapper-lifetime'>
+          <div class="skeleton-chart"></div>
+        </div>
+      </Card.Session>
+    </Card>
+  } else {
+    return (
+      <Card title="Lifetime Sale">
+        <Card.Session>
+          <div className="grid grid-cols-1 gap-1">
+            <div className="flex space-x-1 items-center">
+              <Dot variant="info" />
+              <div className="self-center">
+                {orders}
+                {' '}
+                orders
+              </div>
+            </div>
+            <div className="flex space-x-1 items-center">
+              <Dot variant="info" />
+              <div className="self-center">
+                {total}
+                {' '}
+                lifetime sale
+              </div>
+            </div>
+            <div className="flex space-x-1 items-center">
+              <Dot variant="success" />
+              <div className="self-center">
+                {completed_percentage}
+                % of orders completed
+              </div>
+            </div>
+            <div className="flex space-x-1 items-center">
+              <Dot variant="critical" />
+              <div className="self-center">
+                {cancelled_percentage}
+                % of orders cancelled
+              </div>
+            </div>
+          </div>
+        </Card.Session>
+        <Card.Session>
+          <div style={{ height: '200px' }}>
+            <ResponsiveContainer width="100%" height="100%">
+              <PieChart>
+                <Pie
+                  data={chartData}
+                  labelLine={false}
+                  fill="#8884d8"
+                  dataKey="value"
+                  label
+                >
+                  {
+                    // eslint-disable-next-line react/no-array-index-key
+                    chartData.map((entry, index) => <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />)
+                  }
+                </Pie>
+              </PieChart>
+            </ResponsiveContainer>
+          </div>
+        </Card.Session>
+      </Card>
+    );
+  }
+}
+
+export const layout = {
+  areaId: 'rightSide',
+  sortOrder: 10
+}
+
+export const query = `
+  query Query {
+    api: url(routeId: "lifetimesales")
+  }
+`

package/src/modules/checkout/pages/admin/dashboard/Lifetimesales.scss

@@ -0,0 +1,33 @@
+.skeleton-wrapper-lifetime {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  .skeleton-chart:empty {
+      width: 200px;
+      height: 200px;
+      border-radius: 50%;
+      cursor: progress;
+      background:
+        linear-gradient(0.25turn, transparent, #fff, transparent),
+        linear-gradient(#eee, #eee);
+      background-repeat: no-repeat;
+      animation: loading 1.5s infinite;
+    }
+    .skeleton:empty {
+      width: 100%;
+      height: 15px;
+      margin-top: 5px;
+      cursor: progress;
+      background:
+        linear-gradient(0.25turn, transparent, #fff, transparent),
+        linear-gradient(#eee, #eee);
+      background-repeat: no-repeat;
+      animation: loading 1.5s infinite;
+    }
+    @keyframes loading {
+      to {
+        background-position: 315px 0, 0 0, 0 190px, 50px 195px;
+      }
+    }
+}