louiscklaw/lettersoup-online
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update,

Browse Source
This commit is contained in:
louiscklaw
2025-05-08 14:38:34 +08:00
parent 61c10821b6
commit 7105bc85e3
57 changed files with 2973 additions and 5129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3336
002_source/cms/src/app/dashboard/mf/_repomix.md
View File

File diff suppressed because it is too large Load Diff

1663
002_source/cms/src/app/dashboard/mf/repomix-output.xml
View File

File diff suppressed because it is too large Load Diff

91
002_source/cms/src/app/dashboard/page.tsx
View File

@@ -3,7 +3,7 @@
import * as React from 'react';
import GetAllLessonCategoriesCount from '@/db/LessonCategories/GetAllCount';
import GetAllLessonTypesCount from '@/db/LessonTypes/GetAllCount';
import GetAllUsersCount from '@/db/Users/GetAllCount';
import { GetAllUsersCount } from '@/db/Users/GetAllCount';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
@@ -59,21 +59,37 @@ export default function Page(): React.JSX.Element {
}}
>
<Stack spacing={4}>
<Stack direction={{ xs: 'column', sm: 'row' }} spacing={3} sx={{ alignItems: 'flex-start' }}>
<Stack
direction={{ xs: 'column', sm: 'row' }}
spacing={3}
sx={{ alignItems: 'flex-start' }}
>
<Box sx={{ flex: '1 1 auto' }}>
<Typography variant="h4">{t('Overview')}</Typography>
</Box>
<div>
<Button startIcon={<PlusIcon />} variant="contained">
<Button
startIcon={<PlusIcon />}
variant="contained"
>
{t('Dashboard')}
</Button>
</div>
</Stack>
<Grid container spacing={4}>
<Grid md={4} xs={12}>
<Grid
container
spacing={4}
>
<Grid
md={4}
xs={12}
>
<ActiveUserCount />
</Grid>
<Grid md={4} xs={12}>
<Grid
md={4}
xs={12}
>
<Summary
amount={lessonCategoriesCount}
diff={15}
@@ -82,7 +98,10 @@ export default function Page(): React.JSX.Element {
trend="up"
/>
</Grid>
<Grid md={4} xs={12}>
<Grid
md={4}
xs={12}
>
<Summary
amount={lessonTypesCount}
diff={15}
@@ -91,7 +110,10 @@ export default function Page(): React.JSX.Element {
trend="up"
/>
</Grid>
<Grid md={8} xs={12}>
<Grid
md={8}
xs={12}
>
<AppUsage
data={[
{ name: 'Jan', v1: 36, v2: 19 },
@@ -109,22 +131,41 @@ export default function Page(): React.JSX.Element {
]}
/>
</Grid>
<Grid md={4} xs={12}>
<Grid
md={4}
xs={12}
>
<Subscriptions subscriptions={SamplesubScriptions} />
</Grid>
<Grid md={4} xs={12}>
<Grid
md={4}
xs={12}
>
<AppChat messages={SampleMessages} />
</Grid>
<Grid md={4} xs={12}>
<Grid
md={4}
xs={12}
>
<Events events={SampleEvents} />
</Grid>
<Grid md={4} xs={12}>
<Grid
md={4}
xs={12}
>
<AppLimits usage={80} />
</Grid>
<Grid md={4} xs={12}>
<Grid
md={4}
xs={12}
>
<HelperWidget
action={
<Button color="secondary" endIcon={<ArrowRightIcon />} size="small">
<Button
color="secondary"
endIcon={<ArrowRightIcon />}
size="small"
>
{t('Search jobs')}
</Button>
}
@@ -134,10 +175,17 @@ export default function Page(): React.JSX.Element {
title={t('Find your dream job')}
/>
</Grid>
<Grid md={4} xs={12}>
<Grid
md={4}
xs={12}
>
<HelperWidget
action={
<Button color="secondary" endIcon={<ArrowRightIcon />} size="small">
<Button
color="secondary"
endIcon={<ArrowRightIcon />}
size="small"
>
{t('Help center')}
</Button>
}
@@ -147,10 +195,17 @@ export default function Page(): React.JSX.Element {
title={t('Need help figuring things out?')}
/>
</Grid>
<Grid md={4} xs={12}>
<Grid
md={4}
xs={12}
>
<HelperWidget
action={
<Button color="secondary" endIcon={<ArrowRightIcon />} size="small">
<Button
color="secondary"
endIcon={<ArrowRightIcon />}
size="small"
>
{t('Documentation')}
</Button>
}

57
002_source/cms/src/app/dashboard/students/SampleStudents.tsx Normal file
View File

@@ -0,0 +1,57 @@
// src/app/dashboard/students/page.tsx
'use client';
import type { Student } from '@/db/Students/type.d';
import { dayjs } from '@/lib/dayjs';
export const SampleStudents = [
{
id: 'STU-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: 'STU-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: 'STU-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: 'STU-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: 'STU-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 Student[];

15
002_source/cms/src/app/dashboard/students/_GUIDELINES.md
View File

@@ -1,11 +1,11 @@
# GUIDELINES
this folder is part of nextjs typescript project and containing page definition for `Customer` / `Customers` record:
this folder is part of nextjs typescript project and containing page definition for `Student` / `Students` record:
- list (./page.tsx)
- view (./[customerId]/page.tsx)
- view (./[studentId]/page.tsx)
- create (./create/page.tsx)
- edit (./[customerId]/page.tsx)
- edit (./[studentId]/page.tsx)
- translation provided by react-i18next
the `@` sign refer to `<base_dir>/002_source/002_source/cms/src`
@@ -13,17 +13,17 @@ the `@` sign refer to `<base_dir>/002_source/002_source/cms/src`
## Assumption and Requirements
- let one file contains one component only.
- type information defined in `<base_dir>/002_source/cms/src/db/Customers/type.d.tsx`
- it mainly consume the db drivers `Customres` in `<base_dir>/002_source/cms/src/db/Customers`
- type information defined in `<base_dir>/002_source/cms/src/db/Students/type.d.tsx`
- it mainly consume the db drivers `Students` in `<base_dir>/002_source/cms/src/db/Students`
simple template:
```typescript
// src/app/dashboard/customers/page.tsx
// src/app/dashboard/students/page.tsx
'use client';
// RULES:
// contains list page for customers (Customers)
// contains list page for students (Students)
// contain definition to collection only
//
import statements here ...
@@ -46,4 +46,3 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
interface PageProps {
searchParams: { email?: string; phone?: string; sortDir?: 'asc' | 'desc'; status?: string };
}
```

11
002_source/cms/src/app/dashboard/students/edit/[customerId]/_PROMPT.md
View File

@@ -1,11 +0,0 @@
# task
## instruction
with reference to `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/_helloworld/page.tsx`
with reference to `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/lesson_types/edit/[typeId]/page.tsx`
please modify `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/lesson_categories/edit/page.tsx`
please draft a tsx for showing error to user thanks,

10
002_source/cms/src/app/dashboard/students/list/page.tsx
View File

@@ -1,13 +1,13 @@
// src/app/dashboard/customers/page.tsx
// src/app/dashboard/students/list/page.tsx
'use client';
// RULES:
// contains list page for customers (Customers)
// contains list page for students (Students)
// contain definition to collection only
//
import * as React from 'react';
import { useRouter } from 'next/navigation';
import { COL_CUSTOMERS } from '@/constants';
import { COL_STUDENTS } from '@/constants';
import { LoadingButton } from '@mui/lab';
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
@@ -33,7 +33,7 @@ import { defaultStudent } from '@/components/dashboard/student/_constants';
import FormLoading from '@/components/loading';
export default function Page({ searchParams }: PageProps): React.JSX.Element {
const { t } = useTranslation(['customers']);
const { t } = useTranslation(['students']);
const router = useRouter();
const { email, phone, sortDir, status } = searchParams;
@@ -57,7 +57,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
const reloadRows = async (): Promise<void> => {
try {
const models: ListResult<RecordModel> = await pb
.collection(COL_CUSTOMERS)
.collection(COL_STUDENTS)
.getList(currentPage + 1, rowsPerPage, listOption);
const { items, totalItems } = models;
const tempLessonTypes: Student[] = items.map((lt) => {

11
002_source/cms/src/components/dashboard/layout/config.ts
View File

@@ -111,7 +111,16 @@ export const layoutConfig = {
},
],
},
{
key: 'users',
title: 'users',
icon: 'users',
items: [
{ key: 'users', title: 'List users', href: paths.dashboard.users.list },
{ key: 'users:create', title: 'Create user', href: paths.dashboard.users.create },
{ key: 'users:details', title: 'User details', href: paths.dashboard.users.view('1') },
],
},
{
key: 'teachers',
title: 'teachers',

1
002_source/cms/src/components/dashboard/lp/questions/type.d.ts vendored
View File

@@ -1,3 +1,4 @@
// QuizLPQuestion
export interface LpQuestion {
isEmpty?: boolean;
//

53
002_source/cms/src/components/dashboard/student/_GUIDELINES.md
View File

@@ -1,25 +1,44 @@
# GUIDELINES & KEY COMPONENTS
# STUDENT MANAGEMENT GUIDELINES
- `_constants.ts` contains the constant for
## Core Components
- default value (defaultValue)
- empty value (emptyValue)
- `_constants.ts` - Contains essential constants for:
- Default values (defaultValue)
- Empty/placeholder values (emptyValue)
- Student status options (active/inactive)
- Grade level options
- `customers-table.tsx`
## Student Data Table System
- `confirm-delete-modal.tsx` - delete modal component when click delete button on list
- `students-table.tsx` - Main student listing table
- `confirm-delete-modal.tsx` - Confirmation dialog for student deletion
- `students-selection-context.tsx` - Context for selected student records
- `customers-filters.tsx`
- `customers-pagination.tsx`
- `email-filter-popover.tsx`
- `phone-filter-popover.tsx`
- `customers-selection-context.tsx`
### Table Features
- `customer-create-form.tsx` - form to create a new customer
- `customer-edit-form.tsx` - form to edit a existing customer
- `students-filters.tsx` - Filter controls for the student table
- `email-filter-popover.tsx` - Email-specific filtering
- `phone-filter-popover.tsx` - Phone number filtering
- `students-pagination.tsx` - Pagination controls
- `type.d.tsx` - contains type definition
## Student Forms
- `notifications.tsx` - constants used for demonstration
- `payments.tsx` - constants used for demonstration
- `shipping-address.tsx` - constants used for demonstration
- `student-create-form.tsx` - Form for adding new students with:
- Personal information fields
- Contact details
- Enrollment information
- `student-edit-form.tsx` - Form for modifying existing student records
## Supporting Components
- `type.d.tsx` - Type definitions for student data
- `notifications.tsx` - Student notification preferences
- `payments.tsx` - Student payment records
- `shipping-address.tsx` - Student address information
## Best Practices
1. Always validate student data before submission
2. Use the provided constants for default/empty values
3. Maintain consistent field naming across all components
4. Follow accessibility guidelines for all form inputs

25
002_source/cms/src/components/dashboard/user/_GUIDELINES.md Normal file
View File

@@ -0,0 +1,25 @@
# GUIDELINES & KEY COMPONENTS
- `_constants.ts` contains the constant for
- default value (defaultValue)
- empty value (emptyValue)
- `users-table.tsx`
- `confirm-delete-modal.tsx` - delete modal component when click delete button on list
- `users-filters.tsx`
- `users-pagination.tsx`
- `email-filter-popover.tsx`
- `phone-filter-popover.tsx`
- `users-selection-context.tsx`
- `user-create-form.tsx` - form to create a new user
- `user-edit-form.tsx` - form to edit a existing user
- `type.d.tsx` - contains type definition
- `notifications.tsx` - constants used for demonstration
- `payments.tsx` - constants used for demonstration
- `shipping-address.tsx` - constants used for demonstration

21
002_source/cms/src/components/dashboard/user/_constants.ts Normal file
View File

@@ -0,0 +1,21 @@
// RULES:
// default variable value for customer
// empty valur for customer
import { dayjs } from '@/lib/dayjs';
import type { User } from './type.d';
export const defaultUser: User = {
id: '',
name: '',
avatar: undefined,
email: '',
phone: undefined,
quota: 0,
status: 'pending',
createdAt: dayjs().toDate(),
};
export const emptyLpCategory: User = {
...defaultUser,
};

124
002_source/cms/src/components/dashboard/user/confirm-delete-modal.tsx Normal file
View File

@@ -0,0 +1,124 @@
'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 { logger } from '@/lib/default-logger';
import { toast } from '@/components/core/toaster';
import { deleteUser } from '@/db/Users/Delete';
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%)',
};
function handleUserConfirmDelete(): void {
if (idToDelete) {
setIsDeleteing(true);
// RULES: delete<CollectionName>
deleteUser(idToDelete)
.then(() => {
reloadRows();
handleClose();
toast(t('delete.success'));
})
.catch((err) => {
// console.error(err)
logger.error(err);
toast(t('delete.error'));
})
.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 User ?')}</Typography>
<Typography
color="text.secondary"
variant="body2"
>
{t('Are you sure you want to delete this user ?')}
</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>
);
}

50
002_source/cms/src/components/dashboard/user/email-filter-popover.tsx Normal file
View File

@@ -0,0 +1,50 @@
'use client';
import * as React from 'react';
import Button from '@mui/material/Button';
import FormControl from '@mui/material/FormControl';
import OutlinedInput from '@mui/material/OutlinedInput';
import { FilterPopover, useFilterContext } from '@/components/core/filter-button';
// EmailFilterPopover -> email-filter-popover.tsx
export default 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>
);
}

3
002_source/cms/src/components/dashboard/user/helloworld.tsx Normal file
View File

@@ -0,0 +1,3 @@
const helloworld = 'helloworld';
export { helloworld };

101
002_source/cms/src/components/dashboard/user/notifications.tsx Normal file
View File

@@ -0,0 +1,101 @@
'use client';
import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardHeader from '@mui/material/CardHeader';
import Chip from '@mui/material/Chip';
import Select from '@mui/material/Select';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { EnvelopeSimple as EnvelopeSimpleIcon } from '@phosphor-icons/react/dist/ssr/EnvelopeSimple';
import { dayjs } from '@/lib/dayjs';
import { DataTable } from '@/components/core/data-table';
import type { ColumnDef } from '@/components/core/data-table';
import { Option } from '@/components/core/option';
export interface Notification {
id: string;
type: string;
status: 'delivered' | 'pending' | 'failed';
createdAt: Date;
}
const columns = [
{
formatter: (row): React.JSX.Element => (
<Typography sx={{ whiteSpace: 'nowrap' }} variant="inherit">
{row.type}
</Typography>
),
name: 'Type',
width: '300px',
},
{
formatter: (row): React.JSX.Element => {
const mapping = {
delivered: { label: 'Delivered', color: 'success' },
pending: { label: 'Pending', color: 'warning' },
failed: { label: 'Failed', color: 'error' },
} as const;
const { label, color } = mapping[row.status] ?? { label: 'Unknown', color: 'secondary' };
return <Chip color={color} label={label} size="small" variant="soft" />;
},
name: 'Status',
width: '200px',
},
{
formatter: (row): React.JSX.Element => (
<Typography sx={{ whiteSpace: 'nowrap' }} variant="inherit">
{dayjs(row.createdAt).format('MMM D, YYYY hh:mm A')}
</Typography>
),
name: 'Date',
align: 'right',
},
] satisfies ColumnDef<Notification>[];
export interface NotificationsProps {
notifications: Notification[];
}
export function Notifications({ notifications }: NotificationsProps): React.JSX.Element {
return (
<Card>
<CardHeader
avatar={
<Avatar>
<EnvelopeSimpleIcon fontSize="var(--Icon-fontSize)" />
</Avatar>
}
title="Notifications"
/>
<CardContent>
<Stack spacing={3}>
<Stack spacing={2}>
<Select defaultValue="last_invoice" name="type" sx={{ maxWidth: '100%', width: '320px' }}>
<Option value="last_invoice">Resend last invoice</Option>
<Option value="password_reset">Send password reset</Option>
<Option value="verification">Send verification</Option>
</Select>
<div>
<Button startIcon={<EnvelopeSimpleIcon />} variant="contained">
Send email
</Button>
</div>
</Stack>
<Card sx={{ borderRadius: 1 }} variant="outlined">
<Box sx={{ overflowX: 'auto' }}>
<DataTable<Notification> columns={columns} rows={notifications} />
</Box>
</Card>
</Stack>
</CardContent>
</Card>
);
}

138
002_source/cms/src/components/dashboard/user/payments.tsx Normal file
View File

@@ -0,0 +1,138 @@
'use client';
import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardHeader from '@mui/material/CardHeader';
import Chip from '@mui/material/Chip';
import Divider from '@mui/material/Divider';
import Link from '@mui/material/Link';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
import { ShoppingCartSimple as ShoppingCartSimpleIcon } from '@phosphor-icons/react/dist/ssr/ShoppingCartSimple';
import { dayjs } from '@/lib/dayjs';
import type { ColumnDef } from '@/components/core/data-table';
import { DataTable } from '@/components/core/data-table';
export interface Payment {
currency: string;
amount: number;
invoiceId: string;
status: 'pending' | 'completed' | 'canceled' | 'refunded';
createdAt: Date;
}
const columns = [
{
formatter: (row): React.JSX.Element => (
<Typography sx={{ whiteSpace: 'nowrap' }} variant="subtitle2">
{new Intl.NumberFormat('en-US', { style: 'currency', currency: row.currency }).format(row.amount)}
</Typography>
),
name: 'Amount',
width: '200px',
},
{
formatter: (row): React.JSX.Element => {
const mapping = {
pending: { label: 'Pending', color: 'warning' },
completed: { label: 'Completed', color: 'success' },
canceled: { label: 'Canceled', color: 'error' },
refunded: { label: 'Refunded', color: 'error' },
} as const;
const { label, color } = mapping[row.status] ?? { label: 'Unknown', color: 'secondary' };
return <Chip color={color} label={label} size="small" variant="soft" />;
},
name: 'Status',
width: '200px',
},
{
formatter: (row): React.JSX.Element => {
return <Link variant="inherit">{row.invoiceId}</Link>;
},
name: 'Invoice ID',
width: '150px',
},
{
formatter: (row): React.JSX.Element => (
<Typography sx={{ whiteSpace: 'nowrap' }} variant="inherit">
{dayjs(row.createdAt).format('MMM D, YYYY hh:mm A')}
</Typography>
),
name: 'Date',
align: 'right',
},
] satisfies ColumnDef<Payment>[];
export interface PaymentsProps {
ordersValue: number;
payments: Payment[];
refundsValue: number;
totalOrders: number;
}
export function Payments({ ordersValue, payments = [], refundsValue, totalOrders }: PaymentsProps): React.JSX.Element {
return (
<Card>
<CardHeader
action={
<Button color="secondary" startIcon={<PlusIcon />}>
Create Payment
</Button>
}
avatar={
<Avatar>
<ShoppingCartSimpleIcon fontSize="var(--Icon-fontSize)" />
</Avatar>
}
title="Payments"
/>
<CardContent>
<Stack spacing={3}>
<Card sx={{ borderRadius: 1 }} variant="outlined">
<Stack
direction="row"
divider={<Divider flexItem orientation="vertical" />}
spacing={3}
sx={{ justifyContent: 'space-between', p: 2 }}
>
<div>
<Typography color="text.secondary" variant="overline">
Total orders
</Typography>
<Typography variant="h6">{new Intl.NumberFormat('en-US').format(totalOrders)}</Typography>
</div>
<div>
<Typography color="text.secondary" variant="overline">
Orders value
</Typography>
<Typography variant="h6">
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(ordersValue)}
</Typography>
</div>
<div>
<Typography color="text.secondary" variant="overline">
Refunds
</Typography>
<Typography variant="h6">
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(refundsValue)}
</Typography>
</div>
</Stack>
</Card>
<Card sx={{ borderRadius: 1 }} variant="outlined">
<Box sx={{ overflowX: 'auto' }}>
<DataTable<Payment> columns={columns} rows={payments} />
</Box>
</Card>
</Stack>
</CardContent>
</Card>
);
}

50
002_source/cms/src/components/dashboard/user/phone-filter-popover.tsx Normal file
View File

@@ -0,0 +1,50 @@
'use client';
import * as React from 'react';
import Button from '@mui/material/Button';
import FormControl from '@mui/material/FormControl';
import OutlinedInput from '@mui/material/OutlinedInput';
import { FilterPopover, useFilterContext } from '@/components/core/filter-button';
// phone-filter-popover.tsx
export default 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>
);
}

46
002_source/cms/src/components/dashboard/user/shipping-address.tsx Normal file
View File

@@ -0,0 +1,46 @@
import * as React from 'react';
import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Chip from '@mui/material/Chip';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
export interface Address {
id: string;
country: string;
state: string;
city: string;
zipCode: string;
street: string;
primary?: boolean;
}
export interface ShippingAddressProps {
address: Address;
}
export function ShippingAddress({ address }: ShippingAddressProps): React.ReactElement {
return (
<Card sx={{ borderRadius: 1, height: '100%' }} variant="outlined">
<CardContent>
<Stack spacing={2}>
<Typography>
{address.street},
<br />
{address.city}, {address.state}, {address.country},
<br />
{address.zipCode}
</Typography>
<Stack direction="row" spacing={2} sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
{address.primary ? <Chip color="warning" label="Primary" variant="soft" /> : <span />}
<Button color="secondary" size="small" startIcon={<PencilSimpleIcon />}>
Edit
</Button>
</Stack>
</Stack>
</CardContent>
</Card>
);
}

69
002_source/cms/src/components/dashboard/user/type.d.tsx Normal file
View File

@@ -0,0 +1,69 @@
'use client';
export type SortDir = 'asc' | 'desc';
export interface User {
id: string;
name: string;
avatar?: string;
email: string;
phone?: string;
quota: number;
status: 'pending' | 'active' | 'blocked';
createdAt: Date;
updatedAt?: Date;
}
export interface CreateFormProps {
name: string;
email: string;
phone?: string;
company?: string;
billingAddress?: {
country: string;
state: string;
city: string;
zipCode: string;
line1: string;
line2?: string;
};
taxId?: string;
timezone: string;
language: string;
currency: string;
avatar?: string;
// quota?: number;
// status?: 'pending' | 'active' | 'blocked';
}
export interface EditFormProps {
name: string;
email: string;
phone?: string;
company?: string;
billingAddress?: {
country: string;
state: string;
city: string;
zipCode: string;
line1: string;
line2?: string;
};
taxId?: string;
timezone: string;
language: string;
currency: string;
avatar?: string;
// quota?: number;
// status?: 'pending' | 'active' | 'blocked';
}
export interface CustomersFiltersProps {
filters?: Filters;
sortDir?: SortDir;
fullData: User[];
}
export interface Filters {
email?: string;
phone?: string;
status?: string;
}

529
002_source/cms/src/components/dashboard/user/user-create-form.tsx Normal file
View File

@@ -0,0 +1,529 @@
'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';
import { createCustomer as createUser } from '@/db/Customers/Create';
import isDevelopment from '@/lib/check-is-development';
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: 'new name',
email: '123@123.com',
phone: '91234567',
company: '',
billingAddress: {
country: 'US',
state: '00000',
city: 'NY',
zipCode: '00000',
line1: 'test line 1',
line2: 'test line 2',
},
taxId: '12345',
timezone: 'new_york',
language: 'en',
currency: 'USD',
} satisfies Values;
export function UserCreateForm(): 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: Values): Promise<void> => {
try {
// Use standard create method from db/Customers/Create
const record = await createUser(values);
toast.success('User created successfully');
router.push(paths.dashboard.users.details(record.id));
} catch (err) {
logger.error(err);
toast.error('Failed to create user. Please try again.');
}
},
[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.users.list}
>
Cancel
</Button>
<Button
type="submit"
variant="contained"
>
Create user
</Button>
</CardActions>
</Card>
<Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
<pre>{JSON.stringify({ errors }, null, 2)}</pre>
</Box>
</form>
);
}

