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

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>