.

web/src/components/ui/tabs.tsx

@@ -1,4 +1,4 @@
-type Tab = { id: string; label: string };
+type Tab = { id: string; label: string; badge?: number };
 
 export const Tabs = ({ tabs, active, onChange }: { tabs: Tab[]; active: string; onChange: (id: string) => void }) => (
   <div className="flex gap-1 border-b border-slate-200 overflow-x-auto">
@@ -6,13 +6,17 @@ export const Tabs = ({ tabs, active, onChange }: { tabs: Tab[]; active: string;
       <button
         key={t.id}
         onClick={() => onChange(t.id)}
-        className={`px-4 py-3 text-sm font-semibold transition-all whitespace-nowrap ${
-          active === t.id
+        className={`flex items-center gap-2 px-4 py-3 text-sm font-semibold transition-all whitespace-nowrap ${active === t.id
             ? 'text-amber-600 border-b-2 border-amber-500 bg-amber-50/50'
             : 'text-slate-600 hover:text-amber-600 hover:bg-amber-50/30'
-        }`}
+          }`}
       >
         {t.label}
+        {t.badge && (
+          <span className="flex items-center justify-center w-5 h-5 text-xs font-bold text-white bg-red-500 rounded-full">
+            {t.badge}
+          </span>
+        )}
       </button>
     ))}
   </div>