Spaces:

datamk
/

merimandi

Paused

App Files Files Community

datamk commited on Apr 1

Commit

0d8a28a

verified ·

1 Parent(s): 57da3ff

Upload 63 files

Browse files

Files changed (6) hide show

index.html +44 -1
src/App.jsx +121 -115
src/components/BuyerDashboard.jsx +1 -0
src/components/ListingDetails.jsx +2 -2
src/index.css +20 -0
vite.config.js +10 -0

index.html CHANGED Viewed

@@ -3,11 +3,54 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Meri Mandi</title>
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
   </body>
 </html>

   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
+    <meta name="theme-color" content="#10b981" />
+    <meta name="description" content="Meri Mandi - Digital Marketplace for Farmers" />
     <title>Meri Mandi</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <style>
+      #initial-loader {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        background: #0f172a;
+        z-index: 9999;
+        transition: opacity 0.5s ease-out;
+      }
+      .spinner {
+        width: 40px;
+        height: 40px;
+        border: 4px solid rgba(16, 185, 129, 0.1);
+        border-top: 4px solid #10b981;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+      }
+      @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+      .loading-text { color: #10b981; margin-top: 15px; font-family: sans-serif; font-size: 14px; font-weight: 500; }
+    </style>
   </head>
   <body>
+    <div id="initial-loader">
+      <div class="spinner"></div>
+      <div class="loading-text">🌾 Meri Mandi...</div>
+    </div>
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
+    <script>
+      window.addEventListener('load', () => {
+        const loader = document.getElementById('initial-loader');
+        if (loader) {
+          loader.style.opacity = '0';
+          setTimeout(() => loader.remove(), 500);
+        }
+      });
+    </script>
   </body>
 </html>

src/App.jsx CHANGED Viewed

@@ -1,22 +1,30 @@
 import { Routes, Route, Navigate, useNavigate } from 'react-router-dom';
 import { useStore } from './store';
 import { Auth } from './components/Auth';
-import { BuyerDashboard } from './components/BuyerDashboard';
-import { SellerDashboard } from './components/SellerDashboard';
-import { AddListing } from './components/AddListing';
-import { ListingDetails } from './components/ListingDetails';
-import { CallOverlay } from './components/CallOverlay';
-import { HelpOverlay } from './components/HelpOverlay';
-import { ChatOverlay } from './components/ChatOverlay';
-import { InboxOverlay } from './components/InboxOverlay';
-import { AdminLogin } from './components/admin/AdminLogin';
-import { AdminDashboard } from './components/admin/AdminDashboard';
 import { ProtectedRoute } from './components/ProtectedRoute';
-import { LogOut, Home, KeyRound, Heart, X } from 'lucide-react';
-import { useEffect, useState } from 'react';
 import { socket } from './socket';
 import { useLocation } from 'react-router-dom';
 export default function App() {
   const { currentUser, initDevice, logout } = useStore();
   const [showQR, setShowQR] = useState(false);
@@ -25,18 +33,16 @@ export default function App() {
   const isAdminRoute = location.pathname.startsWith('/admin');
   useEffect(() => {
-    // Request native OS notification permissions
     if ("Notification" in window && Notification.permission !== "granted" && Notification.permission !== "denied") {
       Notification.requestPermission();
     }
-    const id = initDevice();
-    if (id) {
       socket.connect();
-      socket.emit('join-network', id);
     }
-    // Listen for global listing updates (e.g., marked sold)
     socket.on('listing-updated', (data) => {
       useStore.getState().updateListingStatus(data.id, data.status);
     });
@@ -52,7 +58,7 @@ export default function App() {
         if ("Notification" in window && Notification.permission === "granted") {
           new Notification("New Message - Meri Mandi", {
             body: data.message,
-            icon: '/upiqr.jpeg' // Generic icon for app push
           });
         }
       }
@@ -79,111 +85,111 @@ export default function App() {
   return (
     <div className={isAdminRoute ? "admin-container" : "app-container"}>
-      {/* Main Content Area */}
-      {isAdminRoute ? (
-        <Routes>
-          <Route path="/admin" element={<AdminLogin />} />
-          <Route path="/admin/dashboard" element={<AdminDashboard />} />
-        </Routes>
-      ) : (
-        <>
-          <header style={{
-            padding: '20px',
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            borderBottom: '1px solid var(--border-color)',
-            backdropFilter: 'blur(10px)',
-            position: 'sticky',
-            top: 0,
-            zIndex: 10
-          }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-              <h2 className="text-gradient" onClick={() => navigate('/')} style={{ cursor: 'pointer', margin: 0 }}>🌾 Meri Mandi</h2>
-              <button
-                onClick={() => setShowQR(true)}
-                style={{ background: 'linear-gradient(135deg, #ec4899, #be185d)', color: 'white', border: 'none', borderRadius: '12px', padding: '4px 10px', fontSize: '11px', display: 'flex', alignItems: 'center', gap: '4px', cursor: 'pointer', fontWeight: 600, marginLeft: '8px' }}
-              >
-                <Heart size={12} fill="white" /> Support App
-              </button>
-            </div>
-            {currentUser && (
-              <div style={{ display: 'flex', alignItems: 'center', gap: '15px' }}>
-                <span style={{ fontSize: '14px', color: 'var(--text-muted)', textTransform: 'capitalize' }}>
-                  {currentUser.name} ({currentUser.role})
-                </span>
                 <button
-                  onClick={handleSwitchProfile}
-                  className="btn-secondary"
-                  style={{ fontSize: '12px', padding: '6px 12px', display: 'flex', alignItems: 'center', gap: '6px' }}
                 >
-                  <KeyRound size={14} /> Switch
                 </button>
               </div>
-            )}
-          </header>
-          <main style={{ flex: 1, padding: '20px', overflowY: 'auto' }}>
-            <Routes>
-              <Route path="/" element={
-                !currentUser ? <Auth /> : (
-                  currentUser.role === 'buyer' ? <Navigate to="/buyer" /> : <Navigate to="/seller" />
-                )
-              } />
-              <Route path="/buyer" element={
-                <ProtectedRoute requiredRole="buyer">
-                  <BuyerDashboard />
-                </ProtectedRoute>
-              } />
-              <Route path="/buyer/listing/:id" element={
-                <ProtectedRoute requiredRole="buyer">
-                  <ListingDetails />
-                </ProtectedRoute>
-              } />
-              <Route path="/seller" element={
-                <ProtectedRoute requiredRole="seller">
-                  <SellerDashboard />
-                </ProtectedRoute>
-              } />
-              <Route path="/seller/add" element={
-                <ProtectedRoute requiredRole="seller">
-                  <AddListing />
-                </ProtectedRoute>
-              } />
-            </Routes>
-          </main>
-          {/* Floating Global Overlays */}
-          <CallOverlay />
-          <HelpOverlay />
-          {showQR && (
-            <div style={{
-              position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, zIndex: 9999,
-              background: 'rgba(0,0,0,0.8)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px'
-            }}>
-              <div className="glass-panel" style={{ position: 'relative', width: '100%', maxWidth: '350px', padding: '30px', textAlign: 'center' }}>
-                <button
-                  onClick={() => setShowQR(false)}
-                  style={{ position: 'absolute', top: '15px', right: '15px', background: 'var(--danger-glass)', border: 'none', color: 'var(--danger-color)', width: '30px', height: '30px', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}
-                >
-                  <X size={16} />
-                </button>
-                <Heart size={40} color="#ec4899" fill="#ec4899" style={{ marginBottom: '16px' }} />
-                <h3 style={{ fontSize: '20px', marginBottom: '8px' }}>Support Meri Mandi</h3>
-                <p style={{ color: 'var(--text-muted)', fontSize: '14px', marginBottom: '24px' }}>Scan the QR code below through any UPI app to fund our servers and keep Meri Mandi free for farmers!</p>
-                <div style={{ background: 'white', padding: '10px', borderRadius: '16px', display: 'inline-block' }}>
-                  <img src="/upiqr.jpeg" alt="UPI QR Code" style={{ width: '200px', height: '200px', objectFit: 'contain', display: 'block' }} />
                 </div>
               </div>
-            </div>
-          )}
-          <InboxOverlay />
-          <ChatOverlay />
-        </>
-      )}
     </div>
   );
 }

 import { Routes, Route, Navigate, useNavigate } from 'react-router-dom';
 import { useStore } from './store';
 import { Auth } from './components/Auth';
 import { ProtectedRoute } from './components/ProtectedRoute';
+import { KeyRound, Heart, X } from 'lucide-react';
+import { useEffect, useState, lazy, Suspense } from 'react';
 import { socket } from './socket';
 import { useLocation } from 'react-router-dom';
+// Lazy load heavy dashboard and overlay components
+const BuyerDashboard = lazy(() => import('./components/BuyerDashboard').then(m => ({ default: m.BuyerDashboard })));
+const SellerDashboard = lazy(() => import('./components/SellerDashboard').then(m => ({ default: m.SellerDashboard })));
+const AddListing = lazy(() => import('./components/AddListing').then(m => ({ default: m.AddListing })));
+const ListingDetails = lazy(() => import('./components/ListingDetails').then(m => ({ default: m.ListingDetails })));
+const CallOverlay = lazy(() => import('./components/CallOverlay').then(m => ({ default: m.CallOverlay })));
+const HelpOverlay = lazy(() => import('./components/HelpOverlay').then(m => ({ default: m.HelpOverlay })));
+const ChatOverlay = lazy(() => import('./components/ChatOverlay').then(m => ({ default: m.ChatOverlay })));
+const InboxOverlay = lazy(() => import('./components/InboxOverlay').then(m => ({ default: m.InboxOverlay })));
+const AdminLogin = lazy(() => import('./components/admin/AdminLogin').then(m => ({ default: m.AdminLogin })));
+const AdminDashboard = lazy(() => import('./components/admin/AdminDashboard').then(m => ({ default: m.AdminDashboard })));
+const LoadingFallback = () => (
+  <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100px', color: 'var(--text-muted)' }}>
+    <div className="loading-dots">Loading...</div>
+  </div>
+);
 export default function App() {
   const { currentUser, initDevice, logout } = useStore();
   const [showQR, setShowQR] = useState(false);
   const isAdminRoute = location.pathname.startsWith('/admin');
   useEffect(() => {
     if ("Notification" in window && Notification.permission !== "granted" && Notification.permission !== "denied") {
       Notification.requestPermission();
     }
+    const { deviceId } = initDevice();
+    if (deviceId) {
       socket.connect();
+      socket.emit('join-network', deviceId);
     }
     socket.on('listing-updated', (data) => {
       useStore.getState().updateListingStatus(data.id, data.status);
     });
         if ("Notification" in window && Notification.permission === "granted") {
           new Notification("New Message - Meri Mandi", {
             body: data.message,
+            icon: '/upiqr.jpeg'
           });
         }
       }
   return (
     <div className={isAdminRoute ? "admin-container" : "app-container"}>
+      <Suspense fallback={<LoadingFallback />}>
+        {isAdminRoute ? (
+          <Routes>
+            <Route path="/admin" element={<AdminLogin />} />
+            <Route path="/admin/dashboard" element={<AdminDashboard />} />
+          </Routes>
+        ) : (
+          <>
+            <header style={{
+              padding: '15px 20px',
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              borderBottom: '1px solid var(--border-color)',
+              backdropFilter: 'blur(10px)',
+              position: 'sticky',
+              top: 0,
+              zIndex: 10
+            }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                <h2 className="text-gradient" onClick={() => navigate('/')} style={{ cursor: 'pointer', margin: 0, fontSize: '20px' }}>🌾 Meri Mandi</h2>
                 <button
+                  onClick={() => setShowQR(true)}
+                  style={{ background: 'linear-gradient(135deg, #ec4899, #be185d)', color: 'white', border: 'none', borderRadius: '12px', padding: '4px 10px', fontSize: '11px', display: 'flex', alignItems: 'center', gap: '4px', cursor: 'pointer', fontWeight: 600, marginLeft: '8px' }}
                 >
+                  <Heart size={12} fill="white" /> Support
                 </button>
               </div>
+              {currentUser && (
+                <div style={{ display: 'flex', alignItems: 'center', gap: '15px' }}>
+                  <span style={{ fontSize: '12px', color: 'var(--text-muted)', textTransform: 'capitalize', display: 'none', '@media (min-width: 480px)': { display: 'inline' } }}>
+                    {currentUser.name}
+                  </span>
+                  <button
+                    onClick={handleSwitchProfile}
+                    className="btn-secondary"
+                    style={{ fontSize: '11px', padding: '5px 10px', display: 'flex', alignItems: 'center', gap: '6px' }}
+                  >
+                    <KeyRound size={13} /> Switch
+                  </button>
+                </div>
+              )}
+            </header>
+            <main style={{ flex: 1, padding: '15px', overflowY: 'auto' }}>
+              <Routes>
+                <Route path="/" element={
+                  !currentUser ? <Auth /> : (
+                    currentUser.role === 'buyer' ? <Navigate to="/buyer" /> : <Navigate to="/seller" />
+                  )
+                } />
+                <Route path="/buyer" element={
+                  <ProtectedRoute requiredRole="buyer">
+                    <BuyerDashboard />
+                  </ProtectedRoute>
+                } />
+                <Route path="/buyer/listing/:id" element={
+                  <ProtectedRoute requiredRole="buyer">
+                    <ListingDetails />
+                  </ProtectedRoute>
+                } />
+                <Route path="/seller" element={
+                  <ProtectedRoute requiredRole="seller">
+                    <SellerDashboard />
+                  </ProtectedRoute>
+                } />
+                <Route path="/seller/add" element={
+                  <ProtectedRoute requiredRole="seller">
+                    <AddListing />
+                  </ProtectedRoute>
+                } />
+              </Routes>
+            </main>
+            <CallOverlay />
+            <HelpOverlay />
+            {showQR && (
+              <div style={{
+                position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, zIndex: 9999,
+                background: 'rgba(0,0,0,0.8)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px'
+              }}>
+                <div className="glass-panel" style={{ position: 'relative', width: '100%', maxWidth: '350px', padding: '30px', textAlign: 'center' }}>
+                  <button
+                    onClick={() => setShowQR(false)}
+                    style={{ position: 'absolute', top: '15px', right: '15px', background: 'var(--danger-glass)', border: 'none', color: 'var(--danger-color)', width: '30px', height: '30px', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}
+                  >
+                    <X size={16} />
+                  </button>
+                  <Heart size={40} color="#ec4899" fill="#ec4899" style={{ marginBottom: '16px' }} />
+                  <h3 style={{ fontSize: '20px', marginBottom: '8px' }}>Support Meri Mandi</h3>
+                  <p style={{ color: 'var(--text-muted)', fontSize: '14px', marginBottom: '24px' }}>Scan to keep Meri Mandi free for farmers!</p>
+                  <div style={{ background: 'white', padding: '10px', borderRadius: '16px', display: 'inline-block' }}>
+                    <img src="/upiqr.jpeg" alt="UPI QR Code" style={{ width: '200px', height: '200px', objectFit: 'contain', display: 'block' }} />
+                  </div>
                 </div>
               </div>
+            )}
+            <InboxOverlay />
+            <ChatOverlay />
+          </>
+        )}
+      </Suspense>
     </div>
   );
 }

src/components/BuyerDashboard.jsx CHANGED Viewed

@@ -115,6 +115,7 @@ export function BuyerDashboard() {
                     <img
                       src={listing.images[0]}
                       alt={listing.cropName}
                       style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                     />
                   </div>

                     <img
                       src={listing.images[0]}
                       alt={listing.cropName}
+                      loading="lazy"
                       style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                     />
                   </div>

src/components/ListingDetails.jsx CHANGED Viewed

@@ -44,7 +44,7 @@ export function ListingDetails() {
       <div style={{ display: 'flex', overflowX: 'auto', gap: '16px', scrollSnapType: 'x mandatory', marginBottom: '24px' }}>
         {listing.images.map((img, idx) => (
           <div key={idx} style={{ minWidth: '100%', scrollSnapAlign: 'center', borderRadius: '16px', overflow: 'hidden', aspectRatio: '4/3' }}>
-            <img src={img} alt={`Crop ${idx}`} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
           </div>
         ))}
       </div>
@@ -88,7 +88,7 @@ export function ListingDetails() {
           <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
             <div style={{ width: '50px', height: '50px', borderRadius: '50%', background: 'var(--surface-light)', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
               {listing.sellerSelfie ? (
-                <img src={listing.sellerSelfie} alt={listing.sellerName} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
               ) : (
                 <span style={{ fontSize: '20px', fontWeight: 600 }}>{listing.sellerName.charAt(0)}</span>
               )}

       <div style={{ display: 'flex', overflowX: 'auto', gap: '16px', scrollSnapType: 'x mandatory', marginBottom: '24px' }}>
         {listing.images.map((img, idx) => (
           <div key={idx} style={{ minWidth: '100%', scrollSnapAlign: 'center', borderRadius: '16px', overflow: 'hidden', aspectRatio: '4/3' }}>
+            <img src={img} alt={`Crop ${idx}`} loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
           </div>
         ))}
       </div>
           <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
             <div style={{ width: '50px', height: '50px', borderRadius: '50%', background: 'var(--surface-light)', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
               {listing.sellerSelfie ? (
+                <img src={listing.sellerSelfie} alt={listing.sellerName} loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
               ) : (
                 <span style={{ fontSize: '20px', fontWeight: 600 }}>{listing.sellerName.charAt(0)}</span>
               )}

src/index.css CHANGED Viewed

@@ -190,3 +190,23 @@ h1, h2, h3, h4, h5, h6 {
   padding: 20px;
   background: linear-gradient(to top, var(--surface-color) 70%, transparent);
 }

   padding: 20px;
   background: linear-gradient(to top, var(--surface-color) 70%, transparent);
 }
+/* Skeleton & Pulse */
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: .5; }
+}
+.loading-dots:after {
+  content: ' .';
+  animation: dots 1.5s steps(5, end) infinite;
+}
+@keyframes dots {
+  0%, 20% { content: ' .'; }
+  40% { content: ' ..'; }
+  60% { content: ' ...'; }
+  80%, 100% { content: ''; }
+}

vite.config.js CHANGED Viewed

@@ -6,6 +6,16 @@ export default defineConfig({
   build: {
     outDir: 'dist',
     emptyOutDir: true,
   },
   server: {
     proxy: {

   build: {
     outDir: 'dist',
     emptyOutDir: true,
+    minify: 'esbuild',
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          'vendor-react': ['react', 'react-dom', 'react-router-dom'],
+          'vendor-ui': ['framer-motion', 'lucide-react'],
+          'vendor-utils': ['socket.io-client', 'zustand', 'uuid'],
+        },
+      },
+    },
   },
   server: {
     proxy: {