/** * 配方管理主頁面 */ import { useState, useEffect } from "react"; import { Plus, Search, RotateCcw, Pencil, Trash2, BookOpen } from 'lucide-react'; import { Button } from "@/Components/ui/button"; import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout"; import { Head, router, Link } from "@inertiajs/react"; import Pagination from "@/Components/shared/Pagination"; import { getBreadcrumbs } from "@/utils/breadcrumb"; import { SearchableSelect } from "@/Components/ui/searchable-select"; import { Input } from "@/Components/ui/input"; import { Label } from "@/Components/ui/label"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/Components/ui/table"; import { Badge } from "@/Components/ui/badge"; interface Recipe { id: number; code: string; name: string; product_id: number; product?: { id: number; name: string; code: string }; yield_quantity: number; is_active: boolean; description: string; updated_at: string; } interface Props { recipes: { data: Recipe[]; links: any[]; total: number; from: number; to: number; }; filters: { search?: string; per_page?: string; sort_field?: string; sort_direction?: string; }; } export default function RecipeIndex({ recipes, filters }: Props) { const [search, setSearch] = useState(filters.search || ""); const [perPage, setPerPage] = useState(filters.per_page || "10"); useEffect(() => { setSearch(filters.search || ""); setPerPage(filters.per_page || "10"); }, [filters]); const handleFilter = () => { router.get( route('recipes.index'), { search, per_page: perPage, }, { preserveState: true, replace: true } ); }; const handleReset = () => { setSearch(""); router.get(route('recipes.index')); }; const handlePerPageChange = (value: string) => { setPerPage(value); router.get( route("recipes.index"), { ...filters, per_page: value }, { preserveState: false, replace: true, preserveScroll: true } ); }; const handleDelete = (id: number) => { if (confirm("確定要刪除此配方嗎？")) { router.delete(route('recipes.destroy', id)); } }; return (

配方管理

管理產品的標準生產配方與用量

{/* 篩選區塊 */}
setSearch(e.target.value)} className="pl-10 h-9 block" onKeyDown={(e) => e.key === 'Enter' && handleFilter()} />
{/* 配方列表 */}
配方代號 配方名稱 對應成品 標準產量 狀態 更新時間 操作 {recipes.data.length === 0 ? (

尚無配方資料

 ) : ( recipes.data.map((recipe) => ( {recipe.code}
{recipe.name} {recipe.description && ( {recipe.description} )}
{recipe.product ? (
{recipe.product.name} {recipe.product.code}
) : '-'} {recipe.yield_quantity} {recipe.is_active ? "啟用" : "停用"} {new Date(recipe.updated_at).toLocaleDateString()}
)) )}
{/* 分頁 */}
每頁顯示 筆
); }