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

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

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

package/src/components/screens/operations/annual-audit/step-02-ledger-changes/index.tsx

@@ -0,0 +1,132 @@
+import { useEffect, useMemo, useState } from 'react';
+import { AlertTriangle, Settings } from 'lucide-react';
+import { useQuery } from 'urql';
+import { ChargeSortByField, LedgerValidationStatusDocument } from '../../../../../gql/graphql.js';
+import type { TimelessDateString } from '../../../../../helpers/index.js';
+import { getLedgerValidationHref } from '../../../../charges-ledger-validation.js';
+import { Badge } from '../../../../ui/badge.jsx';
+import { CardContent } from '../../../../ui/card.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 LedgerValidationStatus($limit: Int, $filters: ChargeFilter) {
+    chargesWithLedgerChanges(limit: $limit, filters: $filters) {
+      charge {
+        id
+      }
+    }
+  }
+`;
+
+interface Step02Props extends BaseStepProps {
+  year: number;
+  adminBusinessId?: string;
+}
+
+export function Step02LedgerChanges(props: Step02Props) {
+  const [status, setStatus] = useState<StepStatus>('blocked');
+  const [pendingChanges, setPendingChanges] = useState<number>(Infinity);
+
+  const [{ data, fetching }, fetchStatus] = useQuery({
+    query: LedgerValidationStatusDocument,
+    variables: {
+      filters: {
+        byOwners: props.adminBusinessId ? [props.adminBusinessId] : [],
+        fromAnyDate: `${props.year}-01-01` as TimelessDateString,
+        toAnyDate: `${props.year}-12-31` as TimelessDateString,
+      },
+    },
+    pause: true,
+  });
+
+  useEffect(() => {
+    if (!data && !fetching && props.adminBusinessId) {
+      fetchStatus();
+    }
+  });
+
+  useEffect(() => {
+    if (fetching) setStatus('loading');
+  }, [fetching]);
+
+  // Report status changes to parent
+  useEffect(() => {
+    if (props.onStatusChange) {
+      props.onStatusChange(props.id, status);
+    }
+  }, [status, props.onStatusChange, props.id]);
+
+  useEffect(() => {
+    if (data?.chargesWithLedgerChanges) {
+      const pendingChanges = data.chargesWithLedgerChanges.filter(
+        charge => !!charge.charge?.id,
+      ).length;
+      setPendingChanges(pendingChanges);
+
+      if (pendingChanges === 0) {
+        setStatus('completed');
+      } else {
+        setStatus('in-progress');
+      }
+    }
+  }, [data]);
+
+  const href = useMemo(() => {
+    return getLedgerValidationHref({
+      byOwners: props.adminBusinessId ? [props.adminBusinessId] : undefined,
+      fromAnyDate: `${props.year}-01-01` as TimelessDateString,
+      toAnyDate: `${props.year}-12-31` as TimelessDateString,
+      sortBy: {
+        field: ChargeSortByField.Date,
+        asc: false,
+      },
+    });
+  }, [props.adminBusinessId, props.year]);
+
+  const actions: StepAction[] = [{ label: 'View Ledger Status', href }];
+
+  return (
+    <BaseStepCard
+      {...props}
+      status={status}
+      icon={<Settings className="h-4 w-4" />}
+      actions={actions}
+    >
+      {pendingChanges > 0 && (
+        <CardContent className="pt-0 border-t">
+          {fetching ? (
+            <div className="flex items-center gap-2 p-3 bg-gray-50 rounded-lg border border-gray-200 animate-pulse">
+              <Settings className="h-4 w-4 text-gray-400" />
+              <div className="flex-1">
+                <span className="text-sm text-gray-600 font-medium">
+                  Checking for pending ledger changes...
+                </span>
+              </div>
+            </div>
+          ) : (
+            <div className="flex items-center gap-2 p-3 bg-red-50 rounded-lg border border-red-200">
+              <AlertTriangle className="h-4 w-4 text-red-600" />
+              <div className="flex-1">
+                <span className="text-sm text-red-800 font-medium">
+                  {pendingChanges} pending ledger changes detected
+                </span>
+                {/* <div className="text-xs text-red-600 mt-1">
+                Last updated: {new Date(ledgerStatus.lastUpdate).toLocaleString()}
+              </div> */}
+              </div>
+              <Badge variant="destructive" className="text-xs">
+                Action Required
+              </Badge>
+            </div>
+          )}
+        </CardContent>
+      )}
+    </BaseStepCard>
+  );
+}

package/src/components/screens/operations/annual-audit/step-03-opening-balance/index.tsx

@@ -0,0 +1,171 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Calculator } from 'lucide-react';
+import type { TimelessDateString } from '../../../../../helpers/dates.js';
+import { BalanceChargeModal } from '../../../../common/modals/balance-charge-modal.jsx';
+import { getContoReportHref } from '../../../../reports/conto/index.jsx';
+import { getTrialBalanceReportHref } from '../../../../reports/trial-balance-report/index.jsx';
+import { Collapsible, CollapsibleContent } from '../../../../ui/collapsible.js';
+import { BaseStepCard, type BaseStepProps, type StepStatus } from '../step-base.jsx';
+
+interface UserType {
+  type: 'new' | 'migrating' | 'continuing';
+  balanceStatus?: 'verified' | 'pending' | 'missing';
+}
+
+interface Step03Props extends BaseStepProps {
+  year: number;
+  adminBusinessId?: string;
+}
+
+// Sub-step components
+function SubStep3A({
+  level,
+  year,
+  adminBusinessId,
+  disabled,
+}: {
+  level: number;
+  year: number;
+  adminBusinessId: string;
+  disabled: boolean;
+}) {
+  const contoHref = getContoReportHref({
+    fromDate: `${year - 1}-01-01` as TimelessDateString,
+    toDate: `${year - 1}-12-31` as TimelessDateString,
+    ownerIds: [adminBusinessId],
+  });
+  const [balanceChargeModalOpen, setBalanceChargeModalOpen] = useState(false);
+
+  return (
+    <>
+      <BaseStepCard
+        id="3a"
+        title="Migrating Users"
+        description="Create balance charge and dynamic report"
+        status="pending"
+        level={level}
+        actions={[
+          { label: 'Create Balance Charge', onClick: () => setBalanceChargeModalOpen(true) },
+          { label: 'Generate Dynamic Report', href: contoHref },
+          // { label: 'Upload Conto 331 Report', href: '/upload/conto331' },
+        ]}
+        disabled={disabled}
+      />
+      <BalanceChargeModal
+        open={balanceChargeModalOpen}
+        onOpenChange={setBalanceChargeModalOpen}
+        onClose={() => setBalanceChargeModalOpen(false)}
+      />
+    </>
+  );
+}
+
+function SubStep3B({
+  level,
+  year,
+  adminBusinessId,
+  disabled,
+}: {
+  level: number;
+  year: number;
+  adminBusinessId: string;
+  disabled: boolean;
+}) {
+  const href = getTrialBalanceReportHref({
+    toDate: `${year - 1}-12-31` as TimelessDateString,
+    ownerIds: [adminBusinessId],
+  });
+  return (
+    <BaseStepCard
+      id="3b"
+      title="Continuing Users"
+      description="Compare with previous year final trial balance"
+      status="pending"
+      level={level}
+      actions={[{ label: 'View Previous Year Ending Balance', href }]}
+      disabled={disabled}
+    />
+  );
+}
+
+export default function Step03OpeningBalance(props: Step03Props) {
+  const [status, setStatus] = useState<StepStatus>('loading');
+  const [userType, setUserType] = useState<UserType | null>(null);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  useEffect(() => {
+    if (!props.adminBusinessId) {
+      setStatus('blocked');
+    }
+  }, [props.adminBusinessId]);
+
+  // Report status changes to parent
+  useEffect(() => {
+    if (props.onStatusChange) {
+      props.onStatusChange(props.id, status);
+    }
+  }, [status, props.onStatusChange, props.id]);
+
+  useEffect(() => {
+    const fetchUserType = async () => {
+      try {
+        // Simulate API call to determine user type
+        await new Promise(resolve => setTimeout(resolve, 600));
+
+        const data: UserType = {
+          type: 'continuing',
+          balanceStatus: 'pending',
+        };
+
+        setUserType(data);
+
+        if (data.type === 'new') {
+          setStatus('completed');
+        } else if (data.balanceStatus === 'verified') {
+          setStatus('completed');
+        } else {
+          setStatus('pending');
+        }
+      } catch (error) {
+        console.error('Error fetching user type:', error);
+        setStatus('blocked');
+      }
+    };
+
+    fetchUserType();
+  }, []);
+
+  return (
+    <>
+      <BaseStepCard
+        {...props}
+        status={status}
+        icon={<Calculator className="h-4 w-4" />}
+        hasSubsteps
+        isExpanded={isExpanded}
+        onToggleExpanded={() => setIsExpanded(!isExpanded)}
+      />
+
+      {props.adminBusinessId && (
+        <Collapsible open={isExpanded}>
+          <CollapsibleContent className="space-y-2">
+            <SubStep3A
+              level={1}
+              year={props.year}
+              adminBusinessId={props.adminBusinessId}
+              disabled={userType?.type !== 'migrating'}
+            />
+            <SubStep3B
+              level={1}
+              year={props.year}
+              adminBusinessId={props.adminBusinessId}
+              disabled={userType?.type !== 'continuing'}
+            />
+          </CollapsibleContent>
+        </Collapsible>
+      )}
+    </>
+  );
+}