KennethCheng/stock-portfolio_byQwen3.6
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: KennethCheng:574d27968de3246a21b869af3f5cf06e92cc2329
Branches Tags
KennethCheng:main
..
compare: KennethCheng:cdea2ce608bcf4166165d408d6454600f0f042d5
Branches Tags
KennethCheng:main

No commits in common. "574d27968de3246a21b869af3f5cf06e92cc2329" and "cdea2ce608bcf4166165d408d6454600f0f042d5" have entirely different histories.
574d27968d ... cdea2ce608

5 changed files with 82 additions and 596 deletions
Show Stats Expand all files Collapse all files

18
Memory.md
View File

@ -79,24 +79,6 @@
- 新增累計盈虧指標：`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`。
- 表頭嚴格對齊專業標準：名稱/代碼 | 現價 | 市值 | 持倉 | 攤薄/成本 | 浮動盈虧 | 累計盈虧 | 操作。
- 操作列包含展開/收起指示器與「添加」按鈕，點擊打開 `AddTransactionDialog` 並預選對應資產。
- 展開行內嵌交易記錄子表格，展示每筆交易的類型、數量、價格、手續費、幣種與日期。
- 重構 `AddTransactionDialog` 組件支持外部控制開關（`open`/`onOpenChange`/`defaultAssetId` props），同時保持向後兼容內部狀態管理模式。
- Dashboard 頁面轉換為客戶端組件，使用 `useEffect` 在客戶端加載組合數據。
## 全面重構資產展示 UI (Task 39)
- UI 全面升級，復刻專業券商級數據排版，合併攤薄/成本，引入原生幣種盈虧百分比展示。
- 徹底清理所有帶 (CNY) 和 (USD) 混雜的舊布局，所有 Native 金額根據 `baseCurrency` 渲染正確貨幣符號（USD→$、CNY/HKD→HK$、JPY→¥）。

367
app/dashboard/page.tsx
View File

