LabelsList.tsx
5.32 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
import React from 'react';
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "../ui/table";
import { Input } from "../ui/input";
import { Button } from "../ui/button";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "../ui/select";
import { Plus } from "lucide-react";
export function LabelsList() {
const labels = [
{
id: 1,
location: 'Location A',
labelCategory: 'Prep',
productCategory: 'Meat',
product: 'Chicken',
template: '2"x2" Basic',
labelType: 'Defrost',
lastEdited: '2025.12.03.11:45',
hasError: false
},
{
id: 2,
location: 'Location A',
labelCategory: 'Prep',
productCategory: 'Meat',
product: 'Chicken',
template: '2"x2" Basic',
labelType: 'Opened/Preped',
lastEdited: '2025.12.03.11:45',
hasError: false
},
{
id: 3,
location: 'Location A',
labelCategory: 'Prep',
productCategory: 'Meat',
product: 'Chicken',
template: '2"x2" Basic',
labelType: 'Heated',
lastEdited: '2025.12.03.11:45',
hasError: false
},
{
id: 4,
location: 'Location A',
labelCategory: "Grab'n'Go",
productCategory: 'Sandwich',
product: 'Chicken Sandwich',
template: '2"x6" G\'n\'G',
labelType: '',
lastEdited: '2025.12.03.11:45',
hasError: true
},
];
return (
<div className="space-y-6">
{/* Controls: Search, Location, Bulk Actions & New Label — 单行 + 圆角 + 细边框 + 统一高度 40px */}
<div className="flex flex-wrap items-center gap-3" style={{ height: 40 }}>
<Input
placeholder="Search"
className="bg-white border border-black rounded-lg w-[180px] shrink-0 py-0 leading-normal"
style={{ height: 40 }}
/>
<Select defaultValue="all">
<SelectTrigger
className="bg-white border border-black rounded-lg w-[180px] shrink-0 py-0"
style={{ height: 40 }}
>
<SelectValue placeholder="Location" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">All Locations</SelectItem>
<SelectItem value="loc-a">Location A</SelectItem>
<SelectItem value="loc-b">Location B</SelectItem>
</SelectContent>
</Select>
<div
className="flex items-stretch rounded-lg overflow-hidden border border-black shrink-0"
style={{ height: 40 }}
>
<Button variant="outline" className="border-0 border-r border-black rounded-none flex-1 py-0 h-full min-h-0 bg-white hover:bg-gray-100 text-black font-normal px-6">
Bulk Import
</Button>
<Button variant="outline" className="border-0 border-r border-black rounded-none flex-1 py-0 h-full min-h-0 bg-white hover:bg-gray-100 text-black font-normal px-6">
Bulk Export
</Button>
<Button variant="outline" className="border-0 rounded-none flex-1 py-0 h-full min-h-0 bg-white hover:bg-gray-100 text-black font-normal px-6">
Bulk Edit
</Button>
</div>
<Button className="bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg px-6 border-0 shrink-0 ml-auto py-0 min-h-0" style={{ height: 40 }}>
New Label <Plus className="ml-1 h-4 w-4" />
</Button>
</div>
{/* Warning Text */}
<div className="text-red-600 font-bold italic text-lg">
One or more of your labels are missing fields from their templates (! ! ! 1 in total).
</div>
{/* Table */}
<div className="rounded-md border bg-white shadow-sm">
<Table>
<TableHeader>
<TableRow className="bg-gray-50 hover:bg-gray-50">
<TableHead className="font-bold text-gray-900 w-[120px]">Location</TableHead>
<TableHead className="font-bold text-gray-900 w-[140px]">Label Category</TableHead>
<TableHead className="font-bold text-gray-900 w-[140px]">Product Category</TableHead>
<TableHead className="font-bold text-gray-900">Product</TableHead>
<TableHead className="font-bold text-gray-900">Template</TableHead>
<TableHead className="font-bold text-gray-900">Label Type</TableHead>
<TableHead className="font-bold text-gray-900">Last Edited</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{labels.map((label) => (
<TableRow key={label.id} className="hover:bg-gray-50">
<TableCell className="font-medium">{label.location}</TableCell>
<TableCell>{label.labelCategory}</TableCell>
<TableCell>{label.productCategory}</TableCell>
<TableCell>{label.product}</TableCell>
<TableCell className="font-medium">
{label.template}
{label.hasError && (
<span className="text-red-600 font-bold ml-2">! ! !</span>
)}
</TableCell>
<TableCell>{label.labelType || '-'}</TableCell>
<TableCell className="text-gray-500 tabular-nums">{label.lastEdited}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</div>
);
}