Merge pull request #460 from Ansh101112/notification

New UI integrated and bugs fixed of no response from server
usha-madithati · Jul 22, 2024 · 2e96d00 · 2e96d00
2 parents 58a0045 + 7f4d57b
commit 2e96d00
Show file tree

Hide file tree

Showing 5 changed files with 133 additions and 11 deletions.
diff --git a/backend/.env.sample b/backend/.env.sample
diff --git a/src/Dashboards/DashboardOverview.css b/src/Dashboards/DashboardOverview.css
@@ -0,0 +1,25 @@
+/* DashboardOverview.css */
+.cards {
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: 20px;
+  }
+
+  .card {
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    text-align: center;
+    width: 20%;
+  }
+
+  .card-content {
+    margin: 0 auto;
+  }
+
+  .charts {
+    display: flex;
+    justify-content: space-around;
+  }
+
diff --git a/src/Dashboards/DashboardOverview.js b/src/Dashboards/DashboardOverview.js
@@ -0,0 +1,96 @@
+import React from 'react';
+import { Line } from 'react-chartjs-2';
+import { Chart, LineElement, PointElement, LinearScale, CategoryScale, Title, Tooltip, Legend } from 'chart.js';
+
+// Register Chart.js components
+Chart.register(LineElement, PointElement, LinearScale, CategoryScale, Title, Tooltip, Legend);
+
+const DashboardOverview = ({ products }) => {
+  // Extract and validate product dates
+  const validProducts = products.filter(product => {
+    const date = new Date(product.addedDate);
+    return !isNaN(date);
+  });
+
+  // Extract dates
+  const productDates = validProducts.map(product => new Date(product.addedDate));
+
+  // Aggregate products added per day
+  const productsAddedPerDay = productDates.reduce((acc, date) => {
+    const day = date.toISOString().split('T')[0];
+    acc[day] = (acc[day] || 0) + 1;
+    return acc;
+  }, {});
+
+  // Prepare chart data
+  const labels = Object.keys(productsAddedPerDay).sort();
+  const data = labels.map(label => productsAddedPerDay[label]);
+
+  // Debugging: Log chart data
+  console.log('Chart Data:', { labels, data });
+
+  // Default chartData if no data is present
+  const chartData = {
+    labels: labels.length > 0 ? labels : ['No Data'],
+    datasets: [
+      {
+        label: 'Products Added',
+        data: data.length > 0 ? data : [1],
+        borderColor: 'blue',
+        backgroundColor: 'rgba(0,0,255,0.2)',
+        fill: true,
+      },
+    ],
+  };
+
+  const options = {
+    responsive: true,
+    plugins: {
+      legend: {
+        position: 'top',
+      },
+      tooltip: {
+        callbacks: {
+          label: function (context) {
+            return `Products Added: ${context.raw}`;
+          },
+        },
+      },
+    },
+    scales: {
+      x: {
+        title: {
+          display: true,
+          text: 'Date',
+        },
+      },
+      y: {
+        title: {
+          display: true,
+          text: 'Number of Products',
+        },
+        beginAtZero: true,
+      },
+    },
+  };
+
+  return (
+    <div>
+      <div className="cards">
+        <div className="card">
+          <div className="card-content">
+            <h3>{products.length}</h3>
+            <p>Total Products</p>
+          </div>
+        </div>
+        {/* Add more cards if needed */}
+      </div>
+      <div className="charts">
+        <Line data={chartData} options={options} />
+        {/* Add other charts here */}
+      </div>
+    </div>
+  );
+};
+
+export default DashboardOverview;
diff --git a/src/Dashboards/UserD.js b/src/Dashboards/UserD.js
@@ -5,6 +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';
 
 const UserD = () => {
   const isLoggedIn = localStorage.getItem("isLoggedIn") === "true";
@@ -19,15 +21,15 @@ const UserD = () => {
       try {
         const token = localStorage.getItem("token");
         const userResponse = await axios.get(
-          "https://smartserver-production.up.railway.app/users",
+          "https://smartserver-scbe.onrender.com/users",
           {
             headers: {
               Authorization: `Bearer ${token}`,
             },
           }
         );
         const productResponse = await axios.get(
-          "https://smartserver-production.up.railway.app/products",
+          "https://smartserver-scbe.onrender.com/products",
           {
             headers: {
               Authorization: `Bearer ${token}`,
@@ -67,7 +69,7 @@ const UserD = () => {
     try {
       const token = localStorage.getItem("token");
       const response = await axios.delete(
-        `https://smartserver-production.up.railway.app/products/${productId}`,
+        `https://smartserver-scbe.onrender.com/products/${productId}`,
         {
           headers: {
             Authorization: `Bearer ${token}`,
@@ -225,6 +227,11 @@ const UserD = () => {
             </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">

diff --git a/src/components/PForm.js b/src/components/PForm.js
@@ -104,7 +104,7 @@ const PForm = () => {
         "Manufacturing date cannot be greater than or equal to expiry date."
       );
     }
-    console.log("diff",diffDays);
+
     try {
       const token = localStorage.getItem("token");
 
@@ -114,7 +114,7 @@ const PForm = () => {
       }
 
       await axios.post(
-        "https://smartserver-production.up.railway.app/add-product",
+        "https://smartserver-scbe.onrender.com/add-product",
         productDataWithNotification,
         {
           headers: {