feat: add Refresh button with force_recompute to ReportDepreciationTab

Adds a Refresh button to the tab actions bar (left of ButtonFilter) that
re-fetches depreciation data with force_recompute=true in the query param,
triggering a server-side recomputation. The arrow-path icon spins while
the request is in flight. Button is styled to match ButtonFilter. The
force_recompute flag resets to false when filters are changed.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/pages/report/expense/tab/ReportDepreciationTab.tsx

@@ -1,10 +1,11 @@
 'use client';
 
-import React, { useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import useSWR from 'swr';
 import { ColumnDef } from '@tanstack/react-table';
 
 import { Icon } from '@iconify/react';
+import Button from '@/components/Button';
 import Card from '@/components/Card';
 import Pagination from '@/components/Pagination';
 import Table from '@/components/Table';
@@ -56,11 +57,21 @@ const ReportDepreciationTab = ({ tabId }: ReportDepreciationTabProps) => {
     storeName: 'report-depreciation-table',
   });
 
-  const { data: depreciationsResponse, isLoading: isLoadingDepreciations } =
-    useSWR(
-      `${DepreciationReportApi.basePath}${getTableFilterQueryString()}`,
-      DepreciationReportApi.getAllFetcher
-    );
+  const [forceRecompute, setForceRecompute] = useState(false);
+
+  const {
+    data: depreciationsResponse,
+    isLoading: isLoadingDepreciations,
+    isValidating,
+    mutate,
+  } = useSWR(
+    `${DepreciationReportApi.basePath}${getTableFilterQueryString()}&force_recompute=${forceRecompute}`,
+    DepreciationReportApi.getAllFetcher
+  );
+
+  const handleRefresh = useCallback(() => {
+    setForceRecompute(true);
+  }, [mutate]);
 
   const depreciations = isResponseSuccess(depreciationsResponse)
     ? depreciationsResponse.data
@@ -114,6 +125,21 @@ const ReportDepreciationTab = ({ tabId }: ReportDepreciationTabProps) => {
   const tabActionsElement = useMemo(
     () => (
       <div className='flex flex-row gap-3'>
+        <Button
+          variant='outline'
+          color='none'
+          onClick={handleRefresh}
+          disabled={isValidating}
+          className='rounded-lg max-h-10 font-semibold text-sm gap-1.5 text-base-content/50 border border-base-content/10 shadow-button-soft px-3 py-2.5'
+        >
+          <Icon
+            icon='heroicons:arrow-path'
+            width={20}
+            height={20}
+            className={isValidating ? 'animate-spin' : ''}
+          />
+          Refresh
+        </Button>
         <ButtonFilter
           values={tableFilterState}
           excludeFields={['page', 'pageSize']}
@@ -123,7 +149,7 @@ const ReportDepreciationTab = ({ tabId }: ReportDepreciationTabProps) => {
         />
       </div>
     ),
-    [tableFilterState]
+    [tableFilterState, handleRefresh, isValidating]
   );
 
   useEffect(() => {
@@ -255,6 +281,8 @@ const ReportDepreciationTab = ({ tabId }: ReportDepreciationTabProps) => {
             values.period ? formatDate(values.period, 'YYYY-MM-DD') : '',
             true
           );
+
+          setForceRecompute(false);
         }}
       />
     </>