@ -1,42 +1,14 @@
'use client';
import { useState, useEffect, useTransition } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
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 { 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 {
if (currency === 'USD') return '$';
if (currency === 'HKD') return 'HK$';
if (currency === 'CNY') return '¥';
if (currency === 'JPY') return '¥';
return currency + ' ';
return '¥';
}
function formatNative(value: string, baseCurrency: string): string {
@ -56,72 +28,8 @@ function formatPnl(value: string, percent: string, baseCurrency: string): { text
return { text, className };
}
interface Asset {
id: string;
symbol: string;
name: string | null;
type: string;
baseCurrency: string;
exchange: string | null;
}
export default function DashboardPage() {
const [positions, setPositions] = useState<any[]>([]);
const [totalCnyValue, setTotalCnyValue] = useState('0');
const [totalPnlCny, setTotalPnlCny] = useState('0');
const [unrealizedPnlCny, setUnrealizedPnlCny] = useState('0');
const [marketAllocation, setMarketAllocation] = useState<any[]>([]);
const [assets, setAssets] = useState<Asset[]>([]);
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() {
const summary = await getPortfolioSummary();
const allAssets = await getAssets();
setPositions(summary.positions);
setTotalCnyValue(summary.totalCnyValue);
setTotalPnlCny(summary.totalPnlCny);
setUnrealizedPnlCny(summary.unrealizedPnlCny);
setMarketAllocation(summary.marketAllocation);
setAssets(allAssets as Asset[]);
}
loadData();
}, []);
const toggleExpand = (id: string) => {
setExpandedIds(prev => ({ ...prev, [id]: !prev[id] }));
};
const handleOpenDialog = (assetId: string) => {
setSelectedAssetId(assetId);
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);
}
});
}
export default async function DashboardPage() {
const { positions, totalCnyValue, chartData, totalPnlCny, unrealizedPnlCny, marketAllocation } = await getPortfolioSummary();
const formattedTotal = formatAmount(totalCnyValue);
const formattedTotalPnl = formatAmount(totalPnlCny);
@ -129,6 +37,15 @@ export default function DashboardPage() {
const totalPnlIsPositive = new Big(totalPnlCny).gte(0);
const unrealizedIsPositive = new Big(unrealizedPnlCny).gte(0);
function DataRow({ label, value, valueClass = 'font-medium' }: { label: string; value: string; valueClass?: string }) {
return (
<div className="flex justify-between items-center">
<span className="text-sm text-muted-foreground">{label}</span>
<span className={valueClass}>{value}</span>
</div>
);
}
return (
<div className="space-y-6">
<div>
@ -164,31 +81,15 @@ export default function DashboardPage() {
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>持仓明细</CardTitle>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{positions.length === 0 ? (
<div className="text-center py-8 text-muted-foreground">
暂无持仓，请先添加资产和交易记录。
</div>
<Card>
<CardContent className="pt-6">
<p className="text-muted-foreground">暂无持仓，请先添加资产和交易记录。</p>
</CardContent>
</Card>
) : (
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-[200px]">名称/代码</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 className="text-right w-[120px]">操作</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{positions.map((pos) => {
positions.map((pos) => {
const symbol = getCurrencySymbol(pos.baseCurrency);
const latestPriceFormatted = `${symbol}${new Big(pos.latestPrice || '0').toFixed(2)}`;
const marketValueFormatted = formatNative(pos.marketValueNative, pos.baseCurrency);
@ -196,219 +97,61 @@ export default function DashboardPage() {
const dilutedCostStr = new Big(pos.dilutedCostNative).toFixed(2);
const avgCostStr = new Big(pos.avgCostNative).toFixed(2);
let costDisplay = '-';
if (!new Big(pos.dilutedCostNative).eq('0') || !new Big(pos.avgCostNative).eq('0')) {
costDisplay = `${dilutedCostStr} / ${avgCostStr}`;
}
const costCombined = `${dilutedCostStr} / ${avgCostStr}`;
const floatingPnl = formatPnl(pos.floatingPnlNative, pos.floatingPnlPercent, pos.baseCurrency);
const cumulativePnl = formatPnl(pos.cumulativePnlNative, pos.cumulativePnlPercent, pos.baseCurrency);
const isExpanded = !!expandedIds[pos.assetId];
return (
<>
<TableRow key={pos.assetId} className="cursor-pointer" onClick={() => toggleExpand(pos.assetId)}>
<TableCell>
<Card key={pos.assetId} className="flex flex-col">
<CardHeader className="pb-3">
<CardTitle className="flex items-center justify-between">
<div className="flex flex-col">
<span className="font-semibold">{pos.name || pos.symbol}</span>
<span className="text-xs text-muted-foreground">{pos.symbol}</span>
<span className="text-base font-semibold">{pos.name || pos.symbol}</span>
<span className="text-sm font-normal text-muted-foreground">{pos.symbol}</span>
</div>
</TableCell>
<TableCell className="text-right">{latestPriceFormatted}</TableCell>
<TableCell className="text-right">{marketValueFormatted}</TableCell>
<TableCell className="text-right">{quantityFormatted}</TableCell>
<TableCell className="text-right">{costDisplay}</TableCell>
<TableCell className={`text-right ${floatingPnl.className}`}>{floatingPnl.text}</TableCell>
<TableCell className={`text-right ${cumulativePnl.className}`}>{cumulativePnl.text}</TableCell>
<TableCell className="text-right" onClick={(e) => e.stopPropagation()}>
<div className="flex items-center justify-end gap-2">
<span className="text-xs text-muted-foreground">
{isExpanded ? '收起' : '展开'}
<span className="text-xs font-normal text-muted-foreground bg-muted px-2 py-0.5 rounded">
{pos.baseCurrency}
</span>
{isExpanded ? (
<ChevronUp className="h-4 w-4" />
) : (
<ChevronDown className="h-4 w-4" />
)}
<Button
size="sm"
variant="ghost"
className="h-7 px-2 text-xs"
onClick={(e) => {
e.stopPropagation();
handleOpenDialog(pos.assetId);
}}
>
<Plus className="h-3 w-3 mr-1" />
添加
</Button>
</CardTitle>
</CardHeader>
<CardContent className="pt-2 flex-1">
<div className="space-y-3">
<DataRow label="现价" value={latestPriceFormatted} />
<DataRow label="市值" value={marketValueFormatted} />
<DataRow label="持仓" value={quantityFormatted} />
<DataRow label="摊薄 / 成本" value={costCombined} />
<DataRow
label="浮动盈亏"
value={floatingPnl.text}
valueClass={`text-sm font-semibold ${floatingPnl.className}`}
/>
<DataRow
label="累计盈亏"
value={cumulativePnl.text}
valueClass={`text-sm font-semibold ${cumulativePnl.className}`}
/>
<DataRow
label="持仓天数"
value={`${pos.holdingDays} 天`}
valueClass="text-sm text-muted-foreground"
/>
</div>
</TableCell>
</TableRow>
{isExpanded && (
<TableRow>
<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 pb-2 border-b border-border/50">
<span className="text-sm font-semibold text-foreground">流水明細</span>
<Button
size="sm"
variant="outline"
className="h-7 px-2 text-xs"
onClick={(e) => {
e.stopPropagation();
handleOpenDialog(pos.assetId);
}}
>
<Plus className="h-3 w-3 mr-1" />
新增記錄
</Button>
</div>
{pos.transactions && pos.transactions.length > 0 ? (
<Table>
<TableHeader>
<TableRow>
<TableHead>交易日期</TableHead>
<TableHead>類型</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) => {
const txDate = tx.executedAt
? new Date(tx.executedAt).toLocaleString('zh-TW', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
})
: '-';
return (
<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 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 text-center py-3">暫無交易記錄</p>
)}
</div>
</div>
</TableCell>
</TableRow>
)}
</>
);
})}
</TableBody>
</Table>
)}
</CardContent>
</Card>
);
})
)}
</div>
<Card>
<CardHeader>
<CardTitle>資產分布</CardTitle>
<CardTitle>资产分布</CardTitle>
</CardHeader>
<CardContent>
<AllocationChart data={marketAllocation} />
</CardContent>
</Card>
<AddTransactionDialog
assets={assets}
open={dialogOpen}
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>
);
}

