feat: add MKT tab and integrate profitability dashboard

2026-08-03 15:25:23 +02:00 · 2026-03-11 09:27:57 +01:00
parent 0e1457bd3d
commit 455cd8ed08
10 changed files with 798 additions and 1 deletions
@@ -0,0 +1,87 @@
+import React, { useState, useMemo } from 'react';
+import { mockProducts } from './data';
+import { Product } from './types';
+import { KPICards } from './KPICards';
+import { MasterTable } from './MasterTable';
+import { WaterfallModal } from './WaterfallModal';
+import { Filter, Settings2 } from 'lucide-react';
+
+export default function MktDataView() {
+  const [includeCOGS, setIncludeCOGS] = useState(true);
+  const [selectedCategory, setSelectedCategory] = useState<string>('All');
+  const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
+
+  const categories = ['All', ...Array.from(new Set(mockProducts.map(p => p.category)))];
+
+  const filteredProducts = useMemo(() => {
+    if (selectedCategory === 'All') return mockProducts;
+    return mockProducts.filter(p => p.category === selectedCategory);
+  }, [selectedCategory]);
+
+  return (
+    <div className="font-sans text-slate-200">
+      {/* Header Controls */}
+      <div className="flex items-center justify-between mb-8">
+        <div>
+          <h2 className="text-2xl font-bold text-white">Profitability Dashboard</h2>
+          <p className="text-slate-400">Overview of product performance and margins.</p>
+        </div>
+        
+        <div className="flex items-center gap-4">
+          {/* Category Filter */}
+          <div className="flex items-center gap-2 bg-[#0A0C10] px-3 py-1.5 rounded-lg border border-[#1F2433]">
+            <Filter className="w-4 h-4 text-slate-400" />
+            <select 
+              className="bg-transparent text-sm font-medium text-slate-300 outline-none cursor-pointer"
+              value={selectedCategory}
+              onChange={(e) => setSelectedCategory(e.target.value)}
+            >
+              {categories.map(cat => (
+                <option key={cat} value={cat} className="bg-[#13161F]">{cat === 'All' ? 'All Categories' : cat}</option>
+              ))}
+            </select>
+          </div>
+
+          {/* COGS Toggle */}
+          <div className="flex items-center gap-2 bg-[#0A0C10] px-3 py-1.5 rounded-lg border border-[#1F2433]">
+            <Settings2 className="w-4 h-4 text-slate-400" />
+            <label className="flex items-center gap-2 cursor-pointer">
+              <div className="relative">
+                <input 
+                  type="checkbox" 
+                  className="sr-only" 
+                  checked={includeCOGS}
+                  onChange={() => setIncludeCOGS(!includeCOGS)}
+                />
+                <div className={`block w-10 h-6 rounded-full transition-colors ${includeCOGS ? 'bg-indigo-600' : 'bg-[#1F2433]'}`}></div>
+                <div className={`absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-transform ${includeCOGS ? 'transform translate-x-4' : ''}`}></div>
+              </div>
+              <span className="text-sm font-medium text-slate-300">Include COGS</span>
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <KPICards products={filteredProducts} includeCOGS={includeCOGS} />
+
+      <div className="mb-8">
+        <div className="mb-4 flex items-center justify-between">
+          <h3 className="text-lg font-semibold text-white">Product Performance</h3>
+          <p className="text-sm text-slate-400">Click on a product to view the waterfall breakdown.</p>
+        </div>
+        <MasterTable 
+          products={filteredProducts} 
+          includeCOGS={includeCOGS} 
+          onProductClick={setSelectedProduct} 
+        />
+      </div>
+
+      {/* Modal */}
+      <WaterfallModal 
+        product={selectedProduct} 
+        includeCOGS={includeCOGS} 
+        onClose={() => setSelectedProduct(null)} 
+      />
+    </div>
+  );
+}