@tuturuuu/ui 0.0.4 → 0.2.0

package/src/components/ui/finance/wallets/walletId/interest/wallet-interest-pending-deposits.tsx

@@ -0,0 +1,185 @@
+'use client';
+
+import { AlertCircle, ChevronDown } from '@tuturuuu/icons';
+import type { PendingDepositInfo } from '@tuturuuu/types';
+import { Card, CardContent } from '@tuturuuu/ui/card';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@tuturuuu/ui/collapsible';
+import { useCurrencyFormatter } from '@tuturuuu/ui/hooks/use-currency-formatter';
+import { cn } from '@tuturuuu/utils/format';
+import { useTranslations } from 'next-intl';
+import { useMemo, useState } from 'react';
+import {
+  FINANCE_HIDDEN_AMOUNT,
+  useFinanceConfidentialVisibility,
+} from '../../../shared/use-finance-confidential-visibility';
+
+interface WalletInterestPendingDepositsProps {
+  deposits: PendingDepositInfo[];
+  currency: string;
+}
+
+interface AggregatedDeposit {
+  depositDate: string;
+  totalAmount: number;
+  daysUntilInterest: number;
+  count: number;
+}
+
+/**
+ * Component displaying pending deposits that haven't started earning interest yet.
+ * Shows aggregated summary with expandable detail list.
+ */
+export function WalletInterestPendingDeposits({
+  deposits,
+  currency,
+}: WalletInterestPendingDepositsProps) {
+  const t = useTranslations('wallet-interest');
+  const { formatCurrency, formatDate } = useCurrencyFormatter({ currency });
+  const { isConfidential: areNumbersHidden } =
+    useFinanceConfidentialVisibility();
+  const formatVisibleCurrency = (amount: number) =>
+    areNumbersHidden ? FINANCE_HIDDEN_AMOUNT : formatCurrency(amount);
+  const [isOpen, setIsOpen] = useState(false);
+
+  // Aggregate deposits by date
+  const { aggregatedDeposits, totalPending } = useMemo(() => {
+    const aggregated = deposits.reduce<AggregatedDeposit[]>((acc, deposit) => {
+      const existing = acc.find((d) => d.depositDate === deposit.depositDate);
+      if (existing) {
+        existing.totalAmount += deposit.amount;
+        existing.count += 1;
+      } else {
+        acc.push({
+          depositDate: deposit.depositDate,
+          totalAmount: deposit.amount,
+          daysUntilInterest: deposit.daysUntilInterest,
+          count: 1,
+        });
+      }
+      return acc;
+    }, []);
+
+    // Sort by date descending
+    aggregated.sort(
+      (a, b) =>
+        new Date(b.depositDate).getTime() - new Date(a.depositDate).getTime()
+    );
+
+    const total = deposits.reduce((sum, d) => sum + d.amount, 0);
+
+    return { aggregatedDeposits: aggregated, totalPending: total };
+  }, [deposits]);
+
+  if (deposits.length === 0) {
+    return null;
+  }
+
+  const showExpandable = aggregatedDeposits.length > 3;
+
+  return (
+    <Card className="border-dynamic-yellow/30 bg-dynamic-yellow/5">
+      <CardContent className="p-4">
+        <div className="flex items-start gap-3">
+          <AlertCircle className="mt-0.5 h-5 w-5 shrink-0 text-dynamic-yellow" />
+          <div className="flex-1">
+            {/* Header with total */}
+            <div className="flex items-center justify-between">
+              <h4 className="font-medium">{t('pending_deposits_title')}</h4>
+              <span className="font-semibold text-dynamic-yellow text-sm">
+                {formatVisibleCurrency(totalPending)}
+              </span>
+            </div>
+
+            {/* Summary text */}
+            <p className="mt-1 text-foreground/70 text-sm">
+              {t('pending_deposits_summary', {
+                count: deposits.length,
+                amount: formatVisibleCurrency(totalPending),
+              })}
+            </p>
+
+            {/* Deposit list */}
+            {showExpandable ? (
+              <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+                <CollapsibleTrigger className="mt-2 flex w-full items-center justify-between rounded-lg bg-background/50 px-3 py-2 text-sm hover:bg-background/80">
+                  <span className="text-muted-foreground">
+                    {aggregatedDeposits.length} {t('deposit_groups')}
+                  </span>
+                  <ChevronDown
+                    className={cn(
+                      'h-4 w-4 text-muted-foreground transition-transform',
+                      isOpen && 'rotate-180'
+                    )}
+                  />
+                </CollapsibleTrigger>
+                <CollapsibleContent className="pt-2">
+                  <DepositList
+                    deposits={aggregatedDeposits}
+                    formatCurrency={formatVisibleCurrency}
+                    formatDate={formatDate}
+                    t={t}
+                  />
+                </CollapsibleContent>
+              </Collapsible>
+            ) : (
+              <div className="mt-2">
+                <DepositList
+                  deposits={aggregatedDeposits}
+                  formatCurrency={formatVisibleCurrency}
+                  formatDate={formatDate}
+                  t={t}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function DepositList({
+  deposits,
+  formatCurrency,
+  formatDate,
+  t,
+}: {
+  deposits: AggregatedDeposit[];
+  formatCurrency: (amount: number) => string;
+  formatDate: (date: string, options?: Intl.DateTimeFormatOptions) => string;
+  t: ReturnType<typeof useTranslations<'wallet-interest'>>;
+}) {
+  return (
+    <ul className="space-y-1.5 text-sm">
+      {deposits.map((deposit) => (
+        <li
+          key={deposit.depositDate}
+          className="flex flex-wrap items-center gap-x-2 gap-y-0.5"
+        >
+          <span className="text-muted-foreground">
+            {formatDate(deposit.depositDate, {
+              month: 'short',
+              day: 'numeric',
+            })}
+            :
+          </span>
+          <span className="font-medium">
+            {formatCurrency(deposit.totalAmount)}
+          </span>
+          {deposit.count > 1 && (
+            <span className="text-muted-foreground">
+              ({deposit.count} {t('deposits')})
+            </span>
+          )}
+          <span className="text-muted-foreground">
+            {t('starts_in', { days: deposit.daysUntilInterest })}
+          </span>
+        </li>
+      ))}
+    </ul>
+  );
+}

package/src/components/ui/finance/wallets/walletId/interest/wallet-interest-projections.tsx

@@ -0,0 +1,259 @@
+'use client';
+
+import { TrendingUp } from '@tuturuuu/icons';
+import type { InterestProjection } from '@tuturuuu/types';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@tuturuuu/ui/tabs';
+import { getCurrencyLocale } from '@tuturuuu/utils/currencies';
+import { useTranslations } from 'next-intl';
+import {
+  FINANCE_HIDDEN_AMOUNT,
+  useFinanceConfidentialVisibility,
+} from '../../../shared/use-finance-confidential-visibility';
+
+interface WalletInterestProjectionsProps {
+  projections: {
+    week: InterestProjection[];
+    month: InterestProjection[];
+    quarter: InterestProjection[];
+    year: InterestProjection[];
+  };
+  currency: string;
+  currentBalance: number;
+  /** When true, renders without wrapper (for embedding in parent) */
+  embedded?: boolean;
+}
+
+/**
+ * Projections component showing future interest earnings with different time ranges.
+ */
+export function WalletInterestProjections({
+  projections,
+  currency,
+  currentBalance,
+  embedded = false,
+}: WalletInterestProjectionsProps) {
+  const t = useTranslations('wallet-interest');
+  const { isConfidential: areNumbersHidden } =
+    useFinanceConfidentialVisibility();
+
+  const formatCurrency = (amount: number) => {
+    if (areNumbersHidden) return FINANCE_HIDDEN_AMOUNT;
+    return new Intl.NumberFormat(getCurrencyLocale(currency), {
+      style: 'currency',
+      currency: currency || 'USD',
+      maximumFractionDigits: 0,
+    }).format(amount);
+  };
+
+  const formatDate = (dateStr: string) => {
+    const date = new Date(dateStr);
+    return new Intl.DateTimeFormat(getCurrencyLocale(currency), {
+      month: 'short',
+      day: 'numeric',
+    }).format(date);
+  };
+
+  const calculateSummary = (data: InterestProjection[]) => {
+    if (data.length === 0)
+      return {
+        totalInterest: 0,
+        finalBalance: currentBalance,
+        growth: 0,
+        hasData: false,
+      };
+
+    const lastDay = data[data.length - 1];
+    const totalInterest = lastDay?.projectedCumulativeInterest ?? 0;
+    const finalBalance = lastDay?.projectedBalance ?? currentBalance;
+    const growth =
+      currentBalance > 0
+        ? ((finalBalance - currentBalance) / currentBalance) * 100
+        : 0;
+
+    // Check if there's meaningful data (non-zero interest)
+    const hasData = totalInterest > 0 || finalBalance !== currentBalance;
+
+    return { totalInterest, finalBalance, growth, hasData };
+  };
+
+  const content = (
+    <Tabs defaultValue="month">
+      <TabsList className="grid w-full grid-cols-4">
+        <TabsTrigger value="week">{t('7_days')}</TabsTrigger>
+        <TabsTrigger value="month">{t('30_days')}</TabsTrigger>
+        <TabsTrigger value="quarter">{t('90_days')}</TabsTrigger>
+        <TabsTrigger value="year">{t('365_days')}</TabsTrigger>
+      </TabsList>
+
+      {(['week', 'month', 'quarter', 'year'] as const).map((period) => {
+        const data = projections[period];
+        const summary = calculateSummary(data);
+
+        return (
+          <TabsContent key={period} value={period} className="space-y-4">
+            {/* Summary Stats */}
+            <div className="grid grid-cols-3 gap-4 rounded-lg bg-muted/50 p-4">
+              <div className="text-center">
+                <p className="text-muted-foreground text-xs">
+                  {t('projected_interest')}
+                </p>
+                <p className="font-bold text-lg text-primary">
+                  {areNumbersHidden
+                    ? FINANCE_HIDDEN_AMOUNT
+                    : `+${formatCurrency(summary.totalInterest)}`}
+                </p>
+              </div>
+              <div className="text-center">
+                <p className="text-muted-foreground text-xs">
+                  {t('final_balance')}
+                </p>
+                <p className="font-bold text-lg">
+                  {formatCurrency(summary.finalBalance)}
+                </p>
+              </div>
+              <div className="text-center">
+                <p className="text-muted-foreground text-xs">{t('growth')}</p>
+                <p className="font-bold text-green-600 text-lg">
+                  +{summary.growth.toFixed(4)}%
+                </p>
+              </div>
+            </div>
+
+            {/* Simple Chart - only show if there's meaningful data */}
+            {summary.hasData && data.length > 1 && (
+              <ProjectionChart
+                data={data}
+                currentBalance={currentBalance}
+                formatDate={formatDate}
+                ariaLabel={t('projection_chart_aria_label')}
+              />
+            )}
+          </TabsContent>
+        );
+      })}
+    </Tabs>
+  );
+
+  if (embedded) {
+    return (
+      <div className="space-y-2">
+        <div className="flex items-center gap-2 font-semibold">
+          <TrendingUp className="h-4 w-4" />
+          {t('projections')}
+        </div>
+        {content}
+      </div>
+    );
+  }
+
+  return content;
+}
+
+function ProjectionChart({
+  data,
+  currentBalance,
+  formatDate,
+  ariaLabel,
+}: {
+  data: InterestProjection[];
+  currentBalance: number;
+  formatDate: (dateStr: string) => string;
+  ariaLabel: string;
+}) {
+  if (data.length < 2) return null;
+
+  const minBalance = currentBalance;
+  const maxBalance = Math.max(...data.map((d) => d.projectedBalance));
+  const range = maxBalance - minBalance;
+
+  // Don't render chart if there's no meaningful range
+  if (range === 0) return null;
+
+  // Sample points for display (max 10 points)
+  const step = Math.max(1, Math.floor(data.length / 10));
+  const sampledData = data.filter(
+    (_, i) => i % step === 0 || i === data.length - 1
+  );
+
+  return (
+    <div className="flex h-32 flex-col">
+      {/* Chart Area */}
+      <div className="relative flex-1">
+        <svg
+          className="h-full w-full"
+          viewBox="0 0 100 100"
+          preserveAspectRatio="none"
+          role="img"
+          aria-label={ariaLabel}
+        >
+          {/* Grid lines */}
+          <line
+            x1="0"
+            y1="25"
+            x2="100"
+            y2="25"
+            stroke="currentColor"
+            strokeOpacity="0.1"
+          />
+          <line
+            x1="0"
+            y1="50"
+            x2="100"
+            y2="50"
+            stroke="currentColor"
+            strokeOpacity="0.1"
+          />
+          <line
+            x1="0"
+            y1="75"
+            x2="100"
+            y2="75"
+            stroke="currentColor"
+            strokeOpacity="0.1"
+          />
+
+          {/* Line path */}
+          <path
+            d={sampledData
+              .map((d, i) => {
+                const x = (i / (sampledData.length - 1)) * 100;
+                const y =
+                  100 - ((d.projectedBalance - minBalance) / range) * 80 - 10;
+                return `${i === 0 ? 'M' : 'L'} ${x} ${y}`;
+              })
+              .join(' ')}
+            fill="none"
+            stroke="hsl(var(--primary))"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+
+          {/* Area fill */}
+          <path
+            d={`
+              M 0 100
+              ${sampledData
+                .map((d, i) => {
+                  const x = (i / (sampledData.length - 1)) * 100;
+                  const y =
+                    100 - ((d.projectedBalance - minBalance) / range) * 80 - 10;
+                  return `L ${x} ${y}`;
+                })
+                .join(' ')}
+              L 100 100
+              Z
+            `}
+            fill="hsl(var(--primary))"
+            fillOpacity="0.1"
+          />
+        </svg>
+      </div>
+
+      {/* X-axis labels */}
+      <div className="flex justify-between px-1 text-muted-foreground text-xs">
+        <span>{formatDate(data[0]?.date ?? '')}</span>
+        <span>{formatDate(data[data.length - 1]?.date ?? '')}</span>
+      </div>
+    </div>
+  );
+}

package/src/components/ui/finance/wallets/walletId/interest/wallet-interest-rate-dialog.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+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 { useTranslations } from 'next-intl';
+import { useState } from 'react';
+
+interface WalletInterestRateDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onUpdateRate: (rate: number) => void;
+  isPending: boolean;
+  currentRate?: number;
+}
+
+/**
+ * Dialog for updating the interest rate.
+ * Shows current rate and allows entering a new rate.
+ */
+export function WalletInterestRateDialog({
+  open,
+  onOpenChange,
+  onUpdateRate,
+  isPending,
+  currentRate = 0,
+}: WalletInterestRateDialogProps) {
+  const t = useTranslations('wallet-interest');
+  const [newRate, setNewRate] = useState<string>(currentRate.toString());
+
+  // Reset rate when dialog opens
+  const handleOpenChange = (isOpen: boolean) => {
+    if (isOpen) {
+      setNewRate(currentRate.toString());
+    }
+    onOpenChange(isOpen);
+  };
+
+  const handleSubmit = () => {
+    const rate = parseFloat(newRate);
+    if (!Number.isNaN(rate) && rate >= 0 && rate <= 100) {
+      onUpdateRate(rate);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t('update_rate')}</DialogTitle>
+          <DialogDescription>{t('update_rate_description')}</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 py-4">
+          <div className="space-y-2">
+            <Label>{t('new_rate')}</Label>
+            <div className="flex items-center gap-2">
+              <Input
+                type="number"
+                step="0.01"
+                min="0"
+                max="100"
+                value={newRate}
+                onChange={(e) => setNewRate(e.target.value)}
+                className="w-24"
+              />
+              <span className="text-muted-foreground">%</span>
+            </div>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {t('cancel')}
+          </Button>
+          <Button onClick={handleSubmit} disabled={isPending || !newRate}>
+            {isPending ? t('updating') : t('update')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/ui/finance/wallets/walletId/interest/wallet-interest-rate-history.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+import { History } from '@tuturuuu/icons';
+import type { WalletInterestRate } from '@tuturuuu/types';
+import { Card, CardContent, CardHeader, CardTitle } from '@tuturuuu/ui/card';
+import { useLocale, useTranslations } from 'next-intl';
+
+interface WalletInterestRateHistoryProps {
+  rates: WalletInterestRate[];
+  /** When true, renders without card wrapper (for embedding in parent card) */
+  embedded?: boolean;
+}
+
+/**
+ * Timeline showing rate change history.
+ */
+export function WalletInterestRateHistory({
+  rates,
+  embedded = false,
+}: WalletInterestRateHistoryProps) {
+  const locale = useLocale();
+  const t = useTranslations('wallet-interest');
+
+  if (rates.length === 0) {
+    return embedded ? (
+      <div className="space-y-2">
+        <div className="flex items-center gap-2 font-semibold">
+          <History className="h-4 w-4" />
+          {t('rate_history')}
+        </div>
+        <p className="text-muted-foreground text-sm">{t('no_rate_history')}</p>
+      </div>
+    ) : null;
+  }
+
+  const formatDate = (dateStr: string) => {
+    return new Intl.DateTimeFormat(locale, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    }).format(new Date(dateStr));
+  };
+
+  const historyContent = (
+    <div className="space-y-3">
+      {rates.map((rate, index) => {
+        const isCurrent = !rate.effective_to;
+
+        return (
+          <div
+            key={rate.id}
+            className={`flex items-start gap-3 ${
+              isCurrent ? 'text-foreground' : 'text-muted-foreground'
+            }`}
+          >
+            {/* Timeline dot */}
+            <div className="flex flex-col items-center">
+              <div
+                className={`h-3 w-3 rounded-full ${
+                  isCurrent ? 'bg-primary' : 'bg-muted-foreground/50'
+                }`}
+              />
+              {index < rates.length - 1 && (
+                <div className="h-8 w-0.5 bg-muted" />
+              )}
+            </div>
+
+            {/* Content */}
+            <div className="flex-1 pb-2">
+              <div className="flex items-baseline justify-between">
+                <span
+                  className={`font-medium ${isCurrent ? 'text-primary' : ''}`}
+                >
+                  {rate.annual_rate}%
+                </span>
+                {isCurrent && (
+                  <span className="rounded-full bg-primary/10 px-2 py-0.5 text-primary text-xs">
+                    {t('current')}
+                  </span>
+                )}
+              </div>
+              <p className="text-xs">
+                {formatDate(rate.effective_from)}
+                {rate.effective_to && ` - ${formatDate(rate.effective_to)}`}
+              </p>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+
+  if (embedded) {
+    return (
+      <div className="space-y-2">
+        <div className="flex items-center gap-2 font-semibold">
+          <History className="h-4 w-4" />
+          {t('rate_history')}
+        </div>
+        {historyContent}
+      </div>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="flex items-center gap-2 text-base">
+          <History className="h-4 w-4" />
+          {t('rate_history')}
+        </CardTitle>
+      </CardHeader>
+      <CardContent>{historyContent}</CardContent>
+    </Card>
+  );
+}