546 lines
26 KiB
TypeScript
546 lines
26 KiB
TypeScript
import { useState } from "react";
|
||
import { Button } from "@/Components/ui/button";
|
||
import { Input } from "@/Components/ui/input";
|
||
import { SearchableSelect } from "@/Components/ui/searchable-select";
|
||
import {
|
||
Plus,
|
||
Search,
|
||
X,
|
||
Pencil,
|
||
Trash2,
|
||
FileText,
|
||
Calendar,
|
||
RotateCcw,
|
||
ArrowUpDown,
|
||
ArrowUp,
|
||
ArrowDown,
|
||
ChevronDown,
|
||
ChevronUp
|
||
} from 'lucide-react';
|
||
import { Label } from "@/Components/ui/label";
|
||
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
|
||
import { Head, router } from "@inertiajs/react";
|
||
import Pagination from "@/Components/shared/Pagination";
|
||
import {
|
||
Table,
|
||
TableBody,
|
||
TableCell,
|
||
TableHead,
|
||
TableHeader,
|
||
TableRow,
|
||
} from "@/Components/ui/table";
|
||
import { Badge } from "@/Components/ui/badge";
|
||
import { toast } from "sonner";
|
||
import UtilityFeeDialog, { UtilityFee } from "@/Components/UtilityFee/UtilityFeeDialog";
|
||
import {
|
||
AlertDialog,
|
||
AlertDialogAction,
|
||
AlertDialogCancel,
|
||
AlertDialogContent,
|
||
AlertDialogDescription,
|
||
AlertDialogFooter,
|
||
AlertDialogHeader,
|
||
AlertDialogTitle,
|
||
} from "@/Components/ui/alert-dialog";
|
||
import { Can } from "@/Components/Permission/Can";
|
||
import { formatDateWithDayOfWeek, formatInvoiceNumber, getDateRange } from "@/utils/format";
|
||
|
||
interface PageProps {
|
||
fees: {
|
||
data: UtilityFee[];
|
||
links: any[];
|
||
from: number;
|
||
to: number;
|
||
total: number;
|
||
current_page: number;
|
||
last_page: number;
|
||
per_page: number;
|
||
};
|
||
availableCategories: string[];
|
||
filters: {
|
||
search?: string;
|
||
category?: string;
|
||
date_start?: string;
|
||
date_end?: string;
|
||
sort_field?: string | null;
|
||
sort_direction?: "asc" | "desc" | null;
|
||
per_page?: string;
|
||
};
|
||
}
|
||
|
||
export default function UtilityFeeIndex({ fees, availableCategories, filters }: PageProps) {
|
||
const [searchTerm, setSearchTerm] = useState(filters.search || "");
|
||
const [categoryFilter, setCategoryFilter] = useState<string>(filters.category || "all");
|
||
const [dateStart, setDateStart] = useState(filters.date_start || "");
|
||
const [dateEnd, setDateEnd] = useState(filters.date_end || "");
|
||
const [dateRangeType, setDateRangeType] = useState("custom");
|
||
const [perPage, setPerPage] = useState<string>(filters.per_page || "10");
|
||
|
||
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
|
||
const [editingFee, setEditingFee] = useState<UtilityFee | null>(null);
|
||
const [deletingFeeId, setDeletingFeeId] = useState<number | null>(null);
|
||
|
||
// Advanced Filter Toggle
|
||
const [showAdvancedFilter, setShowAdvancedFilter] = useState(
|
||
!!(filters.date_start || filters.date_end)
|
||
);
|
||
|
||
// Sorting
|
||
const [sortField, setSortField] = useState<string | null>(filters.sort_field || null);
|
||
const [sortDirection, setSortDirection] = useState<"asc" | "desc" | null>(filters.sort_direction as "asc" | "desc" || null);
|
||
|
||
const handleDateRangeChange = (type: string) => {
|
||
setDateRangeType(type);
|
||
if (type === "custom") return;
|
||
|
||
const { start, end } = getDateRange(type);
|
||
setDateStart(start);
|
||
setDateEnd(end);
|
||
};
|
||
|
||
const handleSearch = () => {
|
||
router.get(
|
||
route("utility-fees.index"),
|
||
{
|
||
search: searchTerm,
|
||
category: categoryFilter,
|
||
date_start: dateStart,
|
||
date_end: dateEnd,
|
||
sort_field: sortField,
|
||
sort_direction: sortDirection,
|
||
per_page: perPage,
|
||
},
|
||
{ preserveState: true }
|
||
);
|
||
};
|
||
|
||
const handlePerPageChange = (value: string) => {
|
||
setPerPage(value);
|
||
router.get(
|
||
route("utility-fees.index"),
|
||
{
|
||
search: searchTerm,
|
||
category: categoryFilter,
|
||
date_start: dateStart,
|
||
date_end: dateEnd,
|
||
sort_field: sortField,
|
||
sort_direction: sortDirection,
|
||
per_page: value,
|
||
},
|
||
{ preserveState: false, preserveScroll: true }
|
||
);
|
||
};
|
||
|
||
const handleClearFilters = () => {
|
||
setSearchTerm("");
|
||
setCategoryFilter("all");
|
||
setDateStart("");
|
||
setDateEnd("");
|
||
setDateRangeType("custom");
|
||
router.get(route("utility-fees.index"), { per_page: perPage }, { preserveState: false });
|
||
};
|
||
|
||
const handleSort = (field: string) => {
|
||
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"),
|
||
{
|
||
search: searchTerm,
|
||
category: categoryFilter,
|
||
date_start: dateStart,
|
||
date_end: dateEnd,
|
||
sort_field: newField,
|
||
sort_direction: newDirection,
|
||
per_page: perPage,
|
||
},
|
||
{ preserveState: true }
|
||
);
|
||
};
|
||
|
||
const openAddDialog = () => {
|
||
setEditingFee(null);
|
||
setIsDialogOpen(true);
|
||
};
|
||
|
||
const openEditDialog = (fee: UtilityFee) => {
|
||
setEditingFee(fee);
|
||
setIsDialogOpen(true);
|
||
};
|
||
|
||
const confirmDelete = (id: number) => {
|
||
setDeletingFeeId(id);
|
||
setIsDeleteDialogOpen(true);
|
||
};
|
||
|
||
const handleDelete = () => {
|
||
if (deletingFeeId) {
|
||
router.delete(route("utility-fees.destroy", deletingFeeId), {
|
||
onSuccess: () => {
|
||
toast.success("紀錄已刪除");
|
||
setIsDeleteDialogOpen(false);
|
||
},
|
||
});
|
||
}
|
||
};
|
||
|
||
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"), isPage: true }]}>
|
||
<Head title="公共事業費管理" />
|
||
|
||
<div className="container mx-auto p-6 max-w-7xl">
|
||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6">
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
|
||
<FileText className="h-6 w-6 text-primary-main" />
|
||
公共事業費管理
|
||
</h1>
|
||
<p className="text-gray-500 mt-1">管理店鋪水、電、瓦斯等各項公共事業費用支出</p>
|
||
</div>
|
||
|
||
<Can permission="utility_fees.create">
|
||
<Button
|
||
onClick={openAddDialog}
|
||
className="button-filled-primary gap-2"
|
||
>
|
||
<Plus className="h-4 w-4" /> 新增紀錄
|
||
</Button>
|
||
</Can>
|
||
</div>
|
||
|
||
<div className="bg-white rounded-xl shadow-sm border border-grey-4 p-5 mb-6">
|
||
<div className="flex flex-col gap-4">
|
||
{/* Row 1: Search and Category */}
|
||
<div className="grid grid-cols-1 md:grid-cols-12 gap-4">
|
||
<div className="md:col-span-8 space-y-1">
|
||
<Label className="text-xs font-medium text-grey-1">關鍵字搜尋</Label>
|
||
<div className="relative">
|
||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
|
||
<Input
|
||
placeholder="搜尋發票號碼、說明或備註..."
|
||
value={searchTerm}
|
||
onChange={(e) => setSearchTerm(e.target.value)}
|
||
onKeyDown={(e) => e.key === "Enter" && handleSearch()}
|
||
className="pl-10 h-9 block"
|
||
/>
|
||
{searchTerm && (
|
||
<button
|
||
onClick={() => setSearchTerm("")}
|
||
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
|
||
>
|
||
<X className="h-4 w-4" />
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<div className="md:col-span-4 space-y-1">
|
||
<Label className="text-xs font-medium text-grey-1">費用類別</Label>
|
||
<SearchableSelect
|
||
value={categoryFilter}
|
||
onValueChange={setCategoryFilter}
|
||
options={[
|
||
{ label: "所有類別", value: "all" },
|
||
...availableCategories.map(c => ({ label: c, value: c }))
|
||
]}
|
||
placeholder="篩選類別"
|
||
className="h-9"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Row 2: Date Filters (Collapsible) */}
|
||
{showAdvancedFilter && (
|
||
<div className="grid grid-cols-1 md:grid-cols-12 gap-4 items-end animate-in fade-in slide-in-from-top-2 duration-200">
|
||
<div className="md:col-span-6 space-y-2">
|
||
<Label className="text-xs font-medium text-grey-1">快速時間區間</Label>
|
||
<div className="flex flex-wrap gap-2">
|
||
{[
|
||
{ label: "今日", value: "today" },
|
||
{ label: "昨日", value: "yesterday" },
|
||
{ label: "本週", value: "this_week" },
|
||
{ label: "本月", value: "this_month" },
|
||
{ label: "上月", value: "last_month" },
|
||
].map((opt) => (
|
||
<Button
|
||
key={opt.value}
|
||
size="sm"
|
||
onClick={() => handleDateRangeChange(opt.value)}
|
||
className={
|
||
dateRangeType === opt.value
|
||
? 'button-filled-primary h-9 px-4 shadow-sm'
|
||
: 'button-outlined-primary h-9 px-4 bg-white'
|
||
}
|
||
>
|
||
{opt.label}
|
||
</Button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="md:col-span-6">
|
||
<div className="grid grid-cols-2 gap-4 items-end">
|
||
<div className="space-y-1">
|
||
<Label className="text-xs text-grey-2 font-medium">開始日期</Label>
|
||
<div className="relative">
|
||
<Calendar className="absolute left-2.5 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 pointer-events-none" />
|
||
<Input
|
||
type="date"
|
||
value={dateStart}
|
||
onChange={(e) => {
|
||
setDateStart(e.target.value);
|
||
setDateRangeType('custom');
|
||
}}
|
||
className="pl-9 block w-full h-9 bg-white"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<Label className="text-xs text-grey-2 font-medium">結束日期</Label>
|
||
<div className="relative">
|
||
<Calendar className="absolute left-2.5 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 pointer-events-none" />
|
||
<Input
|
||
type="date"
|
||
value={dateEnd}
|
||
onChange={(e) => {
|
||
setDateEnd(e.target.value);
|
||
setDateRangeType('custom');
|
||
}}
|
||
className="pl-9 block w-full h-9 bg-white"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Action Buttons */}
|
||
<div className="flex items-center justify-end border-t border-grey-4 pt-5 gap-3">
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => setShowAdvancedFilter(!showAdvancedFilter)}
|
||
className="mr-auto text-gray-500 hover:text-gray-900 h-9"
|
||
>
|
||
{showAdvancedFilter ? (
|
||
<>
|
||
<ChevronUp className="h-4 w-4 mr-1" />
|
||
收合篩選
|
||
</>
|
||
) : (
|
||
<>
|
||
<ChevronDown className="h-4 w-4 mr-1" />
|
||
進階篩選
|
||
{(dateStart || dateEnd) && (
|
||
<span className="ml-2 w-2 h-2 rounded-full bg-primary-main" />
|
||
)}
|
||
</>
|
||
)}
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
onClick={handleClearFilters}
|
||
className="flex items-center gap-2 button-outlined-primary h-9"
|
||
>
|
||
<RotateCcw className="h-4 w-4" />
|
||
重置
|
||
</Button>
|
||
<Button
|
||
onClick={handleSearch}
|
||
className="button-filled-primary h-9 px-6 gap-2"
|
||
>
|
||
<Search className="h-4 w-4" /> 查詢
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Table */}
|
||
<div className="bg-white rounded-lg shadow-sm border overflow-hidden">
|
||
<Table>
|
||
<TableHeader className="bg-gray-50">
|
||
<TableRow>
|
||
<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>
|
||
<button
|
||
onClick={() => handleSort('category')}
|
||
className="flex items-center hover:text-gray-900"
|
||
>
|
||
費用類別 <SortIcon field="category" />
|
||
</button>
|
||
</TableHead>
|
||
<TableHead>
|
||
<button
|
||
onClick={() => handleSort('invoice_number')}
|
||
className="flex items-center hover:text-gray-900"
|
||
>
|
||
發票號碼 <SortIcon field="invoice_number" />
|
||
</button>
|
||
</TableHead>
|
||
<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>說明 / 備註</TableHead>
|
||
<TableHead className="text-center w-[120px]">操作</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{fees.data.length === 0 ? (
|
||
<TableRow>
|
||
<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 className="text-gray-500">找不到符合條件的費用紀錄</p>
|
||
</div>
|
||
</TableCell>
|
||
</TableRow>
|
||
) : (
|
||
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>
|
||
<Badge variant="outline">
|
||
{fee.category}
|
||
</Badge>
|
||
</TableCell>
|
||
<TableCell className="font-mono text-sm text-gray-600">
|
||
{formatInvoiceNumber(fee.invoice_number)}
|
||
</TableCell>
|
||
<TableCell className="text-right font-bold text-gray-900">
|
||
$ {Number(fee.amount).toLocaleString()}
|
||
</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">
|
||
<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>
|
||
))
|
||
)}
|
||
</TableBody>
|
||
</Table>
|
||
|
||
</div>
|
||
|
||
<div className="mt-4 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
||
<div className="flex items-center gap-2 text-sm text-gray-500">
|
||
<span>每頁顯示</span>
|
||
<SearchableSelect
|
||
value={perPage}
|
||
onValueChange={handlePerPageChange}
|
||
options={[
|
||
{ label: "10", value: "10" },
|
||
{ label: "20", value: "20" },
|
||
{ label: "50", value: "50" },
|
||
{ label: "100", value: "100" }
|
||
]}
|
||
className="w-[100px] h-8"
|
||
showSearch={false}
|
||
/>
|
||
<span>筆</span>
|
||
</div>
|
||
<div className="w-full sm:w-auto flex justify-center sm:justify-end">
|
||
<Pagination links={fees.links} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<UtilityFeeDialog
|
||
open={isDialogOpen}
|
||
onOpenChange={setIsDialogOpen}
|
||
fee={editingFee}
|
||
availableCategories={availableCategories}
|
||
/>
|
||
|
||
<AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
|
||
<AlertDialogContent>
|
||
<AlertDialogHeader>
|
||
<AlertDialogTitle>確認刪除？</AlertDialogTitle>
|
||
<AlertDialogDescription>
|
||
這將永久刪除此筆費用紀錄，此操作無法撤銷。
|
||
</AlertDialogDescription>
|
||
</AlertDialogHeader>
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel>取消</AlertDialogCancel>
|
||
<AlertDialogAction
|
||
onClick={handleDelete}
|
||
className="bg-red-600 hover:bg-red-700 text-white"
|
||
>
|
||
確認刪除
|
||
</AlertDialogAction>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
</AuthenticatedLayout>
|
||
);
|
||
}
|