From 0175a6817edc57e4b35070553f713ce2f94e44a2 Mon Sep 17 00:00:00 2001
From: Kelly <kelly@cannabrands.com>
Date: Sat, 13 Dec 2025 00:17:58 -0700
Subject: [PATCH] fix: Fix chain badges and table styling in IntelligenceStores
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add whitespace-nowrap to badges to prevent text wrapping
- Add border to chain badges for consistency
- Update table styling to match Workers/Tasks pages:
  - Uppercase headers with proper tracking
  - Consistent padding and text sizes
  - Right-align numeric columns (SKUs, Snapshots)
  - Purple Dashboard button matching Workers page style
- Increase table max-height for better visibility

🤖 Generated with [Claude Code](https://claude.com/claude-code)
---
 cannaiq/src/pages/IntelligenceStores.tsx | 84 +++++++++++++-----------
 1 file changed, 46 insertions(+), 38 deletions(-)

diff --git a/cannaiq/src/pages/IntelligenceStores.tsx b/cannaiq/src/pages/IntelligenceStores.tsx
index 6c9acd49..123b36ea 100644
--- a/cannaiq/src/pages/IntelligenceStores.tsx
+++ b/cannaiq/src/pages/IntelligenceStores.tsx
@@ -82,16 +82,28 @@ export function IntelligenceStores() {
   };
 
   const getCrawlFrequencyBadge = (hours: number | null) => {
+    const baseClasses = "inline-flex items-center px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap";
     if (hours === null) {
-      return <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-600">Unknown</span>;
+      return <span className={`${baseClasses} bg-gray-100 text-gray-600`}>Unknown</span>;
     }
     if (hours <= 4) {
-      return <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-emerald-100 text-emerald-700">High ({hours}h)</span>;
+      return <span className={`${baseClasses} bg-green-100 text-green-700`}>High ({hours}h)</span>;
     }
     if (hours <= 12) {
-      return <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-700">Medium ({hours}h)</span>;
+      return <span className={`${baseClasses} bg-amber-100 text-amber-700`}>Medium ({hours}h)</span>;
     }
-    return <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-700">Low ({hours}h)</span>;
+    return <span className={`${baseClasses} bg-red-100 text-red-700`}>Low ({hours}h)</span>;
+  };
+
+  const getChainBadge = (chainName: string | null) => {
+    if (!chainName) {
+      return <span className="text-gray-400">-</span>;
+    }
+    return (
+      <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap bg-purple-100 text-purple-700 border border-purple-200">
+        {chainName}
+      </span>
+    );
   };
 
   if (loading) {
@@ -232,22 +244,22 @@ export function IntelligenceStores() {
         </div>
 
         {/* Stores Table */}
-        <div className="bg-white rounded-lg border border-gray-200">
-          <div className="overflow-x-auto max-h-[500px] overflow-y-auto">
-            <table className="table table-sm w-full">
-              <thead className="bg-gray-50 sticky top-0">
-                <tr>
-                  <th>Store</th>
-                  <th>Location</th>
-                  <th>Chain</th>
-                  <th className="text-center">SKUs</th>
-                  <th className="text-center">Snapshots</th>
-                  <th>Last Crawl</th>
-                  <th>Frequency</th>
-                  <th>Actions</th>
+        <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
+          <div className="overflow-x-auto max-h-[600px] overflow-y-auto">
+            <table className="w-full">
+              <thead className="bg-gray-50 sticky top-0 z-10">
+                <tr className="border-b border-gray-200">
+                  <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Store</th>
+                  <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Location</th>
+                  <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Chain</th>
+                  <th className="px-4 py-3 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">SKUs</th>
+                  <th className="px-4 py-3 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">Snapshots</th>
+                  <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Last Crawl</th>
+                  <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Frequency</th>
+                  <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Actions</th>
                 </tr>
               </thead>
-              <tbody>
+              <tbody className="divide-y divide-gray-100">
                 {filteredStores.length === 0 ? (
                   <tr>
                     <td colSpan={8} className="text-center py-8 text-gray-500">
@@ -258,39 +270,35 @@ export function IntelligenceStores() {
                   filteredStores.map((store) => (
                     <tr
                       key={store.id}
-                      className="hover:bg-gray-50 cursor-pointer"
+                      className="hover:bg-gray-50 cursor-pointer transition-colors"
                       onClick={() => navigate(`/stores/list/${store.id}`)}
                     >
-                      <td>
-                        <span className="font-medium">{store.name}</span>
+                      <td className="px-4 py-3">
+                        <span className="font-medium text-gray-900 text-sm">{store.name}</span>
                       </td>
-                      <td>
-                        <span className="text-gray-600">{store.city}, {store.state}</span>
+                      <td className="px-4 py-3">
+                        <span className="text-sm text-gray-600">{store.city}, {store.state}</span>
                       </td>
-                      <td>
-                        {store.chainName ? (
-                          <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-700">{store.chainName}</span>
-                        ) : (
-                          <span className="text-gray-400">-</span>
-                        )}
+                      <td className="px-4 py-3">
+                        {getChainBadge(store.chainName)}
                       </td>
-                      <td className="text-center">
-                        <span className="font-mono">{(store.skuCount || 0).toLocaleString()}</span>
+                      <td className="px-4 py-3 text-right">
+                        <span className="font-mono text-sm text-gray-700">{(store.skuCount || 0).toLocaleString()}</span>
                       </td>
-                      <td className="text-center">
-                        <span className="font-mono">{(store.snapshotCount || 0).toLocaleString()}</span>
+                      <td className="px-4 py-3 text-right">
+                        <span className="font-mono text-sm text-gray-700">{(store.snapshotCount || 0).toLocaleString()}</span>
                       </td>
-                      <td>
-                        <span className={store.lastCrawl ? 'text-emerald-600' : 'text-gray-400'}>
+                      <td className="px-4 py-3">
+                        <span className={`text-sm ${store.lastCrawl ? 'text-green-600 font-medium' : 'text-gray-400'}`}>
                           {formatTimeAgo(store.lastCrawl)}
                         </span>
                       </td>
-                      <td>
+                      <td className="px-4 py-3">
                         {getCrawlFrequencyBadge(store.crawlFrequencyHours)}
                       </td>
-                      <td>
+                      <td className="px-4 py-3">
                         <button
-                          className="btn btn-xs btn-primary gap-1"
+                          className="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium text-white bg-purple-600 hover:bg-purple-700 rounded transition-colors"
                           title="View Store Dashboard"
                           onClick={(e) => {
                             e.stopPropagation();