mama/star-erp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(accounting): 優化會計報表與公共事業費 UI，並統一全域日期處理格式
All checks were successful
Koori-ERP-Deploy-System / deploy-demo (push) Successful in 1m7s
Details
Koori-ERP-Deploy-System / deploy-production (push) Has been skipped
Details

Browse Source
This commit is contained in:
sky121113
2026-01-20 17:45:38 +08:00
parent 89183ca124
commit 9a50bbf887
9 changed files with 251 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/Components/Product/ProductTable.tsx
View File

@@ -71,7 +71,7 @@ export default function ProductTable({
<>
<div className="bg-white rounded-lg shadow-sm border">
<Table>
<TableHeader>
<TableHeader className="bg-gray-50">
<TableRow>
<TableHead className="w-[50px] text-center">#</TableHead>
<TableHead>

2
resources/js/Components/UtilityFee/UtilityFeeDialog.tsx
View File

@@ -68,7 +68,7 @@ export default function UtilityFeeDialog({
clearErrors();
if (fee) {
setData({
transaction_date: fee.transaction_date.split("T")[0].split(" ")[0],
transaction_date: fee.transaction_date,
category: fee.category,
amount: fee.amount.toString(),
invoice_number: fee.invoice_number || "",

2
resources/js/Components/Vendor/VendorTable.tsx vendored
View File

@@ -57,7 +57,7 @@ export default function VendorTable({
return (
<div className="bg-white rounded-lg shadow-sm border">
<Table>
<TableHeader>
<TableHeader className="bg-gray-50">
<TableRow>
<TableHead className="w-[50px] text-center">#</TableHead>
<TableHead>

2
resources/js/Layouts/AuthenticatedLayout.tsx
View File

@@ -154,7 +154,7 @@ export default function AuthenticatedLayout({
id: "accounting-report",
label: "會計報表",
icon: <FileSpreadsheet className="h-4 w-4" />,
route: "/accounting/report",
route: "/accounting-report",
permission: "accounting.view",
},
],

309
resources/js/Pages/Accounting/Report.tsx
View File

@@ -1,16 +1,17 @@
import { useState } from "react";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import {
BarChart3,
Download,
Calendar,
Filter,
ArrowUpRight,
TrendingDown,
FileSpreadsheet,
Package,
Pocket
Pocket,
RotateCcw,
FileText
} from 'lucide-react';
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Head, router } from "@inertiajs/react";
@@ -22,12 +23,10 @@ import {
TableHeader,
TableRow,
} from "@/Components/ui/table";
import {
Card,
CardContent,
CardHeader,
CardTitle,
} from "@/Components/ui/card";
import { getDateRange, formatDateWithDayOfWeek } from "@/utils/format";
import { Badge } from "@/Components/ui/badge";
import Pagination from "@/Components/shared/Pagination";
import { SearchableSelect } from "@/Components/ui/searchable-select";
interface Record {
id: string;
@@ -41,7 +40,14 @@ interface Record {
}
interface PageProps {
records: Record[];
records: {
data: Record[];
links: any[];
total: number;
from: number;
to: number;
current_page: number;
};
summary: {
total_amount: number;
purchase_total: number;
@@ -51,6 +57,7 @@ interface PageProps {
filters: {
date_start: string;
date_end: string;
per_page?: number;
};
}
@@ -58,17 +65,54 @@ export default function AccountingReport({ records, summary, filters }: PageProp
const [dateStart, setDateStart] = useState(filters.date_start);
const [dateEnd, setDateEnd] = useState(filters.date_end);
// Determine initial range type
const today = new Date().toISOString().split('T')[0];
const initialRangeType = (filters.date_start === today && filters.date_end === today) ? "today" : "custom";
const [dateRangeType, setDateRangeType] = useState(initialRangeType);
const [perPage, setPerPage] = useState(filters.per_page?.toString() || "10");
const handleDateRangeChange = (type: string) => {
setDateRangeType(type);
if (type === "custom") return;
const { start, end } = getDateRange(type);
setDateStart(start);
setDateEnd(end);
};
const handleFilter = () => {
router.get(
route("accounting.report"),
{
date_start: dateStart,
date_end: dateEnd,
per_page: perPage,
},
{ preserveState: true }
);
};
const handlePerPageChange = (value: string) => {
setPerPage(value);
router.get(
route("accounting.report"),
{
date_start: dateStart,
date_end: dateEnd,
per_page: value,
},
{ preserveState: true }
);
};
const handleClearFilters = () => {
setDateStart("");
setDateEnd("");
setPerPage("10");
router.get(route("accounting.report"), {}, { preserveState: false });
};
const handleExport = () => {
window.location.href = route("accounting.export", {
date_start: dateStart,
@@ -77,15 +121,16 @@ export default function AccountingReport({ records, summary, filters }: PageProp
};
return (
<AuthenticatedLayout breadcrumbs={[{ label: "報表管理", href: "#" }, { label: "會計報表", href: route("accounting.report") }]}>
<AuthenticatedLayout breadcrumbs={[{ label: "報表管理", href: "#" }, { label: "會計報表", href: route("accounting.report"), isPage: true }]}>
<Head title="會計報表" />
<div className="container mx-auto p-6 max-w-7xl">
{/* Header */}
<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">
<BarChart3 className="h-6 w-6 text-primary-main" />
會計支出報表
會計報表
</h1>
<p className="text-gray-500 mt-1">彙整採購支出與各項公用事業費用</p>
</div>
@@ -99,111 +144,161 @@ export default function AccountingReport({ records, summary, filters }: PageProp
</Button>
</div>
{/* Filters */}
<div className="bg-white rounded-lg shadow-sm border p-4 mb-6">
<div className="flex flex-wrap items-end gap-4">
<div className="space-y-2">
<label className="text-sm font-medium text-gray-700">開始日期</label>
<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" />
<Input
type="date"
value={dateStart}
onChange={(e) => setDateStart(e.target.value)}
className="pl-10 h-10 w-48"
/>
{/* Filters with Quick Date Range */}
<div className="bg-white rounded-xl shadow-sm border border-grey-4 p-5 mb-6">
<div className="flex flex-col gap-4">
<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-2">快速時間區間</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>
<div className="space-y-2">
<label className="text-sm font-medium text-gray-700">結束日期</label>
<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" />
<Input
type="date"
value={dateEnd}
onChange={(e) => setDateEnd(e.target.value)}
className="pl-10 h-10 w-48"
/>
</div>
{/* Action Buttons */}
<div className="flex items-center justify-end border-t border-grey-4 pt-5 gap-3">
<Button
variant="outline"
onClick={handleClearFilters}
className="flex items-center gap-2 button-outlined-primary h-9 ml-auto"
>
<RotateCcw className="h-4 w-4" />
重置
</Button>
<Button
onClick={handleFilter}
className="button-filled-primary h-9 px-6 gap-2"
>
<Filter className="h-4 w-4" /> 篩選
</Button>
</div>
<Button
onClick={handleFilter}
className="button-filled-primary h-10 px-6 gap-2"
>
<Filter className="h-4 w-4" /> 篩選
</Button>
</div>
</div>
{/* Summary Cards */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<Card className="border-l-4 border-l-red-500 shadow-sm">
<CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle className="text-sm font-medium text-gray-500">總計支出</CardTitle>
<TrendingDown className="h-4 w-4 text-red-500" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold text-gray-900">$ {Number(summary.total_amount).toLocaleString()}</div>
<p className="text-xs text-gray-400 mt-1">共有 {summary.record_count} 筆紀錄</p>
</CardContent>
</Card>
{/* Compact Summary - Full Width Grid (Horizontal Style) */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<div className="flex items-center gap-3 px-4 py-4 bg-white rounded-xl border-l-4 border-l-red-500 shadow-sm border border-gray-100 transition-all hover:bg-gray-50">
<TrendingDown className="h-6 w-6 text-red-500 shrink-0" />
<div className="flex flex-1 items-baseline justify-between gap-2 min-w-0">
<span className="text-sm text-gray-500 font-medium shrink-0">總計支出</span>
<span className="text-xl font-bold text-gray-900 truncate">$ {Number(summary.total_amount).toLocaleString()}</span>
</div>
</div>
<Card className="border-l-4 border-l-orange-500 shadow-sm">
<CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle className="text-sm font-medium text-gray-500">採購支出</CardTitle>
<Package className="h-4 w-4 text-orange-500" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold text-gray-900">$ {Number(summary.purchase_total).toLocaleString()}</div>
<p className="text-xs text-gray-400 mt-1">採購單彙整</p>
</CardContent>
</Card>
<div className="flex items-center gap-3 px-4 py-4 bg-white rounded-xl border-l-4 border-l-orange-500 shadow-sm border border-gray-100 transition-all hover:bg-gray-50">
<Package className="h-6 w-6 text-orange-500 shrink-0" />
<div className="flex flex-1 items-baseline justify-between gap-2 min-w-0">
<span className="text-sm text-gray-500 font-medium shrink-0">採購支出</span>
<span className="text-xl font-bold text-gray-900 truncate">$ {Number(summary.purchase_total).toLocaleString()}</span>
</div>
</div>
<Card className="border-l-4 border-l-blue-500 shadow-sm">
<CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle className="text-sm font-medium text-gray-500">公共事業費</CardTitle>
<Pocket className="h-4 w-4 text-blue-500" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold text-gray-900">$ {Number(summary.utility_total).toLocaleString()}</div>
<p className="text-xs text-gray-400 mt-1">水、電、瓦斯、電信等費項</p>
</CardContent>
</Card>
<div className="flex items-center gap-3 px-4 py-4 bg-white rounded-xl border-l-4 border-l-blue-500 shadow-sm border border-gray-100 transition-all hover:bg-gray-50">
<Pocket className="h-6 w-6 text-blue-500 shrink-0" />
<div className="flex flex-1 items-baseline justify-between gap-2 min-w-0">
<span className="text-sm text-gray-500 font-medium shrink-0">公共事業費</span>
<span className="text-xl font-bold text-gray-900 truncate">$ {Number(summary.utility_total).toLocaleString()}</span>
</div>
</div>
</div>
{/* Results Table */}
<div className="bg-white rounded-lg shadow-sm border overflow-hidden">
<div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
<Table>
<TableHeader className="bg-gray-50">
<TableRow>
<TableHead className="w-[120px] py-4 px-4">日期</TableHead>
<TableHead className="w-[120px]">來源</TableHead>
<TableHead className="w-[120px]">類別</TableHead>
<TableHead className="px-4">項目詳細</TableHead>
<TableHead className="w-[180px]">憑證 / 單號</TableHead>
<TableHead className="w-[150px] text-right px-4">金額</TableHead>
<TableHead className="w-[140px] text-center">日期</TableHead>
<TableHead className="w-[120px] text-center">來源</TableHead>
<TableHead className="w-[140px] text-center">類別</TableHead>
<TableHead className="px-6">項目詳細</TableHead>
<TableHead className="w-[180px] text-right px-6">金額</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{records.length === 0 ? (
{records.data.length === 0 ? (
<TableRow>
<TableCell colSpan={6} className="h-48 text-center text-gray-500">
此日期區間內無支出紀錄
<TableCell colSpan={5}>
<div className="flex flex-col items-center justify-center space-y-2 py-8 text-gray-400">
<FileText className="h-10 w-10 opacity-20" />
<p>此日期區間內無支出紀錄</p>
</div>
</TableCell>
</TableRow>
) : (
records.map((record) => (
<TableRow key={record.id} className="hover:bg-gray-50/50">
<TableCell className="font-medium">{record.date}</TableCell>
<TableCell>
<span className={`px-2 py-0.5 rounded text-xs font-medium ${record.source === '採購單' ? 'bg-orange-100 text-orange-700' : 'bg-blue-100 text-blue-700'
}`}>
{record.source}
</span>
records.data.map((record) => (
<TableRow key={record.id}>
<TableCell className="font-medium text-gray-700 text-center">
{formatDateWithDayOfWeek(record.date)}
</TableCell>
<TableCell className="text-center">
<Badge variant="secondary" className={
record.source === '採購單'
? 'bg-orange-50 text-orange-700 border-orange-100'
: 'bg-blue-50 text-blue-700 border-blue-100'
}>
{record.source}
</Badge>
</TableCell>
<TableCell className="text-gray-600 text-center">
<Badge variant="outline" className="font-normal border-gray-200">
{record.category}
</Badge>
</TableCell>
<TableCell className="text-gray-600">{record.category}</TableCell>
<TableCell>
<div className="flex flex-col">
<span className="font-medium text-gray-900">{record.item}</span>
@@ -212,9 +307,6 @@ export default function AccountingReport({ records, summary, filters }: PageProp
)}
</div>
</TableCell>
<TableCell className="font-mono text-sm text-gray-500">
{record.reference}
</TableCell>
<TableCell className="text-right font-bold text-gray-900 px-4">
$ {Number(record.amount).toLocaleString()}
</TableCell>
@@ -224,6 +316,29 @@ export default function AccountingReport({ records, summary, filters }: PageProp
</TableBody>
</Table>
</div>
{/* Pagination Footer */}
<div className="mt-6 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={records.links} />
</div>
</div>
</div>
</AuthenticatedLayout>
);

4
resources/js/Pages/UtilityFee/Index.tsx
View File

@@ -212,7 +212,7 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
};
return (
<AuthenticatedLayout breadcrumbs={[{ label: "財務管理", href: "#" }, { label: "公共事業費", href: route("utility-fees.index") }]}>
<AuthenticatedLayout breadcrumbs={[{ label: "財務管理", href: "#" }, { label: "公共事業費", href: route("utility-fees.index"), isPage: true }]}>
<Head title="公共事業費管理" />
<div className="container mx-auto p-6 max-w-7xl">
@@ -385,7 +385,7 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
{/* Table */}
<div className="bg-white rounded-lg shadow-sm border overflow-hidden">
<Table>
<TableHeader>
<TableHeader className="bg-gray-50">
<TableRow>
<TableHead className="w-[50px] text-center">#</TableHead>
<TableHead className="w-[120px]">