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-04-26 06:15:18 +08:00
parent df87cfb037
commit 6e8fea3bdd
57 changed files with 1392 additions and 20183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
002_source/cms/src/app/dashboard/lesson_categories/edit/[cat_id]/_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,

45
002_source/cms/src/app/dashboard/teachers/list/page.tsx
View File

@@ -44,7 +44,6 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
const { email, phone, sortDir, status } = searchParams;
const [lessonCategoriesData, setLessonCategoriesData] = React.useState<Teacher[]>([]);
//
const [isLoadingAddPage, setIsLoadingAddPage] = React.useState<boolean>(false);
const [showLoading, setShowLoading] = React.useState<boolean>(true);
@@ -73,12 +72,9 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
setLessonCategoriesData(tempLessonTypes);
setRecordCount(totalItems);
setF(tempLessonTypes);
// console.log({ currentPage, f });
} catch (error) {
//
logger.error(error);
setShowError({
//
show: true,
detail: JSON.stringify(error, null, 2),
});
@@ -129,11 +125,6 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
preFinalListOption = { ...preFinalListOption, sort: tempSortDir };
}
setListOption(preFinalListOption);
// setListOption({
// filter: tempFilter.join(' && '),
// sort: tempSortDir,
// //
// });
}, [sortDir, email, phone, status]);
if (showLoading) return <FormLoading />;
@@ -211,42 +202,6 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
);
}
// Sorting and filtering has to be done on the server.
function applySort(row: Teacher[], sortDir: 'asc' | 'desc' | undefined): Teacher[] {
return row.sort((a, b) => {
if (sortDir === 'asc') {
return a.createdAt.getTime() - b.createdAt.getTime();
}
return b.createdAt.getTime() - a.createdAt.getTime();
});
}
function applyFilters(row: Teacher[], { email, phone, status }: Filters): Teacher[] {
return row.filter((item) => {
if (email) {
if (!item.email?.toLowerCase().includes(email.toLowerCase())) {
return false;
}
}
if (phone) {
if (!item.phone?.toLowerCase().includes(phone.toLowerCase())) {
return false;
}
}
if (status) {
if (item.status !== status) {
return false;
}
}
return true;
});
}
interface PageProps {
searchParams: { email?: string; phone?: string; sortDir?: 'asc' | 'desc'; status?: string };
}

10
002_source/cms/src/app/dashboard/vocabularies/create/page.tsx
View File

