Some functionalities for invoices added

code/Software/Frontend/src/AdminDashboard/AdminDashboard.jsx

@@ -15,7 +15,7 @@ function AdminDashboard(){
       <div className={`container-fluid`}  >
         <div className="row bg-light">
 
-          <div className="col-auto col-md-5 col-xl-2 px-sm-2 px-0 bg-white" >
+          <div className="col-12 col-md-5 col-xl-2 px-sm-2 px-0 bg-white" >
             <div className="d-flex flex-column align-items-start px-3 pt-2 min-vh-100">
 
 

code/Software/Frontend/src/AdminDashboard/Dashboard.css → code/Software/Frontend/src/AdminDashboard/Dashboard/Dashboard.css

@@ -24,24 +24,3 @@
     padding: 40px;
 
   }
-
-  .container_for_topselling {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    max-width: 900px;
-    border-radius: 25px;
-
-  }
-  .square-card_topselling {
-    height: 90%;
-    border-radius: 1px; 
-    aspect-ratio: 1/1;
-    border-color: rgb(45, 49, 49);
-    margin: 0;
-    margin-top: 15px;
-    height: 20vh;
-  }
-  .card-body_topselling{
-    padding: 2px;
-  }

code/Software/Frontend/src/AdminDashboard/Dashboard.jsx → code/Software/Frontend/src/AdminDashboard/Dashboard/Dashboard.jsx

@@ -3,6 +3,8 @@ import React, { useState, useEffect } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faShoppingCart, faDollarSign, faChartBar } from '@fortawesome/free-solid-svg-icons';
 import './Dashboard.css'; 
