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

feat: 更新庫存報表、銷售匯入及採購單相關功能
All checks were successful
Koori-ERP-Deploy-System / deploy-demo (push) Has been skipped
Details
Koori-ERP-Deploy-System / deploy-production (push) Successful in 1m3s
Details

Browse Source
This commit is contained in:
sky121113
2026-02-10 17:18:59 +08:00
parent 593ce94734
commit 220478641d
11 changed files with 590 additions and 409 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/Modules/Inventory/Controllers/InventoryReportController.php
View File

@@ -24,9 +24,17 @@ class InventoryReportController extends Controller
public function index(Request $request)
{
$filters = $request->only([
'date_from', 'date_to', 'warehouse_id', 'category_id', 'search', 'per_page'
'date_from', 'date_to', 'warehouse_id', 'category_id', 'search', 'per_page',
'sort_by', 'sort_order'
]);
if (!isset($filters['date_from'])) {
$filters['date_from'] = date('Y-m-d');
}
if (!isset($filters['date_to'])) {
$filters['date_to'] = date('Y-m-d');
}
$reportData = $this->reportService->getReportData($filters, $request->input('per_page', 10));
$summary = $this->reportService->getSummary($filters);

4
app/Modules/Inventory/Exports/InventoryReportExport.php
View File

@@ -34,6 +34,8 @@ class InventoryReportExport implements FromCollection, WithHeadings, WithMapping
'分類',
'進貨量',
'出貨量',
'調撥入',
'調撥出',
'調整量',
'淨變動',
];
@@ -47,6 +49,8 @@ class InventoryReportExport implements FromCollection, WithHeadings, WithMapping
$row->category_name ?? '-',
$row->inbound_qty,
$row->outbound_qty,
$row->transfer_in_qty,
$row->transfer_out_qty,
$row->adjust_qty,
$row->net_change,
];

26
app/Modules/Inventory/Services/InventoryReportService.php
View File

