npm - @accounter/client - Versions diffs - 0.0.7-alpha-20250824105500-3626afe3dcdebcf10a7c77e76f0f4f5e4055867d → 0.0.7-alpha-20250824105539-11d89409a8942fb030a7abff740450f8a906266d - Mend

@accounter/client 0.0.7-alpha-20250824105500-3626afe3dcdebcf10a7c77e76f0f4f5e4055867d → 0.0.7-alpha-20250824105539-11d89409a8942fb030a7abff740450f8a906266d

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/CHANGELOG.md +8 -1
package/dist/assets/index-MZlvICfp.css +1 -0
package/dist/assets/{index-B48VtrKS.js → index-l02ac6P4.js} +383 -343
package/dist/assets/{index.es-DCjhV4bb.js → index.es-Cn_bInoc.js} +6 -6
package/dist/index.html +2 -2
package/package.json +5 -4
package/src/app.tsx +4 -0
package/src/components/charges-ledger-validation.tsx +17 -1
package/src/components/layout/sidelinks.tsx +15 -0
package/src/components/screens/operations/annual-audit/annual-audit-filters.tsx +158 -0
package/src/components/screens/operations/annual-audit/index.tsx +370 -0
package/src/components/screens/operations/annual-audit/step-01-validate-charges/index.tsx +266 -0
package/src/components/screens/operations/annual-audit/step-02-ledger-changes/index.tsx +132 -0
package/src/components/screens/operations/annual-audit/step-03-opening-balance/index.tsx +171 -0
package/src/components/screens/operations/annual-audit/step-base.tsx +149 -0
package/src/components/screens/operations/annual-audit/step-simple.tsx +43 -0
package/src/components/ui/progress.tsx +28 -0
package/src/gql/gql.ts +18 -0
package/src/gql/graphql.ts +61 -0
package/src/hooks/use-get-admin-businesses.ts +57 -0
package/dist/assets/index-BERPxH5K.css +0 -1

package/dist/index.html CHANGED Viewed

@@ -5,8 +5,8 @@
     <link rel="icon" href="/icons/accounter-logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Accounter</title>
