fix: status select mobile issues, remove table caching, fix disabled status

x0sina · x0sina · commit 2f549cf46a21 · 2025-09-28T12:20:32.000+03:30
diff --git a/dashboard/src/components/ActionButtons.tsx b/dashboard/src/components/ActionButtons.tsx
@@ -66,7 +66,7 @@ const ActionButtons: FC<ActionButtonsProps> = ({ user }) => {
   const userForm = useForm<UseEditFormValues>({
     defaultValues: {
       username: user.username,
-      status: user.status === 'active' || user.status === 'on_hold' || user.status === 'disabled' ? user.status : 'active',
+      status: user.status === "expired" || user.status === "limited" ? "active" : user.status,
       data_limit: user.data_limit ? Math.round((Number(user.data_limit) / (1024 * 1024 * 1024)) * 100) / 100 : undefined, // Convert bytes to GB
       expire: user.expire,
       note: user.note || '',
@@ -88,7 +88,7 @@ const ActionButtons: FC<ActionButtonsProps> = ({ user }) => {
   useEffect(() => {
     const values: UseFormValues = {
       username: user.username,
-      status: user.status === 'active' || user.status === 'on_hold' ? user.status : 'active',
+      status: user.status === 'active' || user.status === 'on_hold' || user.status === 'disabled' ? user.status as any : 'active',
       data_limit: user.data_limit ? Math.round((Number(user.data_limit) / (1024 * 1024 * 1024)) * 100) / 100 : 0,
       expire: user.expire, // Pass raw expire value (timestamp)
       note: user.note || '',
diff --git a/dashboard/src/components/admins/AdminsTable.tsx b/dashboard/src/components/admins/AdminsTable.tsx
@@ -192,14 +192,13 @@ export default function AdminsTable({ onEdit, onDelete, onToggleStatus, onResetU
     setCurrentPage(newPage)
 
     try {
-      // Wait for state to update before refetching
-      await new Promise(resolve => setTimeout(resolve, 0))
+      // Immediate refetch without delay
       await refetch()
     } finally {
-      // Add a small delay to prevent flickering
+      // Minimal delay for instant response
       setTimeout(() => {
         setIsChangingPage(false)
-      }, 300)
+      }, 50)
     }
   }
 
@@ -209,14 +208,13 @@ export default function AdminsTable({ onEdit, onDelete, onToggleStatus, onResetU
     setCurrentPage(0) // Reset to first page when items per page changes
 
     try {
-      // Wait for state to update before refetching
-      await new Promise(resolve => setTimeout(resolve, 0))
+      // Immediate refetch without delay
       await refetch()
     } finally {
-      // Add a small delay to prevent flickering
+      // Minimal delay for instant response
       setTimeout(() => {
         setIsChangingPage(false)
-      }, 300)
+      }, 50)
     }
   }
 
diff --git a/dashboard/src/components/admins/data-table.tsx b/dashboard/src/components/admins/data-table.tsx
@@ -2,7 +2,7 @@ import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
 import { cn } from '@/lib/utils'
 import useDirDetection from '@/hooks/use-dir-detection'
-import React, { useState, useMemo, useEffect } from 'react'
+import React, { useState, useMemo, useEffect, memo, useCallback } from 'react'
 import { ChevronDown, Edit2, Power, PowerOff, RefreshCw, Trash2, User, UserRound, LoaderCircle } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { AdminDetails } from '@/service/api'
@@ -23,7 +23,7 @@ interface DataTableProps<TData extends AdminDetails> {
   isFetching?: boolean
 }
 
-const ExpandedRowContent = ({
+const ExpandedRowContent = memo(({
   row,
   onEdit,
   onDelete,
@@ -76,12 +76,11 @@ const ExpandedRowContent = ({
       </div>
     </div>
   )
-}
+})
 
 export function DataTable<TData extends AdminDetails>({ columns, data, onEdit, onDelete, onToggleStatus, onResetUsage, isLoading = false, isFetching = false }: DataTableProps<TData>) {
   const [expandedRow, setExpandedRow] = useState<string | null>(null)
   const { t } = useTranslation()
-  const [visibleRows, setVisibleRows] = useState<number>(0)
   const table = useReactTable({
     data,
     columns,
@@ -91,26 +90,6 @@ export function DataTable<TData extends AdminDetails>({ columns, data, onEdit, o
   const isRTL = dir === 'rtl'
   const isLoadingData = isLoading || isFetching
 
-  useEffect(() => {
-    if (isLoading || isFetching) {
-      setVisibleRows(0)
-      return
-    }
-
-    const totalRows = table.getRowModel().rows.length
-    let currentRow = 0
-
-    const loadNextRow = () => {
-      if (currentRow < totalRows) {
-        setVisibleRows(prev => prev + 1)
-        currentRow++
-        setTimeout(loadNextRow, 50)
-      }
-    }
-
-    loadNextRow()
-  }, [isLoading, isFetching, table.getRowModel().rows.length])
-
   const LoadingState = useMemo(() => (
     <TableRow>
       <TableCell colSpan={columns.length} className="h-24">
@@ -130,17 +109,17 @@ export function DataTable<TData extends AdminDetails>({ columns, data, onEdit, o
     </TableRow>
   ), [columns.length, t])
 
-  const handleRowToggle = (rowId: string) => {
+  const handleRowToggle = useCallback((rowId: string) => {
     setExpandedRow(expandedRow === rowId ? null : rowId)
-  }
+  }, [expandedRow])
 
-  const handleEditModal = (cellId: string, rowData: AdminDetails) => {
+  const handleEditModal = useCallback((cellId: string, rowData: AdminDetails) => {
     const isChevron = cellId === 'chevron'
     const isSmallScreen = window.innerWidth < 768
     if (!isSmallScreen && !isChevron) {
       onEdit(rowData)
     }
-  }
+  }, [onEdit])
 
   return (
     <div className="rounded-md border">
@@ -171,18 +150,13 @@ export function DataTable<TData extends AdminDetails>({ columns, data, onEdit, o
         </TableHeader>
         <TableBody>
           {isLoadingData ? LoadingState : table.getRowModel().rows?.length ? (
-            table.getRowModel().rows.map((row, index) => (
+            table.getRowModel().rows.map((row) => (
               <React.Fragment key={row.id}>
                 <TableRow
                   className={cn(
                     'cursor-pointer md:cursor-default border-b hover:!bg-inherit md:hover:!bg-muted/50',
-                    expandedRow === row.id && 'border-transparent',
-                    index >= visibleRows && 'opacity-0',
-                    'transition-all duration-300 ease-in-out'
+                    expandedRow === row.id && 'border-transparent'
                   )}
-                  style={{
-                    transform: index >= visibleRows ? 'translateY(10px)' : 'translateY(0)',
-                  }}
                   onClick={() => window.innerWidth < 768 && handleRowToggle(row.id)}
                   data-state={row.getIsSelected() && 'selected'}
                 >
@@ -204,7 +178,7 @@ export function DataTable<TData extends AdminDetails>({ columns, data, onEdit, o
                     >
                       {cell.column.id === 'chevron' ? (
                         <div className="flex items-center justify-center cursor-pointer" onClick={() => handleRowToggle(row.id)}>
-                          <ChevronDown className={cn('h-4 w-4 transition-transform duration-300', expandedRow === row.id && 'rotate-180')} />
+                          <ChevronDown className={cn('h-4 w-4', expandedRow === row.id && 'rotate-180')} />
                         </div>
                       ) : (
                         flexRender(cell.column.columnDef.cell, cell.getContext())
@@ -214,14 +188,7 @@ export function DataTable<TData extends AdminDetails>({ columns, data, onEdit, o
                 </TableRow>
                 {expandedRow === row.id && (
                   <TableRow 
-                    className={cn(
-                      "md:hidden border-b hover:!bg-inherit",
-                      index >= visibleRows && 'opacity-0',
-                      'transition-all duration-300 ease-in-out'
-                    )}
-                    style={{
-                      transform: index >= visibleRows ? 'translateY(10px)' : 'translateY(0)',
-                    }}
+                    className="md:hidden border-b hover:!bg-inherit"
                   >
                     <TableCell colSpan={columns.length} className="p-0 text-sm">
                       <ExpandedRowContent
diff --git a/dashboard/src/components/admins/filters.tsx b/dashboard/src/components/admins/filters.tsx
@@ -38,7 +38,7 @@ export function Filters<T extends BaseFilters>({ filters, onFilterChange }: Filt
         username: value ? value : null,
         offset: 0, // Reset to first page when search is updated
       } as Partial<T>)
-    }, 300),
+    }, 50),
     [onFilterChange],
   )
 
diff --git a/dashboard/src/components/dialogs/UserModal.tsx b/dashboard/src/components/dialogs/UserModal.tsx
@@ -8,8 +8,8 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '
 import { Input } from '@/components/ui/input'
 import { LoaderButton } from '@/components/ui/loader-button'
 import { Calendar as PersianCalendar } from '@/components/ui/persian-calendar'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { Switch } from '@/components/ui/switch'
 import { Textarea } from '@/components/ui/textarea'
 import useDirDetection from '@/hooks/use-dir-detection'
@@ -30,7 +30,7 @@ import {
 import { dateUtils, useRelativeExpiryDate } from '@/utils/dateFormatter'
 import { formatBytes } from '@/utils/formatByte'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
-import { CalendarIcon, Layers, ListStart, Lock, RefreshCcw, Users, X } from 'lucide-react'
+import { CalendarIcon, ChevronDown, Layers, ListStart, Lock, RefreshCcw, Users, X } from 'lucide-react'
 import React, { useEffect, useState, useTransition } from 'react'
 import { UseFormReturn } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
@@ -275,7 +275,7 @@ const ExpiryDateField = ({
         <PopoverContent
           className="w-auto p-0"
           align="start"
-          onInteractOutside={e => {
+          onInteractOutside={(e: Event) => {
             e.preventDefault()
             setCalendarOpen(false)
           }}
@@ -373,6 +373,98 @@ const ExpiryDateField = ({
 
 export { ExpiryDateField }
 
+// Custom Select component that works reliably on mobile
+const StatusSelect = ({
+  value,
+  onValueChange,
+  placeholder,
+  children,
+  disabled
+}: {
+  value?: string
+  onValueChange?: (value: string) => void
+  placeholder?: string
+  children: React.ReactNode
+  disabled?: boolean
+}) => {
+  const [open, setOpen] = useState(false)
+  const { t } = useTranslation()
+
+  const handleSelect = (selectedValue: string) => {
+    onValueChange?.(selectedValue)
+    setOpen(false)
+  }
+
+  const getStatusText = (statusValue?: string) => {
+    if (!statusValue) return placeholder || t('userDialog.selectStatus', { defaultValue: 'Select status' })
+
+    switch (statusValue) {
+      case 'active': return t('status.active', { defaultValue: 'Active' })
+      case 'disabled': return t('status.disabled', { defaultValue: 'Disabled' })
+      case 'on_hold': return t('status.on_hold', { defaultValue: 'On Hold' })
+      default: return placeholder || t('userDialog.selectStatus', { defaultValue: 'Select status' })
+    }
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-full justify-between h-9 px-3 py-2 text-sm"
+          disabled={disabled}
+        >
+          <span className="truncate">{getStatusText(value)}</span>
+          <ChevronDown className="h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[--radix-popover-trigger-width] p-1" align="start">
+        {React.Children.map(children, (child) => {
+          if (React.isValidElement(child) && child.props.value) {
+            return React.cloneElement(child, {
+              onSelect: handleSelect
+            })
+          }
+          return child
+        })}
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+const StatusSelectItem = ({
+  value,
+  children,
+  onSelect
+}: {
+  value: string
+  children: React.ReactNode
+  onSelect?: (value: string) => void
+}) => {
+  const getDotColor = () => {
+    switch (value) {
+      case 'active': return 'bg-green-500'
+      case 'disabled': return 'bg-zinc-500'
+      case 'on_hold': return 'bg-violet-500'
+      default: return 'bg-gray-500'
+    }
+  }
+
+  return (
+    <div
+      className="relative flex w-full min-w-0 cursor-pointer select-none items-center rounded-sm py-2 px-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground transition-colors"
+      onClick={() => onSelect?.(value)}
+    >
+      <span className="truncate min-w-0 flex-1 pr-2">{children}</span>
+      <span className="flex h-3.5 w-3.5 shrink-0 items-center justify-center">
+        <div className={`h-2 w-2 rounded-full ${getDotColor()}`} />
+      </span>
+    </div>
+  )
+}
+
 export default function UserModal({ isDialogOpen, onOpenChange, form, editingUser, editingUserId, onSuccessCallback }: UserModalProps) {
   const { t } = useTranslation()
   const dir = useDirDetection()
@@ -494,14 +586,14 @@ export default function UserModal({ isDialogOpen, onOpenChange, form, editingUse
     },
   )
 
-  // Fetch data for tabs with proper caching and refetch on page view
+  // Fetch data for tabs without caching
   const { data: templatesData, isLoading: templatesLoading } = useGetUserTemplates(undefined, {
     query: {
-      staleTime: 5 * 60 * 1000, // 5 minutes
-      gcTime: 10 * 60 * 1000, // 10 minutes
-      refetchOnWindowFocus: true,
+      staleTime: 0, // No stale time - always fetch fresh data
+      gcTime: 0, // No garbage collection time - no caching
+      refetchOnWindowFocus: false,
       refetchOnMount: true,
-      refetchOnReconnect: true,
+      refetchOnReconnect: false,
     },
   })
 
@@ -1081,6 +1173,7 @@ export default function UserModal({ isDialogOpen, onOpenChange, form, editingUse
     setUsePersianCalendar(i18n.language === 'fa')
   }, [i18n.language])
 
+
   return (
     <Dialog open={isDialogOpen} onOpenChange={handleModalOpenChange}>
       <DialogContent className={`lg:min-w-[900px] ${editingUser ? 'h-full sm:h-auto' : 'h-auto'}`}>
@@ -1154,23 +1247,18 @@ export default function UserModal({ isDialogOpen, onOpenChange, form, editingUse
                               <FormItem className="w-1/3">
                                 <FormLabel>{t('status', { defaultValue: 'Status' })}</FormLabel>
                                 <FormControl>
-                                  <Select
+                                  <StatusSelect
+                                    value={field.value || ''}
                                     onValueChange={value => {
                                       field.onChange(value)
                                       handleFieldChange('status', value)
-                                      handleFieldBlur('status')
                                     }}
-                                    value={field.value || ''}
+                                    placeholder={t('userDialog.selectStatus', { defaultValue: 'Select status' })}
                                   >
-                                    <SelectTrigger>
-                                      <SelectValue placeholder={t('userDialog.selectStatus', { defaultValue: 'Select status' })} />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                      <SelectItem value="active">{t('status.active', { defaultValue: 'Active' })}</SelectItem>
-                                      {editingUser && <SelectItem value="disabled">{t('status.disabled', { defaultValue: 'Disabled' })}</SelectItem>}
-                                      <SelectItem value="on_hold">{t('status.on_hold', { defaultValue: 'On Hold' })}</SelectItem>
-                                    </SelectContent>
-                                  </Select>
+                                    <StatusSelectItem value="active">{t('status.active', { defaultValue: 'Active' })}</StatusSelectItem>
+                                    {editingUser && <StatusSelectItem value="disabled">{t('status.disabled', { defaultValue: 'Disabled' })}</StatusSelectItem>}
+                                    <StatusSelectItem value="on_hold">{t('status.on_hold', { defaultValue: 'On Hold' })}</StatusSelectItem>
+                                  </StatusSelect>
                                 </FormControl>
                                 <FormMessage />
                               </FormItem>
@@ -1916,7 +2004,7 @@ export default function UserModal({ isDialogOpen, onOpenChange, form, editingUse
               >
                 {t('cancel', { defaultValue: 'Cancel' })}
               </Button>
-              <LoaderButton type="submit" isLoading={loading} disabled={false} loadingText={editingUser ? t('modifying') : t('creating')}>
+              <LoaderButton type="submit" isLoading={loading} disabled={!isFormValid} loadingText={editingUser ? t('modifying') : t('creating')}>
                 {editingUser ? t('modify', { defaultValue: 'Modify' }) : t('create', { defaultValue: 'Create' })}
               </LoaderButton>
             </div>
diff --git a/dashboard/src/components/nodes/Nodes.tsx b/dashboard/src/components/nodes/Nodes.tsx
@@ -30,8 +30,9 @@ export default function Nodes() {
 
   const { data: nodesData, isLoading } = useGetNodes(undefined, {
     query: {
-      refetchInterval: 5000,
-      refetchIntervalInBackground: true,
+      refetchInterval: 5000, // 5s
+      staleTime: 0, // No stale time - always fetch fresh data
+      gcTime: 0, // No garbage collection time - no caching
     },
   })
 
diff --git a/dashboard/src/components/users/data-table.tsx b/dashboard/src/components/users/data-table.tsx
diff --git a/dashboard/src/components/users/filters.tsx b/dashboard/src/components/users/filters.tsx
diff --git a/dashboard/src/components/users/users-table.tsx b/dashboard/src/components/users/users-table.tsx

Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@ export function Filters<T extends BaseFilters>({ filters, onFilterChange }: Filt`
`38`	`38`	`username: value ? value : null,`
`39`	`39`	`offset: 0, // Reset to first page when search is updated`
`40`	`40`	`} as Partial<T>)`
`41`		`- }, 300),`
	`41`	`+ }, 50),`
`42`	`42`	`[onFilterChange],`
`43`	`43`	`)`
`44`	`44`