[];
19 | onSelectAllRows: (checked: boolean) => void;
20 | };
21 |
22 | export function CustomerTableHead({
23 | order,
24 | onSort,
25 | orderBy,
26 | rowCount,
27 | headLabel,
28 | numSelected,
29 | onSelectAllRows,
30 | }: CustomerTableHeadProps) {
31 | return (
32 |
33 |
34 |
35 | 0 && numSelected < rowCount}
37 | checked={rowCount > 0 && numSelected === rowCount}
38 | onChange={(event: React.ChangeEvent) =>
39 | onSelectAllRows(event.target.checked)
40 | }
41 | />
42 |
43 |
44 | {headLabel.map((headCell) => (
45 |
51 | onSort(headCell.id)}
56 | >
57 | {headCell.label}
58 | {orderBy === headCell.id ? (
59 |
60 | {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
61 |
62 | ) : null}
63 |
64 |
65 | ))}
66 |
67 |
68 | );
69 | }
70 |
--------------------------------------------------------------------------------
/public/assets/icons/notification/ic-notification-shipping.svg:
--------------------------------------------------------------------------------
1 |
31 |
32 | Blogs
33 |
34 |
42 |
43 |
44 |
55 |
56 |
57 | {_posts.map((post, index) => {
58 | const latestPostLarge = index === 0;
59 | const latestPost = index === 1 || index === 2;
60 |
61 | return (
62 |
63 |
65 | );
66 | })}
67 |
68 |
69 |
58 |
77 | );
78 | }
79 |
--------------------------------------------------------------------------------
/src/services/orderService.ts:
--------------------------------------------------------------------------------
1 | import { _guid, _orders, _roles } from '../_mock';
2 |
3 |
4 | const KEYS = {
5 | items: "orders",
6 | itemId: "orderId"
7 | };
8 |
9 | export function init() {
10 |
11 | localStorage.setItem(KEYS.items, JSON.stringify(_orders));
12 | }
13 |
14 |
15 |
16 | export function addItem(data: TODO) {
17 | let items = getAllItems();
18 | data["id"] = generateItemId(items.length);
19 | items.push(data);
20 | localStorage.setItem(KEYS.items, JSON.stringify(items));
21 | }
22 |
23 | export function generateItemId(totalCount: number) {
24 | return `${_guid}${(totalCount+1)}`;
25 | }
26 |
27 | export function updateItem(data: TODO) {
28 | let items = getAllItems() as TODO;
29 | let index = items.findIndex((a: TODO) => a.id === data.id);
30 | items[index] = data;
31 | localStorage.setItem(KEYS.items, JSON.stringify(items));
32 | }
33 |
34 |
35 |
36 |
37 | export function getAllItems() {
38 | if (localStorage.getItem(KEYS.items) === null) {
39 | localStorage.setItem(KEYS.items, JSON.stringify([]));
40 | }
41 | const es = localStorage.getItem(KEYS.items);
42 | return JSON.parse(es ? es : "");
43 | }
44 |
45 |
46 | export function getItemById(id: string | number) {
47 | if (localStorage.getItem(KEYS.items) === null) {
48 | localStorage.setItem(KEYS.items, JSON.stringify([]));
49 | }
50 | const us = localStorage.getItem(KEYS.items);
51 | const ul = JSON.parse(us ? us : "");
52 | return ul.find((u: TODO) => u.id === id);
53 | }
54 |
55 | export function deleteItemById(id: string | number) {
56 | if (localStorage.getItem(KEYS.items) === null) {
57 | localStorage.setItem(KEYS.items, JSON.stringify([]));
58 | }
59 | const _items = localStorage.getItem(KEYS.items);
60 | const items = JSON.parse(_items ? _items : "");
61 | const index = items.findIndex((u: TODO) => u.id === id);
62 | items.splice(index,1)
63 | localStorage.setItem(KEYS.items, JSON.stringify(items));
64 | }
65 |
66 |
67 |
68 | export function getItemsByPageNumber(
69 | pageNumber: number, pageSize: number = 10 ) {
70 | if (localStorage.getItem(KEYS.items) === null) {
71 | localStorage.setItem(KEYS.items, JSON.stringify([]));
72 | }
73 | const es = localStorage.getItem(KEYS.items);
74 | const products = JSON.parse(es ? es : "");
75 |
76 | console.log( ` pageNumber ${pageNumber} `)
77 | const start = (pageNumber -1)* pageSize;
78 | const end = start + pageSize
79 | return products.slice( start, end);
80 | }
--------------------------------------------------------------------------------
/src/services/customerService.ts:
--------------------------------------------------------------------------------
1 | import { _customers, _guid, _roles } from '../_mock';
2 |
3 |
4 | const KEYS = {
5 | items: "customers",
6 | itemId: "customerId"
7 | };
8 |
9 | export function init() {
10 | console.log(_customers)
11 | localStorage.setItem(KEYS.items, JSON.stringify(_customers));
12 | }
13 |
14 |
15 |
16 | export function addItem(data: TODO) {
17 | let items = getAllItems();
18 | data["id"] = generateItemId(items.length);
19 | items.push(data);
20 | localStorage.setItem(KEYS.items, JSON.stringify(items));
21 | }
22 |
23 | export function generateItemId(totalCount: number) {
24 | return `${_guid}${(totalCount+1)}`;
25 | }
26 |
27 | export function updateItem(data: TODO) {
28 | let items = getAllItems() as TODO;
29 | let index = items.findIndex((a: TODO) => a.id === data.id);
30 | items[index] = data;
31 | localStorage.setItem(KEYS.items, JSON.stringify(items));
32 | }
33 |
34 |
35 |
36 |
37 | export function getAllItems() {
38 | if (localStorage.getItem(KEYS.items) === null) {
39 | localStorage.setItem(KEYS.items, JSON.stringify([]));
40 | }
41 | const es = localStorage.getItem(KEYS.items);
42 | return JSON.parse(es ? es : "");
43 | }
44 |
45 |
46 | export function getItemById(id: string | number) {
47 | if (localStorage.getItem(KEYS.items) === null) {
48 | localStorage.setItem(KEYS.items, JSON.stringify([]));
49 | }
50 | const us = localStorage.getItem(KEYS.items);
51 | const ul = JSON.parse(us ? us : "");
52 | return ul.find((u: TODO) => u.id === id);
53 | }
54 |
55 | export function deleteItemById(id: string | number) {
56 | if (localStorage.getItem(KEYS.items) === null) {
57 | localStorage.setItem(KEYS.items, JSON.stringify([]));
58 | }
59 | const _items = localStorage.getItem(KEYS.items);
60 | const items = JSON.parse(_items ? _items : "");
61 | const index = items.findIndex((u: TODO) => u.id === id);
62 | items.splice(index,1)
63 | localStorage.setItem(KEYS.items, JSON.stringify(items));
64 | }
65 |
66 |
67 |
68 | export function getItemsByPageNumber(
69 | pageNumber: number, pageSize: number = 10 ) {
70 | if (localStorage.getItem(KEYS.items) === null) {
71 | localStorage.setItem(KEYS.items, JSON.stringify([]));
72 | }
73 | const es = localStorage.getItem(KEYS.items);
74 | const products = JSON.parse(es ? es : "");
75 |
76 | console.log( ` pageNumber ${pageNumber} `)
77 | const start = (pageNumber -1)* pageSize;
78 | const end = start + pageSize
79 | return products.slice( start, end);
80 | }
--------------------------------------------------------------------------------
/src/services/productService.ts:
--------------------------------------------------------------------------------
1 | import { _guid, _products, _roles } from '../_mock';
2 |
3 |
4 | const KEYS = {
5 | items: "products",
6 | itemId: "productId"
7 | };
8 |
9 | export function init() {
10 | console.log(_products)
11 | localStorage.setItem(KEYS.items, JSON.stringify(_products));
12 | }
13 |
14 |
15 |
16 | export function addItem(data: TODO) {
17 | let items = getAllItems();
18 | data["id"] = generateItemId(items.length);
19 | items.push(data);
20 | localStorage.setItem(KEYS.items, JSON.stringify(items));
21 | }
22 |
23 | export function generateItemId(totalCount: number) {
24 | return `${_guid}${(totalCount + 1)}`;
25 | }
26 |
27 | export function updateItem(data: TODO) {
28 | let items = getAllItems() as TODO;
29 | let index = items.findIndex((a: TODO) => a.id === data.id);
30 | items[index] = data;
31 | localStorage.setItem(KEYS.items, JSON.stringify(items));
32 | }
33 |
34 |
35 |
36 |
37 | export function getAllItems() {
38 | if (localStorage.getItem(KEYS.items) === null) {
39 | localStorage.setItem(KEYS.items, JSON.stringify([]));
40 | }
41 | const es = localStorage.getItem(KEYS.items);
42 | return JSON.parse(es ? es : "");
43 | }
44 |
45 |
46 | export function getItemById(id: string | number) {
47 | if (localStorage.getItem(KEYS.items) === null) {
48 | localStorage.setItem(KEYS.items, JSON.stringify([]));
49 | }
50 | const us = localStorage.getItem(KEYS.items);
51 | const ul = JSON.parse(us ? us : "");
52 | return ul.find((u: TODO) => u.id === id);
53 | }
54 |
55 | export function deleteItemById(id: string | number) {
56 | if (localStorage.getItem(KEYS.items) === null) {
57 | localStorage.setItem(KEYS.items, JSON.stringify([]));
58 | }
59 | const _items = localStorage.getItem(KEYS.items);
60 | const items = JSON.parse(_items ? _items : "");
61 | const index = items.findIndex((u: TODO) => u.id === id);
62 | items.splice(index, 1)
63 | localStorage.setItem(KEYS.items, JSON.stringify(items));
64 | }
65 |
66 |
67 |
68 |
69 | export function getItemsByPageNumber(
70 | pageNumber: number, pageSize: number = 10) {
71 | if (localStorage.getItem(KEYS.items) === null) {
72 | localStorage.setItem(KEYS.items, JSON.stringify([]));
73 | }
74 | const es = localStorage.getItem(KEYS.items);
75 | const products = JSON.parse(es ? es : "");
76 |
77 | console.log(` pageNumber ${pageNumber} `)
78 | const start = (pageNumber - 1) * pageSize;
79 | const end = start + pageSize
80 | return products.slice(start, end);
81 | }
--------------------------------------------------------------------------------
/public/assets/icons/navbar/ic-analytics.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
8 |
9 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-demo-v6",
3 | "version": "6.0.1",
4 | "description": "Boiler template to get up and running quickly with React, Storybook, Vite and TypeScript",
5 | "author": "Harry Ho
39 | {product.status}
40 |
41 | );
42 |
43 | const renderImg = (
44 |
60 |
68 | {product.priceSale && fnCurrency(product.priceSale)}
69 |
70 |
71 | {fnCurrency(product.price)}
72 |
73 | );
74 |
75 | return (
76 |
77 |
78 | {product.status && renderStatus}
79 |
80 | {renderImg}
81 |
82 |
83 |
84 |
89 |
92 |
93 |
94 | );
95 | }
96 |
--------------------------------------------------------------------------------
/src/theme/core/shadows.ts:
--------------------------------------------------------------------------------
1 | import type { Shadows } from '@mui/material/styles';
2 |
3 | import { grey } from './palette';
4 | import { varAlpha } from '../styles';
5 |
6 | // ----------------------------------------------------------------------
7 |
8 | export function shadows(): Shadows {
9 | const colorChannel = grey['500Channel'];
10 |
11 | const color1 = varAlpha(colorChannel, 0.2);
12 | const color2 = varAlpha(colorChannel, 0.14);
13 | const color3 = varAlpha(colorChannel, 0.12);
14 |
15 | return [
16 | 'none',
17 | `0px 2px 1px -1px ${color1},0px 1px 1px 0px ${color2},0px 1px 3px 0px ${color3}`,
18 | `0px 3px 1px -2px ${color1},0px 2px 2px 0px ${color2},0px 1px 5px 0px ${color3}`,
19 | `0px 3px 3px -2px ${color1},0px 3px 4px 0px ${color2},0px 1px 8px 0px ${color3}`,
20 | `0px 2px 4px -1px ${color1},0px 4px 5px 0px ${color2},0px 1px 10px 0px ${color3}`,
21 | `0px 3px 5px -1px ${color1},0px 5px 8px 0px ${color2},0px 1px 14px 0px ${color3}`,
22 | `0px 3px 5px -1px ${color1},0px 6px 10px 0px ${color2},0px 1px 18px 0px ${color3}`,
23 | `0px 4px 5px -2px ${color1},0px 7px 10px 1px ${color2},0px 2px 16px 1px ${color3}`,
24 | `0px 5px 5px -3px ${color1},0px 8px 10px 1px ${color2},0px 3px 14px 2px ${color3}`,
25 | `0px 5px 6px -3px ${color1},0px 9px 12px 1px ${color2},0px 3px 16px 2px ${color3}`,
26 | `0px 6px 6px -3px ${color1},0px 10px 14px 1px ${color2},0px 4px 18px 3px ${color3}`,
27 | `0px 6px 7px -4px ${color1},0px 11px 15px 1px ${color2},0px 4px 20px 3px ${color3}`,
28 | `0px 7px 8px -4px ${color1},0px 12px 17px 2px ${color2},0px 5px 22px 4px ${color3}`,
29 | `0px 7px 8px -4px ${color1},0px 13px 19px 2px ${color2},0px 5px 24px 4px ${color3}`,
30 | `0px 7px 9px -4px ${color1},0px 14px 21px 2px ${color2},0px 5px 26px 4px ${color3}`,
31 | `0px 8px 9px -5px ${color1},0px 15px 22px 2px ${color2},0px 6px 28px 5px ${color3}`,
32 | `0px 8px 10px -5px ${color1},0px 16px 24px 2px ${color2},0px 6px 30px 5px ${color3}`,
33 | `0px 8px 11px -5px ${color1},0px 17px 26px 2px ${color2},0px 6px 32px 5px ${color3}`,
34 | `0px 9px 11px -5px ${color1},0px 18px 28px 2px ${color2},0px 7px 34px 6px ${color3}`,
35 | `0px 9px 12px -6px ${color1},0px 19px 29px 2px ${color2},0px 7px 36px 6px ${color3}`,
36 | `0px 10px 13px -6px ${color1},0px 20px 31px 3px ${color2},0px 8px 38px 7px ${color3}`,
37 | `0px 10px 13px -6px ${color1},0px 21px 33px 3px ${color2},0px 8px 40px 7px ${color3}`,
38 | `0px 10px 14px -6px ${color1},0px 22px 35px 3px ${color2},0px 8px 42px 7px ${color3}`,
39 | `0px 11px 14px -7px ${color1},0px 23px 36px 3px ${color2},0px 9px 44px 8px ${color3}`,
40 | `0px 11px 15px -7px ${color1},0px 24px 38px 3px ${color2},0px 9px 46px 8px ${color3}`,
41 | ];
42 | }
43 |
--------------------------------------------------------------------------------
/src/components/analytics/AnalyticsOrderTimeline.tsx:
--------------------------------------------------------------------------------
1 | import type { CardProps } from '@mui/material/Card';
2 | import type { TimelineItemProps } from '@mui/lab/TimelineItem';
3 |
4 | import Card from '@mui/material/Card';
5 | import Timeline from '@mui/lab/Timeline';
6 | import TimelineDot from '@mui/lab/TimelineDot';
7 | import Typography from '@mui/material/Typography';
8 | import CardHeader from '@mui/material/CardHeader';
9 | import TimelineContent from '@mui/lab/TimelineContent';
10 | import TimelineSeparator from '@mui/lab/TimelineSeparator';
11 | import TimelineConnector from '@mui/lab/TimelineConnector';
12 | import TimelineItem, { timelineItemClasses } from '@mui/lab/TimelineItem';
13 |
14 | import { fnDateTime } from '../../utils/format-time';
15 |
16 | // ----------------------------------------------------------------------
17 |
18 | type Props = CardProps & {
19 | title?: string;
20 | subheader?: string;
21 | list: {
22 | id: string;
23 | type: string;
24 | title: string;
25 | time: string | number | null;
26 | }[];
27 | };
28 |
29 | export function AnalyticsOrderTimeline({ title, subheader, list, ...other }: Props) {
30 | return (
31 |
32 |
44 | {list.map((item, index) => (
45 |
48 |
49 | );
50 | }
51 |
52 | // ----------------------------------------------------------------------
53 |
54 | type ItemProps = TimelineItemProps & {
55 | lastItem: boolean;
56 | item: Props['list'][number];
57 | };
58 |
59 | function Item({ item, lastItem, ...other }: ItemProps) {
60 | return (
61 |
62 |
63 |
74 |
75 |
76 | {item.title}
77 |
78 |
79 | {fnDateTime(item.time)}
80 |
81 |
82 |
83 | );
84 | }
85 |
--------------------------------------------------------------------------------
/src/components/sb/TaskList.tsx:
--------------------------------------------------------------------------------
1 | import { useDispatch, useSelector } from 'react-redux';
2 | // import { Box, Stack } from '@mui/material';
3 |
4 | import Task, { TaskType } from './Task';
5 | import { updateTaskState } from '../../store/store';
6 |
7 | export interface TaskListProps {
8 | loading: boolean;
9 | tasks: TaskType[];
10 | onPinTask: Function;
11 | onArchiveTask: Function;
12 | }
13 |
14 | export default function TaskList() {
15 | // We're retrieving our state from the store
16 | const tasks = useSelector((state: any) => {
17 | const tasksInOrder = [
18 | ...state.taskbox.tasks.filter((t: any)=> t.state === 'TASK_PINNED'),
19 | ...state.taskbox.tasks.filter((t: any)=> t.state !== 'TASK_PINNED'),
20 | ];
21 | const filteredTasks = tasksInOrder.filter(
22 | (t: any)=> t.state === 'TASK_INBOX' || t.state === 'TASK_PINNED'
23 | );
24 | return filteredTasks;
25 | });
26 |
27 | const { status } = useSelector((state: any) => state.taskbox);
28 |
29 | const dispatch = useDispatch();
30 |
31 | const pinTask = (value: any) => {
32 | // We're dispatching the Pinned event back to our store
33 | dispatch(updateTaskState({ id: value, newTaskState: 'TASK_PINNED' }));
34 | };
35 | const archiveTask = (value: any) => {
36 | // We're dispatching the Archive event back to our store
37 | dispatch(updateTaskState({ id: value, newTaskState: 'TASK_ARCHIVED' }));
38 | };
39 | const LoadingRow = (
40 |
41 |
42 |
43 | Loading cool state
44 |
45 |
50 | {LoadingRow}
51 | {LoadingRow}
52 | {LoadingRow}
53 | {LoadingRow}
54 | {LoadingRow}
55 | {LoadingRow}
56 |
57 | );
58 | }
59 | if (tasks.length === 0) {
60 | return (
61 |
62 |
63 |
64 |
You have no tasks
65 |
Sit back and relax
66 |
67 |
73 | {tasks.map((task: any) => (
74 | pinTask(t)}
78 | onArchiveTask={(t: any) => archiveTask(t)}
79 | />
80 | ))}
81 |
82 | );
83 | }
84 |
--------------------------------------------------------------------------------
/src/components/analytics/AnalyticsNews.tsx:
--------------------------------------------------------------------------------
1 | import type { BoxProps } from '@mui/material/Box';
2 | import type { CardProps } from '@mui/material/Card';
3 |
4 | import Box from '@mui/material/Box';
5 | import Card from '@mui/material/Card';
6 | import Button from '@mui/material/Button';
7 | import Avatar from '@mui/material/Avatar';
8 | import CardHeader from '@mui/material/CardHeader';
9 | import ListItemText from '@mui/material/ListItemText';
10 |
11 | import { fToNow } from '../../utils/format-time';
12 |
13 | import { Iconify } from '../iconify';
14 | import { Scrollbar } from '../scrollbar';
15 |
16 | import type { PostItemProps } from '../blog/PostItem';
17 |
18 | // ----------------------------------------------------------------------
19 |
20 | type Props = CardProps & {
21 | title?: string;
22 | subheader?: string;
23 | list: PostItemProps[];
24 | };
25 |
26 | export function AnalyticsNews({ title, subheader, list, ...other }: Props) {
27 | return (
28 |
29 | */}
32 |
33 | {list.map((post) => (
34 |
37 | {/* */}
38 |
39 |
40 |
48 |
49 | );
50 | }
51 |
52 | // ----------------------------------------------------------------------
53 |
54 | function PostItem({ sx, item, ...other }: BoxProps & { item: Props['list'][number] }) {
55 | return (
56 | `dashed 1px ${theme.vars.palette.divider}`,
64 | ...sx,
65 | }}
66 | {...other}
67 | >
68 |
83 | {fToNow(item.postedAt)}
84 |
85 |
86 | );
87 | }
88 |
--------------------------------------------------------------------------------
/src/theme/styles/mixins.ts:
--------------------------------------------------------------------------------
1 | import type { CSSObject } from '@mui/material/styles';
2 |
3 | // ----------------------------------------------------------------------
4 |
5 | /**
6 | * Usage:
7 | * ...hideScrollX,
8 | * ...hideScrollY,
9 | */
10 | export const hideScrollX: CSSObject = {
11 | msOverflowStyle: 'none',
12 | scrollbarWidth: 'none',
13 | overflowX: 'auto',
14 | '&::-webkit-scrollbar': { display: 'none' },
15 | };
16 |
17 | export const hideScrollY: CSSObject = {
18 | msOverflowStyle: 'none',
19 | scrollbarWidth: 'none',
20 | overflowY: 'auto',
21 | '&::-webkit-scrollbar': { display: 'none' },
22 | };
23 |
24 | /**
25 | * Usage:
26 | * ...textGradient(`to right, ${theme.vars.palette.text.primary}, ${alpha(theme.vars.palette.text.primary, 0.2)}`
27 | */
28 | export function textGradient(color: string): CSSObject {
29 | return {
30 | background: `linear-gradient(${color})`,
31 | WebkitBackgroundClip: 'text',
32 | WebkitTextFillColor: 'transparent',
33 | backgroundClip: 'text',
34 | textFillColor: 'transparent',
35 | color: 'transparent',
36 | };
37 | }
38 |
39 | /**
40 | * Usage:
41 | * ...bgGradient({ color: `to right, ${theme.vars.palette.grey[900]} 25%, ${varAlpha(theme.vars.palette.primary.darkerChannel, 0.88)}`, imgUrl: '/assets/background/overlay.png' }),
42 | */
43 | export type BgGradientProps = {
44 | color: string;
45 | imgUrl?: string;
46 | };
47 |
48 | export function bgGradient({ color, imgUrl }: BgGradientProps): CSSObject {
49 | if (imgUrl) {
50 | return {
51 | background: `linear-gradient(${color}), url(${imgUrl})`,
52 | backgroundSize: 'cover',
53 | backgroundRepeat: 'no-repeat',
54 | backgroundPosition: 'center center',
55 | };
56 | }
57 | return { background: `linear-gradient(${color})` };
58 | }
59 |
60 | /**
61 | * Usage:
62 | * ...bgBlur({ color: `varAlpha(theme.vars.palette.background.paperChannel, 0.8)`, imgUrl: '/assets/background/overlay.png', blur: 6 }),
63 | */
64 | export type BgBlurProps = {
65 | color: string;
66 | blur?: number;
67 | imgUrl?: string;
68 | };
69 |
70 | export function bgBlur({ color, blur = 6, imgUrl }: BgBlurProps): CSSObject {
71 | if (imgUrl) {
72 | return {
73 | position: 'relative',
74 | backgroundImage: `url(${imgUrl})`,
75 | '&::before': {
76 | position: 'absolute',
77 | top: 0,
78 | left: 0,
79 | zIndex: 9,
80 | content: '""',
81 | width: '100%',
82 | height: '100%',
83 | backdropFilter: `blur(${blur}px)`,
84 | WebkitBackdropFilter: `blur(${blur}px)`,
85 | backgroundColor: color,
86 | },
87 | };
88 | }
89 | return {
90 | backdropFilter: `blur(${blur}px)`,
91 | WebkitBackdropFilter: `blur(${blur}px)`,
92 | backgroundColor: color,
93 | };
94 | }
95 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | React MUI Demo v6
3 |
4 |
5 | This react demo is built on the top of my customized React boilerplate with Storybook.
6 |
7 | The boilerplate repo is available [here](https://github.com/harryho/storybook-react-vite-ts-template).
8 |
9 | If you want to build something simpler from scratch, you can follow the README to build your own app step by step.
10 |
11 |
12 |
13 | ### Live Demo
14 |
15 | [Demo](https://react-demo-v6.harryho.org/) The demo is just a proof of concept. It doesn't have back-end API and all features of master branch.
16 |
17 | ### Screenshots
18 |
19 | 
20 |
21 | 
22 |
23 | 
24 |
25 | 
26 |
27 |
28 |
29 | ----
30 |
31 |
32 | ## Getting Start
33 |
34 | ```bash
35 | # Clone project
36 | git clone https://github.com/harryho/react-demo.git
37 |
38 |
39 | # install the packages with npm
40 | cd react-demo
41 |
42 | # development
43 | yarn dev
44 |
45 | # build
46 | yarn build
47 |
48 | ```
49 |
50 |
51 |
52 | ----
53 |
54 |
55 | ### Previous demo
56 |
57 | [Previous Demo](https://react-demo-v4.harryho.org/) The demo is built on React 16 and Mui 4. Source code is available [here](https://github.com/harryho/react-crm/tree/r16m4)
58 |
59 | #### Screenshots
60 |
61 | 
62 |
63 | 
64 |
65 | 
66 |
67 | #### Storybook
68 |
69 | 
70 |
71 |
72 |
73 | ### Change log
74 |
75 | - Apr 2025 - Merge latest demo to master branch.
76 |
77 | - Dec 2024 - React 18 and Mui 6 live demo is released.
78 |
79 | - Jun 2024 - Uplifting to React 18 and Mui 6 is in progress.
80 |
81 | - May 2020 - Merge the branch rctsx to master
82 |
83 | After the merge, the whole project moved to new technical stack - TypeScript 3. Also, the Material-UI is upgraded to 4.x version. Nodejs 12.x is recommended.
84 |
85 | - Dec 2018 - Rebase demo branch to master
86 |
87 | New master doesn't rely on Json-Server as fake API. It will only have Readonly fake API. It means any new or updated data will be stored to any physical file. All test data will be rolled back after system restart.
88 |
89 | - May 2018 - Create an archived branch json-server
90 |
91 | This branch was the master which used Json-Server as fake API. Considering the hiccup of setting Json-Server up and maintenance, it will be replaced by fake service ( Readonly fake API). You still can find clone this branch by branch name **json-server**, but it will be no longer updated. It is an archived branch.
--------------------------------------------------------------------------------
/src/layouts/components/Searchbar.tsx:
--------------------------------------------------------------------------------
1 | import type { BoxProps } from '@mui/material/Box';
2 |
3 | import { useState, useCallback } from 'react';
4 |
5 | import Box from '@mui/material/Box';
6 | import Slide from '@mui/material/Slide';
7 | import Input from '@mui/material/Input';
8 | import Button from '@mui/material/Button';
9 | import { useTheme } from '@mui/material/styles';
10 | import IconButton from '@mui/material/IconButton';
11 | import InputAdornment from '@mui/material/InputAdornment';
12 | import ClickAwayListener from '@mui/material/ClickAwayListener';
13 |
14 | import { bgBlur } from 'src/theme/styles';
15 |
16 | import { Iconify } from 'src/components/iconify';
17 |
18 | // ----------------------------------------------------------------------
19 |
20 | export function Searchbar({ sx, ...other }: BoxProps) {
21 | const theme = useTheme();
22 |
23 | const [open, setOpen] = useState(false);
24 |
25 | const handleOpen = useCallback(() => {
26 | setOpen((prev) => !prev);
27 | }, []);
28 |
29 | const handleClose = useCallback(() => {
30 | setOpen(false);
31 | }, []);
32 |
33 | return (
34 |
35 |
36 | {!open && (
37 |
38 |
40 | )}
41 |
42 |
43 |
65 |
78 | Search
79 |
80 |
81 |
82 |
83 |
84 | );
85 | }
86 |
--------------------------------------------------------------------------------
/src/services/agentService.ts:
--------------------------------------------------------------------------------
1 | import { _agents, _roles , _guid} from '../_mock';
2 |
3 | export const roleArray = () => [
4 | { id: "1", title: 'Sales Leader' },
5 | { id: "2", title: 'Hr Manager' },
6 | { id: "3", title: 'Sales Agent' },
7 | { id: "4", title: 'Sales Operator' },
8 | { id: "5", title: 'Sales Manager' },
9 | { id: "6", title: 'Project Manager' },
10 | { id: "7", title: 'Business Analyst' },
11 | { id: "9", title: 'Product Designer' },
12 | { id: "10", title: 'Market Manager' },
13 | { id: "11", title: 'General Manager' }
14 | ]
15 |
16 |
17 | const KEYS = {
18 | items: "agents",
19 | itemId: "agentId"
20 | };
21 |
22 | export function init() {
23 | console.log(_agents)
24 | localStorage.setItem(KEYS.items, JSON.stringify(_agents));
25 | }
26 |
27 |
28 | export function addItem(data: TODO) {
29 | let items = getAllItems();
30 | data["id"] = generateItemId(items.length);
31 | items.push(data);
32 | localStorage.setItem(KEYS.items, JSON.stringify(items));
33 | }
34 |
35 | export function generateItemId(totalCount: number) {
36 | return `${_guid}${(totalCount+1)}`;
37 | }
38 |
39 | export function updateItem(data: TODO) {
40 | let items = getAllItems() as TODO;
41 | let index = items.findIndex((a: TODO) => a.id === data.id);
42 | items[index] = data;
43 | localStorage.setItem(KEYS.items, JSON.stringify(items));
44 | }
45 |
46 |
47 |
48 |
49 | export function getAllItems() {
50 | if (localStorage.getItem(KEYS.items) === null) {
51 | localStorage.setItem(KEYS.items, JSON.stringify([]));
52 | }
53 | const es = localStorage.getItem(KEYS.items);
54 | return JSON.parse(es ? es : "");
55 | }
56 |
57 |
58 | export function getItemById(id: string | number) {
59 | if (localStorage.getItem(KEYS.items) === null) {
60 | localStorage.setItem(KEYS.items, JSON.stringify([]));
61 | }
62 | const us = localStorage.getItem(KEYS.items);
63 | const ul = JSON.parse(us ? us : "");
64 | return ul.find((u: TODO) => u.id === id);
65 | }
66 |
67 | export function deleteItemById(id: string | number) {
68 | if (localStorage.getItem(KEYS.items) === null) {
69 | localStorage.setItem(KEYS.items, JSON.stringify([]));
70 | }
71 | const _items = localStorage.getItem(KEYS.items);
72 | const items = JSON.parse(_items ? _items : "");
73 | const index = items.findIndex((u: TODO) => u.id === id);
74 | items.splice(index,1)
75 | localStorage.setItem(KEYS.items, JSON.stringify(items));
76 | }
77 |
78 |
79 |
80 | export function getItemsByPageNumber(
81 | pageNumber: number, pageSize: number = 10 ) {
82 | if (localStorage.getItem(KEYS.items) === null) {
83 | localStorage.setItem(KEYS.items, JSON.stringify([]));
84 | }
85 | const es = localStorage.getItem(KEYS.items);
86 | const products = JSON.parse(es ? es : "");
87 |
88 | console.log( ` pageNumber ${pageNumber} `)
89 | const start = (pageNumber -1)* pageSize;
90 | const end = start + pageSize
91 | return products.slice( start, end);
92 | }
--------------------------------------------------------------------------------
/src/components/product/ProductSort.tsx:
--------------------------------------------------------------------------------
1 | import type { ButtonProps } from '@mui/material/Button';
2 |
3 | import { useState, useCallback } from 'react';
4 |
5 | import Button from '@mui/material/Button';
6 | import Popover from '@mui/material/Popover';
7 | import MenuList from '@mui/material/MenuList';
8 | import Typography from '@mui/material/Typography';
9 | import MenuItem, { menuItemClasses } from '@mui/material/MenuItem';
10 |
11 | import { Iconify } from '../iconify';
12 |
13 | // ----------------------------------------------------------------------
14 |
15 | type ProductSortProps = ButtonProps & {
16 | sortBy: string;
17 | onSort: (newSort: string) => void;
18 | options: { value: string; label: string }[];
19 | };
20 |
21 | export function ProductSort({ options, sortBy, onSort, sx, ...other }: ProductSortProps) {
22 | const [openPopover, setOpenPopover] = useState(null);
23 |
24 | const handleOpenPopover = useCallback((event: React.MouseEvent) => {
25 | setOpenPopover(event.currentTarget);
26 | }, []);
27 |
28 | const handleClosePopover = useCallback(() => {
29 | setOpenPopover(null);
30 | }, []);
31 |
32 | return (
33 | <>
34 |
44 | {options.find((option) => option.value === sortBy)?.label}
45 |
46 |
47 |
48 |
55 |
71 | {options.map((option) => (
72 | {
76 | onSort(option.value);
77 | handleClosePopover();
78 | }}
79 | >
80 | {option.label}
81 |
82 | ))}
83 |
84 |
85 |
86 | );
87 | }
88 |
--------------------------------------------------------------------------------
/src/theme/styles/utils.ts:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | export const stylesMode = {
4 | light: '[data-mui-color-scheme="light"] &',
5 | dark: '[data-mui-color-scheme="dark"] &',
6 | };
7 |
8 | export const mediaQueries = {
9 | upXs: '@media (min-width:0px)',
10 | upSm: '@media (min-width:600px)',
11 | upMd: '@media (min-width:900px)',
12 | upLg: '@media (min-width:1200px)',
13 | upXl: '@media (min-width:1536px)',
14 | };
15 |
16 | /**
17 | * Set font family
18 | */
19 | export function setFont(fontName: string) {
20 | return `"${fontName}",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"`;
21 | }
22 |
23 | /**
24 | * Converts rem to px
25 | */
26 | export function remToPx(value: string): number {
27 | return Math.round(parseFloat(value) * 16);
28 | }
29 |
30 | /**
31 | * Converts px to rem
32 | */
33 | export function pxToRem(value: number): string {
34 | return `${value / 16}rem`;
35 | }
36 |
37 | /**
38 | * Responsive font sizes
39 | */
40 | export function responsiveFontSizes({ sm, md, lg }: { sm: number; md: number; lg: number }) {
41 | return {
42 | [mediaQueries.upSm]: { fontSize: pxToRem(sm) },
43 | [mediaQueries.upMd]: { fontSize: pxToRem(md) },
44 | [mediaQueries.upLg]: { fontSize: pxToRem(lg) },
45 | };
46 | }
47 |
48 | /**
49 | * Converts a hex color to RGB channels
50 | */
51 | export function hexToRgbChannel(hex: string) {
52 | if (!/^#[0-9A-F]{6}$/i.test(hex)) {
53 | throw new Error(`Invalid hex color: ${hex}`);
54 | }
55 |
56 | const r = parseInt(hex.substring(1, 3), 16);
57 | const g = parseInt(hex.substring(3, 5), 16);
58 | const b = parseInt(hex.substring(5, 7), 16);
59 |
60 | return `${r} ${g} ${b}`;
61 | }
62 |
63 | /**
64 | * Converts a hex color to RGB channels
65 | */
66 | export function createPaletteChannel(hexPalette: Record) {
67 | const channelPalette: Record = {};
68 |
69 | Object.entries(hexPalette).forEach(([key, value]) => {
70 | channelPalette[`${key}Channel`] = hexToRgbChannel(value);
71 | });
72 |
73 | return { ...hexPalette, ...channelPalette };
74 | }
75 |
76 | /**
77 | * Color with alpha channel
78 | */
79 | export function varAlpha(color: string, opacity = 1) {
80 | const unsupported =
81 | color.startsWith('#') ||
82 | color.startsWith('rgb') ||
83 | color.startsWith('rgba') ||
84 | (!color.includes('var') && color.includes('Channel'));
85 |
86 | if (unsupported) {
87 | throw new Error(
88 | `[Alpha]: Unsupported color format "${color}".
89 | Supported formats are:
90 | - RGB channels: "0 184 217".
91 | - CSS variables with "Channel" prefix: "var(--palette-common-blackChannel, #000000)".
92 | Unsupported formats are:
93 | - Hex: "#00B8D9".
94 | - RGB: "rgb(0, 184, 217)".
95 | - RGBA: "rgba(0, 184, 217, 1)".
96 | `
97 | );
98 | }
99 |
100 | return `rgba(${color} / ${opacity})`;
101 | }
102 |
--------------------------------------------------------------------------------
/src/components/blog/PostSort.tsx:
--------------------------------------------------------------------------------
1 | import type { ButtonProps } from '@mui/material/Button';
2 |
3 | import { useState, useCallback } from 'react';
4 |
5 | import Button from '@mui/material/Button';
6 | import Popover from '@mui/material/Popover';
7 | import MenuList from '@mui/material/MenuList';
8 | import MenuItem, { menuItemClasses } from '@mui/material/MenuItem';
9 |
10 | import { varAlpha } from '../../theme/styles';
11 | import { lightPalette as palette } from '../../theme/core';
12 | import { Iconify } from '../iconify';
13 |
14 | // ----------------------------------------------------------------------
15 |
16 | type PostSortProps = ButtonProps & {
17 | sortBy: string;
18 | onSort: (newSort: string) => void;
19 | options: { value: string; label: string }[];
20 | };
21 |
22 | export function PostSort({ options, sortBy, onSort, sx, ...other }: PostSortProps) {
23 | const [openPopover, setOpenPopover] = useState(null);
24 |
25 | const handleOpenPopover = useCallback((event: React.MouseEvent) => {
26 | setOpenPopover(event.currentTarget);
27 | }, []);
28 |
29 | const handleClosePopover = useCallback(() => {
30 | setOpenPopover(null);
31 | }, []);
32 |
33 | return (
34 | <>
35 |
64 |
80 | {options.map((option) => (
81 | {
85 | onSort(option.value);
86 | handleClosePopover();
87 | }}
88 | >
89 | {option.label}
90 |
91 | ))}
92 |
93 |
94 |
95 | );
96 | }
97 |
--------------------------------------------------------------------------------
/src/utils/format-time.ts:
--------------------------------------------------------------------------------
1 | import type { Dayjs } from 'dayjs';
2 |
3 | import dayjs from 'dayjs';
4 | import duration from 'dayjs/plugin/duration';
5 | import relativeTime from 'dayjs/plugin/relativeTime';
6 |
7 | // ----------------------------------------------------------------------
8 |
9 | dayjs.extend(duration);
10 | dayjs.extend(relativeTime);
11 |
12 | // ----------------------------------------------------------------------
13 |
14 | export type DatePickerFormat = Dayjs | Date | string | number | null | undefined;
15 |
16 | /**
17 | * Docs: https://day.js.org/docs/en/display/format
18 | */
19 | export const formatStr = {
20 | dateTime: 'DD MMM YYYY h:mm a', // 17 Apr 2022 12:00 am
21 | date: 'DD MMM YYYY', // 17 Apr 2022
22 | time: 'h:mm a', // 12:00 am
23 | split: {
24 | dateTime: 'DD/MM/YYYY h:mm a', // 17/04/2022 12:00 am
25 | date: 'DD/MM/YYYY', // 17/04/2022
26 | },
27 | paramCase: {
28 | dateTime: 'DD-MM-YYYY h:mm a', // 17-04-2022 12:00 am
29 | date: 'DD-MM-YYYY', // 17-04-2022
30 | },
31 | };
32 |
33 | export function today(format?: string) {
34 | return dayjs(new Date()).startOf('day').format(format);
35 | }
36 |
37 | // ----------------------------------------------------------------------
38 |
39 | /** output: 17 Apr 2022 12:00 am
40 | */
41 | export function fnDateTime(date: DatePickerFormat, format?: string) {
42 | if (!date) {
43 | return null;
44 | }
45 |
46 | const isValid = dayjs(date).isValid();
47 |
48 | return isValid ? dayjs(date).format(format ?? formatStr.dateTime) : 'Invalid time value';
49 | }
50 |
51 | // ----------------------------------------------------------------------
52 |
53 | /** output: 17 Apr 2022
54 | */
55 | export function fnDate(date: DatePickerFormat, format?: string) {
56 | if (!date) {
57 | return null;
58 | }
59 |
60 | const isValid = dayjs(date).isValid();
61 |
62 | return isValid ? dayjs(date).format(format ?? formatStr.date) : 'Invalid time value';
63 | }
64 |
65 | // ----------------------------------------------------------------------
66 |
67 | /** output: 12:00 am
68 | */
69 | export function fTime(date: DatePickerFormat, format?: string) {
70 | if (!date) {
71 | return null;
72 | }
73 |
74 | const isValid = dayjs(date).isValid();
75 |
76 | return isValid ? dayjs(date).format(format ?? formatStr.time) : 'Invalid time value';
77 | }
78 |
79 | // ----------------------------------------------------------------------
80 |
81 | /** output: 1713250100
82 | */
83 | export function fTimestamp(date: DatePickerFormat) {
84 | if (!date) {
85 | return null;
86 | }
87 |
88 | const isValid = dayjs(date).isValid();
89 |
90 | return isValid ? dayjs(date).valueOf() : 'Invalid time value';
91 | }
92 |
93 | // ----------------------------------------------------------------------
94 |
95 | /** output: a few seconds, 2 years
96 | */
97 | export function fToNow(date: DatePickerFormat) {
98 | if (!date) {
99 | return null;
100 | }
101 |
102 | const isValid = dayjs(date).isValid();
103 |
104 | return isValid ? dayjs(date).toNow(true) : 'Invalid time value';
105 | }
106 |
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import * as ReactDOM from 'react-dom/client';
3 | import { createBrowserRouter, RouterProvider } from 'react-router-dom';
4 | import App from './App';
5 | import Layout from './layouts/Dashboard';
6 | import ProductsView from './pages/ProductsView';
7 | import OrdersView from './pages/OrdersView';
8 | import { OverviewAnalyticsView } from './pages/OverviewAnalyticsView';
9 | import { BlogView } from './pages/BlogView';
10 | import { NotFoundView } from './pages/NotFoundView';
11 | import { HelmetProvider } from 'react-helmet-async';
12 | import { AgentView } from './pages/AgentView';
13 | import { CustomerView } from './pages/CustomerView';
14 | import AgentForm , { agentLoader }from './pages/AgentForm';
15 | import SignInView from './pages/SignInView';
16 | import CustomerForm , { customerLoader } from './pages/CustomerForm';
17 | import OrderForm , {orderLoader} from './pages/OrderForm';
18 |
19 |
20 | const router = createBrowserRouter([
21 | {
22 | Component: App,
23 | children: [
24 | {
25 | path: '',
26 | Component: Layout,
27 | children: [
28 | {
29 | path: '',
30 | Component: OverviewAnalyticsView,
31 | },
32 | {
33 | path: 'orders',
34 | Component: OrdersView,
35 | },
36 | {
37 | path: 'products',
38 | Component: ProductsView,
39 | },
40 | {
41 | path: 'customers',
42 | Component: CustomerView,
43 | },
44 | {
45 | path: 'blogs',
46 | Component: BlogView,
47 | },
48 | {
49 | path: 'agents',
50 | Component: AgentView,
51 | },
52 | {
53 | path: 'agent-form',
54 | Component: AgentForm,
55 | },
56 | {
57 | path: 'edit-agent/:id',
58 | Component: AgentForm,
59 | loader: agentLoader
60 |
61 | },
62 | {
63 | path: 'customer-form',
64 | Component: CustomerForm,
65 | },
66 | {
67 | path: 'edit-customer/:id',
68 | Component: CustomerForm,
69 | loader: customerLoader
70 |
71 | },
72 | {
73 | path: 'order-form',
74 | Component: OrderForm,
75 | },
76 | {
77 | path: 'edit-order/:id',
78 | Component: OrderForm,
79 | loader: orderLoader
80 |
81 | },
82 | {
83 | path: '*',
84 | Component: NotFoundView
85 | }
86 | ]
87 | },
88 | {
89 | path: '/sign-in',
90 | Component: SignInView
91 | },
92 | {
93 | path: '*',
94 | Component: NotFoundView
95 | }
96 | ],
97 | },
98 | ]);
99 |
100 |
101 |
102 |
103 | ReactDOM.createRoot(document.getElementById('root')!).render(
104 |
105 |
106 |
108 |
109 | );
110 |
--------------------------------------------------------------------------------
/src/store/store.ts:
--------------------------------------------------------------------------------
1 |
2 | /* A simple redux store/actions/reducer implementation.
3 | * A true app would be more complex and separated into different files.
4 | */
5 | import { configureStore, createAsyncThunk, createSlice } from '@reduxjs/toolkit';
6 |
7 | /*
8 | * The initial state of our store when the app loads.
9 | * Usually, you would fetch this from a server. Let's not worry about that now
10 | */
11 | const defaultTasks = [
12 | { id: '1', title: 'Something', state: 'TASK_INBOX' },
13 | { id: '2', title: 'Something more', state: 'TASK_INBOX' },
14 | { id: '3', title: 'Something else', state: 'TASK_INBOX' },
15 | { id: '4', title: 'Something again', state: 'TASK_INBOX' },
16 | ];
17 | const TaskBoxData = {
18 | tasks: defaultTasks,
19 | status: 'idle',
20 | error: null,
21 | };
22 |
23 |
24 | /*
25 | * Creates an asyncThunk to fetch tasks from a remote endpoint.
26 | * You can read more about Redux Toolkit's thunks in the docs:
27 | * https://redux-toolkit.js.org/api/createAsyncThunk
28 | */
29 | export const fetchTasks = createAsyncThunk('todos/fetchTodos', async () => {
30 | const response = await fetch(
31 | 'https://jsonplaceholder.typicode.com/todos?userId=1'
32 | );
33 | const data = await response.json();
34 | const result = data.map((task: any) =>({
35 | id: `${task.id}`,
36 | title: task.title,
37 | state: task.completed ? 'TASK_ARCHIVED' : 'TASK_INBOX',
38 | }));
39 | return result;
40 | });
41 |
42 | /*
43 | * The store is created here.
44 | * You can read more about Redux Toolkit's slices in the docs:
45 | * https://redux-toolkit.js.org/api/createSlice
46 | */
47 | const TasksSlice = createSlice({
48 | name: 'taskbox',
49 | initialState: TaskBoxData,
50 | reducers: {
51 | updateTaskState: (state, action) => {
52 | const { id, newTaskState } = action.payload;
53 | const task = state.tasks.findIndex((t: any) =>t.id === id);
54 | if (task >= 0) {
55 | state.tasks[task].state = newTaskState;
56 | }
57 | },
58 | },
59 | /*
60 | * Extends the reducer for the async actions
61 | * You can read more about it at https://redux-toolkit.js.org/api/createAsyncThunk
62 | */
63 | extraReducers(builder) {
64 | builder
65 | .addCase(fetchTasks.pending, (state: any) => {
66 | state.status = 'loading';
67 | state.error = null;
68 | state.tasks = [];
69 | })
70 | .addCase(fetchTasks.fulfilled, (state, action) => {
71 | state.status = 'succeeded';
72 | state.error = null;
73 | // Add any fetched tasks to the array
74 | state.tasks = action.payload;
75 | })
76 | .addCase(fetchTasks.rejected, (state: any) => {
77 | state.status = 'failed';
78 | state.error = "Something went wrong";
79 | state.tasks = [];
80 | });
81 | },
82 | });
83 |
84 | // The actions contained in the slice are exported for usage in our components
85 | export const { updateTaskState } = TasksSlice.actions;
86 |
87 | /*
88 | * Our app's store configuration goes here.
89 | * Read more about Redux's configureStore in the docs:
90 | * https://redux-toolkit.js.org/api/configureStore
91 | */
92 | const store = configureStore({
93 | reducer: {
94 | taskbox: TasksSlice.reducer,
95 | },
96 | });
97 |
98 | export default store;
--------------------------------------------------------------------------------
/src/theme/core/typography.ts:
--------------------------------------------------------------------------------
1 | import type { TypographyOptions } from '@mui/material/styles/createTypography';
2 |
3 | import { setFont, pxToRem, responsiveFontSizes } from '../styles/utils';
4 |
5 | // ----------------------------------------------------------------------
6 |
7 | declare module '@mui/material/styles' {
8 | interface TypographyVariants {
9 | fontSecondaryFamily: React.CSSProperties['fontFamily'];
10 | fontWeightSemiBold: React.CSSProperties['fontWeight'];
11 | }
12 | interface TypographyVariantsOptions {
13 | fontSecondaryFamily?: React.CSSProperties['fontFamily'];
14 | fontWeightSemiBold?: React.CSSProperties['fontWeight'];
15 | }
16 | interface ThemeVars {
17 | typography: Theme['typography'];
18 | }
19 | }
20 |
21 | // ----------------------------------------------------------------------
22 |
23 | export const defaultFont = 'DM Sans Variable';
24 |
25 | export const primaryFont = setFont(defaultFont);
26 |
27 | export const secondaryFont = setFont('Barlow');
28 |
29 | // ----------------------------------------------------------------------
30 |
31 | export const typography: TypographyOptions = {
32 | fontFamily: primaryFont,
33 | fontSecondaryFamily: secondaryFont,
34 | fontWeightLight: '300',
35 | fontWeightRegular: '400',
36 | fontWeightMedium: '500',
37 | fontWeightSemiBold: '600',
38 | fontWeightBold: '700',
39 | h1: {
40 | fontWeight: 800,
41 | lineHeight: 80 / 64,
42 | fontSize: pxToRem(40),
43 | fontFamily: secondaryFont,
44 | ...responsiveFontSizes({ sm: 52, md: 58, lg: 64 }),
45 | },
46 | h2: {
47 | fontWeight: 800,
48 | lineHeight: 64 / 48,
49 | fontSize: pxToRem(32),
50 | fontFamily: secondaryFont,
51 | ...responsiveFontSizes({ sm: 40, md: 44, lg: 48 }),
52 | },
53 | h3: {
54 | fontWeight: 700,
55 | lineHeight: 1.5,
56 | fontSize: pxToRem(24),
57 | fontFamily: secondaryFont,
58 | ...responsiveFontSizes({ sm: 26, md: 30, lg: 32 }),
59 | },
60 | h4: {
61 | fontWeight: 700,
62 | lineHeight: 1.5,
63 | fontSize: pxToRem(20),
64 | ...responsiveFontSizes({ sm: 20, md: 24, lg: 24 }),
65 | },
66 | h5: {
67 | fontWeight: 700,
68 | lineHeight: 1.5,
69 | fontSize: pxToRem(18),
70 | ...responsiveFontSizes({ sm: 19, md: 20, lg: 20 }),
71 | },
72 | h6: {
73 | fontWeight: 600,
74 | lineHeight: 28 / 18,
75 | fontSize: pxToRem(17),
76 | ...responsiveFontSizes({ sm: 18, md: 18, lg: 18 }),
77 | },
78 | subtitle1: {
79 | fontWeight: 600,
80 | lineHeight: 1.5,
81 | fontSize: pxToRem(16),
82 | },
83 | subtitle2: {
84 | fontWeight: 600,
85 | lineHeight: 22 / 14,
86 | fontSize: pxToRem(14),
87 | },
88 | body1: {
89 | lineHeight: 1.5,
90 | fontSize: pxToRem(16),
91 | },
92 | body2: {
93 | lineHeight: 22 / 14,
94 | fontSize: pxToRem(14),
95 | },
96 | caption: {
97 | lineHeight: 1.5,
98 | fontSize: pxToRem(12),
99 | },
100 | overline: {
101 | fontWeight: 700,
102 | lineHeight: 1.5,
103 | fontSize: pxToRem(12),
104 | textTransform: 'uppercase',
105 | },
106 | button: {
107 | fontWeight: 700,
108 | lineHeight: 24 / 14,
109 | fontSize: pxToRem(14),
110 | textTransform: 'unset',
111 | },
112 | };
113 |
--------------------------------------------------------------------------------
/src/utils/format-number.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Locales code
3 | * https://gist.github.com/raushankrjha/d1c7e35cf87e69aa8b4208a8171a8416
4 | */
5 |
6 | export type InputNumberValue = string | number | null | undefined;
7 |
8 | type Options = Intl.NumberFormatOptions | undefined;
9 |
10 | const DEFAULT_LOCALE = { code: 'en-US', currency: 'USD' };
11 |
12 | function processInput(inputValue: InputNumberValue): number | null {
13 | if (inputValue == null || Number.isNaN(inputValue)) return null;
14 | return Number(inputValue);
15 | }
16 |
17 | // ----------------------------------------------------------------------
18 |
19 | export function fnNumber(inputValue: InputNumberValue, options?: Options) {
20 | const locale = DEFAULT_LOCALE;
21 |
22 | const number = processInput(inputValue);
23 | if (number === null) return '';
24 |
25 | const fm = new Intl.NumberFormat(locale.code, {
26 | minimumFractionDigits: 0,
27 | maximumFractionDigits: 2,
28 | ...options,
29 | }).format(number);
30 |
31 | return fm;
32 | }
33 |
34 | // ----------------------------------------------------------------------
35 |
36 | export function fnCurrency(inputValue: InputNumberValue, options?: Options) {
37 | const locale = DEFAULT_LOCALE;
38 |
39 | const number = processInput(inputValue);
40 | if (number === null) return '';
41 |
42 | const fm = new Intl.NumberFormat(locale.code, {
43 | style: 'currency',
44 | currency: locale.currency,
45 | minimumFractionDigits: 0,
46 | maximumFractionDigits: 2,
47 | ...options,
48 | }).format(number);
49 |
50 | return fm;
51 | }
52 |
53 | // ----------------------------------------------------------------------
54 |
55 | export function fnPercent(inputValue: InputNumberValue, options?: Options) {
56 | const locale = DEFAULT_LOCALE;
57 |
58 | const number = processInput(inputValue);
59 | if (number === null) return '';
60 |
61 | const fm = new Intl.NumberFormat(locale.code, {
62 | style: 'percent',
63 | minimumFractionDigits: 0,
64 | maximumFractionDigits: 1,
65 | ...options,
66 | }).format(number / 100);
67 |
68 | return fm;
69 | }
70 |
71 | // ----------------------------------------------------------------------
72 |
73 | export function fnShortenNumber(inputValue: InputNumberValue, options?: Options) {
74 | const locale = DEFAULT_LOCALE;
75 |
76 | const number = processInput(inputValue);
77 | if (number === null) return '';
78 |
79 | const fm = new Intl.NumberFormat(locale.code, {
80 | notation: 'compact',
81 | maximumFractionDigits: 2,
82 | ...options,
83 | }).format(number);
84 |
85 | return fm.replace(/[A-Z]/g, (match) => match.toLowerCase());
86 | }
87 |
88 | // ----------------------------------------------------------------------
89 |
90 | export function fnData(inputValue: InputNumberValue) {
91 | const number = processInput(inputValue);
92 | if (number === null || number === 0) return '0 bytes';
93 |
94 | const units = ['bytes', 'Kb', 'Mb', 'Gb', 'Tb', 'Pb', 'Eb', 'Zb', 'Yb'];
95 | const decimal = 2;
96 | const baseValue = 1024;
97 |
98 | const index = Math.floor(Math.log(number) / Math.log(baseValue));
99 | const fm = `${parseFloat((number / baseValue ** index).toFixed(decimal))} ${units[index]}`;
100 |
101 | return fm;
102 | }
103 |
--------------------------------------------------------------------------------
/public/assets/icons/notification/ic-notification-chat.svg:
--------------------------------------------------------------------------------
1 |