From 2e5e2f5239f964db5790f663324cb2fe8bc77e9a Mon Sep 17 00:00:00 2001
From: davidels1 <87242587+davidels1@users.noreply.github.com>
Date: Tue, 9 Sep 2025 00:37:51 +0200
Subject: [PATCH] [dyad] Replaced the status badge with a dot indicator - wrote
 1 file(s)

---
 src/components/stock/columns.tsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/stock/columns.tsx b/src/components/stock/columns.tsx
index 3e8c66e..c006bc8 100644
--- a/src/components/stock/columns.tsx
+++ b/src/components/stock/columns.tsx
@@ -13,7 +13,6 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
-import { Badge } from "@/components/ui/badge"
 
 export type StockItem = {
   id: string
@@ -99,10 +98,20 @@ export const columns: ColumnDef<StockItem>[] = [
     accessorKey: "status",
     header: "Status",
     cell: ({ row }) => {
-      const status = row.getValue("status") as string
-      const variant = status === "In Stock" ? "default" : status === "Low Stock" ? "secondary" : "destructive"
+      const status = row.getValue("status") as "In Stock" | "Low Stock" | "Out of Stock"
       
-      return <Badge variant={variant}>{status}</Badge>
+      const statusColor = {
+        "In Stock": "bg-green-500",
+        "Low Stock": "bg-yellow-500",
+        "Out of Stock": "bg-red-500",
+      };
+
+      return (
+        <div className="flex items-center">
+          <span className={`h-2.5 w-2.5 rounded-full mr-2 ${statusColor[status]}`} />
+          <span>{status}</span>
+        </div>
+      )
     }
   },
   {