@tuturuuu/ui 0.4.1 → 0.5.0

package/src/components/ui/finance/transactions/transfer-merge.ts

@@ -0,0 +1,52 @@
+import type { Transaction } from '@tuturuuu/types/primitives/Transaction';
+
+function getTransferPairKey(transaction: Transaction) {
+  const transactionId = transaction.id;
+  const linkedTransactionId = transaction.transfer?.linked_transaction_id;
+
+  if (!transactionId || !linkedTransactionId) return null;
+
+  return [transactionId, linkedTransactionId].sort().join(':');
+}
+
+function preferOriginTransfer(
+  current: Transaction,
+  candidate: Transaction
+): Transaction {
+  if (candidate.transfer?.is_origin && !current.transfer?.is_origin) {
+    return candidate;
+  }
+
+  return current;
+}
+
+export function mergeLinkedTransferTransactions(
+  transactions: Transaction[]
+): Transaction[] {
+  const mergedTransactions: Transaction[] = [];
+  const pairSlotByKey = new Map<string, number>();
+
+  for (const transaction of transactions) {
+    const pairKey = getTransferPairKey(transaction);
+
+    if (!pairKey) {
+      mergedTransactions.push(transaction);
+      continue;
+    }
+
+    const existingSlot = pairSlotByKey.get(pairKey);
+
+    if (existingSlot === undefined) {
+      pairSlotByKey.set(pairKey, mergedTransactions.length);
+      mergedTransactions.push(transaction);
+      continue;
+    }
+
+    mergedTransactions[existingSlot] = preferOriginTransfer(
+      mergedTransactions[existingSlot]!,
+      transaction
+    );
+  }
+
+  return mergedTransactions;
+}

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

