102 lines
3.4 KiB
TypeScript
102 lines
3.4 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useState } from "react";
|
||
|
|
import { useRouter } from "next/navigation";
|
||
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { Input } from "@/components/ui/input";
|
||
|
|
import { BarcodeListTable } from "@/components/barcode/BarcodeListTable";
|
||
|
|
import { Plus, Search, RotateCcw } from "lucide-react";
|
||
|
|
import { useBarcodeList } from "@/hooks/useBarcodeList";
|
||
|
|
|
||
|
|
export default function BarcodeLabelManagementPage() {
|
||
|
|
const router = useRouter();
|
||
|
|
const [searchText, setSearchText] = useState("");
|
||
|
|
|
||
|
|
const { labels, total, page, limit, isLoading, refetch, setPage, handleSearch } = useBarcodeList();
|
||
|
|
|
||
|
|
const handleSearchClick = () => {
|
||
|
|
handleSearch(searchText);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleReset = () => {
|
||
|
|
setSearchText("");
|
||
|
|
handleSearch("");
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleCreateNew = () => {
|
||
|
|
router.push("/admin/screenMng/barcodeList/designer/new");
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen bg-gray-50">
|
||
|
|
<div className="w-full max-w-none space-y-8 px-4 py-8">
|
||
|
|
<div className="flex items-center justify-between rounded-lg border bg-white p-6 shadow-sm">
|
||
|
|
<div>
|
||
|
|
<h1 className="text-3xl font-bold text-gray-900">바코드 라벨 관리</h1>
|
||
|
|
<p className="mt-2 text-gray-600">ZD421 등 바코드 프린터용 라벨을 작성하고 출력합니다</p>
|
||
|
|
</div>
|
||
|
|
<Button onClick={handleCreateNew} className="gap-2">
|
||
|
|
<Plus className="h-4 w-4" />
|
||
|
|
새 라벨
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Card className="shadow-sm">
|
||
|
|
<CardHeader className="bg-gray-50/50">
|
||
|
|
<CardTitle className="flex items-center gap-2">
|
||
|
|
<Search className="h-5 w-5" />
|
||
|
|
검색
|
||
|
|
</CardTitle>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className="pt-6">
|
||
|
|
<div className="flex gap-2">
|
||
|
|
<Input
|
||
|
|
placeholder="라벨명으로 검색..."
|
||
|
|
value={searchText}
|
||
|
|
onChange={(e) => setSearchText(e.target.value)}
|
||
|
|
onKeyDown={(e) => {
|
||
|
|
if (e.key === "Enter") {
|
||
|
|
handleSearchClick();
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
className="flex-1"
|
||
|
|
/>
|
||
|
|
<Button onClick={handleSearchClick} className="gap-2">
|
||
|
|
<Search className="h-4 w-4" />
|
||
|
|
검색
|
||
|
|
</Button>
|
||
|
|
<Button onClick={handleReset} variant="outline" className="gap-2">
|
||
|
|
<RotateCcw className="h-4 w-4" />
|
||
|
|
초기화
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
<Card className="shadow-sm">
|
||
|
|
<CardHeader className="bg-gray-50/50">
|
||
|
|
<CardTitle className="flex items-center justify-between">
|
||
|
|
<span className="flex items-center gap-2">
|
||
|
|
바코드 라벨 목록
|
||
|
|
<span className="text-muted-foreground text-sm font-normal">(총 {total}건)</span>
|
||
|
|
</span>
|
||
|
|
</CardTitle>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className="p-0">
|
||
|
|
<BarcodeListTable
|
||
|
|
labels={labels}
|
||
|
|
total={total}
|
||
|
|
page={page}
|
||
|
|
limit={limit}
|
||
|
|
isLoading={isLoading}
|
||
|
|
onPageChange={setPage}
|
||
|
|
onRefresh={refetch}
|
||
|
|
/>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|