@tuturuuu/ui 0.0.4 → 0.2.0

package/src/components/ui/finance/transactions/transactionId/row-actions.tsx

@@ -0,0 +1,263 @@
+'use client';
+
+import { useQueryClient } from '@tanstack/react-query';
+import { Ellipsis } from '@tuturuuu/icons';
+import {
+  createWorkspaceStorageSignedUrl,
+  deleteWorkspaceStorageObject,
+  renameWorkspaceStorageObject,
+} from '@tuturuuu/internal-api';
+import type { StorageObject } from '@tuturuuu/types/primitives/StorageObject';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@tuturuuu/ui/alert-dialog';
+import { Button } from '@tuturuuu/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@tuturuuu/ui/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@tuturuuu/ui/dropdown-menu';
+import { Input } from '@tuturuuu/ui/input';
+import { toast } from '@tuturuuu/ui/sonner';
+import { joinPath } from '@tuturuuu/utils/path-helper';
+import { useRouter } from 'next/navigation';
+import { useTranslations } from 'next-intl';
+import type { FormEvent } from 'react';
+import { useId, useState } from 'react';
+import { invalidateTransactionAttachmentQueries } from '../query-invalidation';
+
+interface Props {
+  wsId: string;
+  transactionId: string;
+  storageObj: StorageObject;
+}
+
+export function TransactionObjectRowActions({
+  wsId,
+  transactionId,
+  storageObj,
+}: Props) {
+  const t = useTranslations();
+
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const fileNameInputId = useId();
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [isRenaming, setIsRenaming] = useState(false);
+  const [showRenameDialog, setShowRenameDialog] = useState(false);
+  const [renameValue, setRenameValue] = useState('');
+
+  const deleteStorageObject = async () => {
+    if (!storageObj.name) return;
+
+    setIsDeleting(true);
+    try {
+      await deleteWorkspaceStorageObject(
+        wsId,
+        joinPath('finance', 'transactions', transactionId, storageObj.name)
+      );
+      await invalidateTransactionAttachmentQueries(
+        queryClient,
+        wsId,
+        transactionId
+      );
+      toast.success(t('ws-transactions.file_deleted'));
+      router.refresh();
+    } catch {
+      toast.error(t('ws-transactions.failed_to_delete_file'));
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  const openRenameDialog = () => {
+    if (!storageObj.name) return;
+
+    setRenameValue(storageObj.name.split(`${wsId}/`).pop() || storageObj.name);
+    setShowRenameDialog(true);
+  };
+
+  const renameStorageObject = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (!storageObj.name) return;
+
+    const newName = renameValue.trim();
+    if (!newName) return;
+
+    // re-add extension if it was removed
+    const safeNewName = storageObj.name.includes('.')
+      ? newName.includes('.')
+        ? newName
+        : `${newName}.${storageObj.name.split('.').pop()}`
+      : newName;
+
+    setIsRenaming(true);
+    try {
+      await renameWorkspaceStorageObject(wsId, {
+        path: joinPath('finance', 'transactions', transactionId),
+        currentName: storageObj.name,
+        newName: safeNewName,
+      });
+      await invalidateTransactionAttachmentQueries(
+        queryClient,
+        wsId,
+        transactionId
+      );
+      toast.success(t('ws-transactions.file_renamed'));
+      setShowRenameDialog(false);
+      router.refresh();
+    } catch (error) {
+      toast.error(
+        error instanceof Error
+          ? error.message
+          : t('ws-transactions.failed_to_rename_file')
+      );
+    } finally {
+      setIsRenaming(false);
+    }
+  };
+
+  const downloadStorageObject = async () => {
+    if (!storageObj.name) return;
+
+    try {
+      const signedUrl = await createWorkspaceStorageSignedUrl(
+        wsId,
+        joinPath('finance', 'transactions', transactionId, storageObj.name)
+      );
+      const response = await fetch(signedUrl, { cache: 'no-store' });
+      if (!response.ok) {
+        throw new Error('Failed to download file');
+      }
+      const data = await response.blob();
+      const url = URL.createObjectURL(data);
+
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = storageObj.name.split(`${wsId}/`).pop() || '';
+      a.click();
+
+      URL.revokeObjectURL(url);
+    } catch {
+      toast.error(t('ws-transactions.failed_to_download_file'));
+    }
+  };
+
+  return (
+    <div onClick={(e) => e.stopPropagation()}>
+      <DropdownMenu modal={false}>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            className="flex h-6 w-6 p-0 data-[state=open]:bg-muted"
+            size="xs"
+          >
+            <Ellipsis className="h-4 w-4" />
+            <span className="sr-only">{t('common.open_menu')}</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-40">
+          <DropdownMenuItem onClick={openRenameDialog}>
+            {t('common.rename')}
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={downloadStorageObject}>
+            {t('common.download')}
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <AlertDialog>
+            <AlertDialogTrigger asChild>
+              <DropdownMenuItem
+                onSelect={(e) => e.preventDefault()}
+                disabled={isDeleting}
+              >
+                {t('common.delete')}
+              </DropdownMenuItem>
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>
+                  {t('common.confirm_delete_title')}
+                </AlertDialogTitle>
+                <AlertDialogDescription>
+                  {t('ws-transactions.confirm_delete_file')}
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>{t('common.cancel')}</AlertDialogCancel>
+                <AlertDialogAction
+                  onClick={deleteStorageObject}
+                  className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                  disabled={isDeleting}
+                >
+                  {isDeleting ? t('common.deleting') : t('common.delete')}
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <Dialog open={showRenameDialog} onOpenChange={setShowRenameDialog}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{t('ws-transactions.rename_file')}</DialogTitle>
+            <DialogDescription>
+              {t('ws-transactions.rename_file_description')}
+            </DialogDescription>
+          </DialogHeader>
+          <form className="space-y-4" onSubmit={renameStorageObject}>
+            <div className="space-y-2">
+              <label className="font-medium text-sm" htmlFor={fileNameInputId}>
+                {t('ws-transactions.file_name')}
+              </label>
+              <Input
+                id={fileNameInputId}
+                value={renameValue}
+                onChange={(event) => setRenameValue(event.target.value)}
+                placeholder={t('ws-transactions.file_name_placeholder')}
+                disabled={isRenaming}
+                autoFocus
+              />
+            </div>
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setShowRenameDialog(false)}
+                disabled={isRenaming}
+              >
+                {t('common.cancel')}
+              </Button>
+              <Button
+                type="submit"
+                disabled={isRenaming || !renameValue.trim()}
+              >
+                {isRenaming ? t('common.saving') : t('common.rename')}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

package/src/components/ui/finance/transactions/transactionId/transaction-details-client-page.tsx

@@ -0,0 +1,334 @@
+'use client';
+
+import {
+  CalendarIcon,
+  DollarSign,
+  Edit,
+  FolderOpen,
+  Paperclip,
+  Tag,
+  TrendingDown,
+  TrendingUp,
+  User,
+  Wallet,
+} from '@tuturuuu/icons';
+import { Badge } from '@tuturuuu/ui/badge';
+import { Button } from '@tuturuuu/ui/button';
+import { Card } from '@tuturuuu/ui/card';
+import { Separator } from '@tuturuuu/ui/separator';
+import moment from 'moment';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { useFinanceHref } from '../../finance-route-context';
+import {
+  FINANCE_HIDDEN_AMOUNT,
+  useFinanceConfidentialVisibility,
+} from '../../shared/use-finance-confidential-visibility';
+import { TransactionEditDialog } from '../transaction-edit-dialog';
+import { Bill } from './bill';
+
+interface Props {
+  wsId: string;
+  currency?: string;
+  transaction: any;
+  tags: Array<{ id: string; name: string; color: string }>;
+}
+
+export function TransactionDetailsClientPage({
+  wsId,
+  currency = 'USD',
+  transaction,
+  tags,
+}: Props) {
+  const t = useTranslations();
+  const financeHref = useFinanceHref();
+  const [isEditOpen, setIsEditOpen] = useState(false);
+  const { isConfidential: areNumbersHidden } =
+    useFinanceConfidentialVisibility();
+
+  const isExpense = (transaction.amount || 0) < 0;
+  const transactionType = isExpense
+    ? t('transaction-data-table.expense')
+    : t('transaction-data-table.income');
+
+  return (
+    <>
+      {/* Transaction type and amount header */}
+      <Card
+        className={`mb-4 border-2 ${
+          isExpense
+            ? 'border-dynamic-red/20 bg-linear-to-br from-dynamic-red/5 to-dynamic-red/10'
+            : 'border-dynamic-green/20 bg-linear-to-br from-dynamic-green/5 to-dynamic-green/10'
+        }`}
+      >
+        <div className="flex items-center justify-between gap-4 p-6">
+          <div className="flex items-center gap-4">
+            <div
+              className={`flex h-16 w-16 items-center justify-center rounded-full ${
+                isExpense ? 'bg-dynamic-red/15' : 'bg-dynamic-green/15'
+              }`}
+            >
+              {isExpense ? (
+                <TrendingDown className="h-8 w-8 text-dynamic-red" />
+              ) : (
+                <TrendingUp className="h-8 w-8 text-dynamic-green" />
+              )}
+            </div>
+            <div className="space-y-1">
+              <div className="flex items-center gap-2">
+                <Badge
+                  variant={isExpense ? 'destructive' : 'default'}
+                  className="font-medium"
+                >
+                  {transactionType}
+                </Badge>
+                {transaction.category && (
+                  <Badge variant="outline">{transaction.category}</Badge>
+                )}
+              </div>
+              <p className="text-muted-foreground text-sm">
+                {transaction.description || t('ws-transactions.no_description')}
+              </p>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-4">
+            <div className="text-right">
+              <div
+                className={`font-bold text-3xl tabular-nums ${
+                  areNumbersHidden
+                    ? 'text-muted-foreground'
+                    : isExpense
+                      ? 'text-dynamic-red'
+                      : 'text-dynamic-green'
+                }`}
+              >
+                {areNumbersHidden
+                  ? FINANCE_HIDDEN_AMOUNT
+                  : Intl.NumberFormat(currency === 'VND' ? 'vi-VN' : 'en-US', {
+                      style: 'currency',
+                      currency,
+                      minimumFractionDigits: 0,
+                      maximumFractionDigits: 0,
+                      signDisplay: 'always',
+                    }).format(transaction.amount || 0)}
+              </div>
+              <p className="text-muted-foreground text-sm">
+                {transaction.taken_at
+                  ? moment(transaction.taken_at).format('DD/MM/YYYY, HH:mm')
+                  : '-'}
+              </p>
+            </div>
+
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={() => setIsEditOpen(true)}
+              className="gap-2"
+            >
+              <Edit className="h-4 w-4" />
+              {t('ws-transactions.edit')}
+            </Button>
+          </div>
+        </div>
+      </Card>
+
+      <div className="grid h-fit gap-4 md:grid-cols-2">
+        <div className="space-y-4">
+          <Card className="overflow-hidden">
+            <div className="space-y-0 bg-linear-to-br from-primary/5 to-primary/10 p-4">
+              <div className="flex items-center gap-2">
+                <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10">
+                  <DollarSign className="h-4 w-4 text-primary" />
+                </div>
+                <h2 className="font-semibold text-base">
+                  {t('invoices.basic-info')}
+                </h2>
+              </div>
+            </div>
+
+            <div className="space-y-3 p-4">
+              <DetailItem
+                icon={<Wallet className="h-5 w-5 text-primary" />}
+                label={t('transaction-data-table.wallet')}
+                value={transaction?.wallet_name}
+                href={`/${wsId}${financeHref(`/wallets/${transaction?.wallet_id}`)}`}
+              />
+
+              <Separator />
+
+              <DetailItem
+                icon={<User className="h-5 w-5 text-primary" />}
+                label={t('transaction-data-table.user')}
+                value={
+                  transaction.workspace_users ? (
+                    <div className="inline-flex items-center gap-2 rounded-lg border bg-muted/50 px-3 py-2">
+                      {transaction.workspace_users.avatar_url && (
+                        <Image
+                          src={
+                            transaction.workspace_users.avatar_url ||
+                            '/placeholder.svg'
+                          }
+                          alt={
+                            transaction.workspace_users.full_name ||
+                            'User avatar'
+                          }
+                          width={24}
+                          height={24}
+                          className="rounded-full object-cover ring-2 ring-border"
+                        />
+                      )}
+                      <div className="flex min-w-0 flex-col">
+                        {transaction.workspace_users.full_name && (
+                          <span className="truncate font-medium text-sm leading-tight">
+                            {transaction.workspace_users.full_name}
+                          </span>
+                        )}
+                        {transaction.workspace_users.email && (
+                          <span className="truncate text-muted-foreground text-xs leading-tight">
+                            {transaction.workspace_users.email}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  ) : (
+                    '-'
+                  )
+                }
+              />
+
+              <Separator />
+
+              <DetailItem
+                icon={<FolderOpen className="h-5 w-5 text-primary" />}
+                label={t('transaction-data-table.category')}
+                value={
+                  transaction?.category ? (
+                    <Badge variant="secondary">{transaction.category}</Badge>
+                  ) : (
+                    '-'
+                  )
+                }
+              />
+
+              <Separator />
+
+              <DetailItem
+                icon={<CalendarIcon className="h-5 w-5 text-primary" />}
+                label={t('transaction-data-table.taken_at')}
+                value={
+                  transaction.taken_at ? (
+                    <div className="flex items-center gap-2">
+                      <Badge variant="outline">
+                        {moment(transaction.taken_at).format('DD/MM/YYYY')}
+                      </Badge>
+                      <span className="text-muted-foreground text-sm">
+                        {moment(transaction.taken_at).format('HH:mm:ss')}
+                      </span>
+                    </div>
+                  ) : (
+                    '-'
+                  )
+                }
+              />
+
+              {tags && tags.length > 0 && (
+                <>
+                  <Separator />
+                  <div className="flex items-start gap-3 pt-1">
+                    <Tag className="mt-1 h-5 w-5 shrink-0 text-primary" />
+                    <div className="flex flex-1 flex-col gap-2">
+                      <span className="font-semibold text-sm">
+                        {t('transaction-data-table.tags')}
+                      </span>
+                      <div className="flex flex-wrap gap-1.5">
+                        {tags.map((tag) => (
+                          <Badge
+                            key={tag.id}
+                            variant="outline"
+                            className="font-medium"
+                            style={{
+                              borderColor: tag.color,
+                              color: tag.color,
+                              backgroundColor: `${tag.color}15`,
+                            }}
+                          >
+                            {tag.name}
+                          </Badge>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </>
+              )}
+            </div>
+          </Card>
+        </div>
+
+        <Card className="h-fit overflow-hidden">
+          <div className="space-y-0 bg-linear-to-br from-primary/5 to-primary/10 p-4">
+            <div className="flex items-center gap-2">
+              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10">
+                <Paperclip className="h-4 w-4 text-primary" />
+              </div>
+              <h2 className="font-semibold text-base">
+                {t('transaction-data-table.attachments')}
+              </h2>
+            </div>
+          </div>
+          <div className="p-4">
+            <Bill wsId={wsId} transactionId={transaction.id} />
+          </div>
+        </Card>
+      </div>
+
+      <TransactionEditDialog
+        transaction={transaction}
+        wsId={wsId}
+        isOpen={isEditOpen}
+        onClose={() => setIsEditOpen(false)}
+      />
+    </>
+  );
+}
+
+function DetailItem({
+  icon,
+  label,
+  value,
+  href,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: React.ReactNode;
+  href?: string;
+}) {
+  if (!value) return undefined;
+
+  const content = (
+    <div className="flex items-start gap-3">
+      <div className="mt-0.5 shrink-0">{icon}</div>
+      <div className="flex min-w-0 flex-1 flex-col gap-1.5">
+        <span className="font-semibold text-muted-foreground text-xs uppercase tracking-wide">
+          {label}
+        </span>
+        <div className="text-foreground text-sm">{value}</div>
+      </div>
+    </div>
+  );
+
+  if (href) {
+    return (
+      <Link
+        href={href}
+        className="group rounded-lg p-2 transition-colors hover:bg-muted/50"
+      >
+        {content}
+      </Link>
+    );
+  }
+
+  return <div className="rounded-lg p-2">{content}</div>;
+}

package/src/components/ui/finance/transactions/transactionId/transaction-details-page.tsx

@@ -0,0 +1,76 @@
+import type { InternalApiClientOptions } from '@tuturuuu/internal-api/client';
+import { getTransaction } from '@tuturuuu/internal-api/finance';
+import type { TransactionTag } from '@tuturuuu/types/primitives/Transaction';
+import FeatureSummary from '@tuturuuu/ui/custom/feature-summary';
+import { Separator } from '@tuturuuu/ui/separator';
+import 'dayjs/locale/vi';
+import { notFound } from 'next/navigation';
+import { getTranslations } from 'next-intl/server';
+import { TransactionDetailsClientPage } from './transaction-details-client-page';
+
+interface Props {
+  params: Promise<{
+    wsId: string;
+    transactionId: string;
+    locale: string;
+  }>;
+  internalApiOptions?: InternalApiClientOptions;
+}
+
+type TransactionDetailsData = {
+  category?: string | null;
+  description?: string | null;
+  tags?: TransactionTag[];
+} & Record<string, unknown>;
+
+export default async function TransactionDetailsPage({
+  params,
+  internalApiOptions,
+}: Props) {
+  const { wsId, transactionId } = await params;
+
+  const t = await getTranslations();
+  const { transaction, tags } = await getData(
+    wsId,
+    transactionId,
+    internalApiOptions
+  );
+
+  if (!transaction) notFound();
+
+  return (
+    <div className="flex min-h-full w-full flex-col">
+      <FeatureSummary
+        pluralTitle={transaction.category || t('ws-transactions.plural')}
+        singularTitle={transaction.category || t('ws-transactions.singular')}
+        description={
+          transaction.description || t('ws-transactions.description')
+        }
+        createTitle={t('ws-transactions.create')}
+        createDescription={t('ws-transactions.create_description')}
+      />
+      <Separator className="my-4" />
+
+      <TransactionDetailsClientPage
+        wsId={wsId}
+        transaction={transaction}
+        tags={tags}
+      />
+    </div>
+  );
+}
+
+async function getData(
+  wsId: string,
+  transactionId: string,
+  internalApiOptions?: InternalApiClientOptions
+) {
+  const transaction = (await getTransaction(
+    wsId,
+    transactionId,
+    internalApiOptions
+  )) as TransactionDetailsData;
+  const tags = transaction?.tags ?? [];
+
+  return { transaction, tags };
+}