LabelsList.tsx
5.17 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
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">
{/* Toolbar: Search, All Locations, Bulk group (single rounded box), New Label */}
<div className="flex flex-nowrap items-center gap-3">
<Input
placeholder="Search"
style={{ height: 40, boxSizing: 'border-box' }}
className="bg-white border border-gray-300 rounded-md w-40 shrink-0 text-gray-900 placeholder:text-gray-500"
/>
<Select defaultValue="all">
<SelectTrigger className="bg-white border border-gray-300 rounded-md w-[200px] shrink-0 text-gray-900" style={{ height: 40, boxSizing: 'border-box' }}>
<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 rounded-md border border-gray-300 bg-white h-10 overflow-hidden shrink-0">
<button type="button" className="px-4 h-full border-r border-gray-200 text-sm font-medium text-gray-900 hover:bg-gray-50 transition-colors">
Bulk Import
</button>
<button type="button" className="px-4 h-full border-r border-gray-200 text-sm font-medium text-gray-900 hover:bg-gray-50 transition-colors">
Bulk Export
</button>
<button type="button" className="px-4 h-full text-sm font-medium text-gray-900 hover:bg-gray-50 transition-colors">
Bulk Edit
</button>
</div>
<Button className="bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md h-10 px-6 shrink-0 ml-auto">
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 font-numeric">{label.lastEdited}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</div>
);
}