chore: format frontend code

Author: ImMohammad20000

dashboard/README.md

@@ -25,8 +25,8 @@ Copy `example.env` to `.env` then set the backend api address:
 
 #### Environment variables
 
-| Name          | Description                                                                          |
-| ------------- | ------------------------------------------------------------------------------------ |
+| Name          | Description                                                                                 |
+| ------------- | ------------------------------------------------------------------------------------------- |
 | VITE_BASE_API | The api url of the deployed backend ([PasarGuard](https://github.com/PasarGuard/panel.git)) |
 
 ## Start development server

dashboard/public/statics/locales/en.json

@@ -1505,4 +1505,4 @@
     "donate": "Donate Now",
     "starOnGitHub": "Star on GitHub"
   }
-}
+}

dashboard/public/statics/locales/fa.json

@@ -1181,7 +1181,7 @@
     "radiusMedium": "متوسط",
     "radiusLarge": "بزرگ"
   },
-    "coreConfigModal": {
+  "coreConfigModal": {
     "addConfig": "افزودن پیکربندی هسته",
     "createNewConfig": "ایجاد پیکربندی جدید هسته",
     "editCore": "ویرایش پیکربندی هسته",
@@ -1485,4 +1485,4 @@
     "donate": "حمایت مالی",
     "starOnGitHub": "ستاره در GitHub"
   }
-}
+}

dashboard/public/statics/locales/ru.json

@@ -1494,4 +1494,4 @@
     "donate": "Поддержать проект",
     "starOnGitHub": "Поставить звезду на GitHub"
   }
-}
+}

dashboard/public/statics/locales/zh.json

@@ -1537,4 +1537,4 @@
     "donate": "立即捐赠",
     "starOnGitHub": "在 GitHub 上加星"
   }
-}
+}

dashboard/src/App.tsx

@@ -10,13 +10,13 @@ import { queryClient } from './utils/query-client'
 export default function App() {
   return (
     <ThemeProvider defaultTheme="system" storageKey="theme">
-        <QueryClientProvider client={queryClient}>
-          <main>
-            <Toaster />
-            <DonationPopup />
-            <RouterProvider router={router} />
-          </main>
-        </QueryClientProvider>
+      <QueryClientProvider client={queryClient}>
+        <main>
+          <Toaster />
+          <DonationPopup />
+          <RouterProvider router={router} />
+        </main>
+      </QueryClientProvider>
     </ThemeProvider>
   )
 }

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 === "expired" || user.status === "limited" ? "active" : user.status,
+      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 === 'disabled' ? user.status as any : '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 || '',

dashboard/src/components/AdminStatistics.tsx

@@ -23,48 +23,50 @@ export default function AdminStatisticsSection({ data }: AdminsStatisticsProps)
       icon: User,
       label: t('admins.total'),
       value: total,
