♻️ refactor(expenses): optimize data handling and error management

- replace useQuery onSuccess/onError callbacks with useEffect hooks for better separation of concerns
- add proper error state handling for both clients and expenses queries
- fix type conversion issues by adding parseInt() for expense IDs in update and delete operations
- improve code formatting by adding proper spacing in variable declarations

src/client/admin/pages/Expenses.tsx

@@ -26,7 +26,7 @@ const { Title } = Typography;
 const { Content } = Layout;
 
 const Expenses: React.FC = () => {
-  const {message} = App.useApp();
+  const { message } = App.useApp();
   const [form] = Form.useForm();
   const [modalVisible, setModalVisible] = useState(false);
   const [editingKey, setEditingKey] = useState<string | null>(null);
@@ -46,7 +46,7 @@ const Expenses: React.FC = () => {
   const queryClient = useQueryClient();
 
   // 获取客户列表
-  const { data: clientsData, isLoading: isClientsLoading } = useQuery({
+  const { data: clientsData, isLoading: isClientsLoading, error: clientsError } = useQuery({
     queryKey: ['clients'],
     queryFn: async () => {
       apiLogger('Fetching clients list');
@@ -55,16 +55,22 @@ const Expenses: React.FC = () => {
       const data = await response.json();
       apiLogger(`Fetched ${data.data.length} clients`);
       return data;
-    },
-    onSuccess: (result) => {
-      setClients(result.data);
-    },
-    onError: (error) => {
-      errorLogger('Failed to fetch clients:', error);
-      antdMessage.error('获取客户列表失败');
-    },
+    }
   });
 
+  useEffect(() => {
+    if (clientsData) {
+      setClients(clientsData.data);
+    }
+  }, [clientsData]);
+
+  useEffect(() => {
+    if (clientsError) {
+      errorLogger('Failed to fetch clients:', clientsError);
+      antdMessage.error('获取客户列表失败');
+    }
+  }, [clientsError]);
+
   // 获取费用列表数据
   const fetchExpenses = async ({ page, pageSize }: { page: number; pageSize: number }): Promise<ExpenseListResponse> => {
     apiLogger(`Fetching expenses with parameters: page=${page}, pageSize=${pageSize}, keyword=${searchText}`);
@@ -85,21 +91,27 @@ const Expenses: React.FC = () => {
     return data;
   };
 
-  const { data, isLoading: isExpensesLoading, refetch } = useQuery({
+  const { data, isLoading: isExpensesLoading, refetch, error: expensesError } = useQuery({
     queryKey: ['expenses', pagination.current, pagination.pageSize, searchText, filters],
     queryFn: () => fetchExpenses({ page: pagination.current, pageSize: pagination.pageSize }),
-    onSuccess: (result) => {
-      setDataSource(result.data);
+  });
+
+  useEffect(() => {
+    if (data) {
+      setDataSource(data.data);
       setPagination(prev => ({
         ...prev,
-        total: result.pagination.total,
+        total: data.pagination.total,
       }));
-    },
-    onError: (error) => {
-      errorLogger('Failed to fetch expenses:', error);
+    }
+  }, [data]);
+
+  useEffect(() => {
+    if (expensesError) {
+      errorLogger('Failed to fetch expenses:', expensesError);
       antdMessage.error('获取费用列表失败');
-    },
-  });
+    }
+  }, [expensesError]);
 
   // 创建费用记录
   const createExpense = useMutation({
@@ -223,7 +235,7 @@ const Expenses: React.FC = () => {
       if (editingKey) {
         // 更新操作
         uiLogger(`Updating expense with id: ${editingKey}`);
-        await updateExpense.mutateAsync({ id: editingKey, data: formattedValues });
+        await updateExpense.mutateAsync({ id: parseInt(editingKey), data: formattedValues });
       } else {
         // 创建操作
         uiLogger('Creating new expense');
@@ -247,7 +259,7 @@ const Expenses: React.FC = () => {
         cancelText: '取消',
         onOk: async () => {
           uiLogger(`Deleting expense with id: ${id}`);
-          await deleteExpense.mutateAsync(id);
+          await deleteExpense.mutateAsync(parseInt(id));
         },
       });
     } catch (error) {