From b88a46efca74dd7b10e594df0d1d7a05c75ff138 Mon Sep 17 00:00:00 2001
From: Anshuman Tiwari <tanshuman145@gmail.com>
Date: Mon, 29 Jul 2024 11:48:22 +0000
Subject: [PATCH] nee ui integrated

---
 src/Dashboards/UserD.js | 301 +++++++++++++++++++++-------------------
 src/Dashboards/s.js     |  91 ++++++++++++
 2 files changed, 250 insertions(+), 142 deletions(-)
 create mode 100644 src/Dashboards/s.js

diff --git a/src/Dashboards/UserD.js b/src/Dashboards/UserD.js
index f7bb7be..da3fb1e 100644
--- a/src/Dashboards/UserD.js
+++ b/src/Dashboards/UserD.js
@@ -5,8 +5,8 @@ import { useNavigate } from "react-router-dom";
 import axios from "axios";
 import { Link } from "react-router-dom";
 import EditProductModal from "../components/EditProductModal";
-import DashboardOverview from './DashboardOverview';
-import './DashboardOverview.css';
+import DashboardOverview from "./DashboardOverview";
+import "./DashboardOverview.css";
 
 const UserD = () => {
   const isLoggedIn = localStorage.getItem("isLoggedIn") === "true";
@@ -105,6 +105,11 @@ const UserD = () => {
     );
   };
 
+  const formatDate = (dateString) => {
+    const options = { year: "numeric", month: "long", day: "numeric" };
+    return new Date(dateString).toLocaleDateString(undefined, options);
+  };
+
   if (!isLoggedIn) {
     return null;
   }
