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

This commit is contained in:
2026-01-20 17:45:38 +08:00
parent 89183ca124
commit 9a50bbf887
9 changed files with 251 additions and 120 deletions

View File

@@ -7,13 +7,14 @@ use App\Models\UtilityFee;
use Illuminate\Http\Request;
use Inertia\Inertia;
use Illuminate\Support\Carbon;
use Illuminate\Pagination\LengthAwarePaginator;
class AccountingReportController extends Controller
{
public function index(Request $request)
{
$dateStart = $request->input('date_start', Carbon::now()->startOfMonth()->toDateString());
$dateEnd = $request->input('date_end', Carbon::now()->endOfMonth()->toDateString());
$dateStart = $request->input('date_start', Carbon::now()->toDateString());
$dateEnd = $request->input('date_end', Carbon::now()->toDateString());
// 1. Get Purchase Orders (Completed or Received that are ready for accounting)
$purchaseOrders = PurchaseOrder::with(['vendor'])
@@ -23,7 +24,7 @@ class AccountingReportController extends Controller
->map(function ($po) {
return [
'id' => 'PO-' . $po->id,
'date' => $po->created_at->toDateString(),
'date' => Carbon::parse($po->created_at)->timezone(config('app.timezone'))->toDateString(),
'source' => '採購單',
'category' => '進貨支出',
'item' => $po->vendor->name ?? '未知廠商',
@@ -39,7 +40,7 @@ class AccountingReportController extends Controller
->map(function ($fee) {
return [
'id' => 'UF-' . $fee->id,
'date' => $fee->transaction_date,
'date' => $fee->transaction_date->format('Y-m-d'),
'source' => '公共事業費',
'category' => $fee->category,
'item' => $fee->description ?: $fee->category,
@@ -54,6 +55,19 @@ class AccountingReportController extends Controller
->sortByDesc('date')
->values();
// 3. Manual Pagination
$perPage = $request->input('per_page', 10);
$page = $request->input('page', 1);
$offset = ($page - 1) * $perPage;
$paginatedRecords = new LengthAwarePaginator(
$allRecords->slice($offset, $perPage)->values(),
$allRecords->count(),
$perPage,
$page,
['path' => $request->url(), 'query' => $request->query()]
);
$summary = [
'total_amount' => $allRecords->sum('amount'),
'purchase_total' => $purchaseOrders->sum('amount'),
@@ -62,19 +76,20 @@ class AccountingReportController extends Controller
];
return Inertia::render('Accounting/Report', [
'records' => $allRecords,
'records' => $paginatedRecords,
'summary' => $summary,
'filters' => [
'date_start' => $dateStart,
'date_end' => $dateEnd,
'per_page' => (int)$perPage,
],
]);
}
public function export(Request $request)
{
$dateStart = $request->input('date_start', Carbon::now()->startOfMonth()->toDateString());
$dateEnd = $request->input('date_end', Carbon::now()->endOfMonth()->toDateString());
$dateStart = $request->input('date_start', Carbon::now()->toDateString());
$dateEnd = $request->input('date_end', Carbon::now()->toDateString());
$purchaseOrders = PurchaseOrder::with(['vendor'])
->whereIn('status', ['received', 'completed'])

View File

@@ -30,8 +30,8 @@ class PurchaseOrder extends Model
];
protected $casts = [
'expected_delivery_date' => 'date',
'invoice_date' => 'date',
'expected_delivery_date' => 'date:Y-m-d',
'invoice_date' => 'date:Y-m-d',
'total_amount' => 'decimal:2',
'tax_amount' => 'decimal:2',
'grand_total' => 'decimal:2',
@@ -76,7 +76,7 @@ class PurchaseOrder extends Model
public function getExpectedDateAttribute(): ?string
{
return $this->expected_delivery_date ? $this->expected_delivery_date->format('Y-m-d') : null;
return $this->attributes['expected_delivery_date'] ?? null;
}
public function getTotalAmountAttribute(): float
@@ -111,8 +111,7 @@ class PurchaseOrder extends Model
public function getInvoiceDateAttribute(): ?string
{
$date = $this->attributes['invoice_date'] ?? null;
return $date ? \Illuminate\Support\Carbon::parse($date)->format('Y-m-d') : null;
return $this->attributes['invoice_date'] ?? null;
}
public function getInvoiceAmountAttribute(): ?float

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>

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 || "",

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>

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",
},
],

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>
{/* 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-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-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)}
className="pl-10 h-10 w-48"
onChange={(e) => {
setDateStart(e.target.value);
setDateRangeType('custom');
}}
className="pl-9 block w-full h-9 bg-white"
/>
</div>
</div>
<div className="space-y-2">
<label className="text-sm font-medium text-gray-700"></label>
<div className="space-y-1">
<Label className="text-xs text-grey-2 font-medium"></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" />
<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)}
className="pl-10 h-10 w-48"
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="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-10 px-6 gap-2"
className="button-filled-primary h-9 px-6 gap-2"
>
<Filter className="h-4 w-4" />
</Button>
</div>
</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>
);

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]">

View File

@@ -144,6 +144,12 @@ Route::middleware('auth')->group(function () {
->middleware('permission:inventory.view')
->name('api.warehouses.inventories');
// 系統管理
Route::middleware('permission:accounting.view')->prefix('accounting-report')->group(function () {
Route::get('/', [AccountingReportController::class, 'index'])->name('accounting.report');
Route::get('/export', [AccountingReportController::class, 'export'])->name('accounting.export');
});
// 系統管理
Route::prefix('admin')->group(function () {
Route::middleware('permission:roles.view')->group(function () {
@@ -171,11 +177,7 @@ Route::middleware('auth')->group(function () {
Route::middleware('permission:system.view_logs')->group(function () {
Route::get('/activity-logs', [ActivityLogController::class, 'index'])->name('activity-logs.index');
});
// 會計報表
Route::middleware('permission:accounting.view')->group(function () {
Route::get('/accounting/report', [AccountingReportController::class, 'index'])->name('accounting.report');
Route::get('/accounting/report/export', [AccountingReportController::class, 'export'])->name('accounting.export');
});
});
}); // End of auth middleware group