Creationshop/cannaiq
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Fix chain badges and table styling in IntelligenceStores

Browse Source 
- 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)
This commit is contained in:
Kelly
2025-12-13 00:17:58 -07:00
parent 24dd301d84
commit 0175a6817e
1 changed files with 46 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
cannaiq/src/pages/IntelligenceStores.tsx
View File

@@ -82,16 +82,28 @@ export function IntelligenceStores() {
}; };
const getCrawlFrequencyBadge = (hours: number | null) => { 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) { 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) { 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) { 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) { if (loading) {
@@ -232,22 +244,22 @@ export function IntelligenceStores() {
</div> </div>
{/* Stores Table */} {/* Stores Table */}
<div className="bg-white rounded-lg border border-gray-200"> <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
<div className="overflow-x-auto max-h-[500px] overflow-y-auto"> <div className="overflow-x-auto max-h-[600px] overflow-y-auto">
<table className="table table-sm w-full"> <table className="w-full">
<thead className="bg-gray-50 sticky top-0"> <thead className="bg-gray-50 sticky top-0 z-10">
<tr> <tr className="border-b border-gray-200">
<th>Store</th> <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Store</th>
<th>Location</th> <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Location</th>
<th>Chain</th> <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Chain</th>
<th className="text-center">SKUs</th> <th className="px-4 py-3 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">SKUs</th>
<th className="text-center">Snapshots</th> <th className="px-4 py-3 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">Snapshots</th>
<th>Last Crawl</th> <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Last Crawl</th>
<th>Frequency</th> <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Frequency</th>
<th>Actions</th> <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Actions</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody className="divide-y divide-gray-100">
{filteredStores.length === 0 ? ( {filteredStores.length === 0 ? (
<tr> <tr>
<td colSpan={8} className="text-center py-8 text-gray-500"> <td colSpan={8} className="text-center py-8 text-gray-500">
@@ -258,39 +270,35 @@ export function IntelligenceStores() {
filteredStores.map((store) => ( filteredStores.map((store) => (
<tr <tr
key={store.id} 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}`)} onClick={() => navigate(`/stores/list/${store.id}`)}
> >
<td> <td className="px-4 py-3">
<span className="font-medium">{store.name}</span> <span className="font-medium text-gray-900 text-sm">{store.name}</span>
</td> </td>
<td> <td className="px-4 py-3">
<span className="text-gray-600">{store.city}, {store.state}</span> <span className="text-sm text-gray-600">{store.city}, {store.state}</span>
</td> </td>
<td> <td className="px-4 py-3">
{store.chainName ? ( {getChainBadge(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> </td>
<td className="text-center"> <td className="px-4 py-3 text-right">
<span className="font-mono">{(store.skuCount || 0).toLocaleString()}</span> <span className="font-mono text-sm text-gray-700">{(store.skuCount || 0).toLocaleString()}</span>
</td> </td>
<td className="text-center"> <td className="px-4 py-3 text-right">
<span className="font-mono">{(store.snapshotCount || 0).toLocaleString()}</span> <span className="font-mono text-sm text-gray-700">{(store.snapshotCount || 0).toLocaleString()}</span>
</td> </td>
<td> <td className="px-4 py-3">
<span className={store.lastCrawl ? 'text-emerald-600' : 'text-gray-400'}> <span className={`text-sm ${store.lastCrawl ? 'text-green-600 font-medium' : 'text-gray-400'}`}>
{formatTimeAgo(store.lastCrawl)} {formatTimeAgo(store.lastCrawl)}
</span> </span>
</td> </td>
<td> <td className="px-4 py-3">
{getCrawlFrequencyBadge(store.crawlFrequencyHours)} {getCrawlFrequencyBadge(store.crawlFrequencyHours)}
</td> </td>
<td> <td className="px-4 py-3">
<button <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" title="View Store Dashboard"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();