@@ -120,7 +125,7 @@ const UserD = () => {
         onUpdate={handleUpdate}
       />
 
-      <h3 className="flex justify-center font-semibold">Happy Saving!!</h3>
+      <h3 className="flex justify-center font-semibold">Happy Saving!!!</h3>
       {currentUser && (
         <div className="flex justify-center font-semibold">
           Welcome, {currentUser.name}!
@@ -131,33 +136,7 @@ const UserD = () => {
         <header className="flex h-16 shrink-0 items-center justify-between border-b px-4 md:px-6">
           <div className="flex items-center gap-4">
             <Link
-            className="flex items-center gap-2 text-lg font-semibold md:text-base"
-            to="#"
-            rel="ugc"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              className="h-6 w-6"
-            >
-              <path d="m8 3 4 8 5-5 5 15H2L8 3z"></path>
-            </svg>
-            <span className="sr-only">SmartSaver</span>
-          </Link>
-        </div>
-      </header>
-      <div className="flex flex-1">
-        <nav className="hidden h-full w-64 shrink-0 border-r px-4 py-6 md:flex md:flex-col">
-          <div className="flex flex-col gap-4">
-            <Link
-              className="flex items-center gap-2 text-lg font-semibold"
+              className="flex items-center gap-2 text-lg font-semibold md:text-base"
               to="#"
               rel="ugc"
             >
@@ -173,129 +152,167 @@ const UserD = () => {
                 strokeLinejoin="round"
                 className="h-6 w-6"
               >
-                <rect width="7" height="9" x="3" y="3" rx="1"></rect>
-                <rect width="7" height="5" x="14" y="3" rx="1"></rect>
-                <rect width="7" height="9" x="14" y="12" rx="1"></rect>
-                <rect width="7" height="5" x="3" y="16" rx="1"></rect>
+                <path d="m8 3 4 8 5-5 5 15H2L8 3z"></path>
               </svg>
-              Dashboard
+              <span className="sr-only">SmartSaver</span>
             </Link>
-            <Link
-              className="flex items-center gap-2 text-lg font-semibold text-gray-500 dark:text-gray-400"
-              to="/user/add-products"
-              rel="ugc"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                className="h-6 w-6"
+          </div>
+        </header>
+        <div className="flex flex-1">
+          <nav className="hidden h-full w-64 shrink-0 border-r px-4 py-6 md:flex md:flex-col">
+            <div className="flex flex-col gap-4">
+              <Link
+                className="flex items-center gap-2 text-lg font-semibold"
+                to="#"
+                rel="ugc"
               >
-                <circle cx="12" cy="12" r="10"></circle>
-                <path d="M12 16v-4"></path>
-                <path d="M12 8h.01"></path>
-              </svg>
-              Add Products
-            </Link>
-            <Link
-              className="flex items-center gap-2 text-lg font-semibold text-gray-500 dark:text-gray-400"
-              to="/user/settings"
-              rel="ugc"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                className="h-6 w-6"
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="h-6 w-6"
+                >
+                  <rect width="7" height="9" x="3" y="3" rx="1"></rect>
+                  <rect width="7" height="5" x="14" y="3" rx="1"></rect>
+                  <rect width="7" height="9" x="14" y="12" rx="1"></rect>
+                  <rect width="7" height="5" x="3" y="16" rx="1"></rect>
+                </svg>
+                Dashboard
+              </Link>
+              <Link
+                className="flex items-center gap-2 text-lg font-semibold text-gray-500 dark:text-gray-400"
+                to="/user/add-products"
+                rel="ugc"
               >
-                <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"></path>
-                <circle cx="12" cy="12" r="3"></circle>
-              </svg>
-              Settings
-            </Link>
-          </div>
-        </nav>
-        <main className="flex-1">
-            <section>
-              <DashboardOverview products={products} />
-            </section>
-          </main>
-        <div className="flex flex-1 flex-col">
-          <div className="mb-4 px-4 md:px-6">
-            <div className="flex items-center justify-between py-6">
-              <h1 className="text-3xl font-bold">Products</h1>
-              <button
-                className="rounded-lg bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="h-6 w-6"
+                >
+                  <circle cx="12" cy="12" r="10"></circle>
+                  <path d="M12 16v-4"></path>
+                  <path d="M12 8h.01"></path>
+                </svg>
+                Add Products
+              </Link>
+              <Link
+                className="flex items-center gap-2 text-lg font-semibold text-gray-500 dark:text-gray-400"
+                to="/user/settings"
+                rel="ugc"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="h-6 w-6"
+                >
+                  <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"></path>
+                  <circle cx="12" cy="12" r="3"></circle>
+                </svg>
+                Settings
+              </Link>
+              <Link
+                className="flex items-center gap-2 text-lg font-semibold text-gray-500 dark:text-gray-400"
                 onClick={handleLogout}
               >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="h-6 w-6"
+                >
+                  <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
+                  <polyline points="16 17 21 12 16 7"></polyline>
+                  <line x1="21" y1="12" x2="9" y2="12"></line>
+                </svg>
                 Logout
-              </button>
-            </div>
-            <div className="flex items-center justify-between py-6">
-              <h2 className="text-xl">Total Products: {products.length}</h2>
+              </Link>
             </div>
-            <ul className="space-y-4">
-              {products.map((product) => (
-                <li
-                  key={product._id}
-                  className="rounded-lg bg-white p-4 shadow"
-                >
-                  <div className="font-bold">
-                    {product.product_name}{" "}
-                    <span className="font-semibold text-xs">
-                      Mfg Date:{" "}
-                      {new Date(product.mfd).toLocaleDateString("en-GB", {
-                        year: "numeric",
-                        month: "2-digit",
-                        day: "2-digit",
-                      })}
-                    </span>
-                    <span className="m-3 font-semibold text-xs">
-                      Exp Date:{" "}
-                      {new Date(product.expiry_date).toLocaleDateString(
-                        "en-GB",
-                        {
-                          year: "numeric",
-                          month: "2-digit",
-                          day: "2-digit",
-                        }
-                      )}
-                    </span>
+          </nav>
+          <main className="flex-1 overflow-y-auto p-6 md:p-10">
+            <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 p-6">
+              <div className="bg-background rounded-lg shadow-lg p-6">
+              <h2 className="text-2xl font-bold">{currentUser && (
+        <div className="flex justify-center font-semibold">
+          Welcome, {currentUser.name}!
+        </div>
+      )}</h2>
+                <div className="flex items-center justify-between mb-4">
+                
+                  <h2 className="text-2xl font-bold">Products</h2>
+                  <span className="text-4xl font-bold">{products.length}</span>
+                </div>
+                <p className="text-muted-foreground">Manage and track your product inventory.</p>
+              </div>
+              <div className="bg-background rounded-lg shadow-lg p-6 col-span-2 lg:col-span-2">
+                <div className="mb-4">
+                  <h2 className="text-2xl font-bold">Product Details</h2>
+                </div>
+                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-2 gap-6">
+                  {products.map((product) => (
+                    <div key={product._id} className="bg-muted rounded-lg shadow-lg p-4 flex flex-col justify-between">
+                      <div>
+                        <h3 className="text-lg font-bold">{product.product_name}</h3>
+                        <h5 className="text-sm font-bold">MFG Date: {formatDate(product.mfd)}</h5>
+                        <h5 className="text-sm font-bold">EXP Date: {formatDate(product.expiry_date)}</h5>
+                        <p className="text-muted-foreground">{product.product_info}</p>
+                        <p className="text-muted-foreground">NOTIFICATION SET AS: {product.notificationPeriod}</p>
+                        <div className="flex gap-2">
+                    <button
+                      className="flex-1 bg-blue-500 text-white py-1 rounded-lg"
+                      onClick={() => handleEditClick(product)}
+                    >
+                      Edit
+                    </button>
+                    <button
+                      className="flex-1 bg-red-500 text-white py-1 rounded-lg"
+                      onClick={() => handleDelete(product._id)}
+                    >
+                      Delete
+                    </button>
                   </div>
-                  <div>{product.product_info}</div>
-                  <button
-                    className="mt-2 m-2 px-6 py-2 text-sm text-white bg-blue-500 rounded hover:bg-orange-300"
-                    onClick={() => handleEditClick(product)}
-                  >
-                    Edit
-                  </button>
-                  <button
-                    className="mt-2 px-4 py-2 text-sm text-white bg-red-500 rounded hover:bg-red-600"
-                    onClick={() => handleDelete(product._id)}
-                  >
-                    Delete
-                  </button>
-                </li>
-              ))}
-            </ul>
-          </div>
+                      </div>
+                      <div className="mt-4 flex justify-between items-center">
+                        <span className="text-primary font-semibold">{product.price}</span>
+                        <div className="inline-flex w-fit items-center whitespace-nowrap rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80" data-v0-t="badge">
+                          In Stock
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </main>
         </div>
       </div>
-    </div>
-  </>
-);
+    </>
+  );
 };
 
 export default UserD;
diff --git a/src/Dashboards/s.js b/src/Dashboards/s.js
new file mode 100644
index 0000000..a7320a7
--- /dev/null
+++ b/src/Dashboards/s.js
@@ -0,0 +1,91 @@
+<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 p-6">
+  <div class="bg-background rounded-lg shadow-lg p-6">
+    <div class="flex items-center justify-between mb-4">
+      <h2 class="text-2xl font-bold">Products</h2>
+      <span class="text-4xl font-bold">5</span>
+    </div>
+    <p class="text-muted-foreground">Manage and track your product inventory.</p>
+  </div>
+  <div class="bg-background rounded-lg shadow-lg p-6 col-span-2 lg:col-span-2">
+    <div class="mb-4">
+      <h2 class="text-2xl font-bold">Product Details</h2>
+    </div>
+    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+      <div class="bg-muted rounded-lg shadow-lg p-4 flex flex-col justify-between">
+        <div>
+          <h3 class="text-lg font-bold">Acme Wireless Headphones</h3>
+          <p class="text-muted-foreground">High-quality wireless headphones with noise cancellation</p>
+        </div>
+        <div class="mt-4 flex justify-between items-center">
+          <span class="text-primary font-semibold">$99.99</span>
+          <div
+            class="inline-flex w-fit items-center whitespace-nowrap rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80"
+            data-v0-t="badge"
+          >
+            In Stock
+          </div>
+        </div>
+      </div>
+      <div class="bg-muted rounded-lg shadow-lg p-4 flex flex-col justify-between">
+        <div>
+          <h3 class="text-lg font-bold">Eco-Friendly Water Bottle</h3>
+          <p class="text-muted-foreground">Reusable water bottle made from sustainable materials</p>
+        </div>
+        <div class="mt-4 flex justify-between items-center">
+          <span class="text-primary font-semibold">$24.99</span>
+          <div
+            class="inline-flex w-fit items-center whitespace-nowrap rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80"
+            data-v0-t="badge"
+          >
+            In Stock
+          </div>
+        </div>
+      </div>
+      <div class="bg-muted rounded-lg shadow-lg p-4 flex flex-col justify-between">
+        <div>
+          <h3 class="text-lg font-bold">Ergonomic Office Chair</h3>
+          <p class="text-muted-foreground">Comfortable and adjustable office chair for long hours</p>
+        </div>
+        <div class="mt-4 flex justify-between items-center">
+          <span class="text-primary font-semibold">$199.99</span>
+          <div
+            class="inline-flex w-fit items-center whitespace-nowrap rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground"
+            data-v0-t="badge"
+          >
+            Low Stock
+          </div>
+        </div>
+      </div>
+      <div class="bg-muted rounded-lg shadow-lg p-4 flex flex-col justify-between">
+        <div>
+          <h3 class="text-lg font-bold">Smart Home Thermostat</h3>
+          <p class="text-muted-foreground">Intelligent thermostat with app control and scheduling</p>
+        </div>
+        <div class="mt-4 flex justify-between items-center">
+          <span class="text-primary font-semibold">$149.99</span>
+          <div
+            class="inline-flex w-fit items-center whitespace-nowrap rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80"
+            data-v0-t="badge"
+          >
+            In Stock
+          </div>
+        </div>
+      </div>
+      <div class="bg-muted rounded-lg shadow-lg p-4 flex flex-col justify-between">
+        <div>
+          <h3 class="text-lg font-bold">Fitness Tracker Watch</h3>
+          <p class="text-muted-foreground">Advanced fitness tracker with heart rate monitoring</p>
+        </div>
+        <div class="mt-4 flex justify-between items-center">
+          <span class="text-primary font-semibold">$79.99</span>
+          <div
+            class="inline-flex w-fit items-center whitespace-nowrap rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80"
+            data-v0-t="badge"
+          >
+            In Stock
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file