-      color: ''
+      color: '',
     },
     {
       icon: UserCheck,
       label: t('admins.active'),
       value: active,
-      color: ''
+      color: '',
     },
     {
       icon: UserX,
       label: t('admins.disable'),
       value: disabled,
-      color: ''
-    }
+      color: '',
+    },
   ]
 
   return (
-    <div className={cn('flex flex-col lg:flex-row items-center justify-between gap-x-4 gap-y-4', dir === 'rtl' && 'lg:flex-row-reverse')}>
+    <div className={cn('flex flex-col items-center justify-between gap-x-4 gap-y-4 lg:flex-row', dir === 'rtl' && 'lg:flex-row-reverse')}>
       {stats.map((stat, idx) => (
         <Card
           key={stat.label}
           dir={dir}
-          className={cn(
-            "group relative w-full animate-fade-in rounded-md transition-all duration-300 hover:shadow-lg",
-          )}
+          className={cn('group relative w-full animate-fade-in rounded-md transition-all duration-300 hover:shadow-lg')}
           style={{
             animationDuration: '600ms',
             animationDelay: `${(idx + 1) * 100}ms`,
-            animationFillMode: 'both'
+            animationFillMode: 'both',
           }}
         >
-          <div className={cn(
-            'absolute inset-0 bg-gradient-to-r from-primary/10 to-transparent opacity-0 transition-opacity duration-500',
-            'dark:from-primary/5 dark:to-transparent',
-            'group-hover:opacity-100'
-          )} />
-          <CardTitle className="flex items-center justify-between gap-x-4 relative z-10 p-5">
+          <div
+            className={cn(
+              'absolute inset-0 bg-gradient-to-r from-primary/10 to-transparent opacity-0 transition-opacity duration-500',
+              'dark:from-primary/5 dark:to-transparent',
+              'group-hover:opacity-100',
+            )}
+          />
+          <CardTitle className="relative z-10 flex items-center justify-between gap-x-4 p-5">
             <div className="flex items-center gap-x-4">
-              {React.createElement(stat.icon, { className: "h-6 w-6" })}
+              {React.createElement(stat.icon, { className: 'h-6 w-6' })}
               <span>{stat.label}</span>
             </div>
-            <span className="text-3xl font-bold" dir="ltr">{numberWithCommas(stat.value)}</span>
+            <span className="text-3xl font-bold" dir="ltr">
+              {numberWithCommas(stat.value)}
+            </span>
           </CardTitle>
         </Card>
       ))}

dashboard/src/components/AdminStatusBadge.tsx

@@ -18,42 +18,34 @@ export const AdminStatusBadge: FC<AdminStatusProps> = ({ isSudo, isDisabled }) =
       return {
         color: statusColors['disabled']?.statusColor || 'bg-gray-400 text-white',
         icon: null,
-        text: t('disabled')
+        text: t('disabled'),
       }
     }
-    
+
     if (isSudo) {
       return {
         color: 'bg-violet-500 text-white',
         icon: Shield,
-        text: t('sudo')
+        text: t('sudo'),
       }
     }
-    
+
     return {
       color: statusColors['active']?.statusColor || 'bg-green-500 text-white',
       icon: UserRound,
-      text: t('admin')
+      text: t('admin'),
     }
   }
 
   const statusInfo = getStatusInfo()
   const StatusIcon = statusInfo.icon
 
   return (
-    <Badge
-      className={cn(
-        'flex items-center justify-center rounded-full px-2 py-1 w-fit gap-x-2 pointer-events-none',
-        statusInfo.color,
-        'py-2.5 h-6 px-1.5 sm:py-0.5 sm:h-auto sm:px-1'
-      )}
-    >
+    <Badge className={cn('pointer-events-none flex w-fit items-center justify-center gap-x-2 rounded-full px-2 py-1', statusInfo.color, 'h-6 px-1.5 py-2.5 sm:h-auto sm:px-1 sm:py-0.5')}>
       <div className="flex items-center gap-1 sm:px-1">
-        {StatusIcon && <StatusIcon className="w-4 h-4 sm:w-3 sm:h-3" />}
-        <span className="capitalize text-nowrap font-medium text-xs">
-          {statusInfo.text}
-        </span>
+        {StatusIcon && <StatusIcon className="h-4 w-4 sm:h-3 sm:w-3" />}
+        <span className="text-nowrap text-xs font-medium capitalize">{statusInfo.text}</span>
       </div>
     </Badge>
   )
-}
+}

dashboard/src/components/DonationPopup.tsx

@@ -22,7 +22,7 @@ const generateChecksum = (lastShown: string | null, nextShowTime: string): strin
   let hash = 0
   for (let i = 0; i < data.length; i++) {
     const char = data.charCodeAt(i)
-    hash = ((hash << 5) - hash) + char
+    hash = (hash << 5) - hash + char
     hash = hash & hash // Convert to 32-bit integer
   }
   return Math.abs(hash).toString(36)
@@ -58,7 +58,7 @@ const validateData = (data: DonationData): boolean => {
     }
 
     // Validate: nextShowTime shouldn't be more than 4 days after lastShown (max 3 days + 1 day buffer)
