support cross-origin credentials with apiFetch wrapper, call login on register in Django backend, and set CsrfExemptSessionAuthentication to break circular imports

src/App.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { CONFIG } from './config'
+import { CONFIG, apiFetch } from './config'
 
 type Page = 'home' | 'about' | 'contact' | 'login' | 'signup' | 'profile-completion' | 'confirmation' | 'dashboard' | 'forgot-password' | 'login-otp' | 'welcome-tour'
 type DashboardTab = 'overview' | 'products' | 'orders' | 'returns' | 'wallet' | 'settings' | 'barcode-generator'
@@ -143,7 +143,7 @@ export default function App() {
   useEffect(() => {
     if (isProfileComplete || currentPage === 'dashboard') {
       // Fetch Products
-      fetch(`${CONFIG.apiBaseUrl}/api/products/`)
+      apiFetch(`${CONFIG.apiBaseUrl}/api/products/`)
         .then(res => res.json())
         .then(data => {
           if (Array.isArray(data)) setProducts(data);
@@ -151,7 +151,7 @@ export default function App() {
         .catch(err => console.error('Error fetching products:', err));
 
       // Fetch Orders
-      fetch(`${CONFIG.apiBaseUrl}/api/orders/`)
+      apiFetch(`${CONFIG.apiBaseUrl}/api/orders/`)
         .then(res => res.json())
         .then(data => {
           if (Array.isArray(data)) setOrders(data);
@@ -159,7 +159,7 @@ export default function App() {
         .catch(err => console.error('Error fetching orders:', err));
 
       // Fetch Returns
-      fetch(`${CONFIG.apiBaseUrl}/api/returns/`)
+      apiFetch(`${CONFIG.apiBaseUrl}/api/returns/`)
         .then(res => res.json())
         .then(data => {
           if (Array.isArray(data)) setReturns(data);
@@ -167,7 +167,7 @@ export default function App() {
         .catch(err => console.error('Error fetching returns:', err));
 
       // Fetch Wallet
-      fetch(`${CONFIG.apiBaseUrl}/api/wallet/`)
+      apiFetch(`${CONFIG.apiBaseUrl}/api/wallet/`)
         .then(res => res.json())
         .then(data => {
           if (data) setWallet(data);
@@ -177,7 +177,7 @@ export default function App() {
   }, [isProfileComplete, currentPage]);
 
   const handleAcceptOrder = (id: string) => {
-    fetch(`${CONFIG.apiBaseUrl}/api/orders/${id}/accept/`, {
+    apiFetch(`${CONFIG.apiBaseUrl}/api/orders/${id}/accept/`, {
       method: 'POST'
     })
     .then(res => res.json())
@@ -189,7 +189,7 @@ export default function App() {
   }
 
   const handleRejectOrder = (id: string) => {
-    fetch(`${CONFIG.apiBaseUrl}/api/orders/${id}/reject/`, {
+    apiFetch(`${CONFIG.apiBaseUrl}/api/orders/${id}/reject/`, {
       method: 'POST'
     })
     .then(res => res.json())
@@ -269,7 +269,7 @@ export default function App() {
       return;
     }
 
-    fetch(`${CONFIG.apiBaseUrl}/api/auth/register/`, {
+    apiFetch(`${CONFIG.apiBaseUrl}/api/auth/register/`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
@@ -285,7 +285,7 @@ export default function App() {
     })
     .then(() => {
       // Auto login after signup
-      fetch(`${CONFIG.apiBaseUrl}/api/auth/login/`, {
+      apiFetch(`${CONFIG.apiBaseUrl}/api/auth/login/`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ username: email, password: password })
@@ -309,7 +309,7 @@ export default function App() {
       return;
     }
 
-    fetch(`${CONFIG.apiBaseUrl}/api/auth/login/`, {
+    apiFetch(`${CONFIG.apiBaseUrl}/api/auth/login/`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ username: email, password: password })
@@ -350,7 +350,7 @@ export default function App() {
       : `${CONFIG.apiBaseUrl}/api/products/`
     const method = isEditingProduct ? 'PUT' : 'POST'
 
-    fetch(url, {
+    apiFetch(url, {
       method: method,
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
@@ -365,7 +365,7 @@ export default function App() {
     .then(res => res.json())
     .then(() => {
       // Refresh products from backend
-      fetch(`${CONFIG.apiBaseUrl}/api/products/`)
+      apiFetch(`${CONFIG.apiBaseUrl}/api/products/`)
         .then(r => r.json())
         .then(prods => setProducts(prods))
       setIsEditingProduct(false)
@@ -384,7 +384,7 @@ export default function App() {
 
   const handleDeleteProduct = (id: string) => {
     if (confirm('Are you sure you want to delete this listing?')) {
-      fetch(`${CONFIG.apiBaseUrl}/api/products/${id}/`, {
+      apiFetch(`${CONFIG.apiBaseUrl}/api/products/${id}/`, {
         method: 'DELETE'
       })
       .then(() => {
@@ -406,7 +406,7 @@ export default function App() {
     ]
 
     setTimeout(() => {
-      fetch(`${CONFIG.apiBaseUrl}/api/products/bulk-upload/`, {
+      apiFetch(`${CONFIG.apiBaseUrl}/api/products/bulk-upload/`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ products: mockBulkProducts })
@@ -420,7 +420,7 @@ export default function App() {
           'Successfully added 2 new listings bulk!'
         ])
         // Refresh products
-        fetch(`${CONFIG.apiBaseUrl}/api/products/`)
+        apiFetch(`${CONFIG.apiBaseUrl}/api/products/`)
           .then(r => r.json())
           .then(prods => {
             setProducts(prods)
@@ -443,7 +443,7 @@ export default function App() {
       return
     }
 
-    fetch(`${CONFIG.apiBaseUrl}/api/wallet/withdraw/`, {
+    apiFetch(`${CONFIG.apiBaseUrl}/api/wallet/withdraw/`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ amount: String(amount) })
@@ -464,7 +464,7 @@ export default function App() {
 
   // Returns actions
   const handleReturnAction = (id: string, action: 'Approved' | 'Rejected') => {
-    fetch(`${CONFIG.apiBaseUrl}/api/returns/${id}/action/`, {
+    apiFetch(`${CONFIG.apiBaseUrl}/api/returns/${id}/action/`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ action: action })
@@ -487,11 +487,25 @@ export default function App() {
     const totalStock = products.reduce((sum, p) => sum + Number(p.stock), 0)
     const totalReturns = returns.length
 
+    const isLoggedIn = currentPage === 'dashboard' || currentPage === 'profile-completion' || currentPage === 'welcome-tour' || isProfileComplete
+
+    if (isLoggedIn) {
+      return {
+        totalSales,
+        totalEarned,
+        stockDetails: totalStock,
+        returnedItems: totalReturns,
+        chartValues: orders.length > 0 
+          ? orders.map(o => Number(o.total)) 
+          : [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+      }
+    }
+
     return {
-      totalSales: totalSales > 0 ? totalSales : 45280.00,
-      totalEarned: totalEarned > 0 ? totalEarned : 38488.00,
-      stockDetails: totalStock > 0 ? totalStock : 342,
-      returnedItems: totalReturns > 0 ? totalReturns : 12,
+      totalSales: 45280.00,
+      totalEarned: 38488.00,
+      stockDetails: 342,
+      returnedItems: 12,
       chartValues: CONFIG.dashboardData.filters[dateFilter]?.chartValues || [30, 45, 35, 60, 50, 75, 65, 80, 70, 95, 90, 110]
     }
   }

src/config.ts

@@ -122,3 +122,10 @@ export const CONFIG = {
     ]
   }
 }
+
+export function apiFetch(url: string, options: RequestInit = {}): Promise<Response> {
+  return fetch(url, {
+    ...options,
+    credentials: 'include'
+  });
+}