-    <script type="module" crossorigin src="/assets/index-B48VtrKS.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BERPxH5K.css">
+    <script type="module" crossorigin src="/assets/index-l02ac6P4.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-MZlvICfp.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@accounter/client",
-  "version": "0.0.7-alpha-20250824105500-3626afe3dcdebcf10a7c77e76f0f4f5e4055867d",
+  "version": "0.0.7-alpha-20250824105539-11d89409a8942fb030a7abff740450f8a906266d",
   "type": "module",
   "license": "MIT",
   "scripts": {
@@ -30,6 +30,7 @@
     "@radix-ui/react-icons": "1.3.2",
     "@radix-ui/react-label": "2.1.7",
     "@radix-ui/react-popover": "1.1.15",
+    "@radix-ui/react-progress": "1.1.7",
     "@radix-ui/react-scroll-area": "1.2.10",
     "@radix-ui/react-select": "2.2.6",
     "@radix-ui/react-separator": "1.1.7",
@@ -66,21 +67,21 @@
     "react-error-boundary": "6.0.0",
     "react-hook-form": "7.62.0",
     "react-number-format": "5.4.4",
-    "react-router-dom": "7.8.2",
+    "react-router-dom": "7.8.1",
     "react-to-pdf": "2.0.1",
     "recharts": "2.15.4",
     "sonner": "2.0.7",
     "tailwind-merge": "3.3.1",
     "urql": "5.0.0",
     "vaul": "1.1.2",
-    "zod": "4.1.1",
+    "zod": "4.1.0",
     "zustand": "5.0.8"
   },
   "devDependencies": {
     "@tailwindcss/vite": "4.1.12",
     "@types/chart.js": "4.0.1",
     "@types/deep-equal": "1.0.4",
-    "@types/react": "19.1.11",
+    "@types/react": "19.1.10",
     "@types/react-dom": "19.1.7",
     "@vitejs/plugin-react": "5.0.1",
     "autoprefixer": "10.4.21",

package/src/app.tsx CHANGED Viewed

@@ -25,6 +25,7 @@ import { MissingInfoCharges } from './components/screens/charges/missing-info-ch
 import { DocumentsReport } from './components/screens/documents/all-documents/index.jsx';
 import { IssueDocumentScreen } from './components/screens/documents/issue-document.js';
 import { IssueDocuments } from './components/screens/documents/issue-documents/index.js';
+import { AnnualAuditFlow } from './components/screens/operations/annual-audit/index.jsx';
 import { BalanceReport } from './components/screens/reports/balance-report/index.js';
 import { DepreciationReport } from './components/screens/reports/depreciation-report/index.js';
 import { Shaam6111Report } from './components/screens/reports/shaam6111-report/index.js';
@@ -85,6 +86,9 @@ export function App(): ReactElement {
             <Route path="balance" element={<BalanceReport />} />
             <Route path="validate-reports" element={<ValidateReportsScreen />} />
           </Route>
+          <Route path="workflows">
+            <Route path="annual-audit" element={<AnnualAuditFlow />} />
+          </Route>
           <Route path="salaries" element={<Salaries />} />
           <Route path="tags" element={<TagsManager />} />
           <Route path="tax-categories" element={<TaxCategories />} />

package/src/components/charges-ledger-validation.tsx CHANGED Viewed

@@ -5,7 +5,7 @@ import { Loader, Progress, ThemeIcon, Tooltip } from '@mantine/core';
 import { ChargesLedgerValidationDocument, type ChargeFilter } from '../gql/graphql.js';
 import { useUrlQuery } from '../hooks/use-url-query.js';
 import { FiltersContext } from '../providers/filters-context.js';
-import { ChargesFilters } from './charges/charges-filters.js';
+import { ChargesFilters, encodeChargesFilters } from './charges/charges-filters.js';
 import { ChargesTable } from './charges/charges-table.js';
 import {
   EditChargeModal,
@@ -29,6 +29,22 @@ import { Button } from './ui/button.js';
   }
 `;
+export function getLedgerValidationHref(filter?: ChargeFilter | null, page?: number): string {
+  const params = new URLSearchParams();
+  if (page) {
+    params.append('page', String(page));
+  }
+  const chargesFilters = encodeChargesFilters(filter);
+  if (chargesFilters) {
+    // Add it as a single encoded parameter
+    params.append('chargesFilters', chargesFilters);
+  }
+  const queryParams = params.size > 0 ? `?${params}` : '';
+  return `/charges-ledger-validation${queryParams}`;
+}
 export const ChargesLedgerValidation = (): ReactElement => {
   const { setFiltersContext } = useContext(FiltersContext);
   const [editChargeId, setEditChargeId] = useState<

package/src/components/layout/sidelinks.tsx CHANGED Viewed

@@ -16,6 +16,7 @@ import {
   Files,
   HandCoins,
   IdCard,
+  ListChecks,
   ParkingMeter,
   PlaneTakeoff,
   Puzzle,
@@ -235,6 +236,20 @@ export const sidelinks: SideLink[] = [
       },
     ],
   },
+  {
+    title: 'Workflows',
+    label: '',
+    href: '',
+    icon: <ListChecks size={18} />,
+    sub: [
+      {
+        title: 'Year-end audit',
+        label: '',
+        href: '/workflows/annual-audit',
+        icon: <ListChecks size={18} />,
+      },
+    ],
+  },
   {
     href: '/salaries',
     title: 'Salaries',

package/src/components/screens/operations/annual-audit/annual-audit-filters.tsx ADDED Viewed

@@ -0,0 +1,158 @@
+import { useCallback, useState, type ReactElement } from 'react';
+import equal from 'deep-equal';
+import { Filter, Loader2 } from 'lucide-react';
+import { useForm, type SubmitHandler } from 'react-hook-form';
+import { Indicator } from '@mantine/core';
+import { isObjectEmpty } from '../../../../helpers/index.js';
+import { useGetAdminBusinesses } from '../../../../hooks/use-get-admin-businesses.js';
+import { ComboBox, NumberInput } from '../../../common/index.js';
+import { Button } from '../../../ui/button.js';
+import { Dialog, DialogContent, DialogFooter, DialogTrigger } from '../../../ui/dialog.js';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '../../../ui/form.js';
+export type AnnualAuditFlowFilter = {
+  year: number;
+  adminBusinessId?: string;
+};
+export function encodeAnnualAuditFlowFilters(filter?: AnnualAuditFlowFilter | null): string | null {
+  return !filter || isObjectEmpty(filter) ? null : encodeURIComponent(JSON.stringify(filter));
+}
+export const ANNUAL_AUDIT_FLOW_FILTERS_QUERY_PARAM = 'annualAuditFlowFilters';
+interface AnnualAuditFlowFiltersFormProps {
+  filter: AnnualAuditFlowFilter;
+  setFilter: (filter: AnnualAuditFlowFilter) => void;
+  closeModal: () => void;
+}
+function AnnualAuditFlowFiltersForm({
+  filter,
+  setFilter,
+  closeModal,
+}: AnnualAuditFlowFiltersFormProps): ReactElement {
+  const form = useForm<AnnualAuditFlowFilter>({
+    defaultValues: filter,
+  });
+  const { control, handleSubmit } = form;
+  const { selectableAdminBusinesses: adminBusinesses, fetching: adminBusinessesFetching } =
+    useGetAdminBusinesses();
+  const onSubmit: SubmitHandler<AnnualAuditFlowFilter> = data => {
+    setFilter(data);
+    closeModal();
+  };
+  return (
+    <>
+      {adminBusinessesFetching ? (
+        <div className="flex justify-center">
+          <Loader2 className="h-6 w-6 animate-spin" />
+        </div>
+      ) : (
+        <div />
+      )}
+      <Form {...form}>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <FormField
+            name="year"
+            control={control}
+            rules={{
+              required: 'Year is required',
+              validate: (value): boolean | string => {
+                const year = Number(value);
+                return Number.isNaN(year) || year < 2000 || year > 2100 ? 'Invalid year' : true;
+              },
+            }}
+            render={({ field }): ReactElement => (
+              <FormItem>
+                <FormLabel>Year</FormLabel>
+                <FormControl>
+                  <NumberInput {...field} hideControls decimalScale={0} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            name="adminBusinessId"
+            defaultValue={filter?.adminBusinessId}
+            control={control}
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Owner</FormLabel>
+                <ComboBox
+                  {...field}
+                  data={adminBusinesses}
+                  value={field.value ?? undefined}
+                  disabled={adminBusinessesFetching}
+                  placeholder="Select a financial entity"
+                  formPart
+                />
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <DialogFooter>
+            <Button type="submit" disabled={adminBusinessesFetching}>
+              Filter
+            </Button>
+          </DialogFooter>
+        </form>
+      </Form>
+    </>
+  );
+}
+interface AnnualAuditFlowFiltersProps {
+  filter: AnnualAuditFlowFilter;
+  setFilter: (filter: AnnualAuditFlowFilter) => void;
+}
+export function AnnualAuditFlowFilters({
+  filter,
+  setFilter,
+}: AnnualAuditFlowFiltersProps): ReactElement {
+  const [opened, setOpened] = useState(false);
+  const [isFiltered, setIsFiltered] = useState(!isObjectEmpty(filter));
+  const onSetFilter = useCallback(
+    (newFilter: AnnualAuditFlowFilter) => {
+      // looks for actual changes before triggering update
+      if (!equal(newFilter, filter)) {
+        setFilter(newFilter);
+        setIsFiltered(!isObjectEmpty(newFilter));
+      }
+    },
+    [filter, setFilter],
+  );
+  return (
+    <Dialog open={opened} onOpenChange={setOpened}>
+      <DialogTrigger asChild>
+        <Indicator inline size={16} disabled={!isFiltered}>
+          <Button variant="outline" size="icon">
+            <Filter size={20} />
+          </Button>
+        </Indicator>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <AnnualAuditFlowFiltersForm
+          filter={filter}
+          setFilter={onSetFilter}
+          closeModal={(): void => setOpened(false)}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/screens/operations/annual-audit/index.tsx ADDED Viewed

@@ -0,0 +1,370 @@
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactElement,
+} from 'react';
+import { Calculator, Download, Eye, FileText, Lock, Settings, Upload, Users } from 'lucide-react';
+import { useUrlQuery } from '../../../../hooks/use-url-query.js';
+import { FiltersContext } from '../../../../providers/filters-context.js';
+import { UserContext } from '../../../../providers/user-provider.js';
+import { PageLayout } from '../../../layout/page-layout.js';
+import { Button } from '../../../ui/button.js';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card.js';
+import { Progress } from '../../../ui/progress.js';
+import {
+  ANNUAL_AUDIT_FLOW_FILTERS_QUERY_PARAM,
+  AnnualAuditFlowFilters,
+  encodeAnnualAuditFlowFilters,
+  type AnnualAuditFlowFilter,
+} from './annual-audit-filters.js';
+// Import step components
+import { Step01ValidateCharges } from './step-01-validate-charges/index.js';
+import { Step02LedgerChanges } from './step-02-ledger-changes/index.js';
+import Step03OpeningBalance from './step-03-opening-balance/index.js';
+import type { StepStatus } from './step-base.js';
+import SimpleStep from './step-simple.js';
+export function getAnnualAuditFlowHref(filter?: AnnualAuditFlowFilter | null): string {
+  const params = new URLSearchParams();
+  const annualAuditFlowFilters = encodeAnnualAuditFlowFilters(filter);
+  if (annualAuditFlowFilters) {
+    // Add it as a single encoded parameter
+    params.append(ANNUAL_AUDIT_FLOW_FILTERS_QUERY_PARAM, annualAuditFlowFilters);
+  }
+  const queryParams = params.size > 0 ? `?${params}` : '';
+  return `/workflows/annual-audit${queryParams}`;
+}
+export const AnnualAuditFlow = (): ReactElement => {
+  const { setFiltersContext } = useContext(FiltersContext);
+  const { userContext } = useContext(UserContext);
+  const { get } = useUrlQuery();
+  const initialFilters = useMemo(() => {
+    const defaultFilters: AnnualAuditFlowFilter = {
+      year: new Date().getFullYear() - 1,
+      adminBusinessId: userContext?.context.adminBusinessId,
+    };
+    const uriFilters = get(ANNUAL_AUDIT_FLOW_FILTERS_QUERY_PARAM);
+    if (uriFilters) {
+      try {
+        return JSON.parse(decodeURIComponent(uriFilters)) as AnnualAuditFlowFilter;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      } catch (error) {
+        console.error('Failed to parse filters from URI:', error);
+      }
+    }
+    return defaultFilters;
+  }, [userContext?.context.adminBusinessId]);
+  const [filter, setFilter] = useState<AnnualAuditFlowFilter>(initialFilters);
+  useEffect(() => {
+    setFiltersContext(
+      <div className="flex flex-row gap-x-5">
+        <AnnualAuditFlowFilters filter={filter} setFilter={setFilter} />
+      </div>,
+    );
+  }, [filter, setFiltersContext, setFilter]);
+  const totalSteps = 21;
+  const YEAR = 2024; // TODO: Example year, should be dynamic
+  // Track step statuses to avoid double counting
+  const stepStatusesRef = useRef<Map<string, StepStatus>>(new Map());
+  const [completedSteps, setCompletedSteps] = useState(0);
+  const handleStatusChange = useCallback((stepId: string, status: StepStatus) => {
+    const previousStatus = stepStatusesRef.current.get(stepId);
+    // Only update if status actually changed
+    if (previousStatus !== status) {
+      stepStatusesRef.current.set(stepId, status);
+      // Recalculate completed steps count
+      const completedCount = Array.from(stepStatusesRef.current.values()).filter(
+        s => s === 'completed',
+      ).length;
+      setCompletedSteps(completedCount);
+    }
+  }, []);
+  const progressPercentage = (completedSteps / totalSteps) * 100;
+  return (
+    <PageLayout
+      title="Annual Audit Flow"
+      description="Complete audit process for annual financial reporting and compliance"
+    >
+      <div className="container mx-auto p-6 max-w-6xl">
+        <div className="mb-8">
+          <Card className="mb-6">
+            <CardHeader>
+              <CardTitle className="text-lg">Progress Overview</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-2">
+                <div className="flex justify-between text-sm">
+                  <span>Completed Steps</span>
+                  <span>
+                    {completedSteps} of {totalSteps}
+                  </span>
+                </div>
+                <Progress value={progressPercentage} className="h-2" />
+                <div className="text-xs text-muted-foreground">
+                  {progressPercentage.toFixed(1)}% Complete
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+        <div className="space-y-4">
+          {/* Step 1 - Custom component with server data */}
+          <Step01ValidateCharges
+            id="1"
+            year={YEAR}
+            adminBusinessId={userContext?.context.adminBusinessId}
+            title="Validate All Charges"
+            description="Ensure all charges of the year were reviewed, handle pending charges"
+            onStatusChange={handleStatusChange}
+          />
+          {/* Step 2 - Custom component with server data */}
+          <Step02LedgerChanges
+            id="2"
+            year={YEAR}
+            adminBusinessId={userContext?.context.adminBusinessId}
+            title="Check Pending Ledger Changes"
+            description="Ensure no pending ledger changes exist"
+            onStatusChange={handleStatusChange}
+          />
+          {/* Step 3 - Custom component with substeps */}
+          <Step03OpeningBalance
+            id="3"
+            year={YEAR}
+            adminBusinessId={userContext?.context.adminBusinessId}
+            title="Verify Opening Balance"
+            description="Handle opening balance verification based on user type"
+            onStatusChange={handleStatusChange}
+          />
+          {/* Step 4 - Simple step with static data */}
+          <SimpleStep
+            id="4"
+            title="Generate Financial Charges"
+            description="Create various financial charges and reserves"
+            icon={<Calculator className="h-4 w-4" />}
+            onStatusChange={handleStatusChange}
+            actions={[
+              { label: 'Calculate Vacation Reserves', href: '/reserves/vacation' },
+              { label: 'Calculate Recovery Reserves', href: '/reserves/recovery' },
+              { label: 'Process Bank Deposits', href: '/deposits/bank' },
+              { label: 'Perform Revaluation', href: '/revaluation' },
+              { label: 'Calculate Tax Expenses', href: '/tax/expenses' },
+              { label: 'Calculate Depreciation', href: '/depreciation/calculate' },
+            ]}
+          />
+          {/* Step 5 - Simple step */}
+          <SimpleStep
+            id="5"
+            title="Audit Main Process"
+            description="Task management system for comprehensive audit checks"
+            icon={<FileText className="h-4 w-4" />}
+            onStatusChange={handleStatusChange}
+            actions={[
+              { label: 'Manage Conto Tree', href: '/conto/tree' },
+              { label: 'Open Checklist', href: '/validations/checklist' },
+              { label: 'Compare VAT', href: '/vat/comparison' },
+              { label: 'Generate Draft', href: '/depreciation/draft' },
+              { label: 'Manage Audit Checks', href: '/audit/checks' },
+              { label: 'Review Tax Report', href: '/tax/review' },
+              { label: 'Cash Flow Analysis', href: '/cashflow/analysis' },
+            ]}
+          />
+          {/* Steps 6-21 - Simple steps with basic configuration */}
+          <SimpleStep
+            id="6"
+            title="Add Shareholders Data (1214)"
+            description="For 1214 report preparation"
+            icon={<Users className="h-4 w-4" />}
+            onStatusChange={handleStatusChange}
+            actions={[
+              { label: 'Manage Shareholders', href: '/shareholders/manage' },
+              { label: 'Import Data', href: '/shareholders/import' },
+            ]}
+          />
+          <SimpleStep
+            id="7"
+            title="Revalidate Pending Items"
+            description="Ensure no charges approval or ledger regeneration pending"
+            icon={<Eye className="h-4 w-4" />}
+            onStatusChange={handleStatusChange}
+            actions={[
+              { label: 'Check Pending Approvals', href: '/approvals/pending' },
+              { label: 'Ledger Status', href: '/ledger/status' },
+            ]}
+          />
+          <SimpleStep
+            id="8"
+            title="Lock Ledger"
+            description="Lock ledger by records and by date"
+            icon={<Lock className="h-4 w-4" />}
+            onStatusChange={handleStatusChange}
+            actions={[
+              { label: 'Lock by Records', href: '/ledger/lock-records' },
+              { label: 'Lock by Date', href: '/ledger/lock-date' },
+            ]}
+          />
+          <SimpleStep
+            id="9"
+            title="Save Final Dynamic Report Template"
+            icon={<FileText className="h-4 w-4" />}
+            onStatusChange={handleStatusChange}
+            actions={[{ label: 'Save Template', href: '/reports/save-template' }]}
+          />
+          <SimpleStep
+            id="10"
+            title="Export Year-end Trial Balance"
+            description="For future validations"
+            icon={<Download className="h-4 w-4" />}
+            onStatusChange={handleStatusChange}
+            actions={[{ label: 'Export Trial Balance', href: '/export/trial-balance' }]}
+          />
+          <SimpleStep
+            id="11"
+            title="Generate Final Depreciation Report"
+            icon={<FileText className="h-4 w-4" />}
+            onStatusChange={handleStatusChange}
+            actions={[{ label: 'Generate Report', href: '/depreciation/final' }]}
+          />
+          <SimpleStep
+            id="12"
+            title="Generate Financial Reports"
+            description="With comparison numbers from last year"
+            icon={<FileText className="h-4 w-4" />}
+            onStatusChange={handleStatusChange}
+            actions={[{ label: 'Generate Reports', href: '/reports/financial' }]}
+          />
+          <SimpleStep
+            id="13"
+            title="Generate Tax Report"
+            icon={<FileText className="h-4 w-4" />}
+            onStatusChange={handleStatusChange}
+            actions={[{ label: 'Generate Tax Report', href: '/tax/generate' }]}
+          />
+          <SimpleStep
+            id="14"
+            title="Generate Tax Compliance Reports"
+            description="For Yossi's review"
+            icon={<FileText className="h-4 w-4" />}
+            onStatusChange={handleStatusChange}
+            actions={[{ label: 'Generate Report', href: '/compliance/clients-country' }]}
+          />
+          <SimpleStep
+            id="15"
+            title="Generate Tax Compliance Report"
+            icon={<FileText className="h-4 w-4" />}
+            onStatusChange={handleStatusChange}
+            actions={[
+              { label: 'Generate 973', href: '/reports/973' },
+              { label: 'Generate 901א', href: '/reports/901a' },
+            ]}
+          />
+          <SimpleStep
+            id="16"
+            title="Generate 6111 Report"
+            icon={<FileText className="h-4 w-4" />}
+            onStatusChange={handleStatusChange}
+            actions={[{ label: 'Generate 6111', href: '/reports/6111' }]}
+          />
+          <SimpleStep
+            id="17"
+            title="Generate Dividend Report 1214ב"
+            icon={<FileText className="h-4 w-4" />}
+            onStatusChange={handleStatusChange}
+            actions={[{ label: 'Generate Dividend Report', href: '/reports/dividend-1214b' }]}
+          />
+          <SimpleStep
+            id="18"
+            title="Generate 1214 Report"
+            icon={<FileText className="h-4 w-4" />}
+            onStatusChange={handleStatusChange}
+            actions={[{ label: 'Generate 1214', href: '/reports/1214' }]}
+          />
+          <SimpleStep
+            id="19"
+            title="Compare Tax Expenses"
+            description="Compare 1214 tax expenses with ledger tax expenses"
+            icon={<Calculator className="h-4 w-4" />}
+            onStatusChange={handleStatusChange}
+            actions={[{ label: 'Compare Expenses', href: '/tax/compare-expenses' }]}
+          />
+          <SimpleStep
+            id="20"
+            title="Signing Process"
+            description="Handle signing process and accompanying documents"
+            icon={<FileText className="h-4 w-4" />}
+            onStatusChange={handleStatusChange}
+            actions={[
+              { label: 'Prepare Documents', href: '/signing/prepare' },
+              { label: 'Digital Signing', href: '/signing/digital' },
+            ]}
+          />
+          <SimpleStep
+            id="21"
+            title="File Annual Report"
+            description="Submit annual report to companies government office"
+            icon={<Upload className="h-4 w-4" />}
+            onStatusChange={handleStatusChange}
+            actions={[
+              { label: 'Prepare Filing', href: '/filing/prepare' },
+              { label: 'Submit Report', href: '/filing/submit' },
+            ]}
+          />
+        </div>
+        <div className="mt-8 p-4 bg-muted rounded-lg">
+          <h3 className="font-semibold mb-2">Quick Actions</h3>
+          <div className="flex flex-wrap gap-2">
+            <Button variant="outline" size="sm">
+              <Download className="h-4 w-4 mr-2" />
+              Export Progress Report
+            </Button>
+            <Button variant="outline" size="sm">
+              <Settings className="h-4 w-4 mr-2" />
+              Configure Workflow
+            </Button>
+            <Button variant="outline" size="sm">
+              <Eye className="h-4 w-4 mr-2" />
+              View All Reports
+            </Button>
+          </div>
+        </div>
+      </div>
+    </PageLayout>
+  );
+};