✨ feat(user): Add telephone input with area code selection and update localization

apps/admin/app/dashboard/user/page.tsx

@@ -75,6 +75,14 @@ export default function Page() {
           accessorKey: 'email',
           header: t('userName'),
         },
+        {
+          accessorKey: 'telephone',
+          header: t('telephone'),
+          cell: ({ row }) => {
+            if (!row.original.telephone) return '--';
+            return `+${row.original.telephone_area_code} ${row.original.telephone}`;
+          },
+        },
         {
           accessorKey: 'balance',
           header: t('balance'),

apps/admin/app/dashboard/user/user-form.tsx

@@ -22,6 +22,7 @@ import {
   SheetTrigger,
 } from '@workspace/ui/components/sheet';
 import { Switch } from '@workspace/ui/components/switch';
+import { AreaCodeSelect } from '@workspace/ui/custom-components/area-code-select';
 import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
 import { unitConversion } from '@workspace/ui/utils';
 import { useTranslations } from 'next-intl';
@@ -52,6 +53,8 @@ export default function UserForm<T extends Record<string, any>>({
   const [open, setOpen] = useState(false);
   const formSchema = z.object({
     email: z.string().email(t('form.invalidEmailFormat')),
+    telephone_area_code: z.string().optional(),
+    telephone: z.string().optional(),
     password: z.string().optional(),
     referer_id: z.number().optional(),
     refer_code: z.string().optional(),
@@ -115,6 +118,48 @@ export default function UserForm<T extends Record<string, any>>({
                   </FormItem>
                 )}
               />
+
+              <FormField
+                control={form.control}
+                name='telephone'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.telephone')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        prefix={
+                          <FormField
+                            control={form.control}
+                            name='telephone_area_code'
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormControl>
+                                  <AreaCodeSelect
+                                    className='w-32 rounded-none border-y-0 border-l-0'
+                                    simple
+                                    placeholder={t('form.areaCodePlaceholder')}
+                                    value={field.value}
+                                    onChange={(value) => {
+                                      form.setValue(field.name, value.phone);
+                                    }}
+                                  />
+                                </FormControl>
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
+                        }
+                        placeholder={t('form.telephonePlaceholder')}
+                        {...field}
+                        onValueChange={(value) => {
+                          form.setValue(field.name, value);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
               <FormField
                 control={form.control}
                 name='password'