Skip to content

Admin dashboard #34

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ipsitabisht wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Admin dashboard #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
efd823d
working on dashboard, added analytics
ipsitabisht Nov 30, 2023
dc6810f
basically finished with dashboard, need to fix a little bit of ui
ipsitabisht Dec 2, 2023
1f85359
deleted analytics stuff from this branch, moving to another
ipsitabisht Dec 2, 2023
c903fe7
finished updating / calcualting orders procssed or pending for analytics
ipsitabisht Dec 4, 2023
40b5e1f
finished with dash
ipsitabisht Dec 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
306 changes: 306 additions & 0 deletions client/src/components/admin-dashboard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,306 @@
import React, {useState, useEffect} from 'react';
import Orders from './orderManager.jsx'
import DashInfoCard from './dashboardInfoCard';
import { FaTag } from "react-icons/fa6";
import { BsArrowRepeat } from "react-icons/bs";
import { FcOk } from "react-icons/fc";
import { FaStar } from "react-icons/fa";
import { MdTableRestaurant } from "react-icons/md";

const Dashboard = () => {

// const [sales, setSales] = useState(172845);
//for the incomplete/open orders
const [pending, setPending] = useState(0);
//for the completed / processed orders;
const [completed, setCompleted] = useState(0);
const [rating, setRatings] = useState(4);
// const [tablesAvailable, setTablesAvailable] = useState(8);

//mock restaurant data for getting user and order history
const [restaurantData, setRestaurantData] = useState({
restaurantName: 'Your Restaurant',
restaurantMenu: {
totalItemCount: 2,
menuList: [
{
menuId: '1',
image: 'menu-item-1.jpg',
filter: ['filter1', 'filter2'],
name: 'Menu Item 1',
price: 10,
description: 'Description for Menu Item 1',
diet: ['vegan'],
customizable: true,
custom: [
{
name: 'Custom Option 1',
multipleSelection: true,
option: [
{ customName: 'Option A', price: 2 },
{ customName: 'Option B', price: 3 },
],
},
],
},
{
menuId: '2',
image: 'menu-item-2.jpg',
filter: ['filter1', 'filter3'],
name: 'Menu Item 2',
price: 15,
description: 'Description for Menu Item 2',
diet: ['vegetarian'],
customizable: false,
custom: [],
},
{
menuId: '3',
image: 'menu-item-3.jpg',
filter: ['filter1', 'filter3'],
name: 'Menu Item 3',
price: 15,
description: 'Description for Menu Item 3',
diet: ['vegan'],
customizable: false,
custom: [],
},
],
},
table: {
totalTableCount: 5,
tableList: [
{
seatCapacity: 4,
isOccupied: false,
order: [ {
menuItemId: 1,
quantity: 2,
custom: [],
price: 20,
status: 'completed',

},

],
},
{
seatCapacity: 4,
isOccupied: true,
order: [ {
menuItemId: 1,
quantity: 2,
custom: [],
price: 20,
status: 'pending',

},

],
},

],
},
history: [
{
userId: 'user1',
userHistory: [
{
menuItemId: '1',
quantity: 2,
custom: [],
price: 20,
createdAt: new Date('2023-01-02T18:45:00'),
},
{
menuItemId: '2',
quantity: 1,
custom: ['extra cheese'],
price: 15,
createdAt: new Date('2023-01-02T18:45:00'),
},
],
},
{
userId: 'user2',
userHistory: [
{
menuItemId: '1',
quantity: 3,
custom: ['extra sauce'],
price: 30,
createdAt: new Date('2023-12-12T18:45:00'),
},
{
menuItemId: '3',
quantity: 3,
custom: ['extra sauce'],
price: 30,
createdAt: new Date('2023-12-12T18:45:00'),
},

],
},
{
userId: 'user3',
userHistory: [
{
menuItemId: '1',
quantity: 3,
custom: ['extra sauce'],
price: 30,
createdAt: new Date('2023-01-02T12:45:00'),
},
{
menuItemId: '3',
quantity: 3,
custom: ['extra sauce'],
price: 30,
createdAt: new Date('2023-01-02T12:45:00'),
},

],
},
{
userId: 'user4',
userHistory: [
{
menuItemId: '2',
quantity: 3,
custom: ['extra sauce'],
price: 30,
createdAt: new Date('2023-01-02T14:45:00'),
},
{
menuItemId: '1',
quantity: 3,
custom: ['extra sauce'],
price: 30,
createdAt: new Date('2023-01-02T14:45:00'),
},
{
menuItemId: '1',
quantity: 3,
custom: ['extra sauce'],
price: 30,
createdAt: new Date('2023-01-02T14:45:00'),
},
{
menuItemId: '1',
quantity: 3,
custom: ['extra sauce'],
price: 30,
createdAt: new Date('2023-01-02T14:45:00'),
},

],
},
{
userId: 'user5',
userHistory: [
{
menuItemId: '2',
quantity: 3,
custom: ['extra sauce'],
price: 30,
createdAt: new Date('2021-01-02T14:45:00'),
},
{
menuItemId: '1',
quantity: 3,
custom: ['extra sauce'],
price: 30,
createdAt: new Date('2023-01-02T14:45:00'),
},
{
menuItemId: '1',
quantity: 3,
custom: ['extra sauce'],
price: 30,
createdAt: new Date('2023-01-02T14:45:00'),
},
{
menuItemId: '1',
quantity: 3,
custom: ['extra sauce'],
price: 30,
createdAt: new Date('2023-01-02T14:45:00'),
},
// add user
],
},
//add more history

],
});

//get the order status of tables checking if processed or pending
useEffect(() => {
// Calculate total processed orders based on restaurantData
const calculateOrderStats = () => {
if (!restaurantData || !restaurantData.table || !restaurantData.table.tableList) {
return;
}

let totalCompletedOrder = 0;
let totalPendingOrder = 0
restaurantData.table.tableList.forEach(table => {
if (table.order && table.order.length > 0) {
totalPendingOrder += table.order.filter(order => order.status === 'pending').length;
totalCompletedOrder += table.order.filter(order => order.status === 'completed').length;
}
});

setCompleted(totalCompletedOrder);
setPending(totalPendingOrder);

};


calculateOrderStats();
}, [restaurantData]);

//total sales from restaurnat data history
const calculateTotalSales = () => {
if (!restaurantData || !restaurantData.history) {
return 0;
}

return restaurantData.history.reduce((totalSales, history) => {
if (history.userHistory) {
history.userHistory.forEach(order => {
totalSales += order.price || 0;
});
}
return totalSales;
}, 0);

}



const totalSales = calculateTotalSales().toLocaleString();



return(
<div className="flex flex-col ">
<div className="p-4 overflow-x-auto ">

<div className="grid grid-cols-4 space-4">
<DashInfoCard description="Total Sales" icon={<FaTag />} stats={totalSales}/>
<DashInfoCard description="Orders Processed" icon={<BsArrowRepeat />} stats={completed}/>
<DashInfoCard description="Open Orders" icon={<FcOk />} stats={pending}/>
<DashInfoCard description="Customer Rating" icon={<FaStar />} stats={rating}/>
{/* <DashInfoCard description="Tables Available" icon={<MdTableRestaurant />} stats={tablesAvailable}/> */}



</div>
</div>
<Orders className="mt-8 mb-8" />
</div>
)
}