@@ -30,6 +30,8 @@ class InventoryReportService
$warehouseId = $filters['warehouse_id'] ?? null;
$categoryId = $filters['category_id'] ?? null;
$search = $filters['search'] ?? null;
$sortBy = $filters['sort_by'] ?? 'product_code';
$sortOrder = $filters['sort_order'] ?? 'asc';
// 若無任何篩選條件，直接回傳空資料
if (!$dateFrom && !$dateTo && !$warehouseId && !$categoryId && !$search) {
@@ -54,9 +56,12 @@ class InventoryReportService
DB::raw("SUM(CASE WHEN inventory_transactions.type IN ('入庫', '手動入庫') AND inventory_transactions.quantity > 0 THEN inventory_transactions.quantity ELSE 0 END) as inbound_qty"),
// 出貨量：type 為 出庫 (排除 調撥出庫) (取絕對值)
DB::raw("ABS(SUM(CASE WHEN inventory_transactions.type IN ('出庫') AND inventory_transactions.quantity < 0 THEN inventory_transactions.quantity ELSE 0 END)) as outbound_qty"),
// 調撥入：type 為 調撥入庫
DB::raw("SUM(CASE WHEN inventory_transactions.type = '調撥入庫' AND inventory_transactions.quantity > 0 THEN inventory_transactions.quantity ELSE 0 END) as transfer_in_qty"),
// 調撥出：type 為 調撥出庫 (取絕對值)
DB::raw("ABS(SUM(CASE WHEN inventory_transactions.type = '調撥出庫' AND inventory_transactions.quantity < 0 THEN inventory_transactions.quantity ELSE 0 END)) as transfer_out_qty"),
// 調整量：type 為 庫存調整, 手動編輯
DB::raw("SUM(CASE WHEN inventory_transactions.type IN ('庫存調整', '手動編輯') THEN inventory_transactions.quantity ELSE 0 END) as adjust_qty"),
// 調撥淨額 (隱藏欄位，但包含在 net_change)
// 淨變動：總和 (包含所有類型：進貨、出貨、調整、調撥)
DB::raw("SUM(inventory_transactions.quantity) as net_change"),
])
@@ -92,7 +97,7 @@ class InventoryReportService
});
}
// 分組與排序
// 分組
$query->groupBy([
'products.id',
'products.code',
@@ -100,7 +105,20 @@ class InventoryReportService
'categories.name'
]);
$query->orderBy('products.code', 'asc');
// 動態排序
$allowedSortFields = [
'product_code' => 'products.code',
'product_name' => 'products.name',
'inbound_qty' => 'inbound_qty',
'outbound_qty' => 'outbound_qty',
'transfer_in_qty' => 'transfer_in_qty',
'transfer_out_qty' => 'transfer_out_qty',
'adjust_qty' => 'adjust_qty',
'net_change' => 'net_change',
];
$sortColumn = $allowedSortFields[$sortBy] ?? 'products.code';
$query->orderBy($sortColumn, $sortOrder === 'desc' ? 'desc' : 'asc');
if ($perPage) {
@@ -169,6 +187,8 @@ class InventoryReportService
return $query->select([
DB::raw("SUM(CASE WHEN inventory_transactions.type IN ('入庫', '手動入庫') AND inventory_transactions.quantity > 0 THEN inventory_transactions.quantity ELSE 0 END) as total_inbound"),
DB::raw("ABS(SUM(CASE WHEN inventory_transactions.type IN ('出庫') AND inventory_transactions.quantity < 0 THEN inventory_transactions.quantity ELSE 0 END)) as total_outbound"),
DB::raw("SUM(CASE WHEN inventory_transactions.type = '調撥入庫' AND inventory_transactions.quantity > 0 THEN inventory_transactions.quantity ELSE 0 END) as total_transfer_in"),
DB::raw("ABS(SUM(CASE WHEN inventory_transactions.type = '調撥出庫' AND inventory_transactions.quantity < 0 THEN inventory_transactions.quantity ELSE 0 END)) as total_transfer_out"),
DB::raw("SUM(CASE WHEN inventory_transactions.type IN ('庫存調整', '手動編輯') THEN inventory_transactions.quantity ELSE 0 END) as total_adjust"),
DB::raw("SUM(inventory_transactions.quantity) as total_net_change"),
])->first();

12
app/Modules/Sales/Controllers/SalesImportController.php
View File

@@ -16,8 +16,17 @@ class SalesImportController extends Controller
public function index(Request $request)
{
$perPage = $request->input('per_page', 10);
$search = $request->input('search');
$batches = SalesImportBatch::with('importer')
->when($search, function ($query, $search) {
$query->where(function ($q) use ($search) {
$q->where('id', 'like', "%{$search}%")
->orWhereHas('importer', function ($u) use ($search) {
$u->where('name', 'like', "%{$search}%");
});
});
})
->orderByDesc('created_at')
->paginate($perPage)
->withQueryString();
@@ -25,7 +34,8 @@ class SalesImportController extends Controller
return Inertia::render('Sales/Import/Index', [
'batches' => $batches,
'filters' => [
'per_page' => $perPage,
'per_page' => (string) $perPage,
'search' => $search,
],
]);
}

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

@@ -425,6 +425,7 @@ export default function AuthenticatedLayout({
<Link
href={item.route || "#"}
onClick={() => setIsMobileOpen(false)}
preserveScroll={true}
className={cn(
"w-full flex items-center transition-all rounded-lg group",
level === 0 ? "px-3 py-2.5" : "px-3 py-2",
@@ -483,7 +484,7 @@ export default function AuthenticatedLayout({
>
{isMobileOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
</button>
<Link href="/" className="flex items-center gap-2">
<Link href="/" preserveScroll={true} className="flex items-center gap-2">
<ApplicationLogo className="w-8 h-8 rounded-lg object-contain" />
<span className="font-bold text-slate-900">{branding?.short_name || 'Star'} ERP</span>
</Link>
@@ -510,6 +511,7 @@ export default function AuthenticatedLayout({
<DropdownMenuItem asChild>
<Link
href={route('profile.edit')}
preserveScroll={true}
className="w-full flex items-center cursor-pointer text-slate-600 focus:bg-slate-100 focus:text-slate-900 group"
>
<Settings className="mr-2 h-4 w-4 text-slate-500 group-focus:text-slate-900" />
@@ -551,7 +553,7 @@ export default function AuthenticatedLayout({
)}
</div>
<div className="flex-1 overflow-y-auto overflow-x-hidden p-4 space-y-6">
<div className="flex-1 overflow-y-auto overflow-x-hidden p-4 space-y-6" scroll-region="true">
<nav className="space-y-1">
{menuItems.map((item) => renderMenuItem(item))}
</nav>
@@ -596,7 +598,7 @@ export default function AuthenticatedLayout({
<X className="h-5 w-5" />
</button>
</div>
<div className="flex-1 overflow-y-auto p-4">
<div className="flex-1 overflow-y-auto p-4" scroll-region="true">
<nav className="space-y-1">
{menuItems.map((item) => renderMenuItem(item))}
</nav>

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

@@ -174,8 +174,9 @@ export default function AccountingReport({ records, summary, filters }: PageProp
{/* 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">
{/* Top Config: Date Range & Quick Buttons */}
<div className="flex flex-col lg:flex-row gap-4 lg:items-end">
<div className="flex-none space-y-2">
<Label className="text-xs font-medium text-grey-2">快速時間區間</Label>
<div className="flex flex-wrap gap-2">
{[
@@ -201,8 +202,9 @@ export default function AccountingReport({ records, summary, filters }: PageProp
</div>
</div>
<div className="md:col-span-6">
<div className="grid grid-cols-2 gap-4 items-end">
{/* Date Inputs */}
<div className="w-full lg:flex-1">
<div className="grid grid-cols-2 gap-2">
<div className="space-y-1">
<Label className="text-xs text-grey-2 font-medium">開始日期</Label>
<div className="relative">
@@ -237,22 +239,25 @@ export default function AccountingReport({ records, summary, filters }: PageProp
</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-9 px-6 gap-2"
>
<Filter className="h-4 w-4" /> 查詢
</Button>
{/* Row 2: Actions */}
<div className="grid grid-cols-1 md:grid-cols-12 gap-4 items-end">
<div className="md:col-span-9"></div>
<div className="md:col-span-3 flex items-center gap-2">
<Button
variant="outline"
onClick={handleClearFilters}
className="flex-1 items-center gap-2 button-outlined-primary h-9"
>
<RotateCcw className="h-4 w-4" />
重置
</Button>
<Button
onClick={handleFilter}
className="flex-1 button-filled-primary h-9 gap-2"
>
<Filter className="h-4 w-4" /> 查詢
</Button>
</div>
</div>
</div>
</div>

168
resources/js/Pages/Inventory/GoodsReceipt/Index.tsx
View File

@@ -1,7 +1,7 @@
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, Link, router } from '@inertiajs/react';
import { Button } from '@/Components/ui/button';
import { Plus, Search, FileText, RotateCcw, Calendar, ChevronDown, ChevronUp } from 'lucide-react';
import { Plus, Search, FileText, RotateCcw, Calendar } from 'lucide-react';
import { Input } from '@/Components/ui/input';
import { Label } from '@/Components/ui/label';
import { SearchableSelect } from '@/Components/ui/searchable-select';
@@ -49,9 +49,7 @@ export default function GoodsReceiptIndex({ receipts, filters, warehouses }: Pro
const [dateRangeType, setDateRangeType] = useState('custom');
// Advanced Filter Toggle
const [showAdvanced, setShowAdvanced] = useState(
!!(filters.date_start || filters.date_end)
);
// Sync filters from props
useEffect(() => {
@@ -149,55 +147,12 @@ export default function GoodsReceiptIndex({ receipts, filters, warehouses }: Pro
</div>
{/* Filter Bar */}
<div className="bg-white p-5 rounded-lg shadow-sm border border-gray-200 mb-6">
{/* Row 1: Search, Status, Warehouse */}
<div className="grid grid-cols-1 md:grid-cols-12 gap-4 mb-4">
<div className="md:col-span-4 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={search}
onChange={(e) => setSearch(e.target.value)}
className="pl-10 h-9 block"
onKeyDown={(e) => e.key === 'Enter' && handleFilter()}
/>
</div>
</div>
<div className="md:col-span-4 space-y-1">
<Label className="text-xs font-medium text-grey-1">狀態</Label>
<Select value={status} onValueChange={setStatus}>
<SelectTrigger className="h-9">
<SelectValue placeholder="選擇狀態" />
</SelectTrigger>
<SelectContent>
{statusOptions.map(opt => (
<SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="md:col-span-4 space-y-1">
<Label className="text-xs font-medium text-grey-1">倉庫</Label>
<SearchableSelect
value={warehouseId}
onValueChange={setWarehouseId}
options={warehouseOptions}
placeholder="選擇倉庫"
className="w-full h-9"
showSearch={warehouses.length > 10}
/>
</div>
</div>
{/* Row 2: Date Filters (Collapsible) */}
{showAdvanced && (
<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="bg-white rounded-xl shadow-sm border border-grey-4 p-5 mb-6">
<div className="space-y-4">
{/* Row 1: Date Range & Quick Buttons */}
<div className="flex flex-col lg:flex-row gap-4 lg:items-end">
<div className="flex-none space-y-2">
<Label className="text-xs font-medium text-grey-2">快速時間區間</Label>
<div className="flex flex-wrap gap-2">
{[
{ label: "今日", value: "today" },
@@ -222,8 +177,9 @@ export default function GoodsReceiptIndex({ receipts, filters, warehouses }: Pro
</div>
</div>
<div className="md:col-span-6">
<div className="grid grid-cols-2 gap-4 items-end">
{/* Date Inputs */}
<div className="w-full lg:flex-1">
<div className="grid grid-cols-2 gap-2">
<div className="space-y-1">
<Label className="text-xs text-grey-2 font-medium">開始日期</Label>
<div className="relative">
@@ -257,45 +213,71 @@ export default function GoodsReceiptIndex({ receipts, filters, warehouses }: Pro
</div>
</div>
</div>
)}
<div className="flex items-center justify-end border-t border-gray-100 pt-5 gap-3 mt-4">
<Button
variant="ghost"
size="sm"
onClick={() => setShowAdvanced(!showAdvanced)}
className="mr-auto text-gray-500 hover:text-gray-900 h-9"
>
{showAdvanced ? (
<>
<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={handleReset}
className="flex items-center gap-2 button-outlined-primary h-9"
>
<RotateCcw className="h-4 w-4" />
重置
</Button>
<Button
onClick={handleFilter}
className="flex items-center gap-2 button-filled-primary h-9 px-6"
>
<Search className="h-4 w-4" />
查詢
</Button>
{/* Row 2: Filters & Actions */}
<div className="grid grid-cols-1 md:grid-cols-12 gap-4 items-end">
{/* Search */}
<div className="md:col-span-4 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={search}
onChange={(e) => setSearch(e.target.value)}
className="pl-10 h-9 block"
onKeyDown={(e) => e.key === 'Enter' && handleFilter()}
/>
</div>
</div>
{/* Status */}
<div className="md:col-span-2 space-y-1">
<Label className="text-xs font-medium text-grey-1">狀態</Label>
<Select value={status} onValueChange={setStatus}>
<SelectTrigger className="h-9">
<SelectValue placeholder="選擇狀態" />
</SelectTrigger>
<SelectContent>
{statusOptions.map(opt => (
<SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
))}
</SelectContent>
</Select>
</div>
{/* Warehouse */}
<div className="md:col-span-3 space-y-1">
<Label className="text-xs font-medium text-grey-1">倉庫</Label>
<SearchableSelect
value={warehouseId}
onValueChange={setWarehouseId}
options={warehouseOptions}
placeholder="選擇倉庫"
className="w-full h-9"
showSearch={warehouses.length > 10}
/>
</div>
{/* Actions */}
<div className="md:col-span-3 flex items-center justify-end gap-2">
<Button
variant="outline"
onClick={handleReset}
className="flex-1 flex items-center justify-center gap-2 button-outlined-primary h-9"
>
<RotateCcw className="h-4 w-4" />
重置
</Button>
<Button
onClick={handleFilter}
className="flex-1 flex items-center justify-center gap-2 button-filled-primary h-9"
>
<Search className="h-4 w-4" />
查詢
</Button>
</div>
</div>
</div>
</div>

248
resources/js/Pages/Inventory/Report/Index.tsx
View File

@@ -12,7 +12,10 @@ import {
ArrowUpFromLine,
ArrowDownToLine,
ArrowRightLeft,
TrendingUp
TrendingUp,
ArrowUpDown,
ArrowUp,
ArrowDown
} from 'lucide-react';
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Head, Link, router } from "@inertiajs/react";
@@ -29,6 +32,12 @@ import Pagination from "@/Components/shared/Pagination";
import { SearchableSelect } from "@/Components/ui/searchable-select";
import { Can } from "@/Components/Permission/Can";
import { PageProps } from "@/types/global";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/Components/ui/tooltip";
interface ReportData {
product_code: string;
@@ -37,6 +46,8 @@ interface ReportData {
product_id: number;
inbound_qty: number;
outbound_qty: number;
transfer_in_qty: number;
transfer_out_qty: number;
adjust_qty: number;
net_change: number;
}
@@ -44,6 +55,8 @@ interface ReportData {
interface SummaryData {
total_inbound: number;
total_outbound: number;
total_transfer_in: number;
total_transfer_out: number;
total_adjust: number;
total_net_change: number;
}
@@ -67,6 +80,8 @@ interface InventoryReportProps extends PageProps {
category_id: string;
search: string;
per_page?: number;
sort_by?: string;
sort_order?: 'asc' | 'desc';
};
}
@@ -120,7 +135,7 @@ export default function InventoryReportIndex({ reportData, summary, warehouses,
search: search,
per_page: perPage,
},
{ preserveState: true }
{ preserveState: true, preserveScroll: true }
);
}, [dateStart, dateEnd, warehouseId, categoryId, search, perPage]);
@@ -136,7 +151,7 @@ export default function InventoryReportIndex({ reportData, summary, warehouses,
search: search,
per_page: value,
},
{ preserveState: true }
{ preserveState: true, preserveScroll: true }
);
};
@@ -161,10 +176,51 @@ export default function InventoryReportIndex({ reportData, summary, warehouses,
warehouse_id: warehouseId === "all" ? "" : warehouseId,
category_id: categoryId === "all" ? "" : categoryId,
search: search,
sort_by: filters.sort_by,
sort_order: filters.sort_order,
};
window.location.href = route("inventory.report.export", query);
};
const handleSort = (field: string) => {
let newSortBy: string | undefined = field;
let newSortOrder: 'asc' | 'desc' | undefined = 'asc';
if (filters.sort_by === field) {
if (filters.sort_order === 'asc') {
newSortOrder = 'desc';
} else {
newSortBy = undefined;
newSortOrder = undefined;
}
}
router.get(
route("inventory.report.index"),
{
date_from: dateStart,
date_to: dateEnd,
warehouse_id: warehouseId === "all" ? "" : warehouseId,
category_id: categoryId === "all" ? "" : categoryId,
search: search,
per_page: perPage,
sort_by: newSortBy,
sort_order: newSortOrder,
},
{ preserveState: true, preserveScroll: true }
);
};
const SortIcon = ({ field }: { field: string }) => {
if (filters.sort_by !== field) {
return <ArrowUpDown className="h-4 w-4 text-gray-300 ml-1" />;
}
if (filters.sort_order === "asc") {
return <ArrowUp className="h-4 w-4 text-primary-main ml-1" />;
}
return <ArrowDown className="h-4 w-4 text-primary-main ml-1" />;
};
return (
<AuthenticatedLayout breadcrumbs={[{ label: "報表管理", href: "#" }, { label: "庫存報表", href: route("inventory.report.index"), isPage: true }]}>
<Head title="庫存報表" />
@@ -271,7 +327,7 @@ export default function InventoryReportIndex({ reportData, summary, warehouses,
{/* Detailed Filters row */}
<div className="grid grid-cols-1 md:grid-cols-12 gap-4 items-end">
{/* Warehouse & Category */}
<div className="md:col-span-4 space-y-1">
<div className="md:col-span-3 space-y-1">
<Label className="text-xs text-grey-2 font-medium">倉庫</Label>
<SearchableSelect
value={warehouseId}
@@ -281,7 +337,7 @@ export default function InventoryReportIndex({ reportData, summary, warehouses,
placeholder="選擇倉庫..."
/>
</div>
<div className="md:col-span-4 space-y-1">
<div className="md:col-span-3 space-y-1">
<Label className="text-xs text-grey-2 font-medium">分類</Label>
<SearchableSelect
value={categoryId}
@@ -293,7 +349,7 @@ export default function InventoryReportIndex({ reportData, summary, warehouses,
</div>
{/* Search */}
<div className="md:col-span-4 space-y-1">
<div className="md:col-span-3 space-y-1">
<Label className="text-xs text-grey-2 font-medium">關鍵字</Label>
<Input
placeholder="搜尋商品..."
@@ -303,64 +359,124 @@ export default function InventoryReportIndex({ reportData, summary, warehouses,
onKeyDown={(e) => e.key === 'Enter' && handleFilter()}
/>
</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-9 px-6 gap-2"
>
<Filter className="h-4 w-4" /> 查詢
</Button>
{/* Action Buttons Integrated */}
<div className="md:col-span-3 flex items-center gap-2">
<Button
variant="outline"
onClick={handleClearFilters}
className="flex-1 items-center gap-2 button-outlined-primary h-9"
>
<RotateCcw className="h-4 w-4" />
重置
</Button>
<Button
onClick={handleFilter}
className="flex-1 button-filled-primary h-9 gap-2"
>
<Filter className="h-4 w-4" /> 查詢
</Button>
</div>
</div>
</div>
</div>
{/* Summary Cards */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
<div className="flex items-center gap-3 px-4 py-4 bg-white rounded-xl border-l-4 border-l-emerald-500 shadow-sm border border-gray-100 transition-all hover:bg-gray-50">
<ArrowDownToLine className="h-6 w-6 text-emerald-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_inbound || 0).toLocaleString()}</span>
<TooltipProvider>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-3 mb-6">
<div className="flex items-center gap-3 px-4 py-3 bg-white rounded-xl border-l-4 border-l-emerald-500 shadow-sm border border-gray-100 transition-all hover:bg-gray-50">
<ArrowDownToLine className="h-4 w-4 text-emerald-500 shrink-0" />
<div className="flex flex-1 items-baseline justify-between gap-2 min-w-0">
<span className="text-xs text-gray-500 font-medium shrink-0">進貨量</span>
<Tooltip>
<TooltipTrigger asChild>
<span className="text-lg font-bold text-gray-900 truncate cursor-help">{Number(summary?.total_inbound || 0).toLocaleString()}</span>
</TooltipTrigger>
<TooltipContent>
<p>{Number(summary?.total_inbound || 0).toLocaleString()}</p>
</TooltipContent>
</Tooltip>
</div>
</div>
</div>
<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">
<ArrowUpFromLine 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_outbound || 0).toLocaleString()}</span>
<div className="flex items-center gap-3 px-4 py-3 bg-white rounded-xl border-l-4 border-l-red-500 shadow-sm border border-gray-100 transition-all hover:bg-gray-50">
<ArrowUpFromLine className="h-4 w-4 text-red-500 shrink-0" />
<div className="flex flex-1 items-baseline justify-between gap-2 min-w-0">
<span className="text-xs text-gray-500 font-medium shrink-0">出貨量</span>
<Tooltip>
<TooltipTrigger asChild>
<span className="text-lg font-bold text-gray-900 truncate cursor-help">{Number(summary?.total_outbound || 0).toLocaleString()}</span>
</TooltipTrigger>
<TooltipContent>
<p>{Number(summary?.total_outbound || 0).toLocaleString()}</p>
</TooltipContent>
</Tooltip>
</div>
</div>
</div>
<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">
<ArrowRightLeft 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?.total_adjust || 0).toLocaleString()}</span>
<div className="flex items-center gap-3 px-4 py-3 bg-white rounded-xl border-l-4 border-l-cyan-500 shadow-sm border border-gray-100 transition-all hover:bg-gray-50">
<ArrowDownToLine className="h-4 w-4 text-cyan-500 shrink-0 rotate-180" />
<div className="flex flex-1 items-baseline justify-between gap-2 min-w-0">
<span className="text-xs text-gray-500 font-medium shrink-0">調撥入</span>
<Tooltip>
<TooltipTrigger asChild>
<span className="text-lg font-bold text-gray-900 truncate cursor-help">{Number(summary?.total_transfer_in || 0).toLocaleString()}</span>
</TooltipTrigger>
<TooltipContent>
<p>{Number(summary?.total_transfer_in || 0).toLocaleString()}</p>
</TooltipContent>
</Tooltip>
</div>
</div>
</div>
<div className="flex items-center gap-3 px-4 py-4 bg-white rounded-xl border-l-4 border-l-gray-700 shadow-sm border border-gray-100 transition-all hover:bg-gray-50">
<TrendingUp className="h-6 w-6 text-gray-700 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 truncate ${summary?.total_net_change >= 0 ? "text-emerald-600" : "text-red-600"}`}>
{summary?.total_net_change > 0 ? "+" : ""}{Number(summary?.total_net_change || 0).toLocaleString()}
</span>
<div className="flex items-center gap-3 px-4 py-3 bg-white rounded-xl border-l-4 border-l-orange-500 shadow-sm border border-gray-100 transition-all hover:bg-gray-50">
<ArrowUpFromLine className="h-4 w-4 text-orange-500 shrink-0 rotate-180" />
<div className="flex flex-1 items-baseline justify-between gap-2 min-w-0">
<span className="text-xs text-gray-500 font-medium shrink-0">調撥出</span>
<Tooltip>
<TooltipTrigger asChild>
<span className="text-lg font-bold text-gray-900 truncate cursor-help">{Number(summary?.total_transfer_out || 0).toLocaleString()}</span>
</TooltipTrigger>
<TooltipContent>
<p>{Number(summary?.total_transfer_out || 0).toLocaleString()}</p>
</TooltipContent>
</Tooltip>
</div>
</div>
<div className="flex items-center gap-3 px-4 py-3 bg-white rounded-xl border-l-4 border-l-blue-500 shadow-sm border border-gray-100 transition-all hover:bg-gray-50">
<ArrowRightLeft className="h-4 w-4 text-blue-500 shrink-0" />
<div className="flex flex-1 items-baseline justify-between gap-2 min-w-0">
<span className="text-xs text-gray-500 font-medium shrink-0">調整量</span>
<Tooltip>
<TooltipTrigger asChild>
<span className="text-lg font-bold text-gray-900 truncate cursor-help">{Number(summary?.total_adjust || 0).toLocaleString()}</span>
</TooltipTrigger>
<TooltipContent>
<p>{Number(summary?.total_adjust || 0).toLocaleString()}</p>
</TooltipContent>
</Tooltip>
</div>
</div>
<div className="flex items-center gap-3 px-4 py-3 bg-white rounded-xl border-l-4 border-l-gray-700 shadow-sm border border-gray-100 transition-all hover:bg-gray-50">
<TrendingUp className="h-4 w-4 text-gray-700 shrink-0" />
<div className="flex flex-1 items-baseline justify-between gap-2 min-w-0">
<span className="text-xs text-gray-500 font-medium shrink-0">淨變動</span>
<Tooltip>
<TooltipTrigger asChild>
<span className={`text-lg font-bold truncate cursor-help ${summary?.total_net_change >= 0 ? "text-emerald-600" : "text-red-600"}`}>
{summary?.total_net_change > 0 ? "+" : ""}{Number(summary?.total_net_change || 0).toLocaleString()}
</span>
</TooltipTrigger>
<TooltipContent>
<p>{summary?.total_net_change > 0 ? "+" : ""}{Number(summary?.total_net_change || 0).toLocaleString()}</p>
</TooltipContent>
</Tooltip>
</div>
</div>
</div>
</div>
</TooltipProvider>
{/* Results Table */}
<div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
@@ -368,18 +484,32 @@ export default function InventoryReportIndex({ reportData, summary, warehouses,
<TableHeader className="bg-gray-50">
<TableRow>
<TableHead className="w-[100px]">商品代碼</TableHead>
<TableHead className="">商品名稱</TableHead>
<TableHead>商品名稱</TableHead>
<TableHead className="w-[120px]">分類</TableHead>
<TableHead className="text-right w-[100px] text-emerald-600">進貨量</TableHead>
<TableHead className="text-right w-[100px] text-red-600">出貨量</TableHead>
<TableHead className="text-right w-[100px] text-blue-600">調整量</TableHead>
<TableHead className="text-right w-[100px]">淨變動</TableHead>
<TableHead className="text-right w-[100px] text-emerald-600 cursor-pointer hover:bg-gray-100 transition-colors" onClick={() => handleSort('inbound_qty')}>
<div className="flex items-center justify-end">進貨量 <SortIcon field="inbound_qty" /></div>
</TableHead>
<TableHead className="text-right w-[100px] text-red-600 cursor-pointer hover:bg-gray-100 transition-colors" onClick={() => handleSort('outbound_qty')}>
<div className="flex items-center justify-end">出貨量 <SortIcon field="outbound_qty" /></div>
</TableHead>
<TableHead className="text-right w-[100px] text-cyan-600 cursor-pointer hover:bg-gray-100 transition-colors" onClick={() => handleSort('transfer_in_qty')}>
<div className="flex items-center justify-end">調撥入 <SortIcon field="transfer_in_qty" /></div>
</TableHead>
<TableHead className="text-right w-[100px] text-orange-600 cursor-pointer hover:bg-gray-100 transition-colors" onClick={() => handleSort('transfer_out_qty')}>
<div className="flex items-center justify-end">調撥出 <SortIcon field="transfer_out_qty" /></div>
</TableHead>
<TableHead className="text-right w-[100px] text-blue-600 cursor-pointer hover:bg-gray-100 transition-colors" onClick={() => handleSort('adjust_qty')}>
<div className="flex items-center justify-end">調整量 <SortIcon field="adjust_qty" /></div>
</TableHead>
<TableHead className="text-right w-[100px] cursor-pointer hover:bg-gray-100 transition-colors" onClick={() => handleSort('net_change')}>
<div className="flex items-center justify-end">淨變動 <SortIcon field="net_change" /></div>
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{reportData.data.length === 0 ? (
<TableRow>
<TableCell colSpan={7}>
<TableCell colSpan={9}>
<div className="flex flex-col items-center justify-center space-y-2 py-8 text-gray-400">
<Package className="h-10 w-10 opacity-20" />
<p>無符合條件的報表資料</p>
@@ -431,6 +561,12 @@ export default function InventoryReportIndex({ reportData, summary, warehouses,
<TableCell className="text-right text-red-600 font-medium">
{row.outbound_qty > 0 ? `-${row.outbound_qty}` : "-"}
</TableCell>
<TableCell className="text-right text-cyan-600 font-medium">
{row.transfer_in_qty > 0 ? `+${row.transfer_in_qty}` : "-"}
</TableCell>
<TableCell className="text-right text-orange-600 font-medium">
{row.transfer_out_qty > 0 ? `-${row.transfer_out_qty}` : "-"}
</TableCell>
<TableCell className="text-right text-blue-600 font-medium">
{row.adjust_qty !== 0 ? (row.adjust_qty > 0 ? `+${row.adjust_qty}` : row.adjust_qty) : "-"}
</TableCell>

179
resources/js/Pages/PurchaseOrder/Index.tsx
View File

@@ -3,7 +3,7 @@
*/
import { useState, useEffect } from "react";
import { Plus, ShoppingCart, Search, RotateCcw, Calendar, ChevronDown, ChevronUp } from 'lucide-react';
import { Plus, ShoppingCart, Search, RotateCcw, Calendar } from 'lucide-react';
import { Button } from "@/Components/ui/button";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Head, router } from "@inertiajs/react";
@@ -57,9 +57,7 @@ export default function PurchaseOrderIndex({ orders, filters, warehouses }: Prop
const [dateRangeType, setDateRangeType] = useState('custom');
// Advanced Filter Toggle
const [showAdvancedFilter, setShowAdvancedFilter] = useState(
!!(filters.date_start || filters.date_end)
);
// 同步 URL 參數到 State (雖有初始值，但若由外部連結進入可確保同步)
useEffect(() => {
@@ -152,60 +150,13 @@ export default function PurchaseOrderIndex({ orders, filters, warehouses }: Prop
</div>
{/* 篩選區塊 */}
<div className="bg-white p-5 rounded-lg shadow-sm border border-gray-200 mb-6">
{/* Row 1: Search, Status, Warehouse */}
<div className="grid grid-cols-1 md:grid-cols-12 gap-4 mb-4">
<div className="md:col-span-4 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={search}
onChange={(e) => setSearch(e.target.value)}
className="pl-10 h-9 block"
onKeyDown={(e) => e.key === 'Enter' && handleFilter()}
/>
</div>
</div>
<div className="md:col-span-4 space-y-1">
<Label className="text-xs font-medium text-grey-1">訂單狀態</Label>
<Select value={status} onValueChange={setStatus}>
<SelectTrigger className="h-9">
<SelectValue placeholder="選擇狀態" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">全部狀態</SelectItem>
{MANUAL_STATUS_OPTIONS.map((option) => (
<SelectItem key={option.value} value={option.value}>
{option.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="md:col-span-4 space-y-1">
<Label className="text-xs font-medium text-grey-1">入庫倉庫</Label>
<SearchableSelect
value={warehouseId}
onValueChange={setWarehouseId}
options={[
{ label: "全部倉庫", value: "all" },
...warehouses.map(w => ({ label: w.name, value: String(w.id) }))
]}
placeholder="選擇倉庫"
className="w-full 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="bg-white rounded-xl shadow-sm border border-grey-4 p-5 mb-6">
<div className="space-y-4">
{/* Row 1: Date Range & Quick Buttons */}
<div className="flex flex-col lg:flex-row gap-4 lg:items-end">
<div className="flex-none space-y-2">
<Label className="text-xs font-medium text-grey-2">快速時間區間</Label>
<div className="flex flex-wrap gap-2">
{[
{ label: "今日", value: "today" },
@@ -230,8 +181,9 @@ export default function PurchaseOrderIndex({ orders, filters, warehouses }: Prop
</div>
</div>
<div className="md:col-span-6">
<div className="grid grid-cols-2 gap-4 items-end">
{/* Date Inputs */}
<div className="w-full lg:flex-1">
<div className="grid grid-cols-2 gap-2">
<div className="space-y-1">
<Label className="text-xs text-grey-2 font-medium">開始日期</Label>
<div className="relative">
@@ -265,45 +217,76 @@ export default function PurchaseOrderIndex({ orders, filters, warehouses }: Prop
</div>
</div>
</div>
)}
<div className="flex items-center justify-end border-t border-grey-4 pt-5 gap-3 mt-4">
<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={handleReset}
className="flex items-center gap-2 button-outlined-primary h-9"
>
<RotateCcw className="h-4 w-4" />
重置
</Button>
<Button
onClick={handleFilter}
className="flex items-center gap-2 button-filled-primary h-9 px-6"
>
<Search className="h-4 w-4" />
查詢
</Button>
{/* Row 2: Filters & Actions */}
<div className="grid grid-cols-1 md:grid-cols-12 gap-4 items-end">
{/* Search */}
<div className="md:col-span-4 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={search}
onChange={(e) => setSearch(e.target.value)}
className="pl-10 h-9 block"
onKeyDown={(e) => e.key === 'Enter' && handleFilter()}
/>
</div>
</div>
{/* Status */}
<div className="md:col-span-2 space-y-1">
<Label className="text-xs font-medium text-grey-1">訂單狀態</Label>
<Select value={status} onValueChange={setStatus}>
<SelectTrigger className="h-9">
<SelectValue placeholder="選擇狀態" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">全部狀態</SelectItem>
{MANUAL_STATUS_OPTIONS.map((option) => (
<SelectItem key={option.value} value={option.value}>
{option.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
{/* Warehouse */}
<div className="md:col-span-3 space-y-1">
<Label className="text-xs font-medium text-grey-1">入庫倉庫</Label>
<SearchableSelect
value={warehouseId}
onValueChange={setWarehouseId}
options={[
{ label: "全部倉庫", value: "all" },
...warehouses.map(w => ({ label: w.name, value: String(w.id) }))
]}
placeholder="選擇倉庫"
className="w-full h-9"
/>
</div>
{/* Actions */}
<div className="md:col-span-3 flex items-center justify-end gap-2">
<Button
variant="outline"
onClick={handleReset}
className="flex-1 flex items-center justify-center gap-2 button-outlined-primary h-9"
>
<RotateCcw className="h-4 w-4" />
重置
</Button>
<Button
onClick={handleFilter}
className="flex-1 flex items-center justify-center gap-2 button-filled-primary h-9"
>
<Search className="h-4 w-4" />
查詢
</Button>
</div>
</div>
</div>
</div>

90
resources/js/Pages/Sales/Import/Index.tsx
View File

@@ -21,11 +21,12 @@ import {
AlertDialogTrigger,
} from "@/Components/ui/alert-dialog";
import { Badge } from "@/Components/ui/badge";
import { Plus, FileUp, Eye, Trash2 } from 'lucide-react';
import { Plus, FileUp, Eye, Trash2, Search, X } from 'lucide-react';
import { useState, useEffect } from "react";
import { format } from 'date-fns';
import Pagination from "@/Components/shared/Pagination";
import { SearchableSelect } from "@/Components/ui/searchable-select";
import { Input } from "@/Components/ui/input";
import { router } from "@inertiajs/react";
import { usePermission } from "@/hooks/usePermission";
import SalesImportDialog from "@/Components/Sales/SalesImportDialog";
@@ -47,27 +48,41 @@ interface Props {
data: ImportBatch[];
links: any[]; // Pagination links
};
filters?: { // Add filters prop if not present, though we main need per_page state
filters?: {
per_page?: string;
search?: string;
}
}
export default function SalesImportIndex({ batches, filters = {} }: Props) {
const { can } = usePermission();
const [perPage, setPerPage] = useState(filters?.per_page?.toString() || "10");
const [search, setSearch] = useState(filters?.search || "");
const [isImportDialogOpen, setIsImportDialogOpen] = useState(false);
useEffect(() => {
if (filters?.per_page) {
setPerPage(filters.per_page.toString());
}
}, [filters?.per_page]);
setSearch(filters?.search || "");
}, [filters]);
const handleFilter = () => {
router.get(
route("sales-imports.index"),
{
per_page: perPage,
search: search
},
{ preserveState: true, replace: true }
);
};
const handlePerPageChange = (value: string) => {
setPerPage(value);
router.get(
route("sales-imports.index"),
{ per_page: value },
{ ...filters, per_page: value },
{ preserveState: true, preserveScroll: true, replace: true }
);
};
@@ -92,15 +107,56 @@ export default function SalesImportIndex({ batches, filters = {} }: Props) {
匯入並管理銷售出貨紀錄
</p>
</div>
{can('sales_imports.create') && (
<Button
className="button-filled-primary gap-2"
onClick={() => setIsImportDialogOpen(true)}
>
<Plus className="h-4 w-4" />
新增匯入
</Button>
)}
</div>
{/* Toolbar (Aligned with Recipe Management) */}
<div className="bg-white rounded-lg shadow-sm border p-4 mb-6">
<div className="flex flex-col md:flex-row gap-4">
{/* Search */}
<div className="flex-1 relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
<Input
placeholder="搜尋批次 ID、匯入人員..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="pl-10 pr-10 h-9"
onKeyDown={(e) => e.key === 'Enter' && handleFilter()}
/>
{search && (
<button
onClick={() => {
setSearch("");
router.get(route('sales-imports.index'), { ...filters, search: "" }, { preserveState: true, replace: true });
}}
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
>
<X className="h-4 w-4" />
</button>
)}
</div>
{/* Action Buttons */}
<div className="flex gap-2 w-full md:w-auto">
<Button
variant="outline"
className="button-outlined-primary"
onClick={handleFilter}
>
<Search className="w-4 h-4 mr-2" />
搜尋
</Button>
{can('sales_imports.create') && (
<Button
className="button-filled-primary gap-2"
onClick={() => setIsImportDialogOpen(true)}
>
<Plus className="h-4 w-4" />
新增匯入
</Button>
)}
</div>
</div>
</div>
<SalesImportDialog
@@ -112,7 +168,7 @@ export default function SalesImportIndex({ batches, filters = {} }: Props) {
<Table>
<TableHeader className="bg-gray-50">
<TableRow>
<TableHead className="w-[100px]">ID</TableHead>
<TableHead className="w-[80px] text-center">#</TableHead>
<TableHead>匯入日期</TableHead>
<TableHead>匯入人員</TableHead>
<TableHead className="text-center w-[120px]">總數量</TableHead>
@@ -129,9 +185,11 @@ export default function SalesImportIndex({ batches, filters = {} }: Props) {
</TableCell>
</TableRow>
) : (
batches.data.map((batch) => (
batches.data.map((batch, index) => (
<TableRow key={batch.id} className="hover:bg-gray-50/50">
<TableCell className="font-medium">#{batch.id}</TableCell>
<TableCell className="text-center text-gray-500">
{(batches as any).from + index}
</TableCell>
<TableCell>
{format(new Date(batch.created_at), 'yyyy/MM/dd HH:mm')}
</TableCell>

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

@@ -13,9 +13,7 @@ import {
RotateCcw,
ArrowUpDown,
ArrowUp,
ArrowDown,
ChevronDown,
ChevronUp
ArrowDown
} from 'lucide-react';
import { Label } from "@/Components/ui/label";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
@@ -81,10 +79,7 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
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);
@@ -236,11 +231,76 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
</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="space-y-4">
{/* Row 1: Date Range & Quick Buttons (Aligned with Inventory Report) */}
<div className="flex flex-col lg:flex-row gap-4 lg:items-end">
<div className="flex-none 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>
{/* Date Inputs */}
<div className="w-full lg:flex-1">
<div className="grid grid-cols-2 gap-2">
<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>
{/* Row 2: Search, Category & Actions */}
<div className="grid grid-cols-1 md:grid-cols-12 gap-4 items-end">
<div className="md:col-span-5 space-y-1">
<Label className="text-xs font-medium text-grey-2">關鍵字搜尋</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
@@ -248,7 +308,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-9 block"
className="pl-10 h-9 block bg-white"
/>
{searchTerm && (
<button
@@ -261,7 +321,7 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
</div>
</div>
<div className="md:col-span-4 space-y-1">
<Label className="text-xs font-medium text-grey-1">費用類別</Label>
<Label className="text-xs font-medium text-grey-2">費用類別</Label>
<SearchableSelect
value={categoryFilter}
onValueChange={setCategoryFilter}
@@ -270,114 +330,27 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
...availableCategories.map(c => ({ label: c, value: c }))
]}
placeholder="篩選類別"
className="h-9"
className="h-9 w-full"
/>
</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>
{/* Actions Buttons Group */}
<div className="md:col-span-3 flex items-center gap-2">
<Button
variant="outline"
onClick={handleClearFilters}
className="flex-1 items-center gap-2 button-outlined-primary h-9"
>
<RotateCcw className="h-4 w-4" />
重置
</Button>
<Button
onClick={handleSearch}
className="flex-1 button-filled-primary h-9 gap-2"
>
<Search className="h-4 w-4" /> 查詢
</Button>
</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>