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) public function index(Request $request)
{ {
$filters = $request->only([ $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)); $reportData = $this->reportService->getReportData($filters, $request->input('per_page', 10));
$summary = $this->reportService->getSummary($filters); $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->category_name ?? '-',
$row->inbound_qty, $row->inbound_qty,
$row->outbound_qty, $row->outbound_qty,
$row->transfer_in_qty,
$row->transfer_out_qty,
$row->adjust_qty, $row->adjust_qty,
$row->net_change, $row->net_change,
]; ];

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

@@ -30,6 +30,8 @@ class InventoryReportService
$warehouseId = $filters['warehouse_id'] ?? null; $warehouseId = $filters['warehouse_id'] ?? null;
$categoryId = $filters['category_id'] ?? null; $categoryId = $filters['category_id'] ?? null;
$search = $filters['search'] ?? null; $search = $filters['search'] ?? null;
$sortBy = $filters['sort_by'] ?? 'product_code';
$sortOrder = $filters['sort_order'] ?? 'asc';
// 若無任何篩選條件，直接回傳空資料 // 若無任何篩選條件，直接回傳空資料
if (!$dateFrom && !$dateTo && !$warehouseId && !$categoryId && !$search) { 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"), 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 為 出庫 (排除 調撥出庫) (取絕對值) // 出貨量：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"), 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 為 庫存調整, 手動編輯 // 調整量：type 為 庫存調整, 手動編輯
DB::raw("SUM(CASE WHEN inventory_transactions.type IN ('庫存調整', '手動編輯') THEN inventory_transactions.quantity ELSE 0 END) as adjust_qty"), 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"), DB::raw("SUM(inventory_transactions.quantity) as net_change"),
]) ])
@@ -92,7 +97,7 @@ class InventoryReportService
}); });
} }
// 分組與排序 // 分組
$query->groupBy([ $query->groupBy([
'products.id', 'products.id',
'products.code', 'products.code',
@@ -100,7 +105,20 @@ class InventoryReportService
'categories.name' '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) { if ($perPage) {
@@ -169,6 +187,8 @@ class InventoryReportService
return $query->select([ 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("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("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(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"), DB::raw("SUM(inventory_transactions.quantity) as total_net_change"),
])->first(); ])->first();

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

@@ -16,8 +16,17 @@ class SalesImportController extends Controller
public function index(Request $request) public function index(Request $request)
{ {
$perPage = $request->input('per_page', 10); $perPage = $request->input('per_page', 10);
$search = $request->input('search');
$batches = SalesImportBatch::with('importer') $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') ->orderByDesc('created_at')
->paginate($perPage) ->paginate($perPage)
->withQueryString(); ->withQueryString();
@@ -25,7 +34,8 @@ class SalesImportController extends Controller
return Inertia::render('Sales/Import/Index', [ return Inertia::render('Sales/Import/Index', [
'batches' => $batches, 'batches' => $batches,
'filters' => [ '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 <Link
href={item.route || "#"} href={item.route || "#"}
onClick={() => setIsMobileOpen(false)} onClick={() => setIsMobileOpen(false)}
preserveScroll={true}
className={cn( className={cn(
"w-full flex items-center transition-all rounded-lg group", "w-full flex items-center transition-all rounded-lg group",
level === 0 ? "px-3 py-2.5" : "px-3 py-2", 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" />} {isMobileOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
</button> </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" /> <ApplicationLogo className="w-8 h-8 rounded-lg object-contain" />
<span className="font-bold text-slate-900">{branding?.short_name || 'Star'} ERP</span> <span className="font-bold text-slate-900">{branding?.short_name || 'Star'} ERP</span>
</Link> </Link>
@@ -510,6 +511,7 @@ export default function AuthenticatedLayout({
<DropdownMenuItem asChild> <DropdownMenuItem asChild>
<Link <Link
href={route('profile.edit')} 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" 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" /> <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>
<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"> <nav className="space-y-1">
{menuItems.map((item) => renderMenuItem(item))} {menuItems.map((item) => renderMenuItem(item))}
</nav> </nav>
@@ -596,7 +598,7 @@ export default function AuthenticatedLayout({
<X className="h-5 w-5" /> <X className="h-5 w-5" />
</button> </button>
</div> </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"> <nav className="space-y-1">
{menuItems.map((item) => renderMenuItem(item))} {menuItems.map((item) => renderMenuItem(item))}
</nav> </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 */} {/* Filters with Quick Date Range */}
<div className="bg-white rounded-xl shadow-sm border border-grey-4 p-5 mb-6"> <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="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"> {/* Top Config: Date Range & Quick Buttons */}
<div className="md:col-span-6 space-y-2"> <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> <Label className="text-xs font-medium text-grey-2">快速時間區間</Label>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{[ {[
@@ -201,8 +202,9 @@ export default function AccountingReport({ records, summary, filters }: PageProp
</div> </div>
</div> </div>
<div className="md:col-span-6"> {/* Date Inputs */}
<div className="grid grid-cols-2 gap-4 items-end"> <div className="w-full lg:flex-1">
<div className="grid grid-cols-2 gap-2">
<div className="space-y-1"> <div className="space-y-1">
<Label className="text-xs text-grey-2 font-medium">開始日期</Label> <Label className="text-xs text-grey-2 font-medium">開始日期</Label>
<div className="relative"> <div className="relative">
@@ -237,22 +239,25 @@ export default function AccountingReport({ records, summary, filters }: PageProp
</div> </div>
</div> </div>
{/* Action Buttons */} {/* Row 2: Actions */}
<div className="flex items-center justify-end border-t border-grey-4 pt-5 gap-3"> <div className="grid grid-cols-1 md:grid-cols-12 gap-4 items-end">
<Button <div className="md:col-span-9"></div>
variant="outline" <div className="md:col-span-3 flex items-center gap-2">
onClick={handleClearFilters} <Button
className="flex items-center gap-2 button-outlined-primary h-9 ml-auto" variant="outline"
> onClick={handleClearFilters}
<RotateCcw className="h-4 w-4" /> className="flex-1 items-center gap-2 button-outlined-primary h-9"
重置 >
</Button> <RotateCcw className="h-4 w-4" />
<Button 重置
onClick={handleFilter} </Button>
className="button-filled-primary h-9 px-6 gap-2" <Button
> onClick={handleFilter}
<Filter className="h-4 w-4" /> 查詢 className="flex-1 button-filled-primary h-9 gap-2"
</Button> >
<Filter className="h-4 w-4" /> 查詢
</Button>
</div>
</div> </div>
</div> </div>
</div> </div>

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

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

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

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

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

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

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

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

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

@@ -13,9 +13,7 @@ import {
RotateCcw, RotateCcw,
ArrowUpDown, ArrowUpDown,
ArrowUp, ArrowUp,
ArrowDown, ArrowDown
ChevronDown,
ChevronUp
} from 'lucide-react'; } from 'lucide-react';
import { Label } from "@/Components/ui/label"; import { Label } from "@/Components/ui/label";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout"; import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
@@ -81,10 +79,7 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
const [editingFee, setEditingFee] = useState<UtilityFee | null>(null); const [editingFee, setEditingFee] = useState<UtilityFee | null>(null);
const [deletingFeeId, setDeletingFeeId] = useState<number | null>(null); const [deletingFeeId, setDeletingFeeId] = useState<number | null>(null);
// Advanced Filter Toggle
const [showAdvancedFilter, setShowAdvancedFilter] = useState(
!!(filters.date_start || filters.date_end)
);
// Sorting // Sorting
const [sortField, setSortField] = useState<string | null>(filters.sort_field || null); const [sortField, setSortField] = useState<string | null>(filters.sort_field || null);
@@ -236,11 +231,76 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
</div> </div>
<div className="bg-white rounded-xl shadow-sm border border-grey-4 p-5 mb-6"> <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="space-y-4">
{/* Row 1: Search and Category */} {/* Row 1: Date Range & Quick Buttons (Aligned with Inventory Report) */}
<div className="grid grid-cols-1 md:grid-cols-12 gap-4"> <div className="flex flex-col lg:flex-row gap-4 lg:items-end">
<div className="md:col-span-8 space-y-1"> <div className="flex-none space-y-2">
<Label className="text-xs font-medium text-grey-1">關鍵字搜尋</Label> <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"> <div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" /> <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
<Input <Input
@@ -248,7 +308,7 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
value={searchTerm} value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)} onChange={(e) => setSearchTerm(e.target.value)}
onKeyDown={(e) => e.key === "Enter" && handleSearch()} onKeyDown={(e) => e.key === "Enter" && handleSearch()}
className="pl-10 h-9 block" className="pl-10 h-9 block bg-white"
/> />
{searchTerm && ( {searchTerm && (
<button <button
@@ -261,7 +321,7 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
</div> </div>
</div> </div>
<div className="md:col-span-4 space-y-1"> <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 <SearchableSelect
value={categoryFilter} value={categoryFilter}
onValueChange={setCategoryFilter} onValueChange={setCategoryFilter}
@@ -270,114 +330,27 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
...availableCategories.map(c => ({ label: c, value: c })) ...availableCategories.map(c => ({ label: c, value: c }))
]} ]}
placeholder="篩選類別" placeholder="篩選類別"
className="h-9" className="h-9 w-full"
/> />
</div> </div>
</div>
{/* Row 2: Date Filters (Collapsible) */} {/* Actions Buttons Group */}
{showAdvancedFilter && ( <div className="md:col-span-3 flex items-center gap-2">
<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"> <Button
<div className="md:col-span-6 space-y-2"> variant="outline"
<Label className="text-xs font-medium text-grey-1">快速時間區間</Label> onClick={handleClearFilters}
<div className="flex flex-wrap gap-2"> className="flex-1 items-center gap-2 button-outlined-primary h-9"
{[ >
{ label: "今日", value: "today" }, <RotateCcw className="h-4 w-4" />
{ label: "昨日", value: "yesterday" }, 重置
{ label: "本週", value: "this_week" }, </Button>
{ label: "本月", value: "this_month" }, <Button
{ label: "上月", value: "last_month" }, onClick={handleSearch}
].map((opt) => ( className="flex-1 button-filled-primary h-9 gap-2"
<Button >
key={opt.value} <Search className="h-4 w-4" /> 查詢
size="sm" </Button>
onClick={() => handleDateRangeChange(opt.value)}
className={
dateRangeType === opt.value
? 'button-filled-primary h-9 px-4 shadow-sm'
: 'button-outlined-primary h-9 px-4 bg-white'
}
>
{opt.label}
</Button>
))}
</div>
</div>
<div className="md:col-span-6">
<div className="grid grid-cols-2 gap-4 items-end">
<div className="space-y-1">
<Label className="text-xs text-grey-2 font-medium">開始日期</Label>
<div className="relative">
<Calendar className="absolute left-2.5 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 pointer-events-none" />
<Input
type="date"
value={dateStart}
onChange={(e) => {
setDateStart(e.target.value);
setDateRangeType('custom');
}}
className="pl-9 block w-full h-9 bg-white"
/>
</div>
</div>
<div className="space-y-1">
<Label className="text-xs text-grey-2 font-medium">結束日期</Label>
<div className="relative">
<Calendar className="absolute left-2.5 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 pointer-events-none" />
<Input
type="date"
value={dateEnd}
onChange={(e) => {
setDateEnd(e.target.value);
setDateRangeType('custom');
}}
className="pl-9 block w-full h-9 bg-white"
/>
</div>
</div>
</div>
</div>
</div> </div>
)}
{/* 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> </div>
</div> </div>