@@ -10,7 +10,7 @@ import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/Arrow
import { useTranslation } from 'react-i18next';
import { paths } from '@/paths';
import { LessonCategoryCreateForm } from '@/components/dashboard/lesson_category/lesson-category-create-form';
import { VocabularyCreateForm } from '@/components/dashboard/vocabulary/vocabulary-create-form';
export default function Page(): React.JSX.Element {
const { t } = useTranslation();
@@ -29,19 +29,19 @@ export default function Page(): React.JSX.Element {
<Link
color="text.primary"
component={RouterLink}
href={paths.dashboard.lesson_categories.list}
href={paths.dashboard.vocabularies.list}
sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
variant="subtitle2"
>
<ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
{t('title', { ns: 'lesson_category' })}
{t('title',)}
</Link>
</div>
<div>
<Typography variant="h4">{t('create.title', { ns: 'lesson_category' })}</Typography>
<Typography variant="h4">{t('create.title', )}</Typography>
</div>
</Stack>
<LessonCategoryCreateForm />
<VocabularyCreateForm />
</Stack>
</Box>
);

11
002_source/cms/src/app/dashboard/vocabularies/edit/[cat_id]/_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,

12
002_source/cms/src/app/dashboard/vocabularies/edit/[cat_id]/page.tsx
View File

@@ -10,10 +10,10 @@ import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/Arrow
import { useTranslation } from 'react-i18next';
import { paths } from '@/paths';
import { LessonCategoryEditForm } from '@/components/dashboard/lesson_category/lesson-category-edit-form';
import { VocabularyEditForm } from '@/components/dashboard/vocabulary/vocabulary-edit-form';
export default function Page(): React.JSX.Element {
const { t } = useTranslation(['lesson_category']);
const { t } = useTranslation();
return (
<Box
@@ -30,19 +30,19 @@ export default function Page(): React.JSX.Element {
<Link
color="text.primary"
component={RouterLink}
href={paths.dashboard.lesson_categories.list}
href={paths.dashboard.vocabularies.list}
sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
variant="subtitle2"
>
<ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
{t('edit.title', { ns: 'lesson_category' })}
{t('edit.title')}
</Link>
</div>
<div>
<Typography variant="h4">{t('edit.title', { ns: 'lesson_category' })}</Typography>
<Typography variant="h4">{t('edit.title')}</Typography>
</div>
</Stack>
<LessonCategoryEditForm />
<VocabularyEditForm />
</Stack>
</Box>
);

172
002_source/cms/src/app/dashboard/vocabularies/list/page.tsx
View File

@@ -1,12 +1,11 @@
'use client';
// RULES:
// contains list page for lesson_categories (LessonCategories)
// contain definition to collection only
// contains list page for vocabularies (Vocabularies)
//
import * as React from 'react';
import { useRouter } from 'next/navigation';
import { COL_LESSON_CATEGORIES } from '@/constants';
import { COL_VOCABULARIES } from '@/constants';
import { LoadingButton } from '@mui/lab';
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
@@ -21,25 +20,25 @@ import { paths } from '@/paths';
import isDevelopment from '@/lib/check-is-development';
import { logger } from '@/lib/default-logger';
import { pb } from '@/lib/pb';
import { toast } from '@/components/core/toaster';
// import { toast } from '@/components/core/toaster';
import ErrorDisplay from '@/components/dashboard/error';
import { defaultLessonCategory } from '@/components/dashboard/lesson_category/_constants';
import { LessonCategoriesFilters } from '@/components/dashboard/lesson_category/lesson-categories-filters';
import type { Filters } from '@/components/dashboard/lesson_category/lesson-categories-filters';
import { LessonCategoriesPagination } from '@/components/dashboard/lesson_category/lesson-categories-pagination';
import { LessonCategoriesSelectionProvider } from '@/components/dashboard/lesson_category/lesson-categories-selection-context';
import { LessonCategoriesTable } from '@/components/dashboard/lesson_category/lesson-categories-table';
import type { LessonCategory } from '@/components/dashboard/lesson_category/type';
// import type { LessonCategory } from '@/components/dashboard/lp_categories/type';
import { defaultVocabulary } from '@/components/dashboard/vocabulary/_constants';
import { VocabulariesFilters } from '@/components/dashboard/vocabulary/vocabularies-filters';
import type { Filters } from '@/components/dashboard/vocabulary/vocabularies-filters';
import { VocabulariesPagination } from '@/components/dashboard/vocabulary/vocabularies-pagination';
import { VocabulariesSelectionProvider } from '@/components/dashboard/vocabulary/vocabularies-selection-context';
import { VocabulariesTable } from '@/components/dashboard/vocabulary/vocabularies-table';
import type { Vocabulary } from '@/components/dashboard/vocabulary/type';
// import type { Vocabulary } from '@/components/dashboard/lp_categories/type';
import FormLoading from '@/components/loading';
// import { lessonCategoriesSampleData } from './lesson-categories-sample-data';
export default function Page({ searchParams }: PageProps): React.JSX.Element {
const { t } = useTranslation(['lesson_category']);
const { t } = useTranslation();
const { email, phone, sortDir, status, name, visible, type } = searchParams;
const router = useRouter();
const [lessonCategoriesData, setLessonCategoriesData] = React.useState<LessonCategory[]>([]);
const [lessonCategoriesData, setLessonCategoriesData] = React.useState<Vocabulary[]>([]);
//
const [isLoadingAddPage, setIsLoadingAddPage] = React.useState<boolean>(false);
@@ -48,69 +47,39 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
//
const [rowsPerPage, setRowsPerPage] = React.useState<number>(5);
//
const [f, setF] = React.useState<LessonCategory[]>([]);
const [f, setF] = React.useState<Vocabulary[]>([]);
const [currentPage, setCurrentPage] = React.useState<number>(1);
//
const [recordCount, setRecordCount] = React.useState<number>(0);
const [listOption, setListOption] = React.useState({});
const [listSort, setListSort] = React.useState({});
//
const sortedLessonCategories = applySort(lessonCategoriesData, sortDir);
const filteredLessonCategories = applyFilters(sortedLessonCategories, { email, phone, status });
//
const reloadRows = async (): Promise<void> => {
try {
const models: ListResult<RecordModel> = await pb
.collection(COL_LESSON_CATEGORIES)
.getList(currentPage + 1, rowsPerPage, listOption);
const { items, totalItems } = models;
const tempLessonTypes: LessonCategory[] = items.map((lt) => {
return { ...defaultLessonCategory, ...lt };
const models: ListResult<RecordModel> = await pb.collection(COL_VOCABULARIES).getList(1, 5, {
expand: 'cat_id',
});
setLessonCategoriesData(tempLessonTypes);
const { items, totalItems } = models;
const tempVocabularies: Vocabulary[] = items.map((v) => {
return { ...defaultVocabulary, ...v };
});
setLessonCategoriesData(tempVocabularies);
setRecordCount(totalItems);
setF(tempLessonTypes);
setF(tempVocabularies);
// console.log({ currentPage, f });
} catch (error) {
//
logger.error(error);
setShowError({
//
show: true,
detail: JSON.stringify(error, null, 2),
});
} finally {
setShowLoading(false);
}
// pb.collection(COL_LESSON_CATEGORIES)
// .getList(currentPage, rowsPerPage, listOption)
// .then((lessonCategories: ListResult<RecordModel>) => {
// // console.log(lessonTypes);
// const { items, page, perPage, totalItems, totalPages } = lessonCategories;
// const tempLessonCategories: LessonCategory[] = items.map((item) => {
// return { ...defaultLessonCategory, ...item };
// });
// setLessonCategoriesData(tempLessonCategories);
// setRecordCount(totalItems);
// setF(tempLessonCategories);
// // console.log({ currentPage, f });
// })
// .catch((error) => {
// logger.error(error);
// setShowError({
// //
// show: true,
// detail: JSON.stringify(error, null, 2),
// });
// })
// .finally(() => {
// setShowLoading(false);
// });
};
const [lastListOption, setLastListOption] = React.useState({});
@@ -156,11 +125,6 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
preFinalListOption = { ...preFinalListOption, sort: tempSortDir };
}
setListOption(preFinalListOption);
// setListOption({
// filter: tempFilter.join(' && '),
// sort: tempSortDir,
// //
// });
}, [visible, sortDir, name, type]);
// return <>helloworld</>;
@@ -199,7 +163,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
loading={isLoadingAddPage}
onClick={(): void => {
setIsLoadingAddPage(true);
router.push(paths.dashboard.lesson_categories.create);
router.push(paths.dashboard.vocabularies.create);
}}
startIcon={<PlusIcon />}
variant="contained"
@@ -209,22 +173,22 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
</LoadingButton>
</Box>
</Stack>
<LessonCategoriesSelectionProvider lessonCategories={f}>
<VocabulariesSelectionProvider lessonCategories={f}>
<Card>
<LessonCategoriesFilters
<VocabulariesFilters
filters={{ email, phone, status, name, visible, type }}
fullData={lessonCategoriesData}
sortDir={sortDir}
/>
<Divider />
<Box sx={{ overflowX: 'auto' }}>
<LessonCategoriesTable
<VocabulariesTable
reloadRows={reloadRows}
rows={f}
/>
</Box>
<Divider />
<LessonCategoriesPagination
<VocabulariesPagination
count={recordCount}
page={currentPage}
rowsPerPage={rowsPerPage}
@@ -232,7 +196,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
setRowsPerPage={setRowsPerPage}
/>
</Card>
</LessonCategoriesSelectionProvider>
</VocabulariesSelectionProvider>
</Stack>
<Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
<pre>{JSON.stringify(f, null, 2)}</pre>
@@ -243,51 +207,51 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
// Sorting and filtering has to be done on the server.
function applySort(row: LessonCategory[], sortDir: 'asc' | 'desc' | undefined): LessonCategory[] {
return row.sort((a, b) => {
if (sortDir === 'asc') {
return a.createdAt.getTime() - b.createdAt.getTime();
}
// function applySort(row: Vocabulary[], sortDir: 'asc' | 'desc' | undefined): Vocabulary[] {
// return row.sort((a, b) => {
// if (sortDir === 'asc') {
// return a.createdAt.getTime() - b.createdAt.getTime();
// }
return b.createdAt.getTime() - a.createdAt.getTime();
});
}
// return b.createdAt.getTime() - a.createdAt.getTime();
// });
// }
function applyFilters(row: LessonCategory[], { email, phone, status, name, visible }: Filters): LessonCategory[] {
return row.filter((item) => {
if (email) {
if (!item.email?.toLowerCase().includes(email.toLowerCase())) {
return false;
}
}
// function applyFilters(row: Vocabulary[], { email, phone, status, name, visible }: Filters): Vocabulary[] {
// return row.filter((item) => {
// if (email) {
// if (!item.email?.toLowerCase().includes(email.toLowerCase())) {
// return false;
// }
// }
if (phone) {
if (!item.phone?.toLowerCase().includes(phone.toLowerCase())) {
return false;
}
}
// if (phone) {
// if (!item.phone?.toLowerCase().includes(phone.toLowerCase())) {
// return false;
// }
// }
if (status) {
if (item.status !== status) {
return false;
}
}
// if (status) {
// if (item.status !== status) {
// return false;
// }
// }
if (name) {
if (!item.name?.toLowerCase().includes(name.toLowerCase())) {
return false;
}
}
// if (name) {
// if (!item.name?.toLowerCase().includes(name.toLowerCase())) {
// return false;
// }
// }
if (visible) {
if (!item.visible?.toLowerCase().includes(visible.toLowerCase())) {
return false;
}
}
// if (visible) {
// if (!item.visible?.toLowerCase().includes(visible.toLowerCase())) {
// return false;
// }
// }
return true;
});
}
// return true;
// });
// }
interface PageProps {
searchParams: {

169
002_source/cms/src/app/dashboard/vocabularies/view/[cat_id]/page.tsx
View File

@@ -4,7 +4,7 @@ import * as React from 'react';
// import type { Metadata } from 'next';
import RouterLink from 'next/link';
import { useParams, useRouter } from 'next/navigation';
import { COL_LESSON_CATEGORIES } from '@/constants';
import { COL_VOCABULARIES } from '@/constants';
import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
@@ -28,7 +28,7 @@ import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr
import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
import { ShieldWarning as ShieldWarningIcon } from '@phosphor-icons/react/dist/ssr/ShieldWarning';
import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
import { RecordModel } from 'pocketbase';
import type { RecordModel } from 'pocketbase';
import { useTranslation } from 'react-i18next';
import { paths } from '@/paths';
@@ -39,14 +39,12 @@ import { PropertyItem } from '@/components/core/property-item';
import { PropertyList } from '@/components/core/property-list';
import { toast } from '@/components/core/toaster';
import ErrorDisplay from '@/components/dashboard/error';
import { defaultLessonCategory } from '@/components/dashboard/lesson_category/_constants.ts';
// import { defaultLessonCategory } from '@/components/dashboard/lesson_category/defaultLessonCategory';
import { Notifications } from '@/components/dashboard/lesson_category/notifications';
import { Payments } from '@/components/dashboard/lesson_category/payments';
import type { Address } from '@/components/dashboard/lesson_category/shipping-address';
import { ShippingAddress } from '@/components/dashboard/lesson_category/shipping-address';
import { LessonCategory } from '@/components/dashboard/lesson_category/type';
// import type { LessonCategory } from '@/components/dashboard/lp_categories/type';
import { defaultVocabulary } from '@/components/dashboard/vocabulary/_constants.ts';
import { Notifications } from '@/components/dashboard/vocabulary/notifications';
import { Payments } from '@/components/dashboard/vocabulary/payments';
import type { Address } from '@/components/dashboard/vocabulary/shipping-address';
import { ShippingAddress } from '@/components/dashboard/vocabulary/shipping-address';
import type { Vocabulary } from '@/components/dashboard/vocabulary/type';
import FormLoading from '@/components/loading';
// export const metadata = { title: `Details | Customers | Dashboard | ${config.site.name}` } satisfies Metadata;
@@ -60,18 +58,18 @@ export default function Page(): React.JSX.Element {
const [showLoading, setShowLoading] = React.useState<boolean>(true);
const [showError, setShowError] = React.useState<boolean>(false);
//
const [showLessonCategory, setShowLessonCategory] = React.useState<LessonCategory>(defaultLessonCategory);
const [showLessonCategory, setShowLessonCategory] = React.useState<Vocabulary>(defaultVocabulary);
function handleEditClick() {
router.push(paths.dashboard.lesson_categories.edit(showLessonCategory.id));
router.push(paths.dashboard.vocabularies.edit(showLessonCategory.id));
}
React.useEffect(() => {
if (catId) {
pb.collection(COL_LESSON_CATEGORIES)
pb.collection(COL_VOCABULARIES)
.getOne(catId)
.then((model: RecordModel) => {
setShowLessonCategory({ ...defaultLessonCategory, ...model });
setShowLessonCategory({ ...defaultVocabulary, ...model });
})
.catch((err) => {
logger.error(err);
@@ -111,7 +109,7 @@ export default function Page(): React.JSX.Element {
<Link
color="text.primary"
component={RouterLink}
href={paths.dashboard.lesson_categories.list}
href={paths.dashboard.vocabularies.list}
sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
variant="subtitle2"
>
@@ -119,8 +117,16 @@ export default function Page(): React.JSX.Element {
{t('dashboard.lessonCategorys.list.title')}
</Link>
</div>
<Stack direction={{ xs: 'column', sm: 'row' }} spacing={3} sx={{ alignItems: 'flex-start' }}>
<Stack direction="row" spacing={2} sx={{ alignItems: 'center', flex: '1 1 auto' }}>
<Stack
direction={{ xs: 'column', sm: 'row' }}
spacing={3}
sx={{ alignItems: 'flex-start' }}
>
<Stack
direction="row"
spacing={2}
sx={{ alignItems: 'center', flex: '1 1 auto' }}
>
<Avatar
src={`http://127.0.0.1:8090/api/files/${showLessonCategory.collectionId}/${showLessonCategory.id}/${showLessonCategory.cat_image}`}
sx={{ '--Avatar-size': '64px' }}
@@ -129,29 +135,50 @@ export default function Page(): React.JSX.Element {
empty
</Avatar>
<div>
<Stack direction="row" spacing={2} sx={{ alignItems: 'center', flexWrap: 'wrap' }}>
<Stack
direction="row"
spacing={2}
sx={{ alignItems: 'center', flexWrap: 'wrap' }}
>
<Typography variant="h4">{showLessonCategory.name}</Typography>
<Chip
icon={<CheckCircleIcon color="var(--mui-palette-success-main)" weight="fill" />}
icon={
<CheckCircleIcon
color="var(--mui-palette-success-main)"
weight="fill"
/>
}
label={showLessonCategory.visible}
size="small"
variant="outlined"
/>
</Stack>
<Typography color="text.secondary" variant="body1">
<Typography
color="text.secondary"
variant="body1"
>
{showLessonCategory.id}
</Typography>
</div>
</Stack>
<div>
<Button endIcon={<CaretDownIcon />} variant="contained">
<Button
endIcon={<CaretDownIcon />}
variant="contained"
>
Action
</Button>
</div>
</Stack>
</Stack>
<Grid container spacing={4}>
<Grid lg={4} xs={12}>
<Grid
container
spacing={4}
>
<Grid
lg={4}
xs={12}
>
<Stack spacing={4}>
<Card>
<CardHeader
@@ -169,7 +196,7 @@ export default function Page(): React.JSX.Element {
<UserIcon fontSize="var(--Icon-fontSize)" />
</Avatar>
}
title={t('basic-details', { ns: 'lesson_category' })}
title={t('basic-details')}
/>
<PropertyList
divider={<Divider />}
@@ -178,8 +205,17 @@ export default function Page(): React.JSX.Element {
>
{(
[
{ key: 'Customer ID', value: <Chip label={showLessonCategory.id} size="small" variant="soft" /> },
{ key: 'Name', value: showLessonCategory.name },
{
key: 'word',
value: (
<Chip
label={showLessonCategory.word}
size="small"
variant="soft"
/>
),
},
{ key: 'word_c', value: showLessonCategory.word_c },
{ key: 'Pos', value: showLessonCategory.pos },
{
key: 'Visible',
@@ -195,9 +231,20 @@ export default function Page(): React.JSX.Element {
{
key: 'Quota',
value: (
<Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
<LinearProgress sx={{ flex: '1 1 auto' }} value={50} variant="determinate" />
<Typography color="text.secondary" variant="body2">
<Stack
direction="row"
spacing={2}
sx={{ alignItems: 'center' }}
>
<LinearProgress
sx={{ flex: '1 1 auto' }}
value={50}
variant="determinate"
/>
<Typography
color="text.secondary"
variant="body2"
>
50%
</Typography>
</Stack>
@@ -206,7 +253,11 @@ export default function Page(): React.JSX.Element {
] satisfies { key: string; value: React.ReactNode }[]
).map(
(item): React.JSX.Element => (
<PropertyItem key={item.key} name={item.key} value={item.value} />
<PropertyItem
key={item.key}
name={item.key}
value={item.value}
/>
)
)}
</PropertyList>
@@ -218,16 +269,22 @@ export default function Page(): React.JSX.Element {
<ShieldWarningIcon fontSize="var(--Icon-fontSize)" />
</Avatar>
}
title={t('security', { ns: 'lesson_category' })}
title={t('security')}
/>
<CardContent>
<Stack spacing={1}>
<div>
<Button color="error" variant="contained">
<Button
color="error"
variant="contained"
>
Delete account
</Button>
</div>
<Typography color="text.secondary" variant="body2">
<Typography
color="text.secondary"
variant="body2"
>
A deleted lesson category cannot be restored. All data will be permanently removed.
</Typography>
</Stack>
@@ -235,7 +292,10 @@ export default function Page(): React.JSX.Element {
</Card>
</Stack>
</Grid>
<Grid lg={8} xs={12}>
<Grid
lg={8}
xs={12}
>
<Stack spacing={4}>
<Payments
ordersValue={2069.48}
@@ -282,7 +342,10 @@ export default function Page(): React.JSX.Element {
<Card>
<CardHeader
action={
<Button color="secondary" startIcon={<PencilSimpleIcon />}>
<Button
color="secondary"
startIcon={<PencilSimpleIcon />}
>
Edit
</Button>
}
@@ -291,11 +354,17 @@ export default function Page(): React.JSX.Element {
<CreditCardIcon fontSize="var(--Icon-fontSize)" />
</Avatar>
}
title={t('billing-details', { ns: 'lesson_category' })}
title={t('billing-details')}
/>
<CardContent>
<Card sx={{ borderRadius: 1 }} variant="outlined">
<PropertyList divider={<Divider />} sx={{ '--PropertyItem-padding': '16px' }}>
<Card
sx={{ borderRadius: 1 }}
variant="outlined"
>
<PropertyList
divider={<Divider />}
sx={{ '--PropertyItem-padding': '16px' }}
>
{(
[
{ key: 'Credit card', value: '**** 4142' },
@@ -307,7 +376,11 @@ export default function Page(): React.JSX.Element {
] satisfies { key: string; value: React.ReactNode }[]
).map(
(item): React.JSX.Element => (
<PropertyItem key={item.key} name={item.key} value={item.value} />
<PropertyItem
key={item.key}
name={item.key}
value={item.value}
/>
)
)}
</PropertyList>
@@ -317,7 +390,10 @@ export default function Page(): React.JSX.Element {
<Card>
<CardHeader
action={
<Button color="secondary" startIcon={<PlusIcon />}>
<Button
color="secondary"
startIcon={<PlusIcon />}
>
Add
</Button>
}
@@ -326,10 +402,13 @@ export default function Page(): React.JSX.Element {
<HouseIcon fontSize="var(--Icon-fontSize)" />
</Avatar>
}
title={t('shipping-addresses', { ns: 'lesson_category' })}
title={t('shipping-addresses')}
/>
<CardContent>
<Grid container spacing={3}>
<Grid
container
spacing={3}
>
{(
[
{
@@ -351,7 +430,11 @@ export default function Page(): React.JSX.Element {
},
] satisfies Address[]
).map((address) => (
<Grid key={address.id} md={6} xs={12}>
<Grid
key={address.id}
md={6}
xs={12}
>
<ShippingAddress address={address} />
</Grid>
))}