@@ -0,0 +1,172 @@
+'use client';
+
+import { useMutation, useQuery } from '@tanstack/react-query';
+import {
+  createTransaction,
+  listTransactionCategories,
+} from '@tuturuuu/internal-api/finance';
+import { Button } from '@tuturuuu/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@tuturuuu/ui/dialog';
+import { Input } from '@tuturuuu/ui/input';
+import { Label } from '@tuturuuu/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@tuturuuu/ui/select';
+import { toast } from '@tuturuuu/ui/sonner';
+import { Textarea } from '@tuturuuu/ui/textarea';
+import { formatCurrency } from '@tuturuuu/utils/format';
+import { useTranslations } from 'next-intl';
+import { useMemo, useState } from 'react';
+
+const NO_CATEGORY = 'none';
+
+export function WalletCheckpointAdjustmentDialog({
+  checkedAt,
+  currency,
+  onCreated,
+  onOpenChange,
+  open,
+  variance,
+  walletId,
+  walletName,
+  wsId,
+}: {
+  checkedAt: string;
+  currency: string;
+  onCreated: () => void;
+  onOpenChange: (open: boolean) => void;
+  open: boolean;
+  variance: number;
+  walletId: string;
+  walletName: string;
+  wsId: string;
+}) {
+  const t = useTranslations('wallet-checkpoints');
+  const [categoryId, setCategoryId] = useState(NO_CATEGORY);
+  const [description, setDescription] = useState(
+    t('adjustment_description', {
+      date: new Date(checkedAt).toLocaleDateString(),
+      wallet: walletName,
+    })
+  );
+  const [takenAt, setTakenAt] = useState(() => {
+    const date = new Date(checkedAt);
+    const local = new Date(date.getTime() - date.getTimezoneOffset() * 60_000);
+    return local.toISOString().slice(0, 16);
+  });
+  const categoriesQuery = useQuery({
+    queryKey: ['transaction-categories', wsId],
+    queryFn: () => listTransactionCategories(wsId),
+    enabled: open,
+  });
+  const amountText = useMemo(
+    () =>
+      formatCurrency(variance, currency, undefined, {
+        maximumFractionDigits: currency === 'VND' ? 0 : 6,
+        signDisplay: 'always',
+      }),
+    [currency, variance]
+  );
+  const mutation = useMutation({
+    mutationFn: () =>
+      createTransaction(wsId, {
+        amount: variance,
+        category_id: categoryId === NO_CATEGORY ? undefined : categoryId,
+        description,
+        origin_wallet_id: walletId,
+        report_opt_in: false,
+        taken_at: new Date(takenAt).toISOString(),
+      }),
+    onSuccess: () => {
+      toast.success(t('adjustment_created'));
+      onCreated();
+      onOpenChange(false);
+    },
+    onError: (error) => {
+      toast.error(
+        error instanceof Error ? error.message : t('adjustment_create_error')
+      );
+    },
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t('create_adjustment')}</DialogTitle>
+          <DialogDescription>
+            {t('create_adjustment_description')}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-2">
+          <div className="grid gap-2">
+            <Label>{t('adjustment_amount')}</Label>
+            <Input value={amountText} readOnly />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="checkpoint-adjustment-date">{t('date')}</Label>
+            <Input
+              id="checkpoint-adjustment-date"
+              type="datetime-local"
+              value={takenAt}
+              onChange={(event) => setTakenAt(event.target.value)}
+            />
+          </div>
+          <div className="grid gap-2">
+            <Label>{t('category')}</Label>
+            <Select value={categoryId} onValueChange={setCategoryId}>
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value={NO_CATEGORY}>{t('no_category')}</SelectItem>
+                {(categoriesQuery.data ?? [])
+                  .filter(
+                    (category): category is typeof category & { id: string } =>
+                      typeof category.id === 'string'
+                  )
+                  .map((category) => (
+                    <SelectItem key={category.id} value={category.id}>
+                      {category.name}
+                    </SelectItem>
+                  ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="checkpoint-adjustment-description">
+              {t('description')}
+            </Label>
+            <Textarea
+              id="checkpoint-adjustment-description"
+              value={description}
+              onChange={(event) => setDescription(event.target.value)}
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {t('cancel')}
+          </Button>
+          <Button
+            disabled={mutation.isPending || variance === 0}
+            onClick={() => mutation.mutate()}
+          >
+            {mutation.isPending ? t('creating') : t('create_adjustment')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,32 @@
+'use client';
+
+import { formatCurrency } from '@tuturuuu/utils/format';
+import {
+  FINANCE_HIDDEN_AMOUNT,
+  useFinanceConfidentialVisibility,
+} from '../../shared/use-finance-confidential-visibility';
+
+export function WalletCheckpointAmount({
+  amount,
+  currency,
+  signDisplay = 'auto',
+}: {
+  amount: number;
+  currency: string;
+  signDisplay?: Intl.NumberFormatOptions['signDisplay'];
+}) {
+  const { isConfidential } = useFinanceConfidentialVisibility();
+
+  if (isConfidential) {
+    return <span>{FINANCE_HIDDEN_AMOUNT}</span>;
+  }
+
+  return (
+    <span>
+      {formatCurrency(amount, currency, undefined, {
+        maximumFractionDigits: currency === 'VND' ? 0 : 6,
+        signDisplay,
+      })}
+    </span>
+  );
+}

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

@@ -0,0 +1,50 @@
+'use client';
+
+import { Button } from '@tuturuuu/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@tuturuuu/ui/dialog';
+import { useTranslations } from 'next-intl';
+
+export function WalletCheckpointDeleteDialog({
+  isPending,
+  onConfirm,
+  onOpenChange,
+  open,
+}: {
+  isPending: boolean;
+  onConfirm: () => void;
+  onOpenChange: (open: boolean) => void;
+  open: boolean;
+}) {
+  const t = useTranslations('wallet-checkpoints');
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t('delete_checkpoint')}</DialogTitle>
+          <DialogDescription>
+            {t('delete_checkpoint_description')}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {t('cancel')}
+          </Button>
+          <Button
+            variant="destructive"
+            disabled={isPending}
+            onClick={onConfirm}
+          >
+            {isPending ? t('deleting') : t('delete')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,138 @@
+'use client';
+
+import type { WalletCheckpoint } from '@tuturuuu/internal-api/finance';
+import { Button } from '@tuturuuu/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@tuturuuu/ui/dialog';
+import { Input } from '@tuturuuu/ui/input';
+import { Label } from '@tuturuuu/ui/label';
+import { Textarea } from '@tuturuuu/ui/textarea';
+import { useTranslations } from 'next-intl';
+import { useEffect, useMemo, useState } from 'react';
+
+function toLocalInputValue(value?: string) {
+  const date = value ? new Date(value) : new Date();
+  const local = new Date(date.getTime() - date.getTimezoneOffset() * 60_000);
+  return local.toISOString().slice(0, 16);
+}
+
+function toIsoTimestamp(value: string) {
+  const date = new Date(value);
+  return Number.isFinite(date.getTime()) ? date.toISOString() : null;
+}
+
+export function WalletCheckpointDialog({
+  checkpoint,
+  currency,
+  isPending,
+  mode,
+  onOpenChange,
+  onSubmit,
+  open,
+}: {
+  checkpoint?: WalletCheckpoint | null;
+  currency: string;
+  isPending: boolean;
+  mode: 'create' | 'edit';
+  onOpenChange: (open: boolean) => void;
+  onSubmit: (payload: {
+    actual_balance: number;
+    checked_at: string;
+    note: string | null;
+  }) => void;
+  open: boolean;
+}) {
+  const t = useTranslations('wallet-checkpoints');
+  const [amount, setAmount] = useState('');
+  const [checkedAt, setCheckedAt] = useState(toLocalInputValue());
+  const [note, setNote] = useState('');
+
+  useEffect(() => {
+    if (!open) return;
+    setAmount(checkpoint ? String(checkpoint.actual_balance) : '');
+    setCheckedAt(toLocalInputValue(checkpoint?.checked_at));
+    setNote(checkpoint?.note ?? '');
+  }, [checkpoint, open]);
+
+  const parsedAmount = useMemo(() => Number(amount), [amount]);
+  const isoTimestamp = useMemo(() => toIsoTimestamp(checkedAt), [checkedAt]);
+  const canSubmit = Number.isFinite(parsedAmount) && !!isoTimestamp;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            {mode === 'edit' ? t('edit_checkpoint') : t('record_checkpoint')}
+          </DialogTitle>
+          <DialogDescription>
+            {mode === 'edit'
+              ? t('edit_checkpoint_description')
+              : t('record_checkpoint_description')}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-2">
+          <div className="grid gap-2">
+            <Label htmlFor="checkpoint-amount">
+              {t('actual_balance_with_currency', { currency })}
+            </Label>
+            <Input
+              id="checkpoint-amount"
+              inputMode="decimal"
+              value={amount}
+              onChange={(event) => setAmount(event.target.value)}
+              placeholder="0"
+            />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="checkpoint-checked-at">{t('checked_at')}</Label>
+            <Input
+              id="checkpoint-checked-at"
+              type="datetime-local"
+              value={checkedAt}
+              onChange={(event) => setCheckedAt(event.target.value)}
+            />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="checkpoint-note">{t('note')}</Label>
+            <Textarea
+              id="checkpoint-note"
+              value={note}
+              maxLength={500}
+              onChange={(event) => setNote(event.target.value)}
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+          >
+            {t('cancel')}
+          </Button>
+          <Button
+            type="button"
+            disabled={!canSubmit || isPending}
+            onClick={() => {
+              if (!isoTimestamp) return;
+              onSubmit({
+                actual_balance: parsedAmount,
+                checked_at: isoTimestamp,
+                note: note.trim() || null,
+              });
+            }}
+          >
+            {isPending ? t('saving') : t('save_checkpoint')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,196 @@
+'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 ?? []}
+        onAdjust={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}
+          currency={currency}
+          onCreated={refresh}
+          onOpenChange={(open) => !open && setAdjusting(null)}
+          open={!!adjusting}
+          variance={adjusting.interval_variance}
+          walletId={walletId}
+          walletName={walletName}
+          wsId={wsId}
+        />
+      )}
+    </Card>
+  );
+}