export default Dashboard;
23 changes: 23 additions & 0 deletions client/src/components/dashboardInfoCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import React from 'react'


const DashInfoCard = ({description, icon, stats}) => {

return(

<div className="flex flex-col bg-white items-center justify-center rounded-3xl m-4 p-2">
<p className="text-gray-500 text-sm mb-1">{description}</p>

<div className="flex flex-row items-center justify-center">
<div className="mr-2 text-2xl">{icon}</div>

<p className="text-2xl">{stats}</p>
</div>


</div>

);
}

export default DashInfoCard;
3 changes: 1 addition & 2 deletions client/src/pages/admin-analytics.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from 'react'
import AdminNavbar from '../components/adminNavbar'

const Admin_analytics = (props) => {

const { WebSocketService, setPage } = props;
Expand All @@ -11,7 +10,7 @@ const Admin_analytics = (props) => {
<div className="w-[80%] h-screen">
<div className='flex flex-col'>
<div className='text-center mt-27 text-black font-Montserrat text-4xl font-bold py-6'>Analytics</div>
<div>{/* Component */}</div>

</div>
</div>
</div>
Expand Down
7 changes: 5 additions & 2 deletions client/src/pages/admin-dashboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import Admin_analytics from './admin-analytics';
import Admin_customer from './admin-customer';
import Admin_table from './admin-table';
import Admin_orders from './admin-orders';

import Dashboard from '../components/admin-dashboard'
import WebSocketService from '../WebSocketService';

const Admin_dashboard = (props) => {
Expand All @@ -27,7 +27,10 @@ const Admin_dashboard = (props) => {
<div className="w-[80%] h-screen">
<div className='flex flex-col'>
<div className='text-center mt-27 text-black font-Montserrat text-4xl font-bold py-6'>Dashboard</div>
<div>{/* Component */}</div>
<div>
<Dashboard />

</div>
</div>
</div>
</div>
Expand Down