update build ok,
This commit is contained in:
louiscklaw
@@ -0,0 +1,101 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import Card from '@mui/material/Card';
|
||||
import CardContent from '@mui/material/CardContent';
|
||||
import CardHeader from '@mui/material/CardHeader';
|
||||
import Chip from '@mui/material/Chip';
|
||||
import Select from '@mui/material/Select';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { EnvelopeSimple as EnvelopeSimpleIcon } from '@phosphor-icons/react/dist/ssr/EnvelopeSimple';
|
||||
|
||||
import { dayjs } from '@/lib/dayjs';
|
||||
import { DataTable } from '@/components/core/data-table';
|
||||
import type { ColumnDef } from '@/components/core/data-table';
|
||||
import { Option } from '@/components/core/option';
|
||||
|
||||
export interface Notification {
|
||||
id: string;
|
||||
type: string;
|
||||
status: 'delivered' | 'pending' | 'failed';
|
||||
createdAt: Date;
|
||||
}
|
||||
|
||||
const columns = [
|
||||
{
|
||||
formatter: (row): React.JSX.Element => (
|
||||
<Typography sx={{ whiteSpace: 'nowrap' }} variant="inherit">
|
||||
{row.type}
|
||||
</Typography>
|
||||
),
|
||||
name: 'Type',
|
||||
width: '300px',
|
||||
},
|
||||
{
|
||||
formatter: (row): React.JSX.Element => {
|
||||
const mapping = {
|
||||
delivered: { label: 'Delivered', color: 'success' },
|
||||
pending: { label: 'Pending', color: 'warning' },
|
||||
failed: { label: 'Failed', color: 'error' },
|
||||
} as const;
|
||||
const { label, color } = mapping[row.status] ?? { label: 'Unknown', color: 'secondary' };
|
||||
|
||||
return <Chip color={color} label={label} size="small" variant="soft" />;
|
||||
},
|
||||
name: 'Status',
|
||||
width: '200px',
|
||||
},
|
||||
{
|
||||
formatter: (row): React.JSX.Element => (
|
||||
<Typography sx={{ whiteSpace: 'nowrap' }} variant="inherit">
|
||||
{dayjs(row.createdAt).format('MMM D, YYYY hh:mm A')}
|
||||
</Typography>
|
||||
),
|
||||
name: 'Date',
|
||||
align: 'right',
|
||||
},
|
||||
] satisfies ColumnDef<Notification>[];
|
||||
|
||||
export interface NotificationsProps {
|
||||
notifications: Notification[];
|
||||
}
|
||||
|
||||
export function Notifications({ notifications }: NotificationsProps): React.JSX.Element {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader
|
||||
avatar={
|
||||
<Avatar>
|
||||
<EnvelopeSimpleIcon fontSize="var(--Icon-fontSize)" />
|
||||
</Avatar>
|
||||
}
|
||||
title="Notifications"
|
||||
/>
|
||||
<CardContent>
|
||||
<Stack spacing={3}>
|
||||
<Stack spacing={2}>
|
||||
<Select defaultValue="last_invoice" name="type" sx={{ maxWidth: '100%', width: '320px' }}>
|
||||
<Option value="last_invoice">Resend last invoice</Option>
|
||||
<Option value="password_reset">Send password reset</Option>
|
||||
<Option value="verification">Send verification</Option>
|
||||
</Select>
|
||||
<div>
|
||||
<Button startIcon={<EnvelopeSimpleIcon />} variant="contained">
|
||||
Send email
|
||||
</Button>
|
||||
</div>
|
||||
</Stack>
|
||||
<Card sx={{ borderRadius: 1 }} variant="outlined">
|
||||
<Box sx={{ overflowX: 'auto' }}>
|
||||
<DataTable<Notification> columns={columns} rows={notifications} />
|
||||
</Box>
|
||||
</Card>
|
||||
</Stack>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
138
002_source/cms/src/components/dashboard/lesson_type/payments.tsx
Normal file
138
002_source/cms/src/components/dashboard/lesson_type/payments.tsx
Normal file
@@ -0,0 +1,138 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import Card from '@mui/material/Card';
|
||||
import CardContent from '@mui/material/CardContent';
|
||||
import CardHeader from '@mui/material/CardHeader';
|
||||
import Chip from '@mui/material/Chip';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import Link from '@mui/material/Link';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
|
||||
import { ShoppingCartSimple as ShoppingCartSimpleIcon } from '@phosphor-icons/react/dist/ssr/ShoppingCartSimple';
|
||||
|
||||
import { dayjs } from '@/lib/dayjs';
|
||||
import type { ColumnDef } from '@/components/core/data-table';
|
||||
import { DataTable } from '@/components/core/data-table';
|
||||
|
||||
export interface Payment {
|
||||
currency: string;
|
||||
amount: number;
|
||||
invoiceId: string;
|
||||
status: 'pending' | 'completed' | 'canceled' | 'refunded';
|
||||
createdAt: Date;
|
||||
}
|
||||
|
||||
const columns = [
|
||||
{
|
||||
formatter: (row): React.JSX.Element => (
|
||||
<Typography sx={{ whiteSpace: 'nowrap' }} variant="subtitle2">
|
||||
{new Intl.NumberFormat('en-US', { style: 'currency', currency: row.currency }).format(row.amount)}
|
||||
</Typography>
|
||||
),
|
||||
name: 'Amount',
|
||||
width: '200px',
|
||||
},
|
||||
{
|
||||
formatter: (row): React.JSX.Element => {
|
||||
const mapping = {
|
||||
pending: { label: 'Pending', color: 'warning' },
|
||||
completed: { label: 'Completed', color: 'success' },
|
||||
canceled: { label: 'Canceled', color: 'error' },
|
||||
refunded: { label: 'Refunded', color: 'error' },
|
||||
} as const;
|
||||
const { label, color } = mapping[row.status] ?? { label: 'Unknown', color: 'secondary' };
|
||||
|
||||
return <Chip color={color} label={label} size="small" variant="soft" />;
|
||||
},
|
||||
name: 'Status',
|
||||
width: '200px',
|
||||
},
|
||||
{
|
||||
formatter: (row): React.JSX.Element => {
|
||||
return <Link variant="inherit">{row.invoiceId}</Link>;
|
||||
},
|
||||
name: 'Invoice ID',
|
||||
width: '150px',
|
||||
},
|
||||
{
|
||||
formatter: (row): React.JSX.Element => (
|
||||
<Typography sx={{ whiteSpace: 'nowrap' }} variant="inherit">
|
||||
{dayjs(row.createdAt).format('MMM D, YYYY hh:mm A')}
|
||||
</Typography>
|
||||
),
|
||||
name: 'Date',
|
||||
align: 'right',
|
||||
},
|
||||
] satisfies ColumnDef<Payment>[];
|
||||
|
||||
export interface PaymentsProps {
|
||||
ordersValue: number;
|
||||
payments: Payment[];
|
||||
refundsValue: number;
|
||||
totalOrders: number;
|
||||
}
|
||||
|
||||
export function Payments({ ordersValue, payments = [], refundsValue, totalOrders }: PaymentsProps): React.JSX.Element {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader
|
||||
action={
|
||||
<Button color="secondary" startIcon={<PlusIcon />}>
|
||||
Create Payment
|
||||
</Button>
|
||||
}
|
||||
avatar={
|
||||
<Avatar>
|
||||
<ShoppingCartSimpleIcon fontSize="var(--Icon-fontSize)" />
|
||||
</Avatar>
|
||||
}
|
||||
title="Payments"
|
||||
/>
|
||||
<CardContent>
|
||||
<Stack spacing={3}>
|
||||
<Card sx={{ borderRadius: 1 }} variant="outlined">
|
||||
<Stack
|
||||
direction="row"
|
||||
divider={<Divider flexItem orientation="vertical" />}
|
||||
spacing={3}
|
||||
sx={{ justifyContent: 'space-between', p: 2 }}
|
||||
>
|
||||
<div>
|
||||
<Typography color="text.secondary" variant="overline">
|
||||
Total orders
|
||||
</Typography>
|
||||
<Typography variant="h6">{new Intl.NumberFormat('en-US').format(totalOrders)}</Typography>
|
||||
</div>
|
||||
<div>
|
||||
<Typography color="text.secondary" variant="overline">
|
||||
Orders value
|
||||
</Typography>
|
||||
<Typography variant="h6">
|
||||
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(ordersValue)}
|
||||
</Typography>
|
||||
</div>
|
||||
<div>
|
||||
<Typography color="text.secondary" variant="overline">
|
||||
Refunds
|
||||
</Typography>
|
||||
<Typography variant="h6">
|
||||
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(refundsValue)}
|
||||
</Typography>
|
||||
</div>
|
||||
</Stack>
|
||||
</Card>
|
||||
<Card sx={{ borderRadius: 1 }} variant="outlined">
|
||||
<Box sx={{ overflowX: 'auto' }}>
|
||||
<DataTable<Payment> columns={columns} rows={payments} />
|
||||
</Box>
|
||||
</Card>
|
||||
</Stack>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import * as React from 'react';
|
||||
import Button from '@mui/material/Button';
|
||||
import Card from '@mui/material/Card';
|
||||
import CardContent from '@mui/material/CardContent';
|
||||
import Chip from '@mui/material/Chip';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
|
||||
|
||||
export interface Address {
|
||||
id: string;
|
||||
country: string;
|
||||
state: string;
|
||||
city: string;
|
||||
zipCode: string;
|
||||
street: string;
|
||||
primary?: boolean;
|
||||
}
|
||||
|
||||
export interface ShippingAddressProps {
|
||||
address: Address;
|
||||
}
|
||||
|
||||
export function ShippingAddress({ address }: ShippingAddressProps): React.ReactElement {
|
||||
return (
|
||||
<Card sx={{ borderRadius: 1, height: '100%' }} variant="outlined">
|
||||
<CardContent>
|
||||
<Stack spacing={2}>
|
||||
<Typography>
|
||||
{address.street},
|
||||
<br />
|
||||
{address.city}, {address.state}, {address.country},
|
||||
<br />
|
||||
{address.zipCode}
|
||||
</Typography>
|
||||
<Stack direction="row" spacing={2} sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
{address.primary ? <Chip color="warning" label="Primary" variant="soft" /> : <span />}
|
||||
<Button color="secondary" size="small" startIcon={<PencilSimpleIcon />}>
|
||||
Edit
|
||||
</Button>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user