refactored code and fixed issues

themewagon · Jun 11, 2024 · cb30d18 · cb30d18
1 parent 04e96e4
commit cb30d18
Show file tree

Hide file tree

Showing 14 changed files with 107 additions and 100 deletions.
diff --git a/index.html b/index.html
@@ -4,17 +4,8 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/dashdarkx.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap"
-      rel="stylesheet"
-    />
-
     <title>DahsdarkX</title>
   </head>
-
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>

diff --git a/src/components/sections/dashboard/orders-status/OrdersStatusTable.tsx b/src/components/sections/dashboard/orders-status/OrdersStatusTable.tsx
@@ -114,7 +114,7 @@ const OrdersStatusTable = ({ searchText }: OrdersStatusTableProps) => {
           </Stack>
         );
       },
-      sortComparator: (v1, v2) => v1.name.localeCompare(v2.name),
+      sortComparator: (v1, v2) => v1.localeCompare(v2),
     },
     {
       field: 'date',
@@ -295,6 +295,7 @@ const OrdersStatusTable = ({ searchText }: OrdersStatusTableProps) => {
       }}
       checkboxSelection
       pageSizeOptions={[6]}
+      disableColumnMenu
       disableVirtualization
       disableRowSelectionOnClick
       rowModesModel={rowModesModel}

diff --git a/src/data/ordersStatusData.ts b/src/data/ordersStatusData.ts
@@ -1,4 +1,5 @@
 import { GridRowsProp } from '@mui/x-data-grid';
