139 lines
4.5 KiB
TypeScript
139 lines
4.5 KiB
TypeScript
'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>
|
|
);
|
|
}
|