更新 UI 一致性規範與公共事業費樣式
This commit is contained in:
@@ -10,7 +10,10 @@ import {
|
||||
Trash2,
|
||||
FileText,
|
||||
Calendar,
|
||||
Filter
|
||||
Filter,
|
||||
ArrowUpDown,
|
||||
ArrowUp,
|
||||
ArrowDown
|
||||
} from 'lucide-react';
|
||||
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
|
||||
import { Head, router } from "@inertiajs/react";
|
||||
@@ -23,6 +26,7 @@ import {
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/Components/ui/table";
|
||||
import { Badge } from "@/Components/ui/badge";
|
||||
import { toast } from "sonner";
|
||||
import UtilityFeeDialog, { UtilityFee } from "@/Components/UtilityFee/UtilityFeeDialog";
|
||||
import {
|
||||
@@ -35,6 +39,8 @@ import {
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/Components/ui/alert-dialog";
|
||||
import { Can } from "@/Components/Permission/Can";
|
||||
import { formatDateWithDayOfWeek, formatInvoiceNumber } from "@/utils/format";
|
||||
|
||||
interface PageProps {
|
||||
fees: {
|
||||
@@ -53,8 +59,8 @@ interface PageProps {
|
||||
category?: string;
|
||||
date_start?: string;
|
||||
date_end?: string;
|
||||
sort_field?: string;
|
||||
sort_direction?: string;
|
||||
sort_field?: string | null;
|
||||
sort_direction?: "asc" | "desc" | null;
|
||||
per_page?: string;
|
||||
};
|
||||
}
|
||||
@@ -71,8 +77,8 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
|
||||
const [deletingFeeId, setDeletingFeeId] = useState<number | null>(null);
|
||||
|
||||
// Sorting
|
||||
const [sortField, setSortField] = useState(filters.sort_field || 'transaction_date');
|
||||
const [sortDirection, setSortDirection] = useState(filters.sort_direction || 'desc');
|
||||
const [sortField, setSortField] = useState<string | null>(filters.sort_field || 'transaction_date');
|
||||
const [sortDirection, setSortDirection] = useState<"asc" | "desc" | null>(filters.sort_direction as "asc" | "desc" || 'desc');
|
||||
|
||||
const handleSearch = () => {
|
||||
router.get(
|
||||
@@ -98,9 +104,21 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
|
||||
};
|
||||
|
||||
const handleSort = (field: string) => {
|
||||
const newDirection = sortField === field && sortDirection === 'asc' ? 'desc' : 'asc';
|
||||
setSortField(field);
|
||||
let newField: string | null = field;
|
||||
let newDirection: "asc" | "desc" | null = "asc";
|
||||
|
||||
if (sortField === field) {
|
||||
if (sortDirection === "asc") {
|
||||
newDirection = "desc";
|
||||
} else {
|
||||
newDirection = null;
|
||||
newField = null;
|
||||
}
|
||||
}
|
||||
|
||||
setSortField(newField);
|
||||
setSortDirection(newDirection);
|
||||
|
||||
router.get(
|
||||
route("utility-fees.index"),
|
||||
{
|
||||
@@ -108,7 +126,7 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
|
||||
category: categoryFilter,
|
||||
date_start: dateStart,
|
||||
date_end: dateEnd,
|
||||
sort_field: field,
|
||||
sort_field: newField,
|
||||
sort_direction: newDirection,
|
||||
},
|
||||
{ preserveState: true }
|
||||
@@ -141,6 +159,19 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
|
||||
}
|
||||
};
|
||||
|
||||
const SortIcon = ({ field }: { field: string }) => {
|
||||
if (sortField !== field) {
|
||||
return <ArrowUpDown className="h-4 w-4 text-muted-foreground ml-1" />;
|
||||
}
|
||||
if (sortDirection === "asc") {
|
||||
return <ArrowUp className="h-4 w-4 text-primary ml-1" />;
|
||||
}
|
||||
if (sortDirection === "desc") {
|
||||
return <ArrowDown className="h-4 w-4 text-primary ml-1" />;
|
||||
}
|
||||
return <ArrowUpDown className="h-4 w-4 text-muted-foreground ml-1" />;
|
||||
};
|
||||
|
||||
return (
|
||||
<AuthenticatedLayout breadcrumbs={[{ label: "財務管理", href: "#" }, { label: "公共事業費", href: route("utility-fees.index") }]}>
|
||||
<Head title="公共事業費管理" />
|
||||
@@ -155,12 +186,14 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
|
||||
<p className="text-gray-500 mt-1">管理店鋪水、電、瓦斯等各項公共事業費用支出</p>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
onClick={openAddDialog}
|
||||
className="button-filled-primary gap-2"
|
||||
>
|
||||
<Plus className="h-4 w-4" /> 新增紀錄
|
||||
</Button>
|
||||
<Can permission="utility_fees.create">
|
||||
<Button
|
||||
onClick={openAddDialog}
|
||||
className="button-filled-primary gap-2"
|
||||
>
|
||||
<Plus className="h-4 w-4" /> 新增紀錄
|
||||
</Button>
|
||||
</Can>
|
||||
</div>
|
||||
|
||||
{/* Toolbar */}
|
||||
@@ -174,7 +207,7 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && handleSearch()}
|
||||
className="pl-10 h-10"
|
||||
className="pl-10"
|
||||
/>
|
||||
{searchTerm && (
|
||||
<button
|
||||
@@ -195,29 +228,28 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
|
||||
...availableCategories.map(c => ({ label: c, value: c }))
|
||||
]}
|
||||
placeholder="篩選類別"
|
||||
className="h-10"
|
||||
/>
|
||||
|
||||
{/* Date Range Start */}
|
||||
<div className="relative">
|
||||
<Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4 pointer-events-none" />
|
||||
<Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-400" />
|
||||
<Input
|
||||
type="date"
|
||||
value={dateStart}
|
||||
onChange={(e) => setDateStart(e.target.value)}
|
||||
className="pl-10 h-10"
|
||||
className="pl-9 bg-white block w-full"
|
||||
placeholder="開始日期"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Date Range End */}
|
||||
<div className="relative">
|
||||
<Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4 pointer-events-none" />
|
||||
<Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-400" />
|
||||
<Input
|
||||
type="date"
|
||||
value={dateEnd}
|
||||
onChange={(e) => setDateEnd(e.target.value)}
|
||||
className="pl-10 h-10"
|
||||
className="pl-9 bg-white block w-full"
|
||||
placeholder="結束日期"
|
||||
/>
|
||||
</div>
|
||||
@@ -243,82 +275,102 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
|
||||
{/* Table */}
|
||||
<div className="bg-white rounded-lg shadow-sm border overflow-hidden">
|
||||
<Table>
|
||||
<TableHeader className="bg-gray-50 text-gray-600 font-bold uppercase tracking-wider text-xs">
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead
|
||||
className="cursor-pointer hover:text-primary transition-colors py-4 px-4 text-center"
|
||||
onClick={() => handleSort('transaction_date')}
|
||||
>
|
||||
費用日期 {sortField === 'transaction_date' && (sortDirection === 'asc' ? '↑' : '↓')}
|
||||
<TableHead className="w-[50px] text-center">#</TableHead>
|
||||
<TableHead className="w-[120px]">
|
||||
<button
|
||||
onClick={() => handleSort('transaction_date')}
|
||||
className="flex items-center hover:text-gray-900"
|
||||
>
|
||||
費用日期 <SortIcon field="transaction_date" />
|
||||
</button>
|
||||
</TableHead>
|
||||
<TableHead
|
||||
className="cursor-pointer hover:text-primary transition-colors py-4 px-4"
|
||||
onClick={() => handleSort('category')}
|
||||
>
|
||||
費用類別 {sortField === 'category' && (sortDirection === 'asc' ? '↑' : '↓')}
|
||||
<TableHead>
|
||||
<button
|
||||
onClick={() => handleSort('category')}
|
||||
className="flex items-center hover:text-gray-900"
|
||||
>
|
||||
費用類別 <SortIcon field="category" />
|
||||
</button>
|
||||
</TableHead>
|
||||
<TableHead
|
||||
className="cursor-pointer hover:text-primary transition-colors py-4 px-4 text-right"
|
||||
onClick={() => handleSort('amount')}
|
||||
>
|
||||
金額 {sortField === 'amount' && (sortDirection === 'asc' ? '↑' : '↓')}
|
||||
<TableHead className="text-right">
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
onClick={() => handleSort('amount')}
|
||||
className="flex items-center hover:text-gray-900"
|
||||
>
|
||||
金額 <SortIcon field="amount" />
|
||||
</button>
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead
|
||||
className="cursor-pointer hover:text-primary transition-colors py-4 px-4"
|
||||
onClick={() => handleSort('invoice_number')}
|
||||
>
|
||||
發票號碼 {sortField === 'invoice_number' && (sortDirection === 'asc' ? '↑' : '↓')}
|
||||
<TableHead>
|
||||
<button
|
||||
onClick={() => handleSort('invoice_number')}
|
||||
className="flex items-center hover:text-gray-900"
|
||||
>
|
||||
發票號碼 <SortIcon field="invoice_number" />
|
||||
</button>
|
||||
</TableHead>
|
||||
<TableHead className="py-4 px-4">說明 / 備註</TableHead>
|
||||
<TableHead className="py-4 px-4 text-center w-[120px]">操作</TableHead>
|
||||
<TableHead>說明 / 備註</TableHead>
|
||||
<TableHead className="text-center w-[120px]">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{fees.data.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={6} className="h-48 text-center text-gray-500">
|
||||
<div className="flex flex-col items-center justify-center space-y-2">
|
||||
<TableCell colSpan={7}>
|
||||
<div className="flex flex-col items-center justify-center space-y-2 py-8">
|
||||
<FileText className="h-8 w-8 text-gray-300" />
|
||||
<p>找不到符合條件的費用紀錄</p>
|
||||
<p className="text-gray-500">找不到符合條件的費用紀錄</p>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
fees.data.map((fee) => (
|
||||
<TableRow key={fee.id} className="hover:bg-gray-50/50 transition-colors">
|
||||
<TableCell className="text-center font-medium">{fee.transaction_date}</TableCell>
|
||||
fees.data.map((fee, index) => (
|
||||
<TableRow key={fee.id}>
|
||||
<TableCell className="text-gray-500 font-medium text-center">
|
||||
{fees.from + index}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium text-gray-700">
|
||||
{formatDateWithDayOfWeek(fee.transaction_date)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="px-2.5 py-0.5 rounded-full text-xs font-semibold bg-primary/10 text-primary">
|
||||
<Badge variant="outline">
|
||||
{fee.category}
|
||||
</span>
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-right font-bold text-gray-900">
|
||||
$ {Number(fee.amount).toLocaleString()}
|
||||
</TableCell>
|
||||
<TableCell className="font-mono text-sm text-gray-600">
|
||||
{fee.invoice_number || '-'}
|
||||
{formatInvoiceNumber(fee.invoice_number)}
|
||||
</TableCell>
|
||||
<TableCell className="max-w-xs truncate text-gray-600" title={fee.description}>
|
||||
{fee.description || '-'}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="button-outlined-primary h-8 w-8 p-0"
|
||||
onClick={() => openEditDialog(fee)}
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="button-outlined-error h-8 w-8 p-0"
|
||||
onClick={() => confirmDelete(fee.id)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
<Can permission="utility_fees.edit">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="button-outlined-primary"
|
||||
onClick={() => openEditDialog(fee)}
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
</Can>
|
||||
<Can permission="utility_fees.delete">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="button-outlined-error"
|
||||
onClick={() => confirmDelete(fee.id)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</Can>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
@@ -223,14 +223,14 @@ export default function AddInventoryPage({ warehouse, products }: Props) {
|
||||
入庫日期 <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-400 pointer-events-none" />
|
||||
<Input
|
||||
id="inbound-date"
|
||||
type="datetime-local"
|
||||
value={inboundDate}
|
||||
onChange={(e) => setInboundDate(e.target.value)}
|
||||
className="border-gray-300 pr-10"
|
||||
className="border-gray-300 pl-9"
|
||||
/>
|
||||
<Calendar className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400 pointer-events-none" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user