feat(ui): 實裝資產流水下鑽明細表格及行內 CRUD 操作
This commit is contained in:
parent
1c6c36b147
commit
574d27968d
@ -79,6 +79,15 @@
|
||||
- 新增累計盈虧指標：`cumulativePnlNative = floatingPnlNative + realizedPnlNative + accumulatedDividendsNative`、`cumulativePnlPercent = cumulativePnlNative / totalBuyCostNative * 100`。
|
||||
- SELL 交易的已實現盈虧計算從 CNY 基準改為 Native 基準，CNY 計算保留用於前端兼容展示。
|
||||
|
||||
## Dashboard 流水下鑽明細與行內 CRUD (Task 41b)
|
||||
- 完成 Dashboard 流水下鑽功能，支持在資產列表中直接查看、修改和刪除歷史交易流水。
|
||||
- 在主行 `TableRow` 下方，根據 `expandedIds[pos.assetId]` 條件渲染第二個子行，使用 `<TableCell colSpan={8} className="p-0">` 確保子行佔滿整行寬度。
|
||||
- 構建流水明細次級表格：遍歷 `pos.transactions` 數組，表頭為「交易日期 | 類型 | 價格/數量 | 手續費 | 備註 | 操作」，精確渲染每筆交易的歷史數據。
|
||||
- 實裝 `UpdateTransactionDialog` 組件：「修改」按鈕打開彈窗並回顯該筆流水數據（數量、價格、手續費、幣種、執行時間），提交後調用 `updateTransaction` Action 並刷新頁面。
|
||||
- 實裝行內刪除功能：「刪除」按鈕彈出確認對話框，確認後調用 `deleteTransaction` Action 並刷新頁面。
|
||||
- 在 `portfolio.ts` 的 `TransactionRecord` 接口中補充 `id` 和 `fee` 字段，並在下發數據時包含完整的流水 ID，以支持行內 CRUD 操作。
|
||||
- UI 優化：為展開的子表格添加左側彩色邊框 (`border-l-4 border-primary/20`) 與左側縮進 (`ml-2`) 增強層級感；展開/收起按鈕文字根據狀態動態切換（「收起」/「展開」）。
|
||||
|
||||
## Dashboard 表格化基礎重構 (Task 41)
|
||||
- Dashboard 完成表格化基礎重構，徹底移除原有的卡片網格佈局，改用 shadcn/ui Table 組件構建高密度專業券商風格主表。
|
||||
- 實裝了基於 ID 的行展開狀態管理邏輯：`useState<Record<string, boolean>>` 控制每行的展開/收起狀態，點擊行或展開按鈕觸發 `toggleExpand`。
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useState, useEffect, useTransition } from 'react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import {
|
||||
Table,
|
||||
@ -11,13 +11,24 @@ import {
|
||||
TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { toast } from 'sonner';
|
||||
import { getPortfolioSummary } from '@/actions/portfolio';
|
||||
import { getAssets } from '@/actions/asset';
|
||||
import { formatQuantity, formatAmount } from '@/lib/formatters';
|
||||
import AllocationChart from '@/components/dashboard/allocation-chart';
|
||||
import { SyncButton } from '@/components/assets/sync-button';
|
||||
import { AddTransactionDialog } from '@/components/transactions/add-transaction-dialog';
|
||||
import { ChevronDown, ChevronUp, Plus, Edit3 } from 'lucide-react';
|
||||
import { UpdateTransactionDialog } from '@/components/transactions/update-transaction-dialog';
|
||||
import { deleteTransaction } from '@/actions/transaction';
|
||||
import { ChevronDown, ChevronUp, Plus, Edit3, Trash2 } from 'lucide-react';
|
||||
import Big from 'big.js';
|
||||
|
||||
function getCurrencySymbol(currency: string): string {
|
||||
@ -64,6 +75,9 @@ export default function DashboardPage() {
|
||||
const [expandedIds, setExpandedIds] = useState<Record<string, boolean>>({});
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [selectedAssetId, setSelectedAssetId] = useState<string>('');
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const [updateTarget, setUpdateTarget] = useState<any>(null);
|
||||
const [deleteTarget, setDeleteTarget] = useState<any>(null);
|
||||
|
||||
useEffect(() => {
|
||||
async function loadData() {
|
||||
@ -88,6 +102,27 @@ export default function DashboardPage() {
|
||||
setDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleUpdate = (tx: any) => {
|
||||
setUpdateTarget(tx);
|
||||
};
|
||||
|
||||
function handleUpdateSubmit() {
|
||||
setUpdateTarget(null);
|
||||
}
|
||||
|
||||
function handleDelete(tx: any) {
|
||||
startTransition(async () => {
|
||||
const result = await deleteTransaction(tx.id);
|
||||
if (result.success) {
|
||||
toast.success('交易記錄已刪除');
|
||||
setDeleteTarget(null);
|
||||
window.location.reload();
|
||||
} else if (result.error) {
|
||||
toast.error(result.error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const formattedTotal = formatAmount(totalCnyValue);
|
||||
const formattedTotalPnl = formatAmount(totalPnlCny);
|
||||
const formattedUnrealized = formatAmount(unrealizedPnlCny);
|
||||
@ -214,10 +249,11 @@ export default function DashboardPage() {
|
||||
</TableRow>
|
||||
{isExpanded && (
|
||||
<TableRow>
|
||||
<TableCell colSpan={8} className="bg-muted/30 p-4">
|
||||
<TableCell colSpan={8} className="p-0">
|
||||
<div className="bg-muted/20 border-l-4 border-primary/20 p-3 ml-2">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-muted-foreground">交易記錄</span>
|
||||
<div className="flex items-center justify-between pb-2 border-b border-border/50">
|
||||
<span className="text-sm font-semibold text-foreground">流水明細</span>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
@ -235,45 +271,87 @@ export default function DashboardPage() {
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>交易日期</TableHead>
|
||||
<TableHead>類型</TableHead>
|
||||
<TableHead className="text-right">數量</TableHead>
|
||||
<TableHead className="text-right">價格</TableHead>
|
||||
<TableHead className="text-right">價格/數量</TableHead>
|
||||
<TableHead className="text-right">手續費</TableHead>
|
||||
<TableHead className="text-right">幣種</TableHead>
|
||||
<TableHead className="text-right">日期</TableHead>
|
||||
<TableHead>備註</TableHead>
|
||||
<TableHead className="text-right w-[100px]">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{pos.transactions.map((tx: any, idx: number) => {
|
||||
{pos.transactions.map((tx: any) => {
|
||||
const txDate = tx.executedAt
|
||||
? new Date(tx.executedAt).toLocaleString('zh-TW')
|
||||
? new Date(tx.executedAt).toLocaleString('zh-TW', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})
|
||||
: '-';
|
||||
return (
|
||||
<TableRow key={idx}>
|
||||
<TableRow key={tx.id} className="bg-muted/10">
|
||||
<TableCell className="text-xs text-muted-foreground whitespace-nowrap">
|
||||
{txDate}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className={`text-xs font-medium px-1.5 py-0.5 rounded ${
|
||||
tx.txType === 'BUY' ? 'bg-red-100 text-red-700' :
|
||||
tx.txType === 'SELL' ? 'bg-green-100 text-green-700' :
|
||||
tx.txType === 'DIVIDEND' ? 'bg-blue-100 text-blue-700' :
|
||||
tx.txType === 'AIRDROP' ? 'bg-purple-100 text-purple-700' :
|
||||
'bg-gray-100 text-gray-700'
|
||||
}`}>
|
||||
{tx.txType}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">{tx.quantity}</TableCell>
|
||||
<TableCell className="text-right">{tx.price}</TableCell>
|
||||
<TableCell className="text-right">{tx.fee || '0'}</TableCell>
|
||||
<TableCell className="text-right">{tx.txCurrency}</TableCell>
|
||||
<TableCell className="text-right text-xs text-muted-foreground">{txDate}</TableCell>
|
||||
<TableCell className="text-right text-xs">
|
||||
<div className="flex flex-col items-end">
|
||||
<span>量: {tx.quantity}</span>
|
||||
<span>價: {tx.price}</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-right text-xs">{tx.fee || '0'}</TableCell>
|
||||
<TableCell className="text-xs text-muted-foreground">-</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="h-6 px-1.5 text-xs"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleUpdate(tx);
|
||||
}}
|
||||
>
|
||||
<Edit3 className="h-3 w-3 mr-0.5" />
|
||||
修改
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="h-6 px-1.5 text-xs text-red-500 hover:text-red-700 hover:bg-red-50"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setDeleteTarget(tx);
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-3 w-3 mr-0.5" />
|
||||
刪除
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">暫無交易記錄</p>
|
||||
<p className="text-sm text-muted-foreground text-center py-3">暫無交易記錄</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
@ -301,6 +379,36 @@ export default function DashboardPage() {
|
||||
onOpenChange={setDialogOpen}
|
||||
defaultAssetId={selectedAssetId}
|
||||
/>
|
||||
|
||||
<UpdateTransactionDialog
|
||||
open={!!updateTarget}
|
||||
onOpenChange={(open) => !open && setUpdateTarget(null)}
|
||||
transaction={updateTarget}
|
||||
onSuccess={handleUpdateSubmit}
|
||||
/>
|
||||
|
||||
<Dialog open={!!deleteTarget} onOpenChange={(open) => !open && setDeleteTarget(null)}>
|
||||
<DialogContent className="sm:max-w-[400px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>確認刪除</DialogTitle>
|
||||
<DialogDescription>
|
||||
確定要刪除這筆交易記錄嗎？此操作不可撤銷。
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter className="gap-2 sm:gap-0">
|
||||
<Button variant="outline" onClick={() => setDeleteTarget(null)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={() => deleteTarget && handleDelete(deleteTarget)}
|
||||
disabled={isPending}
|
||||
>
|
||||
{isPending ? '刪除中...' : '刪除'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -41,9 +41,11 @@ interface Position {
|
||||
}
|
||||
|
||||
interface TransactionRecord {
|
||||
id: string;
|
||||
txType: string;
|
||||
quantity: string;
|
||||
price: string;
|
||||
fee: string;
|
||||
txCurrency: string;
|
||||
executedAt: Date | null;
|
||||
}
|
||||
@ -137,9 +139,11 @@ function getTodayInShanghai(): Date {
|
||||
export async function getPortfolioPositions(): Promise<Position[]> {
|
||||
const allTransactions = await db
|
||||
.select({
|
||||
id: transactions.id,
|
||||
txType: transactions.txType,
|
||||
quantity: transactions.quantity,
|
||||
price: transactions.price,
|
||||
fee: transactions.fee,
|
||||
exchangeRate: transactions.exchangeRate,
|
||||
txCurrency: transactions.txCurrency,
|
||||
assetId: transactions.assetId,
|
||||
@ -279,9 +283,11 @@ export async function getPortfolioPositions(): Promise<Position[]> {
|
||||
}
|
||||
|
||||
holding.transactions.push({
|
||||
id: tx.id,
|
||||
txType: tx.txType,
|
||||
quantity: tx.quantity,
|
||||
price: tx.price,
|
||||
fee: tx.fee,
|
||||
txCurrency: tx.txCurrency,
|
||||
executedAt: tx.executedAt,
|
||||
});
|
||||
|
||||
211
src/components/transactions/update-transaction-dialog.tsx
Normal file
211
src/components/transactions/update-transaction-dialog.tsx
Normal file
@ -0,0 +1,211 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useTransition } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { z } from 'zod';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from '@/components/ui/form';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { toast } from 'sonner';
|
||||
import { updateTransaction } from '@/actions/transaction';
|
||||
|
||||
const updateTransactionSchema = z.object({
|
||||
quantity: z.string().regex(/^-?\d+(\.\d+)?$/, '数量必须是数字'),
|
||||
price: z.string().regex(/^-?\d+(\.\d+)?$/, '价格必须是数字'),
|
||||
fee: z.string().regex(/^-?\d+(\.\d+)?$/, '手续费必须是数字').default('0'),
|
||||
txCurrency: z.string().min(1, '交易币种不能为空'),
|
||||
executedAt: z.string(),
|
||||
});
|
||||
|
||||
type UpdateForm = z.infer<typeof updateTransactionSchema>;
|
||||
|
||||
interface UpdateTransactionDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
transaction: {
|
||||
id: string;
|
||||
txType: string;
|
||||
quantity: string;
|
||||
price: string;
|
||||
fee: string;
|
||||
txCurrency: string;
|
||||
executedAt: Date | null;
|
||||
} | null;
|
||||
onSuccess: () => void;
|
||||
}
|
||||
|
||||
export function UpdateTransactionDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
transaction,
|
||||
onSuccess,
|
||||
}: UpdateTransactionDialogProps) {
|
||||
const [isPending, startTransition] = useTransition();
|
||||
|
||||
const form = useForm<UpdateForm>({
|
||||
resolver: zodResolver(updateTransactionSchema),
|
||||
defaultValues: {
|
||||
quantity: '',
|
||||
price: '',
|
||||
fee: '0',
|
||||
txCurrency: 'USD',
|
||||
executedAt: '',
|
||||
},
|
||||
});
|
||||
|
||||
useState(() => {
|
||||
if (transaction && open) {
|
||||
form.reset({
|
||||
quantity: transaction.quantity.toString(),
|
||||
price: transaction.price.toString(),
|
||||
fee: transaction.fee.toString(),
|
||||
txCurrency: transaction.txCurrency,
|
||||
executedAt: transaction.executedAt
|
||||
? new Date(transaction.executedAt).toISOString().slice(0, 16)
|
||||
: '',
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function handleSubmit(values: UpdateForm) {
|
||||
if (!transaction) return;
|
||||
startTransition(async () => {
|
||||
const result = await updateTransaction({
|
||||
id: transaction.id,
|
||||
quantity: values.quantity,
|
||||
price: values.price,
|
||||
fee: values.fee,
|
||||
txCurrency: values.txCurrency,
|
||||
executedAt: new Date(values.executedAt),
|
||||
});
|
||||
if (result.success) {
|
||||
toast.success('交易记录已更新');
|
||||
onOpenChange(false);
|
||||
onSuccess();
|
||||
} else if (result.error) {
|
||||
toast.error(result.error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-[500px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>編輯交易</DialogTitle>
|
||||
<DialogDescription>修改交易記錄詳情</DialogDescription>
|
||||
</DialogHeader>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="quantity"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>數量</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="text" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="price"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>價格</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="text" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="fee"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>手續費</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="text" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="txCurrency"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>交易幣種</FormLabel>
|
||||
<Select onValueChange={field.onChange} value={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="選擇幣種" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="USD">USD</SelectItem>
|
||||
<SelectItem value="CNY">CNY</SelectItem>
|
||||
<SelectItem value="HKD">HKD</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="executedAt"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>執行時間</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="datetime-local" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<DialogFooter>
|
||||
<Button type="submit" disabled={isPending}>
|
||||
{isPending ? '保存中...' : '保存'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</Form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user