build ok,
This commit is contained in:
louiscklaw
@@ -1,26 +0,0 @@
|
|||||||
import PocketBase from 'pocketbase';
|
|
||||||
|
|
||||||
const pb = new PocketBase(`http://localhost:8090`);
|
|
||||||
const COLLECTION_NAME = 'LessonsTypes';
|
|
||||||
|
|
||||||
interface LessonTypeCreate {
|
|
||||||
name: string;
|
|
||||||
type: string;
|
|
||||||
pos: number;
|
|
||||||
visible: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ReqLessonTypeCreate {
|
|
||||||
data: LessonTypeCreate;
|
|
||||||
}
|
|
||||||
|
|
||||||
// POST - Create a new lesson type
|
|
||||||
export async function POST(request: Request): Promise<Response> {
|
|
||||||
const { data } = (await request.json()) as ReqLessonTypeCreate;
|
|
||||||
const record = await pb.collection(COLLECTION_NAME).create(data);
|
|
||||||
|
|
||||||
return new Response(JSON.stringify(record), {
|
|
||||||
status: 201,
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
// please keep the comment and update to perform delete operation
|
|
||||||
import PocketBase from 'pocketbase';
|
|
||||||
|
|
||||||
const { PB_HOSTNAME } = process.env;
|
|
||||||
export async function DELETE(request: Request) {
|
|
||||||
try {
|
|
||||||
const pb = new PocketBase(`http://${PB_HOSTNAME}:8090`);
|
|
||||||
const { id } = await request.json();
|
|
||||||
await pb.collection('LessonsTypes').delete(id);
|
|
||||||
|
|
||||||
return new Response('Record deleted successfully', {
|
|
||||||
status: 200,
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error);
|
|
||||||
return new Response('Failed to delete record', { status: 500 });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,31 +0,0 @@
|
|||||||
// https://nextjs.org/blog/building-apis-with-nextjs
|
|
||||||
import { NextRequest } from 'next/server';
|
|
||||||
import PocketBase from 'pocketbase';
|
|
||||||
|
|
||||||
const { PB_HOSTNAME } = process.env;
|
|
||||||
export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
|
|
||||||
const id = (await params).id;
|
|
||||||
|
|
||||||
const fields = ['id', 'name', 'type', 'visible', 'pos'].join(',');
|
|
||||||
const pb = new PocketBase(`http://${PB_HOSTNAME}:8090`);
|
|
||||||
const lessonType = await pb.collection('LessonsTypes').getOne(id, { fields });
|
|
||||||
|
|
||||||
return new Response(JSON.stringify(lessonType), {
|
|
||||||
status: 200,
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function POST(request: Request) {
|
|
||||||
// Parse the request body
|
|
||||||
const body = await request.json();
|
|
||||||
const { name } = body;
|
|
||||||
|
|
||||||
// e.g. Insert new user into your DB
|
|
||||||
const newUser = { id: Date.now(), name };
|
|
||||||
|
|
||||||
return new Response(JSON.stringify(newUser), {
|
|
||||||
status: 201,
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
###
|
|
||||||
|
|
||||||
GET http://localhost:3000/api/db/lesson_types/getById/e60v95892466775
|
|
||||||
|
|
||||||
###
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
import PocketBase from 'pocketbase';
|
|
||||||
|
|
||||||
// const { PB_HOSTNAME } = process.env;
|
|
||||||
|
|
||||||
export async function GET(): Promise<Response> {
|
|
||||||
const pb = new PocketBase(`http://localhost:8090`);
|
|
||||||
const resultList = await pb.collection('LessonsCategories').getList(1, 50, {});
|
|
||||||
|
|
||||||
// console.log(resultList);
|
|
||||||
|
|
||||||
return Response.json(resultList);
|
|
||||||
}
|
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
###
|
|
||||||
|
|
||||||
GET http://localhost:3000/api/db/lesson_categories/list
|
|
||||||
|
|
||||||
Content-Type: application/json
|
|
||||||
cache: no-store
|
|
||||||
cache-control: no-cache1
|
|
||||||
|
|
||||||
###
|
|
||||||
|
|
||||||
GET http://localhost:8090/api/collections/LessonsCategories/records
|
|
||||||
|
|
||||||
###
|
|
||||||
|
|
||||||
POST http://localhost:3000/api/lesson_categories/helloworld
|
|
||||||
|
|
||||||
Content-Type: application/json
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
export async function GET(): Promise<Response> {
|
|
||||||
const record = { hello: 'world' };
|
|
||||||
|
|
||||||
return Response.json(record);
|
|
||||||
}
|
|
||||||
@@ -1,20 +0,0 @@
|
|||||||
import { NextRequest } from 'next/server';
|
|
||||||
import PocketBase from 'pocketbase';
|
|
||||||
|
|
||||||
const { PB_HOSTNAME } = process.env;
|
|
||||||
export async function PUT(request: NextRequest) {
|
|
||||||
try {
|
|
||||||
const { id, data } = await request.json();
|
|
||||||
|
|
||||||
const pb = new PocketBase(`http://${PB_HOSTNAME}:8090`);
|
|
||||||
const updatedRecord = await pb.collection('LessonsTypes').update(id, data);
|
|
||||||
|
|
||||||
return new Response(JSON.stringify(updatedRecord), {
|
|
||||||
status: 200,
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error);
|
|
||||||
return new Response('Failed to update record', { status: 500 });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,26 +0,0 @@
|
|||||||
import PocketBase from 'pocketbase';
|
|
||||||
|
|
||||||
const pb = new PocketBase(`http://localhost:8090`);
|
|
||||||
const COLLECTION_NAME = 'LessonsTypes';
|
|
||||||
|
|
||||||
interface LessonTypeCreate {
|
|
||||||
name: string;
|
|
||||||
type: string;
|
|
||||||
pos: number;
|
|
||||||
visible: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ReqLessonTypeCreate {
|
|
||||||
data: LessonTypeCreate;
|
|
||||||
}
|
|
||||||
|
|
||||||
// POST - Create a new lesson type
|
|
||||||
export async function POST(request: Request): Promise<Response> {
|
|
||||||
const { data } = (await request.json()) as ReqLessonTypeCreate;
|
|
||||||
const record = await pb.collection(COLLECTION_NAME).create(data);
|
|
||||||
|
|
||||||
return new Response(JSON.stringify(record), {
|
|
||||||
status: 201,
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
// please keep the comment and update to perform delete operation
|
|
||||||
import PocketBase from 'pocketbase';
|
|
||||||
|
|
||||||
const { PB_HOSTNAME } = process.env;
|
|
||||||
export async function DELETE(request: Request) {
|
|
||||||
try {
|
|
||||||
const pb = new PocketBase(`http://${PB_HOSTNAME}:8090`);
|
|
||||||
const { id } = await request.json();
|
|
||||||
await pb.collection('LessonsTypes').delete(id);
|
|
||||||
|
|
||||||
return new Response('Record deleted successfully', {
|
|
||||||
status: 200,
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error);
|
|
||||||
return new Response('Failed to delete record', { status: 500 });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,31 +0,0 @@
|
|||||||
// https://nextjs.org/blog/building-apis-with-nextjs
|
|
||||||
import { NextRequest } from 'next/server';
|
|
||||||
import PocketBase from 'pocketbase';
|
|
||||||
|
|
||||||
const { PB_HOSTNAME } = process.env;
|
|
||||||
export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
|
|
||||||
const id = (await params).id;
|
|
||||||
|
|
||||||
const fields = ['id', 'name', 'type', 'visible', 'pos'].join(',');
|
|
||||||
const pb = new PocketBase(`http://${PB_HOSTNAME}:8090`);
|
|
||||||
const lessonType = await pb.collection('LessonsTypes').getOne(id, { fields });
|
|
||||||
|
|
||||||
return new Response(JSON.stringify(lessonType), {
|
|
||||||
status: 200,
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function POST(request: Request) {
|
|
||||||
// Parse the request body
|
|
||||||
const body = await request.json();
|
|
||||||
const { name } = body;
|
|
||||||
|
|
||||||
// e.g. Insert new user into your DB
|
|
||||||
const newUser = { id: Date.now(), name };
|
|
||||||
|
|
||||||
return new Response(JSON.stringify(newUser), {
|
|
||||||
status: 201,
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
###
|
|
||||||
|
|
||||||
GET http://localhost:3000/api/db/lesson_types/getById/e60v95892466775
|
|
||||||
|
|
||||||
###
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
import PocketBase from 'pocketbase';
|
|
||||||
|
|
||||||
// const { PB_HOSTNAME } = process.env;
|
|
||||||
|
|
||||||
export async function GET(): Promise<Response> {
|
|
||||||
const pb = new PocketBase(`http://localhost:8090`);
|
|
||||||
const resultList = await pb.collection('LessonsTypes').getList(1, 50, {});
|
|
||||||
|
|
||||||
// console.log(resultList);
|
|
||||||
|
|
||||||
return Response.json(resultList);
|
|
||||||
}
|
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
###
|
|
||||||
|
|
||||||
GET http://localhost:3000/api/db/lesson_types/list
|
|
||||||
|
|
||||||
Content-Type: application/json
|
|
||||||
cache: no-store
|
|
||||||
cache-control: no-cache1
|
|
||||||
|
|
||||||
###
|
|
||||||
|
|
||||||
GET http://localhost:8090/api/collections/LessonsTypes/records
|
|
||||||
|
|
||||||
###
|
|
||||||
|
|
||||||
POST http://localhost:3000/api/lesson_types/helloworld
|
|
||||||
|
|
||||||
Content-Type: application/json
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
export async function GET(): Promise<Response> {
|
|
||||||
const record = { hello: 'world' };
|
|
||||||
|
|
||||||
return Response.json(record);
|
|
||||||
}
|
|
||||||
@@ -1,20 +0,0 @@
|
|||||||
import { NextRequest } from 'next/server';
|
|
||||||
import PocketBase from 'pocketbase';
|
|
||||||
|
|
||||||
const { PB_HOSTNAME } = process.env;
|
|
||||||
export async function PUT(request: NextRequest) {
|
|
||||||
try {
|
|
||||||
const { id, data } = await request.json();
|
|
||||||
|
|
||||||
const pb = new PocketBase(`http://${PB_HOSTNAME}:8090`);
|
|
||||||
const updatedRecord = await pb.collection('LessonsTypes').update(id, data);
|
|
||||||
|
|
||||||
return new Response(JSON.stringify(updatedRecord), {
|
|
||||||
status: 200,
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error);
|
|
||||||
return new Response('Failed to update record', { status: 500 });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
import PocketBase from 'pocketbase';
|
|
||||||
|
|
||||||
export async function GET(): Promise<Response> {
|
|
||||||
const { PB_HOSTNAME } = process.env;
|
|
||||||
const pb = new PocketBase(`http://${PB_HOSTNAME}:8090`);
|
|
||||||
const resultList = await pb.collection('Vocabularies').getList(1, 50, {});
|
|
||||||
|
|
||||||
return Response.json(resultList);
|
|
||||||
}
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
###
|
|
||||||
|
|
||||||
GET http://localhost:3000/api/db/lesson_types/list
|
|
||||||
|
|
||||||
###
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
export const dynamic = 'force-static';
|
|
||||||
|
|
||||||
export async function GET(): Promise<Response> {
|
|
||||||
return Response.json({ hello: 'world' });
|
|
||||||
}
|
|
||||||
@@ -1,308 +0,0 @@
|
|||||||
import * as React from 'react';
|
|
||||||
import type { Metadata } from 'next';
|
|
||||||
import RouterLink from 'next/link';
|
|
||||||
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 IconButton from '@mui/material/IconButton';
|
|
||||||
import LinearProgress from '@mui/material/LinearProgress';
|
|
||||||
import Link from '@mui/material/Link';
|
|
||||||
import Stack from '@mui/material/Stack';
|
|
||||||
import Typography from '@mui/material/Typography';
|
|
||||||
import Grid from '@mui/material/Unstable_Grid2';
|
|
||||||
import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/ArrowLeft';
|
|
||||||
import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/CaretDown';
|
|
||||||
import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
|
|
||||||
import { CreditCard as CreditCardIcon } from '@phosphor-icons/react/dist/ssr/CreditCard';
|
|
||||||
import { House as HouseIcon } from '@phosphor-icons/react/dist/ssr/House';
|
|
||||||
import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
|
|
||||||
import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
|
|
||||||
import { ShieldWarning as ShieldWarningIcon } from '@phosphor-icons/react/dist/ssr/ShieldWarning';
|
|
||||||
import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
|
|
||||||
|
|
||||||
import { config } from '@/config';
|
|
||||||
import { paths } from '@/paths';
|
|
||||||
import { dayjs } from '@/lib/dayjs';
|
|
||||||
import { PropertyItem } from '@/components/core/property-item';
|
|
||||||
import { PropertyList } from '@/components/core/property-list';
|
|
||||||
import { Notifications } from '@/components/dashboard/lesson_category/notifications';
|
|
||||||
import { Payments } from '@/components/dashboard/lesson_category/payments';
|
|
||||||
import type { Address } from '@/components/dashboard/lesson_category/shipping-address';
|
|
||||||
import { ShippingAddress } from '@/components/dashboard/lesson_category/shipping-address';
|
|
||||||
|
|
||||||
export const metadata = { title: `Details | Customers | 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 spacing={3}>
|
|
||||||
<div>
|
|
||||||
<Link
|
|
||||||
color="text.primary"
|
|
||||||
component={RouterLink}
|
|
||||||
href={paths.dashboard.lesson_categories.list}
|
|
||||||
sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
|
|
||||||
variant="subtitle2"
|
|
||||||
>
|
|
||||||
<ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
|
|
||||||
Lesson Categories
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
<Stack direction={{ xs: 'column', sm: 'row' }} spacing={3} sx={{ alignItems: 'flex-start' }}>
|
|
||||||
<Stack direction="row" spacing={2} sx={{ alignItems: 'center', flex: '1 1 auto' }}>
|
|
||||||
<Avatar src="/assets/avatar-1.png" sx={{ '--Avatar-size': '64px' }}>
|
|
||||||
MV
|
|
||||||
</Avatar>
|
|
||||||
<div>
|
|
||||||
<Stack direction="row" spacing={2} sx={{ alignItems: 'center', flexWrap: 'wrap' }}>
|
|
||||||
<Typography variant="h4">Miron Vitold</Typography>
|
|
||||||
<Chip
|
|
||||||
icon={<CheckCircleIcon color="var(--mui-palette-success-main)" weight="fill" />}
|
|
||||||
label="Active"
|
|
||||||
size="small"
|
|
||||||
variant="outlined"
|
|
||||||
/>
|
|
||||||
</Stack>
|
|
||||||
<Typography color="text.secondary" variant="body1">
|
|
||||||
miron.vitold@domain.com
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
</Stack>
|
|
||||||
<div>
|
|
||||||
<Button endIcon={<CaretDownIcon />} variant="contained">
|
|
||||||
Action
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</Stack>
|
|
||||||
</Stack>
|
|
||||||
<Grid container spacing={4}>
|
|
||||||
<Grid lg={4} xs={12}>
|
|
||||||
<Stack spacing={4}>
|
|
||||||
<Card>
|
|
||||||
<CardHeader
|
|
||||||
action={
|
|
||||||
<IconButton>
|
|
||||||
<PencilSimpleIcon />
|
|
||||||
</IconButton>
|
|
||||||
}
|
|
||||||
avatar={
|
|
||||||
<Avatar>
|
|
||||||
<UserIcon fontSize="var(--Icon-fontSize)" />
|
|
||||||
</Avatar>
|
|
||||||
}
|
|
||||||
title="Basic details"
|
|
||||||
/>
|
|
||||||
<PropertyList
|
|
||||||
divider={<Divider />}
|
|
||||||
orientation="vertical"
|
|
||||||
sx={{ '--PropertyItem-padding': '12px 24px' }}
|
|
||||||
>
|
|
||||||
{(
|
|
||||||
[
|
|
||||||
{ key: 'Customer ID', value: <Chip label="USR-001" size="small" variant="soft" /> },
|
|
||||||
{ key: 'Name', value: 'Miron Vitold' },
|
|
||||||
{ key: 'Email', value: 'miron.vitold@domain.com' },
|
|
||||||
{ key: 'Phone', value: '(425) 434-5535' },
|
|
||||||
{ key: 'Company', value: 'Devias IO' },
|
|
||||||
{
|
|
||||||
key: 'Quota',
|
|
||||||
value: (
|
|
||||||
<Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
|
|
||||||
<LinearProgress sx={{ flex: '1 1 auto' }} value={50} variant="determinate" />
|
|
||||||
<Typography color="text.secondary" variant="body2">
|
|
||||||
50%
|
|
||||||
</Typography>
|
|
||||||
</Stack>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
] satisfies { key: string; value: React.ReactNode }[]
|
|
||||||
).map(
|
|
||||||
(item): React.JSX.Element => (
|
|
||||||
<PropertyItem key={item.key} name={item.key} value={item.value} />
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
</PropertyList>
|
|
||||||
</Card>
|
|
||||||
<Card>
|
|
||||||
<CardHeader
|
|
||||||
avatar={
|
|
||||||
<Avatar>
|
|
||||||
<ShieldWarningIcon fontSize="var(--Icon-fontSize)" />
|
|
||||||
</Avatar>
|
|
||||||
}
|
|
||||||
title="Security"
|
|
||||||
/>
|
|
||||||
<CardContent>
|
|
||||||
<Stack spacing={1}>
|
|
||||||
<div>
|
|
||||||
<Button color="error" variant="contained">
|
|
||||||
Delete account
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<Typography color="text.secondary" variant="body2">
|
|
||||||
A deleted customer cannot be restored. All data will be permanently removed.
|
|
||||||
</Typography>
|
|
||||||
</Stack>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</Stack>
|
|
||||||
</Grid>
|
|
||||||
<Grid lg={8} xs={12}>
|
|
||||||
<Stack spacing={4}>
|
|
||||||
<Payments
|
|
||||||
ordersValue={2069.48}
|
|
||||||
payments={[
|
|
||||||
{
|
|
||||||
currency: 'USD',
|
|
||||||
amount: 500,
|
|
||||||
invoiceId: 'INV-005',
|
|
||||||
status: 'completed',
|
|
||||||
createdAt: dayjs().subtract(5, 'minute').subtract(1, 'hour').toDate(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
currency: 'USD',
|
|
||||||
amount: 324.5,
|
|
||||||
invoiceId: 'INV-004',
|
|
||||||
status: 'refunded',
|
|
||||||
createdAt: dayjs().subtract(21, 'minute').subtract(2, 'hour').toDate(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
currency: 'USD',
|
|
||||||
amount: 746.5,
|
|
||||||
invoiceId: 'INV-003',
|
|
||||||
status: 'completed',
|
|
||||||
createdAt: dayjs().subtract(7, 'minute').subtract(3, 'hour').toDate(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
currency: 'USD',
|
|
||||||
amount: 56.89,
|
|
||||||
invoiceId: 'INV-002',
|
|
||||||
status: 'completed',
|
|
||||||
createdAt: dayjs().subtract(48, 'minute').subtract(4, 'hour').toDate(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
currency: 'USD',
|
|
||||||
amount: 541.59,
|
|
||||||
invoiceId: 'INV-001',
|
|
||||||
status: 'completed',
|
|
||||||
createdAt: dayjs().subtract(31, 'minute').subtract(5, 'hour').toDate(),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
refundsValue={324.5}
|
|
||||||
totalOrders={5}
|
|
||||||
/>
|
|
||||||
<Card>
|
|
||||||
<CardHeader
|
|
||||||
action={
|
|
||||||
<Button color="secondary" startIcon={<PencilSimpleIcon />}>
|
|
||||||
Edit
|
|
||||||
</Button>
|
|
||||||
}
|
|
||||||
avatar={
|
|
||||||
<Avatar>
|
|
||||||
<CreditCardIcon fontSize="var(--Icon-fontSize)" />
|
|
||||||
</Avatar>
|
|
||||||
}
|
|
||||||
title="Billing details"
|
|
||||||
/>
|
|
||||||
<CardContent>
|
|
||||||
<Card sx={{ borderRadius: 1 }} variant="outlined">
|
|
||||||
<PropertyList divider={<Divider />} sx={{ '--PropertyItem-padding': '16px' }}>
|
|
||||||
{(
|
|
||||||
[
|
|
||||||
{ key: 'Credit card', value: '**** 4142' },
|
|
||||||
{ key: 'Country', value: 'United States' },
|
|
||||||
{ key: 'State', value: 'Michigan' },
|
|
||||||
{ key: 'City', value: 'Southfield' },
|
|
||||||
{ key: 'Address', value: '1721 Bartlett Avenue, 48034' },
|
|
||||||
{ key: 'Tax ID', value: 'EU87956621' },
|
|
||||||
] satisfies { key: string; value: React.ReactNode }[]
|
|
||||||
).map(
|
|
||||||
(item): React.JSX.Element => (
|
|
||||||
<PropertyItem key={item.key} name={item.key} value={item.value} />
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
</PropertyList>
|
|
||||||
</Card>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
<Card>
|
|
||||||
<CardHeader
|
|
||||||
action={
|
|
||||||
<Button color="secondary" startIcon={<PlusIcon />}>
|
|
||||||
Add
|
|
||||||
</Button>
|
|
||||||
}
|
|
||||||
avatar={
|
|
||||||
<Avatar>
|
|
||||||
<HouseIcon fontSize="var(--Icon-fontSize)" />
|
|
||||||
</Avatar>
|
|
||||||
}
|
|
||||||
title="Shipping addresses"
|
|
||||||
/>
|
|
||||||
<CardContent>
|
|
||||||
<Grid container spacing={3}>
|
|
||||||
{(
|
|
||||||
[
|
|
||||||
{
|
|
||||||
id: 'ADR-001',
|
|
||||||
country: 'United States',
|
|
||||||
state: 'Michigan',
|
|
||||||
city: 'Lansing',
|
|
||||||
zipCode: '48933',
|
|
||||||
street: '480 Haven Lane',
|
|
||||||
primary: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'ADR-002',
|
|
||||||
country: 'United States',
|
|
||||||
state: 'Missouri',
|
|
||||||
city: 'Springfield',
|
|
||||||
zipCode: '65804',
|
|
||||||
street: '4807 Lighthouse Drive',
|
|
||||||
},
|
|
||||||
] satisfies Address[]
|
|
||||||
).map((address) => (
|
|
||||||
<Grid key={address.id} md={6} xs={12}>
|
|
||||||
<ShippingAddress address={address} />
|
|
||||||
</Grid>
|
|
||||||
))}
|
|
||||||
</Grid>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
<Notifications
|
|
||||||
notifications={[
|
|
||||||
{
|
|
||||||
id: 'EV-002',
|
|
||||||
type: 'Refund request approved',
|
|
||||||
status: 'pending',
|
|
||||||
createdAt: dayjs().subtract(34, 'minute').subtract(5, 'hour').subtract(3, 'day').toDate(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'EV-001',
|
|
||||||
type: 'Order confirmation',
|
|
||||||
status: 'delivered',
|
|
||||||
createdAt: dayjs().subtract(49, 'minute').subtract(11, 'hour').subtract(4, 'day').toDate(),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</Stack>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Stack>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,48 +0,0 @@
|
|||||||
import * as React from 'react';
|
|
||||||
import type { Metadata } from 'next';
|
|
||||||
import RouterLink from 'next/link';
|
|
||||||
import Box from '@mui/material/Box';
|
|
||||||
import Link from '@mui/material/Link';
|
|
||||||
import Stack from '@mui/material/Stack';
|
|
||||||
import Typography from '@mui/material/Typography';
|
|
||||||
import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/ArrowLeft';
|
|
||||||
|
|
||||||
import { config } from '@/config';
|
|
||||||
import { paths } from '@/paths';
|
|
||||||
import { CustomerCreateForm } from '@/components/dashboard/lesson_category/lesson-category-create-form';
|
|
||||||
|
|
||||||
export const metadata = { title: `Create | Customers | 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 spacing={3}>
|
|
||||||
<div>
|
|
||||||
<Link
|
|
||||||
color="text.primary"
|
|
||||||
component={RouterLink}
|
|
||||||
href={paths.dashboard.lesson_categories.list}
|
|
||||||
sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
|
|
||||||
variant="subtitle2"
|
|
||||||
>
|
|
||||||
<ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
|
|
||||||
Lesson Categories
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Typography variant="h4">Create customer</Typography>
|
|
||||||
</div>
|
|
||||||
</Stack>
|
|
||||||
<CustomerCreateForm />
|
|
||||||
</Stack>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,55 +0,0 @@
|
|||||||
import { dayjs } from '@/lib/dayjs';
|
|
||||||
import type { LessonCategory } from '@/components/dashboard/lesson_category/lesson-categories-table';
|
|
||||||
|
|
||||||
export const lessonCategoriesSampleData = [
|
|
||||||
{
|
|
||||||
id: 'USR-005',
|
|
||||||
name: 'Fran Perez',
|
|
||||||
avatar: '/assets/avatar-5.png',
|
|
||||||
email: 'fran.perez@domain.com',
|
|
||||||
phone: '(815) 704-0045',
|
|
||||||
quota: 50,
|
|
||||||
status: 'active',
|
|
||||||
createdAt: dayjs().subtract(1, 'hour').toDate(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'USR-004',
|
|
||||||
name: 'Penjani Inyene',
|
|
||||||
avatar: '/assets/avatar-4.png',
|
|
||||||
email: 'penjani.inyene@domain.com',
|
|
||||||
phone: '(803) 937-8925',
|
|
||||||
quota: 100,
|
|
||||||
status: 'active',
|
|
||||||
createdAt: dayjs().subtract(3, 'hour').toDate(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'USR-003',
|
|
||||||
name: 'Carson Darrin',
|
|
||||||
avatar: '/assets/avatar-3.png',
|
|
||||||
email: 'carson.darrin@domain.com',
|
|
||||||
phone: '(715) 278-5041',
|
|
||||||
quota: 10,
|
|
||||||
status: 'blocked',
|
|
||||||
createdAt: dayjs().subtract(1, 'hour').subtract(1, 'day').toDate(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'USR-002',
|
|
||||||
name: 'Siegbert Gottfried',
|
|
||||||
avatar: '/assets/avatar-2.png',
|
|
||||||
email: 'siegbert.gottfried@domain.com',
|
|
||||||
phone: '(603) 766-0431',
|
|
||||||
quota: 0,
|
|
||||||
status: 'pending',
|
|
||||||
createdAt: dayjs().subtract(7, 'hour').subtract(1, 'day').toDate(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'USR-001',
|
|
||||||
name: 'Miron Vitold',
|
|
||||||
avatar: '/assets/avatar-1.png',
|
|
||||||
email: 'miron.vitold@domain.com',
|
|
||||||
phone: '(425) 434-5535',
|
|
||||||
quota: 50,
|
|
||||||
status: 'active',
|
|
||||||
createdAt: dayjs().subtract(2, 'hour').subtract(2, 'day').toDate(),
|
|
||||||
},
|
|
||||||
] satisfies LessonCategory[];
|
|
||||||
@@ -1,103 +0,0 @@
|
|||||||
import * as React from 'react';
|
|
||||||
import type { Metadata } from 'next';
|
|
||||||
import Box from '@mui/material/Box';
|
|
||||||
import Button from '@mui/material/Button';
|
|
||||||
import Card from '@mui/material/Card';
|
|
||||||
import Divider from '@mui/material/Divider';
|
|
||||||
import Stack from '@mui/material/Stack';
|
|
||||||
import Typography from '@mui/material/Typography';
|
|
||||||
import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
|
|
||||||
|
|
||||||
import { config } from '@/config';
|
|
||||||
import { LessonCategoriesFilters } from '@/components/dashboard/lesson_category/lesson-categories-filters';
|
|
||||||
import type { Filters } from '@/components/dashboard/lesson_category/lesson-categories-filters';
|
|
||||||
import { LessonCategoriesPagination } from '@/components/dashboard/lesson_category/lesson-categories-pagination';
|
|
||||||
import { LessonCategoriesSelectionProvider } from '@/components/dashboard/lesson_category/lesson-categories-selection-context';
|
|
||||||
import { LessonCategoriesTable } from '@/components/dashboard/lesson_category/lesson-categories-table';
|
|
||||||
import type { LessonCategory } from '@/components/dashboard/lesson_category/lesson-categories-table';
|
|
||||||
|
|
||||||
import { lessonCategoriesSampleData } from './lesson-categories-sample-data';
|
|
||||||
|
|
||||||
export const metadata = { title: `List | Customers | Dashboard | ${config.site.name}` } satisfies Metadata;
|
|
||||||
|
|
||||||
interface PageProps {
|
|
||||||
searchParams: { email?: string; phone?: string; sortDir?: 'asc' | 'desc'; status?: string };
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function Page({ searchParams }: PageProps): React.JSX.Element {
|
|
||||||
const { email, phone, sortDir, status } = searchParams;
|
|
||||||
|
|
||||||
const sortedLessonCategories = applySort(lessonCategoriesSampleData, sortDir);
|
|
||||||
const filteredLessonCategories = applyFilters(sortedLessonCategories, { email, phone, status });
|
|
||||||
|
|
||||||
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">Lesson Categories</Typography>
|
|
||||||
</Box>
|
|
||||||
<Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
|
|
||||||
<Button startIcon={<PlusIcon />} variant="contained">
|
|
||||||
Add
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
</Stack>
|
|
||||||
<LessonCategoriesSelectionProvider lessonCategories={filteredLessonCategories}>
|
|
||||||
<Card>
|
|
||||||
<LessonCategoriesFilters filters={{ email, phone, status }} sortDir={sortDir} />
|
|
||||||
<Divider />
|
|
||||||
<Box sx={{ overflowX: 'auto' }}>
|
|
||||||
<LessonCategoriesTable rows={filteredLessonCategories} />
|
|
||||||
</Box>
|
|
||||||
<Divider />
|
|
||||||
<LessonCategoriesPagination count={filteredLessonCategories.length + 100} page={0} />
|
|
||||||
</Card>
|
|
||||||
</LessonCategoriesSelectionProvider>
|
|
||||||
</Stack>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Sorting and filtering has to be done on the server.
|
|
||||||
|
|
||||||
function applySort(row: LessonCategory[], sortDir: 'asc' | 'desc' | undefined): LessonCategory[] {
|
|
||||||
return row.sort((a, b) => {
|
|
||||||
if (sortDir === 'asc') {
|
|
||||||
return a.createdAt.getTime() - b.createdAt.getTime();
|
|
||||||
}
|
|
||||||
|
|
||||||
return b.createdAt.getTime() - a.createdAt.getTime();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function applyFilters(row: LessonCategory[], { email, phone, status }: Filters): LessonCategory[] {
|
|
||||||
return row.filter((item) => {
|
|
||||||
if (email) {
|
|
||||||
if (!item.email?.toLowerCase().includes(email.toLowerCase())) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (phone) {
|
|
||||||
if (!item.phone?.toLowerCase().includes(phone.toLowerCase())) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (status) {
|
|
||||||
if (item.status !== status) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@@ -1,339 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import * as React from 'react';
|
|
||||||
import RouterLink from 'next/link';
|
|
||||||
import { useParams, useRouter } from 'next/navigation';
|
|
||||||
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 IconButton from '@mui/material/IconButton';
|
|
||||||
import LinearProgress from '@mui/material/LinearProgress';
|
|
||||||
import Link from '@mui/material/Link';
|
|
||||||
import Stack from '@mui/material/Stack';
|
|
||||||
import Typography from '@mui/material/Typography';
|
|
||||||
import Grid from '@mui/material/Unstable_Grid2';
|
|
||||||
import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/ArrowLeft';
|
|
||||||
import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/CaretDown';
|
|
||||||
import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
|
|
||||||
import { CreditCard as CreditCardIcon } from '@phosphor-icons/react/dist/ssr/CreditCard';
|
|
||||||
import { House as HouseIcon } from '@phosphor-icons/react/dist/ssr/House';
|
|
||||||
import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
|
|
||||||
import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
|
|
||||||
import { ShieldWarning as ShieldWarningIcon } from '@phosphor-icons/react/dist/ssr/ShieldWarning';
|
|
||||||
import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
import { paths } from '@/paths';
|
|
||||||
import { dayjs } from '@/lib/dayjs';
|
|
||||||
import { PropertyItem } from '@/components/core/property-item';
|
|
||||||
import { PropertyList } from '@/components/core/property-list';
|
|
||||||
import { getLessonTypeById } from '@/components/dashboard/lesson_type/http-actions';
|
|
||||||
import { LessonTypeDefaultValue, type LessonType } from '@/components/dashboard/lesson_type/ILessonType';
|
|
||||||
import { Notifications } from '@/components/dashboard/lesson_type/notifications';
|
|
||||||
import { Payments } from '@/components/dashboard/lesson_type/payments';
|
|
||||||
import type { Address } from '@/components/dashboard/lesson_type/shipping-address';
|
|
||||||
import { ShippingAddress } from '@/components/dashboard/lesson_type/shipping-address';
|
|
||||||
|
|
||||||
export default function Page(): React.JSX.Element {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const { typeId } = useParams<{ typeId: string }>();
|
|
||||||
const [isLoading, setIsLoading] = React.useState<boolean>(true);
|
|
||||||
const [showLessonType, setShowLessonType] = React.useState<LessonType>(LessonTypeDefaultValue);
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
function handleEditClick() {
|
|
||||||
router.push(paths.dashboard.lesson_types.edit(showLessonType.id));
|
|
||||||
}
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
getLessonTypeById(typeId)
|
|
||||||
.then((lessonType: LessonType) => {
|
|
||||||
setIsLoading(false);
|
|
||||||
setShowLessonType(lessonType);
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
// console.error(err);
|
|
||||||
console.error(t('lessonType.load_error'));
|
|
||||||
});
|
|
||||||
// console.log('hello');
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
if (isLoading) return <div>{t('common.loading')}</div>;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
maxWidth: 'var(--Content-maxWidth)',
|
|
||||||
m: 'var(--Content-margin)',
|
|
||||||
p: 'var(--Content-padding)',
|
|
||||||
width: 'var(--Content-width)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Stack spacing={4}>
|
|
||||||
<Stack spacing={3}>
|
|
||||||
<div>
|
|
||||||
<Link
|
|
||||||
color="text.primary"
|
|
||||||
component={RouterLink}
|
|
||||||
href={paths.dashboard.lesson_types.list}
|
|
||||||
sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
|
|
||||||
variant="subtitle2"
|
|
||||||
>
|
|
||||||
<ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
|
|
||||||
{t('Lesson Types')}
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
<Stack direction={{ xs: 'column', sm: 'row' }} spacing={3} sx={{ alignItems: 'flex-start' }}>
|
|
||||||
<Stack direction="row" spacing={2} sx={{ alignItems: 'center', flex: '1 1 auto' }}>
|
|
||||||
<Avatar src="/assets/avatar-1.png" sx={{ '--Avatar-size': '64px' }}>
|
|
||||||
MV
|
|
||||||
</Avatar>
|
|
||||||
<div>
|
|
||||||
<Stack direction="row" spacing={2} sx={{ alignItems: 'center', flexWrap: 'wrap' }}>
|
|
||||||
<Typography variant="h4">{showLessonType.name}</Typography>
|
|
||||||
<Chip
|
|
||||||
icon={<CheckCircleIcon color="var(--mui-palette-success-main)" weight="fill" />}
|
|
||||||
label={showLessonType.visible}
|
|
||||||
size="small"
|
|
||||||
variant="outlined"
|
|
||||||
/>
|
|
||||||
</Stack>
|
|
||||||
<Typography color="text.secondary" variant="body1">
|
|
||||||
{showLessonType.id}
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
</Stack>
|
|
||||||
<div>
|
|
||||||
<Button endIcon={<CaretDownIcon />} variant="contained">
|
|
||||||
Action
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</Stack>
|
|
||||||
</Stack>
|
|
||||||
<Grid container spacing={4}>
|
|
||||||
<Grid lg={4} xs={12}>
|
|
||||||
<Stack spacing={4}>
|
|
||||||
<Card>
|
|
||||||
<CardHeader
|
|
||||||
action={
|
|
||||||
<IconButton
|
|
||||||
onClick={() => {
|
|
||||||
handleEditClick();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<PencilSimpleIcon />
|
|
||||||
</IconButton>
|
|
||||||
}
|
|
||||||
avatar={
|
|
||||||
<Avatar>
|
|
||||||
<UserIcon fontSize="var(--Icon-fontSize)" />
|
|
||||||
</Avatar>
|
|
||||||
}
|
|
||||||
title="Basic details"
|
|
||||||
/>
|
|
||||||
<PropertyList
|
|
||||||
divider={<Divider />}
|
|
||||||
orientation="vertical"
|
|
||||||
sx={{ '--PropertyItem-padding': '12px 24px' }}
|
|
||||||
>
|
|
||||||
{(
|
|
||||||
[
|
|
||||||
{ key: 'Customer ID', value: <Chip label={showLessonType.id} size="small" variant="soft" /> },
|
|
||||||
{ key: 'Name', value: showLessonType.name },
|
|
||||||
{ key: 'Type', value: showLessonType.type },
|
|
||||||
{ key: 'Pos', value: showLessonType.pos },
|
|
||||||
{ key: 'Visible', value: <Chip label={showLessonType.visible} size="small" variant="soft" /> },
|
|
||||||
{
|
|
||||||
key: 'Quota',
|
|
||||||
value: (
|
|
||||||
<Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
|
|
||||||
<LinearProgress sx={{ flex: '1 1 auto' }} value={50} variant="determinate" />
|
|
||||||
<Typography color="text.secondary" variant="body2">
|
|
||||||
50%
|
|
||||||
</Typography>
|
|
||||||
</Stack>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
] satisfies { key: string; value: React.ReactNode }[]
|
|
||||||
).map(
|
|
||||||
(item): React.JSX.Element => (
|
|
||||||
<PropertyItem key={item.key} name={item.key} value={item.value} />
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
</PropertyList>
|
|
||||||
</Card>
|
|
||||||
<Card>
|
|
||||||
<CardHeader
|
|
||||||
avatar={
|
|
||||||
<Avatar>
|
|
||||||
<ShieldWarningIcon fontSize="var(--Icon-fontSize)" />
|
|
||||||
</Avatar>
|
|
||||||
}
|
|
||||||
title="Security"
|
|
||||||
/>
|
|
||||||
<CardContent>
|
|
||||||
<Stack spacing={1}>
|
|
||||||
<div>
|
|
||||||
<Button color="error" variant="contained">
|
|
||||||
Delete account
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<Typography color="text.secondary" variant="body2">
|
|
||||||
A deleted lesson type cannot be restored. All data will be permanently removed.
|
|
||||||
</Typography>
|
|
||||||
</Stack>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</Stack>
|
|
||||||
</Grid>
|
|
||||||
<Grid lg={8} xs={12}>
|
|
||||||
<Stack spacing={4}>
|
|
||||||
<Payments
|
|
||||||
ordersValue={2069.48}
|
|
||||||
payments={[
|
|
||||||
{
|
|
||||||
currency: 'USD',
|
|
||||||
amount: 500,
|
|
||||||
invoiceId: 'INV-005',
|
|
||||||
status: 'completed',
|
|
||||||
createdAt: dayjs().subtract(5, 'minute').subtract(1, 'hour').toDate(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
currency: 'USD',
|
|
||||||
amount: 324.5,
|
|
||||||
invoiceId: 'INV-004',
|
|
||||||
status: 'refunded',
|
|
||||||
createdAt: dayjs().subtract(21, 'minute').subtract(2, 'hour').toDate(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
currency: 'USD',
|
|
||||||
amount: 746.5,
|
|
||||||
invoiceId: 'INV-003',
|
|
||||||
status: 'completed',
|
|
||||||
createdAt: dayjs().subtract(7, 'minute').subtract(3, 'hour').toDate(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
currency: 'USD',
|
|
||||||
amount: 56.89,
|
|
||||||
invoiceId: 'INV-002',
|
|
||||||
status: 'completed',
|
|
||||||
createdAt: dayjs().subtract(48, 'minute').subtract(4, 'hour').toDate(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
currency: 'USD',
|
|
||||||
amount: 541.59,
|
|
||||||
invoiceId: 'INV-001',
|
|
||||||
status: 'completed',
|
|
||||||
createdAt: dayjs().subtract(31, 'minute').subtract(5, 'hour').toDate(),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
refundsValue={324.5}
|
|
||||||
totalOrders={5}
|
|
||||||
/>
|
|
||||||
<Card>
|
|
||||||
<CardHeader
|
|
||||||
action={
|
|
||||||
<Button color="secondary" startIcon={<PencilSimpleIcon />}>
|
|
||||||
Edit
|
|
||||||
</Button>
|
|
||||||
}
|
|
||||||
avatar={
|
|
||||||
<Avatar>
|
|
||||||
<CreditCardIcon fontSize="var(--Icon-fontSize)" />
|
|
||||||
</Avatar>
|
|
||||||
}
|
|
||||||
title="Billing details"
|
|
||||||
/>
|
|
||||||
<CardContent>
|
|
||||||
<Card sx={{ borderRadius: 1 }} variant="outlined">
|
|
||||||
<PropertyList divider={<Divider />} sx={{ '--PropertyItem-padding': '16px' }}>
|
|
||||||
{(
|
|
||||||
[
|
|
||||||
{ key: 'Credit card', value: '**** 4142' },
|
|
||||||
{ key: 'Country', value: 'United States' },
|
|
||||||
{ key: 'State', value: 'Michigan' },
|
|
||||||
{ key: 'City', value: 'Southfield' },
|
|
||||||
{ key: 'Address', value: '1721 Bartlett Avenue, 48034' },
|
|
||||||
{ key: 'Tax ID', value: 'EU87956621' },
|
|
||||||
] satisfies { key: string; value: React.ReactNode }[]
|
|
||||||
).map(
|
|
||||||
(item): React.JSX.Element => (
|
|
||||||
<PropertyItem key={item.key} name={item.key} value={item.value} />
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
</PropertyList>
|
|
||||||
</Card>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
<Card>
|
|
||||||
<CardHeader
|
|
||||||
action={
|
|
||||||
<Button color="secondary" startIcon={<PlusIcon />}>
|
|
||||||
Add
|
|
||||||
</Button>
|
|
||||||
}
|
|
||||||
avatar={
|
|
||||||
<Avatar>
|
|
||||||
<HouseIcon fontSize="var(--Icon-fontSize)" />
|
|
||||||
</Avatar>
|
|
||||||
}
|
|
||||||
title="Shipping addresses"
|
|
||||||
/>
|
|
||||||
<CardContent>
|
|
||||||
<Grid container spacing={3}>
|
|
||||||
{(
|
|
||||||
[
|
|
||||||
{
|
|
||||||
id: 'ADR-001',
|
|
||||||
country: 'United States',
|
|
||||||
state: 'Michigan',
|
|
||||||
city: 'Lansing',
|
|
||||||
zipCode: '48933',
|
|
||||||
street: '480 Haven Lane',
|
|
||||||
primary: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'ADR-002',
|
|
||||||
country: 'United States',
|
|
||||||
state: 'Missouri',
|
|
||||||
city: 'Springfield',
|
|
||||||
zipCode: '65804',
|
|
||||||
street: '4807 Lighthouse Drive',
|
|
||||||
},
|
|
||||||
] satisfies Address[]
|
|
||||||
).map((address) => (
|
|
||||||
<Grid key={address.id} md={6} xs={12}>
|
|
||||||
<ShippingAddress address={address} />
|
|
||||||
</Grid>
|
|
||||||
))}
|
|
||||||
</Grid>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
<Notifications
|
|
||||||
notifications={[
|
|
||||||
{
|
|
||||||
id: 'EV-002',
|
|
||||||
type: 'Refund request approved',
|
|
||||||
status: 'pending',
|
|
||||||
createdAt: dayjs().subtract(34, 'minute').subtract(5, 'hour').subtract(3, 'day').toDate(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'EV-001',
|
|
||||||
type: 'Order confirmation',
|
|
||||||
status: 'delivered',
|
|
||||||
createdAt: dayjs().subtract(49, 'minute').subtract(11, 'hour').subtract(4, 'day').toDate(),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</Stack>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Stack>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,48 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import * as React from 'react';
|
|
||||||
import RouterLink from 'next/link';
|
|
||||||
import Box from '@mui/material/Box';
|
|
||||||
import Link from '@mui/material/Link';
|
|
||||||
import Stack from '@mui/material/Stack';
|
|
||||||
import Typography from '@mui/material/Typography';
|
|
||||||
import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/ArrowLeft';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
import { paths } from '@/paths';
|
|
||||||
import { LessonTypeCreateForm } from '@/components/dashboard/lesson_type/lesson-type-create-form';
|
|
||||||
|
|
||||||
export default function Page(): React.JSX.Element {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
return (
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
maxWidth: 'var(--Content-maxWidth)',
|
|
||||||
m: 'var(--Content-margin)',
|
|
||||||
p: 'var(--Content-padding)',
|
|
||||||
width: 'var(--Content-width)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Stack spacing={4}>
|
|
||||||
<Stack spacing={3}>
|
|
||||||
<div>
|
|
||||||
<Link
|
|
||||||
color="text.primary"
|
|
||||||
component={RouterLink}
|
|
||||||
href={paths.dashboard.lesson_types.list}
|
|
||||||
sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
|
|
||||||
variant="subtitle2"
|
|
||||||
>
|
|
||||||
<ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
|
|
||||||
{t('dashboard.lessonTypes.title')}
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Typography variant="h4">{t('dashboard.lessonTypes.create.title')}</Typography>
|
|
||||||
</div>
|
|
||||||
</Stack>
|
|
||||||
<LessonTypeCreateForm />
|
|
||||||
</Stack>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,48 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import * as React from 'react';
|
|
||||||
import RouterLink from 'next/link';
|
|
||||||
import Box from '@mui/material/Box';
|
|
||||||
import Link from '@mui/material/Link';
|
|
||||||
import Stack from '@mui/material/Stack';
|
|
||||||
import Typography from '@mui/material/Typography';
|
|
||||||
import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/ArrowLeft';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
import { paths } from '@/paths';
|
|
||||||
import { LessonTypeEditForm } from '@/components/dashboard/lesson_type/lesson-type-edit-form';
|
|
||||||
|
|
||||||
export default function Page(): React.JSX.Element {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
return (
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
maxWidth: 'var(--Content-maxWidth)',
|
|
||||||
m: 'var(--Content-margin)',
|
|
||||||
p: 'var(--Content-padding)',
|
|
||||||
width: 'var(--Content-width)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Stack spacing={4}>
|
|
||||||
<Stack spacing={3}>
|
|
||||||
<div>
|
|
||||||
<Link
|
|
||||||
color="text.primary"
|
|
||||||
component={RouterLink}
|
|
||||||
href={paths.dashboard.lesson_types.list}
|
|
||||||
sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
|
|
||||||
variant="subtitle2"
|
|
||||||
>
|
|
||||||
<ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
|
|
||||||
{t('dashboard.lessonTypes.title')}
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Typography variant="h4">{t('dashboard.lessonTypes.edit.title')}</Typography>
|
|
||||||
</div>
|
|
||||||
</Stack>
|
|
||||||
<LessonTypeEditForm />
|
|
||||||
</Stack>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,37 +0,0 @@
|
|||||||
import { dayjs } from '@/lib/dayjs';
|
|
||||||
import type { LessonType } from '@/components/dashboard/lesson_type/ILessonType';
|
|
||||||
|
|
||||||
// import { helloworld } from '@/components/dashboard/lesson_type/helloworld';
|
|
||||||
// export const metadata = { title: `List | Customers | Dashboard | ${config.site.name}` } satisfies Metadata;
|
|
||||||
export const lessonTypesSampleData = [
|
|
||||||
{
|
|
||||||
id: 'USR-005',
|
|
||||||
name: 'Fran Perez',
|
|
||||||
type: 'vocabulary',
|
|
||||||
pos: 1,
|
|
||||||
visible: 'visible',
|
|
||||||
avatar: '/assets/avatar-5.png',
|
|
||||||
email: 'fran.perez@domain.com',
|
|
||||||
phone: '(815) 704-0045',
|
|
||||||
quota: 50,
|
|
||||||
status: 'active',
|
|
||||||
createdAt: dayjs().subtract(1, 'hour').toDate(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'USR-004',
|
|
||||||
name: 'Penjani Inyene',
|
|
||||||
type: 'connectives',
|
|
||||||
pos: 1,
|
|
||||||
visible: 'visible',
|
|
||||||
avatar: '/assets/avatar-4.png',
|
|
||||||
email: 'penjani.inyene@domain.com',
|
|
||||||
phone: '(803) 937-8925',
|
|
||||||
quota: 100,
|
|
||||||
status: 'active',
|
|
||||||
createdAt: dayjs().subtract(3, 'hour').toDate(),
|
|
||||||
},
|
|
||||||
] satisfies LessonType[];
|
|
||||||
|
|
||||||
export const lessonTypesData = (): LessonType[] => {
|
|
||||||
return lessonTypesSampleData;
|
|
||||||
};
|
|
||||||
@@ -1,33 +0,0 @@
|
|||||||
import { dayjs } from '@/lib/dayjs';
|
|
||||||
import type { LessonType } from '@/components/dashboard/lesson_type/ILessonType';
|
|
||||||
|
|
||||||
// import { helloworld } from '@/components/dashboard/lesson_type/helloworld';
|
|
||||||
// export const metadata = { title: `List | Customers | Dashboard | ${config.site.name}` } satisfies Metadata;
|
|
||||||
export const lessonTypesSampleData = [
|
|
||||||
{
|
|
||||||
id: 'USR-005',
|
|
||||||
name: 'Vocabulary',
|
|
||||||
type: 'vocabulary',
|
|
||||||
pos: 1,
|
|
||||||
visible: 'visible',
|
|
||||||
avatar: '/assets/avatar-5.png',
|
|
||||||
email: 'fran.perez@domain.com',
|
|
||||||
phone: '(815) 704-0045',
|
|
||||||
quota: 50,
|
|
||||||
status: 'active',
|
|
||||||
createdAt: dayjs().subtract(1, 'hour').toDate(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'USR-004',
|
|
||||||
name: 'Connectives',
|
|
||||||
type: 'connectives',
|
|
||||||
pos: 2,
|
|
||||||
visible: 'visible',
|
|
||||||
avatar: '/assets/avatar-4.png',
|
|
||||||
email: 'penjani.inyene@domain.com',
|
|
||||||
phone: '(803) 937-8925',
|
|
||||||
quota: 100,
|
|
||||||
status: 'active',
|
|
||||||
createdAt: dayjs().subtract(3, 'hour').toDate(),
|
|
||||||
},
|
|
||||||
] satisfies LessonType[];
|
|
||||||
@@ -1,169 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import * as React from 'react';
|
|
||||||
import { useRouter } from 'next/navigation';
|
|
||||||
import { LoadingButton } from '@mui/lab';
|
|
||||||
import Box from '@mui/material/Box';
|
|
||||||
import Card from '@mui/material/Card';
|
|
||||||
import Divider from '@mui/material/Divider';
|
|
||||||
import Stack from '@mui/material/Stack';
|
|
||||||
import Typography from '@mui/material/Typography';
|
|
||||||
import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
import { paths } from '@/paths';
|
|
||||||
import { logger } from '@/lib/default-logger';
|
|
||||||
import { toast } from '@/components/core/toaster';
|
|
||||||
import { listLessonTypes } from '@/components/dashboard/lesson_type/http-actions';
|
|
||||||
import type { LessonType } from '@/components/dashboard/lesson_type/ILessonType';
|
|
||||||
import { LessonTypesFilters } from '@/components/dashboard/lesson_type/lesson-types-filters';
|
|
||||||
import type { Filters } from '@/components/dashboard/lesson_type/lesson-types-filters';
|
|
||||||
import { LessonTypesPagination } from '@/components/dashboard/lesson_type/lesson-types-pagination';
|
|
||||||
import { LessonTypesSelectionProvider } from '@/components/dashboard/lesson_type/lesson-types-selection-context';
|
|
||||||
import { LessonTypesTable } from '@/components/dashboard/lesson_type/lesson-types-table';
|
|
||||||
import FormLoading from '@/components/loading';
|
|
||||||
|
|
||||||
interface PageProps {
|
|
||||||
searchParams: {
|
|
||||||
email?: string;
|
|
||||||
phone?: string;
|
|
||||||
sortDir?: 'asc' | 'desc';
|
|
||||||
status?: string;
|
|
||||||
name?: string;
|
|
||||||
visible?: string;
|
|
||||||
type?: string;
|
|
||||||
//
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function Page({ searchParams }: PageProps): React.JSX.Element {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const { email, phone, sortDir, status, name, visible, type } = searchParams;
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const [isLoadingAddPage, setIsLoadingAddPage] = React.useState<boolean>(false);
|
|
||||||
const [lessonTypesData, setLessonTypesData] = React.useState<LessonType[]>([]);
|
|
||||||
const sortedLessonTypes = applySort(lessonTypesData, sortDir);
|
|
||||||
const filteredLessonTypes = applyFilters(sortedLessonTypes, {
|
|
||||||
email,
|
|
||||||
phone,
|
|
||||||
status,
|
|
||||||
name,
|
|
||||||
type,
|
|
||||||
visible,
|
|
||||||
//
|
|
||||||
});
|
|
||||||
|
|
||||||
const reloadRows = () => {
|
|
||||||
listLessonTypes()
|
|
||||||
.then((lessonTypes: LessonType[]) => {
|
|
||||||
setLessonTypesData(lessonTypes);
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
logger.error(err);
|
|
||||||
toast(t('dashboard.lessonTypes.list.error'));
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
reloadRows();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
if (lessonTypesData.length < 1) return <FormLoading />;
|
|
||||||
|
|
||||||
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">{t('Lesson Types')}</Typography>
|
|
||||||
</Box>
|
|
||||||
<Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
|
|
||||||
<LoadingButton
|
|
||||||
loading={isLoadingAddPage}
|
|
||||||
onClick={(): void => {
|
|
||||||
setIsLoadingAddPage(true);
|
|
||||||
router.push(paths.dashboard.lesson_types.create);
|
|
||||||
}}
|
|
||||||
startIcon={<PlusIcon />}
|
|
||||||
variant="contained"
|
|
||||||
>
|
|
||||||
{/* add new lesson type */}
|
|
||||||
{t('dashboard.lessonTypes.add')}
|
|
||||||
</LoadingButton>
|
|
||||||
</Box>
|
|
||||||
</Stack>
|
|
||||||
<LessonTypesSelectionProvider lessonTypes={filteredLessonTypes}>
|
|
||||||
<Card>
|
|
||||||
<LessonTypesFilters
|
|
||||||
filters={{ email, phone, status, name, visible, type }}
|
|
||||||
fullData={lessonTypesData}
|
|
||||||
sortDir={sortDir}
|
|
||||||
/>
|
|
||||||
<Divider />
|
|
||||||
<Box sx={{ overflowX: 'auto' }}>
|
|
||||||
<LessonTypesTable reloadRows={reloadRows} rows={filteredLessonTypes} />
|
|
||||||
</Box>
|
|
||||||
<Divider />
|
|
||||||
<LessonTypesPagination count={filteredLessonTypes.length + 100} page={0} />
|
|
||||||
</Card>
|
|
||||||
</LessonTypesSelectionProvider>
|
|
||||||
</Stack>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Sorting and filtering has to be done on the server.
|
|
||||||
|
|
||||||
function applySort(row: LessonType[], sortDir: 'asc' | 'desc' | undefined): LessonType[] {
|
|
||||||
return row.sort((a, b) => {
|
|
||||||
if (sortDir === 'asc') {
|
|
||||||
return a.createdAt.getTime() - b.createdAt.getTime();
|
|
||||||
}
|
|
||||||
|
|
||||||
return b.createdAt.getTime() - a.createdAt.getTime();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function applyFilters(row: LessonType[], { email, phone, status, name, visible }: Filters): LessonType[] {
|
|
||||||
return row.filter((item) => {
|
|
||||||
if (email) {
|
|
||||||
if (!item.email?.toLowerCase().includes(email.toLowerCase())) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (phone) {
|
|
||||||
if (!item.phone?.toLowerCase().includes(phone.toLowerCase())) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (status) {
|
|
||||||
if (item.status !== status) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (name) {
|
|
||||||
if (!item.name?.toLowerCase().includes(name.toLowerCase())) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (visible) {
|
|
||||||
if (!item.visible?.toLowerCase().includes(visible.toLowerCase())) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
const helloworld = 'helloworld';
|
|
||||||
|
|
||||||
export { helloworld };
|
|
||||||
@@ -1,244 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import * as React from 'react';
|
|
||||||
import { useRouter } from 'next/navigation';
|
|
||||||
import Button from '@mui/material/Button';
|
|
||||||
import Chip from '@mui/material/Chip';
|
|
||||||
import Divider from '@mui/material/Divider';
|
|
||||||
import FormControl from '@mui/material/FormControl';
|
|
||||||
import OutlinedInput from '@mui/material/OutlinedInput';
|
|
||||||
import Select from '@mui/material/Select';
|
|
||||||
import type { SelectChangeEvent } from '@mui/material/Select';
|
|
||||||
import Stack from '@mui/material/Stack';
|
|
||||||
import Tab from '@mui/material/Tab';
|
|
||||||
import Tabs from '@mui/material/Tabs';
|
|
||||||
import Typography from '@mui/material/Typography';
|
|
||||||
|
|
||||||
import { paths } from '@/paths';
|
|
||||||
import { FilterButton, FilterPopover, useFilterContext } from '@/components/core/filter-button';
|
|
||||||
import { Option } from '@/components/core/option';
|
|
||||||
|
|
||||||
import { useLessonCategoriesSelection } from './lesson-categories-selection-context';
|
|
||||||
|
|
||||||
// The tabs should be generated using API data.
|
|
||||||
const tabs = [
|
|
||||||
{ label: 'All', value: '', count: 5 },
|
|
||||||
{ label: 'Active', value: 'active', count: 3 },
|
|
||||||
{ label: 'Pending', value: 'pending', count: 1 },
|
|
||||||
{ label: 'Blocked', value: 'blocked', count: 1 },
|
|
||||||
] as const;
|
|
||||||
|
|
||||||
export interface Filters {
|
|
||||||
email?: string;
|
|
||||||
phone?: string;
|
|
||||||
status?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export type SortDir = 'asc' | 'desc';
|
|
||||||
|
|
||||||
export interface LessonCategoriesFiltersProps {
|
|
||||||
filters?: Filters;
|
|
||||||
sortDir?: SortDir;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function LessonCategoriesFilters({
|
|
||||||
filters = {},
|
|
||||||
sortDir = 'desc',
|
|
||||||
}: LessonCategoriesFiltersProps): React.JSX.Element {
|
|
||||||
const { email, phone, status } = filters;
|
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const selection = useLessonCategoriesSelection();
|
|
||||||
|
|
||||||
const updateSearchParams = React.useCallback(
|
|
||||||
(newFilters: Filters, newSortDir: SortDir): void => {
|
|
||||||
const searchParams = new URLSearchParams();
|
|
||||||
|
|
||||||
if (newSortDir === 'asc') {
|
|
||||||
searchParams.set('sortDir', newSortDir);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (newFilters.status) {
|
|
||||||
searchParams.set('status', newFilters.status);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (newFilters.email) {
|
|
||||||
searchParams.set('email', newFilters.email);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (newFilters.phone) {
|
|
||||||
searchParams.set('phone', newFilters.phone);
|
|
||||||
}
|
|
||||||
|
|
||||||
router.push(`${paths.dashboard.lesson_categories.list}?${searchParams.toString()}`);
|
|
||||||
},
|
|
||||||
[router]
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleClearFilters = React.useCallback(() => {
|
|
||||||
updateSearchParams({}, sortDir);
|
|
||||||
}, [updateSearchParams, sortDir]);
|
|
||||||
|
|
||||||
const handleStatusChange = React.useCallback(
|
|
||||||
(_: React.SyntheticEvent, value: string) => {
|
|
||||||
updateSearchParams({ ...filters, status: value }, sortDir);
|
|
||||||
},
|
|
||||||
[updateSearchParams, filters, sortDir]
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleEmailChange = React.useCallback(
|
|
||||||
(value?: string) => {
|
|
||||||
updateSearchParams({ ...filters, email: value }, sortDir);
|
|
||||||
},
|
|
||||||
[updateSearchParams, filters, sortDir]
|
|
||||||
);
|
|
||||||
|
|
||||||
const handlePhoneChange = React.useCallback(
|
|
||||||
(value?: string) => {
|
|
||||||
updateSearchParams({ ...filters, phone: value }, sortDir);
|
|
||||||
},
|
|
||||||
[updateSearchParams, filters, sortDir]
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleSortChange = React.useCallback(
|
|
||||||
(event: SelectChangeEvent) => {
|
|
||||||
updateSearchParams(filters, event.target.value as SortDir);
|
|
||||||
},
|
|
||||||
[updateSearchParams, filters]
|
|
||||||
);
|
|
||||||
|
|
||||||
const hasFilters = status || email || phone;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Tabs onChange={handleStatusChange} sx={{ px: 3 }} value={status ?? ''} variant="scrollable">
|
|
||||||
{tabs.map((tab) => (
|
|
||||||
<Tab
|
|
||||||
icon={<Chip label={tab.count} size="small" variant="soft" />}
|
|
||||||
iconPosition="end"
|
|
||||||
key={tab.value}
|
|
||||||
label={tab.label}
|
|
||||||
sx={{ minHeight: 'auto' }}
|
|
||||||
tabIndex={0}
|
|
||||||
value={tab.value}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</Tabs>
|
|
||||||
<Divider />
|
|
||||||
<Stack direction="row" spacing={2} sx={{ alignItems: 'center', flexWrap: 'wrap', px: 3, py: 2 }}>
|
|
||||||
<Stack direction="row" spacing={2} sx={{ alignItems: 'center', flex: '1 1 auto', flexWrap: 'wrap' }}>
|
|
||||||
<FilterButton
|
|
||||||
displayValue={email}
|
|
||||||
label="Email"
|
|
||||||
onFilterApply={(value) => {
|
|
||||||
handleEmailChange(value as string);
|
|
||||||
}}
|
|
||||||
onFilterDelete={() => {
|
|
||||||
handleEmailChange();
|
|
||||||
}}
|
|
||||||
popover={<EmailFilterPopover />}
|
|
||||||
value={email}
|
|
||||||
/>
|
|
||||||
<FilterButton
|
|
||||||
displayValue={phone}
|
|
||||||
label="Phone number"
|
|
||||||
onFilterApply={(value) => {
|
|
||||||
handlePhoneChange(value as string);
|
|
||||||
}}
|
|
||||||
onFilterDelete={() => {
|
|
||||||
handlePhoneChange();
|
|
||||||
}}
|
|
||||||
popover={<PhoneFilterPopover />}
|
|
||||||
value={phone}
|
|
||||||
/>
|
|
||||||
{hasFilters ? <Button onClick={handleClearFilters}>Clear filters</Button> : null}
|
|
||||||
</Stack>
|
|
||||||
{selection.selectedAny ? (
|
|
||||||
<Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
|
|
||||||
<Typography color="text.secondary" variant="body2">
|
|
||||||
{selection.selected.size} selected
|
|
||||||
</Typography>
|
|
||||||
<Button color="error" variant="contained">
|
|
||||||
Delete
|
|
||||||
</Button>
|
|
||||||
</Stack>
|
|
||||||
) : null}
|
|
||||||
<Select name="sort" onChange={handleSortChange} sx={{ maxWidth: '100%', width: '120px' }} value={sortDir}>
|
|
||||||
<Option value="desc">Newest</Option>
|
|
||||||
<Option value="asc">Oldest</Option>
|
|
||||||
</Select>
|
|
||||||
</Stack>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function EmailFilterPopover(): React.JSX.Element {
|
|
||||||
const { anchorEl, onApply, onClose, open, value: initialValue } = useFilterContext();
|
|
||||||
const [value, setValue] = React.useState<string>('');
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
setValue((initialValue as string | undefined) ?? '');
|
|
||||||
}, [initialValue]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<FilterPopover anchorEl={anchorEl} onClose={onClose} open={open} title="Filter by email">
|
|
||||||
<FormControl>
|
|
||||||
<OutlinedInput
|
|
||||||
onChange={(event) => {
|
|
||||||
setValue(event.target.value);
|
|
||||||
}}
|
|
||||||
onKeyUp={(event) => {
|
|
||||||
if (event.key === 'Enter') {
|
|
||||||
onApply(value);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
value={value}
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
onApply(value);
|
|
||||||
}}
|
|
||||||
variant="contained"
|
|
||||||
>
|
|
||||||
Apply
|
|
||||||
</Button>
|
|
||||||
</FilterPopover>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function PhoneFilterPopover(): React.JSX.Element {
|
|
||||||
const { anchorEl, onApply, onClose, open, value: initialValue } = useFilterContext();
|
|
||||||
const [value, setValue] = React.useState<string>('');
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
setValue((initialValue as string | undefined) ?? '');
|
|
||||||
}, [initialValue]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<FilterPopover anchorEl={anchorEl} onClose={onClose} open={open} title="Filter by phone number">
|
|
||||||
<FormControl>
|
|
||||||
<OutlinedInput
|
|
||||||
onChange={(event) => {
|
|
||||||
setValue(event.target.value);
|
|
||||||
}}
|
|
||||||
onKeyUp={(event) => {
|
|
||||||
if (event.key === 'Enter') {
|
|
||||||
onApply(value);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
value={value}
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
onApply(value);
|
|
||||||
}}
|
|
||||||
variant="contained"
|
|
||||||
>
|
|
||||||
Apply
|
|
||||||
</Button>
|
|
||||||
</FilterPopover>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,30 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import * as React from 'react';
|
|
||||||
import TablePagination from '@mui/material/TablePagination';
|
|
||||||
|
|
||||||
function noop(): void {
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface LessonCategoriesPaginationProps {
|
|
||||||
count: number;
|
|
||||||
page: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function LessonCategoriesPagination({ count, page }: LessonCategoriesPaginationProps): React.JSX.Element {
|
|
||||||
// You should implement the pagination using a similar logic as the filters.
|
|
||||||
// Note that when page change, you should keep the filter search params.
|
|
||||||
|
|
||||||
return (
|
|
||||||
<TablePagination
|
|
||||||
component="div"
|
|
||||||
count={count}
|
|
||||||
onPageChange={noop}
|
|
||||||
onRowsPerPageChange={noop}
|
|
||||||
page={page}
|
|
||||||
rowsPerPage={5}
|
|
||||||
rowsPerPageOptions={[5, 10, 25]}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import * as React from 'react';
|
|
||||||
|
|
||||||
import { useSelection } from '@/hooks/use-selection';
|
|
||||||
import type { Selection } from '@/hooks/use-selection';
|
|
||||||
|
|
||||||
import type { LessonCategory } from './lesson-categories-table';
|
|
||||||
|
|
||||||
function noop(): void {
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface LessonCategoriesSelectionContextValue extends Selection {}
|
|
||||||
|
|
||||||
export const LessonCategoriesSelectionContext = React.createContext<LessonCategoriesSelectionContextValue>({
|
|
||||||
deselectAll: noop,
|
|
||||||
deselectOne: noop,
|
|
||||||
selectAll: noop,
|
|
||||||
selectOne: noop,
|
|
||||||
selected: new Set(),
|
|
||||||
selectedAny: false,
|
|
||||||
selectedAll: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
interface LessonCategoriesSelectionProviderProps {
|
|
||||||
children: React.ReactNode;
|
|
||||||
lessonCategories: LessonCategory[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export function LessonCategoriesSelectionProvider({
|
|
||||||
children,
|
|
||||||
lessonCategories = [],
|
|
||||||
}: LessonCategoriesSelectionProviderProps): React.JSX.Element {
|
|
||||||
const customerIds = React.useMemo(() => lessonCategories.map((customer) => customer.id), [lessonCategories]);
|
|
||||||
const selection = useSelection(customerIds);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<LessonCategoriesSelectionContext.Provider value={{ ...selection }}>
|
|
||||||
{children}
|
|
||||||
</LessonCategoriesSelectionContext.Provider>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useLessonCategoriesSelection(): LessonCategoriesSelectionContextValue {
|
|
||||||
return React.useContext(LessonCategoriesSelectionContext);
|
|
||||||
}
|
|
||||||
@@ -1,139 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import * as React from 'react';
|
|
||||||
import RouterLink from 'next/link';
|
|
||||||
import Avatar from '@mui/material/Avatar';
|
|
||||||
import Box from '@mui/material/Box';
|
|
||||||
import Chip from '@mui/material/Chip';
|
|
||||||
import IconButton from '@mui/material/IconButton';
|
|
||||||
import LinearProgress from '@mui/material/LinearProgress';
|
|
||||||
import Link from '@mui/material/Link';
|
|
||||||
import Stack from '@mui/material/Stack';
|
|
||||||
import Typography from '@mui/material/Typography';
|
|
||||||
import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
|
|
||||||
import { Clock as ClockIcon } from '@phosphor-icons/react/dist/ssr/Clock';
|
|
||||||
import { Minus as MinusIcon } from '@phosphor-icons/react/dist/ssr/Minus';
|
|
||||||
import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
|
|
||||||
|
|
||||||
import { paths } from '@/paths';
|
|
||||||
import { dayjs } from '@/lib/dayjs';
|
|
||||||
import { DataTable } from '@/components/core/data-table';
|
|
||||||
import type { ColumnDef } from '@/components/core/data-table';
|
|
||||||
|
|
||||||
import { useLessonCategoriesSelection } from './lesson-categories-selection-context';
|
|
||||||
|
|
||||||
export interface LessonCategory {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
avatar?: string;
|
|
||||||
email: string;
|
|
||||||
phone?: string;
|
|
||||||
quota: number;
|
|
||||||
status: 'pending' | 'active' | 'blocked';
|
|
||||||
createdAt: Date;
|
|
||||||
}
|
|
||||||
|
|
||||||
const columns = [
|
|
||||||
{
|
|
||||||
formatter: (row): React.JSX.Element => (
|
|
||||||
<Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
|
|
||||||
<Avatar src={row.avatar} />{' '}
|
|
||||||
<div>
|
|
||||||
<Link
|
|
||||||
color="inherit"
|
|
||||||
component={RouterLink}
|
|
||||||
href={paths.dashboard.lesson_categories.details('1')}
|
|
||||||
sx={{ whiteSpace: 'nowrap' }}
|
|
||||||
variant="subtitle2"
|
|
||||||
>
|
|
||||||
{row.name}
|
|
||||||
</Link>
|
|
||||||
<Typography color="text.secondary" variant="body2">
|
|
||||||
{row.email}
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
</Stack>
|
|
||||||
),
|
|
||||||
name: 'Name',
|
|
||||||
width: '250px',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
formatter: (row): React.JSX.Element => (
|
|
||||||
<Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
|
|
||||||
<LinearProgress sx={{ flex: '1 1 auto' }} value={row.quota} variant="determinate" />
|
|
||||||
<Typography color="text.secondary" variant="body2">
|
|
||||||
{new Intl.NumberFormat('en-US', { style: 'percent', maximumFractionDigits: 2 }).format(row.quota / 100)}
|
|
||||||
</Typography>
|
|
||||||
</Stack>
|
|
||||||
),
|
|
||||||
name: 'Quota',
|
|
||||||
width: '250px',
|
|
||||||
},
|
|
||||||
{ field: 'phone', name: 'Phone number', width: '150px' },
|
|
||||||
{
|
|
||||||
formatter(row) {
|
|
||||||
return dayjs(row.createdAt).format('MMM D, YYYY h:mm A');
|
|
||||||
},
|
|
||||||
name: 'Created at',
|
|
||||||
width: '200px',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
formatter: (row): React.JSX.Element => {
|
|
||||||
const mapping = {
|
|
||||||
active: { label: 'Active', icon: <CheckCircleIcon color="var(--mui-palette-success-main)" weight="fill" /> },
|
|
||||||
blocked: { label: 'Blocked', icon: <MinusIcon color="var(--mui-palette-error-main)" /> },
|
|
||||||
pending: { label: 'Pending', icon: <ClockIcon color="var(--mui-palette-warning-main)" weight="fill" /> },
|
|
||||||
} as const;
|
|
||||||
const { label, icon } = mapping[row.status] ?? { label: 'Unknown', icon: null };
|
|
||||||
|
|
||||||
return <Chip icon={icon} label={label} size="small" variant="outlined" />;
|
|
||||||
},
|
|
||||||
name: 'Status',
|
|
||||||
width: '150px',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
formatter: (): React.JSX.Element => (
|
|
||||||
<IconButton component={RouterLink} href={paths.dashboard.lesson_categories.details('1')}>
|
|
||||||
<PencilSimpleIcon />
|
|
||||||
</IconButton>
|
|
||||||
),
|
|
||||||
name: 'Actions',
|
|
||||||
hideName: true,
|
|
||||||
width: '100px',
|
|
||||||
align: 'right',
|
|
||||||
},
|
|
||||||
] satisfies ColumnDef<LessonCategory>[];
|
|
||||||
|
|
||||||
export interface LessonCategoriesTableProps {
|
|
||||||
rows: LessonCategory[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export function LessonCategoriesTable({ rows }: LessonCategoriesTableProps): React.JSX.Element {
|
|
||||||
const { deselectAll, deselectOne, selectAll, selectOne, selected } = useLessonCategoriesSelection();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<React.Fragment>
|
|
||||||
<DataTable<LessonCategory>
|
|
||||||
columns={columns}
|
|
||||||
onDeselectAll={deselectAll}
|
|
||||||
onDeselectOne={(_, row) => {
|
|
||||||
deselectOne(row.id);
|
|
||||||
}}
|
|
||||||
onSelectAll={selectAll}
|
|
||||||
onSelectOne={(_, row) => {
|
|
||||||
selectOne(row.id);
|
|
||||||
}}
|
|
||||||
rows={rows}
|
|
||||||
selectable
|
|
||||||
selected={selected}
|
|
||||||
/>
|
|
||||||
{!rows.length ? (
|
|
||||||
<Box sx={{ p: 3 }}>
|
|
||||||
<Typography color="text.secondary" sx={{ textAlign: 'center' }} variant="body2">
|
|
||||||
No lesson categories found
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
) : null}
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,398 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import * as React from 'react';
|
|
||||||
import RouterLink from 'next/link';
|
|
||||||
import { useRouter } from 'next/navigation';
|
|
||||||
import { zodResolver } from '@hookform/resolvers/zod';
|
|
||||||
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 CardActions from '@mui/material/CardActions';
|
|
||||||
import CardContent from '@mui/material/CardContent';
|
|
||||||
import Checkbox from '@mui/material/Checkbox';
|
|
||||||
import Divider from '@mui/material/Divider';
|
|
||||||
import FormControl from '@mui/material/FormControl';
|
|
||||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
|
||||||
import FormHelperText from '@mui/material/FormHelperText';
|
|
||||||
import InputLabel from '@mui/material/InputLabel';
|
|
||||||
import OutlinedInput from '@mui/material/OutlinedInput';
|
|
||||||
import Select from '@mui/material/Select';
|
|
||||||
import Stack from '@mui/material/Stack';
|
|
||||||
import Typography from '@mui/material/Typography';
|
|
||||||
import Grid from '@mui/material/Unstable_Grid2';
|
|
||||||
import { Camera as CameraIcon } from '@phosphor-icons/react/dist/ssr/Camera';
|
|
||||||
import { Controller, useForm } from 'react-hook-form';
|
|
||||||
import { z as zod } from 'zod';
|
|
||||||
|
|
||||||
import { paths } from '@/paths';
|
|
||||||
import { logger } from '@/lib/default-logger';
|
|
||||||
import { Option } from '@/components/core/option';
|
|
||||||
import { toast } from '@/components/core/toaster';
|
|
||||||
|
|
||||||
function fileToBase64(file: Blob): Promise<string> {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
reader.onload = () => {
|
|
||||||
resolve(reader.result as string);
|
|
||||||
};
|
|
||||||
reader.onerror = () => {
|
|
||||||
reject(new Error('Error converting file to base64'));
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const schema = zod.object({
|
|
||||||
avatar: zod.string().optional(),
|
|
||||||
name: zod.string().min(1, 'Name is required').max(255),
|
|
||||||
email: zod.string().email('Must be a valid email').min(1, 'Email is required').max(255),
|
|
||||||
phone: zod.string().min(1, 'Phone is required').max(15),
|
|
||||||
company: zod.string().max(255),
|
|
||||||
billingAddress: zod.object({
|
|
||||||
country: zod.string().min(1, 'Country is required').max(255),
|
|
||||||
state: zod.string().min(1, 'State is required').max(255),
|
|
||||||
city: zod.string().min(1, 'City is required').max(255),
|
|
||||||
zipCode: zod.string().min(1, 'Zip code is required').max(255),
|
|
||||||
line1: zod.string().min(1, 'Street line 1 is required').max(255),
|
|
||||||
line2: zod.string().max(255).optional(),
|
|
||||||
}),
|
|
||||||
taxId: zod.string().max(255).optional(),
|
|
||||||
timezone: zod.string().min(1, 'Timezone is required').max(255),
|
|
||||||
language: zod.string().min(1, 'Language is required').max(255),
|
|
||||||
currency: zod.string().min(1, 'Currency is required').max(255),
|
|
||||||
});
|
|
||||||
|
|
||||||
type Values = zod.infer<typeof schema>;
|
|
||||||
|
|
||||||
const defaultValues = {
|
|
||||||
avatar: '',
|
|
||||||
name: '',
|
|
||||||
email: '',
|
|
||||||
phone: '',
|
|
||||||
company: '',
|
|
||||||
billingAddress: { country: '', state: '', city: '', zipCode: '', line1: '', line2: '' },
|
|
||||||
taxId: '',
|
|
||||||
timezone: 'new_york',
|
|
||||||
language: 'en',
|
|
||||||
currency: 'USD',
|
|
||||||
} satisfies Values;
|
|
||||||
|
|
||||||
export function CustomerCreateForm(): React.JSX.Element {
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const {
|
|
||||||
control,
|
|
||||||
handleSubmit,
|
|
||||||
formState: { errors },
|
|
||||||
setValue,
|
|
||||||
watch,
|
|
||||||
} = useForm<Values>({ defaultValues, resolver: zodResolver(schema) });
|
|
||||||
|
|
||||||
const onSubmit = React.useCallback(
|
|
||||||
async (_: Values): Promise<void> => {
|
|
||||||
try {
|
|
||||||
// Make API request
|
|
||||||
toast.success('Customer updated');
|
|
||||||
router.push(paths.dashboard.lesson_categories.details('1'));
|
|
||||||
} catch (err) {
|
|
||||||
logger.error(err);
|
|
||||||
toast.error('Something went wrong!');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[router]
|
|
||||||
);
|
|
||||||
|
|
||||||
const avatarInputRef = React.useRef<HTMLInputElement>(null);
|
|
||||||
const avatar = watch('avatar');
|
|
||||||
|
|
||||||
const handleAvatarChange = React.useCallback(
|
|
||||||
async (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const file = event.target.files?.[0];
|
|
||||||
|
|
||||||
if (file) {
|
|
||||||
const url = await fileToBase64(file);
|
|
||||||
setValue('avatar', url);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[setValue]
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<form onSubmit={handleSubmit(onSubmit)}>
|
|
||||||
<Card>
|
|
||||||
<CardContent>
|
|
||||||
<Stack divider={<Divider />} spacing={4}>
|
|
||||||
<Stack spacing={3}>
|
|
||||||
<Typography variant="h6">Account information</Typography>
|
|
||||||
<Grid container spacing={3}>
|
|
||||||
<Grid xs={12}>
|
|
||||||
<Stack direction="row" spacing={3} sx={{ alignItems: 'center' }}>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
border: '1px dashed var(--mui-palette-divider)',
|
|
||||||
borderRadius: '50%',
|
|
||||||
display: 'inline-flex',
|
|
||||||
p: '4px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Avatar
|
|
||||||
src={avatar}
|
|
||||||
sx={{
|
|
||||||
'--Avatar-size': '100px',
|
|
||||||
'--Icon-fontSize': 'var(--icon-fontSize-lg)',
|
|
||||||
alignItems: 'center',
|
|
||||||
bgcolor: 'var(--mui-palette-background-level1)',
|
|
||||||
color: 'var(--mui-palette-text-primary)',
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CameraIcon fontSize="var(--Icon-fontSize)" />
|
|
||||||
</Avatar>
|
|
||||||
</Box>
|
|
||||||
<Stack spacing={1} sx={{ alignItems: 'flex-start' }}>
|
|
||||||
<Typography variant="subtitle1">Avatar</Typography>
|
|
||||||
<Typography variant="caption">Min 400x400px, PNG or JPEG</Typography>
|
|
||||||
<Button
|
|
||||||
color="secondary"
|
|
||||||
onClick={() => {
|
|
||||||
avatarInputRef.current?.click();
|
|
||||||
}}
|
|
||||||
variant="outlined"
|
|
||||||
>
|
|
||||||
Select
|
|
||||||
</Button>
|
|
||||||
<input hidden onChange={handleAvatarChange} ref={avatarInputRef} type="file" />
|
|
||||||
</Stack>
|
|
||||||
</Stack>
|
|
||||||
</Grid>
|
|
||||||
<Grid md={6} xs={12}>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="name"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormControl error={Boolean(errors.name)} fullWidth>
|
|
||||||
<InputLabel required>Name</InputLabel>
|
|
||||||
<OutlinedInput {...field} />
|
|
||||||
{errors.name ? <FormHelperText>{errors.name.message}</FormHelperText> : null}
|
|
||||||
</FormControl>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid md={6} xs={12}>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="email"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormControl error={Boolean(errors.email)} fullWidth>
|
|
||||||
<InputLabel required>Email address</InputLabel>
|
|
||||||
<OutlinedInput {...field} type="email" />
|
|
||||||
{errors.email ? <FormHelperText>{errors.email.message}</FormHelperText> : null}
|
|
||||||
</FormControl>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid md={6} xs={12}>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="phone"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormControl error={Boolean(errors.phone)} fullWidth>
|
|
||||||
<InputLabel required>Phone number</InputLabel>
|
|
||||||
<OutlinedInput {...field} />
|
|
||||||
{errors.phone ? <FormHelperText>{errors.phone.message}</FormHelperText> : null}
|
|
||||||
</FormControl>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid md={6} xs={12}>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="company"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormControl error={Boolean(errors.company)} fullWidth>
|
|
||||||
<InputLabel>Company</InputLabel>
|
|
||||||
<OutlinedInput {...field} />
|
|
||||||
{errors.company ? <FormHelperText>{errors.company.message}</FormHelperText> : null}
|
|
||||||
</FormControl>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Stack>
|
|
||||||
<Stack spacing={3}>
|
|
||||||
<Typography variant="h6">Billing information</Typography>
|
|
||||||
<Grid container spacing={3}>
|
|
||||||
<Grid md={6} xs={12}>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="billingAddress.country"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormControl error={Boolean(errors.billingAddress?.country)} fullWidth>
|
|
||||||
<InputLabel required>Country</InputLabel>
|
|
||||||
<Select {...field}>
|
|
||||||
<Option value="">Choose a country</Option>
|
|
||||||
<Option value="us">United States</Option>
|
|
||||||
<Option value="de">Germany</Option>
|
|
||||||
<Option value="es">Spain</Option>
|
|
||||||
</Select>
|
|
||||||
{errors.billingAddress?.country ? (
|
|
||||||
<FormHelperText>{errors.billingAddress?.country?.message}</FormHelperText>
|
|
||||||
) : null}
|
|
||||||
</FormControl>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid md={6} xs={12}>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="billingAddress.state"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormControl error={Boolean(errors.billingAddress?.state)} fullWidth>
|
|
||||||
<InputLabel required>State</InputLabel>
|
|
||||||
<OutlinedInput {...field} />
|
|
||||||
{errors.billingAddress?.state ? (
|
|
||||||
<FormHelperText>{errors.billingAddress?.state?.message}</FormHelperText>
|
|
||||||
) : null}
|
|
||||||
</FormControl>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid md={6} xs={12}>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="billingAddress.city"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormControl error={Boolean(errors.billingAddress?.city)} fullWidth>
|
|
||||||
<InputLabel required>City</InputLabel>
|
|
||||||
<OutlinedInput {...field} />
|
|
||||||
{errors.billingAddress?.city ? (
|
|
||||||
<FormHelperText>{errors.billingAddress?.city?.message}</FormHelperText>
|
|
||||||
) : null}
|
|
||||||
</FormControl>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid md={6} xs={12}>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="billingAddress.zipCode"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormControl error={Boolean(errors.billingAddress?.zipCode)} fullWidth>
|
|
||||||
<InputLabel required>Zip code</InputLabel>
|
|
||||||
<OutlinedInput {...field} />
|
|
||||||
{errors.billingAddress?.zipCode ? (
|
|
||||||
<FormHelperText>{errors.billingAddress?.zipCode?.message}</FormHelperText>
|
|
||||||
) : null}
|
|
||||||
</FormControl>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid md={6} xs={12}>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="billingAddress.line1"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormControl error={Boolean(errors.billingAddress?.line1)} fullWidth>
|
|
||||||
<InputLabel required>Address</InputLabel>
|
|
||||||
<OutlinedInput {...field} />
|
|
||||||
{errors.billingAddress?.line1 ? (
|
|
||||||
<FormHelperText>{errors.billingAddress?.line1?.message}</FormHelperText>
|
|
||||||
) : null}
|
|
||||||
</FormControl>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid md={6} xs={12}>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="taxId"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormControl error={Boolean(errors.taxId)} fullWidth>
|
|
||||||
<InputLabel>Tax ID</InputLabel>
|
|
||||||
<OutlinedInput {...field} placeholder="e.g EU372054390" />
|
|
||||||
{errors.taxId ? <FormHelperText>{errors.taxId.message}</FormHelperText> : null}
|
|
||||||
</FormControl>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Stack>
|
|
||||||
<Stack spacing={3}>
|
|
||||||
<Typography variant="h6">Shipping information</Typography>
|
|
||||||
<FormControlLabel control={<Checkbox defaultChecked />} label="Same as billing address" />
|
|
||||||
</Stack>
|
|
||||||
<Stack spacing={3}>
|
|
||||||
<Typography variant="h6">Additional information</Typography>
|
|
||||||
<Grid container spacing={3}>
|
|
||||||
<Grid md={6} xs={12}>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="timezone"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormControl error={Boolean(errors.timezone)} fullWidth>
|
|
||||||
<InputLabel required>Timezone</InputLabel>
|
|
||||||
<Select {...field}>
|
|
||||||
<Option value="">Select a timezone</Option>
|
|
||||||
<Option value="new_york">US - New York</Option>
|
|
||||||
<Option value="california">US - California</Option>
|
|
||||||
<Option value="london">UK - London</Option>
|
|
||||||
</Select>
|
|
||||||
{errors.timezone ? <FormHelperText>{errors.timezone.message}</FormHelperText> : null}
|
|
||||||
</FormControl>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid md={6} xs={12}>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="language"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormControl error={Boolean(errors.language)} fullWidth>
|
|
||||||
<InputLabel required>Language</InputLabel>
|
|
||||||
<Select {...field}>
|
|
||||||
<Option value="">Select a language</Option>
|
|
||||||
<Option value="en">English</Option>
|
|
||||||
<Option value="es">Spanish</Option>
|
|
||||||
<Option value="de">German</Option>
|
|
||||||
</Select>
|
|
||||||
{errors.language ? <FormHelperText>{errors.language.message}</FormHelperText> : null}
|
|
||||||
</FormControl>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid md={6} xs={12}>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="currency"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormControl error={Boolean(errors.currency)} fullWidth>
|
|
||||||
<InputLabel>Currency</InputLabel>
|
|
||||||
<Select {...field}>
|
|
||||||
<Option value="">Select a currency</Option>
|
|
||||||
<Option value="USD">USD</Option>
|
|
||||||
<Option value="EUR">EUR</Option>
|
|
||||||
<Option value="RON">RON</Option>
|
|
||||||
</Select>
|
|
||||||
{errors.currency ? <FormHelperText>{errors.currency.message}</FormHelperText> : null}
|
|
||||||
</FormControl>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Stack>
|
|
||||||
</Stack>
|
|
||||||
</CardContent>
|
|
||||||
<CardActions sx={{ justifyContent: 'flex-end' }}>
|
|
||||||
<Button color="secondary" component={RouterLink} href={paths.dashboard.lesson_categories.list}>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button type="submit" variant="contained">
|
|
||||||
Create customer
|
|
||||||
</Button>
|
|
||||||
</CardActions>
|
|
||||||
</Card>
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,101 +0,0 @@
|
|||||||
'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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,138 +0,0 @@
|
|||||||
'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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,46 +0,0 @@
|
|||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,57 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import { dayjs } from '@/lib/dayjs';
|
|
||||||
|
|
||||||
export interface LessonType {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
type: string;
|
|
||||||
pos: number;
|
|
||||||
visible: 'visible' | 'hidden';
|
|
||||||
createdAt: Date;
|
|
||||||
//
|
|
||||||
// original
|
|
||||||
// id: string;
|
|
||||||
// name: string;
|
|
||||||
//
|
|
||||||
avatar?: string;
|
|
||||||
email: string;
|
|
||||||
phone?: string;
|
|
||||||
quota: number;
|
|
||||||
status: 'pending' | 'active' | 'blocked';
|
|
||||||
// createdAt: Date;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const LessonTypeDefaultValue: LessonType = {
|
|
||||||
id: 'string',
|
|
||||||
name: 'string',
|
|
||||||
type: 'string',
|
|
||||||
pos: 1,
|
|
||||||
visible: 'visible',
|
|
||||||
createdAt: dayjs().toDate(),
|
|
||||||
//
|
|
||||||
// original
|
|
||||||
// id: 'string',
|
|
||||||
// name: 'string',
|
|
||||||
//
|
|
||||||
avatar: 'string',
|
|
||||||
email: 'string',
|
|
||||||
phone: 'string',
|
|
||||||
quota: 1,
|
|
||||||
status: 'pending',
|
|
||||||
// createdAt: Date;
|
|
||||||
};
|
|
||||||
|
|
||||||
export interface DBLessonType {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
type: string;
|
|
||||||
pos: number;
|
|
||||||
visible: 'visible' | 'hidden';
|
|
||||||
createdAt: Date;
|
|
||||||
created: 'string';
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Helloworld {
|
|
||||||
id: string;
|
|
||||||
}
|
|
||||||
@@ -1,104 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import * as React from 'react';
|
|
||||||
import { LoadingButton } from '@mui/lab';
|
|
||||||
import { Button, Container, Modal, Paper } from '@mui/material';
|
|
||||||
import Avatar from '@mui/material/Avatar';
|
|
||||||
import Box from '@mui/material/Box';
|
|
||||||
import Stack from '@mui/material/Stack';
|
|
||||||
import Typography from '@mui/material/Typography';
|
|
||||||
import { Note as NoteIcon } from '@phosphor-icons/react/dist/ssr/Note';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
import { deleteLessonType } from './http-actions';
|
|
||||||
|
|
||||||
export default function ConfirmDeleteModal({
|
|
||||||
open,
|
|
||||||
setOpen,
|
|
||||||
idToDelete,
|
|
||||||
reloadRows,
|
|
||||||
}: {
|
|
||||||
open: boolean;
|
|
||||||
setOpen: (b: boolean) => void;
|
|
||||||
idToDelete: string;
|
|
||||||
reloadRows: () => void;
|
|
||||||
}): React.JSX.Element {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
// const handleClose = () => setOpen(false);
|
|
||||||
function handleClose(): void {
|
|
||||||
setOpen(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
const [isDeleteing, setIsDeleteing] = React.useState(false);
|
|
||||||
const style = {
|
|
||||||
position: 'absolute',
|
|
||||||
top: '50%',
|
|
||||||
left: '50%',
|
|
||||||
transform: 'translate(-50%, -50%)',
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleUserConfirmDelete = (): void => {
|
|
||||||
if (idToDelete) {
|
|
||||||
setIsDeleteing(true);
|
|
||||||
deleteLessonType(idToDelete)
|
|
||||||
.then(() => {
|
|
||||||
reloadRows();
|
|
||||||
handleClose();
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
// console.error(err);
|
|
||||||
setIsDeleteing(false);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
setIsDeleteing(false);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Modal
|
|
||||||
open={open}
|
|
||||||
onClose={handleClose}
|
|
||||||
aria-labelledby="modal-modal-title"
|
|
||||||
aria-describedby="modal-modal-description"
|
|
||||||
>
|
|
||||||
<Box sx={style}>
|
|
||||||
<Container maxWidth="sm">
|
|
||||||
<Paper sx={{ border: '1px solid var(--mui-palette-divider)', boxShadow: 'var(--mui-shadows-16)' }}>
|
|
||||||
<Stack direction="row" spacing={2} sx={{ display: 'flex', p: 3 }}>
|
|
||||||
<Avatar sx={{ bgcolor: 'var(--mui-palette-error-50)', color: 'var(--mui-palette-error-main)' }}>
|
|
||||||
<NoteIcon fontSize="var(--Icon-fontSize)" />
|
|
||||||
</Avatar>
|
|
||||||
<Stack spacing={3}>
|
|
||||||
<Stack spacing={1}>
|
|
||||||
<Typography variant="h5">{t('Delete Lesson Type ?')}</Typography>
|
|
||||||
<Typography color="text.secondary" variant="body2">
|
|
||||||
{t('Are you sure you want to delete lesson type ?')}
|
|
||||||
</Typography>
|
|
||||||
</Stack>
|
|
||||||
<Stack direction="row" spacing={2} sx={{ justifyContent: 'flex-end' }}>
|
|
||||||
<Button color="secondary" onClick={handleClose}>
|
|
||||||
{t('Cancel')}
|
|
||||||
</Button>
|
|
||||||
<LoadingButton
|
|
||||||
color="error"
|
|
||||||
variant="contained"
|
|
||||||
onClick={(e) => {
|
|
||||||
handleUserConfirmDelete();
|
|
||||||
}}
|
|
||||||
loading={isDeleteing}
|
|
||||||
>
|
|
||||||
{t('Delete')}
|
|
||||||
</LoadingButton>
|
|
||||||
</Stack>
|
|
||||||
</Stack>
|
|
||||||
</Stack>
|
|
||||||
</Paper>
|
|
||||||
</Container>
|
|
||||||
</Box>
|
|
||||||
</Modal>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
const helloworld = 'helloworld';
|
|
||||||
|
|
||||||
export { helloworld };
|
|
||||||
@@ -1,170 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
// store CRUD operations of lesson_types
|
|
||||||
// import { lessonTypesSampleData } from '@/app/dashboard/lesson_types/lesson-types-data';
|
|
||||||
import axios, { AxiosResponse } from 'axios';
|
|
||||||
|
|
||||||
import { dayjs } from '@/lib/dayjs';
|
|
||||||
|
|
||||||
import { DBLessonType, LessonType } from './ILessonType';
|
|
||||||
import { LessonTypeCreateForm, LessonTypeEditFormProps, RestLessonTypeUpdateForm } from './interfaces';
|
|
||||||
|
|
||||||
// { AxiosError }
|
|
||||||
|
|
||||||
// const ERR_CANNOT_CONNECT_POCKETBASE = new AxiosError(
|
|
||||||
// 'Request failed with status code 500',
|
|
||||||
// AxiosError.ERR_BAD_RESPONSE
|
|
||||||
// );
|
|
||||||
|
|
||||||
export const defaultGetJsonHeaders = {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'cache-control': 'no-cache',
|
|
||||||
};
|
|
||||||
|
|
||||||
export const axiosGetJson = (url: string): Promise<AxiosResponse> => {
|
|
||||||
return axios.get(url, {
|
|
||||||
headers: defaultGetJsonHeaders,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const axiosUpdateJson = <T>(url: string, jsonToUpdate: T): Promise<AxiosResponse> => {
|
|
||||||
return axios.put(url, jsonToUpdate, {
|
|
||||||
headers: defaultGetJsonHeaders,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
interface ApiResponseItems<T> {
|
|
||||||
data: {
|
|
||||||
items: T;
|
|
||||||
// ... other possible fields in data
|
|
||||||
};
|
|
||||||
// ... other possible fields in response
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ApiResponseItem<T> {
|
|
||||||
data: T;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface LessonTypeEditForm {
|
|
||||||
name: string;
|
|
||||||
type: string;
|
|
||||||
pos: number;
|
|
||||||
visible: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface LessonTypeUpdateForm {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
type: string;
|
|
||||||
pos: number;
|
|
||||||
visible: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function listLessonTypes(): Promise<LessonType[]> {
|
|
||||||
const restResult = await axiosGetJson('/api/db/lesson_types/list');
|
|
||||||
const {
|
|
||||||
data: { items: lessonTypes },
|
|
||||||
} = restResult as ApiResponseItems<DBLessonType[]>;
|
|
||||||
|
|
||||||
const output: LessonType[] = [];
|
|
||||||
for (const lessonType of lessonTypes) {
|
|
||||||
output.push({
|
|
||||||
id: lessonType.id,
|
|
||||||
name: lessonType.name,
|
|
||||||
pos: lessonType.pos,
|
|
||||||
type: lessonType.type,
|
|
||||||
visible: lessonType.visible,
|
|
||||||
createdAt: dayjs(lessonType.created).toDate(),
|
|
||||||
// TODO: remove me
|
|
||||||
avatar: 'string',
|
|
||||||
email: 'string',
|
|
||||||
phone: 'string',
|
|
||||||
quota: 1,
|
|
||||||
status: 'pending',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return output;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getLessonTypeById(id: string): Promise<LessonType> {
|
|
||||||
const restResult = await axiosGetJson(`/api/db/lesson_types/getById/${id}`);
|
|
||||||
const { data: lessonType } = restResult as ApiResponseItem<DBLessonType>;
|
|
||||||
|
|
||||||
const output: LessonType = {
|
|
||||||
name: '',
|
|
||||||
id: '',
|
|
||||||
pos: 1,
|
|
||||||
type: '',
|
|
||||||
visible: 'visible',
|
|
||||||
createdAt: dayjs().toDate(),
|
|
||||||
// not used
|
|
||||||
email: '',
|
|
||||||
phone: '',
|
|
||||||
quota: 1,
|
|
||||||
status: 'pending',
|
|
||||||
avatar: 'string',
|
|
||||||
};
|
|
||||||
output.id = lessonType.id;
|
|
||||||
output.name = lessonType.name;
|
|
||||||
output.pos = lessonType.pos;
|
|
||||||
output.type = lessonType.type;
|
|
||||||
output.visible = lessonType.visible;
|
|
||||||
output.createdAt = dayjs(lessonType.created).toDate();
|
|
||||||
|
|
||||||
return output;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function updateLessonType(updateContent: LessonTypeEditFormProps, typeId: string): Promise<AxiosResponse> {
|
|
||||||
const restResult = await axiosUpdateJson<RestLessonTypeUpdateForm>(`/api/db/lesson_types/update`, {
|
|
||||||
id: typeId,
|
|
||||||
data: updateContent,
|
|
||||||
});
|
|
||||||
return restResult;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function deleteLessonType(id: string): Promise<AxiosResponse> {
|
|
||||||
const restResult = await axios.delete(`/api/db/lesson_types/delete`, { data: { id } });
|
|
||||||
return restResult;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function createLessonType(lessonTypeData: LessonTypeCreateForm): Promise<AxiosResponse> {
|
|
||||||
const restResult = await axios.post(`/api/db/lesson_types/create`, { data: lessonTypeData });
|
|
||||||
return restResult;
|
|
||||||
}
|
|
||||||
|
|
||||||
// const createLessonType = async (lessonTypeData: any) => {
|
|
||||||
// let { data } = await axios.post('/api/db/lesson_types/helloworld', lessonTypeData, {
|
|
||||||
// headers: defaultGetJsonHeaders,
|
|
||||||
// });
|
|
||||||
// return data;
|
|
||||||
// };
|
|
||||||
|
|
||||||
// const deleteLessonType = async (id: string) => {
|
|
||||||
// // throw ERR_CANNOT_CONNECT_POCKETBASE;
|
|
||||||
|
|
||||||
// let { data } = await axios.delete(`/api/db/lesson_types/helloworld`, {
|
|
||||||
// headers: defaultGetJsonHeaders,
|
|
||||||
// data: { id },
|
|
||||||
// });
|
|
||||||
|
|
||||||
// // axios.delete(`/api/db/lesson_types/helloworld`,
|
|
||||||
// return data;
|
|
||||||
// };
|
|
||||||
|
|
||||||
// const getLessonTypeById = async (id: string) => {
|
|
||||||
// let { data } = await axiosGetJson(`/api/db/lesson_types/getById/${id}`);
|
|
||||||
// return data;
|
|
||||||
// };
|
|
||||||
|
|
||||||
// const updateLessonType = async (id: string, lessonTypeData: any) => {
|
|
||||||
// let data_payload = {
|
|
||||||
// id,
|
|
||||||
// content: lessonTypeData,
|
|
||||||
// };
|
|
||||||
|
|
||||||
// // throw ERR_CANNOT_CONNECT_POCKETBASE;
|
|
||||||
|
|
||||||
// let { data } = await axios.put('/api/db/lesson_types/helloworld', data_payload);
|
|
||||||
|
|
||||||
// return data;
|
|
||||||
// };
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
export interface LessonTypeEditFormProps {
|
|
||||||
name: string;
|
|
||||||
type: string;
|
|
||||||
pos: number;
|
|
||||||
visible: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface RestLessonTypeUpdateForm {
|
|
||||||
id: string;
|
|
||||||
data: LessonTypeEditFormProps;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface LessonTypeCreateForm {
|
|
||||||
name: string;
|
|
||||||
type: string;
|
|
||||||
pos: number;
|
|
||||||
visible: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const LessonTypeCreateFormDefault: LessonTypeCreateForm = {
|
|
||||||
name: '',
|
|
||||||
type: '',
|
|
||||||
pos: 1,
|
|
||||||
visible: 'visible',
|
|
||||||
};
|
|
||||||
@@ -1,230 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import * as React from 'react';
|
|
||||||
import RouterLink from 'next/link';
|
|
||||||
import { useRouter } from 'next/navigation';
|
|
||||||
import { zodResolver } from '@hookform/resolvers/zod';
|
|
||||||
import { LoadingButton } from '@mui/lab';
|
|
||||||
import { MenuItem } from '@mui/material';
|
|
||||||
// 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 CardActions from '@mui/material/CardActions';
|
|
||||||
import CardContent from '@mui/material/CardContent';
|
|
||||||
// import Checkbox from '@mui/material/Checkbox';
|
|
||||||
import Divider from '@mui/material/Divider';
|
|
||||||
import FormControl from '@mui/material/FormControl';
|
|
||||||
// import FormControlLabel from '@mui/material/FormControlLabel';
|
|
||||||
import FormHelperText from '@mui/material/FormHelperText';
|
|
||||||
import InputLabel from '@mui/material/InputLabel';
|
|
||||||
import OutlinedInput from '@mui/material/OutlinedInput';
|
|
||||||
import Select from '@mui/material/Select';
|
|
||||||
import Stack from '@mui/material/Stack';
|
|
||||||
import Typography from '@mui/material/Typography';
|
|
||||||
import Grid from '@mui/material/Unstable_Grid2';
|
|
||||||
// import { Camera as CameraIcon } from '@phosphor-icons/react/dist/ssr/Camera';
|
|
||||||
// import axios from 'axios';
|
|
||||||
import { Controller, useForm } from 'react-hook-form';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
import { z as zod } from 'zod';
|
|
||||||
|
|
||||||
import { paths } from '@/paths';
|
|
||||||
import { logger } from '@/lib/default-logger';
|
|
||||||
// import { Option } from '@/components/core/option';
|
|
||||||
import { toast } from '@/components/core/toaster';
|
|
||||||
|
|
||||||
import { createLessonType } from './http-actions';
|
|
||||||
import { LessonTypeCreateForm, LessonTypeCreateFormDefault } from './interfaces';
|
|
||||||
|
|
||||||
// import { createLessonType } from './httpActions';
|
|
||||||
|
|
||||||
// function fileToBase64(file: Blob): Promise<string> {
|
|
||||||
// return new Promise((resolve, reject) => {
|
|
||||||
// const reader = new FileReader();
|
|
||||||
// reader.readAsDataURL(file);
|
|
||||||
// reader.onload = () => {
|
|
||||||
// resolve(reader.result as string);
|
|
||||||
// };
|
|
||||||
// reader.onerror = () => {
|
|
||||||
// reject(new Error('Error converting file to base64'));
|
|
||||||
// };
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
|
|
||||||
const schema = zod.object({
|
|
||||||
name: zod.string().min(1, 'Name is required').max(255),
|
|
||||||
type: zod.string().min(1, 'Name is required').max(255),
|
|
||||||
pos: zod.string().min(1, 'Phone is required').max(15),
|
|
||||||
visible_to_user: zod.string().max(255),
|
|
||||||
});
|
|
||||||
|
|
||||||
type Values = zod.infer<typeof schema>;
|
|
||||||
|
|
||||||
const defaultValues = {
|
|
||||||
name: '',
|
|
||||||
type: '',
|
|
||||||
pos: '1',
|
|
||||||
visible_to_user: 'visible',
|
|
||||||
} satisfies Values;
|
|
||||||
|
|
||||||
export function LessonTypeCreateForm(): React.JSX.Element {
|
|
||||||
const router = useRouter();
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const [isCreating, setIsCreating] = React.useState<boolean>(false);
|
|
||||||
|
|
||||||
const {
|
|
||||||
control,
|
|
||||||
handleSubmit,
|
|
||||||
formState: { errors, isSubmitting, isSubmitted },
|
|
||||||
setValue,
|
|
||||||
// watch,
|
|
||||||
} = useForm<Values>({ defaultValues, resolver: zodResolver(schema) });
|
|
||||||
|
|
||||||
const onSubmit = React.useCallback(
|
|
||||||
async (values: Values): Promise<void> => {
|
|
||||||
setIsCreating(true);
|
|
||||||
const tempCreate: LessonTypeCreateForm = LessonTypeCreateFormDefault;
|
|
||||||
|
|
||||||
tempCreate.name = values.name;
|
|
||||||
tempCreate.type = values.type;
|
|
||||||
tempCreate.pos = 1;
|
|
||||||
tempCreate.visible = 'visible';
|
|
||||||
|
|
||||||
createLessonType(tempCreate)
|
|
||||||
.then((res) => {
|
|
||||||
router.push(paths.dashboard.lesson_types.list);
|
|
||||||
toast.success(t('dashboard.lessonTypes.create.success'));
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
logger.error(err);
|
|
||||||
toast.error(t('dashboard.lessonTypes.create.error'));
|
|
||||||
setIsCreating(false);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
[router]
|
|
||||||
);
|
|
||||||
|
|
||||||
const avatarInputRef = React.useRef<HTMLInputElement>(null);
|
|
||||||
// const avatar = watch('avatar');
|
|
||||||
|
|
||||||
const handleAvatarChange = React.useCallback(
|
|
||||||
async (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const file = event.target.files?.[0];
|
|
||||||
|
|
||||||
if (file) {
|
|
||||||
// const url = await fileToBase64(file);
|
|
||||||
// setValue('avatar', url);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[setValue]
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<form onSubmit={handleSubmit(onSubmit)}>
|
|
||||||
<Card>
|
|
||||||
<CardContent>
|
|
||||||
<Stack divider={<Divider />} spacing={4}>
|
|
||||||
<Stack spacing={3}>
|
|
||||||
<Typography variant="h6">{t('dashboard.lessonTypes.create.typeInformation')}</Typography>
|
|
||||||
<Grid container spacing={3}>
|
|
||||||
<Grid xs={12}>
|
|
||||||
<Stack direction="row" spacing={3} sx={{ alignItems: 'center' }}>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
border: '1px dashed var(--mui-palette-divider)',
|
|
||||||
borderRadius: '50%',
|
|
||||||
display: 'inline-flex',
|
|
||||||
p: '4px',
|
|
||||||
}}
|
|
||||||
></Box>
|
|
||||||
<Stack spacing={1} sx={{ alignItems: 'flex-start' }}>
|
|
||||||
<Typography variant="subtitle1">{t('dashboard.lessonTypes.create.avatar')}</Typography>
|
|
||||||
<Typography variant="caption">{t('dashboard.lessonTypes.create.avatarRequirements')}</Typography>
|
|
||||||
<Button
|
|
||||||
color="secondary"
|
|
||||||
onClick={() => {
|
|
||||||
avatarInputRef.current?.click();
|
|
||||||
}}
|
|
||||||
variant="outlined"
|
|
||||||
>
|
|
||||||
{t('dashboard.lessonTypes.create.select')}
|
|
||||||
</Button>
|
|
||||||
<input hidden onChange={handleAvatarChange} ref={avatarInputRef} type="file" />
|
|
||||||
</Stack>
|
|
||||||
</Stack>
|
|
||||||
</Grid>
|
|
||||||
<Grid md={6} xs={12}>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="name"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormControl error={Boolean(errors.name)} fullWidth>
|
|
||||||
<InputLabel required>{t('dashboard.lessonTypes.create.name')}</InputLabel>
|
|
||||||
<OutlinedInput {...field} />
|
|
||||||
{errors.name ? <FormHelperText>{errors.name.message}</FormHelperText> : null}
|
|
||||||
</FormControl>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid md={6} xs={12}>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="type"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormControl error={Boolean(errors.type)} fullWidth>
|
|
||||||
<InputLabel required>{t('dashboard.lessonTypes.create.type')}</InputLabel>
|
|
||||||
<OutlinedInput {...field} />
|
|
||||||
{errors.type ? <FormHelperText>{errors.type.message}</FormHelperText> : null}
|
|
||||||
</FormControl>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid md={6} xs={12}>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="pos"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormControl error={Boolean(errors.pos)} fullWidth>
|
|
||||||
<InputLabel required>{t('dashboard.lessonTypes.create.position')}</InputLabel>
|
|
||||||
<OutlinedInput {...field} />
|
|
||||||
{errors.pos ? <FormHelperText>{errors.pos.message}</FormHelperText> : null}
|
|
||||||
</FormControl>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid md={6} xs={12}>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="visible_to_user"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormControl error={Boolean(errors.visible_to_user)} fullWidth>
|
|
||||||
<InputLabel>{t('dashboard.lessonTypes.create.visibleToUser')}</InputLabel>
|
|
||||||
<Select {...field}>
|
|
||||||
<MenuItem value="visible">visible</MenuItem>
|
|
||||||
<MenuItem value="hidden">hidden</MenuItem>
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
{errors.visible_to_user ? (
|
|
||||||
<FormHelperText>{errors.visible_to_user.message}</FormHelperText>
|
|
||||||
) : null}
|
|
||||||
</FormControl>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Stack>
|
|
||||||
</Stack>
|
|
||||||
</CardContent>
|
|
||||||
<CardActions sx={{ justifyContent: 'flex-end' }}>
|
|
||||||
<Button color="secondary" component={RouterLink} href={paths.dashboard.lesson_types.list}>
|
|
||||||
{t('dashboard.lessonTypes.create.cancelButton')}
|
|
||||||
</Button>
|
|
||||||
<LoadingButton disabled={isCreating} loading={isCreating} type="submit" variant="contained">
|
|
||||||
{t('dashboard.lessonTypes.create.createButton')}
|
|
||||||
</LoadingButton>
|
|
||||||
</CardActions>
|
|
||||||
</Card>
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,230 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import * as React from 'react';
|
|
||||||
import RouterLink from 'next/link';
|
|
||||||
import { useRouter } from 'next/navigation';
|
|
||||||
import { zodResolver } from '@hookform/resolvers/zod';
|
|
||||||
import { LoadingButton } from '@mui/lab';
|
|
||||||
import { MenuItem } from '@mui/material';
|
|
||||||
// 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 CardActions from '@mui/material/CardActions';
|
|
||||||
import CardContent from '@mui/material/CardContent';
|
|
||||||
// import Checkbox from '@mui/material/Checkbox';
|
|
||||||
import Divider from '@mui/material/Divider';
|
|
||||||
import FormControl from '@mui/material/FormControl';
|
|
||||||
// import FormControlLabel from '@mui/material/FormControlLabel';
|
|
||||||
import FormHelperText from '@mui/material/FormHelperText';
|
|
||||||
import InputLabel from '@mui/material/InputLabel';
|
|
||||||
import OutlinedInput from '@mui/material/OutlinedInput';
|
|
||||||
import Select from '@mui/material/Select';
|
|
||||||
import Stack from '@mui/material/Stack';
|
|
||||||
import Typography from '@mui/material/Typography';
|
|
||||||
import Grid from '@mui/material/Unstable_Grid2';
|
|
||||||
// import { Camera as CameraIcon } from '@phosphor-icons/react/dist/ssr/Camera';
|
|
||||||
// import axios from 'axios';
|
|
||||||
import { Controller, useForm } from 'react-hook-form';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
import { z as zod } from 'zod';
|
|
||||||
|
|
||||||
import { paths } from '@/paths';
|
|
||||||
import { logger } from '@/lib/default-logger';
|
|
||||||
// import { Option } from '@/components/core/option';
|
|
||||||
import { toast } from '@/components/core/toaster';
|
|
||||||
|
|
||||||
import { createLessonType } from './http-actions';
|
|
||||||
import { LessonTypeCreateForm, LessonTypeCreateFormDefault } from './interfaces';
|
|
||||||
|
|
||||||
// import { createLessonType } from './httpActions';
|
|
||||||
|
|
||||||
// function fileToBase64(file: Blob): Promise<string> {
|
|
||||||
// return new Promise((resolve, reject) => {
|
|
||||||
// const reader = new FileReader();
|
|
||||||
// reader.readAsDataURL(file);
|
|
||||||
// reader.onload = () => {
|
|
||||||
// resolve(reader.result as string);
|
|
||||||
// };
|
|
||||||
// reader.onerror = () => {
|
|
||||||
// reject(new Error('Error converting file to base64'));
|
|
||||||
// };
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
|
|
||||||
const schema = zod.object({
|
|
||||||
name: zod.string().min(1, 'Name is required').max(255),
|
|
||||||
type: zod.string().min(1, 'Name is required').max(255),
|
|
||||||
pos: zod.string().min(1, 'Phone is required').max(15),
|
|
||||||
visible_to_user: zod.string().max(255),
|
|
||||||
});
|
|
||||||
|
|
||||||
type Values = zod.infer<typeof schema>;
|
|
||||||
|
|
||||||
const defaultValues = {
|
|
||||||
name: '',
|
|
||||||
type: '',
|
|
||||||
pos: '1',
|
|
||||||
visible_to_user: 'visible',
|
|
||||||
} satisfies Values;
|
|
||||||
|
|
||||||
export function LessonTypeCreateForm(): React.JSX.Element {
|
|
||||||
const router = useRouter();
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const [isCreating, setIsCreating] = React.useState<boolean>(false);
|
|
||||||
|
|
||||||
const {
|
|
||||||
control,
|
|
||||||
handleSubmit,
|
|
||||||
formState: { errors, isSubmitting, isSubmitted },
|
|
||||||
setValue,
|
|
||||||
// watch,
|
|
||||||
} = useForm<Values>({ defaultValues, resolver: zodResolver(schema) });
|
|
||||||
|
|
||||||
const onSubmit = React.useCallback(
|
|
||||||
async (values: Values): Promise<void> => {
|
|
||||||
setIsCreating(true);
|
|
||||||
const tempCreate: LessonTypeCreateForm = LessonTypeCreateFormDefault;
|
|
||||||
|
|
||||||
tempCreate.name = values.name;
|
|
||||||
tempCreate.type = values.type;
|
|
||||||
tempCreate.pos = 1;
|
|
||||||
tempCreate.visible = 'visible';
|
|
||||||
|
|
||||||
createLessonType(tempCreate)
|
|
||||||
.then((res) => {
|
|
||||||
router.push(paths.dashboard.lesson_types.list);
|
|
||||||
toast.success(t('dashboard.lessonTypes.create.success'));
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
logger.error(err);
|
|
||||||
toast.error(t('dashboard.lessonTypes.create.error'));
|
|
||||||
setIsCreating(false);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
[router]
|
|
||||||
);
|
|
||||||
|
|
||||||
const avatarInputRef = React.useRef<HTMLInputElement>(null);
|
|
||||||
// const avatar = watch('avatar');
|
|
||||||
|
|
||||||
const handleAvatarChange = React.useCallback(
|
|
||||||
async (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const file = event.target.files?.[0];
|
|
||||||
|
|
||||||
if (file) {
|
|
||||||
// const url = await fileToBase64(file);
|
|
||||||
// setValue('avatar', url);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[setValue]
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<form onSubmit={handleSubmit(onSubmit)}>
|
|
||||||
<Card>
|
|
||||||
<CardContent>
|
|
||||||
<Stack divider={<Divider />} spacing={4}>
|
|
||||||
<Stack spacing={3}>
|
|
||||||
<Typography variant="h6">{t('dashboard.lessonTypes.create.typeInformation')}</Typography>
|
|
||||||
<Grid container spacing={3}>
|
|
||||||
<Grid xs={12}>
|
|
||||||
<Stack direction="row" spacing={3} sx={{ alignItems: 'center' }}>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
border: '1px dashed var(--mui-palette-divider)',
|
|
||||||
borderRadius: '50%',
|
|
||||||
display: 'inline-flex',
|
|
||||||
p: '4px',
|
|
||||||
}}
|
|
||||||
></Box>
|
|
||||||
<Stack spacing={1} sx={{ alignItems: 'flex-start' }}>
|
|
||||||
<Typography variant="subtitle1">{t('dashboard.lessonTypes.create.avatar')}</Typography>
|
|
||||||
<Typography variant="caption">{t('dashboard.lessonTypes.create.avatarRequirements')}</Typography>
|
|
||||||
<Button
|
|
||||||
color="secondary"
|
|
||||||
onClick={() => {
|
|
||||||
avatarInputRef.current?.click();
|
|
||||||
}}
|
|
||||||
variant="outlined"
|
|
||||||
>
|
|
||||||
{t('dashboard.lessonTypes.create.select')}
|
|
||||||
</Button>
|
|
||||||
<input hidden onChange={handleAvatarChange} ref={avatarInputRef} type="file" />
|
|
||||||
</Stack>
|
|
||||||
</Stack>
|
|
||||||
</Grid>
|
|
||||||
<Grid md={6} xs={12}>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="name"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormControl error={Boolean(errors.name)} fullWidth>
|
|
||||||
<InputLabel required>{t('dashboard.lessonTypes.create.name')}</InputLabel>
|
|
||||||
<OutlinedInput {...field} />
|
|
||||||
{errors.name ? <FormHelperText>{errors.name.message}</FormHelperText> : null}
|
|
||||||
</FormControl>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid md={6} xs={12}>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="type"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormControl error={Boolean(errors.type)} fullWidth>
|
|
||||||
<InputLabel required>{t('dashboard.lessonTypes.create.type')}</InputLabel>
|
|
||||||
<OutlinedInput {...field} />
|
|
||||||
{errors.type ? <FormHelperText>{errors.type.message}</FormHelperText> : null}
|
|
||||||
</FormControl>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid md={6} xs={12}>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="pos"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormControl error={Boolean(errors.pos)} fullWidth>
|
|
||||||
<InputLabel required>{t('dashboard.lessonTypes.create.position')}</InputLabel>
|
|
||||||
<OutlinedInput {...field} />
|
|
||||||
{errors.pos ? <FormHelperText>{errors.pos.message}</FormHelperText> : null}
|
|
||||||
</FormControl>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid md={6} xs={12}>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="visible_to_user"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormControl error={Boolean(errors.visible_to_user)} fullWidth>
|
|
||||||
<InputLabel>{t('dashboard.lessonTypes.create.visibleToUser')}</InputLabel>
|
|
||||||
<Select {...field}>
|
|
||||||
<MenuItem value="visible">visible</MenuItem>
|
|
||||||
<MenuItem value="hidden">hidden</MenuItem>
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
{errors.visible_to_user ? (
|
|
||||||
<FormHelperText>{errors.visible_to_user.message}</FormHelperText>
|
|
||||||
) : null}
|
|
||||||
</FormControl>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Stack>
|
|
||||||
</Stack>
|
|
||||||
</CardContent>
|
|
||||||
<CardActions sx={{ justifyContent: 'flex-end' }}>
|
|
||||||
<Button color="secondary" component={RouterLink} href={paths.dashboard.lesson_types.list}>
|
|
||||||
{t('dashboard.lessonTypes.create.cancelButton')}
|
|
||||||
</Button>
|
|
||||||
<LoadingButton disabled={isCreating} loading={isCreating} type="submit" variant="contained">
|
|
||||||
{t('dashboard.lessonTypes.create.createButton')}
|
|
||||||
</LoadingButton>
|
|
||||||
</CardActions>
|
|
||||||
</Card>
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,266 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import * as React from 'react';
|
|
||||||
import RouterLink from 'next/link';
|
|
||||||
import { useParams, useRouter } from 'next/navigation';
|
|
||||||
import { zodResolver } from '@hookform/resolvers/zod';
|
|
||||||
import { LoadingButton } from '@mui/lab';
|
|
||||||
import { MenuItem } from '@mui/material';
|
|
||||||
// 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 CardActions from '@mui/material/CardActions';
|
|
||||||
import CardContent from '@mui/material/CardContent';
|
|
||||||
// import Checkbox from '@mui/material/Checkbox';
|
|
||||||
import Divider from '@mui/material/Divider';
|
|
||||||
import FormControl from '@mui/material/FormControl';
|
|
||||||
// import FormControlLabel from '@mui/material/FormControlLabel';
|
|
||||||
import FormHelperText from '@mui/material/FormHelperText';
|
|
||||||
import InputLabel from '@mui/material/InputLabel';
|
|
||||||
import OutlinedInput from '@mui/material/OutlinedInput';
|
|
||||||
import Select from '@mui/material/Select';
|
|
||||||
import Stack from '@mui/material/Stack';
|
|
||||||
import Typography from '@mui/material/Typography';
|
|
||||||
import Grid from '@mui/material/Unstable_Grid2';
|
|
||||||
// import { Camera as CameraIcon } from '@phosphor-icons/react/dist/ssr/Camera';
|
|
||||||
// import axios from 'axios';
|
|
||||||
import { Controller, useForm } from 'react-hook-form';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
import { z as zod } from 'zod';
|
|
||||||
|
|
||||||
import { paths } from '@/paths';
|
|
||||||
import { logger } from '@/lib/default-logger';
|
|
||||||
// import { Option } from '@/components/core/option';
|
|
||||||
import { toast } from '@/components/core/toaster';
|
|
||||||
|
|
||||||
import { getLessonTypeById, updateLessonType } from './http-actions';
|
|
||||||
// TODO: this may be wrong
|
|
||||||
import type { LessonType } from './ILessonType';
|
|
||||||
import type { LessonTypeEditFormProps } from './interfaces';
|
|
||||||
|
|
||||||
// function fileToBase64(file: Blob): Promise<string> {
|
|
||||||
// return new Promise((resolve, reject) => {
|
|
||||||
// const reader = new FileReader();
|
|
||||||
// reader.readAsDataURL(file);
|
|
||||||
// reader.onload = () => {
|
|
||||||
// resolve(reader.result as string);
|
|
||||||
// };
|
|
||||||
// reader.onerror = () => {
|
|
||||||
// reject(new Error('Error converting file to base64'));
|
|
||||||
// };
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
|
|
||||||
const schema = zod.object({
|
|
||||||
name: zod.string().min(1, 'Name is required').max(255),
|
|
||||||
type: zod.string().min(1, 'Name is required').max(255),
|
|
||||||
pos: zod.number().min(1, 'Phone is required').max(15),
|
|
||||||
visible_to_user: zod.string().max(255),
|
|
||||||
});
|
|
||||||
|
|
||||||
type Values = zod.infer<typeof schema>;
|
|
||||||
|
|
||||||
const defaultValues = {
|
|
||||||
name: '',
|
|
||||||
type: '',
|
|
||||||
pos: 1,
|
|
||||||
visible_to_user: 'visible',
|
|
||||||
} satisfies Values;
|
|
||||||
|
|
||||||
export function LessonTypeEditForm(): React.JSX.Element {
|
|
||||||
const router = useRouter();
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const { typeId } = useParams<{ typeId: string }>();
|
|
||||||
const [isUpdating, setIsUpdating] = React.useState<boolean>(false);
|
|
||||||
|
|
||||||
const {
|
|
||||||
control,
|
|
||||||
handleSubmit,
|
|
||||||
formState: { errors },
|
|
||||||
setValue,
|
|
||||||
reset,
|
|
||||||
// watch,
|
|
||||||
} = useForm<Values>({ defaultValues, resolver: zodResolver(schema) });
|
|
||||||
|
|
||||||
const onSubmit = React.useCallback(
|
|
||||||
async (values: Values): Promise<void> => {
|
|
||||||
setIsUpdating(true);
|
|
||||||
const tempUpdate: LessonTypeEditFormProps = {
|
|
||||||
name: values.name,
|
|
||||||
type: values.type,
|
|
||||||
pos: values.pos,
|
|
||||||
visible: values.visible_to_user ? 'visible' : 'hidden',
|
|
||||||
};
|
|
||||||
|
|
||||||
updateLessonType(tempUpdate, typeId)
|
|
||||||
.then((res) => {
|
|
||||||
logger.debug(res);
|
|
||||||
toast.success(t('dashboard.lessonTypes.update.success'));
|
|
||||||
setIsUpdating(false);
|
|
||||||
router.push(paths.dashboard.lesson_types.list);
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
logger.error(err);
|
|
||||||
toast.error('Something went wrong!');
|
|
||||||
setIsUpdating(false);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
[router]
|
|
||||||
);
|
|
||||||
|
|
||||||
const avatarInputRef = React.useRef<HTMLInputElement>(null);
|
|
||||||
// const avatar = watch('avatar');
|
|
||||||
|
|
||||||
const handleAvatarChange = React.useCallback(
|
|
||||||
async (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const file = event.target.files?.[0];
|
|
||||||
|
|
||||||
if (file) {
|
|
||||||
// const url = await fileToBase64(file);
|
|
||||||
// setValue('avatar', url);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[setValue]
|
|
||||||
);
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
getLessonTypeById(typeId)
|
|
||||||
.then((lessonType: LessonType) => {
|
|
||||||
reset({
|
|
||||||
name: lessonType.name,
|
|
||||||
type: lessonType.type,
|
|
||||||
pos: lessonType.pos,
|
|
||||||
visible_to_user: lessonType.visible,
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
// console.error(err);
|
|
||||||
});
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<form onSubmit={handleSubmit(onSubmit)}>
|
|
||||||
<Card>
|
|
||||||
<CardContent>
|
|
||||||
<Stack divider={<Divider />} spacing={4}>
|
|
||||||
<Stack spacing={3}>
|
|
||||||
<Typography variant="h6">{t('dashboard.lessonTypes.edit.typeInformation')}</Typography>
|
|
||||||
<Grid container spacing={3}>
|
|
||||||
<Grid xs={12}>
|
|
||||||
<Stack direction="row" spacing={3} sx={{ alignItems: 'center' }}>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
border: '1px dashed var(--mui-palette-divider)',
|
|
||||||
borderRadius: '50%',
|
|
||||||
display: 'inline-flex',
|
|
||||||
p: '4px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{/*
|
|
||||||
<Avatar
|
|
||||||
src={avatar}
|
|
||||||
sx={{
|
|
||||||
'--Avatar-size': '100px',
|
|
||||||
'--Icon-fontSize': 'var(--icon-fontSize-lg)',
|
|
||||||
alignItems: 'center',
|
|
||||||
bgcolor: 'var(--mui-palette-background-level1)',
|
|
||||||
color: 'var(--mui-palette-text-primary)',
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CameraIcon fontSize="var(--Icon-fontSize)" />
|
|
||||||
</Avatar>
|
|
||||||
*/}
|
|
||||||
</Box>
|
|
||||||
<Stack spacing={1} sx={{ alignItems: 'flex-start' }}>
|
|
||||||
<Typography variant="subtitle1">{t('dashboard.lessonTypes.edit.avatar')}</Typography>
|
|
||||||
<Typography variant="caption">{t('dashboard.lessonTypes.edit.avatarRequirements')}</Typography>
|
|
||||||
<Button
|
|
||||||
color="secondary"
|
|
||||||
onClick={() => {
|
|
||||||
avatarInputRef.current?.click();
|
|
||||||
}}
|
|
||||||
variant="outlined"
|
|
||||||
>
|
|
||||||
{t('dashboard.lessonTypes.edit.select')}
|
|
||||||
</Button>
|
|
||||||
<input hidden onChange={handleAvatarChange} ref={avatarInputRef} type="file" />
|
|
||||||
</Stack>
|
|
||||||
</Stack>
|
|
||||||
</Grid>
|
|
||||||
<Grid md={6} xs={12}>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="name"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormControl error={Boolean(errors.name)} fullWidth>
|
|
||||||
<InputLabel required>{t('dashboard.lessonTypes.edit.name')}</InputLabel>
|
|
||||||
<OutlinedInput {...field} />
|
|
||||||
{errors.name ? <FormHelperText>{errors.name.message}</FormHelperText> : null}
|
|
||||||
</FormControl>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid md={6} xs={12}>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="type"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormControl error={Boolean(errors.type)} fullWidth>
|
|
||||||
<InputLabel required>{t('dashboard.lessonTypes.edit.type')}</InputLabel>
|
|
||||||
<OutlinedInput {...field} />
|
|
||||||
{errors.type ? <FormHelperText>{errors.type.message}</FormHelperText> : null}
|
|
||||||
</FormControl>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid md={6} xs={12}>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="pos"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormControl error={Boolean(errors.pos)} fullWidth>
|
|
||||||
<InputLabel required>{t('dashboard.lessonTypes.edit.position')}</InputLabel>
|
|
||||||
<OutlinedInput {...field} />
|
|
||||||
{errors.pos ? <FormHelperText>{errors.pos.message}</FormHelperText> : null}
|
|
||||||
</FormControl>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid md={6} xs={12}>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="visible_to_user"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormControl error={Boolean(errors.visible_to_user)} fullWidth>
|
|
||||||
<InputLabel>{t('dashboard.lessonTypes.edit.visibleToUser')}</InputLabel>
|
|
||||||
<Select {...field}>
|
|
||||||
<MenuItem value={'visible'}>{t('dashboard.lessonTypes.edit.visible')}</MenuItem>
|
|
||||||
<MenuItem value={'hidden'}>{t('dashboard.lessonTypes.edit.hidden')}</MenuItem>
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
{errors.visible_to_user ? (
|
|
||||||
<FormHelperText>{errors.visible_to_user.message}</FormHelperText>
|
|
||||||
) : null}
|
|
||||||
</FormControl>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Stack>
|
|
||||||
</Stack>
|
|
||||||
</CardContent>
|
|
||||||
<CardActions sx={{ justifyContent: 'flex-end' }}>
|
|
||||||
<Button color="secondary" component={RouterLink} href={paths.dashboard.lesson_types.list}>
|
|
||||||
{t('dashboard.lessonTypes.edit.cancelButton')}
|
|
||||||
</Button>
|
|
||||||
<LoadingButton disabled={isUpdating} type="submit" variant="contained" loading={isUpdating}>
|
|
||||||
{t('dashboard.lessonTypes.edit.updateButton')}
|
|
||||||
</LoadingButton>
|
|
||||||
</CardActions>
|
|
||||||
</Card>
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,403 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import * as React from 'react';
|
|
||||||
import { useRouter } from 'next/navigation';
|
|
||||||
import Button from '@mui/material/Button';
|
|
||||||
import Chip from '@mui/material/Chip';
|
|
||||||
import Divider from '@mui/material/Divider';
|
|
||||||
import FormControl from '@mui/material/FormControl';
|
|
||||||
import OutlinedInput from '@mui/material/OutlinedInput';
|
|
||||||
import Select from '@mui/material/Select';
|
|
||||||
import type { SelectChangeEvent } from '@mui/material/Select';
|
|
||||||
import Stack from '@mui/material/Stack';
|
|
||||||
import Tab from '@mui/material/Tab';
|
|
||||||
import Tabs from '@mui/material/Tabs';
|
|
||||||
import Typography from '@mui/material/Typography';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
import { paths } from '@/paths';
|
|
||||||
import { FilterButton, FilterPopover, useFilterContext } from '@/components/core/filter-button';
|
|
||||||
import { Option } from '@/components/core/option';
|
|
||||||
|
|
||||||
import { LessonType } from './ILessonType';
|
|
||||||
import { useLessonTypesSelection } from './lesson-types-selection-context';
|
|
||||||
|
|
||||||
export interface Filters {
|
|
||||||
email?: string;
|
|
||||||
phone?: string;
|
|
||||||
status?: string;
|
|
||||||
name?: string;
|
|
||||||
visible?: string;
|
|
||||||
type?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export type SortDir = 'asc' | 'desc';
|
|
||||||
|
|
||||||
export interface LessonTypesFiltersProps {
|
|
||||||
filters?: Filters;
|
|
||||||
sortDir?: SortDir;
|
|
||||||
fullData: LessonType[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export function LessonTypesFilters({
|
|
||||||
filters = {},
|
|
||||||
sortDir = 'desc',
|
|
||||||
fullData,
|
|
||||||
}: LessonTypesFiltersProps): React.JSX.Element {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const { email, phone, status, name, visible, type } = filters;
|
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const selection = useLessonTypesSelection();
|
|
||||||
|
|
||||||
function getVisible(): number {
|
|
||||||
return fullData.reduce((count, item: LessonType) => {
|
|
||||||
return item.visible === 'visible' ? count + 1 : count;
|
|
||||||
}, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getHidden(): number {
|
|
||||||
return fullData.reduce((count, item: LessonType) => {
|
|
||||||
return item.visible === 'hidden' ? count + 1 : count;
|
|
||||||
}, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
// The tabs should be generated using API data.
|
|
||||||
const tabs = [
|
|
||||||
{ label: 'All', value: '', count: fullData.length },
|
|
||||||
// { label: 'Active', value: 'active', count: 3 },
|
|
||||||
// { label: 'Pending', value: 'pending', count: 1 },
|
|
||||||
// { label: 'Blocked', value: 'blocked', count: 1 },
|
|
||||||
{ label: t('visible'), value: 'visible', count: getVisible() },
|
|
||||||
{ label: t('hidden'), value: 'hidden', count: getHidden() },
|
|
||||||
] as const;
|
|
||||||
|
|
||||||
const updateSearchParams = React.useCallback(
|
|
||||||
(newFilters: Filters, newSortDir: SortDir): void => {
|
|
||||||
const searchParams = new URLSearchParams();
|
|
||||||
|
|
||||||
if (newSortDir === 'asc') {
|
|
||||||
searchParams.set('sortDir', newSortDir);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (newFilters.status) {
|
|
||||||
searchParams.set('status', newFilters.status);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (newFilters.email) {
|
|
||||||
searchParams.set('email', newFilters.email);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (newFilters.phone) {
|
|
||||||
searchParams.set('phone', newFilters.phone);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (newFilters.name) {
|
|
||||||
searchParams.set('name', newFilters.name);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (newFilters.type) {
|
|
||||||
searchParams.set('type', newFilters.type);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (newFilters.visible) {
|
|
||||||
searchParams.set('visible', newFilters.visible);
|
|
||||||
}
|
|
||||||
|
|
||||||
router.push(`${paths.dashboard.lesson_types.list}?${searchParams.toString()}`);
|
|
||||||
},
|
|
||||||
[router]
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleClearFilters = React.useCallback(() => {
|
|
||||||
updateSearchParams({}, sortDir);
|
|
||||||
}, [updateSearchParams, sortDir]);
|
|
||||||
|
|
||||||
const handleStatusChange = React.useCallback(
|
|
||||||
(_: React.SyntheticEvent, value: string) => {
|
|
||||||
updateSearchParams({ ...filters, status: value }, sortDir);
|
|
||||||
},
|
|
||||||
[updateSearchParams, filters, sortDir]
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleVisibleChange = React.useCallback(
|
|
||||||
(_: React.SyntheticEvent, value: string) => {
|
|
||||||
updateSearchParams({ ...filters, visible: value }, sortDir);
|
|
||||||
},
|
|
||||||
[updateSearchParams, filters, sortDir]
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleNameChange = React.useCallback(
|
|
||||||
(value?: string) => {
|
|
||||||
updateSearchParams({ ...filters, name: value }, sortDir);
|
|
||||||
},
|
|
||||||
[updateSearchParams, filters, sortDir]
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleTypeChange = React.useCallback(
|
|
||||||
(value?: string) => {
|
|
||||||
updateSearchParams({ ...filters, type: value }, sortDir);
|
|
||||||
},
|
|
||||||
[updateSearchParams, filters, sortDir]
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleEmailChange = React.useCallback(
|
|
||||||
(value?: string) => {
|
|
||||||
updateSearchParams({ ...filters, email: value }, sortDir);
|
|
||||||
},
|
|
||||||
[updateSearchParams, filters, sortDir]
|
|
||||||
);
|
|
||||||
|
|
||||||
const handlePhoneChange = React.useCallback(
|
|
||||||
(value?: string) => {
|
|
||||||
updateSearchParams({ ...filters, phone: value }, sortDir);
|
|
||||||
},
|
|
||||||
[updateSearchParams, filters, sortDir]
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleSortChange = React.useCallback(
|
|
||||||
(event: SelectChangeEvent) => {
|
|
||||||
updateSearchParams(filters, event.target.value as SortDir);
|
|
||||||
},
|
|
||||||
[updateSearchParams, filters]
|
|
||||||
);
|
|
||||||
|
|
||||||
const hasFilters = status || email || phone || visible || name || type;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Tabs onChange={handleVisibleChange} sx={{ px: 3 }} value={visible ?? ''} variant="scrollable">
|
|
||||||
{tabs.map((tab) => (
|
|
||||||
<Tab
|
|
||||||
icon={<Chip label={tab.count} size="small" variant="soft" />}
|
|
||||||
iconPosition="end"
|
|
||||||
key={tab.value}
|
|
||||||
label={tab.label}
|
|
||||||
sx={{ minHeight: 'auto' }}
|
|
||||||
tabIndex={0}
|
|
||||||
value={tab.value}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</Tabs>
|
|
||||||
<Divider />
|
|
||||||
<Stack direction="row" spacing={2} sx={{ alignItems: 'center', flexWrap: 'wrap', px: 3, py: 2 }}>
|
|
||||||
<Stack direction="row" spacing={2} sx={{ alignItems: 'center', flex: '1 1 auto', flexWrap: 'wrap' }}>
|
|
||||||
<FilterButton
|
|
||||||
displayValue={name}
|
|
||||||
label={t('Name')}
|
|
||||||
onFilterApply={(value) => {
|
|
||||||
handleNameChange(value as string);
|
|
||||||
}}
|
|
||||||
onFilterDelete={() => {
|
|
||||||
handleNameChange();
|
|
||||||
}}
|
|
||||||
popover={<NameFilterPopover />}
|
|
||||||
value={name}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FilterButton
|
|
||||||
displayValue={type}
|
|
||||||
label={t('Type')}
|
|
||||||
onFilterApply={(value) => {
|
|
||||||
handleTypeChange(value as string);
|
|
||||||
}}
|
|
||||||
onFilterDelete={() => {
|
|
||||||
handleTypeChange();
|
|
||||||
}}
|
|
||||||
popover={<TypeFilterPopover />}
|
|
||||||
value={type}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/*
|
|
||||||
<FilterButton
|
|
||||||
displayValue={email}
|
|
||||||
label="Email"
|
|
||||||
onFilterApply={(value) => {
|
|
||||||
handleEmailChange(value as string);
|
|
||||||
}}
|
|
||||||
onFilterDelete={() => {
|
|
||||||
handleEmailChange();
|
|
||||||
}}
|
|
||||||
popover={<EmailFilterPopover />}
|
|
||||||
value={email}
|
|
||||||
/>
|
|
||||||
*/}
|
|
||||||
|
|
||||||
{/*
|
|
||||||
<FilterButton
|
|
||||||
displayValue={phone}
|
|
||||||
label="Phone number"
|
|
||||||
onFilterApply={(value) => {
|
|
||||||
handlePhoneChange(value as string);
|
|
||||||
}}
|
|
||||||
onFilterDelete={() => {
|
|
||||||
handlePhoneChange();
|
|
||||||
}}
|
|
||||||
popover={<PhoneFilterPopover />}
|
|
||||||
value={phone}
|
|
||||||
/>
|
|
||||||
*/}
|
|
||||||
|
|
||||||
{hasFilters ? <Button onClick={handleClearFilters}>{t('Clear filters')}</Button> : null}
|
|
||||||
</Stack>
|
|
||||||
{selection.selectedAny ? (
|
|
||||||
<Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
|
|
||||||
<Typography color="text.secondary" variant="body2">
|
|
||||||
{selection.selected.size} {t('selected')}
|
|
||||||
</Typography>
|
|
||||||
<Button color="error" variant="contained">
|
|
||||||
{t('Delete')}
|
|
||||||
</Button>
|
|
||||||
</Stack>
|
|
||||||
) : null}
|
|
||||||
<Select name="sort" onChange={handleSortChange} sx={{ maxWidth: '100%', width: '120px' }} value={sortDir}>
|
|
||||||
<Option value="desc">{t('Newest')}</Option>
|
|
||||||
<Option value="asc">{t('Oldest')}</Option>
|
|
||||||
</Select>
|
|
||||||
</Stack>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function TypeFilterPopover(): React.JSX.Element {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const { anchorEl, onApply, onClose, open, value: initialValue } = useFilterContext();
|
|
||||||
const [value, setValue] = React.useState<string>('');
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
setValue((initialValue as string | undefined) ?? '');
|
|
||||||
}, [initialValue]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<FilterPopover anchorEl={anchorEl} onClose={onClose} open={open} title={t('Filter by type')}>
|
|
||||||
<FormControl>
|
|
||||||
<OutlinedInput
|
|
||||||
onChange={(event) => {
|
|
||||||
setValue(event.target.value);
|
|
||||||
}}
|
|
||||||
onKeyUp={(event) => {
|
|
||||||
if (event.key === 'Enter') {
|
|
||||||
onApply(value);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
value={value}
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
onApply(value);
|
|
||||||
}}
|
|
||||||
variant="contained"
|
|
||||||
>
|
|
||||||
{t('Apply')}
|
|
||||||
</Button>
|
|
||||||
</FilterPopover>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function NameFilterPopover(): React.JSX.Element {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const { anchorEl, onApply, onClose, open, value: initialValue } = useFilterContext();
|
|
||||||
const [value, setValue] = React.useState<string>('');
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
setValue((initialValue as string | undefined) ?? '');
|
|
||||||
}, [initialValue]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<FilterPopover anchorEl={anchorEl} onClose={onClose} open={open} title={t('Filter by name')}>
|
|
||||||
<FormControl>
|
|
||||||
<OutlinedInput
|
|
||||||
onChange={(event) => {
|
|
||||||
setValue(event.target.value);
|
|
||||||
}}
|
|
||||||
onKeyUp={(event) => {
|
|
||||||
if (event.key === 'Enter') {
|
|
||||||
onApply(value);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
value={value}
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
onApply(value);
|
|
||||||
}}
|
|
||||||
variant="contained"
|
|
||||||
>
|
|
||||||
{t('Apply')}
|
|
||||||
</Button>
|
|
||||||
</FilterPopover>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function EmailFilterPopover(): React.JSX.Element {
|
|
||||||
const { anchorEl, onApply, onClose, open, value: initialValue } = useFilterContext();
|
|
||||||
const [value, setValue] = React.useState<string>('');
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
setValue((initialValue as string | undefined) ?? '');
|
|
||||||
}, [initialValue]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<FilterPopover anchorEl={anchorEl} onClose={onClose} open={open} title="Filter by email">
|
|
||||||
<FormControl>
|
|
||||||
<OutlinedInput
|
|
||||||
onChange={(event) => {
|
|
||||||
setValue(event.target.value);
|
|
||||||
}}
|
|
||||||
onKeyUp={(event) => {
|
|
||||||
if (event.key === 'Enter') {
|
|
||||||
onApply(value);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
value={value}
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
onApply(value);
|
|
||||||
}}
|
|
||||||
variant="contained"
|
|
||||||
>
|
|
||||||
Apply
|
|
||||||
</Button>
|
|
||||||
</FilterPopover>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function PhoneFilterPopover(): React.JSX.Element {
|
|
||||||
const { anchorEl, onApply, onClose, open, value: initialValue } = useFilterContext();
|
|
||||||
const [value, setValue] = React.useState<string>('');
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
setValue((initialValue as string | undefined) ?? '');
|
|
||||||
}, [initialValue]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<FilterPopover anchorEl={anchorEl} onClose={onClose} open={open} title="Filter by phone number">
|
|
||||||
<FormControl>
|
|
||||||
<OutlinedInput
|
|
||||||
onChange={(event) => {
|
|
||||||
setValue(event.target.value);
|
|
||||||
}}
|
|
||||||
onKeyUp={(event) => {
|
|
||||||
if (event.key === 'Enter') {
|
|
||||||
onApply(value);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
value={value}
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
onApply(value);
|
|
||||||
}}
|
|
||||||
variant="contained"
|
|
||||||
>
|
|
||||||
Apply
|
|
||||||
</Button>
|
|
||||||
</FilterPopover>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,30 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import * as React from 'react';
|
|
||||||
import TablePagination from '@mui/material/TablePagination';
|
|
||||||
|
|
||||||
function noop(): void {
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface LessonTypesPaginationProps {
|
|
||||||
count: number;
|
|
||||||
page: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function LessonTypesPagination({ count, page }: LessonTypesPaginationProps): React.JSX.Element {
|
|
||||||
// You should implement the pagination using a similar logic as the filters.
|
|
||||||
// Note that when page change, you should keep the filter search params.
|
|
||||||
|
|
||||||
return (
|
|
||||||
<TablePagination
|
|
||||||
component="div"
|
|
||||||
count={count}
|
|
||||||
onPageChange={noop}
|
|
||||||
onRowsPerPageChange={noop}
|
|
||||||
page={page}
|
|
||||||
rowsPerPage={5}
|
|
||||||
rowsPerPageOptions={[5, 10, 25]}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import * as React from 'react';
|
|
||||||
|
|
||||||
import { useSelection } from '@/hooks/use-selection';
|
|
||||||
import type { Selection } from '@/hooks/use-selection';
|
|
||||||
|
|
||||||
import { LessonType } from './ILessonType';
|
|
||||||
|
|
||||||
function noop(): void {
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface LessonTypesSelectionContextValue extends Selection {}
|
|
||||||
|
|
||||||
export const LessonTypesSelectionContext = React.createContext<LessonTypesSelectionContextValue>({
|
|
||||||
deselectAll: noop,
|
|
||||||
deselectOne: noop,
|
|
||||||
selectAll: noop,
|
|
||||||
selectOne: noop,
|
|
||||||
selected: new Set(),
|
|
||||||
selectedAny: false,
|
|
||||||
selectedAll: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
interface LessonTypesSelectionProviderProps {
|
|
||||||
children: React.ReactNode;
|
|
||||||
lessonTypes: LessonType[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export function LessonTypesSelectionProvider({
|
|
||||||
children,
|
|
||||||
lessonTypes = [],
|
|
||||||
}: LessonTypesSelectionProviderProps): React.JSX.Element {
|
|
||||||
const lessonTypeIds = React.useMemo(() => lessonTypes.map((lessonType) => lessonType.id), [lessonTypes]);
|
|
||||||
const selection = useSelection(lessonTypeIds);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<LessonTypesSelectionContext.Provider value={{ ...selection }}>{children}</LessonTypesSelectionContext.Provider>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useLessonTypesSelection(): LessonTypesSelectionContextValue {
|
|
||||||
return React.useContext(LessonTypesSelectionContext);
|
|
||||||
}
|
|
||||||
@@ -1,162 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import * as React from 'react';
|
|
||||||
import RouterLink from 'next/link';
|
|
||||||
import { Button } from '@mui/material';
|
|
||||||
import Box from '@mui/material/Box';
|
|
||||||
import Chip from '@mui/material/Chip';
|
|
||||||
import IconButton from '@mui/material/IconButton';
|
|
||||||
import Link from '@mui/material/Link';
|
|
||||||
import Stack from '@mui/material/Stack';
|
|
||||||
import Typography from '@mui/material/Typography';
|
|
||||||
import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
|
|
||||||
import { Clock as ClockIcon } from '@phosphor-icons/react/dist/ssr/Clock';
|
|
||||||
import { Minus as MinusIcon } from '@phosphor-icons/react/dist/ssr/Minus';
|
|
||||||
import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
|
|
||||||
import { TrashSimple as TrashSimpleIcon } from '@phosphor-icons/react/dist/ssr/TrashSimple';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
import { toast } from 'sonner';
|
|
||||||
|
|
||||||
import { paths } from '@/paths';
|
|
||||||
import { dayjs } from '@/lib/dayjs';
|
|
||||||
import { i18n } from '@/lib/i18n';
|
|
||||||
import { DataTable } from '@/components/core/data-table';
|
|
||||||
import type { ColumnDef } from '@/components/core/data-table';
|
|
||||||
|
|
||||||
import ConfirmDeleteModal from './confirm-delete-modal';
|
|
||||||
import type { LessonType } from './ILessonType';
|
|
||||||
import { useLessonTypesSelection } from './lesson-types-selection-context';
|
|
||||||
|
|
||||||
function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LessonType>[] {
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
formatter: (row): React.JSX.Element => (
|
|
||||||
<Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
|
|
||||||
<div>
|
|
||||||
<Link
|
|
||||||
color="inherit"
|
|
||||||
component={RouterLink}
|
|
||||||
href={paths.dashboard.lesson_types.details('1')}
|
|
||||||
sx={{ whiteSpace: 'nowrap' }}
|
|
||||||
variant="subtitle2"
|
|
||||||
>
|
|
||||||
{row.name}
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</Stack>
|
|
||||||
),
|
|
||||||
name: 'Name',
|
|
||||||
width: '250px',
|
|
||||||
},
|
|
||||||
{ field: 'type', name: 'Lesson type', width: '150px' },
|
|
||||||
{ field: 'pos', name: 'Lesson position', width: '150px' },
|
|
||||||
{
|
|
||||||
formatter: (row): React.JSX.Element => {
|
|
||||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
const mapping = {
|
|
||||||
active: { label: 'Active', icon: <CheckCircleIcon color="var(--mui-palette-success-main)" weight="fill" /> },
|
|
||||||
blocked: { label: 'Blocked', icon: <MinusIcon color="var(--mui-palette-error-main)" /> },
|
|
||||||
pending: { label: 'Pending', icon: <ClockIcon color="var(--mui-palette-warning-main)" weight="fill" /> },
|
|
||||||
visible: {
|
|
||||||
label: t('visible'),
|
|
||||||
icon: <ClockIcon color="var(--mui-palette-success-main)" weight="fill" />,
|
|
||||||
},
|
|
||||||
hidden: {
|
|
||||||
label: t('hidden'),
|
|
||||||
icon: <ClockIcon color="var(--mui-palette-warning-main)" weight="fill" />,
|
|
||||||
},
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
const { label, icon } = mapping[row.visible] ?? { label: 'Unknown', icon: null };
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
toast.error('sorry but not implementd');
|
|
||||||
}}
|
|
||||||
style={{ backgroundColor: 'transparent' }}
|
|
||||||
>
|
|
||||||
<Chip icon={icon} label={label} size="small" variant="outlined" />
|
|
||||||
</Button>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
name: 'visible',
|
|
||||||
width: '150px',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
formatter(row) {
|
|
||||||
return dayjs(row.createdAt).format('MMM D, YYYY h:mm A');
|
|
||||||
},
|
|
||||||
name: 'Created at',
|
|
||||||
width: '200px',
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
formatter: (row): React.JSX.Element => (
|
|
||||||
<Stack direction="row" spacing={1}>
|
|
||||||
<IconButton component={RouterLink} href={paths.dashboard.lesson_types.details(row.id)}>
|
|
||||||
<PencilSimpleIcon />
|
|
||||||
</IconButton>
|
|
||||||
<IconButton
|
|
||||||
color="error"
|
|
||||||
onClick={() => {
|
|
||||||
handleDeleteClick(row.id);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<TrashSimpleIcon />
|
|
||||||
</IconButton>
|
|
||||||
</Stack>
|
|
||||||
),
|
|
||||||
name: 'Actions',
|
|
||||||
width: '100px',
|
|
||||||
align: 'right',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface LessonTypesTableProps {
|
|
||||||
rows: LessonType[];
|
|
||||||
reloadRows: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function LessonTypesTable({ rows, reloadRows }: LessonTypesTableProps): React.JSX.Element {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const { deselectAll, deselectOne, selectAll, selectOne, selected } = useLessonTypesSelection();
|
|
||||||
|
|
||||||
const [idToDelete, setIdToDelete] = React.useState('');
|
|
||||||
const [open, setOpen] = React.useState(false);
|
|
||||||
|
|
||||||
function handleDeleteClick(testId: string): void {
|
|
||||||
setOpen(true);
|
|
||||||
setIdToDelete(testId);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<React.Fragment>
|
|
||||||
<ConfirmDeleteModal idToDelete={idToDelete} open={open} reloadRows={reloadRows} setOpen={setOpen} />
|
|
||||||
<DataTable<LessonType>
|
|
||||||
columns={columns(handleDeleteClick)}
|
|
||||||
onDeselectAll={deselectAll}
|
|
||||||
onDeselectOne={(_, row) => {
|
|
||||||
deselectOne(row.id);
|
|
||||||
}}
|
|
||||||
onSelectAll={selectAll}
|
|
||||||
onSelectOne={(_, row) => {
|
|
||||||
selectOne(row.id);
|
|
||||||
}}
|
|
||||||
rows={rows}
|
|
||||||
selectable
|
|
||||||
selected={selected}
|
|
||||||
/>
|
|
||||||
{!rows.length ? (
|
|
||||||
<Box sx={{ p: 3 }}>
|
|
||||||
<Typography color="text.secondary" sx={{ textAlign: 'center' }} variant="body2">
|
|
||||||
{t('No lesson types found')}
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
) : null}
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,101 +0,0 @@
|
|||||||
'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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,138 +0,0 @@
|
|||||||
'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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,46 +0,0 @@
|
|||||||
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