604
002_source/cms/src/components/dashboard/user/user-edit-form.tsx Normal file
View File

@@ -0,0 +1,604 @@
'use client';
import * as React from 'react';
import RouterLink from 'next/link';
import { useParams, useRouter } from 'next/navigation';
//
import { COL_USERS } from '@/constants';
import { zodResolver } from '@hookform/resolvers/zod';
import { LoadingButton } from '@mui/lab';
//
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 Divider from '@mui/material/Divider';
import FormControl from '@mui/material/FormControl';
import FormHelperText from '@mui/material/FormHelperText';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
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 { useTranslation } from 'react-i18next';
import { z as zod } from 'zod';
import { paths } from '@/paths';
import { logger } from '@/lib/default-logger';
import { base64ToFile, fileToBase64 } from '@/lib/file-to-base64';
import { pb } from '@/lib/pb';
import { toast } from '@/components/core/toaster';
import FormLoading from '@/components/loading';
// import ErrorDisplay from '../../error';
import ErrorDisplay from '../error';
import isDevelopment from '@/lib/check-is-development';
// TODO: review this
const schema = zod.object({
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(25),
company: zod.string().max(255).optional(),
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),
avatar: zod.string().optional(),
});
type Values = zod.infer<typeof schema>;
const defaultValues = {
name: '',
email: '',
phone: '',
company: '',
billingAddress: {
country: '',
state: '',
city: '',
zipCode: '',
line1: '',
line2: '',
},
taxId: '',
timezone: '',
language: '',
currency: '',
avatar: '',
} satisfies Values;
export function UserEditForm(): React.JSX.Element {
const router = useRouter();
const { t } = useTranslation(['lp_categories']);
const { id: userId } = useParams<{ userId: string }>();
//
const [isUpdating, setIsUpdating] = React.useState<boolean>(false);
const [showLoading, setShowLoading] = React.useState<boolean>(false);
//
const [showError, setShowError] = React.useState({ show: false, detail: '' });
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 updateData = {
name: values.name,
email: values.email,
phone: values.phone,
company: values.company,
billingAddress: values.billingAddress,
taxId: values.taxId,
timezone: values.timezone,
language: values.language,
currency: values.currency,
avatar: values.avatar ? await base64ToFile(values.avatar) : null,
};
try {
await pb.collection(COL_USERS).update(userId, updateData);
toast.success('User updated successfully');
router.push(paths.dashboard.users.list);
} catch (error) {
logger.error(error);
toast.error('Failed to update user');
} finally {
setIsUpdating(false);
}
},
[userId, 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]
);
// TODO: need to align with save form
// use trycatch
const [textDescription, setTextDescription] = React.useState<string>('');
const [textRemarks, setTextRemarks] = React.useState<string>('');
// load existing data when user arrive
const loadExistingData = React.useCallback(
async (id: string) => {
setShowLoading(true);
try {
const result = await pb.collection(COL_USERS).getOne(id);
reset({ ...defaultValues, ...result });
console.log({ result });
if (result.avatar_file) {
const fetchResult = await fetch(
`http://127.0.0.1:8090/api/files/${result.collectionId}/${result.id}/${result.avatar_file}`
);
const blob = await fetchResult.blob();
const url = await fileToBase64(blob);
setValue('avatar', url);
}
} catch (error) {
logger.error(error);
toast.error('Failed to load user data');
setShowError({ show: true, detail: JSON.stringify(error, null, 2) });
} finally {
setShowLoading(false);
}
},
[reset, setValue]
);
React.useEffect(() => {
void loadExistingData(userId);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [userId]);
if (showLoading) return <FormLoading />;
if (showError.show)
return (
<ErrorDisplay
message={t('error.unable-to-process-request')}
code="500"
details={showError.detail}
/>
);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<Card>
<CardContent>
<Stack
divider={<Divider />}
spacing={4}
>
<Stack spacing={3}>
<Typography variant="h6">{t('edit.basic-info')}</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: '5%',
display: 'inline-flex',
p: '4px',
}}
>
<Avatar
variant="rounded"
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('edit.avatar')}</Typography>
<Typography variant="caption">{t('edit.avatarRequirements')}</Typography>
<Button
color="secondary"
onClick={() => {
avatarInputRef.current?.click();
}}
variant="outlined"
>
{t('edit.avatar_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</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</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}
placeholder="no company name"
/>
{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}>
<MenuItem value="US">United States</MenuItem>
<MenuItem value="UK">United Kingdom</MenuItem>
<MenuItem value="CA">Canada</MenuItem>
</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 Line 1</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="no tax id..."
/>
{errors.taxId ? <FormHelperText>{errors.taxId.message}</FormHelperText> : null}
</FormControl>
)}
/>
</Grid>
</Grid>
</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}>
<MenuItem value="America/New_York">New York</MenuItem>
<MenuItem value="Europe/London">London</MenuItem>
<MenuItem value="Asia/Tokyo">Tokyo</MenuItem>
<MenuItem value="America/Boa_Vista">Boa Vista</MenuItem>
<MenuItem value="America/Grand_Turk">Grand Turk</MenuItem>
<MenuItem value="Asia/Manila">Manila</MenuItem>
<MenuItem value="Asia/Urumqi">Urumqi</MenuItem>
<MenuItem value="Africa/Tunis">Tunis</MenuItem>
</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}>
<MenuItem value="en">English</MenuItem>
<MenuItem value="es">Spanish</MenuItem>
<MenuItem value="fr">French</MenuItem>
</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 required>Currency</InputLabel>
<Select {...field}>
<MenuItem value="USD">USD</MenuItem>
<MenuItem value="EUR">EUR</MenuItem>
<MenuItem value="GBP">GBP</MenuItem>
</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.users.list}
>
{t('edit.cancelButton')}
</Button>
<LoadingButton
disabled={isUpdating}
loading={isUpdating}
type="submit"
variant="contained"
>
{t('edit.updateButton')}
</LoadingButton>
</CardActions>
</Card>
<Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
<pre>{JSON.stringify({ errors }, null, 2)}</pre>
</Box>
</form>
);
}

