refactor: Update form types in admin, user template, and settings modals to use input types for improved type safety

x0sina · x0sina · commit 53fe1cd2156f · 2026-02-05T13:51:01.000+03:30
diff --git a/dashboard/src/components/dialogs/admin-modal.tsx b/dashboard/src/components/dialogs/admin-modal.tsx
@@ -25,7 +25,7 @@ interface AdminModalProps {
   onOpenChange: (open: boolean) => void
   editingAdmin?: boolean
   editingAdminUserName: string
-  form: UseFormReturn<AdminFormValues>
+  form: UseFormReturn<AdminFormValuesInput>
 }
 
 const passwordValidation = z.string().refine(
@@ -131,6 +131,7 @@ export const adminFormSchema = z
     }
   })
 
+export type AdminFormValuesInput = z.input<typeof adminFormSchema>
 export type AdminFormValues = z.infer<typeof adminFormSchema>
 export default function AdminModal({ isDialogOpen, onOpenChange, editingAdminUserName, editingAdmin, form }: AdminModalProps) {
   const { t } = useTranslation()
@@ -157,10 +158,10 @@ export default function AdminModal({ isDialogOpen, onOpenChange, editingAdminUse
     onOpenChange(open)
   }
 
-  const onSubmit = async (values: AdminFormValues) => {
+  const onSubmit = async (values: AdminFormValuesInput) => {
     try {
       const editData = {
-        is_sudo: values.is_sudo,
+        is_sudo: values.is_sudo ?? false,
         password: values.password || undefined,
         is_disabled: values.is_disabled,
         discord_webhook: values.discord_webhook,
@@ -187,6 +188,7 @@ export default function AdminModal({ isDialogOpen, onOpenChange, editingAdminUse
         if (!values.password) return
         const createData = {
           ...values,
+          is_sudo: values.is_sudo ?? false,
           password: values.password, // Ensure password is present
         }
         await addAdminMutation.mutateAsync({
diff --git a/dashboard/src/components/dialogs/shortcuts-modal.tsx b/dashboard/src/components/dialogs/shortcuts-modal.tsx
@@ -38,7 +38,7 @@ const QuickActionsModal = ({ open, onClose, onCreateUser, onCreateGroup, onCreat
       icon: <UsersIcon className="h-5 w-5" />,
       action: onCreateUser,
       disabled: false,
-      category: 'users',
+      category: 'users' as const,
     },
     // Only show these actions for sudo admins
     ...(isSudo
@@ -50,7 +50,7 @@ const QuickActionsModal = ({ open, onClose, onCreateUser, onCreateGroup, onCreat
             icon: <Users2 className="h-5 w-5" />,
             action: onCreateGroup,
             disabled: false,
-            category: 'users',
+            category: 'users' as const,
           },
           {
             id: '3',
@@ -59,7 +59,7 @@ const QuickActionsModal = ({ open, onClose, onCreateUser, onCreateGroup, onCreat
             icon: <LayoutTemplate className="h-5 w-5" />,
             action: onCreateTemplate || (() => {}),
             disabled: !onCreateTemplate,
-            category: 'users',
+            category: 'users' as const,
           },
           {
             id: '4',
@@ -68,7 +68,7 @@ const QuickActionsModal = ({ open, onClose, onCreateUser, onCreateGroup, onCreat
             icon: <ListTodo className="h-5 w-5" />,
             action: onCreateHost,
             disabled: false,
-            category: 'system',
+            category: 'system' as const,
           },
           {
             id: '5',
@@ -77,7 +77,7 @@ const QuickActionsModal = ({ open, onClose, onCreateUser, onCreateGroup, onCreat
             icon: <Share2Icon className="h-5 w-5" />,
             action: onCreateNode,
             disabled: false,
-            category: 'system',
+            category: 'system' as const,
           },
           {
             id: '6',
@@ -86,7 +86,7 @@ const QuickActionsModal = ({ open, onClose, onCreateUser, onCreateGroup, onCreat
             icon: <Cpu className="h-5 w-5" />,
             action: onCreateCore || (() => {}),
             disabled: !onCreateCore,
-            category: 'system',
+            category: 'system' as const,
           },
           // Admin Management
           {
@@ -96,7 +96,7 @@ const QuickActionsModal = ({ open, onClose, onCreateUser, onCreateGroup, onCreat
             icon: <UserCog className="h-5 w-5" />,
             action: onCreateAdmin || (() => {}),
             disabled: !onCreateAdmin,
-            category: 'management',
+            category: 'management' as const,
           },
         ]
       : []),
diff --git a/dashboard/src/components/dialogs/user-template-modal.tsx b/dashboard/src/components/dialogs/user-template-modal.tsx
@@ -43,12 +43,13 @@ export const userTemplateFormSchema = z.object({
   reset_usages: z.boolean().optional(),
 })
 
+export type UserTemplatesFromValueInput = z.input<typeof userTemplateFormSchema>
 export type UserTemplatesFromValue = z.infer<typeof userTemplateFormSchema>
 
 interface UserTemplatesModalprops {
   isDialogOpen: boolean
   onOpenChange: (open: boolean) => void
-  form: UseFormReturn<UserTemplatesFromValue>
+  form: UseFormReturn<UserTemplatesFromValueInput>
   editingUserTemplate: boolean
   editingUserTemplateId?: number
 }
@@ -62,9 +63,10 @@ export default function UserTemplateModal({ isDialogOpen, onOpenChange, form, ed
   const [timeType, setTimeType] = useState<'seconds' | 'hours' | 'days'>('seconds')
   const [loading, setLoading] = useState(false)
 
-  const onSubmit = async (values: UserTemplatesFromValue) => {
+  const onSubmit = async (values: UserTemplatesFromValueInput) => {
     setLoading(true)
     try {
+      const status = values.status ?? UserStatusCreate.active
       // Build payload according to UserTemplateCreate interface
       const submitData = {
         name: values.name,
@@ -73,8 +75,8 @@ export default function UserTemplateModal({ isDialogOpen, onOpenChange, form, ed
         username_prefix: values.username_prefix || '',
         username_suffix: values.username_suffix || '',
         group_ids: values.groups, // map groups to group_ids
-        status: values.status,
-        on_hold_timeout: values.status === UserStatusCreate.on_hold ? values.on_hold_timeout : undefined,
+        status,
+        on_hold_timeout: status === UserStatusCreate.on_hold ? values.on_hold_timeout : undefined,
         data_limit_reset_strategy: values.data_limit ? values.data_limit_reset_strategy : undefined,
         reset_usages: values.reset_usages,
         extra_settings:
diff --git a/dashboard/src/pages/_dashboard._index.tsx b/dashboard/src/pages/_dashboard._index.tsx
@@ -1,14 +1,14 @@
 import AdminStatisticsCard from '@/components/dashboard/admin-statistics-card'
 import DashboardStatistics from '@/components/dashboard/dashboard-statistics'
 import WorkersHealthCard from '@/components/dashboard/workers-health-card'
-import AdminModal, { adminFormSchema, AdminFormValues } from '@/components/dialogs/admin-modal'
+import AdminModal, { adminFormSchema, AdminFormValuesInput } from '@/components/dialogs/admin-modal'
 import { coreConfigFormSchema, CoreConfigFormValues } from '@/components/dialogs/core-config-modal'
 import GroupModal, { groupFormSchema, GroupFormValues } from '@/components/dialogs/group-modal'
 import HostModal from '@/components/dialogs/host-modal'
 import NodeModal, { nodeFormSchema, NodeFormValues } from '@/components/dialogs/node-modal'
 import QuickActionsModal from '@/components/dialogs/shortcuts-modal'
 import UserModal from '@/components/dialogs/user-modal'
-import UserTemplateModal, { userTemplateFormSchema, UserTemplatesFromValue } from '@/components/dialogs/user-template-modal'
+import UserTemplateModal, { userTemplateFormSchema, UserTemplatesFromValueInput } from '@/components/dialogs/user-template-modal'
 import { HostFormValues } from '@/components/hosts/hosts-list'
 import { Avatar, AvatarFallback } from '@/components/ui/avatar'
 import { Button } from '@/components/ui/button'
@@ -148,7 +148,7 @@ const Dashboard = () => {
     },
   })
 
-  const adminForm = useForm<AdminFormValues>({
+  const adminForm = useForm<AdminFormValuesInput>({
     resolver: zodResolver(adminFormSchema),
     defaultValues: {
       username: '',
@@ -175,7 +175,7 @@ const Dashboard = () => {
     },
   })
 
-  const templateForm = useForm<UserTemplatesFromValue>({
+  const templateForm = useForm<UserTemplatesFromValueInput>({
     resolver: zodResolver(userTemplateFormSchema),
     defaultValues: {
       name: '',
diff --git a/dashboard/src/pages/_dashboard.admins.tsx b/dashboard/src/pages/_dashboard.admins.tsx
@@ -6,15 +6,15 @@ import PageHeader from '@/components/layout/page-header'
 import { Separator } from '@/components/ui/separator'
 import { toast } from 'sonner'
 import AdminsTable from '@/components/admins/admins-table'
-import AdminModal, { adminFormSchema, AdminFormValues } from '@/components/dialogs/admin-modal'
+import AdminModal, { adminFormSchema, AdminFormValuesInput } from '@/components/dialogs/admin-modal'
 import { useActivateAllDisabledUsers, useDisableAllActiveUsers, useModifyAdmin, useRemoveAdmin, useResetAdminUsage } from '@/service/api'
 import type { AdminDetails } from '@/service/api'
 import AdminsStatistics from '@/components/admins/admin-statistics'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { queryClient } from '@/utils/query-client.ts'
 import useDynamicErrorHandler from '@/hooks/use-dynamic-errors'
 
-const initialDefaultValues: Partial<AdminFormValues> = {
+const initialDefaultValues: Partial<AdminFormValuesInput> = {
   username: '',
   is_sudo: false,
   password: '',
@@ -41,7 +41,7 @@ export default function AdminsPage() {
   const [editingAdmin, setEditingAdmin] = useState<Partial<AdminDetails> | null>(null)
   const [isDialogOpen, setIsDialogOpen] = useState(false)
   const [adminCounts, setAdminCounts] = useState<{ total: number; active: number; disabled: number } | null>(null)
-  const form = useForm<AdminFormValues>({
+  const form = useForm<AdminFormValuesInput>({
     resolver: zodResolver(adminFormSchema),
     defaultValues: initialDefaultValues,
   })
diff --git a/dashboard/src/pages/_dashboard.settings.discord.tsx b/dashboard/src/pages/_dashboard.settings.discord.tsx
@@ -19,13 +19,13 @@ const discordSettingsSchema = z.object({
   proxy_url: z.string().url('Please enter a valid URL').optional().or(z.literal('')),
 })
 
-type DiscordSettingsForm = z.infer<typeof discordSettingsSchema>
+type DiscordSettingsFormInput = z.input<typeof discordSettingsSchema>
 
 export default function DiscordSettings() {
   const { t } = useTranslation()
   const { settings, isLoading, error, updateSettings, isSaving } = useSettingsContext()
 
-  const form = useForm<DiscordSettingsForm>({
+  const form = useForm<DiscordSettingsFormInput>({
     resolver: zodResolver(discordSettingsSchema),
     defaultValues: {
       enable: false,
@@ -49,12 +49,13 @@ export default function DiscordSettings() {
     }
   }, [settings, form])
 
-  const onSubmit = async (data: DiscordSettingsForm) => {
+  const onSubmit = async (data: DiscordSettingsFormInput) => {
     try {
       // Filter out empty values and prepare the payload
       const filteredData: any = {
         discord: {
           ...data,
+          enable: data.enable ?? false,
           // Convert empty strings to undefined
           token: data.token?.trim() || undefined,
           proxy_url: data.proxy_url?.trim() || undefined,
diff --git a/dashboard/src/pages/_dashboard.settings.general.tsx b/dashboard/src/pages/_dashboard.settings.general.tsx
@@ -21,15 +21,15 @@ const generalSettingsSchema = z.object({
   default_method: z.string().default(''),
 })
 
-type GeneralSettingsForm = z.infer<typeof generalSettingsSchema>
+type GeneralSettingsFormInput = z.input<typeof generalSettingsSchema>
 
 export default function General() {
   const { t } = useTranslation()
   const { settings, isLoading, error, updateSettings, isSaving } = useSettingsContext()
   const [isReconnectAllDialogOpen, setIsReconnectAllDialogOpen] = useState(false)
   const reconnectAllNodeMutation = useReconnectAllNode()
 
-  const form = useForm<GeneralSettingsForm>({
+  const form = useForm<GeneralSettingsFormInput>({
     resolver: zodResolver(generalSettingsSchema),
     defaultValues: {
       default_flow: '',
@@ -44,7 +44,7 @@ export default function General() {
     })
   }, [settings])
 
-  const onSubmit = async (data: GeneralSettingsForm) => {
+  const onSubmit = async (data: GeneralSettingsFormInput) => {
     try {
       // Filter out empty values and prepare the payload
       const filteredData: any = {
@@ -149,7 +149,7 @@ export default function General() {
     )
   }
 
-  const clearField = (field: keyof GeneralSettingsForm) => {
+  const clearField = (field: keyof GeneralSettingsFormInput) => {
     return (e: React.MouseEvent<HTMLButtonElement>) => {
       e.preventDefault()
       e.stopPropagation()
diff --git a/dashboard/src/pages/_dashboard.settings.telegram.tsx b/dashboard/src/pages/_dashboard.settings.telegram.tsx
@@ -58,7 +58,7 @@ const telegramSettingsSchema = z.object({
   for_admins_only: z.boolean().default(true),
 })
 
-type TelegramSettingsForm = z.infer<typeof telegramSettingsSchema>
+type TelegramSettingsFormInput = z.input<typeof telegramSettingsSchema>
 
 // Helper function to get current panel URL
 const getCurrentPanelUrl = () => {
@@ -68,15 +68,18 @@ const getCurrentPanelUrl = () => {
 }
 
 // Helper to map frontend Telegram form data to backend payload
-function mapTelegramFormToPayload(data: TelegramSettingsForm) {
+function mapTelegramFormToPayload(data: TelegramSettingsFormInput) {
   const mapped = {
     ...data,
+    enable: data.enable ?? false,
+    method: data.method ?? 'webhook',
+    mini_app_login: data.mini_app_login ?? false,
+    for_admins_only: data.for_admins_only ?? true,
     token: data.token?.trim() || undefined,
     webhook_url: data.webhook_url?.trim() || undefined,
     webhook_secret: data.webhook_secret?.trim() || undefined,
     proxy_url: data.proxy_url?.trim() || undefined,
     mini_app_web_url: data.mini_app_url?.trim() || undefined,
-    for_admins_only: data.for_admins_only,
   }
   delete mapped.mini_app_url
   return { telegram: mapped }
@@ -87,7 +90,7 @@ export default function TelegramSettings() {
   const { settings, isLoading, error, updateSettings, isSaving } = useSettingsContext()
   const [popoverOpen, setPopoverOpen] = useState(false)
 
-  const form = useForm<TelegramSettingsForm>({
+  const form = useForm<TelegramSettingsFormInput>({
     resolver: zodResolver(telegramSettingsSchema),
     defaultValues: {
       enable: false,
@@ -124,7 +127,7 @@ export default function TelegramSettings() {
     }
   }, [settings, form])
 
-  const onSubmit = async (data: TelegramSettingsForm) => {
+  const onSubmit = async (data: TelegramSettingsFormInput) => {
     try {
       // Use the mapping helper
       const filteredData = mapTelegramFormToPayload(data)
diff --git a/dashboard/src/pages/_dashboard.settings.tsx b/dashboard/src/pages/_dashboard.settings.tsx
@@ -51,7 +51,7 @@ const sudoTabs: Tab[] = [
 const nonSudoTabs: Tab[] = [{ id: 'theme', label: 'theme.title', icon: Palette, url: '/settings/theme' }]
 
 export default function Settings() {
-  const { t, i18n } = useTranslation()
+  const { t } = useTranslation()
   const location = useLocation()
   const navigate = useNavigate()
   const { admin } = useAdmin()
@@ -203,7 +203,7 @@ export default function Settings() {
       settings: is_sudo ? settings || {} : {}, // Non-sudo admins don't need settings data
       isLoading: is_sudo ? isLoading : false,
       error: is_sudo ? error : null,
-      updateSettings: is_sudo ? handleUpdateSettings : () => {}, // No-op for non-sudo admins
+      updateSettings: is_sudo ? handleUpdateSettings : () => { }, // No-op for non-sudo admins
       isSaving: is_sudo ? isSaving : false,
     }),
     [is_sudo, settings, isLoading, error, isSaving, handleUpdateSettings],
diff --git a/dashboard/src/pages/_dashboard.settings.webhook.tsx b/dashboard/src/pages/_dashboard.settings.webhook.tsx
@@ -32,13 +32,13 @@ const webhookSettingsSchema = z.object({
   proxy_url: z.string().url('Please enter a valid URL').optional().or(z.literal('')),
 })
 
-type WebhookSettingsForm = z.infer<typeof webhookSettingsSchema>
+type WebhookSettingsFormInput = z.input<typeof webhookSettingsSchema>
 
 export default function WebhookSettings() {
   const { t } = useTranslation()
   const { settings, isLoading, error, updateSettings, isSaving } = useSettingsContext()
 
-  const form = useForm<WebhookSettingsForm>({
+  const form = useForm<WebhookSettingsFormInput>({
     resolver: zodResolver(webhookSettingsSchema),
     defaultValues: {
       enable: false,
@@ -97,16 +97,21 @@ export default function WebhookSettings() {
     }
   }, [settings, form])
 
-  const onSubmit = async (data: WebhookSettingsForm) => {
+  const onSubmit = async (data: WebhookSettingsFormInput) => {
     try {
       // Filter out empty values and prepare the payload
       const filteredData: any = {
         webhook: {
           ...data,
+          enable: data.enable ?? false,
+          days_left: data.days_left ?? [],
+          usage_percent: data.usage_percent ?? [],
+          timeout: data.timeout ?? 30,
+          recurrent: data.recurrent ?? 3,
           // Convert empty strings to undefined
           proxy_url: data.proxy_url?.trim() || undefined,
           // Ensure arrays are properly formatted
-          webhooks: data.webhooks.map(webhook => ({
+          webhooks: (data.webhooks ?? []).map(webhook => ({
             url: webhook.url.trim(),
             secret: webhook.secret.trim(),
           })),
diff --git a/dashboard/src/pages/_dashboard.templates.tsx b/dashboard/src/pages/_dashboard.templates.tsx
