ForFarmTeam/ForFarm
1
0
Fork 0
mirror of https://github.com/ForFarmTeam/ForFarm.git synced 2025-12-19 22:14:08 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: enhance status display in inventory table with conditional styling

Browse Source
This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB 2025-03-31 21:58:12 +07:00
parent e004c62941
commit 0df2d8241e
1 changed files with 18 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/app/(sidebar)/inventory/page.tsx
View File

@ -59,6 +59,7 @@ export default function InventoryPage() {
queryFn: fetchInventoryItems, queryFn: fetchInventoryItems,
staleTime: 60 * 1000, staleTime: 60 * 1000,
}); });
// console.table(inventoryItems);
const [searchTerm, setSearchTerm] = useState(""); const [searchTerm, setSearchTerm] = useState("");
const handleSearch = () => { const handleSearch = () => {
// update search state when user clicks or presses enter // update search state when user clicks or presses enter
@ -79,29 +80,23 @@ export default function InventoryPage() {
{ {
accessorKey: "status", accessorKey: "status",
header: "Status", header: "Status",
cell: (info: { cell: (info: { getValue: () => string }) => {
getValue: () => const status = info.getValue();
| string
| number let statusClass = ""; // default status class
| bigint
| boolean if (status === "Low Stock") {
| ReactElement<unknown, string | JSXElementConstructor<any>> statusClass = "bg-yellow-300"; // yellow for low stock
| Iterable<ReactNode> } else if (status === "Out of Stock") {
| ReactPortal statusClass = "bg-red-500 text-white"; // red for out of stock
| Promise< }
| string
| number return (
| bigint <Badge className={`py-1 px-2 rounded-md ${statusClass}`}>
| boolean {status}
| ReactPortal </Badge>
| ReactElement<unknown, string | JSXElementConstructor<any>> );
| Iterable<ReactNode> },
| null
| undefined
>
| null
| undefined;
}) => <Badge>{info.getValue()}</Badge>,
}, },
{ {
accessorKey: "edit", accessorKey: "edit",