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

update customers,

Browse Source
This commit is contained in:
louiscklaw
2025-04-23 02:02:47 +08:00
parent c8d184465a
commit 41cc82d54d
6 changed files with 215 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -96,15 +96,13 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
React.useEffect(() => {
if (!isFirstRun.current) {
isFirstRun.current = true;
} else if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) {
// reset page number as tab changes
setLastListOption(listOption);
setCurrentPage(0);
void reloadRows();
} else {
if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) {
// reset page number as tab changes
setLastListOption(listOption);
setCurrentPage(0);
void reloadRows();
} else {
void reloadRows();
}
void reloadRows();
}
}, [currentPage, rowsPerPage, listOption]);

5
002_source/cms/src/components/dashboard/customer/confirm-delete-modal.tsx
View File

@@ -16,6 +16,7 @@ import { useTranslation } from 'react-i18next';
import { logger } from '@/lib/default-logger';
import { toast } from '@/components/core/toaster';
import { deleteCustomer } from '@/db/Customers/Delete';
export default function ConfirmDeleteModal({
open,
@@ -46,7 +47,9 @@ export default function ConfirmDeleteModal({
function handleUserConfirmDelete(): void {
if (idToDelete) {
setIsDeleteing(true);
deleteQuizLPCategories(idToDelete)
// RULES: delete<CollectionName>
deleteCustomer(idToDelete)
.then(() => {
reloadRows();
handleClose();

227
002_source/cms/src/components/dashboard/customer/customer-create-form.tsx
View File

@@ -29,6 +29,8 @@ import { paths } from '@/paths';
import { logger } from '@/lib/default-logger';
import { Option } from '@/components/core/option';
import { toast } from '@/components/core/toaster';
import { createCustomer } from '@/db/Customers/Create';
import isDevelopment from '@/lib/check-is-development';
function fileToBase64(file: Blob): Promise<string> {
return new Promise((resolve, reject) => {
@@ -67,12 +69,19 @@ type Values = zod.infer<typeof schema>;
const defaultValues = {
avatar: '',
name: '',
email: '',
phone: '',
name: 'new name',
email: '123@123.com',
phone: '91234567',
company: '',
billingAddress: { country: '', state: '', city: '', zipCode: '', line1: '', line2: '' },
taxId: '',
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',
@@ -90,14 +99,15 @@ export function CustomerCreateForm(): React.JSX.Element {
} = useForm<Values>({ defaultValues, resolver: zodResolver(schema) });
const onSubmit = React.useCallback(
async (_: Values): Promise<void> => {
async (values: Values): Promise<void> => {
try {
// Make API request
toast.success('Customer updated');
router.push(paths.dashboard.customers.details('1'));
// Use standard create method from db/Customers/Create
const record = await createCustomer(values);
toast.success('Customer created');
router.push(paths.dashboard.customers.details(record.id));
} catch (err) {
logger.error(err);
toast.error('Something went wrong!');
toast.error('Failed to create customer');
}
},
[router]
@@ -122,12 +132,22 @@ export function CustomerCreateForm(): React.JSX.Element {
<form onSubmit={handleSubmit(onSubmit)}>
<Card>
<CardContent>
<Stack divider={<Divider />} spacing={4}>
<Stack
divider={<Divider />}
spacing={4}
>
<Stack spacing={3}>
<Typography variant="h6">Account information</Typography>
<Grid container spacing={3}>
<Grid
container
spacing={3}
>
<Grid xs={12}>
<Stack direction="row" spacing={3} sx={{ alignItems: 'center' }}>
<Stack
direction="row"
spacing={3}
sx={{ alignItems: 'center' }}
>
<Box
sx={{
border: '1px dashed var(--mui-palette-divider)',
@@ -151,7 +171,10 @@ export function CustomerCreateForm(): React.JSX.Element {
<CameraIcon fontSize="var(--Icon-fontSize)" />
</Avatar>
</Box>
<Stack spacing={1} sx={{ alignItems: 'flex-start' }}>
<Stack
spacing={1}
sx={{ alignItems: 'flex-start' }}
>
<Typography variant="subtitle1">Avatar</Typography>
<Typography variant="caption">Min 400x400px, PNG or JPEG</Typography>
<Button
@@ -163,16 +186,27 @@ export function CustomerCreateForm(): React.JSX.Element {
>
Select
</Button>
<input hidden onChange={handleAvatarChange} ref={avatarInputRef} type="file" />
<input
hidden
onChange={handleAvatarChange}
ref={avatarInputRef}
type="file"
/>
</Stack>
</Stack>
</Grid>
<Grid md={6} xs={12}>
<Grid
md={6}
xs={12}
>
<Controller
control={control}
name="name"
render={({ field }) => (
<FormControl error={Boolean(errors.name)} fullWidth>
<FormControl
error={Boolean(errors.name)}
fullWidth
>
<InputLabel required>Name</InputLabel>
<OutlinedInput {...field} />
{errors.name ? <FormHelperText>{errors.name.message}</FormHelperText> : null}
@@ -180,25 +214,40 @@ export function CustomerCreateForm(): React.JSX.Element {
)}
/>
</Grid>
<Grid md={6} xs={12}>
<Grid
md={6}
xs={12}
>
<Controller
control={control}
name="email"
render={({ field }) => (
<FormControl error={Boolean(errors.email)} fullWidth>
<FormControl
error={Boolean(errors.email)}
fullWidth
>
<InputLabel required>Email address</InputLabel>
<OutlinedInput {...field} type="email" />
<OutlinedInput
{...field}
type="email"
/>
{errors.email ? <FormHelperText>{errors.email.message}</FormHelperText> : null}
</FormControl>
)}
/>
</Grid>
<Grid md={6} xs={12}>
<Grid
md={6}
xs={12}
>
<Controller
control={control}
name="phone"
render={({ field }) => (
<FormControl error={Boolean(errors.phone)} fullWidth>
<FormControl
error={Boolean(errors.phone)}
fullWidth
>
<InputLabel required>Phone number</InputLabel>
<OutlinedInput {...field} />
{errors.phone ? <FormHelperText>{errors.phone.message}</FormHelperText> : null}
@@ -206,12 +255,18 @@ export function CustomerCreateForm(): React.JSX.Element {
)}
/>
</Grid>
<Grid md={6} xs={12}>
<Grid
md={6}
xs={12}
>
<Controller
control={control}
name="company"
render={({ field }) => (
<FormControl error={Boolean(errors.company)} fullWidth>
<FormControl
error={Boolean(errors.company)}
fullWidth
>
<InputLabel>Company</InputLabel>
<OutlinedInput {...field} />
{errors.company ? <FormHelperText>{errors.company.message}</FormHelperText> : null}
@@ -223,13 +278,22 @@ export function CustomerCreateForm(): React.JSX.Element {
</Stack>
<Stack spacing={3}>
<Typography variant="h6">Billing information</Typography>
<Grid container spacing={3}>
<Grid md={6} xs={12}>
<Grid
container
spacing={3}
>
<Grid
md={6}
xs={12}
>
<Controller
control={control}
name="billingAddress.country"
render={({ field }) => (
<FormControl error={Boolean(errors.billingAddress?.country)} fullWidth>
<FormControl
error={Boolean(errors.billingAddress?.country)}
fullWidth
>
<InputLabel required>Country</InputLabel>
<Select {...field}>
<Option value="">Choose a country</Option>
@@ -244,12 +308,18 @@ export function CustomerCreateForm(): React.JSX.Element {
)}
/>
</Grid>
<Grid md={6} xs={12}>
<Grid
md={6}
xs={12}
>
<Controller
control={control}
name="billingAddress.state"
render={({ field }) => (
<FormControl error={Boolean(errors.billingAddress?.state)} fullWidth>
<FormControl
error={Boolean(errors.billingAddress?.state)}
fullWidth
>
<InputLabel required>State</InputLabel>
<OutlinedInput {...field} />
{errors.billingAddress?.state ? (
@@ -259,12 +329,18 @@ export function CustomerCreateForm(): React.JSX.Element {
)}
/>
</Grid>
<Grid md={6} xs={12}>
<Grid
md={6}
xs={12}
>
<Controller
control={control}
name="billingAddress.city"
render={({ field }) => (
<FormControl error={Boolean(errors.billingAddress?.city)} fullWidth>
<FormControl
error={Boolean(errors.billingAddress?.city)}
fullWidth
>
<InputLabel required>City</InputLabel>
<OutlinedInput {...field} />
{errors.billingAddress?.city ? (
@@ -274,12 +350,18 @@ export function CustomerCreateForm(): React.JSX.Element {
)}
/>
</Grid>
<Grid md={6} xs={12}>
<Grid
md={6}
xs={12}
>
<Controller
control={control}
name="billingAddress.zipCode"
render={({ field }) => (
<FormControl error={Boolean(errors.billingAddress?.zipCode)} fullWidth>
<FormControl
error={Boolean(errors.billingAddress?.zipCode)}
fullWidth
>
<InputLabel required>Zip code</InputLabel>
<OutlinedInput {...field} />
{errors.billingAddress?.zipCode ? (
@@ -289,12 +371,18 @@ export function CustomerCreateForm(): React.JSX.Element {
)}
/>
</Grid>
<Grid md={6} xs={12}>
<Grid
md={6}
xs={12}
>
<Controller
control={control}
name="billingAddress.line1"
render={({ field }) => (
<FormControl error={Boolean(errors.billingAddress?.line1)} fullWidth>
<FormControl
error={Boolean(errors.billingAddress?.line1)}
fullWidth
>
<InputLabel required>Address</InputLabel>
<OutlinedInput {...field} />
{errors.billingAddress?.line1 ? (
@@ -304,14 +392,23 @@ export function CustomerCreateForm(): React.JSX.Element {
)}
/>
</Grid>
<Grid md={6} xs={12}>
<Grid
md={6}
xs={12}
>
<Controller
control={control}
name="taxId"
render={({ field }) => (
<FormControl error={Boolean(errors.taxId)} fullWidth>
<FormControl
error={Boolean(errors.taxId)}
fullWidth
>
<InputLabel>Tax ID</InputLabel>
<OutlinedInput {...field} placeholder="e.g EU372054390" />
<OutlinedInput
{...field}
placeholder="e.g EU372054390"
/>
{errors.taxId ? <FormHelperText>{errors.taxId.message}</FormHelperText> : null}
</FormControl>
)}
@@ -321,17 +418,29 @@ export function CustomerCreateForm(): React.JSX.Element {
</Stack>
<Stack spacing={3}>
<Typography variant="h6">Shipping information</Typography>
<FormControlLabel control={<Checkbox defaultChecked />} label="Same as billing address" />
<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}>
<Grid
container
spacing={3}
>
<Grid
md={6}
xs={12}
>
<Controller
control={control}
name="timezone"
render={({ field }) => (
<FormControl error={Boolean(errors.timezone)} fullWidth>
<FormControl
error={Boolean(errors.timezone)}
fullWidth
>
<InputLabel required>Timezone</InputLabel>
<Select {...field}>
<Option value="">Select a timezone</Option>
@@ -344,12 +453,18 @@ export function CustomerCreateForm(): React.JSX.Element {
)}
/>
</Grid>
<Grid md={6} xs={12}>
<Grid
md={6}
xs={12}
>
<Controller
control={control}
name="language"
render={({ field }) => (
<FormControl error={Boolean(errors.language)} fullWidth>
<FormControl
error={Boolean(errors.language)}
fullWidth
>
<InputLabel required>Language</InputLabel>
<Select {...field}>
<Option value="">Select a language</Option>
@@ -362,12 +477,18 @@ export function CustomerCreateForm(): React.JSX.Element {
)}
/>
</Grid>
<Grid md={6} xs={12}>
<Grid
md={6}
xs={12}
>
<Controller
control={control}
name="currency"
render={({ field }) => (
<FormControl error={Boolean(errors.currency)} fullWidth>
<FormControl
error={Boolean(errors.currency)}
fullWidth
>
<InputLabel>Currency</InputLabel>
<Select {...field}>
<Option value="">Select a currency</Option>
@@ -385,14 +506,24 @@ export function CustomerCreateForm(): React.JSX.Element {
</Stack>
</CardContent>
<CardActions sx={{ justifyContent: 'flex-end' }}>
<Button color="secondary" component={RouterLink} href={paths.dashboard.customers.list}>
<Button
color="secondary"
component={RouterLink}
href={paths.dashboard.customers.list}
>
Cancel
</Button>
<Button type="submit" variant="contained">
<Button
type="submit"
variant="contained"
>
Create customer
</Button>
</CardActions>
</Card>
<Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
<pre>{JSON.stringify({ errors }, null, 2)}</pre>
</Box>
</form>
);
}

5
002_source/cms/src/components/dashboard/customer/customer-edit-form.tsx
View File

@@ -46,7 +46,7 @@ import isDevelopment from '@/lib/check-is-development';
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(15),
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),
@@ -596,6 +596,9 @@ export function CustomerEditForm(): React.JSX.Element {
</LoadingButton>
</CardActions>
</Card>
<Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
<pre>{JSON.stringify({ errors }, null, 2)}</pre>
</Box>
</form>
);
}

19
002_source/cms/src/components/dashboard/customer/type.d.tsx
View File

@@ -16,11 +16,24 @@ export interface Customer {
export interface CreateFormProps {
name: string;
avatar?: string;
email: string;
phone?: string;
quota: number;
status: 'pending' | 'active' | 'blocked';
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 {

7
002_source/cms/src/db/Customers/Create.tsx
View File

@@ -1,6 +1,11 @@
// api method for crate customer record
// RULES:
// TBA
import { pb } from '@/lib/pb';
import { COL_CUSTOMERS } from '@/constants';
import type { CreateFormProps } from '@/components/dashboard/customer/type.d';
import type { RecordModel } from 'pocketbase';
export async function createCustomer(data) {
export async function createCustomer(data: CreateFormProps): Promise<RecordModel> {
return pb.collection(COL_CUSTOMERS).create(data);
}