build ok,
This commit is contained in:
louiscklaw
157
002_source/cms/src/app/dashboard/e-commerce/page.tsx
Normal file
157
002_source/cms/src/app/dashboard/e-commerce/page.tsx
Normal file
@@ -0,0 +1,157 @@
|
||||
import * as React from 'react';
|
||||
import type { Metadata } from 'next';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Grid from '@mui/material/Unstable_Grid2';
|
||||
import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
|
||||
|
||||
import { config } from '@/config';
|
||||
import { Conversions } from '@/components/dashboard/e-commerce/conversions';
|
||||
import { CostBreakdown } from '@/components/dashboard/e-commerce/cost-breakdown';
|
||||
import { SalesByCountry } from '@/components/dashboard/e-commerce/sales-by-country';
|
||||
import { Stats } from '@/components/dashboard/e-commerce/stats';
|
||||
import { TopProducts } from '@/components/dashboard/e-commerce/top-products';
|
||||
|
||||
export const metadata = { title: `E-commerce | Dashboard | ${config.site.name}` } satisfies Metadata;
|
||||
|
||||
export default function Page(): React.JSX.Element {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: 'var(--Content-maxWidth)',
|
||||
m: 'var(--Content-margin)',
|
||||
p: 'var(--Content-padding)',
|
||||
width: 'var(--Content-width)',
|
||||
}}
|
||||
>
|
||||
<Stack spacing={4}>
|
||||
<Stack direction={{ xs: 'column', sm: 'row' }} spacing={3} sx={{ alignItems: 'flex-start' }}>
|
||||
<Box sx={{ flex: '1 1 auto' }}>
|
||||
<Typography variant="h4">E-commerce</Typography>
|
||||
</Box>
|
||||
<div>
|
||||
<Button startIcon={<PlusIcon />} variant="contained">
|
||||
Add product
|
||||
</Button>
|
||||
</div>
|
||||
</Stack>
|
||||
<Grid container spacing={4}>
|
||||
<Grid xs={12}>
|
||||
<Stats
|
||||
data={[
|
||||
{ name: 'Jan 1', v1: 35, v2: 3350 },
|
||||
{ name: 'Jan 2', v1: 41, v2: 3440 },
|
||||
{ name: 'Jan 2', v1: 32, v2: 3054 },
|
||||
{ name: 'Jan 3', v1: 34, v2: 3780 },
|
||||
{ name: 'Jan 4', v1: 53, v2: 3849 },
|
||||
{ name: 'Jan 5', v1: 48, v2: 4241 },
|
||||
{ name: 'Jan 6', v1: 59, v2: 4170 },
|
||||
{ name: 'Jan 7', v1: 57, v2: 4051 },
|
||||
{ name: 'Jan 8', v1: 66, v2: 4364 },
|
||||
{ name: 'Jan 9', v1: 71, v2: 4385 },
|
||||
{ name: 'Jan 10', v1: 72, v2: 4912 },
|
||||
{ name: 'Jan 11', v1: 78, v2: 4623 },
|
||||
{ name: 'Jan 12', v1: 71, v2: 4673 },
|
||||
{ name: 'Jan 13', v1: 63, v2: 4465 },
|
||||
{ name: 'Jan 14', v1: 66, v2: 4221 },
|
||||
{ name: 'Jan 15', v1: 80, v2: 5237 },
|
||||
{ name: 'Jan 16', v1: 78, v2: 5303 },
|
||||
{ name: 'Jan 17', v1: 95, v2: 5701 },
|
||||
{ name: 'Jan 18', v1: 92, v2: 5725 },
|
||||
{ name: 'Jan 19', v1: 87, v2: 5856 },
|
||||
{ name: 'Jan 20', v1: 98, v2: 6401 },
|
||||
{ name: 'Jan 21', v1: 101, v2: 6733 },
|
||||
{ name: 'Jan 22', v1: 97, v2: 6640 },
|
||||
{ name: 'Jan 23', v1: 97, v2: 6576 },
|
||||
{ name: 'Jan 24', v1: 104, v2: 7300 },
|
||||
{ name: 'Jan 25', v1: 105, v2: 7285 },
|
||||
{ name: 'Jan 26', v1: 106, v2: 7389 },
|
||||
{ name: 'Jan 27', v1: 112, v2: 7705 },
|
||||
{ name: 'Jan 28', v1: 115, v2: 8212 },
|
||||
{ name: 'Jan 29', v1: 110, v2: 8301 },
|
||||
{ name: 'Jan 30', v1: 115, v2: 8531 },
|
||||
{ name: 'Jan 31', v1: 118, v2: 8700 },
|
||||
]}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid lg={8} xs={12}>
|
||||
<Conversions
|
||||
data={[
|
||||
{ name: 'Direct calls', value: 35690 },
|
||||
{ name: 'Quote requests', value: 14859 },
|
||||
{ name: 'Ads', value: 45120 },
|
||||
{ name: 'Affiliate links', value: 3950 },
|
||||
{ name: 'Email campaigns', value: 12011 },
|
||||
{ name: 'Other', value: 5486 },
|
||||
]}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid lg={4} xs={12}>
|
||||
<CostBreakdown
|
||||
data={[
|
||||
{ name: 'Strategy', value: 14859, color: 'var(--mui-palette-success-main)' },
|
||||
{ name: 'Outsourcing', value: 35690, color: 'var(--mui-palette-warning-main)' },
|
||||
{ name: 'Marketing', value: 45120, color: 'var(--mui-palette-primary-main)' },
|
||||
{ name: 'Other', value: 25486, color: 'var(--mui-palette-background-level2)' },
|
||||
]}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid lg={8} xs={12}>
|
||||
<SalesByCountry
|
||||
sales={[
|
||||
{ countryCode: 'us', countryName: 'United States', value: 60 },
|
||||
{ countryCode: 'es', countryName: 'Spain', value: 20 },
|
||||
{ countryCode: 'uk', countryName: 'United Kingdom', value: 10 },
|
||||
{ countryCode: 'de', countryName: 'Germany', value: 5 },
|
||||
{ countryCode: 'ca', countryName: 'Canada', value: 5 },
|
||||
]}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid lg={4} xs={12}>
|
||||
<TopProducts
|
||||
products={[
|
||||
{
|
||||
id: 'PRD-001',
|
||||
name: 'Erbology Aloe Vera',
|
||||
image: '/assets/product-1.png',
|
||||
category: 'Healthcare',
|
||||
sales: 13153,
|
||||
},
|
||||
{
|
||||
id: 'PRD-002',
|
||||
name: 'Lancome Rouge',
|
||||
image: '/assets/product-2.png',
|
||||
category: 'Makeup',
|
||||
sales: 10300,
|
||||
},
|
||||
{
|
||||
id: 'PRD-003',
|
||||
name: 'Ritual of Sakura',
|
||||
image: '/assets/product-3.png',
|
||||
category: 'Skincare',
|
||||
sales: 5300,
|
||||
},
|
||||
{
|
||||
id: 'PRD-004',
|
||||
name: 'Necessaire Body Lotion',
|
||||
image: '/assets/product-4.png',
|
||||
category: 'Skincare',
|
||||
sales: 1203,
|
||||
},
|
||||
{
|
||||
id: 'PRD-005',
|
||||
name: 'Soja & Co. Eucalyptus',
|
||||
image: '/assets/product-5.png',
|
||||
category: 'Skincare',
|
||||
sales: 254,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user