Integrate stock availability data and StockBadge component across all views

components/StockBadge.tsx

@@ -0,0 +1,34 @@
+
+import React from 'react';
+
+interface StockBadgeProps {
+    stock: number | undefined;
+}
+
+export const StockBadge: React.FC<StockBadgeProps> = ({ stock }) => {
+    if (stock === undefined) return null;
+
+    const isLow = stock < 50;
+    const isOut = stock <= 0;
+
+    let colorClass = "bg-emerald-500/20 text-emerald-400 border-emerald-500/30";
+    let icon = "📦";
+
+    if (isOut) {
+        colorClass = "bg-rose-500/20 text-rose-400 border-rose-500/30";
+        icon = "❌";
+    } else if (isLow) {
+        colorClass = "bg-amber-500/20 text-amber-400 border-amber-500/30";
+        icon = "⚠️";
+    }
+
+    return (
+        <div
+            className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[10px] font-black border uppercase tracking-tighter shadow-sm ${colorClass}`}
+            title={`Total Stock (GMBH): ${stock}`}
+        >
+            <span className="text-xs">{icon}</span>
+            <span>{stock.toLocaleString('de-DE')}</span>
+        </div>
+    );
+};