-    const maxExpectedNext = lastShownTimestamp + (4 * 24 * 60 * 60 * 1000)
+    const maxExpectedNext = lastShownTimestamp + 4 * 24 * 60 * 60 * 1000
     if (nextShowTimestamp > maxExpectedNext) {
       console.warn('Donation popup: nextShowTime too far in future')
       return false
@@ -67,9 +67,9 @@ const validateData = (data: DonationData): boolean => {
 
   // Validate: nextShowTime shouldn't be more than 1 year in the past or future from now
   const now = Date.now()
-  const oneYearAgo = now - (365 * 24 * 60 * 60 * 1000)
-  const oneYearLater = now + (365 * 24 * 60 * 60 * 1000)
-  
+  const oneYearAgo = now - 365 * 24 * 60 * 60 * 1000
+  const oneYearLater = now + 365 * 24 * 60 * 60 * 1000
+
   if (nextShowTimestamp < oneYearAgo || nextShowTimestamp > oneYearLater) {
     console.warn('Donation popup: nextShowTime outside reasonable range')
     return false
@@ -111,7 +111,7 @@ export default function DonationPopup() {
     const checkShouldShow = () => {
       const data = getStorageData()
       const now = Date.now()
-      
+
       if (!data) {
         // First time - schedule for 1 hour from now and store it
         const nextShowTime = new Date(now + FIRST_SHOW_DELAY).toISOString()
@@ -139,15 +139,15 @@ export default function DonationPopup() {
   const showPopup = () => {
     const now = Date.now()
     // Update storage: set lastShown to now and nextShowTime to 3 days from now
-    const nextShowTime = new Date(now + (DAYS_BETWEEN_SHOWS * 24 * 60 * 60 * 1000)).toISOString()
-    setStorageData({ 
-      lastShown: new Date(now).toISOString(), 
-      nextShowTime 
+    const nextShowTime = new Date(now + DAYS_BETWEEN_SHOWS * 24 * 60 * 60 * 1000).toISOString()
+    setStorageData({
+      lastShown: new Date(now).toISOString(),
+      nextShowTime,
     })
-    
+
     // Make visible immediately
     setIsVisible(true)
-    
+
     // Start animation after a frame for smooth CSS transition
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
@@ -174,63 +174,57 @@ export default function DonationPopup() {
   if (!isVisible) return null
 
   return (
-    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 pointer-events-none">
+    <div className="pointer-events-none fixed inset-0 z-[100] flex items-center justify-center p-4">
       {/* Backdrop */}
       <div
         className={cn(
-          'absolute inset-0 bg-black/40 backdrop-blur-sm pointer-events-auto',
-          'transition-opacity duration-700 ease-in-out will-change-opacity',
-          isAnimating ? 'opacity-100' : 'opacity-0'
+          'pointer-events-auto absolute inset-0 bg-black/40 backdrop-blur-sm',
+          'will-change-opacity transition-opacity duration-700 ease-in-out',
+          isAnimating ? 'opacity-100' : 'opacity-0',
         )}
         onClick={handleClose}
       />
 
       {/* Popup */}
       <div
         className={cn(
-          'relative w-full max-w-md pointer-events-auto',
+          'pointer-events-auto relative w-full max-w-md',
           'transform transition-all duration-700 ease-out will-change-transform',
-          isAnimating
-            ? 'translate-y-0 opacity-100 scale-100'
-            : '-translate-y-8 opacity-0 scale-95'
+          isAnimating ? 'translate-y-0 scale-100 opacity-100' : '-translate-y-8 scale-95 opacity-0',
         )}
       >
-        <div className="relative bg-gradient-to-br from-card via-card to-card/95 border-2 border-primary/20 rounded-2xl shadow-2xl overflow-hidden">
+        <div className="relative overflow-hidden rounded-2xl border-2 border-primary/20 bg-gradient-to-br from-card via-card to-card/95 shadow-2xl">
           {/* Animated gradient background */}
           <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-primary/10" />
           <div className="absolute inset-0 bg-gradient-to-tr from-primary/0 via-primary/5 to-primary/0" />
-          
+
           {/* Close button */}
-          <button
-            onClick={handleClose}
-            className="absolute top-4 right-4 z-10 p-2 rounded-full bg-background/80 hover:bg-background transition-all duration-200 hover:scale-110"
-            aria-label="Close"
-          >
-            <X className="w-4 h-4" />
+          <button onClick={handleClose} className="absolute right-4 top-4 z-10 rounded-full bg-background/80 p-2 transition-all duration-200 hover:scale-110 hover:bg-background" aria-label="Close">
+            <X className="h-4 w-4" />
           </button>
 
           {/* Content */}
           <div className="relative p-8">
             {/* Heart icon with enhanced animation */}
-            <div className="flex justify-center mb-6">
+            <div className="mb-6 flex justify-center">
               <div className="relative">
-                <div className="absolute inset-0 bg-primary/30 rounded-full blur-xl" />
-                <div className="absolute -inset-2 bg-primary/20 rounded-full animate-ping" style={{ animationDuration: '2s' }} />
-                <div className="relative bg-gradient-to-br from-primary/20 to-primary/10 p-4 rounded-full backdrop-blur-sm border border-primary/20">
-                  <Heart className="w-10 h-10 text-primary fill-primary" />
+                <div className="absolute inset-0 rounded-full bg-primary/30 blur-xl" />
+                <div className="absolute -inset-2 animate-ping rounded-full bg-primary/20" style={{ animationDuration: '2s' }} />
+                <div className="relative rounded-full border border-primary/20 bg-gradient-to-br from-primary/20 to-primary/10 p-4 backdrop-blur-sm">
+                  <Heart className="h-10 w-10 fill-primary text-primary" />
                 </div>
               </div>
             </div>
 
             {/* Title */}
-            <h3 className="text-2xl font-bold text-center mb-3 bg-gradient-to-r from-primary via-primary to-primary/80 bg-clip-text text-transparent">
+            <h3 className="mb-3 bg-gradient-to-r from-primary via-primary to-primary/80 bg-clip-text text-center text-2xl font-bold text-transparent">
               {t('donation.title', { defaultValue: 'Support PasarGuard' })}
             </h3>
 
             {/* Message */}
-            <p className="text-sm text-muted-foreground text-center mb-6 leading-relaxed px-2">
-              {t('donation.message', { 
-                defaultValue: 'Your support helps us improve PasarGuard and build better features for everyone!' 
+            <p className="mb-6 px-2 text-center text-sm leading-relaxed text-muted-foreground">
+              {t('donation.message', {
+                defaultValue: 'Your support helps us improve PasarGuard and build better features for everyone!',
               })}
             </p>
 
@@ -239,24 +233,19 @@ export default function DonationPopup() {
               <Button
                 onClick={handleDonate}
                 size="lg"
-                className="w-full bg-gradient-to-r from-primary to-primary/90 hover:from-primary/90 hover:to-primary text-primary-foreground font-semibold shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-[1.03] active:scale-[0.98]"
+                className="w-full bg-gradient-to-r from-primary to-primary/90 font-semibold text-primary-foreground shadow-lg transition-all duration-300 hover:scale-[1.03] hover:from-primary/90 hover:to-primary hover:shadow-xl active:scale-[0.98]"
               >
-                <Heart className="w-5 h-5 mr-2 fill-current" />
+                <Heart className="mr-2 h-5 w-5 fill-current" />
                 {t('donation.donate', { defaultValue: 'Donate Now' })}
               </Button>
 
               <Button
                 onClick={handleGitHub}
                 variant="outline"
                 size="lg"
-                className="w-full border-primary/30 hover:bg-primary/5 hover:border-primary/50 transition-all duration-300 hover:scale-[1.03] active:scale-[0.98]"
+                className="w-full border-primary/30 transition-all duration-300 hover:scale-[1.03] hover:border-primary/50 hover:bg-primary/5 active:scale-[0.98]"
               >
-                <svg
-                  className="w-5 h-5 mr-2"
-                  fill="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
+                <svg className="mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                   <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
                 </svg>
                 {t('donation.starOnGitHub', { defaultValue: 'Star on GitHub' })}
@@ -268,4 +257,3 @@ export default function DonationPopup() {
     </div>
   )
 }
-