create-fullstack-scaffold 0.4.11 → 0.4.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-fullstack-scaffold",
-  "version": "0.4.11",
+  "version": "0.4.12",
   "type": "module",
   "bin": {
     "create-fullstack-scaffold": "dist/cli/index.js"

package/template/src/admin/App.tsx

@@ -80,7 +80,10 @@ export const App: React.FC<{ basePath?: string }> = ({ basePath = '/admin' }) =>
                     <Route path="/content" element={<ContentPage />} />
                     <Route path="/system/settings" element={<SettingsPage />} />
                     <Route path="/system/logs" element={<SystemLogsPage />} />
-                    <Route path="/system/monitor" element={<ComingSoonPage title="System Monitor" />} />
+                    <Route
+                      path="/system/monitor"
+                      element={<ComingSoonPage title="System Monitor" />}
+                    />
                     <Route path="/system/permissions" element={<PermissionsPage />} />
                     <Route path="/system/roles" element={<RolesPage />} />
                   </Routes>

package/template/src/admin/components/NotificationDrawer.tsx

@@ -17,11 +17,7 @@ const typeConfig: Record<
   NotificationType,
   {
     colorToken: 'colorInfo' | 'colorWarning' | 'colorError' | 'colorSuccess'
-    bgToken:
-      | 'colorInfoBg'
-      | 'colorWarningBg'
-      | 'colorErrorBg'
-      | 'colorSuccessBg'
+    bgToken: 'colorInfoBg' | 'colorWarningBg' | 'colorErrorBg' | 'colorSuccessBg'
     icon: React.ReactNode
   }
 > = {
@@ -50,7 +46,7 @@ const typeConfig: Record<
 function formatTime(
   dateString: string,
   locale: string,
-  t: (key: string, options?: Record<string, unknown>) => string,
+  t: (key: string, options?: Record<string, unknown>) => string
 ): string {
   const date = new Date(dateString)
   const now = new Date()
@@ -90,15 +86,12 @@ export const NotificationDrawer: React.FC<NotificationDrawerProps> = ({
         className="p-4 cursor-pointer transition-colors"
         style={{
           borderBottom: `1px solid ${token.colorBorderSecondary}`,
-          backgroundColor: !notif.read ? token.colorInfoBg : undefined,
+          backgroundColor: !notif.read ? (token.colorInfoBg ?? 'transparent') : undefined,
         }}
         onClick={() => !notif.read && onMarkAsRead(notif.id)}
-        onMouseEnter={e =>
-          (e.currentTarget.style.backgroundColor = token.colorBgTextHover)
-        }
+        onMouseEnter={e => (e.currentTarget.style.backgroundColor = token.colorBgTextHover ?? 'transparent')}
         onMouseLeave={e =>
-          (e.currentTarget.style.backgroundColor =
-            !notif.read ? token.colorInfoBg : undefined)
+          (e.currentTarget.style.backgroundColor = !notif.read ? (token.colorInfoBg ?? 'transparent') : 'transparent')
         }
       >
         <div className="flex items-start gap-3">
@@ -110,10 +103,7 @@ export const NotificationDrawer: React.FC<NotificationDrawerProps> = ({
           </div>
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2">
-              <span
-                className="font-medium truncate"
-                style={{ color: token.colorText }}
-              >
+              <span className="font-medium truncate" style={{ color: token.colorText }}>
                 {notif.title}
               </span>
               {!notif.read && (
@@ -123,16 +113,10 @@ export const NotificationDrawer: React.FC<NotificationDrawerProps> = ({
                 />
               )}
             </div>
-            <p
-              className="text-sm mt-1 line-clamp-2"
-              style={{ color: token.colorTextSecondary }}
-            >
+            <p className="text-sm mt-1 line-clamp-2" style={{ color: token.colorTextSecondary }}>
               {notif.message}
             </p>
-            <span
-              className="text-xs mt-1 block"
-              style={{ color: token.colorTextTertiary }}
-            >
+            <span className="text-xs mt-1 block" style={{ color: token.colorTextTertiary }}>
               {formatTime(notif.createdAt, currentLanguage, t)}
             </span>
           </div>
@@ -149,10 +133,7 @@ export const NotificationDrawer: React.FC<NotificationDrawerProps> = ({
       key: 'all',
       label: `${t('notification.all')} (${notifications.length})`,
       children: (
-        <div
-          className="overflow-y-auto"
-          style={{ maxHeight: 'calc(100vh - 200px)' }}
-        >
+        <div className="overflow-y-auto" style={{ maxHeight: 'calc(100vh - 200px)' }}>
           {loading ? (
             <div className="flex items-center justify-center py-12">
               <Spin />
@@ -173,10 +154,7 @@ export const NotificationDrawer: React.FC<NotificationDrawerProps> = ({
       key: 'unread',
       label: `${t('notification.unread')} (${unreadNotifications.length})`,
       children: (
-        <div
-          className="overflow-y-auto"
-          style={{ maxHeight: 'calc(100vh - 200px)' }}
-        >
+        <div className="overflow-y-auto" style={{ maxHeight: 'calc(100vh - 200px)' }}>
           {unreadNotifications.length === 0 ? (
             <Empty
               image={Empty.PRESENTED_IMAGE_SIMPLE}
@@ -193,10 +171,7 @@ export const NotificationDrawer: React.FC<NotificationDrawerProps> = ({
       key: 'read',
       label: `${t('notification.read')} (${readNotifications.length})`,
       children: (
-        <div
-          className="overflow-y-auto"
-          style={{ maxHeight: 'calc(100vh - 200px)' }}
-        >
+        <div className="overflow-y-auto" style={{ maxHeight: 'calc(100vh - 200px)' }}>
           {readNotifications.length === 0 ? (
             <Empty
               image={Empty.PRESENTED_IMAGE_SIMPLE}
@@ -255,12 +230,8 @@ export const NotificationBell: React.FC<{
       className="p-2 rounded-lg transition-colors relative"
       style={{ color: token.colorTextSecondary }}
       onClick={onClick}
-      onMouseEnter={e =>
-        (e.currentTarget.style.backgroundColor = token.colorBgTextHover)
-      }
-      onMouseLeave={e =>
-        (e.currentTarget.style.backgroundColor = 'transparent')
-      }
+      onMouseEnter={e => (e.currentTarget.style.backgroundColor = token.colorBgTextHover)}
+      onMouseLeave={e => (e.currentTarget.style.backgroundColor = 'transparent')}
     >
       <Bell className="w-5 h-5" />
       {unreadCount > 0 && (

package/template/src/admin/components/ThemeToggle.tsx

@@ -13,10 +13,10 @@ export const ThemeToggle: React.FC = () => {
       onClick={toggleTheme}
       className="p-2 rounded-lg transition-colors cursor-pointer border-none bg-transparent"
       style={{ color: token.colorText }}
-      onMouseEnter={(e) => {
+      onMouseEnter={e => {
         e.currentTarget.style.backgroundColor = token.colorFillQuaternary
       }}
-      onMouseLeave={(e) => {
+      onMouseLeave={e => {
         e.currentTarget.style.backgroundColor = 'transparent'
       }}
       title={mode === 'light' ? t('theme.toggleDark') : t('theme.toggleLight')}

package/template/src/admin/layouts/Header.tsx

@@ -37,11 +37,14 @@ export const Header: React.FC<HeaderProps> = ({ collapsed, onToggle }) => {
     navigate('/login')
   }
 
-  const ROLE_OPTIONS = useMemo(() => [
-    { label: t('header.superAdmin'), value: 'super_admin' },
-    { label: t('header.moderator'), value: 'moderator' },
-    { label: t('header.operator'), value: 'operator' },
-  ], [t])
+  const ROLE_OPTIONS = useMemo(
+    () => [
+      { label: t('header.superAdmin'), value: 'super_admin' },
+      { label: t('header.moderator'), value: 'moderator' },
+      { label: t('header.operator'), value: 'operator' },
+    ],
+    [t]
+  )
 
   const userMenuItems: MenuProps['items'] = [
     {
@@ -83,10 +86,10 @@ export const Header: React.FC<HeaderProps> = ({ collapsed, onToggle }) => {
             onClick={onToggle}
             className="p-2 rounded-lg transition-colors cursor-pointer border-none bg-transparent"
             style={{ color: token.colorText }}
-            onMouseEnter={(e) => {
+            onMouseEnter={e => {
               e.currentTarget.style.backgroundColor = token.colorFillQuaternary
             }}
-            onMouseLeave={(e) => {
+            onMouseLeave={e => {
               e.currentTarget.style.backgroundColor = 'transparent'
             }}
             data-testid="toggle-sidebar-button"
@@ -117,10 +120,10 @@ export const Header: React.FC<HeaderProps> = ({ collapsed, onToggle }) => {
             <button
               className="flex items-center gap-2 p-1.5 rounded-lg transition-colors cursor-pointer border-none bg-transparent"
               style={{ color: token.colorText }}
-              onMouseEnter={(e) => {
+              onMouseEnter={e => {
                 e.currentTarget.style.backgroundColor = token.colorFillQuaternary
               }}
-              onMouseLeave={(e) => {
+              onMouseLeave={e => {
                 e.currentTarget.style.backgroundColor = 'transparent'
               }}
             >

package/template/src/admin/pages/ContentPage.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { Table, Card, Tag, Button, Space, Modal, Form, Input, Select, message } from 'antd'
 import { Plus, Edit, Delete } from 'lucide-react'
 import { PermissionGuard } from '../components/PermissionGuard'
@@ -41,11 +41,7 @@ export const ContentPage: React.FC = () => {
     return map[status] || status
   }
 
-  useEffect(() => {
-    fetchContents()
-  }, [])
-
-  const fetchContents = async () => {
+  const fetchContents = useCallback(async () => {
     setLoading(true)
     try {
       const response = await apiClient.api.contents.$get({ query: {} })
@@ -60,7 +56,11 @@ export const ContentPage: React.FC = () => {
     } finally {
       setLoading(false)
     }
-  }
+  }, [t])
+
+  useEffect(() => {
+    fetchContents()
+  }, [fetchContents])
 
   const handleCreate = () => {
     setEditingContent(null)
@@ -142,9 +142,7 @@ export const ContentPage: React.FC = () => {
       title: t('common.status'),
       dataIndex: 'status',
       key: 'status',
-      render: (status: string) => (
-        <Tag color={STATUS_COLORS[status]}>{getStatusLabel(status)}</Tag>
-      ),
+      render: (status: string) => <Tag color={STATUS_COLORS[status]}>{getStatusLabel(status)}</Tag>,
     },
     {
       title: t('content.author'),

package/template/src/admin/pages/DashboardPage.tsx

@@ -41,10 +41,30 @@ export const DashboardPage: React.FC = () => {
   }
 
   const statCards = [
-    { title: t('dashboard.totalTodos'), value: stats?.totalTodos || 0, icon: CheckCircle, color: 'bg-blue-500' },
-    { title: t('dashboard.pending'), value: stats?.pendingTodos || 0, icon: Clock, color: 'bg-yellow-500' },
-    { title: t('dashboard.completed'), value: stats?.completedTodos || 0, icon: TrendingUp, color: 'bg-green-500' },
-    { title: t('dashboard.lastUpdated'), value: stats?.lastUpdated || '-', icon: Activity, color: 'bg-purple-500' },
+    {
+      title: t('dashboard.totalTodos'),
+      value: stats?.totalTodos || 0,
+      icon: CheckCircle,
+      color: 'bg-blue-500',
+    },
+    {
+      title: t('dashboard.pending'),
+      value: stats?.pendingTodos || 0,
+      icon: Clock,
+      color: 'bg-yellow-500',
+    },
+    {
+      title: t('dashboard.completed'),
+      value: stats?.completedTodos || 0,
+      icon: TrendingUp,
+      color: 'bg-green-500',
+    },
+    {
+      title: t('dashboard.lastUpdated'),
+      value: stats?.lastUpdated || '-',
+      icon: Activity,
+      color: 'bg-purple-500',
+    },
   ]
 
   const notificationTypeOptions: { value: NotificationType; label: string }[] = [
@@ -75,10 +95,7 @@ export const DashboardPage: React.FC = () => {
 
   return (
     <div>
-      <h1
-        className="text-2xl font-bold mb-4"
-        style={{ color: token.colorText }}
-      >
+      <h1 className="text-2xl font-bold mb-4" style={{ color: token.colorText }}>
         {t('dashboard.title')}
       </h1>
 
@@ -95,20 +112,16 @@ export const DashboardPage: React.FC = () => {
               }}
             >
               <div className="flex items-center justify-between mb-2">
-                <div className={`p-3 rounded-md ${card.color} w-10 h-10 flex items-center justify-center`}>
+                <div
+                  className={`p-3 rounded-md ${card.color} w-10 h-10 flex items-center justify-center`}
+                >
                   <Icon className="w-6 h-6 text-white" />
                 </div>
               </div>
-              <h3
-                className="text-sm font-medium"
-                style={{ color: token.colorTextSecondary }}
-              >
+              <h3 className="text-sm font-medium" style={{ color: token.colorTextSecondary }}>
                 {card.title}
               </h3>
-              <p
-                className="text-2xl font-bold mt-1"
-                style={{ color: token.colorText }}
-              >
+              <p className="text-2xl font-bold mt-1" style={{ color: token.colorText }}>
                 {card.value}
               </p>
             </div>

package/template/src/admin/pages/DisputesPage.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { Table, Card, Tag, Button, Space, Modal, message, Descriptions } from 'antd'
 import { Eye, AlertTriangle, CheckCircle } from 'lucide-react'
 import { PermissionGuard } from '../components/PermissionGuard'
@@ -42,11 +42,7 @@ export const DisputesPage: React.FC = () => {
     return map[status] || status
   }
 
-  useEffect(() => {
-    fetchDisputes()
-  }, [])
-
-  const fetchDisputes = async () => {
+  const fetchDisputes = useCallback(async () => {
     setLoading(true)
     try {
       const response = await apiClient.api.disputes.$get({ query: {} })
@@ -61,7 +57,11 @@ export const DisputesPage: React.FC = () => {
     } finally {
       setLoading(false)
     }
-  }
+  }, [t])
+
+  useEffect(() => {
+    fetchDisputes()
+  }, [fetchDisputes])
 
   const handleResolve = (dispute: Dispute) => {
     Modal.confirm({
@@ -138,9 +138,7 @@ export const DisputesPage: React.FC = () => {
       title: t('common.status'),
       dataIndex: 'status',
       key: 'status',
-      render: (status: string) => (
-        <Tag color={STATUS_COLORS[status]}>{getStatusLabel(status)}</Tag>
-      ),
+      render: (status: string) => <Tag color={STATUS_COLORS[status]}>{getStatusLabel(status)}</Tag>,
     },
     {
       title: t('common.createdAt'),
@@ -244,11 +242,15 @@ export const DisputesPage: React.FC = () => {
             <Descriptions.Item label={t('disputes.disputeNo')}>
               <code>{selectedDispute.disputeNo}</code>
             </Descriptions.Item>
-            <Descriptions.Item label={t('disputes.orderNo')}>{selectedDispute.orderNo}</Descriptions.Item>
+            <Descriptions.Item label={t('disputes.orderNo')}>
+              {selectedDispute.orderNo}
+            </Descriptions.Item>
             <Descriptions.Item label={t('disputes.customer')}>
               {selectedDispute.customerName} ({selectedDispute.customerEmail})
             </Descriptions.Item>
-            <Descriptions.Item label={t('disputes.type')}>{getTypeLabel(selectedDispute.type)}</Descriptions.Item>
+            <Descriptions.Item label={t('disputes.type')}>
+              {getTypeLabel(selectedDispute.type)}
+            </Descriptions.Item>
             <Descriptions.Item label={t('disputes.amount')}>
               <span className="text-lg font-bold text-red-600">
                 ¥{selectedDispute.amount.toFixed(2)}
@@ -259,9 +261,13 @@ export const DisputesPage: React.FC = () => {
                 {getStatusLabel(selectedDispute.status)}
               </Tag>
             </Descriptions.Item>
-            <Descriptions.Item label={t('tickets.description')}>{selectedDispute.description}</Descriptions.Item>
+            <Descriptions.Item label={t('tickets.description')}>
+              {selectedDispute.description}
+            </Descriptions.Item>
             {selectedDispute.resolution && (
-              <Descriptions.Item label={t('disputes.resolution')}>{selectedDispute.resolution}</Descriptions.Item>
+              <Descriptions.Item label={t('disputes.resolution')}>
+                {selectedDispute.resolution}
+              </Descriptions.Item>
             )}
           </Descriptions>
         )}

package/template/src/admin/pages/LoginPage.tsx

@@ -68,8 +68,16 @@ export const LoginPage: React.FC = () => {
     <div className="min-h-screen flex items-center justify-center bg-gray-100">
       <Card className="w-full max-w-md" title={t('login.title')}>
         <Spin spinning={loading}>
-          <Form form={form} onFinish={handleSubmit} layout="vertical" data-testid="admin-login-form">
-            <Form.Item name="username" rules={[{ required: true, message: t('login.usernameRequired') }]}>
+          <Form
+            form={form}
+            onFinish={handleSubmit}
+            layout="vertical"
+            data-testid="admin-login-form"
+          >
+            <Form.Item
+              name="username"
+              rules={[{ required: true, message: t('login.usernameRequired') }]}
+            >
               <Input
                 prefix={<UserOutlined />}
                 placeholder={t('login.username')}
@@ -77,7 +85,10 @@ export const LoginPage: React.FC = () => {
                 data-testid="admin-login-username"
               />
             </Form.Item>
-            <Form.Item name="password" rules={[{ required: true, message: t('login.passwordRequired') }]}>
+            <Form.Item
+              name="password"
+              rules={[{ required: true, message: t('login.passwordRequired') }]}
+            >
               <Input.Password
                 prefix={<LockOutlined />}
                 placeholder={t('login.password')}

package/template/src/admin/pages/OrdersPage.tsx

@@ -135,9 +135,7 @@ export const OrdersPage: React.FC = () => {
       title: t('orders.status'),
       dataIndex: 'status',
       key: 'status',
-      render: (status: string) => (
-        <Tag color={STATUS_COLORS[status]}>{getLabel(status)}</Tag>
-      ),
+      render: (status: string) => <Tag color={STATUS_COLORS[status]}>{getLabel(status)}</Tag>,
     },
     {
       title: t('common.createdAt'),
@@ -282,9 +280,15 @@ export const OrdersPage: React.FC = () => {
             <Descriptions.Item label={t('orders.orderNo')}>
               <code>{selectedOrder.orderNo}</code>
             </Descriptions.Item>
-            <Descriptions.Item label={t('orders.customerName')}>{selectedOrder.customerName}</Descriptions.Item>
-            <Descriptions.Item label={t('orders.customerEmail')}>{selectedOrder.customerEmail}</Descriptions.Item>
-            <Descriptions.Item label={t('orders.productName')}>{selectedOrder.productName}</Descriptions.Item>
+            <Descriptions.Item label={t('orders.customerName')}>
+              {selectedOrder.customerName}
+            </Descriptions.Item>
+            <Descriptions.Item label={t('orders.customerEmail')}>
+              {selectedOrder.customerEmail}
+            </Descriptions.Item>
+            <Descriptions.Item label={t('orders.productName')}>
+              {selectedOrder.productName}
+            </Descriptions.Item>
             <Descriptions.Item label={t('orders.orderAmount')}>
               <span className="text-lg font-bold text-green-600">
                 ¥{selectedOrder.amount.toFixed(2)}

package/template/src/admin/pages/PermissionsPage.tsx

@@ -64,9 +64,7 @@ export const PermissionsPage: React.FC = () => {
         <div className="grid grid-cols-3 gap-4">
           {roles.map(role => (
             <Card key={role.role} size="small">
-              <div className="text-lg font-semibold mb-2">
-                {roleLabels[role.role] || role.role}
-              </div>
+              <div className="text-lg font-semibold mb-2">{roleLabels[role.role] || role.role}</div>
               <div className="text-sm text-gray-500">
                 {t('permissions.permissionCount', { count: role.permissions.length })}
               </div>

package/template/src/admin/pages/RegisterPage.tsx

@@ -59,11 +59,13 @@ export const RegisterPage: React.FC = () => {
             </Form.Item>
             <Form.Item
               name="password"
-              rules={[
-                { required: true, min: 6, message: t('register.passwordMin') },
-              ]}
+              rules={[{ required: true, min: 6, message: t('register.passwordMin') }]}
             >
-              <Input.Password prefix={<LockOutlined />} placeholder={t('register.password')} size="large" />
+              <Input.Password
+                prefix={<LockOutlined />}
+                placeholder={t('register.password')}
+                size="large"
+              />
             </Form.Item>
             <Form.Item
               name="confirmPassword"

package/template/src/admin/pages/RolesPage.tsx

@@ -175,7 +175,9 @@ export const RolesPage: React.FC = () => {
       dataIndex: 'isSystem',
       key: 'isSystem',
       render: (isSystem: boolean) => (
-        <Tag color={isSystem ? 'blue' : 'default'}>{isSystem ? t('common.yes') : t('common.no')}</Tag>
+        <Tag color={isSystem ? 'blue' : 'default'}>
+          {isSystem ? t('common.yes') : t('common.no')}
+        </Tag>
       ),
     },
     {
@@ -183,7 +185,9 @@ export const RolesPage: React.FC = () => {
       dataIndex: 'isActive',
       key: 'isActive',
       render: (isActive: boolean) => (
-        <Tag color={isActive ? 'green' : 'red'}>{isActive ? t('common.enabled') : t('common.disabled')}</Tag>
+        <Tag color={isActive ? 'green' : 'red'}>
+          {isActive ? t('common.enabled') : t('common.disabled')}
+        </Tag>
       ),
     },
     {
@@ -270,7 +274,10 @@ export const RolesPage: React.FC = () => {
 
           {editingRole && (
             <Form.Item name="isActive" label={t('common.status')} valuePropName="checked">
-              <Switch checkedChildren={t('common.enabled')} unCheckedChildren={t('common.disabled')} />
+              <Switch
+                checkedChildren={t('common.enabled')}
+                unCheckedChildren={t('common.disabled')}
+              />
             </Form.Item>
           )}
         </Form>

package/template/src/admin/pages/SystemLogsPage.tsx

@@ -192,7 +192,9 @@ export const SystemLogsPage: React.FC = () => {
         {selectedLog && (
           <Descriptions column={1} bordered>
             <Descriptions.Item label={t('systemLogs.logId')}>{selectedLog.id}</Descriptions.Item>
-            <Descriptions.Item label={t('systemLogs.userId')}>{selectedLog.userId}</Descriptions.Item>
+            <Descriptions.Item label={t('systemLogs.userId')}>
+              {selectedLog.userId}
+            </Descriptions.Item>
             <Descriptions.Item label={t('systemLogs.action')}>
               <Tag color={ACTION_COLORS[selectedLog.action] || 'default'}>
                 {ACTION_LABELS[selectedLog.action] || selectedLog.action}
@@ -201,9 +203,15 @@ export const SystemLogsPage: React.FC = () => {
             <Descriptions.Item label={t('systemLogs.resourceType')}>
               {RESOURCE_LABELS[selectedLog.resourceType] || selectedLog.resourceType}
             </Descriptions.Item>
-            <Descriptions.Item label={t('systemLogs.resourceId')}>{selectedLog.resourceId || '-'}</Descriptions.Item>
-            <Descriptions.Item label={t('systemLogs.ipAddress')}>{selectedLog.ipAddress || '-'}</Descriptions.Item>
-            <Descriptions.Item label={t('systemLogs.userAgent')}>{selectedLog.userAgent || '-'}</Descriptions.Item>
+            <Descriptions.Item label={t('systemLogs.resourceId')}>
+              {selectedLog.resourceId || '-'}
+            </Descriptions.Item>
+            <Descriptions.Item label={t('systemLogs.ipAddress')}>
+              {selectedLog.ipAddress || '-'}
+            </Descriptions.Item>
+            <Descriptions.Item label={t('systemLogs.userAgent')}>
+              {selectedLog.userAgent || '-'}
+            </Descriptions.Item>
             <Descriptions.Item label={t('systemLogs.time')}>
               {formatDate(selectedLog.createdAt)}
             </Descriptions.Item>

package/template/src/admin/pages/TicketsPage.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { Table, Card, Tag, Button, Space, Modal, message, Descriptions } from 'antd'
 import { Eye, MessageCircle, CheckCircle, AlertCircle, Clock } from 'lucide-react'
 import { PermissionGuard } from '../components/PermissionGuard'
@@ -50,11 +50,7 @@ export const TicketsPage: React.FC = () => {
     return map[status] || status
   }
 
-  useEffect(() => {
-    fetchTickets()
-  }, [])
-
-  const fetchTickets = async () => {
+  const fetchTickets = useCallback(async () => {
     setLoading(true)
     try {
       const response = await apiClient.api.tickets.$get({ query: {} })
@@ -69,7 +65,11 @@ export const TicketsPage: React.FC = () => {
     } finally {
       setLoading(false)
     }
-  }
+  }, [t])
+
+  useEffect(() => {
+    fetchTickets()
+  }, [fetchTickets])
 
   const handleClose = async (ticketId: string) => {
     Modal.confirm({
@@ -131,9 +131,7 @@ export const TicketsPage: React.FC = () => {
       title: t('common.status'),
       dataIndex: 'status',
       key: 'status',
-      render: (status: string) => (
-        <Tag color={STATUS_COLORS[status]}>{getStatusLabel(status)}</Tag>
-      ),
+      render: (status: string) => <Tag color={STATUS_COLORS[status]}>{getStatusLabel(status)}</Tag>,
     },
     {
       title: t('common.createdAt'),
@@ -257,8 +255,12 @@ export const TicketsPage: React.FC = () => {
                   {getStatusLabel(selectedTicket.status)}
                 </Tag>
               </Descriptions.Item>
-              <Descriptions.Item label={t('tickets.customerName')}>{selectedTicket.customerName}</Descriptions.Item>
-              <Descriptions.Item label={t('tickets.customerEmail')}>{selectedTicket.customerEmail}</Descriptions.Item>
+              <Descriptions.Item label={t('tickets.customerName')}>
+                {selectedTicket.customerName}
+              </Descriptions.Item>
+              <Descriptions.Item label={t('tickets.customerEmail')}>
+                {selectedTicket.customerEmail}
+              </Descriptions.Item>
               <Descriptions.Item label={t('tickets.priority')}>
                 <Tag color={PRIORITY_COLORS[selectedTicket.priority]}>
                   {getPriorityLabel(selectedTicket.priority)}
@@ -285,9 +287,7 @@ export const TicketsPage: React.FC = () => {
                   >
                     <div className="flex justify-between items-center mb-1">
                       <span className="font-medium">{reply.author}</span>
-                      <span className="text-sm text-gray-500">
-                        {formatDate(reply.createdAt)}
-                      </span>
+                      <span className="text-sm text-gray-500">{formatDate(reply.createdAt)}</span>
                     </div>
                     <div className="text-gray-700">{reply.content}</div>
                   </div>