242
002_source/cms/src/components/dashboard/user/users-filters.tsx Normal file
View File

@@ -0,0 +1,242 @@
'use client';
// RULES:
// T.B.A.
//
import * as React from 'react';
import { useRouter } from 'next/navigation';
import { getAllCustomersCount } from '@/db/Customers/GetAllCount';
import Button from '@mui/material/Button';
import Chip from '@mui/material/Chip';
import Divider from '@mui/material/Divider';
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 } from '@/components/core/filter-button';
import { Option } from '@/components/core/option';
import { useCustomersSelection } from './users-selection-context';
import GetBlockedCount from '@/db/Customers/GetBlockedCount';
import GetPendingCount from '@/db/Customers/GetPendingCount';
import GetActiveCount from '@/db/Customers/GetActiveCount';
import PhoneFilterPopover from './phone-filter-popover';
import EmailFilterPopover from './email-filter-popover';
import type { CustomersFiltersProps, Filters, SortDir } from './type.d';
export function UsersFilters({ filters = {}, sortDir = 'desc', fullData }: CustomersFiltersProps): React.JSX.Element {
const { t } = useTranslation();
const { email, phone, status } = filters;
const [totalCount, setTotalCount] = React.useState<number>(0);
const [activeCount, setActiveCount] = React.useState<number>(0);
const [pendingCount, setPendingCount] = React.useState<number>(0);
const [blockedCount, setBlockedCount] = React.useState<number>(0);
const router = useRouter();
const selection = useCustomersSelection();
// function getVisible(): number {
// return fullData.reduce((count, item: CrQuestion) => {
// return item.visible === 'visible' ? count + 1 : count;
// }, 0);
// }
// function getHidden(): number {
// return fullData.reduce((count, item: CrQuestion) => {
// return item.visible === 'hidden' ? count + 1 : count;
// }, 0);
// }
// The tabs should be generated using API data.
const tabs = [
{ label: 'All', value: '', count: totalCount },
{ label: 'Active', value: 'active', count: activeCount },
{ label: 'Pending', value: 'pending', count: pendingCount },
{ label: 'Blocked', value: 'blocked', count: blockedCount },
] 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);
}
router.push(`${paths.dashboard.customers.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;
React.useEffect(() => {
const fetchCount = async (): Promise<void> => {
try {
const tc = await getAllCustomersCount();
setTotalCount(tc);
const bc = await GetBlockedCount();
setBlockedCount(bc);
const pc = await GetPendingCount();
setPendingCount(pc);
const ac = await GetActiveCount();
setActiveCount(ac);
} catch (error) {
//
}
};
void fetchCount();
}, []);
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>
);
}

50
002_source/cms/src/components/dashboard/user/users-pagination.tsx Normal file
View File

@@ -0,0 +1,50 @@
'use client';
import * as React from 'react';
import TablePagination from '@mui/material/TablePagination';
function noop(): void {
return undefined;
}
interface UsersPaginationProps {
count: number;
page: number;
//
setPage: (page: number) => void;
setRowsPerPage: (page: number) => void;
rowsPerPage: number;
}
export function UsersPagination({
count,
page,
//
setPage,
setRowsPerPage,
rowsPerPage,
}: UsersPaginationProps): 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.
const handleChangePage = (event: unknown, newPage: number) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
setRowsPerPage(parseInt(event.target.value));
// console.log(parseInt(event.target.value));
};
return (
<TablePagination
component="div"
count={count}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
page={page}
rowsPerPage={rowsPerPage}
rowsPerPageOptions={[5, 10, 25]}
//
/>
);
}

40
002_source/cms/src/components/dashboard/user/users-selection-context.tsx Normal file
View File

@@ -0,0 +1,40 @@
'use client';
import * as React from 'react';
import { useSelection } from '@/hooks/use-selection';
import type { Selection } from '@/hooks/use-selection';
import type { User } from './type.d';
function noop(): void {
return undefined;
}
export interface CustomersSelectionContextValue extends Selection {}
export const CustomersSelectionContext = React.createContext<CustomersSelectionContextValue>({
deselectAll: noop,
deselectOne: noop,
selectAll: noop,
selectOne: noop,
selected: new Set(),
selectedAny: false,
selectedAll: false,
});
interface UsersSelectionProviderProps {
children: React.ReactNode;
users: User[];
}
export function UsersSelectionProvider({ children, users = [] }: UsersSelectionProviderProps): React.JSX.Element {
const customerIds = React.useMemo(() => users.map((customer) => customer.id), [users]);
const selection = useSelection(customerIds);
return <CustomersSelectionContext.Provider value={{ ...selection }}>{children}</CustomersSelectionContext.Provider>;
}
export function useCustomersSelection(): CustomersSelectionContextValue {
return React.useContext(CustomersSelectionContext);
}

222
002_source/cms/src/components/dashboard/user/users-table.tsx Normal file
View File

@@ -0,0 +1,222 @@
'use client';
import * as React from 'react';
import RouterLink from 'next/link';
import { LoadingButton } from '@mui/lab';
import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
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 { Images as ImagesIcon } from '@phosphor-icons/react/dist/ssr/Images';
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 { DataTable } from '@/components/core/data-table';
import type { ColumnDef } from '@/components/core/data-table';
import ConfirmDeleteModal from './confirm-delete-modal';
import { useCustomersSelection } from './users-selection-context';
import type { User } from './type.d';
function columns(handleDeleteClick: (testId: string) => void): ColumnDef<User>[] {
return [
{
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.users.view(row.id)}
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: '150px',
},
{ field: 'phone', name: 'Phone number', width: '150px' },
{
formatter: (row): React.JSX.Element => {
// eslint-disable-next-line react-hooks/rules-of-hooks
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(row) {
return dayjs(row.createdAt).format('MMM D, YYYY');
},
name: 'Created at',
width: '150px',
},
{
formatter: (row): React.JSX.Element => (
<Stack
direction="row"
spacing={1}
>
<LoadingButton
//
color="secondary"
component={RouterLink}
href={paths.dashboard.users.view(row.id)}
>
<PencilSimpleIcon size={24} />
</LoadingButton>
<LoadingButton
color="error"
// TODO: originally it is row.isEmpty
disabled={false}
onClick={() => {
handleDeleteClick(row.id);
}}
>
<TrashSimpleIcon size={24} />
</LoadingButton>
</Stack>
),
name: 'Actions',
hideName: true,
align: 'right',
},
];
}
export interface UsersTableProps {
rows: User[];
reloadRows: () => void;
}
export function UsersTable({ rows, reloadRows }: UsersTableProps): React.JSX.Element {
const { t } = useTranslation(['customers']);
const { deselectAll, deselectOne, selectAll, selectOne, selected } = useCustomersSelection();
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<User>
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"
>
{/* TODO: update this */}
{t('no-record-found')}
</Typography>
</Box>
) : null}
</React.Fragment>
);
}

2
002_source/cms/src/constants.ts
View File

@@ -1,6 +1,6 @@
// RULES:
// COL_<COLLECTION_NAME> = "<table name in dbml file>"
// e.g. COL_APPLE = "Apple" table in dbml
// e.g. COL_APPLE = collection "Apple" in pocketbase = "Apple" table in dbml
const COL_LESSON_TYPES = 'LessonsTypes';
const COL_LESSON_CATEGORIES = 'LessonsCategories';
const COL_USERS = 'users';

6
002_source/cms/src/db/Customers/GetActiveCount.tsx
View File

@@ -1,9 +1,9 @@
import { COL_CUSTOMERS } from '@/constants';
import { COL_CUSTOMERS, COL_USER_METAS } from '@/constants';
import { pb } from '@/lib/pb';
export default async function GetActiveCount(): Promise<number> {
const { totalItems: count } = await pb.collection(COL_CUSTOMERS).getList(1, 1, {
filter: 'status = "active"',
const { totalItems: count } = await pb.collection(COL_USER_METAS).getList(1, 1, {
filter: 'role = "teacher" && status = "active"',
});
return count;
}

6
002_source/cms/src/db/Customers/GetBlockedCount.tsx
View File

@@ -1,9 +1,9 @@
import { COL_CUSTOMERS } from '@/constants';
import { COL_CUSTOMERS, COL_USER_METAS } from '@/constants';
import { pb } from '@/lib/pb';
export default async function GetBlockedCount(): Promise<number> {
const { totalItems: count } = await pb.collection(COL_CUSTOMERS).getList(1, 1, {
filter: 'status = "blocked"',
const { totalItems: count } = await pb.collection(COL_USER_METAS).getList(1, 1, {
filter: `role = "teacher" && status = "blocked"`,
});
return count;
}

6
002_source/cms/src/db/Customers/GetPendingCount.tsx
View File

@@ -1,9 +1,9 @@
import { COL_CUSTOMERS } from '@/constants';
import { COL_CUSTOMERS, COL_USER_METAS } from '@/constants';
import { pb } from '@/lib/pb';
export default async function GetPendingCount(): Promise<number> {
const { totalItems: count } = await pb.collection(COL_CUSTOMERS).getList(1, 1, {
filter: 'status = "pending"',
const { totalItems: count } = await pb.collection(COL_USER_METAS).getList(1, 1, {
filter: 'role = "teacher" && status = "pending"',
});
return count;
}

2
002_source/cms/src/db/Customers/_GUIDELINES.md
View File

@@ -1,6 +1,6 @@
# GUIDELINES
This folder contains drivers for `Customer`/`Customers` records using PocketBase:
This folder contains drivers for `Customer`/`Customers`(Collection ID: pbc_108570809) records using PocketBase:
- create (Create.tsx)
- read (GetById.tsx)

2
002_source/cms/src/db/Helloworlds/_GUIDELINES.md
View File

@@ -1,6 +1,6 @@
# GUIDELINES
This folder contains test drivers for `Helloworld` records using PocketBase:
This folder contains test drivers for `Helloworld`(Collection ID: pbc_123408445) records using PocketBase:
- create (Create.tsx)
- read (GetById.tsx)

2
002_source/cms/src/db/LessonCategories/_GUIDELINES.md
View File

@@ -1,6 +1,6 @@
# GUIDELINES
This folder contains drivers for `LessonCategory`/`LessonCategories` records using PocketBase:
This folder contains drivers for `LessonCategory`/`LessonCategories`(Collection ID: pbc_1196309394) records using PocketBase:
- create (Create.tsx)
- read (GetById.tsx)

2
002_source/cms/src/db/LessonTypes/_GUIDELINES.md
View File

@@ -1,6 +1,6 @@
# GUIDELINES
This folder contains drivers for `LessonType`/`LessonTypes` records using PocketBase:
This folder contains drivers for `LessonType`/`LessonTypes`(Collection ID: pbc_2328411368) records using PocketBase:
- create (Create.tsx)
- read (GetById.tsx)

74
002_source/cms/src/db/Notifications/_GUIDELINES.md
View File

@@ -1,6 +1,8 @@
# GUIDELINES
This folder contains drivers for `Customer`/`Customers` records using PocketBase:
This folder contains drivers for `Notification`/`Notifications` (Collection ID: pbc_977978967) records using PocketBase:
## File Structure
- create (Create.tsx)
- read (GetById.tsx)
@@ -8,24 +10,66 @@ This folder contains drivers for `Customer`/`Customers` records using PocketBase
- count (GetAllCount.tsx, GetActiveCount.tsx, GetBlockedCount.tsx, GetPendingCount.tsx)
- misc (Helloworld.tsx)
- delete (Delete.tsx)
- list (GetAll.tsx)
- list (GetAll.tsx, GetNotificationByUserId.tsx)
the `@` sign refer to `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src`
## Assumption and Requirements
- assume `pb` is located in `@/lib/pb`
- no need to handle error in this function, i'll handle it in the caller
- type information defined in `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/Customers/type.d.tsx`
simple template:
## Implementation Template
```typescript
import { pb } from '@/lib/pb';
import { COL_CUSTOMERS } from '@/constants';
import { COL_NOTIFICATIONS } from '@/constants';
import type { CreateNotificationProps } from './type.d.ts';
export async function createCustomer(data: CreateFormProps) {
// ...content
// use direct return of pb.collection (e.g. return pb.collection(xxx))
export async function createNotification(data: CreateNotificationProps) {
return pb.collection(COL_NOTIFICATIONS).create(data);
}
```
## Special Considerations
- User-specific notifications (GetNotificationByUserId.tsx)
- Status transitions (active/pending/blocked)
- Priority levels handling
- Expiration dates
- Bulk operations support
## Type Definitions
Key types to use:
- `NotificationStatus`: active|pending|blocked
- `NotificationPriority`: low|medium|high
- `CreateNotificationProps`: Required fields
- `UpdateNotificationProps`: Partial updates
## Common Patterns
```typescript
// Bulk creation example
export async function createBulkNotifications(items: CreateNotificationProps[]) {
return Promise.all(items.map(item =>
pb.collection(COL_NOTIFICATIONS).create(item)
));
}
// Status update example
export async function markAsRead(id: string) {
return pb.collection(COL_NOTIFICATIONS).update(id, { status: 'read' });
}
```
## Performance Notes
- Ensure indexes on: user_id, status, created_at
- Consider pagination for large notification lists
- Cache frequently accessed notifications
- Batch operations for mass notifications
## Testing Guidelines
Recommended test cases:
- Single notification creation
- Bulk operations
- Status transitions
- User-specific queries
- Error cases (invalid data, permissions)

2
002_source/cms/src/db/QuizCRCategories/_GUIDELINES.md
View File

@@ -1,6 +1,6 @@
# GUIDELINES
This folder contains drivers for `QuizCRCategory`/`QuizCRCategories` records using PocketBase:
This folder contains drivers for `QuizCRCategory`/`QuizCRCategories`(Collection ID: pbc_4061499106) records using PocketBase:
- create (Create.tsx)
- read (GetById.tsx)

2
002_source/cms/src/db/QuizLPCategories/_GUIDELINES.md
View File

@@ -1,6 +1,6 @@
# GUIDELINES
This folder contains drivers for `QuizLPCategory` records using PocketBase:
This folder contains drivers for `QuizLPCategory`(Collection ID: pbc_3639453778) records using PocketBase:
- create (Create.tsx)
- read (GetById.tsx)

81
002_source/cms/src/db/QuizLPQuestions/_GUIDELINES.md
View File

@@ -1,6 +1,8 @@
# GUIDELINES
This folder contains drivers for `QuizLPQuestion` records using PocketBase:
This folder contains drivers for `QuizLPQuestion`/`QuizLPQuestions` records using PocketBase:
## File Structure
- create (Create.tsx)
- read (GetById.tsx)
@@ -8,27 +10,72 @@ This folder contains drivers for `QuizLPQuestion` records using PocketBase:
- count (GetAllCount.tsx)
- delete (Delete.tsx)
- list (GetAll.tsx)
- validation (validateQuestion.tsx)
the `@` sign refer to `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src`
## Assumption and Requirements
- assume `pb` is located in `@/lib/pb`
- no need to handle error in this function, i'll handle it in the caller
- type information defined in `@/db/QuizLPQuestions/type.d.tsx`
- Quiz LP questions require special handling for:
- Answer validation
- Question type checking
- Category association
simple template:
## Complete Implementation Template
```typescript
import { pb } from '@/lib/pb';
import { COL_QUIZ_LP_QUESTIONS } from '@/constants';
import type { QuizLPQuestion, CreateFormProps } from './type.d.ts';
export async function createQuizLPQuestion(data: CreateFormProps) {
// ...content
// use direct return of pb.collection (e.g. return pb.collection(COL_QUIZ_LP_QUESTIONS))
export async function createQuizLPQuestion(data: CreateFormProps): Promise<QuizLPQuestion> {
return pb.collection(COL_QUIZ_LP_QUESTIONS).create(data);
}
```
## Question-Specific Handling
### Answer Validation
```typescript
export function validateLPQuestionAnswer(question: QuizLPQuestion, answer: string): boolean {
// Implement LP question specific validation
return question.correctAnswer === answer;
}
```
### Type Definitions
```typescript
interface QuizLPQuestion {
id: string;
question: string;
options: string[];
correctAnswer: string;
categoryId: string;
difficulty: 'easy'|'medium'|'hard';
}
```
## Common Patterns
```typescript
// Get questions by category
export async function getQuestionsByCategory(categoryId: string) {
return pb.collection(COL_QUIZ_LP_QUESTIONS)
.getFullList({ filter: `categoryId = "${categoryId}"` });
}
// Validate before create
export async function createValidatedQuestion(data: CreateFormProps) {
if (!validateQuestionData(data)) throw new Error('Invalid question data');
return createQuizLPQuestion(data);
}
```
## Performance Considerations
- Add index on: categoryId, difficulty
- Consider pagination for large question sets
- Cache frequently accessed questions
## Testing Guidelines
Recommended test cases:
- Basic CRUD operations
- Answer validation
- Category filtering
- Difficulty level queries
- Error cases (invalid data)

11
002_source/cms/src/db/Students/type.d.ts vendored Normal file
View File

@@ -0,0 +1,11 @@
// Student type definitions
export interface Student {
id: string;
name: string;
avatar: string;
email: string;
phone: string;
quota: number;
status: 'active' | 'blocked' | 'pending';
createdAt: Date;
}

15
002_source/cms/src/db/Users.old/GetAllCount.tsx Normal file
View File

@@ -0,0 +1,15 @@
// REQ0006
import { COL_USERS } from '@/constants';
import { pb } from '@/lib/pb';
export default async function GetAllCount(): Promise<number> {
try {
const result = await pb.collection(`users`).getList(1, 9999, { filter: 'email != ""' });
const { totalItems: count } = result;
return count;
} catch (error) {
console.error(error);
return -99;
}
}

30
002_source/cms/src/db/Users.old/_GUIDELINES.md Normal file
View File

@@ -0,0 +1,30 @@
# GUIDELINES
This folder contains drivers for `User`/`Users` records using PocketBase:
- create (Create.tsx)
- read (GetById.tsx)
- write (Update.tsx)
- count (GetAllCount.tsx)
- delete (Delete.tsx)
- list (GetAll.tsx)
the `@` sign refer to `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src`
## Assumption and Requirements
- assume `pb` is located in `@/lib/pb`
- no need to handle error in this function, i'll handle it in the caller
- type information defined in `@/db/Users/type.d.tsx`
simple template:
```typescript
import { pb } from '@/lib/pb';
import { COL_USERS } from '@/constants';
export async function createUser(data: CreateFormProps) {
// ...content
// use direct return of pb.collection (e.g. return pb.collection(xxx))
}
```

78
002_source/cms/src/db/Vocabularies/_GUIDELINES.md
View File

@@ -1,6 +1,8 @@
# GUIDELINES
This folder contains drivers for `LessonCategory`/`LessonCategories` records using PocketBase:
This folder contains drivers for `Vocabulary`/`Vocabularies` records using PocketBase:
## File Structure
- create (Create.tsx)
- read (GetById.tsx)
@@ -8,23 +10,71 @@ This folder contains drivers for `LessonCategory`/`LessonCategories` records usi
- count (GetAllCount.tsx)
- delete (Delete.tsx)
- list (GetAll.tsx)
- types (type.d.tsx)
the `@` sign refer to `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src`
## Assumption and Requirements
- assume `pb` is located in `@/lib/pb`
- no need to handle error in this function, i'll handle it in the caller
- type information defined in `@/db/LessonCategories/type.d.tsx`
simple template:
## Implementation Template
```typescript
import { pb } from '@/lib/pb';
import { COL_LESSON_CATEGORIES } from '@/constants';
import { COL_VOCABULARIES } from '@/constants';
import type { Vocabulary, CreateVocabularyProps } from './type.d.tsx';
export async function createLessonCategory(data: CreateFormProps) {
// ...content
// use direct return of pb.collection (e.g. return pb.collection(xxx))
export async function createVocabulary(data: CreateVocabularyProps): Promise<Vocabulary> {
return pb.collection(COL_VOCABULARIES).create(data);
}
```
## Vocabulary-Specific Features
### Field Definitions
```typescript
interface Vocabulary {
term: string;
definition: string;
language: string;
difficulty: 'beginner'|'intermediate'|'advanced';
relatedTerms: string[]; // Array of vocabulary IDs
}
```
### Common Patterns
```typescript
// Search by term
export async function searchVocabularies(term: string) {
return pb.collection(COL_VOCABULARIES)
.getFullList({ filter: `term ~ "${term}"` });
}
// Get by difficulty level
export async function getVocabulariesByDifficulty(level: string) {
return pb.collection(COL_VOCABULARIES)
.getFullList({ filter: `difficulty = "${level}"` });
}
```
## Type Safety
```typescript
// Recommended types to use
type CreateVocabularyProps = Omit<Vocabulary, 'id'|'created'|'updated'>;
type UpdateVocabularyProps = Partial<CreateVocabularyProps>;
```
## Performance Considerations
- Add indexes on: term, language, difficulty
- Consider full-text search for term/definition fields
- Cache frequently accessed vocabulary items
- Batch operations for bulk imports
## Testing Guidelines
Recommended test cases:
- Basic CRUD operations
- Term search functionality
- Difficulty level filtering
- Related terms validation
- Language-specific queries

8
002_source/cms/src/paths.ts
View File

@@ -148,6 +148,14 @@ export const paths = {
// edit: (id: string) => `/dashboard/teachers/edit/${id}`,
},
},
users: {
list: '/dashboard/users/list',
create: '/dashboard/users/create',
view: (id: string) => `/dashboard/users/view/${id}`,
// RULES: details is obsoleted, use view instead
details: (id: string) => `/dashboard/teachers/view/${id}`,
edit: (id: string) => `/dashboard/users/edit/${id}`,
},
students: {
list: '/dashboard/students/list',
create: '/dashboard/students/create',

18
002_source/cms/src/utils/dayjs.ts Normal file
View File

@@ -0,0 +1,18 @@
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import 'dayjs/locale/zh-cn';
dayjs.extend(relativeTime);
dayjs.locale('zh-cn');
export const formatDate = (date: Date | string) => {
return dayjs(date).format('YYYY-MM-DD');
};
export const formatDateTime = (date: Date | string) => {
return dayjs(date).format('YYYY-MM-DD HH:mm:ss');
};
export const formatRelativeTime = (date: Date | string) => {
return dayjs(date).fromNow();
};