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

build cms ok,

Browse Source
This commit is contained in:
louiscklaw
2025-05-23 17:16:47 +08:00
parent 50fc385c2b
commit a94ead44ba
41 changed files with 395 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
002_source/cms/src/components/auth/custom/oAuthProviders.tsx → 002_source/cms/src/components/auth/custom/o-auth-providers.tsx
View File

2
002_source/cms/src/components/auth/custom/sign-in-form/index.tsx
View File

@@ -31,8 +31,8 @@ import { useUser } from '@/hooks/use-user';
import { DynamicLogo } from '@/components/core/logo';
import { toast } from '@/components/core/toaster';
import { oAuthProviders } from '../o-auth-providers.tsx';
import type { OAuthProvider } from '../OAuthProvider';
import { oAuthProviders } from '../oAuthProviders';
// interface OAuthProvider {
// id: 'google' | 'discord' | 'github';

4
002_source/cms/src/components/auth/custom/sign-up-form/index.tsx
View File

@@ -30,8 +30,8 @@ import { useUser } from '@/hooks/use-user';
import { DynamicLogo } from '@/components/core/logo';
import { toast } from '@/components/core/toaster';
import { oAuthProviders } from '../o-auth-providers.tsx';
import type { OAuthProvider } from '../OAuthProvider';
import { oAuthProviders } from '../oAuthProviders';
export function SignUpForm(): React.JSX.Element {
const router = useRouter();
@@ -195,7 +195,7 @@ export function SignUpForm(): React.JSX.Element {
<InputLabel>{t('email-address')}:</InputLabel>
<OutlinedInput
{...field}
placeholder={`${t('e.g.') } name@example.com`}
placeholder={`${t('e.g.')} name@example.com`}
type="email"
disabled={isPending}
/>

30
002_source/cms/src/components/dashboard/blog/comment-add.tsx
View File

@@ -16,16 +16,36 @@ const user = {
name: 'Sofia Rivers',
avatar: '/assets/avatar.png',
email: 'sofia@devias.io',
collectionId: '123321',
} satisfies User;
export function CommentAdd(): React.JSX.Element {
return (
<Stack direction="row" spacing={2} sx={{ alignItems: 'flex-start' }}>
<Stack
direction="row"
spacing={2}
sx={{ alignItems: 'flex-start' }}
>
<Avatar src={user.avatar} />
<Stack spacing={3} sx={{ flex: '1 1 auto' }}>
<OutlinedInput multiline placeholder="Add a comment" rows={3} />
<Stack direction="row" spacing={3} sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
<Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
<Stack
spacing={3}
sx={{ flex: '1 1 auto' }}
>
<OutlinedInput
multiline
placeholder="Add a comment"
rows={3}
/>
<Stack
direction="row"
spacing={3}
sx={{ alignItems: 'center', justifyContent: 'space-between' }}
>
<Stack
direction="row"
spacing={1}
sx={{ alignItems: 'center' }}
>
<IconButton sx={{ display: { sm: 'none' } }}>
<PlusIcon />
</IconButton>

42
002_source/cms/src/components/dashboard/chat/message-add.tsx
View File

@@ -19,6 +19,7 @@ const user = {
name: 'Sofia Rivers',
avatar: '/assets/avatar.png',
email: 'sofia@devias.io',
collectionId: '123321',
} satisfies User;
export interface MessageAddProps {
@@ -57,8 +58,15 @@ export function MessageAdd({ disabled = false, onSend }: MessageAddProps): React
);
return (
<Stack direction="row" spacing={2} sx={{ alignItems: 'center', flex: '0 0 auto', px: 3, py: 1 }}>
<Avatar src={user.avatar} sx={{ display: { xs: 'none', sm: 'inline' } }} />
<Stack
direction="row"
spacing={2}
sx={{ alignItems: 'center', flex: '0 0 auto', px: 3, py: 1 }}
>
<Avatar
src={user.avatar}
sx={{ display: { xs: 'none', sm: 'inline' } }}
/>
<OutlinedInput
disabled={disabled}
onChange={handleChange}
@@ -67,7 +75,11 @@ export function MessageAdd({ disabled = false, onSend }: MessageAddProps): React
sx={{ flex: '1 1 auto' }}
value={content}
/>
<Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
<Stack
direction="row"
spacing={1}
sx={{ alignItems: 'center' }}
>
<Tooltip title="Send">
<span>
<IconButton
@@ -84,24 +96,40 @@ export function MessageAdd({ disabled = false, onSend }: MessageAddProps): React
</IconButton>
</span>
</Tooltip>
<Stack direction="row" spacing={1} sx={{ display: { xs: 'none', sm: 'flex' } }}>
<Stack
direction="row"
spacing={1}
sx={{ display: { xs: 'none', sm: 'flex' } }}
>
<Tooltip title="Attach photo">
<span>
<IconButton disabled={disabled} edge="end" onClick={handleAttach}>
<IconButton
disabled={disabled}
edge="end"
onClick={handleAttach}
>
<CameraIcon />
</IconButton>
</span>
</Tooltip>
<Tooltip title="Attach file">
<span>
<IconButton disabled={disabled} edge="end" onClick={handleAttach}>
<IconButton
disabled={disabled}
edge="end"
onClick={handleAttach}
>
<PaperclipIcon />
</IconButton>
</span>
</Tooltip>
</Stack>
</Stack>
<input hidden ref={fileInputRef} type="file" />
<input
hidden
ref={fileInputRef}
type="file"
/>
</Stack>
);
}

28
002_source/cms/src/components/dashboard/chat/message-box.tsx
View File

@@ -17,6 +17,7 @@ const user = {
name: 'Sofia Rivers',
avatar: '/assets/avatar.png',
email: 'sofia@devias.io',
collectionId: '123321',
} satisfies User;
export interface MessageBoxProps {
@@ -38,8 +39,14 @@ export function MessageBox({ message }: MessageBoxProps): React.JSX.Element {
mr: position === 'left' ? 'auto' : 0,
}}
>
<Avatar src={message.author.avatar} sx={{ '--Avatar-size': '32px' }} />
<Stack spacing={1} sx={{ flex: '1 1 auto' }}>
<Avatar
src={message.author.avatar}
sx={{ '--Avatar-size': '32px' }}
/>
<Stack
spacing={1}
sx={{ flex: '1 1 auto' }}
>
<Card
sx={{
px: 2,
@@ -52,7 +59,11 @@ export function MessageBox({ message }: MessageBoxProps): React.JSX.Element {
>
<Stack spacing={1}>
<div>
<Link color="inherit" sx={{ cursor: 'pointer' }} variant="subtitle2">
<Link
color="inherit"
sx={{ cursor: 'pointer' }}
variant="subtitle2"
>
{message.author.name}
</Link>
</div>
@@ -66,14 +77,21 @@ export function MessageBox({ message }: MessageBoxProps): React.JSX.Element {
/>
) : null}
{message.type === 'text' ? (
<Typography color="inherit" variant="body1">
<Typography
color="inherit"
variant="body1"
>
{message.content}
</Typography>
) : null}
</Stack>
</Card>
<Box sx={{ display: 'flex', justifyContent: position === 'right' ? 'flex-end' : 'flex-start', px: 2 }}>
<Typography color="text.secondary" noWrap variant="caption">
<Typography
color="text.secondary"
noWrap
variant="caption"
>
{dayjs(message.createdAt).fromNow()}
</Typography>
</Box>

38
002_source/cms/src/components/dashboard/layout/horizontal/main-nav/index.tsx
View File

@@ -3,6 +3,7 @@
import * as React from 'react';
import RouterLink from 'next/link';
import { usePathname } from 'next/navigation';
import { MarkOneAsRead } from '@/db/Notifications/mark-one-as-read';
import Avatar from '@mui/material/Avatar';
import Badge from '@mui/material/Badge';
import Box from '@mui/material/Box';
@@ -25,6 +26,7 @@ import type { NavItemConfig } from '@/types/nav';
import type { NavColor } from '@/types/settings';
import type { User } from '@/types/user';
import { paths } from '@/paths';
import { logger } from '@/lib/default-logger';
import { isNavItemActive } from '@/lib/is-nav-item-active';
import { useDialog } from '@/hooks/use-dialog';
import { usePopover } from '@/hooks/use-popover';
@@ -33,6 +35,7 @@ import { Dropdown } from '@/components/core/dropdown/dropdown';
import { DropdownPopover } from '@/components/core/dropdown/dropdown-popover';
import { DropdownTrigger } from '@/components/core/dropdown/dropdown-trigger';
import { Logo } from '@/components/core/logo';
import { toast } from '@/components/core/toaster';
import { SearchDialog } from '@/components/dashboard/layout/search-dialog';
import type { ColorScheme } from '@/styles/theme/types';
@@ -183,6 +186,29 @@ function SearchButton(): React.JSX.Element {
function NotificationsButton(): React.JSX.Element {
const popover = usePopover<HTMLButtonElement>();
const [listLength, setListLength] = React.useState<number>(0);
function handleMarkAllAsRead(): void {
// try {
// await MarkOneAsRead(id);
// toast.success('Notification marked as read');
// } catch (error) {
// logger.debug(error);
// toast.error('Something went wrong');
// }
}
function handleRemoveOne(id: string, cb: () => void): void {
MarkOneAsRead(id)
.then(() => {
toast.success('Notification marked as read');
cb();
})
.catch((error) => {
logger.debug(error);
toast.error('Something went wrong');
});
}
return (
<React.Fragment>
@@ -190,15 +216,14 @@ function NotificationsButton(): React.JSX.Element {
<Badge
color="error"
sx={{
'& .MuiBadge-dot': {
borderRadius: '50%',
'& .MuiBadge-badge': {
height: '20px',
width: '20px',
right: '6px',
top: '6px',
height: '10px',
width: '10px',
},
}}
variant="dot"
badgeContent={listLength}
>
<IconButton
onClick={popover.handleOpen}
@@ -212,6 +237,9 @@ function NotificationsButton(): React.JSX.Element {
anchorEl={popover.anchorRef.current}
onClose={popover.handleClose}
open={popover.open}
onMarkAllAsRead={handleMarkAllAsRead}
onRemoveOne={handleRemoveOne}
setListLength={setListLength}
/>
</React.Fragment>
);

23
002_source/cms/src/components/dashboard/layout/notifications-popover/sample-notifications.tsx
View File

@@ -1,6 +1,9 @@
'use client';
import type { Notification } from '@/db/Notifications/type';
import { dayjs } from '@/lib/dayjs';
// import type { Notification } from './type.d.tsx';
export const SampleNotifications = [
@@ -11,6 +14,11 @@ export const SampleNotifications = [
type: 'new_job',
author: { id: '0001', collectionId: '0001', name: 'Jie Yan', avatar: '/assets/avatar-8.png' },
job: { title: 'Remote React / React Native Developer' },
//
created: '',
link: '',
NOTI_ID: '',
updated: '',
},
{
id: 'EV-003',
@@ -19,6 +27,11 @@ export const SampleNotifications = [
type: 'new_job',
author: { id: '0001', collectionId: '0001', name: 'Fran Perez', avatar: '/assets/avatar-5.png' },
job: { title: 'Senior Golang Backend Engineer' },
//
created: '',
link: '',
NOTI_ID: '',
updated: '',
},
{
id: 'EV-002',
@@ -27,6 +40,11 @@ export const SampleNotifications = [
type: 'new_feature',
author: { id: '0001', collectionId: '0001', name: 'Fran Perez', avatar: '/assets/avatar-5.png' },
description: 'Logistics management is now available',
//
created: '',
link: '',
NOTI_ID: '',
updated: '',
},
{
id: 'EV-001',
@@ -35,5 +53,10 @@ export const SampleNotifications = [
type: 'new_company',
author: { id: '0001', collectionId: '002', name: 'Jie Yan', avatar: '/assets/avatar-8.png' },
company: { name: 'Stripe' },
//
created: '',
link: '',
NOTI_ID: '',
updated: '',
},
] satisfies Notification[];

7
002_source/cms/src/components/dashboard/layout/vertical/main-nav/user-button.tsx
View File

@@ -6,11 +6,12 @@ import Badge from '@mui/material/Badge';
import Box from '@mui/material/Box';
import type { User } from '@/types/user';
import getImageUrlFromFile from '@/lib/get-image-url-from-file.ts';
import { usePopover } from '@/hooks/use-popover';
import { useUser } from '@/hooks/use-user';
import { UserPopover } from '../../user-popover/user-popover';
import { useUser } from '@/hooks/use-user';
import getImageUrlFromFile from '@/lib/get-image-url-from-file.ts';
// import { NotificationsButton } from './notifications-button';
// TODO:remove me
@@ -50,7 +51,7 @@ export function UserButton(): React.JSX.Element {
}}
variant="dot"
>
<Avatar src={getImageUrlFromFile(user.collectionId, user.id, user.avatar)} />
<Avatar src={getImageUrlFromFile(user.collectionId || '', user.id, user.avatar)} />
</Badge>
</Box>
<UserPopover

2
002_source/cms/src/components/dashboard/settings/account-details/index.tsx
View File

@@ -240,7 +240,7 @@ export function AccountDetails(): React.JSX.Element {
</Stack>
</Box>
<Avatar
src={getImageUrlFromFile(user.collectionId, user.id, user.avatar)}
src={getImageUrlFromFile(user.collectionId || '', user.id, user.avatar)}
sx={{ '--Avatar-size': '100px' }}
/>
</Box>

4
002_source/cms/src/components/dashboard/settings/side-nav/index.tsx
View File

@@ -21,7 +21,7 @@ import FormLoading from '@/components/loading';
import ErrorDisplay from '../../error';
import { NavItem } from './nav-item';
import { navItems } from './navItems';
import { navItems } from './nav-items';
export function SideNav(): React.JSX.Element {
const router = useRouter();
@@ -99,7 +99,7 @@ export function SideNav(): React.JSX.Element {
spacing={2}
sx={{ alignItems: 'center' }}
>
<Avatar src={getImageUrlFromFile(user.collectionId, user.id, user.avatar)}>{user.name}</Avatar>
<Avatar src={getImageUrlFromFile(user.collectionId || '', user.id, user.avatar)}>{user.name}</Avatar>
<div>
<Typography variant="subtitle1">{user.name}</Typography>
<Typography

2
002_source/cms/src/components/dashboard/settings/side-nav/nav-item.tsx
View File

@@ -18,7 +18,7 @@ import { UsersThree as UsersThreeIcon } from '@phosphor-icons/react/dist/ssr/Use
import type { NavItemConfig } from '@/types/nav';
import { isNavItemActive } from '@/lib/is-nav-item-active';
import { navItems } from './navItems';
import { navItems } from './nav-items';
const icons = {
'credit-card': CreditCardIcon,

0
002_source/cms/src/components/dashboard/settings/side-nav/navItems.tsx → 002_source/cms/src/components/dashboard/settings/side-nav/nav-items.tsx
View File

9
002_source/cms/src/components/dashboard/student/_constants.ts
View File

@@ -2,7 +2,10 @@
// default variable value for customer
// empty valur for customer
import { defaultBillingAddress } from '@/db/billingAddress/constant';
import { dayjs } from '@/lib/dayjs';
import type { Student } from './type.d';
export const defaultStudent: Student = {
@@ -14,6 +17,12 @@ export const defaultStudent: Student = {
quota: 0,
status: 'pending',
createdAt: dayjs().toDate(),
billingAddress: defaultBillingAddress,
state: 'pending',
timezone: '',
language: '',
currency: '',
collectionId: '',
};
export const emptyLpCategory: Student = {

2
002_source/cms/src/components/dashboard/student/type.d.ts vendored
View File

@@ -119,6 +119,7 @@ export interface StudentFiltersProps {
filters?: Filters;
sortDir?: SortDir;
fullData: Student[];
//
}
// RULES: available filter options for student data
@@ -126,4 +127,5 @@ export interface Filters {
email?: string;
phone?: string;
state?: string;
status?: string;
}

9
002_source/cms/src/components/dashboard/teacher/_constants.ts
View File

@@ -2,7 +2,10 @@
// default variable value for customer
// empty valur for customer
import { defaultBillingAddress } from '@/db/billingAddress/constant';
import { dayjs } from '@/lib/dayjs';
import type { Teacher } from './type.d';
export const defaultTeacher: Teacher = {
@@ -14,6 +17,12 @@ export const defaultTeacher: Teacher = {
quota: 0,
status: 'pending',
createdAt: dayjs().toDate(),
billingAddress: defaultBillingAddress,
state: 'pending',
// timezone: '',
// language: '',
// currency: '',
collectionId: '',
};
export const emptyLpCategory: Teacher = {

4
002_source/cms/src/components/dashboard/teacher/teacher-edit-form.tsx
View File

@@ -181,7 +181,9 @@ export function TeacherEditForm(): React.JSX.Element {
//
reset({ ...defaultValues, ...result });
setBillingAddressId(result.billingAddress.id);
if (result?.billingAddress !== undefined) {
setBillingAddressId(result.billingAddress.id);
}
if (result.avatar) {
const fetchResult = await fetch(getImageUrlFromFile(result.collectionId, result.id, result.avatar));

12
002_source/cms/src/components/dashboard/teacher/type.d.tsx → 002_source/cms/src/components/dashboard/teacher/type.d.ts vendored
View File

@@ -1,5 +1,7 @@
'use client';
import { BillingAddress } from '@/db/billingAddress/type';
// RULES: sorting direction for teacher lists
export type SortDir = 'asc' | 'desc';
@@ -14,7 +16,10 @@ export interface Teacher {
email: string;
phone?: string;
quota: number;
//
// billingAddress: BillingAddress[] | [];
billingAddress: BillingAddress | Record<string, never>;
//
// status is obsoleted, replace by state
status: 'pending' | 'active' | 'blocked';
state: 'pending' | 'active' | 'blocked';
@@ -44,10 +49,13 @@ export interface CreateFormProps {
timezone: string;
language: string;
currency: string;
// NOTE: fix this to file, change outside world
avatar?: File | null;
// quota?: number;
state?: 'pending' | 'active' | 'blocked';
meta: Record<string, null>;
// TODO: obsolete
meta?: Record<string, null>;
}
// RULES: form data structure for editing existing teacher

38
002_source/cms/src/components/dashboard/user_meta/_constants.ts
View File

@@ -1,20 +1,50 @@
// RULES:
// default variable value for customer
// empty valur for customer
// empty value for customer
import { defaultBillingAddress } from '@/db/billingAddress/constant';
import type { DBUserMeta, UserMeta } from '@/db/UserMetas/type';
import { dayjs } from '@/lib/dayjs';
import type { UserMeta } from './type.d';
// import type { UserMeta } from './type.d';
export const defaultUserMeta: UserMeta = {
id: '',
name: '',
avatar: undefined,
avatar: '',
email: '',
phone: undefined,
phone: '',
quota: 0,
status: 'pending',
state: 'pending',
collectionId: '',
createdAt: dayjs().toDate(),
//
// billingAddress: defaultBillingAddress,
// state: 'active',
// timezone: '',
// language: '',
// currency: '',
// collectionId: '',
};
export const defaultDBUserMeta: DBUserMeta = {
id: '',
name: '',
avatar: '',
email: '',
phone: '',
quota: 0,
status: 'pending',
created: '1900-01-01',
state: 'active',
timezone: '',
language: '',
currency: '',
collectionId: '',
company: '',
expand: {},
};
export const emptyLpCategory: UserMeta = {

31
002_source/cms/src/components/dashboard/user_meta/user-meta-create-form.tsx
View File

@@ -3,6 +3,7 @@
import * as React from 'react';
import RouterLink from 'next/link';
import { useRouter } from 'next/navigation';
import { createTeacher } from '@/db/Teachers/Create';
import { zodResolver } from '@hookform/resolvers/zod';
import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box';
@@ -26,11 +27,12 @@ import { Controller, useForm } from 'react-hook-form';
import { z as zod } from 'zod';
import { paths } from '@/paths';
import isDevelopment from '@/lib/check-is-development';
import { logger } from '@/lib/default-logger';
import { base64ToFile } from '@/lib/file-to-base64';
import { Option } from '@/components/core/option';
import { toast } from '@/components/core/toaster';
import { createTeacher } from '@/db/Teachers/Create';
import isDevelopment from '@/lib/check-is-development';
import type { CreateFormProps } from '@/components/dashboard/teacher/type.d';
function fileToBase64(file: Blob): Promise<string> {
return new Promise((resolve, reject) => {
@@ -45,6 +47,9 @@ function fileToBase64(file: Blob): Promise<string> {
});
}
// NOTE: face user side
// avatar should be the string inside image box,
// so avatar is string here
const schema = zod.object({
avatar: zod.string().optional(),
name: zod.string().min(1, 'Name is required').max(255),
@@ -101,13 +106,25 @@ export function TeacherCreateForm(): React.JSX.Element {
const onSubmit = React.useCallback(
async (values: Values): Promise<void> => {
try {
// Use standard create method from db/Customers/Create
const record = await createTeacher(values);
toast.success('Customer created');
const temp: CreateFormProps = {
name: values.name,
email: values.email,
timezone: values.timezone,
language: values.language,
currency: values.currency,
taxId: values.taxId,
avatar: values.avatar ? await base64ToFile(values.avatar) : null,
state: 'pending',
meta: {},
};
// some convert process here...
const record = await createTeacher(temp);
toast.success('Teacher created');
router.push(paths.dashboard.teachers.details(record.id));
} catch (err) {
logger.error(err);
toast.error('Failed to create customer');
toast.error('Failed to create teacher');
}
},
[router]
@@ -157,7 +174,7 @@ export function TeacherCreateForm(): React.JSX.Element {
}}
>
<Avatar
src={avatar}
src={''}
sx={{
'--Avatar-size': '100px',
'--Icon-fontSize': 'var(--icon-fontSize-lg)',

10
002_source/cms/src/components/dashboard/vocabulary/_constants.ts
View File

@@ -1,7 +1,6 @@
import type { CreateForm, Vocabulary } from './type';
export const defaultVocabulary: Vocabulary = {
id: 'default-vocabulary-id',
image: undefined,
sound: undefined,
word: '',
@@ -11,11 +10,15 @@ export const defaultVocabulary: Vocabulary = {
cat_id: 'default-category-id',
category: 'default-category',
lesson_type_id: 'default-lesson-type-id',
visible: 'visible',
//
id: 'default-vocabulary-id',
collectionId: '',
};
export const VocabularyCreateFormDefault: CreateForm = {
image: undefined,
sound: undefined,
image: null,
sound: '',
word: '',
word_c: '',
sample_e: '',
@@ -23,6 +26,7 @@ export const VocabularyCreateFormDefault: CreateForm = {
cat_id: '',
category: '',
lesson_type_id: '',
visible: 'visible',
};
export const emptyVocabulary: Vocabulary = {

18
002_source/cms/src/components/dashboard/vocabulary/type.d.ts vendored
View File

@@ -3,7 +3,7 @@
export interface Vocabulary {
created?: string;
updated?: string;
image: string;
image: string | undefined;
sound?: string;
word?: string;
word_c?: string;
@@ -22,6 +22,7 @@ export interface Vocabulary {
//
};
};
isEmpty?: boolean;
//
id: string;
collectionId: string;
@@ -62,3 +63,18 @@ export interface EditFormProps {
export interface Helloworld {
helloworld: string;
}
// RULES: for use with vocabulary-create-form.tsx
// when you update, please take a look into `vocabulary-create-form.tsx`
export interface CreateForm {
image: File[] | null;
sound: string;
word: string;
word_c: string;
sample_e: string;
sample_c: string;
cat_id: string;
category: string;
lesson_type_id: string;
visible: string;
}