+import { formatNumber } from 'functions/formatNumber';
 
 export const ordersStatusData: GridRowsProp = [
   {
@@ -7,94 +8,94 @@ export const ordersStatusData: GridRowsProp = [
     date: new Date('Jan 30, 2024'),
     status: 'delivered',
     country: 'United States',
-    total: '$ 1,099.24',
+    total: formatNumber(1099.24),
   },
   {
     id: '#1531',
     client: { name: 'Sophie Moore', email: 'contact@sophiemoore.com' },
     date: new Date('Jan 27, 2024'),
     status: 'canceled',
     country: 'United Kingdom',
-    total: '$ 5,870.32',
+    total: formatNumber(5870.32),
   },
   {
     id: '#1530',
     client: { name: 'Matt Cannon', email: 'info@mattcannon.com' },
     date: new Date('Jan 24, 2024'),
     status: 'delivered',
     country: 'Australia',
-    total: '$ 13,899.48',
+    total: formatNumber(13899.48),
   },
   {
     id: '#1529',
     client: { name: 'Graham Hills', email: 'hi@grahamhills.com' },
     date: new Date('Jan 21, 2024'),
     status: 'pending',
     country: 'India',
-    total: '$ 1,569.12',
+    total: formatNumber(1569.12),
   },
   {
     id: '#1528',
     client: { name: 'Sandy Houston', email: 'contact@sandyhouston.com' },
     date: new Date('Jan 18, 2024'),
     status: 'delivered',
     country: 'Canada',
-    total: '$ 899.16',
+    total: formatNumber(899.16),
   },
   {
     id: '#1527',
     client: { name: 'Andy Smith', email: 'hello@andysmith.com' },
     date: new Date('Jan 15, 2024'),
     status: 'pending',
     country: 'United States',
-    total: '$ 2,449.64',
+    total: formatNumber(2449.64),
   },
   {
     id: '#1526',
     client: { name: 'Emma Grace', email: 'wow@emmagrace.com' },
     date: new Date('Jan 12, 2024'),
     status: 'delivered',
     country: 'Australia',
-    total: '$ 6729.82',
+    total: formatNumber(6729.82),
   },
   {
     id: '#1525',
     client: { name: 'Ava Rose', email: 'me@avarose.com' },
     date: new Date('Jan 09, 2024'),
     status: 'canceled',
     country: 'Canada',
-    total: '$ 784.94',
+    total: formatNumber(784.94),
   },
   {
     id: '#1524',
     client: { name: 'Olivia Jane', email: 'info@oliviajane.com' },
     date: new Date('Jan 06, 2024'),
     status: 'pending',
     country: 'Singapur',
-    total: '$ 1247.86',
+    total: formatNumber(1247.86),
   },
   {
     id: '#1523',
     client: { name: 'Mason Alexander', email: 'myinfo@alexander.com' },
     date: new Date('Jan 03, 2024'),
     status: 'delivered',
     country: 'United States',
-    total: '$ 304.89',
+    total: formatNumber(304.89),
   },
   {
     id: '#1522',
     client: { name: 'Samuel David', email: 'me@samueldavid.com' },
     date: new Date('Jan 01, 2024'),
     status: 'pending',
     country: 'Japan',
-    total: '$ 2209.76',
+    total: formatNumber(2209.76),
   },
   {
     id: '#1521',
     client: { name: 'Henry Joseph', email: 'contact@henryjoseph.com' },
     date: new Date('Dec 28, 2023'),
     status: 'delivered',
     country: 'North Korea',
-    total: '$ 5245.68',
+    total: formatNumber(5245.68),
   },
 ];
diff --git a/src/functions/formatNumber.ts b/src/functions/formatNumber.ts
@@ -0,0 +1,17 @@
+interface FormatOptions {
+  style: string;
+  currency: string;
+  maximumFractionDigits?: number;
+  minimumFractionDigits?: number;
+}
+
+export const formatNumber = (
+  price: number,
+  format: string = 'en-IN',
+  options: FormatOptions = { style: 'currency', currency: 'USD' },
+): string => {
+  return new Intl.NumberFormat(format, {
+    style: options.style,
+    currency: options.currency,
+  }).format(price);
+};
diff --git a/src/index.css b/src/index.css
@@ -1,3 +1,7 @@
+/* google fonts */
+@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
+
+/* external fonts */
 @font-face {
   font-family: 'Mona Sans';
   src:

diff --git a/src/layouts/main-layout/Footer.tsx b/src/layouts/main-layout/Footer.tsx
@@ -6,9 +6,10 @@ const Footer = () => {
     <Typography
       mt={1}
       px={1}
+      pb={{ xs: 1.5, sm: 1, lg: 0 }}
       color="text.secondary"
       variant="body2"
-      align="right"
+      sx={{ textAlign: { xs: 'center', md: 'right' } }}
       letterSpacing={0.5}
     >
       Made with ❤️ by{' '}

diff --git a/src/theme/colors.ts b/src/theme/colors.ts
@@ -1,11 +1,11 @@
 export const grey = {
   50: '#F7FAFC',
-  100: '#D9E1FA', // A
-  200: '#D1DBF9', // B
-  300: '#AEB9E1', // C
-  400: '#7E89AC', // D
+  100: '#D9E1FA',
+  200: '#D1DBF9',
+  300: '#AEB9E1',
+  400: '#7E89AC',
   500: '#4A5568',
-  600: '#343B4F', // E
+  600: '#343B4F',
   700: '#2D3748',
   800: '#1A202C',
   900: '#171923',
@@ -17,7 +17,7 @@ export const red = {
   200: '#FF9298',
   300: '#FF6971',
   400: '#FF404A',
-  500: '#FF5A65', // A
+  500: '#FF5A65',
   600: '#E04650',
   700: '#C0333B',
   800: '#A02026',
@@ -30,7 +30,7 @@ export const green = {
   200: '#8CE6B9',
   300: '#61DD9F',
   400: '#35D486',
-  500: '#14CA74', // A
+  500: '#14CA74',
   600: '#12B368',
   700: '#0F9C5B',
   800: '#0D844E',
@@ -40,27 +40,27 @@ export const green = {
 export const blue = {
   50: '#D8E3FF',
   100: '#8AADFF',
-  200: '#0E43FB', // A
+  200: '#0E43FB',
   300: '#0825E5',
   400: '#071FAD',
-  500: '#082366', // B
+  500: '#082366',
   600: '#0A1D50',
-  700: '#0B1739', // C
-  800: '#0A1330', // D
-  900: '#081028', // E
+  700: '#0B1739',
+  800: '#0A1330',
+  900: '#081028',
 };
 
 export const cyan = {
   50: '#E6F9FF',
   100: '#B3ECFF',
   200: '#80DFFF',
   300: '#4DD2FF',
-  400: '#21C3FC', // A
-  500: '#00C2FF', // B
+  400: '#21C3FC',
+  500: '#00C2FF',
   600: '#1A9FB3',
   700: '#177999',
   800: '#135E80',
-  900: '#004466', // C
+  900: '#004466',
 };
 
 export const violate = {
@@ -70,7 +70,7 @@ export const violate = {
   300: '#AF6AF9',
   400: '#A458F6',
   500: '#8A31F2',
-  600: '#7F25FB', // A
+  600: '#7F25FB',
   700: '#7E22EE',
   800: '#7217E9',
   900: '#660DE4',
@@ -82,10 +82,10 @@ export const purple = {
   200: '#D5A7FF',
   300: '#CA9AFF',
   400: '#BF8CFF',
-  500: '#CB3CFF', // A
+  500: '#CB3CFF',
   600: '#A324CC',
   700: '#7D1A99',
-  800: '#552266', // B
+  800: '#552266',
   900: '#3B004D',
 };
 
@@ -95,7 +95,7 @@ export const indigo = {
   200: '#9E68FF',
   300: '#A972FF',
   400: '#9160FF',
-  500: '#8951FF', // A
+  500: '#8951FF',
   600: '#8257FF',
   700: '#7A4FFF',
   800: '#7147FF',
@@ -108,7 +108,7 @@ export const yellow = {
   200: '#FFE066',
   300: '#FFD31A',
   400: '#FFC107',
-  500: '#FDB52A', // A
+  500: '#FDB52A',
   600: '#E0A600',
   700: '#B38F00',
   800: '#806600',

diff --git a/src/theme/components/layout/Toolbar.tsx → src/theme/components/button/Toolbar.tsx b/src/theme/components/layout/Toolbar.tsx → src/theme/components/button/Toolbar.tsx
diff --git a/src/theme/components/data-grid/DataGrid.tsx b/src/theme/components/data-grid/DataGrid.tsx
@@ -73,16 +73,20 @@ const DataGrid: Components<Omit<Theme, 'components'>>['MuiDataGrid'] = {
       borderStyle: 'solid',
       borderColor: `${theme.palette.info.darker} !important`,
     }),
+    columnSeparator: {
+      display: 'none',
+    },
     selectedRowCount: {
       display: 'none',
     },
     sortIcon: ({ theme }) => ({
       color: theme.palette.text.secondary,
     }),
-    menuIcon: ({ theme }) => ({
-      '& .MuiDataGrid-menuIconButton': {
-        color: theme.palette.text.secondary,
-      },
+    menuIconButton: ({ theme }) => ({
+      color: theme.palette.text.secondary,
+    }),
+    overlay: ({ theme }) => ({
+      backgroundColor: theme.palette.info.dark,
     }),
   },
 };

diff --git a/src/theme/components/layout/Drawer.tsx → src/theme/components/navigation/Drawer.tsx b/src/theme/components/layout/Drawer.tsx → src/theme/components/navigation/Drawer.tsx
diff --git a/src/theme/components/pagination/Pagination.tsx b/src/theme/components/pagination/Pagination.tsx
diff --git a/src/theme/components/layout/Paper.tsx → src/theme/components/surfaces/Paper.tsx b/src/theme/components/layout/Paper.tsx → src/theme/components/surfaces/Paper.tsx
diff --git a/src/theme/components/CssBaseline.tsx → src/theme/components/utils/CssBaseline.tsx b/src/theme/components/CssBaseline.tsx → src/theme/components/utils/CssBaseline.tsx