build ok,

002_source/cms/src/app/dashboard/crypto/page.tsx

@@ -0,0 +1,151 @@
+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 { dayjs } from '@/lib/dayjs';
+import { AccountUpgrade } from '@/components/dashboard/crypto/account-upgrade';
+import { CreditCard } from '@/components/dashboard/crypto/credit-card';
+import { CurrencyConverter } from '@/components/dashboard/crypto/currency-converter';
+import { CurrentBalance } from '@/components/dashboard/crypto/current-balance';
+import { DigitalWallet } from '@/components/dashboard/crypto/digital-wallet';
+import { Transactions } from '@/components/dashboard/crypto/transactions';
+
+export const metadata = { title: `Crypto | 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">Crypto</Typography>
+          </Box>
+          <div>
+            <Button startIcon={<PlusIcon />} variant="contained">
+              Add wallet
+            </Button>
+          </div>
+        </Stack>
+        <Grid container spacing={4}>
+          <Grid xs={12}>
+            <Box
+              sx={{
+                display: 'grid',
+                gap: 3,
+                gridTemplateColumns: { xs: '1fr', sm: '1fr 1fr', xl: '1fr 1fr 1fr 500px' },
+              }}
+            >
+              <DigitalWallet
+                amount={0.7568}
+                color="var(--mui-palette-primary-main)"
+                currency="BTC"
+                data={[
+                  56, 61, 64, 60, 63, 61, 60, 68, 66, 64, 77, 60, 65, 51, 72, 80, 74, 67, 77, 83, 94, 95, 89, 100, 94,
+                  104, 101, 105, 104, 103, 107, 120,
+                ]}
+                diff={34.1}
+                trend="up"
+                value={16213.2}
+              />
+
+              <DigitalWallet
+                amount={2.0435}
+                color="var(--mui-palette-primary-main)"
+                currency="ETH"
+                data={[
+                  65, 64, 70, 76, 82, 80, 85, 78, 82, 95, 93, 80, 112, 102, 105, 95, 98, 102, 104, 99, 101, 100, 109,
+                  106, 111, 105, 108, 102, 118, 129,
+                ]}
+                diff={14.2}
+                trend="up"
+                value={9626.8}
+              />
+              <DigitalWallet
+                amount={25.1602}
+                color="var(--mui-palette-primary-main)"
+                currency="BNB"
+                data={[
+                  99, 101, 104, 98, 99, 99, 102, 103, 100, 101, 99, 101, 101, 98, 95, 97, 98, 92, 94, 93, 95, 82, 78,
+                  75, 80, 78, 76, 54, 45, 32, 31, 27,
+                ]}
+                diff={18}
+                trend="down"
+                value={6640}
+              />
+              <CreditCard
+                card={{
+                  id: 'CRD-001',
+                  brand: 'mastercard',
+                  cardNumber: '5823 4492 2385 1102',
+                  expiryDate: '05/28',
+                  holderName: 'Sofia Rivers',
+                }}
+              />
+            </Box>
+          </Grid>
+          <Grid md={8} xs={12}>
+            <CurrentBalance
+              data={[
+                { name: 'USD', value: 10076.81, color: 'var(--mui-palette-success-main)' },
+                { name: 'BTC', value: 16213.2, color: 'var(--mui-palette-warning-main)' },
+                { name: 'ETH', value: 9626.8, color: 'var(--mui-palette-primary-main)' },
+              ]}
+            />
+          </Grid>
+          <Grid md={4} xs={12}>
+            <CurrencyConverter />
+          </Grid>
+          <Grid md={8} xs={12}>
+            <Transactions
+              transactions={[
+                {
+                  id: 'TX-003',
+                  description: 'Buy BTC',
+                  type: 'add',
+                  balance: 643,
+                  currency: 'BTC',
+                  amount: 0.2105,
+                  createdAt: dayjs().subtract(2, 'day').subtract(1, 'hour').subtract(32, 'minute').toDate(),
+                },
+                {
+                  id: 'TX-002',
+                  description: 'Buy BTC',
+                  type: 'add',
+                  balance: 2344,
+                  currency: 'BTC',
+                  amount: 0.1337,
+                  createdAt: dayjs().subtract(3, 'day').subtract(1, 'hour').subtract(43, 'minute').toDate(),
+                },
+                {
+                  id: 'TX-001',
+                  description: 'Sell BTC',
+                  type: 'sub',
+                  balance: 4805,
+                  currency: 'BTC',
+                  amount: 0.2105,
+                  createdAt: dayjs().subtract(6, 'day').subtract(1, 'hour').subtract(32, 'minute').toDate(),
+                },
+              ]}
+            />
+          </Grid>
+          <Grid md={4} xs={12}>
+            <AccountUpgrade />
+          </Grid>
+        </Grid>
+      </Stack>
+    </Box>
+  );
+}