feat: add Supabase vendor data integration (BSR, ratings, buy box)

- Create vendor_daily_data table schema and Supabase client service
- Add upload API route for Vendor Central CSV parsing and upsert
- Add VendorDataView with BSR trend, ratings, and buy box charts
- Integrate new Vendor tab into app navigation (desktop + mobile)
- Add vendor CSV upload card to FileUpload modal

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

App.tsx

@@ -17,6 +17,7 @@ const WeeklyGrid = lazy(() => import('./components/WeeklyGrid'));
 const TopMovers = lazy(() => import('./components/TopMovers'));
 const AdsPerformance = lazy(() => import('./components/AdsPerformance'));
 const ForecastView = lazy(() => import('./components/ForecastView'));
+const VendorDataView = lazy(() => import('./components/VendorDataView'));
 
 // Loading fallback component
 const LoadingSpinner = () => (
@@ -43,7 +44,7 @@ const App: React.FC = () => {
   const [trafficData, setTrafficData] = useState<TrafficRecord[]>([]);
   const [loading, setLoading] = useState(true);
   const [syncing, setSyncing] = useState(false);
-  const [view, setView] = useState<'dashboard' | 'table' | 'weekly' | 'movers' | 'ads' | 'forecast'>('dashboard'); // Added 'forecast' view
+  const [view, setView] = useState<'dashboard' | 'table' | 'weekly' | 'movers' | 'ads' | 'forecast' | 'vendor'>('dashboard');
   const [forecastData, setForecastData] = useState<ProductForecastData[]>([]);
   const [isChatOpen, setIsChatOpen] = useState(false);
   const [activeUrl, setActiveUrl] = useState<string | null>(() => localStorage.getItem('craze_csv_url') || PERMANENT_DROPBOX_URL);
@@ -437,6 +438,28 @@ const App: React.FC = () => {
     }
   };
 
+  // Handle uploaded Vendor CSV (sends to Supabase via API)
+  const handleVendorUpload = async (file: File) => {
+    setSyncing(true);
+    try {
+      const text = await file.text();
+      const response = await fetch('/api/upload-vendor-data', {
+        method: 'POST',
+        headers: { 'Content-Type': 'text/csv' },
+        body: text,
+      });
+      const result = await response.json();
+      if (!response.ok) throw new Error(result.error);
+      alert(`Vendor data uploaded: ${result.rowsUpserted} rows processed.`);
+      setIsDataModalOpen(false);
+    } catch (error: any) {
+      console.error("Failed to upload vendor data", error);
+      alert(`Error uploading vendor data: ${error.message}`);
+    } finally {
+      setSyncing(false);
+    }
+  };
+
   // 2. Schedule Auto-Refresh (Background)
   useEffect(() => {
     const checkAndRefresh = () => {
@@ -734,6 +757,13 @@ const App: React.FC = () => {
               >
                 <ChartIcon /> <span className="hidden lg:inline">Fc 26</span>
               </button>
+              <button
+                onClick={() => setView('vendor')}
+                className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all
+                  ${view === 'vendor' ? 'bg-slate-800 text-white shadow-sm ring-1 ring-white/10' : 'text-slate-400 hover:text-white hover:bg-slate-800/50'}`}
+              >
+                <ChartIcon /> <span className="hidden lg:inline">Vendor</span>
+              </button>
             </div>
           </div>
         </div>
@@ -841,6 +871,12 @@ const App: React.FC = () => {
                   />
                 </div>
               </Suspense>
+
+              <Suspense fallback={<LoadingSpinner />}>
+                <div className={view === 'vendor' ? '' : 'hidden'}>
+                  <VendorDataView />
+                </div>
+              </Suspense>
             </div>
           </>
         )}
@@ -851,7 +887,7 @@ const App: React.FC = () => {
 
       {/* Mobile Bottom Navigation */}
       <nav className="fixed bottom-0 left-0 right-0 z-50 bg-slate-950/95 backdrop-blur border-t border-border md:hidden pb-safe">
-        <div className="grid grid-cols-6 gap-0">
+        <div className="grid grid-cols-7 gap-0">
           {([
             { key: 'dashboard' as const, icon: <ChartIcon />, label: 'Home' },
             { key: 'table' as const, icon: <TableIcon />, label: 'Grid' },
@@ -859,6 +895,7 @@ const App: React.FC = () => {
             { key: 'movers' as const, icon: <TrendingIcon />, label: 'Movers' },
             { key: 'ads' as const, icon: <MegaphoneIcon />, label: 'Ads' },
             { key: 'forecast' as const, icon: <ChartIcon />, label: 'Fc 26' },
+            { key: 'vendor' as const, icon: <ChartIcon />, label: 'Vendor' },
           ]).map(({ key, icon, label }) => (
             <button
               key={key}
@@ -890,6 +927,7 @@ const App: React.FC = () => {
                   onSalesUpload={handleSalesUpload}
                   onAdsUpload={handleAdsUpload}
                   onTrafficUpload={handleTrafficUpload}
+                  onVendorUpload={handleVendorUpload}
                   onUrlSubmit={handleDataFetch}
                   isLoading={syncing}
                   activeUrl={activeUrl}