+import TopProducts from './TopProducts'; 
+import TopSellingProducts from './TopSellingProducts';
 
 
 const Dashboard = () => {
@@ -11,7 +13,7 @@ const Dashboard = () => {
   const [totalSaleYesterday, setTotalSaleYesterday] = useState(0);
   const [percentageChange, setPercentageChange] = useState(0);
 
-  const [totalBillToday, setTotalBillToday] = useState(0);
+  const [billCountToday, setTotalBillToday] = useState(0);
   const [totalBillYesterday, setTotalBillYesterday] = useState(0);
   const [percentageChangeBills, setPercentageChangeBills] = useState(0);
 
@@ -43,10 +45,11 @@ const Dashboard = () => {
         console.log(data);
 
         // Destructure data and set state for bills
-        const { totalBillToday, totalBillYesterday, percentageChange } = data;
-        setTotalBillToday(totalBillToday);
+        const { billCountToday, totalBillYesterday, percentageChange } = data;
+        setTotalBillToday(billCountToday);
         setTotalBillYesterday(totalBillYesterday);
         setPercentageChangeBills(percentageChange);
+
       } catch (error) {
         console.error('Error fetching bill data:', error);
       }
@@ -102,7 +105,7 @@ const Dashboard = () => {
 
                 <h5 className="card-title text-center">
                   <FontAwesomeIcon icon={faShoppingCart} size="2x" color="#754c09" /><br /><br />
-                  <p className="card-text">{totalBillToday}</p>
+                  <p className="card-text">{billCountToday}</p>
                   Total Bills
                 </h5>
                 <p>{percentageChangeBills}% from yesterday</p>
@@ -125,43 +128,9 @@ const Dashboard = () => {
         </div>
       </div>
     </div><br/><br/>
-
-<div >
-<h2>Top Selling Products</h2>
-<p>View and Manage your top selling products</p>
-<br />
-<div className="container_for_topselling bg-white">
-  <div className="row row-1 row-3-md-2 g-4">
-    <div className="col">
-      <div className="card square-card_topselling" >
-        <div className="card-body_topselling"> 
-        image will be here         
-            <p className="card-text">product name</p> 
-            <p className="card-text">sold count</p>
-        </div>
-      </div>
-    </div>
-    <div className="col">
-      <div className="card square-card_topselling" >
-        <div className="card-body_topselling">
-        image will be here 
-            <p className="card-text">product name</p> 
-            <p className="card-text">sold count</p>
-        </div>
-      </div>
-    </div>
-    <div className="col">
-      <div className="card square-card_topselling" >
-        <div className="card-body_topselling">
-        image will be here 
-            <p className="card-text">product name</p>
-            <p className="card-text">sold count</p> 
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-</div></div>
+<TopSellingProducts/>
+<br/><br/>
+<TopProducts/></div>
   );
 };
 

code/Software/Frontend/src/AdminDashboard/Dashboard/TopProducts.jsx

@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from 'react';
+//import './TopProducts.css';
+
+const TopProducts = () => {
+  const [products, setProducts] = useState([]);
+
+  useEffect(() => {
+    // Fetch top products data and set it to the state
+    // can make an API call or use any other method to get the data
+    const fetchData = async () => {
+      // Example data
+      const topProductsData = [
+        { id: 1, name: 'Apple', image: 'https://healthjade.com/wp-content/uploads/2017/10/apple-fruit.jpg', popularity: '88%', sales: 345 },
+        { id: 2, name: 'Chocolate Biscuit', image: 'https://objectstorage.ap-mumbai-1.oraclecloud.com/n/softlogicbicloud/b/cdn/o/products/600-600/114800--01--1623926473.jpeg', popularity: '61%', sales: 280 },
+        { id: 3, name: 'Organic Milk Box', image: 'https://horizon.com/wp-content/uploads/horizon-organic-whole-dha-omega-3-milk.png', popularity: '52%', sales: 220 },
+        { id: 4, name: 'Chocolate Bar', image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Green_and_Black%27s_dark_chocolate_bar_2.jpg/640px-Green_and_Black%27s_dark_chocolate_bar_2.jpg', popularity: '34%', sales: 180 },
+      ];
+
+      setProducts(topProductsData);
+    };
+
+    fetchData();
+  }, []);
+
+  return (   
+    <div >
+      <h3>Top Products</h3>
+        <br />
+        <div className="container_for_sales bg-white">
+            <table>
+          <thead>
+            <tr>
+              <th>Rank</th>
+              <th>Product Name</th>
+              <th>Image</th>
+              <th>Popularity</th>
+              <th>Sales</th>
+            </tr>
+          </thead>
+          <tbody>
+            {products.map((product, index) => (
+              <tr key={product.id}>
+                <td>{index + 1}</td>
+                <td>{product.name}</td>
+                <td><img src={product.image} alt={product.name} style={{ width: '100px', height: 'auto' }} /></td>
+                <td>{product.popularity}</td>
+                <td>{product.sales}</td>
+              </tr>
+            ))}
+          </tbody>
+            </table>
+
+        </div>
+    </div>  
+  );
+};
+
+export default TopProducts;

code/Software/Frontend/src/AdminDashboard/Dashboard/TopSellingProduct.css

@@ -0,0 +1,30 @@
+
+.container_for_topselling {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  max-width: 900px;
+  border-radius: 25px;
+  margin-bottom: 30px;
+  padding: 40px;
+
+}
+.square-card_topselling {
+  height: 37vh; /* Adjust as needed */
+  border-radius: 5px; 
+  aspect-ratio: 1/1;
+  border-color: rgb(45, 49, 49);
+  justify-content: center;
+  align-items: center;
+  padding: 40px;
+}
+
+.card-img-top {
+  width: 70%;
+  height: 200px; /* Adjust the height according to your preference */
+  object-fit: cover;
+  align-content: center;
+}
+.col{
+  gap: 10000px;
+}

code/Software/Frontend/src/AdminDashboard/Dashboard/TopSellingProducts.jsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { useState, useEffect } from 'react';
+//import './Dashboard.css'
+import './TopSellingProduct.css'
+
+
+function TopSellingProducts() {
+    const [topSellingProducts, settopSellingProducts] = useState([]);
+
+  useEffect(() => {
+    // Fetch top products data and set it to the state
+    // You can make an API call or use any other method to get the data
+    const fetchData = async () => {
+      // Example data
+      const topProductsData = [
+        { id: 1, name: 'Apple', image: 'https://healthjade.com/wp-content/uploads/2017/10/apple-fruit.jpg', popularity: '88%', sales: 345 },
+        { id: 2, name: 'Chocolate Biscuit', image: 'https://objectstorage.ap-mumbai-1.oraclecloud.com/n/softlogicbicloud/b/cdn/o/products/600-600/114800--01--1623926473.jpeg', popularity: '61%', sales: 280 },
+        { id: 3, name: 'Organic Milk Box', image: 'https://horizon.com/wp-content/uploads/horizon-organic-whole-dha-omega-3-milk.png', popularity: '52%', sales: 220 },
+        ];
+
+      settopSellingProducts(topProductsData);
+    };
+
+    fetchData();
+  }, []);
+    return (
+        <div >
+<h2>Top Selling Products</h2>
+<p>View and Manage your top selling products</p>
+<br />
+<div className="container_for_topselling bg-white">
+  <div className="row row-1 row-3-md-2 g-4" style={{flexWrap: 'nowrap', gap: '1px'}}>
+  {topSellingProducts.map((product) => (
+            <div key={product.id} className="col">
+              <div className="card square-card_topselling">
+                <img src={product.image} alt={product.name} className="card-img-top" />
+                <div className="card-body_topselling">
+                  <p className="card-text">{product.name}</p>
+                  <p className="card-text">Sold count: {product.sales}</p>
+                </div>
+              </div>
+            </div>
+          ))}
+  </div>
+</div>
+</div>
+    )
+}
+export default TopSellingProducts

code/Software/Frontend/src/AdminDashboard/Invoices.jsx

@@ -4,15 +4,21 @@ import "./Invoices.css";
 function Invoices() {
   const [invoices, setInvoices] = useState([]);
   const [newInvoice, setNewInvoice] = useState({});
+  const formattedNewInvoice = {
+    data: [newInvoice]
+  };
+
 
   const handleCreate = async () => {
+    console.log("Creating invoice:", newInvoice);
     try {
       const response = await fetch("http://localhost:5555/bill/", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
         },
         body: JSON.stringify(newInvoice),
+
       });
 
       if (!response.ok) {
@@ -38,7 +44,7 @@ function Invoices() {
   const handleUpdate = async (id, updatedData) => {
     const { updatedInvoiceId, updatedDate, updatedAmount } = updatedData;
 
-  // Display the update space
+  //Display the update space
   document.getElementById("update-space").style.display = "block";
 
   // Populate the updated data in the space
@@ -60,7 +66,7 @@ function Invoices() {
     } catch (error) {
       console.error("Error updating invoice:", error);
     }
-  };
+  };*/
 
   const handleDelete = async (id) => {
     try {
@@ -69,11 +75,11 @@ function Invoices() {
       });
 
       // Remove the deleted invoice from the state
-      setInvoices(invoices.filter((invoice) => invoice.id !== id));
+        setInvoices(invoices.filter((invoice) => invoice._id !== id));
     } catch (error) {
       console.error("Error deleting invoice:", error);
     }
-  };*/
+  };
 
   useEffect(() => {
     const fetchData = async () => {
@@ -125,7 +131,7 @@ function Invoices() {
                 <button onClick={() => handleUpdate(invoice.id, {/* Updated data */})}>
                   Update
                 </button>
-                <button onClick={() => handleDelete(invoice.id)}>Delete</button>
+            <button onClick={() => handleDelete(invoice._id)}>Delete</button>
               </td>
             </tr>
           ))}
@@ -141,8 +147,8 @@ function Invoices() {
           <label>Amount:</label>
           <input
             type="text"
-            value={newInvoice.amount || ""}
-            onChange={(e) => setNewInvoice({ ...newInvoice, amount: e.target.value })}
+            value={newInvoice.totalAmount || ""}
+            onChange={(e) => setNewInvoice({ ...newInvoice, totalAmount: e.target.value })}
           />
 
           <label>Payment Method:</label>

code/Software/Frontend/src/App.jsx

@@ -4,7 +4,7 @@ import Signup from './signin_Page/Signup';
 import Login from './Login_Page/Login';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import AdminDashboard from './AdminDashboard/AdminDashboard';
-import Dashboard from './AdminDashboard/Dashboard';
+import Dashboard from './AdminDashboard/Dashboard/Dashboard';
 import Invoices from './AdminDashboard/Invoices';
 import Sales from './AdminDashboard/Sales';
 import Security_Footage from './AdminDashboard/Security_Footage';

code/Software/Frontend/src/Login_Page/Login.css

@@ -115,6 +115,8 @@
     color: #ccc;
   }
 
-
+.login_button{
+  width: 400px;
+}
 
 

code/Software/Frontend/src/Login_Page/Login.jsx

@@ -52,23 +52,24 @@ const Login = () => {
     id="password"
     value={password}
     onChange={(e) => setPassword(e.target.value)}
-    placeholder="strong password"
+    placeholder="Password"
     required
   />
 </div>
         <div>
-          <button type="submit">Login</button>
+          <button className="login_button" type="submit">Login</button>
         </div>
 
-        <div className="remember-me">
-          <input
-            type="checkbox"
-            id="rememberMe"
-            checked={rememberMe}
-            onChange={(e) => setRememberMe(e.target.checked)}
-          />
-          <label htmlFor="rememberMe">Remember me</label></div>
+
+          <label className="form-check-label">
+            <input type="checkbox" 
+            className="form-check-input" 
+            id="rememberMe" 
+            checked={rememberMe} 
+            onChange={(e)=> setRememberMe(e.target.checked)}/>
 
+              <small> Remember Me</small>
+          </label>
       </form>
       <p>
         Don't have an account? <Link to="/register">Sign Up</Link>