6
src/actions/portfolio.ts
View File

@ -41,11 +41,9 @@ interface Position {
}
interface TransactionRecord {
id: string;
txType: string;
quantity: string;
price: string;
fee: string;
txCurrency: string;
executedAt: Date | null;
}
@ -139,11 +137,9 @@ 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,
@ -283,11 +279,9 @@ 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,
});

30
src/components/transactions/add-transaction-dialog.tsx
View File

@ -32,7 +32,6 @@ import {
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import { Plus } from 'lucide-react';
import { toast } from 'sonner';
import { createTransaction } from '@/actions/transaction';
@ -61,9 +60,6 @@ interface Asset {
interface AddTransactionDialogProps {
assets: Asset[];
open?: boolean;
onOpenChange?: (open: boolean) => void;
defaultAssetId?: string;
}
const txTypeLabels: Record<string, string> = {
@ -81,23 +77,15 @@ const exchangeToCurrencyMap: Record<string, string> = {
'SZSE': 'CNY',
};
export function AddTransactionDialog({ assets, open: openProp, onOpenChange, defaultAssetId }: AddTransactionDialogProps) {
const [internalOpen, setInternalOpen] = useState(false);
export function AddTransactionDialog({ assets }: AddTransactionDialogProps) {
const [open, setOpen] = useState(false);
const [isPending, startTransition] = useTransition();
const router = useRouter();
const open = openProp !== undefined ? openProp : internalOpen;
const setOpen = (value: boolean) => {
if (openProp === undefined) {
setInternalOpen(value);
}
onOpenChange?.(value);
};
const form = useForm<AddTransactionForm>({
resolver: zodResolver(addTransactionSchema),
defaultValues: {
assetId: defaultAssetId || '',
assetId: '',
txType: 'BUY' as const,
quantity: '',
price: '',
@ -109,12 +97,6 @@ export function AddTransactionDialog({ assets, open: openProp, onOpenChange, def
const selectedAssetId = useWatch({ control: form.control, name: 'assetId' });
useEffect(() => {
if (defaultAssetId) {
form.setValue('assetId', defaultAssetId, { shouldValidate: true });
}
}, [defaultAssetId, form]);
useEffect(() => {
if (!selectedAssetId) return;
const selectedAsset = assets.find((a) => a.id === selectedAssetId);
@ -146,16 +128,13 @@ export function AddTransactionDialog({ assets, open: openProp, onOpenChange, def
}
return (
<>
{!openProp && (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button>
<Plus className="h-4 w-4 mr-2" />
添加流水
</Button>
</DialogTrigger>
)}
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent className="sm:max-w-[500px]">
<DialogHeader>
<DialogTitle>添加交易流水</DialogTitle>
@ -343,6 +322,5 @@ export function AddTransactionDialog({ assets, open: openProp, onOpenChange, def
</Form>
</DialogContent>
</Dialog>
</>
);
}

211
src/components/transactions/update-transaction-dialog.tsx
View File

@ -1,211 +0,0 @@
'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>
);
}