✨ feat(user): Add User Detail
This commit is contained in:
web@ppanel
@@ -0,0 +1,107 @@
|
||||
'use client';
|
||||
|
||||
import { Badge } from '@workspace/ui/components/badge';
|
||||
import { Button } from '@workspace/ui/components/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card';
|
||||
import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
|
||||
import { useState } from 'react';
|
||||
|
||||
export function AuthMethodsForm({ user }: { user: API.User }) {
|
||||
const [emailChanges, setEmailChanges] = useState<Record<string, string>>({});
|
||||
|
||||
const handleRemoveAuth = async (authType: string) => {};
|
||||
const handleUpdateEmail = async (authType: string) => {};
|
||||
const handleCreateEmail = async (email: string) => {};
|
||||
|
||||
const handleEmailChange = (authType: string, value: string) => {
|
||||
setEmailChanges((prev) => ({
|
||||
...prev,
|
||||
[authType]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const emailMethod = user.auth_methods.find((method) => method.auth_type === 'email');
|
||||
const otherMethods = user.auth_methods.filter((method) => method.auth_type !== 'email');
|
||||
|
||||
const defaultEmailMethod = {
|
||||
auth_type: 'email',
|
||||
auth_identifier: '',
|
||||
verified: false,
|
||||
...emailMethod,
|
||||
};
|
||||
|
||||
const isEmailExists = !!emailMethod;
|
||||
const handleEmailAction = () => {
|
||||
const email = emailChanges['email'];
|
||||
if (isEmailExists) {
|
||||
handleUpdateEmail('email');
|
||||
} else {
|
||||
handleCreateEmail(email as string);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Authentication Settings</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className='space-y-6'>
|
||||
<div className='space-y-6'>
|
||||
<Card className='border-none shadow-none'>
|
||||
<CardContent className='space-y-3 p-0'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='font-medium uppercase'>email</div>
|
||||
<Badge variant={defaultEmailMethod.verified ? 'default' : 'destructive'}>
|
||||
{defaultEmailMethod.verified ? 'Verified' : 'Unverified'}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className='flex items-center gap-2'>
|
||||
<div className='flex-1'>
|
||||
<EnhancedInput
|
||||
value={defaultEmailMethod.auth_identifier}
|
||||
placeholder='Please enter email'
|
||||
onValueChange={(value) => handleEmailChange('email', value as string)}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleEmailAction}
|
||||
disabled={
|
||||
!emailChanges['email'] ||
|
||||
(isEmailExists && emailChanges['email'] === defaultEmailMethod.auth_identifier)
|
||||
}
|
||||
>
|
||||
{isEmailExists ? 'Update' : 'Add'}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{otherMethods.map((method) => (
|
||||
<Card key={method.auth_type} className='border-none shadow-none'>
|
||||
<CardContent className='space-y-3 p-0'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='font-medium uppercase'>{method.auth_type}</div>
|
||||
<Badge variant={method.verified ? 'default' : 'destructive'}>
|
||||
{method.verified ? 'Verified' : 'Unverified'}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className='flex items-center gap-4'>
|
||||
<div className='flex-1'>
|
||||
<div className='text-muted-foreground text-sm'>{method.auth_identifier}</div>
|
||||
</div>
|
||||
<Button
|
||||
variant='destructive'
|
||||
size='sm'
|
||||
onClick={() => handleRemoveAuth(method.auth_type)}
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,254 @@
|
||||
'use client';
|
||||
|
||||
import useGlobalStore from '@/config/use-global';
|
||||
import { updateUser } from '@/services/admin/user';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { Button } from '@workspace/ui/components/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card';
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from '@workspace/ui/components/form';
|
||||
import { Input } from '@workspace/ui/components/input';
|
||||
import { Switch } from '@workspace/ui/components/switch';
|
||||
import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
|
||||
import { UploadImage } from '@workspace/ui/custom-components/upload-image';
|
||||
import { unitConversion } from '@workspace/ui/utils';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { toast } from 'sonner';
|
||||
import * as z from 'zod';
|
||||
|
||||
const basicInfoSchema = z.object({
|
||||
avatar: z.string().optional(),
|
||||
balance: z.number().optional(),
|
||||
commission: z.number().optional(),
|
||||
gift_amount: z.number().optional(),
|
||||
refer_code: z.string().optional(),
|
||||
referer_id: z.number().optional(),
|
||||
is_admin: z.boolean().optional(),
|
||||
password: z.string().optional(),
|
||||
enable: z.boolean(),
|
||||
});
|
||||
|
||||
type BasicInfoValues = z.infer<typeof basicInfoSchema>;
|
||||
|
||||
export function BasicInfoForm({ user }: { user: API.User }) {
|
||||
const { common } = useGlobalStore();
|
||||
const { currency } = common;
|
||||
|
||||
const form = useForm<BasicInfoValues>({
|
||||
resolver: zodResolver(basicInfoSchema),
|
||||
defaultValues: {
|
||||
avatar: user.avatar,
|
||||
balance: user.balance,
|
||||
commission: user.commission,
|
||||
gift_amount: user.gift_amount,
|
||||
refer_code: user.refer_code,
|
||||
referer_id: user.referer_id,
|
||||
is_admin: user.is_admin,
|
||||
enable: user.enable,
|
||||
},
|
||||
});
|
||||
|
||||
async function onSubmit(data: BasicInfoValues) {
|
||||
await updateUser({
|
||||
id: user.id,
|
||||
...data,
|
||||
} as API.UpdateUserRequest);
|
||||
toast.success('Saved successfully');
|
||||
}
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)}>
|
||||
<Card>
|
||||
<CardHeader className='flex flex-row items-center justify-between'>
|
||||
<CardTitle>Basic Information</CardTitle>
|
||||
<Button type='submit' size='sm'>
|
||||
Save
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent className='space-y-4'>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='enable'
|
||||
render={({ field }) => (
|
||||
<FormItem className='flex items-center justify-between space-x-2'>
|
||||
<FormLabel>Account Enable</FormLabel>
|
||||
<FormControl>
|
||||
<Switch checked={field.value} onCheckedChange={field.onChange} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='is_admin'
|
||||
render={({ field }) => (
|
||||
<FormItem className='flex items-center justify-between space-x-2'>
|
||||
<FormLabel>Administrator</FormLabel>
|
||||
<FormControl>
|
||||
<Switch checked={field.value} onCheckedChange={field.onChange} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className='grid grid-cols-3 gap-4'>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='balance'
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Balance</FormLabel>
|
||||
<FormControl>
|
||||
<EnhancedInput
|
||||
type='number'
|
||||
value={field.value}
|
||||
prefix={currency?.currency_symbol ?? '$'}
|
||||
formatInput={(value) => unitConversion('centsToDollars', value)}
|
||||
formatOutput={(value) => unitConversion('dollarsToCents', value)}
|
||||
onValueChange={(value) => {
|
||||
form.setValue(field.name, value as number);
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='commission'
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Commission</FormLabel>
|
||||
<FormControl>
|
||||
<EnhancedInput
|
||||
type='number'
|
||||
value={field.value}
|
||||
prefix={currency?.currency_symbol ?? '$'}
|
||||
formatInput={(value) => unitConversion('centsToDollars', value)}
|
||||
formatOutput={(value) => unitConversion('dollarsToCents', value)}
|
||||
onValueChange={(value) => {
|
||||
form.setValue(field.name, value as number);
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='gift_amount'
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Gift Amount</FormLabel>
|
||||
<FormControl>
|
||||
<EnhancedInput
|
||||
type='number'
|
||||
value={field.value}
|
||||
prefix={currency?.currency_symbol ?? '$'}
|
||||
formatInput={(value) => unitConversion('centsToDollars', value)}
|
||||
formatOutput={(value) => unitConversion('dollarsToCents', value)}
|
||||
onValueChange={(value) => {
|
||||
form.setValue(field.name, value as number);
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-2 gap-4'>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='refer_code'
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Referral Code</FormLabel>
|
||||
<FormControl>
|
||||
<EnhancedInput
|
||||
value={field.value}
|
||||
onValueChange={(value) => {
|
||||
form.setValue(field.name, value as string);
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='referer_id'
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Referrer (User ID)</FormLabel>
|
||||
<FormControl>
|
||||
<EnhancedInput
|
||||
type='number'
|
||||
value={field.value}
|
||||
onValueChange={(value) => {
|
||||
form.setValue(field.name, value as number);
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='avatar'
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Avatar</FormLabel>
|
||||
<FormControl>
|
||||
<EnhancedInput
|
||||
value={field.value}
|
||||
onValueChange={(value) => {
|
||||
form.setValue(field.name, value as string);
|
||||
}}
|
||||
suffix={
|
||||
<UploadImage
|
||||
className='bg-muted h-9 rounded-none border-none px-2'
|
||||
returnType='base64'
|
||||
onChange={(value) => form.setValue('avatar', value as string)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='password'
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Password</FormLabel>
|
||||
<FormControl>
|
||||
<Input type='password' placeholder='Leave empty to keep unchanged' {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
'use client';
|
||||
|
||||
import { getUserDetail } from '@/services/admin/user';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { AuthMethodsForm } from './auth-methods-form';
|
||||
import { BasicInfoForm } from './basic-info-form';
|
||||
import { NotifySettingsForm } from './notify-settings-form';
|
||||
|
||||
export function UserProfileForm() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
|
||||
const { data: user } = useQuery({
|
||||
queryKey: ['user', id],
|
||||
queryFn: async () => {
|
||||
const { data } = await getUserDetail({
|
||||
id: Number(id),
|
||||
});
|
||||
return data.data;
|
||||
},
|
||||
});
|
||||
|
||||
if (!user) return null;
|
||||
|
||||
return (
|
||||
<div className='grid gap-4 md:grid-cols-2 xl:grid-cols-3'>
|
||||
<div className='md:col-span-2 xl:col-span-1'>
|
||||
<BasicInfoForm user={user} />
|
||||
</div>
|
||||
<div>
|
||||
<NotifySettingsForm user={user} />
|
||||
</div>
|
||||
<div>
|
||||
<AuthMethodsForm user={user} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
'use client';
|
||||
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { Button } from '@workspace/ui/components/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card';
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel } from '@workspace/ui/components/form';
|
||||
import { Switch } from '@workspace/ui/components/switch';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { toast } from 'sonner';
|
||||
import * as z from 'zod';
|
||||
|
||||
const notifySettingsSchema = z.object({
|
||||
enable_email_notify: z.boolean(),
|
||||
enable_telegram_notify: z.boolean(),
|
||||
enable_balance_notify: z.boolean(),
|
||||
enable_login_notify: z.boolean(),
|
||||
enable_subscribe_notify: z.boolean(),
|
||||
enable_trade_notify: z.boolean(),
|
||||
});
|
||||
|
||||
type NotifySettingsValues = z.infer<typeof notifySettingsSchema>;
|
||||
|
||||
export function NotifySettingsForm({ user }: { user: API.User }) {
|
||||
const form = useForm<NotifySettingsValues>({
|
||||
resolver: zodResolver(notifySettingsSchema),
|
||||
defaultValues: {
|
||||
enable_email_notify: user.enable_email_notify,
|
||||
enable_telegram_notify: user.enable_telegram_notify,
|
||||
enable_balance_notify: user.enable_balance_notify,
|
||||
enable_login_notify: user.enable_login_notify,
|
||||
enable_subscribe_notify: user.enable_subscribe_notify,
|
||||
enable_trade_notify: user.enable_trade_notify,
|
||||
},
|
||||
});
|
||||
|
||||
async function onSubmit(data: NotifySettingsValues) {
|
||||
toast.warning('In Development...');
|
||||
}
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)}>
|
||||
<Card>
|
||||
<CardHeader className='flex flex-row items-center justify-between'>
|
||||
<CardTitle>Notification Settings</CardTitle>
|
||||
<Button type='submit' size='sm'>
|
||||
Save
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent className='space-y-4'>
|
||||
<div className='grid grid-cols-1 gap-4'>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='enable_email_notify'
|
||||
render={({ field }) => (
|
||||
<FormItem className='flex items-center justify-between space-x-2'>
|
||||
<FormLabel>Email Notifications</FormLabel>
|
||||
<FormControl>
|
||||
<Switch checked={field.value} onCheckedChange={field.onChange} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='enable_telegram_notify'
|
||||
render={({ field }) => (
|
||||
<FormItem className='flex items-center justify-between space-x-2'>
|
||||
<FormLabel>Telegram Notifications</FormLabel>
|
||||
<FormControl>
|
||||
<Switch checked={field.value} onCheckedChange={field.onChange} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='enable_balance_notify'
|
||||
render={({ field }) => (
|
||||
<FormItem className='flex items-center justify-between space-x-2'>
|
||||
<FormLabel>Balance Change Notifications</FormLabel>
|
||||
<FormControl>
|
||||
<Switch checked={field.value} onCheckedChange={field.onChange} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='enable_login_notify'
|
||||
render={({ field }) => (
|
||||
<FormItem className='flex items-center justify-between space-x-2'>
|
||||
<FormLabel>Login Notifications</FormLabel>
|
||||
<FormControl>
|
||||
<Switch checked={field.value} onCheckedChange={field.onChange} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='enable_subscribe_notify'
|
||||
render={({ field }) => (
|
||||
<FormItem className='flex items-center justify-between space-x-2'>
|
||||
<FormLabel>Subscription Notifications</FormLabel>
|
||||
<FormControl>
|
||||
<Switch checked={field.value} onCheckedChange={field.onChange} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='enable_trade_notify'
|
||||
render={({ field }) => (
|
||||
<FormItem className='flex items-center justify-between space-x-2'>
|
||||
<FormLabel>Trade Notifications</FormLabel>
|
||||
<FormControl>
|
||||
<Switch checked={field.value} onCheckedChange={field.onChange} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user