@accounter/client 0.0.7-alpha-20250821154938-954b3cb72dbd3ab35c2f363f90aa079483f72196 → 0.0.7-alpha-20250821210320-258a160dff8bd2402bbb8735fcd22f898c604626

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

@@ -1,370 +0,0 @@
-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>
-  );
-};

package/src/components/screens/operations/annual-audit/step-01-validate-charges/index.tsx

@@ -1,266 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { AlertCircle, ChevronDown, ChevronRight, Eye } from 'lucide-react';
-import { useQuery } from 'urql';
-import {
-  AccountantApprovalStatusDocument,
-  AccountantStatus,
-  ChargeSortByField,
-} from '../../../../../gql/graphql.js';
-import type { TimelessDateString } from '../../../../../helpers/dates.js';
-import { Badge } from '../../../../ui/badge.jsx';
-import { Button } from '../../../../ui/button.jsx';
-import { CardContent } from '../../../../ui/card.jsx';
-import { Collapsible, CollapsibleContent } from '../../../../ui/collapsible.js';
-import { getAllChargesHref } from '../../../charges/all-charges.jsx';
-import {
-  BaseStepCard,
-  type BaseStepProps,
-  type StepAction,
-  type StepStatus,
-} from '../step-base.jsx';
-
-// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
-/* GraphQL */ `
-  query AccountantApprovalStatus($fromDate: TimelessDate!, $toDate: TimelessDate!) {
-    accountantApprovalStatus(from: $fromDate, to: $toDate) {
-      totalCharges
-      approvedCount
-      pendingCount
-      unapprovedCount
-    }
-  }
-`;
-
-interface ChargeValidationData {
-  approvedPercentage: number;
-  pendingPercentage: number;
-  unapprovedPercentage: number;
-  totalCharges: number;
-  approvedCount: number;
-  pendingCount: number;
-  unapprovedCount: number;
-}
-
-interface Step01Props extends BaseStepProps {
-  year: number;
-  adminBusinessId?: string;
-}
-
-export function Step01ValidateCharges(props: Step01Props) {
-  const [status, setStatus] = useState<StepStatus>('loading');
-  const [chargeData, setChargeData] = useState<ChargeValidationData>({
-    approvedPercentage: 0,
-    pendingPercentage: 0,
-    unapprovedPercentage: 100,
-    totalCharges: 1,
-    approvedCount: 0,
-    pendingCount: 0,
-    unapprovedCount: 1,
-  });
-  const [isDetailsExpanded, setIsDetailsExpanded] = useState(false);
-  const [hasReportedCompletion, setHasReportedCompletion] = useState(false);
-
-  // Report status changes to parent
-  useEffect(() => {
-    if (props.onStatusChange) {
-      props.onStatusChange(props.id, status);
-    }
-
-    // Track if we've reported completion to avoid double counting
-    if (status === 'completed' && !hasReportedCompletion) {
-      setHasReportedCompletion(true);
-    } else if (status !== 'completed' && hasReportedCompletion) {
-      setHasReportedCompletion(false);
-    }
-  }, [status, props.onStatusChange, props.id, hasReportedCompletion]);
-
-  const [{ data, fetching }, fetchStatus] = useQuery({
-    query: AccountantApprovalStatusDocument,
-    variables: {
-      fromDate: `${props.year}-01-01` as TimelessDateString,
-      toDate: `${props.year}-12-31` as TimelessDateString,
-    },
-  });
-
-  useEffect(() => {
-    if (!props.adminBusinessId) {
-      setStatus('blocked');
-    } else if (fetching) {
-      setStatus('loading');
-    }
-  }, [props.adminBusinessId, fetching]);
-
-  useEffect(() => {
-    if (data?.accountantApprovalStatus) {
-      const { totalCharges, approvedCount, pendingCount, unapprovedCount } =
-        data.accountantApprovalStatus;
-      const accountantApprovalStatus: ChargeValidationData = {
-        approvedPercentage: (approvedCount / totalCharges) * 100 || 0,
-        pendingPercentage: (pendingCount / totalCharges) * 100 || 0,
-        unapprovedPercentage: (unapprovedCount / totalCharges) * 100 || 0,
-        totalCharges,
-        approvedCount,
-        pendingCount,
-        unapprovedCount,
-      };
-
-      setChargeData(accountantApprovalStatus);
-
-      // Determine status based on data
-      if (
-        accountantApprovalStatus.pendingPercentage === 0 &&
-        accountantApprovalStatus.unapprovedPercentage === 0
-      ) {
-        setStatus('completed');
-      } else if (
-        accountantApprovalStatus.pendingPercentage + accountantApprovalStatus.unapprovedPercentage <
-        30
-      ) {
-        setStatus('in-progress');
-      } else {
-        setStatus('pending');
-      }
-    }
-  }, [data]);
-
-  const href = useMemo(() => {
-    return getAllChargesHref({
-      byOwners: props.adminBusinessId ? [props.adminBusinessId] : undefined,
-      fromAnyDate: `${props.year}-01-01` as TimelessDateString,
-      toAnyDate: `${props.year}-12-31` as TimelessDateString,
-      accountantStatus: [AccountantStatus.Pending, AccountantStatus.Unapproved],
-      sortBy: {
-        field: ChargeSortByField.Date,
-        asc: false,
-      },
-    });
-  }, [props.adminBusinessId, props.year]);
-
-  const actions: StepAction[] = [{ label: 'Review Charges', href }];
-
-  const refreshData = async () => {
-    await fetchStatus();
-  };
-
-  return (
-    <BaseStepCard {...props} status={status} icon={<Eye className="h-4 w-4" />} actions={actions}>
-      <Collapsible open={isDetailsExpanded}>
-        <CardContent className="pt-0 border-t">
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => setIsDetailsExpanded(!isDetailsExpanded)}
-            className="w-full justify-between p-2 h-auto"
-          >
-            <div className="flex items-center gap-2">
-              <span className="text-sm font-medium">Charge Validation Details</span>
-              <Badge variant="outline" className="text-xs">
-                {chargeData.pendingCount + chargeData.unapprovedCount} need attention
-              </Badge>
-            </div>
-            {isDetailsExpanded ? (
-              <ChevronDown className="h-4 w-4" />
-            ) : (
-              <ChevronRight className="h-4 w-4" />
-            )}
-          </Button>
-        </CardContent>
-        <CollapsibleContent>
-          <CardContent className="pt-0">
-            <div className="space-y-4">
-              <div className="space-y-3">
-                <div className="flex justify-between items-center text-sm">
-                  <span className="font-medium">Charge Review Progress</span>
-                  <div className="flex items-center gap-2">
-                    <span className="text-muted-foreground">
-                      {chargeData.totalCharges.toLocaleString()} total charges
-                    </span>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      onClick={refreshData}
-                      disabled={status === 'loading'}
-                    >
-                      Refresh
-                    </Button>
-                  </div>
-                </div>
-
-                {/* Combined Progress Bar */}
-                <div className="relative h-6 bg-gray-200 rounded-full overflow-hidden">
-                  <div
-                    className="absolute left-0 top-0 h-full bg-green-500 transition-all duration-300"
-                    style={{ width: `${chargeData.approvedPercentage}%` }}
-                  />
-                  <div
-                    className="absolute top-0 h-full bg-orange-500 transition-all duration-300"
-                    style={{
-                      left: `${chargeData.approvedPercentage}%`,
-                      width: `${chargeData.pendingPercentage}%`,
-                    }}
-                  />
-                  <div
-                    className="absolute top-0 h-full bg-red-500 transition-all duration-300"
-                    style={{
-                      left: `${chargeData.approvedPercentage + chargeData.pendingPercentage}%`,
-                      width: `${chargeData.unapprovedPercentage}%`,
-                    }}
-                  />
-                </div>
-
-                {/* Legend */}
-                <div className="grid grid-cols-3 gap-4 text-sm">
-                  <div className="flex items-center gap-2">
-                    <div className="w-3 h-3 bg-green-500 rounded-full" />
-                    <div>
-                      <div className="font-medium text-green-700">
-                        Approved ({chargeData.approvedPercentage}%)
-                      </div>
-                      <div className="text-xs text-muted-foreground">
-                        {chargeData.approvedCount.toLocaleString()} charges
-                      </div>
-                    </div>
-                  </div>
-
-                  <div className="flex items-center gap-2">
-                    <div className="w-3 h-3 bg-orange-500 rounded-full" />
-                    <div>
-                      <div className="font-medium text-orange-700">
-                        Pending ({chargeData.pendingPercentage}%)
-                      </div>
-                      <div className="text-xs text-muted-foreground">
-                        {chargeData.pendingCount.toLocaleString()} charges
-                      </div>
-                    </div>
-                  </div>
-
-                  <div className="flex items-center gap-2">
-                    <div className="w-3 h-3 bg-red-500 rounded-full" />
-                    <div>
-                      <div className="font-medium text-red-700">
-                        Unapproved ({chargeData.unapprovedPercentage}%)
-                      </div>
-                      <div className="text-xs text-muted-foreground">
-                        {chargeData.unapprovedCount.toLocaleString()} charges
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              {(chargeData.pendingPercentage > 0 || chargeData.unapprovedPercentage > 0) && (
-                <div className="flex items-center gap-2 p-3 bg-orange-50 rounded-lg border border-orange-200">
-                  <AlertCircle className="h-4 w-4 text-orange-600" />
-                  <span className="text-sm text-orange-800">
-                    {chargeData.pendingCount + chargeData.unapprovedCount} charges need review
-                    before proceeding
-                  </span>
-                </div>
-              )}
-            </div>
-          </CardContent>
-        </CollapsibleContent>
-      </Collapsible>
-    </BaseStepCard>
-  );
-}