diff --git a/index.html b/index.html
index 2935757..90bdb4c 100644
--- a/index.html
+++ b/index.html
@@ -4,17 +4,8 @@
-
-
-
-
-
DahsdarkX
-
diff --git a/src/components/sections/dashboard/orders-status/OrdersStatusTable.tsx b/src/components/sections/dashboard/orders-status/OrdersStatusTable.tsx
index 56cebb9..0f730a2 100644
--- 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) => {
);
},
- 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
index df6dbae..b9f1d0c 100644
--- 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,7 +8,7 @@ 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',
@@ -15,7 +16,7 @@ export const ordersStatusData: GridRowsProp = [
date: new Date('Jan 27, 2024'),
status: 'canceled',
country: 'United Kingdom',
- total: '$ 5,870.32',
+ total: formatNumber(5870.32),
},
{
id: '#1530',
@@ -23,7 +24,7 @@ export const ordersStatusData: GridRowsProp = [
date: new Date('Jan 24, 2024'),
status: 'delivered',
country: 'Australia',
- total: '$ 13,899.48',
+ total: formatNumber(13899.48),
},
{
id: '#1529',
@@ -31,7 +32,7 @@ export const ordersStatusData: GridRowsProp = [
date: new Date('Jan 21, 2024'),
status: 'pending',
country: 'India',
- total: '$ 1,569.12',
+ total: formatNumber(1569.12),
},
{
id: '#1528',
@@ -39,7 +40,7 @@ export const ordersStatusData: GridRowsProp = [
date: new Date('Jan 18, 2024'),
status: 'delivered',
country: 'Canada',
- total: '$ 899.16',
+ total: formatNumber(899.16),
},
{
id: '#1527',
@@ -47,7 +48,7 @@ export const ordersStatusData: GridRowsProp = [
date: new Date('Jan 15, 2024'),
status: 'pending',
country: 'United States',
- total: '$ 2,449.64',
+ total: formatNumber(2449.64),
},
{
id: '#1526',
@@ -55,7 +56,7 @@ export const ordersStatusData: GridRowsProp = [
date: new Date('Jan 12, 2024'),
status: 'delivered',
country: 'Australia',
- total: '$ 6729.82',
+ total: formatNumber(6729.82),
},
{
id: '#1525',
@@ -63,7 +64,7 @@ export const ordersStatusData: GridRowsProp = [
date: new Date('Jan 09, 2024'),
status: 'canceled',
country: 'Canada',
- total: '$ 784.94',
+ total: formatNumber(784.94),
},
{
id: '#1524',
@@ -71,7 +72,7 @@ export const ordersStatusData: GridRowsProp = [
date: new Date('Jan 06, 2024'),
status: 'pending',
country: 'Singapur',
- total: '$ 1247.86',
+ total: formatNumber(1247.86),
},
{
id: '#1523',
@@ -79,7 +80,7 @@ export const ordersStatusData: GridRowsProp = [
date: new Date('Jan 03, 2024'),
status: 'delivered',
country: 'United States',
- total: '$ 304.89',
+ total: formatNumber(304.89),
},
{
id: '#1522',
@@ -87,7 +88,7 @@ export const ordersStatusData: GridRowsProp = [
date: new Date('Jan 01, 2024'),
status: 'pending',
country: 'Japan',
- total: '$ 2209.76',
+ total: formatNumber(2209.76),
},
{
id: '#1521',
@@ -95,6 +96,6 @@ export const ordersStatusData: GridRowsProp = [
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
new file mode 100644
index 0000000..e87e03a
--- /dev/null
+++ 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
index aa93eed..300103d 100644
--- 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
index 10a3ba8..db8ee41 100644
--- a/src/layouts/main-layout/Footer.tsx
+++ b/src/layouts/main-layout/Footer.tsx
@@ -6,9 +6,10 @@ const Footer = () => {
Made with ❤️ by{' '}
diff --git a/src/theme/colors.ts b/src/theme/colors.ts
index 38662f8..bb377a0 100644
--- 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,14 +40,14 @@ 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 = {
@@ -55,12 +55,12 @@ export const cyan = {
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 b/src/theme/components/button/Toolbar.tsx
similarity index 100%
rename from src/theme/components/layout/Toolbar.tsx
rename to src/theme/components/button/Toolbar.tsx
diff --git a/src/theme/components/data-grid/DataGrid.tsx b/src/theme/components/data-grid/DataGrid.tsx
index f682743..d94dffe 100644
--- a/src/theme/components/data-grid/DataGrid.tsx
+++ b/src/theme/components/data-grid/DataGrid.tsx
@@ -73,16 +73,20 @@ const DataGrid: 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 b/src/theme/components/navigation/Drawer.tsx
similarity index 100%
rename from src/theme/components/layout/Drawer.tsx
rename to src/theme/components/navigation/Drawer.tsx
diff --git a/src/theme/components/pagination/Pagination.tsx b/src/theme/components/pagination/Pagination.tsx
deleted file mode 100644
index 0f8ad90..0000000
--- a/src/theme/components/pagination/Pagination.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Theme } from '@mui/material';
-import { Components } from '@mui/material/styles/components';
-
-const Pagination: Components>['MuiPagination'] = {
- styleOverrides: {
- root: {},
- },
-};
-
-export default Pagination;
diff --git a/src/theme/components/layout/Paper.tsx b/src/theme/components/surfaces/Paper.tsx
similarity index 100%
rename from src/theme/components/layout/Paper.tsx
rename to src/theme/components/surfaces/Paper.tsx
diff --git a/src/theme/components/CssBaseline.tsx b/src/theme/components/utils/CssBaseline.tsx
similarity index 100%
rename from src/theme/components/CssBaseline.tsx
rename to src/theme/components/utils/CssBaseline.tsx
diff --git a/src/theme/theme.ts b/src/theme/theme.ts
index 90289bc..f756e97 100644
--- a/src/theme/theme.ts
+++ b/src/theme/theme.ts
@@ -1,72 +1,70 @@
import { createTheme } from '@mui/material/styles';
+import type {} from '@mui/x-data-grid/themeAugmentation';
+import type {} from '@mui/x-date-pickers/themeAugmentation';
import palette from './palette';
import typography from './typography';
import customShadows from './shadows';
import Button from './components/button/Button';
import ButtonBase from './components/button/ButtonBase';
import IconButton from './components/button/IconButton';
-import Stack from './components/layout/Stack';
-import Paper from './components/layout/Paper';
-import Drawer from './components/layout/Drawer';
-import ListItemButton from './components/list/ListItemButton';
-import ListItemIcon from './components/list/ListItemIcon';
-import ListItemText from './components/list/ListItemText';
+import Toolbar from './components/button/Toolbar';
+import Chip from './components/data-display/Chip';
+import Divider from './components/data-display/Divider';
+import DataGrid from './components/data-grid/DataGrid';
+import MonthCalendar from './components/date-picker/MonthCalendar';
+import YearCalendar from './components/date-picker/YearCalendar';
import TextField from './components/inputs/TextField';
import InputBase from './components/inputs/InputBase';
import FilledInput from './components/inputs/FilledInput';
+import OutlinedInput from './components/inputs/OutlinedInput';
import InputAdornment from './components/inputs/InputAdornment';
-import Toolbar from './components/layout/Toolbar';
-import Link from './components/navigation/Link';
-import CssBaseline from './components/CssBaseline';
-import DataGrid from './components/data-grid/DataGrid';
-import Pagination from './components/pagination/Pagination';
-import PaginationItem from './components/pagination/PaginationItem';
-import type {} from '@mui/x-data-grid/themeAugmentation';
-import type {} from '@mui/x-date-pickers/themeAugmentation';
-import Divider from './components/data-display/Divider';
-import Chip from './components/data-display/Chip';
-import MonthCalendar from './components/date-picker/MonthCalendar';
-import YearCalendar from './components/date-picker/YearCalendar';
-import Collapse from './components/list/Collapse';
-import Checkbox from './components/inputs/Checkbox';
import FormControlLabel from './components/inputs/FormControlLabel';
-import OutlinedInput from './components/inputs/OutlinedInput';
-import MenuItem from './components/list/MenuItem';
+import Checkbox from './components/inputs/Checkbox';
+import Stack from './components/layout/Stack';
import List from './components/list/List';
+import ListItemText from './components/list/ListItemText';
+import ListItemIcon from './components/list/ListItemIcon';
+import ListItemButton from './components/list/ListItemButton';
+import Collapse from './components/list/Collapse';
+import MenuItem from './components/list/MenuItem';
+import Link from './components/navigation/Link';
+import Drawer from './components/navigation/Drawer';
+import PaginationItem from './components/pagination/PaginationItem';
+import Paper from './components/surfaces/Paper';
+import CssBaseline from './components/utils/CssBaseline';
export const theme = createTheme({
typography,
palette,
components: {
MuiButton: Button,
- MuiPaper: Paper,
- MuiCollapse: Collapse,
- MuiList: List,
- MuiListItemButton: ListItemButton,
- MuiListItemIcon: ListItemIcon,
- MuiListItemText: ListItemText,
- MuiMenuItem: MenuItem,
- MuiDrawer: Drawer,
- MuiFormControlLabel: FormControlLabel,
- MuiTextField: TextField,
- MuiToolbar: Toolbar,
- MuiCssBaseline: CssBaseline,
- MuiLink: Link,
- MuiStack: Stack,
MuiButtonBase: ButtonBase,
MuiIconButton: IconButton,
+ MuiToolbar: Toolbar,
+ MuiChip: Chip,
+ MuiDivider: Divider,
+ MuiDataGrid: DataGrid,
+ MuiMonthCalendar: MonthCalendar,
+ MuiYearCalendar: YearCalendar,
+ MuiTextField: TextField,
MuiInputBase: InputBase,
- MuiInputAdornment: InputAdornment,
MuiFilledInput: FilledInput,
MuiOutlinedInput: OutlinedInput,
+ MuiInputAdornment: InputAdornment,
+ MuiFormControlLabel: FormControlLabel,
MuiCheckbox: Checkbox,
- MuiDivider: Divider,
- MuiChip: Chip,
- MuiDataGrid: DataGrid,
- MuiPagination: Pagination,
+ MuiStack: Stack,
+ MuiList: List,
+ MuiMenuItem: MenuItem,
+ MuiListItemText: ListItemText,
+ MuiListItemIcon: ListItemIcon,
+ MuiListItemButton: ListItemButton,
+ MuiCollapse: Collapse,
+ MuiLink: Link,
+ MuiDrawer: Drawer,
MuiPaginationItem: PaginationItem,
- MuiMonthCalendar: MonthCalendar,
- MuiYearCalendar: YearCalendar,
+ MuiPaper: Paper,
+ MuiCssBaseline: CssBaseline,
},
customShadows,
spacing: 8,