@tuturuuu/ui 0.4.1 → 0.6.0

package/src/components/ui/finance/wallets/checkpoints/wallet-checkpoint-panel.tsx

@@ -0,0 +1,197 @@
+'use client';
+
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { ClipboardCheck, Plus } from '@tuturuuu/icons';
+import {
+  createWalletCheckpoint,
+  deleteWalletCheckpoint,
+  listWalletCheckpoints,
+  updateWalletCheckpoint,
+  type WalletCheckpoint,
+  type WalletCheckpointInterval,
+} from '@tuturuuu/internal-api/finance';
+import { Button } from '@tuturuuu/ui/button';
+import { Card } from '@tuturuuu/ui/card';
+import { Separator } from '@tuturuuu/ui/separator';
+import { Skeleton } from '@tuturuuu/ui/skeleton';
+import { toast } from '@tuturuuu/ui/sonner';
+import { useLocale, useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { invalidateWalletMutationQueries } from '../query-invalidation';
+import { WalletCheckpointAdjustmentDialog } from './wallet-checkpoint-adjustment-dialog';
+import { WalletCheckpointDeleteDialog } from './wallet-checkpoint-delete-dialog';
+import { WalletCheckpointDialog } from './wallet-checkpoint-dialog';
+import {
+  LatestCheckpoint,
+  WalletCheckpointIntervals,
+  WalletCheckpointTimeline,
+} from './wallet-checkpoint-sections';
+
+function checkpointKey(wsId: string, walletId: string) {
+  return ['wallet-checkpoints', wsId, walletId] as const;
+}
+
+export function WalletCheckpointPanel({
+  canCreateTransactions,
+  canUpdateWallets,
+  currency,
+  walletId,
+  walletName,
+  wsId,
+}: {
+  canCreateTransactions: boolean;
+  canUpdateWallets: boolean;
+  currency: string;
+  walletId: string;
+  walletName: string;
+  wsId: string;
+}) {
+  const t = useTranslations('wallet-checkpoints');
+  const locale = useLocale();
+  const queryClient = useQueryClient();
+  const [createOpen, setCreateOpen] = useState(false);
+  const [editing, setEditing] = useState<WalletCheckpoint | null>(null);
+  const [deleting, setDeleting] = useState<WalletCheckpoint | null>(null);
+  const [adjusting, setAdjusting] = useState<WalletCheckpointInterval | null>(
+    null
+  );
+  const query = useQuery({
+    queryKey: checkpointKey(wsId, walletId),
+    queryFn: () => listWalletCheckpoints(wsId, walletId, { limit: 50 }),
+  });
+
+  const refresh = () => {
+    queryClient.invalidateQueries({ queryKey: checkpointKey(wsId, walletId) });
+    invalidateWalletMutationQueries(queryClient, wsId);
+  };
+  const createMutation = useMutation({
+    mutationFn: (payload: Parameters<typeof createWalletCheckpoint>[2]) =>
+      createWalletCheckpoint(wsId, walletId, payload),
+    onSuccess: () => {
+      toast.success(t('checkpoint_saved'));
+      setCreateOpen(false);
+      refresh();
+    },
+    onError: (error) =>
+      toast.error(error instanceof Error ? error.message : t('save_error')),
+  });
+  const updateMutation = useMutation({
+    mutationFn: (payload: Parameters<typeof updateWalletCheckpoint>[3]) =>
+      editing
+        ? updateWalletCheckpoint(wsId, walletId, editing.id, payload)
+        : Promise.reject(new Error(t('checkpoint_not_found'))),
+    onSuccess: () => {
+      toast.success(t('checkpoint_saved'));
+      setEditing(null);
+      refresh();
+    },
+    onError: (error) =>
+      toast.error(error instanceof Error ? error.message : t('save_error')),
+  });
+  const deleteMutation = useMutation({
+    mutationFn: () =>
+      deleting
+        ? deleteWalletCheckpoint(wsId, walletId, deleting.id)
+        : Promise.reject(new Error(t('checkpoint_not_found'))),
+    onSuccess: () => {
+      toast.success(t('checkpoint_deleted'));
+      setDeleting(null);
+      refresh();
+    },
+    onError: (error) =>
+      toast.error(error instanceof Error ? error.message : t('delete_error')),
+  });
+  const formatDate = (value: string) =>
+    new Intl.DateTimeFormat(locale, {
+      dateStyle: 'medium',
+      timeStyle: 'short',
+    }).format(new Date(value));
+
+  return (
+    <Card className="grid gap-4 p-4">
+      <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
+        <div className="space-y-1">
+          <div className="flex items-center gap-2 font-semibold text-lg">
+            <ClipboardCheck className="h-5 w-5" />
+            {t('title')}
+          </div>
+          <p className="text-muted-foreground text-sm">{t('description')}</p>
+        </div>
+        {canUpdateWallets && (
+          <Button size="sm" onClick={() => setCreateOpen(true)}>
+            <Plus className="mr-2 h-4 w-4" />
+            {t('record_checkpoint')}
+          </Button>
+        )}
+      </div>
+      <Separator />
+      {query.isLoading ? (
+        <div className="space-y-2">
+          <Skeleton className="h-16 w-full" />
+          <Skeleton className="h-24 w-full" />
+        </div>
+      ) : query.data?.latest ? (
+        <LatestCheckpoint
+          checkpoint={query.data.latest}
+          formatDate={formatDate}
+          currency={currency}
+        />
+      ) : (
+        <div className="rounded-md border border-dashed p-4 text-muted-foreground text-sm">
+          {t('empty_state')}
+        </div>
+      )}
+      <WalletCheckpointIntervals
+        canCreateTransactions={canCreateTransactions}
+        currency={currency}
+        formatDate={formatDate}
+        intervals={query.data?.intervals ?? []}
+        onReconcile={setAdjusting}
+      />
+      <WalletCheckpointTimeline
+        canUpdateWallets={canUpdateWallets}
+        checkpoints={query.data?.data ?? []}
+        formatDate={formatDate}
+        onDelete={setDeleting}
+        onEdit={setEditing}
+      />
+      <WalletCheckpointDialog
+        currency={currency}
+        isPending={createMutation.isPending}
+        mode="create"
+        open={createOpen}
+        onOpenChange={setCreateOpen}
+        onSubmit={(payload) => createMutation.mutate(payload)}
+      />
+      <WalletCheckpointDialog
+        checkpoint={editing}
+        currency={currency}
+        isPending={updateMutation.isPending}
+        mode="edit"
+        open={!!editing}
+        onOpenChange={(open) => !open && setEditing(null)}
+        onSubmit={(payload) => updateMutation.mutate(payload)}
+      />
+      <WalletCheckpointDeleteDialog
+        open={!!deleting}
+        onOpenChange={(open) => !open && setDeleting(null)}
+        isPending={deleteMutation.isPending}
+        onConfirm={() => deleteMutation.mutate()}
+      />
+      {adjusting && (
+        <WalletCheckpointAdjustmentDialog
+          checkedAt={adjusting.end_checked_at}
+          checkpointId={adjusting.end_checkpoint_id}
+          currency={currency}
+          onCreated={refresh}
+          onOpenChange={(open) => !open && setAdjusting(null)}
+          open={!!adjusting}
+          variance={adjusting.interval_variance}
+          walletId={walletId}
+          walletName={walletName}
+          wsId={wsId}
+        />
+      )}
+    </Card>
+  );
+}

package/src/components/ui/finance/wallets/checkpoints/wallet-checkpoint-sections.tsx

@@ -0,0 +1,201 @@
+'use client';
+
+import { CheckCircle2, Pencil, Trash2, TriangleAlert } from '@tuturuuu/icons';
+import type {
+  WalletCheckpoint,
+  WalletCheckpointInterval,
+} from '@tuturuuu/internal-api/finance';
+import { Badge } from '@tuturuuu/ui/badge';
+import { Button } from '@tuturuuu/ui/button';
+import { useTranslations } from 'next-intl';
+import { WalletCheckpointAmount } from './wallet-checkpoint-amount';
+
+export function LatestCheckpoint({
+  checkpoint,
+  currency,
+  formatDate,
+}: {
+  checkpoint: WalletCheckpoint;
+  currency: string;
+  formatDate: (value: string) => string;
+}) {
+  const t = useTranslations('wallet-checkpoints');
+  return (
+    <div className="grid gap-2 rounded-md border p-3 text-sm md:grid-cols-3">
+      <Metric label={t('latest_checkpoint')}>
+        {formatDate(checkpoint.checked_at)}
+      </Metric>
+      <Metric label={t('actual_balance')}>
+        <WalletCheckpointAmount
+          amount={checkpoint.actual_balance}
+          currency={currency}
+        />
+      </Metric>
+      <Metric label={t('current_variance')}>
+        <WalletCheckpointAmount
+          amount={checkpoint.current_variance}
+          currency={currency}
+          signDisplay="always"
+        />
+      </Metric>
+    </div>
+  );
+}
+
+export function WalletCheckpointIntervals({
+  canCreateTransactions,
+  currency,
+  formatDate,
+  intervals,
+  onReconcile,
+}: {
+  canCreateTransactions: boolean;
+  currency: string;
+  formatDate: (value: string) => string;
+  intervals: WalletCheckpointInterval[];
+  onReconcile: (interval: WalletCheckpointInterval) => void;
+}) {
+  const t = useTranslations('wallet-checkpoints');
+  if (intervals.length === 0) return null;
+
+  return (
+    <div className="space-y-2">
+      <div className="font-medium text-sm">{t('intervals')}</div>
+      {intervals.map((interval) => (
+        <div
+          key={interval.end_checkpoint_id}
+          className={
+            interval.is_clean
+              ? 'rounded-md border border-dynamic-green/40 p-3'
+              : 'rounded-md border border-dynamic-yellow/50 p-3'
+          }
+        >
+          <div className="flex flex-wrap items-center justify-between gap-2">
+            <div className="flex items-center gap-2 text-sm">
+              {interval.is_clean ? (
+                <CheckCircle2 className="h-4 w-4 text-dynamic-green" />
+              ) : (
+                <TriangleAlert className="h-4 w-4 text-dynamic-yellow" />
+              )}
+              <span>
+                {formatDate(interval.start_checked_at)} -{' '}
+                {formatDate(interval.end_checked_at)}
+              </span>
+            </div>
+            <Badge variant={interval.is_clean ? 'secondary' : 'outline'}>
+              {interval.is_clean ? t('clean') : t('unresolved')}
+            </Badge>
+          </div>
+          <div className="mt-3 grid gap-2 text-sm md:grid-cols-3">
+            <Metric label={t('actual_delta')}>
+              <WalletCheckpointAmount
+                amount={interval.actual_delta}
+                currency={currency}
+              />
+            </Metric>
+            <Metric label={t('ledger_delta')}>
+              <WalletCheckpointAmount
+                amount={interval.ledger_delta}
+                currency={currency}
+              />
+            </Metric>
+            <Metric label={t('variance')}>
+              <WalletCheckpointAmount
+                amount={interval.interval_variance}
+                currency={currency}
+                signDisplay="always"
+              />
+            </Metric>
+          </div>
+          {!interval.is_clean && canCreateTransactions && (
+            <Button
+              className="mt-3"
+              size="sm"
+              variant="outline"
+              onClick={() => onReconcile(interval)}
+            >
+              {t('reconcile')}
+            </Button>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function WalletCheckpointTimeline({
+  canUpdateWallets,
+  checkpoints,
+  formatDate,
+  onDelete,
+  onEdit,
+}: {
+  canUpdateWallets: boolean;
+  checkpoints: WalletCheckpoint[];
+  formatDate: (value: string) => string;
+  onDelete: (checkpoint: WalletCheckpoint) => void;
+  onEdit: (checkpoint: WalletCheckpoint) => void;
+}) {
+  const t = useTranslations('wallet-checkpoints');
+  if (checkpoints.length === 0) return null;
+
+  return (
+    <div className="space-y-2">
+      <div className="font-medium text-sm">{t('timeline')}</div>
+      {checkpoints.map((checkpoint) => (
+        <div
+          key={checkpoint.id}
+          className="flex flex-col gap-2 rounded-md border p-3 md:flex-row md:items-center md:justify-between"
+        >
+          <div>
+            <div className="font-medium text-sm">
+              {formatDate(checkpoint.checked_at)}
+            </div>
+            <div className="text-muted-foreground text-sm">
+              <WalletCheckpointAmount
+                amount={checkpoint.actual_balance}
+                currency={checkpoint.currency}
+              />{' '}
+              {checkpoint.note ? `- ${checkpoint.note}` : null}
+            </div>
+          </div>
+          {canUpdateWallets && (
+            <div className="flex items-center gap-2">
+              <Button
+                size="icon"
+                variant="ghost"
+                onClick={() => onEdit(checkpoint)}
+                aria-label={t('edit_checkpoint')}
+              >
+                <Pencil className="h-4 w-4" />
+              </Button>
+              <Button
+                size="icon"
+                variant="ghost"
+                onClick={() => onDelete(checkpoint)}
+                aria-label={t('delete_checkpoint')}
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function Metric({
+  children,
+  label,
+}: {
+  children: React.ReactNode;
+  label: string;
+}) {
+  return (
+    <div>
+      <div className="text-muted-foreground text-xs">{label}</div>
+      <div className="font-medium">{children}</div>
+    </div>
+  );
+}