gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of http://128.199.30.231/possibillion/smellika-admin

Browse Source
This commit is contained in:
roshangarg 2024-04-12 18:03:12 +05:30
commit b5b8cbaf0c
24 changed files with 3182 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -45,6 +45,7 @@
"@reduxjs/toolkit": "^1.9.2",
"axios": "^0.25.0",
"bootstrap": "^5.1.3",
"chart.js": "^4.4.2",
"country-state-city": "^3.2.1",
"draft-js": "^0.11.7",
"draft-js-export-html": "^1.4.1",
@ -55,6 +56,7 @@
"quill": "^1.3.7",
"react": "18.0.0",
"react-bootstrap": "^2.7.0",
"react-chartjs-2": "^5.2.0",
"react-datepicker": "^4.8.0",
"react-dom": "^18.0.0",
"react-draft-wysiwyg": "^1.15.0",
@ -66,6 +68,7 @@
"react-spinners": "^0.11.0",
"react-tag-input-component": "^2.0.2",
"react-to-print": "^2.14.11",
"recharts": "^2.12.4",
"redux": "4.1.2",
"serve": "^13.0.2",
"simplebar-react": "^2.3.6",

7
src/_nav.js
View File

@ -23,6 +23,7 @@ import {
cilText,
cilUser,
cilAlarm,
cilFeaturedPlaylist,
} from "@coreui/icons";
import { CNavGroup, CNavItem, CNavTitle, CTabContent } from "@coreui/react";
@ -212,6 +213,12 @@ const _nav = [
icon: <CIcon icon={cilText} customClassName="nav-icon" />,
to: "/content",
},
{
component: CNavItem,
name: "Home",
icon: <CIcon icon={cilFeaturedPlaylist} customClassName="nav-icon" />,
to: "/home",
},
],
},
{

37
src/routes.js
View File

@ -121,6 +121,11 @@ import CreateBlog from "./views/Blog/CreateBlog";
import users from "./views/Users/users";
import UpdateBlog from "./views/Blog/EditBlog";
import ViewBlog from "./views/Blog/ViewBlog";
import Home from "./views/Home/home";
import EditPanel1 from "./views/Home/editPanel1";
import EditPanel2 from "./views/Home/editPanel2";
import EditPanel3 from "./views/Home/editPanel3";
import Editpanel4 from "./views/Home/editPanel4";
import CustomerTable from "./views/customerDetails/customerTable";
import SingleUserAllDetails from "./views/customerDetails/singleUserAllDetails";
import Charts from "./views/Charts/RevenueCharts";
@ -324,6 +329,38 @@ const routes = [
element: EditAboutUs,
},
// Home
{
path: "/home",
name: "Home",
element: Home,
},
{
path: "/home/panel-1",
name: "EditPanel1",
element: EditPanel1,
},
{
path: "/home/panel-2",
name: "EditPanel2",
element: EditPanel2,
},
{
path: "/home/panel-3",
name: "EditPanel3",
element: EditPanel3,
},
{
path: "/home/panel-4",
name: "EditPanel4",
element: Editpanel4,
},
// { path: '/complaint/view/:id', name: 'view Complain', element: ViewComplaint },
//Complaints
{

203
src/views/Charts/CityRevenue.js
View File

@ -1,26 +1,199 @@
import { isAutheticated } from "../../auth.js";
import React, { useEffect, useState } from "react";
import { isAutheticated } from "src/auth";
import axios from "axios";
import { Bar } from "react-chartjs-2";
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
} from "chart.js";
ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
);
const CityRevenueCharts = () => {
const token = isAutheticated();
const [ordersData, setOrdersData] = useState([]);
const [filteredOrders, setFilteredOrders] = useState([]);
const [selectedYear, setSelectedYear] = useState(new Date().getFullYear());
const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth() + 1);
useEffect(() => {
function getOrder() {
axios
.get(`/api/order/getAll/`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
setOrdersData(res.data.order);
// console.log(res.data.order);
})
.catch((err) => {
console.log(err);
});
}
getOrder();
}, []);
useEffect(() => {
// Filter orders based on selected year and month
const filtered = ordersData.filter((order) => {
const createdAt = new Date(order.createdAt);
return (
createdAt.getFullYear() === selectedYear &&
createdAt.getMonth() + 1 === selectedMonth
);
});
// Sort filtered orders by date in ascending order
filtered.sort((a, b) => {
const dateA = new Date(a.createdAt);
const dateB = new Date(b.createdAt);
return dateA - dateB;
});
setFilteredOrders(filtered);
}, [ordersData, selectedYear, selectedMonth]); // Update filtered orders when orders data, year, or month changes
const uniquecity = [
...new Set(
filteredOrders.map((item) => item.shippingInfo.city)
),
];
// console.log(uniquecity);
// console.log(filteredOrders);
// Prepare data for chart
const data = {
labels: uniquecity, // Use unique product names as labels
datasets: [
{
label: "Total Amount",
data: uniquecity.map((city) => {
// Sum total amounts for each date
return filteredOrders
.filter((order) => order.shippingInfo.city.includes(city))
.reduce((total, order) => total + order.total_amount, 0);
}),
backgroundColor: "rgba(43, 63, 229, 0.8)",
borderRadius: 5,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
display: false,
},
title: {
display: true,
text: "Revenue Chart",
},
},
scales: {
x: {
title: {
display: true,
text: "City",
},
},
y: {
beginAtZero: true,
title: {
display: true,
text: "Total Amount",
},
ticks: {
stepSize: 1, // Adjust step size as needed
},
},
},
};
// Convert month number to string
const monthToString = (monthNumber) => {
const months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
return months[monthNumber - 1];
};
// Determine the lowest year found in the ordersData
const lowestYear = Math.min(
...ordersData.map((order) => new Date(order.createdAt).getFullYear())
);
// Generate an array of years from the lowest year to the current year
const years = Array.from(
{ length: new Date().getFullYear() - lowestYear + 1 },
(_, index) => lowestYear + index
);
return (
<div className="w-80vw">
{token ? (
<iframe
style={{
background: "#F1F5F4",
border: "none",
borderRadius: "2px",
boxShadow: "0 2px 10px 0 rgba(70, 76, 79, .2)",
width: "80vw",
height: "85vh",
}}
src="https://charts.mongodb.com/charts-smellica-hqyad/embed/dashboards?id=7447b4d9-2c23-4b85-aa8b-242097a6aafd&theme=light&autoRefresh=true&maxDataAge=3600&showTitleAndDesc=true&scalingWidth=scale&scalingHeight=scale"
></iframe>
<>
<div style={{ display: "flex" }}>
<div style={{ marginRight: "20px" }}>
<label htmlFor="year">Select Year:</label>
<select
id="year"
value={selectedYear}
onChange={(e) => setSelectedYear(parseInt(e.target.value))}
>
{years.map((year) => (
<option key={year} value={year}>
{year}
</option>
))}
</select>
</div>
<div>
<label htmlFor="month">Select Month:</label>
<select
id="month"
value={selectedMonth}
onChange={(e) => setSelectedMonth(parseInt(e.target.value))}
>
{[...Array(12).keys()].map((month) => (
<option key={month + 1} value={month + 1}>
{monthToString(month + 1)}
</option>
))}
</select>
</div>
</div>
<div style={{ textAlign: "center" }}>
{filteredOrders.length === 0 ? (
<p>No data available</p>
) : (
<h3>No charts available</h3>
<div style={{ height: "75vh" }}>
<Bar data={data} options={options} />
</div>
)}
</div>
</>
);
};

198
src/views/Charts/OrderDaywise.js
View File

@ -1,26 +1,194 @@
import { isAutheticated } from "../../auth.js";
import React, { useEffect, useState } from "react";
import { isAutheticated } from "src/auth";
import axios from "axios";
import { Bar } from "react-chartjs-2";
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
} from "chart.js";
ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
);
const OrderdayChart = () => {
const token = isAutheticated();
const [ordersData, setOrdersData] = useState([]);
const [filteredOrders, setFilteredOrders] = useState([]);
const [selectedYear, setSelectedYear] = useState(new Date().getFullYear());
const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth() + 1);
useEffect(() => {
function getOrder() {
axios
.get(`/api/order/getAll/`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
setOrdersData(res.data.order);
})
.catch((err) => {
console.log(err);
});
}
getOrder();
}, [token]);
useEffect(() => {
// Filter orders based on selected year and month
const filtered = ordersData.filter((order) => {
const createdAt = new Date(order.createdAt);
return (
createdAt.getFullYear() === selectedYear &&
createdAt.getMonth() + 1 === selectedMonth
);
});
// Sort filtered orders by date in ascending order
filtered.sort((a, b) => {
const dateA = new Date(a.createdAt);
const dateB = new Date(b.createdAt);
return dateA - dateB;
});
setFilteredOrders(filtered);
}, [ordersData, selectedYear, selectedMonth]); // Update filtered orders when orders data, year, or month changes
// Extract unique dates from filtered orders
const uniqueDates = Array.from(
new Set(filteredOrders.map((order) => order.createdAt.split("T")[0]))
);
// Prepare data for chart
const data = {
labels: uniqueDates,
datasets: [
{
label: "Total Orders",
data: uniqueDates.map((date) => {
// Count total orders for each date
return filteredOrders.filter((order) => order.createdAt.includes(date)).length;
}),
backgroundColor: "rgba(43, 63, 229, 0.8)",
borderRadius: 5,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
display: false,
},
title: {
display: true,
text: "Revenue Order",
},
},
scales: {
x: {
title: {
display: true,
text: "Date",
},
},
y: {
beginAtZero: true,
title: {
display: true,
text: "Orders",
},
ticks: {
stepSize: 1, // Adjust step size as needed
},
},
},
};
// Convert month number to string
const monthToString = (monthNumber) => {
const months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
return months[monthNumber - 1];
};
// Determine the lowest year found in the ordersData
const lowestYear = Math.min(
...ordersData.map((order) => new Date(order.createdAt).getFullYear())
);
// Generate an array of years from the lowest year to the current year
const years = Array.from(
{ length: new Date().getFullYear() - lowestYear + 1 },
(_, index) => lowestYear + index
);
return (
<div className="w-80vw">
{token ? (
<iframe
style={{
background: "#F1F5F4",
border: "none",
borderRadius: "2px",
boxShadow: "0 2px 10px 0 rgba(70, 76, 79, .2)",
width: "80vw",
height: "85vh",
}}
src="https://charts.mongodb.com/charts-smellica-hqyad/embed/dashboards?id=2d28091a-a2f4-4a8b-af87-7bb7d4bb0d56&theme=light&autoRefresh=true&maxDataAge=3600&showTitleAndDesc=true&scalingWidth=scale&scalingHeight=scale"
></iframe>
<>
<div style={{ display: "flex"}}>
<div style={{ marginRight: "20px" }}>
<label htmlFor="year">Select Year:</label>
<select
id="year"
value={selectedYear}
onChange={(e) => setSelectedYear(parseInt(e.target.value))}
>
{years.map((year) => (
<option key={year} value={year}>
{year}
</option>
))}
</select>
</div>
<div>
<label htmlFor="month">Select Month:</label>
<select
id="month"
value={selectedMonth}
onChange={(e) => setSelectedMonth(parseInt(e.target.value))}
>
{[...Array(12).keys()].map((month) => (
<option key={month + 1} value={month + 1}>
{monthToString(month + 1)}
</option>
))}
</select>
</div>
</div>
<div style={{ textAlign: "center" }}>
{filteredOrders.length === 0 ? (
<p>No data available</p>
) : (
<h3>No charts available</h3>
<div style={{height:"75vh"}}>
<Bar data={data} options={options} />
</div>
)}
</div>
</>
);
};

216
src/views/Charts/ProductRevenue.js
View File

@ -1,26 +1,212 @@
import { isAutheticated } from "../../auth.js";
import React, { useEffect, useState } from "react";
import { isAutheticated } from "src/auth";
import axios from "axios";
import { Bar } from "react-chartjs-2";
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
} from "chart.js";
ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
);
const ProductrevenueCharts = () => {
const token = isAutheticated();
const [ordersData, setOrdersData] = useState([]);
const [filteredOrders, setFilteredOrders] = useState([]);
const [selectedYear, setSelectedYear] = useState(new Date().getFullYear());
const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth() + 1);
useEffect(() => {
function getOrder() {
axios
.get(`/api/order/getAll/`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
setOrdersData(res.data.order);
// console.log(res.data.order);
})
.catch((err) => {
console.log(err);
});
}
getOrder();
}, []);
useEffect(() => {
// Filter orders based on selected year and month
const filtered = ordersData.filter((order) => {
const createdAt = new Date(order.createdAt);
return (
createdAt.getFullYear() === selectedYear &&
createdAt.getMonth() + 1 === selectedMonth
);
});
// Sort filtered orders by date in ascending order
filtered.sort((a, b) => {
const dateA = new Date(a.createdAt);
const dateB = new Date(b.createdAt);
return dateA - dateB;
});
setFilteredOrders(filtered);
}, [ordersData, selectedYear, selectedMonth]); // Update filtered orders when orders data, year, or month changes
// Extract unique products from filtered orders
const uniqueProducts = [
...new Set(
filteredOrders.flatMap((order) =>
order.orderItems.map((item) => item.name)
)
),
];
// console.log(uniqueProducts);
// console.log(filteredOrders);
// Prepare data for chart
const data = {
labels: uniqueProducts, // Use unique product names as labels
datasets: [
{
label: "Total Amount",
data: uniqueProducts.map((product) =>
filteredOrders.reduce((total, order) => {
// Find the order item for the current product
const orderItem = order.orderItems.find(
(item) => item.name === product
);
if (orderItem) {
// If the order item exists, add its total amount to the total for this product
return total + orderItem.
product_Subtotal;
} else {
// If the order item does not exist, return the current total
return total;
}
}, 0)
),
backgroundColor: "rgba(43, 63, 229, 0.8)",
borderRadius: 5,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
display: false,
},
title: {
display: true,
text: "Revenue Chart",
},
},
scales: {
x: {
title: {
display: true,
text: "Product",
},
},
y: {
beginAtZero: true,
title: {
display: true,
text: "Total Amount",
},
ticks: {
stepSize: 1, // Adjust step size as needed
},
},
},
};
// Convert month number to string
const monthToString = (monthNumber) => {
const months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
return months[monthNumber - 1];
};
// Determine the lowest year found in the ordersData
const lowestYear = Math.min(
...ordersData.map((order) => new Date(order.createdAt).getFullYear())
);
// Generate an array of years from the lowest year to the current year
const years = Array.from(
{ length: new Date().getFullYear() - lowestYear + 1 },
(_, index) => lowestYear + index
);
return (
<div className="w-80vw">
{token ? (
<iframe
style={{
background: "#F1F5F4",
border: "none",
borderRadius: "2px",
boxShadow: "0 2px 10px 0 rgba(70, 76, 79, .2)",
width: "80vw",
height: "85vh",
}}
src="https://charts.mongodb.com/charts-smellica-hqyad/embed/dashboards?id=7549914d-a34f-4ae6-b535-99cfc1d52fb7&theme=light&autoRefresh=true&maxDataAge=3600&showTitleAndDesc=true&scalingWidth=scale&scalingHeight=scale"
></iframe>
<>
<div style={{ display: "flex" }}>
<div style={{ marginRight: "20px" }}>
<label htmlFor="year">Select Year:</label>
<select
id="year"
value={selectedYear}
onChange={(e) => setSelectedYear(parseInt(e.target.value))}
>
{years.map((year) => (
<option key={year} value={year}>
{year}
</option>
))}
</select>
</div>
<div>
<label htmlFor="month">Select Month:</label>
<select
id="month"
value={selectedMonth}
onChange={(e) => setSelectedMonth(parseInt(e.target.value))}
>
{[...Array(12).keys()].map((month) => (
<option key={month + 1} value={month + 1}>
{monthToString(month + 1)}
</option>
))}
</select>
</div>
</div>
<div style={{ textAlign: "center" }}>
{filteredOrders.length === 0 ? (
<p>No data available</p>
) : (
<h3>No charts available</h3>
<div style={{ height: "75vh" }}>
<Bar data={data} options={options} />
</div>
)}
</div>
</>
);
};

202
src/views/Charts/RevenueCharts.js
View File

@ -1,26 +1,198 @@
import { isAutheticated } from "../../auth.js";
import React, { useEffect, useState } from "react";
import { isAutheticated } from "src/auth";
import axios from "axios";
import { Bar } from "react-chartjs-2";
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
} from "chart.js";
ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
);
const RevenueCharts = () => {
const token = isAutheticated();
const [ordersData, setOrdersData] = useState([]);
const [filteredOrders, setFilteredOrders] = useState([]);
const [selectedYear, setSelectedYear] = useState(new Date().getFullYear());
const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth() + 1);
useEffect(() => {
function getOrder() {
axios
.get(`/api/order/getAll/`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
setOrdersData(res.data.order);
// console.log(res.data.order);
})
.catch((err) => {
console.log(err);
});
}
getOrder();
}, []);
useEffect(() => {
// Filter orders based on selected year and month
const filtered = ordersData.filter((order) => {
const createdAt = new Date(order.createdAt);
return (
createdAt.getFullYear() === selectedYear &&
createdAt.getMonth() + 1 === selectedMonth
);
});
// Sort filtered orders by date in ascending order
filtered.sort((a, b) => {
const dateA = new Date(a.createdAt);
const dateB = new Date(b.createdAt);
return dateA - dateB;
});
setFilteredOrders(filtered);
}, [ordersData, selectedYear, selectedMonth]); // Update filtered orders when orders data, year, or month changes
// Extract unique dates from filtered orders
const uniqueDates = Array.from(
new Set(filteredOrders.map((order) => order.createdAt.split("T")[0]))
);
// console.log(uniqueDates);
// console.log(filteredOrders);
// Prepare data for chart
const data = {
labels: uniqueDates,
datasets: [
{
label: "Total Amount",
data: uniqueDates.map((date) => {
// Sum total amounts for each date
return filteredOrders
.filter((order) => order.createdAt.includes(date))
.reduce((total, order) => total + order.total_amount, 0);
}),
backgroundColor: "rgba(43, 63, 229, 0.8)",
borderRadius: 5,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
display: false,
},
title: {
display: true,
text: "Revenue Chart",
},
},
scales: {
x: {
title: {
display: true,
text: "Date",
},
},
y: {
beginAtZero: true,
title: {
display: true,
text: "Total Amount",
},
ticks: {
stepSize: 1000, // Adjust step size as needed
},
},
},
};
// Convert month number to string
const monthToString = (monthNumber) => {
const months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
return months[monthNumber - 1];
};
// Determine the lowest year found in the ordersData
const lowestYear = Math.min(
...ordersData.map((order) => new Date(order.createdAt).getFullYear())
);
// Generate an array of years from the lowest year to the current year
const years = Array.from(
{ length: new Date().getFullYear() - lowestYear + 1 },
(_, index) => lowestYear + index
);
return (
<div className="w-80vw">
{token ? (
<iframe
style={{
background: "#F1F5F4",
border: "none",
borderRadius: "2px",
boxShadow: "0 2px 10px 0 rgba(70, 76, 79, .2)",
width: "80vw",
height: "85vh",
}}
src="https://charts.mongodb.com/charts-smellica-hqyad/embed/dashboards?id=35dc4a1b-72dd-4ad1-bf2e-78318d261aa0&theme=light&autoRefresh=true&maxDataAge=3600&showTitleAndDesc=true&scalingWidth=scale&scalingHeight=scale"
></iframe>
<>
<div style={{ display: "flex" }}>
<div style={{ marginRight: "20px" }}>
<label htmlFor="year">Select Year:</label>
<select
id="year"
value={selectedYear}
onChange={(e) => setSelectedYear(parseInt(e.target.value))}
>
{years.map((year) => (
<option key={year} value={year}>
{year}
</option>
))}
</select>
</div>
<div>
<label htmlFor="month">Select Month:</label>
<select
id="month"
value={selectedMonth}
onChange={(e) => setSelectedMonth(parseInt(e.target.value))}
>
{[...Array(12).keys()].map((month) => (
<option key={month + 1} value={month + 1}>
{monthToString(month + 1)}
</option>
))}
</select>
</div>
</div>
<div style={{ textAlign: "center" }}>
{filteredOrders.length === 0 ? (
<p>No data available</p>
) : (
<h3>No charts available</h3>
<div style={{ height: "75vh" }}>
<Bar data={data} options={options} />
</div>
)}
</div>
</>
);
};

203
src/views/Charts/Staterevenue.js
View File

@ -1,26 +1,199 @@
import { isAutheticated } from "../../auth.js";
import React, { useEffect, useState } from "react";
import { isAutheticated } from "src/auth";
import axios from "axios";
import { Bar } from "react-chartjs-2";
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
} from "chart.js";
ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
);
const StateRevenueCharts = () => {
const token = isAutheticated();
const [ordersData, setOrdersData] = useState([]);
const [filteredOrders, setFilteredOrders] = useState([]);
const [selectedYear, setSelectedYear] = useState(new Date().getFullYear());
const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth() + 1);
useEffect(() => {
function getOrder() {
axios
.get(`/api/order/getAll/`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
setOrdersData(res.data.order);
// console.log(res.data.order);
})
.catch((err) => {
console.log(err);
});
}
getOrder();
}, []);
useEffect(() => {
// Filter orders based on selected year and month
const filtered = ordersData.filter((order) => {
const createdAt = new Date(order.createdAt);
return (
createdAt.getFullYear() === selectedYear &&
createdAt.getMonth() + 1 === selectedMonth
);
});
// Sort filtered orders by date in ascending order
filtered.sort((a, b) => {
const dateA = new Date(a.createdAt);
const dateB = new Date(b.createdAt);
return dateA - dateB;
});
setFilteredOrders(filtered);
}, [ordersData, selectedYear, selectedMonth]); // Update filtered orders when orders data, year, or month changes
const uniquestate = [
...new Set(
filteredOrders.map((item) => item.shippingInfo.state)
),
];
// console.log(uniquestate);
// console.log(filteredOrders);
// Prepare data for chart
const data = {
labels: uniquestate, // Use unique product names as labels
datasets: [
{
label: "Total Amount",
data: uniquestate.map((state) => {
// Sum total amounts for each date
return filteredOrders
.filter((order) => order.shippingInfo.state.includes(state))
.reduce((total, order) => total + order.total_amount, 0);
}),
backgroundColor: "rgba(43, 63, 229, 0.8)",
borderRadius: 5,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
display: false,
},
title: {
display: true,
text: "Revenue Chart",
},
},
scales: {
x: {
title: {
display: true,
text: "State",
},
},
y: {
beginAtZero: true,
title: {
display: true,
text: "Total Amount",
},
ticks: {
stepSize: 1, // Adjust step size as needed
},
},
},
};
// Convert month number to string
const monthToString = (monthNumber) => {
const months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
return months[monthNumber - 1];
};
// Determine the lowest year found in the ordersData
const lowestYear = Math.min(
...ordersData.map((order) => new Date(order.createdAt).getFullYear())
);
// Generate an array of years from the lowest year to the current year
const years = Array.from(
{ length: new Date().getFullYear() - lowestYear + 1 },
(_, index) => lowestYear + index
);
return (
<div className="w-80vw">
{token ? (
<iframe
style={{
background: "#F1F5F4",
border: "none",
borderRadius: "2px",
boxShadow: "0 2px 10px 0 rgba(70, 76, 79, .2)",
width: "80vw",
height: "85vh",
}}
src="https://charts.mongodb.com/charts-smellica-hqyad/embed/dashboards?id=3c517c32-541f-4bf5-ad2c-3fed5db1d1c9&theme=light&autoRefresh=true&maxDataAge=3600&showTitleAndDesc=true&scalingWidth=scale&scalingHeight=scale"
></iframe>
<>
<div style={{ display: "flex" }}>
<div style={{ marginRight: "20px" }}>
<label htmlFor="year">Select Year:</label>
<select
id="year"
value={selectedYear}
onChange={(e) => setSelectedYear(parseInt(e.target.value))}
>
{years.map((year) => (
<option key={year} value={year}>
{year}
</option>
))}
</select>
</div>
<div>
<label htmlFor="month">Select Month:</label>
<select
id="month"
value={selectedMonth}
onChange={(e) => setSelectedMonth(parseInt(e.target.value))}
>
{[...Array(12).keys()].map((month) => (
<option key={month + 1} value={month + 1}>
{monthToString(month + 1)}
</option>
))}
</select>
</div>
</div>
<div style={{ textAlign: "center" }}>
{filteredOrders.length === 0 ? (
<p>No data available</p>
) : (
<h3>No charts available</h3>
<div style={{ height: "75vh" }}>
<Bar data={data} options={options} />
</div>
)}
</div>
</>
);
};

203
src/views/Charts/UserChart.js
View File

@ -1,27 +1,200 @@
import { isAutheticated } from "../../auth.js";
import React, { useEffect, useState } from "react";
import { isAutheticated } from "src/auth";
import axios from "axios";
import { Bar } from "react-chartjs-2";
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
} from "chart.js";
ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
);
const UserCharts = () => {
const token = isAutheticated();
const [userData, setUsers] = useState([]);
const [filteredUsers, setfilteredUsers] = useState([]);
const [selectedYear, setSelectedYear] = useState(new Date().getFullYear());
const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth() + 1);
useEffect(() => {
function getOrder() {
axios
.get(`/api/v1/admin/users`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
setUsers(res.data.users);
// console.log(res.data.users);
})
.catch((err) => {
console.log(err);
});
}
getOrder();
}, []);
useEffect(() => {
// Filter orders based on selected year and month
const filtered = userData.filter((order) => {
const createdAt = new Date(order.createdAt);
return (
createdAt.getFullYear() === selectedYear &&
createdAt.getMonth() + 1 === selectedMonth
);
});
// Sort filtered orders by date in ascending order
filtered.sort((a, b) => {
const dateA = new Date(a.createdAt);
const dateB = new Date(b.createdAt);
return dateA - dateB;
});
setfilteredUsers(filtered);
}, [userData, selectedYear, selectedMonth]); // Update filtered orders when orders data, year, or month changes
// Extract unique dates from filtered orders
const uniqueDates = Array.from(
new Set(filteredUsers.map((order) => order.createdAt.split("T")[0]))
);
// console.log(uniqueDates);
// console.log(filteredUsers);
// Prepare data for chart
const data = {
labels: uniqueDates,
datasets: [
{
label: "No of Amounts",
data: uniqueDates.map((date) => {
// Sum total amounts for each date
return filteredUsers
.filter((order) => order.createdAt.includes(date))
.length;
}),
backgroundColor: "rgba(43, 63, 229, 0.8)",
borderRadius: 5,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
display: false,
},
title: {
display: true,
text: "User Chart",
},
},
scales: {
x: {
title: {
display: true,
text: "Date",
},
},
y: {
beginAtZero: true,
title: {
display: true,
text: "No of Users",
},
ticks: {
stepSize: 1, // Adjust step size as needed
},
},
},
};
// Convert month number to string
const monthToString = (monthNumber) => {
const months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
return months[monthNumber - 1];
};
// Determine the lowest year found in the userData
const lowestYear = Math.min(
...userData.map((order) => new Date(order.createdAt).getFullYear())
);
// Generate an array of years from the lowest year to the current year
const years = Array.from(
{ length: new Date().getFullYear() - lowestYear + 1 },
(_, index) => lowestYear + index
);
return (
<div className="w-80vw">
{token ? (
<iframe
style={{
background: "#F1F5F4",
border: "none",
borderRadius: "2px",
boxShadow: "0 2px 10px 0 rgba(70, 76, 79, .2)",
width: "80vw",
height: "85vh",
}}
src="https://charts.mongodb.com/charts-smellica-hqyad/embed/dashboards?id=9ac07f5d-4eec-4d4a-8bbb-3b0f76ab2869&theme=light&autoRefresh=true&maxDataAge=3600&showTitleAndDesc=true&scalingWidth=scale&scalingHeight=scale"
></iframe>
<>
<div style={{ display: "flex" }}>
<div style={{ marginRight: "20px" }}>
<label htmlFor="year">Select Year:</label>
<select
id="year"
value={selectedYear}
onChange={(e) => setSelectedYear(parseInt(e.target.value))}
>
{years.map((year) => (
<option key={year} value={year}>
{year}
</option>
))}
</select>
</div>
<div>
<label htmlFor="month">Select Month:</label>
<select
id="month"
value={selectedMonth}
onChange={(e) => setSelectedMonth(parseInt(e.target.value))}
>
{[...Array(12).keys()].map((month) => (
<option key={month + 1} value={month + 1}>
{monthToString(month + 1)}
</option>
))}
</select>
</div>
</div>
<div style={{ textAlign: "center" }}>
{filteredUsers.length === 0 ? (
<p>No data available</p>
) : (
<h3>No charts available</h3>
<div style={{ height: "75vh" }}>
<Bar data={data} options={options} />
</div>
)}
</div>
</>
);
};
export default UserCharts;

1
src/views/Content/editPrivacyPolicy.js
View File

@ -36,7 +36,6 @@ export default function EditPrivacyPolicy() {
});
if (response.status === 200) {
// console.log(response);
setContent(response?.data?.privacyAndPolicy[0]?.privacyAndPolicyContent);
setId(response?.data?.privacyAndPolicy[0]?._id);
setOlderContent(

403
src/views/Home/editPanel1.js Normal file
View File

@ -0,0 +1,403 @@
import { useEffect, useState } from "react";
import Button from "@material-ui/core/Button";
import { Link } from "react-router-dom";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import axios from "axios";
import { isAutheticated } from "src/auth";
const TOOLBAR_OPTIONS = [
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ font: [] }],
[{ list: "ordered" }, { list: "bullet" }],
["bold", "italic", "underline", "strike"],
[{ color: [] }, { background: [] }],
[{ align: [] }],
[{ script: "super" }, { script: "sub" }],
["undo", "redo"],
];
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
import DeleteSharpIcon from "@mui/icons-material/DeleteSharp";
import {
Box,
TextField,
Checkbox,
FormControlLabel
} from "@mui/material";
const EditPanel1 = () => {
const token = isAutheticated();
const [loading, setLoading] = useState(false);
const [displayPanel, setDisplayPanel] = useState(false);
const [content, setContent] = useState("");
const [olderContent, setOlderContent] = useState("");
const [image, setimage] = useState(null);
const [title, setTitle] = useState("");
const [error, setError] = useState("");
const [newUpdatedImages, setNewUpdatedImages] = useState(null);
const [Img, setImg] = useState(true);
const [id, setId] = useState(null);
const handleContentChange = (content, delta, source, editor) => {
setContent(editor.getHTML());
};
//get Blogdata
const getPanel = async () => {
try {
const res = await axios.get(`/api/panel/panel1/get`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
});
setTitle(res?.data?.panel1[0]?.title);
setimage(res?.data?.panel1[0]?.image);
setContent(res?.data?.panel1[0]?.content);
setOlderContent(res?.data?.panel1[0]?.content);
setDisplayPanel(res?.data?.panel1[0]?.displayPanel);
setId(res?.data?.panel1[0]?._id);
setImg(false);
} catch (err) {
swal({
title: "Error",
text: "Unable to fetch the panel content",
icon: "error",
button: "Retry",
dangerMode: true,
});
}
};
useEffect(() => {
getPanel();
}, []);
const handleFileChange = (e) => {
const files = e.target.files;
// Reset error state
setError("");
// Check if more than one image is selected
if (files.length > 1 || Img === false || newUpdatedImages !== null) {
setError("You can only upload one image.");
return;
}
// Check file types and append to selectedFiles
const allowedTypes = ["image/jpeg", "image/png", "image/jpg"];
const file = files[0]; // Only one file is selected, so we get the first one
if (allowedTypes.includes(file.type)) {
setNewUpdatedImages(file);
setimage(file);
} else {
setError("Please upload only PNG, JPEG, or JPG files.");
}
};
const handelDelete = async (public_id) => {
const ary = public_id.split("/");
setNewUpdatedImages(null);
const res = await axios.delete(
`/api/v1/blog/deleteImage/jatinMor/Blog/${ary[2]}`,
{
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
}
);
if (res) {
setimage(null);
setImg(true);
}
};
const addContent = async () => {
const formData = new FormData();
formData.append("title", title);
formData.append("content", content);
formData.append("displayPanel", displayPanel);
formData.append("image", image);
const response = await axios.post(
"/api/panel/panel1/add",
formData,
{
headers: {
Authorization: `Bearer ${token}`,
},
}
);
if (response.status == 201) {
swal({
title: "Congratulations!!",
text: "Panel 1 added successfully!",
icon: "success",
button: "OK",
});
}
};
const updateContent = () => {
if (title === "" || content === "") {
swal({
title: "Warning",
text: "Fill all mandatory fields",
icon: "error",
button: "Close",
dangerMode: true,
});
return;
}
setLoading(true);
const formData = new FormData();
formData.append("title", title);
formData.append("content", content);
formData.append("displayPanel", displayPanel);
if (newUpdatedImages !== null) {
formData.append("image", newUpdatedImages);
}
axios
.patch(`/api/panel/panel1/update/${id}`, formData, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "multipart/form-data",
"Access-Control-Allow-Origin": "*",
},
})
.then((res) => {
swal({
title: "Updated",
text: " Updated successfully!",
icon: "success",
button: "ok",
});
setLoading(false);
})
.catch((err) => {
setLoading(false);
const message = err.response?.data?.message
? err.response?.data?.message
: "Something went wrong!";
swal({
title: "Warning",
text: message,
icon: "error",
button: "Retry",
dangerMode: true,
});
});
};
const handleSaveClick = async () => {
if (olderContent.length === 0) {
addContent();
} else {
updateContent();
}
// // Reload terms and conditions
// await getPrivacyPolicy();
};
const handleChange = (event) => {
setDisplayPanel(event.target.checked);
};
return (
<div className="container">
<div className="row">
<div className="col-12">
<div
className="
page-title-box
d-flex
align-items-center
justify-content-between
"
>
<div style={{ fontSize: "22px" }} className="fw-bold">
Panel 1
</div>
<div style={{ display: "flex", gap: "1rem" }}>
<h4 className="mb-0"></h4>
</div>
<div className="page-title-right">
<FormControlLabel
control={
<Checkbox
checked={displayPanel}
onChange={handleChange}
inputProps={{ 'aria-label': 'controlled' }}
/>
}
label="Display Panel"
/>
<Button
variant="contained"
color="primary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
marginRight: "5px",
}}
onClick={() => handleSaveClick()}
disabled={loading}
>
{"Save"}
</Button>
<Link to="/home">
<Button
variant="contained"
color="secondary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
}}
>
Back
</Button>
</Link>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
<div className="card h-100">
<div className="card-body px-5">
<div className="mb-3">
<label htmlFor="title" className="form-label">
Panel 1 Title
</label>
<input
type="text"
className="form-control"
id="name"
placeholder="Enter title"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
</div>
<div>
<label htmlFor="image" className="form-label">
Panel Image
</label>
<Box>
<label htmlFor="upload-Image">
<TextField
style={{
display: "none",
width: "350px",
height: "350px",
borderRadius: "10%",
}}
fullWidth
id="upload-Image"
type="file"
accept=".jpg , .png ,.jpeg"
label="file"
multiple
variant="outlined"
onChange={(e) => handleFileChange(e)}
/>
<Box
style={{ borderRadius: "10%" }}
sx={{
margin: "1rem 0rem",
cursor: "pointer",
width: "100px",
height: "100px",
border: "2px solid grey",
// borderRadius: '50%',
"&:hover": {
background: "rgba(112,112,112,0.5)",
},
}}
>
<CloudUploadIcon
style={{
color: "grey",
margin: "auto",
fontSize: "5rem",
marginLeft: "0.5rem",
marginTop: "0.5rem",
}}
fontSize="large"
/>
</Box>
</label>
</Box>
{error && <p style={{ color: "red" }}>{error}</p>}
<div>
<strong className="fs-6 fst-italic">
*You cannot upload more than 1 image
</strong>
</div>
<Box style={{ display: "flex" }}>
{ image !== null ? (
<Box marginRight={"2rem"}>
<img
src={image?.url || URL.createObjectURL(newUpdatedImages) || null}
alt="Panel Image"
style={{
width: 350,
height: 270,
marginBottom: "1rem",
}}
/>
<DeleteSharpIcon
onClick={() => handelDelete(image?.public_id)}
fontSize="small"
sx={{
color: "white",
position: "absolute",
cursor: "pointer",
padding: "0.2rem",
background: "black",
borderRadius: "50%",
}}
/>
</Box>
) : null}
</Box>
</div>
</div>
</div>
</div>
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
<div className="card h-100">
<div className="card-body px-5">
<label>Panel Content</label>
<ReactQuill
theme="snow"
value={content}
onChange={handleContentChange}
modules={{ toolbar: TOOLBAR_OPTIONS }}
/>
</div>
</div>
</div>
</div>
</div>
);
};
export default EditPanel1;

409
src/views/Home/editPanel2.js Normal file
View File

@ -0,0 +1,409 @@
import { useEffect, useState } from "react";
import Button from "@material-ui/core/Button";
import { Link } from "react-router-dom";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import axios from "axios";
import { isAutheticated } from "src/auth";
const TOOLBAR_OPTIONS = [
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ font: [] }],
[{ list: "ordered" }, { list: "bullet" }],
["bold", "italic", "underline", "strike"],
[{ color: [] }, { background: [] }],
[{ align: [] }],
[{ script: "super" }, { script: "sub" }],
["undo", "redo"],
];
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
import DeleteSharpIcon from "@mui/icons-material/DeleteSharp";
import {
Box,
TextField,
Checkbox,
FormControlLabel
} from "@mui/material";
const EditPanel2 = () => {
const token = isAutheticated();
const [loading, setLoading] = useState(false);
const [displayPanel, setDisplayPanel] = useState(false);
const [content, setContent] = useState("");
const [olderContent, setOlderContent] = useState("");
const [image, setimage] = useState("");
const [title, setTitle] = useState("");
const [error, setError] = useState("");
const [newUpdatedImages, setNewUpdatedImages] = useState(null);
const [Img, setImg] = useState(true);
const [id, setId] = useState(null);
const handleContentChange = (content, delta, source, editor) => {
setContent(editor.getHTML());
};
//get panel data
const getPanel = async () => {
try {
const res = await axios.get(`/api/panel/panel2/get`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
});
if (res?.status === 200) {
setTitle(res?.data?.panel2[0]?.title);
setimage(res?.data?.panel2[0]?.image);
setContent(res?.data?.panel2[0]?.content);
setOlderContent(res?.data?.panel2[0]?.content);
setDisplayPanel(res?.data?.panel2[0]?.displayPanel);
setId(res?.data?.panel2[0]?._id);
setImg(false);
}
} catch (err) {
console.error(err)
swal({
title: "Error",
text: "Unable to fetch the panel content",
icon: "error",
button: "Retry",
dangerMode: true,
});
}
};
useEffect(() => {
getPanel();
}, []);
const handleFileChange = (e) => {
const files = e.target.files;
// Reset error state
setError("");
// Check if more than one image is selected
if (files.length > 1 || newUpdatedImages !== null) {
setError("You can only upload one image.");
return;
}
// Check file types and append to selectedFiles
const allowedTypes = ["image/jpeg", "image/png", "image/jpg"];
const file = files[0]; // Only one file is selected, so we get the first one
if (allowedTypes.includes(file.type)) {
setNewUpdatedImages(file);
setimage(file);
} else {
setError("Please upload only PNG, JPEG, or JPG files.");
}
};
const handelDelete = async (public_id) => {
const ary = public_id.split("/");
setNewUpdatedImages(null);
const res = await axios.delete(
`/api/v1/blog/deleteImage/jatinMor/Blog/${ary[2]}`,
{
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
}
);
if (res) {
setimage(null);
setImg(true);
}
};
const addContent = async () => {
const formData = new FormData();
formData.append("title", title);
formData.append("content", content);
formData.append("displayPanel", displayPanel);
formData.append("image", image);
const response = await axios.post(
"/api/panel/panel2/add",
formData,
{
headers: {
Authorization: `Bearer ${token}`,
},
}
);
if (response.status == 201) {
swal({
title: "Congratulations!!",
text: "Panel 2 added successfully!",
icon: "success",
button: "OK",
});
}
};
const updateContent = () => {
if (title === "" || content === "") {
swal({
title: "Warning",
text: "Fill all mandatory fields",
icon: "error",
button: "Close",
dangerMode: true,
});
return;
}
setLoading(true);
const formData = new FormData();
formData.append("title", title);
formData.append("content", content);
formData.append("displayPanel", displayPanel);
if (newUpdatedImages !== null) {
formData.append("image", newUpdatedImages);
}
axios
.patch(`/api/panel/panel2/update/${id}`, formData, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "multipart/form-data",
"Access-Control-Allow-Origin": "*",
},
})
.then((res) => {
swal({
title: "Updated",
text: " Updated successfully!",
icon: "success",
button: "ok",
});
setLoading(false);
})
.catch((err) => {
setLoading(false);
const message = err.response?.data?.message
? err.response?.data?.message
: "Something went wrong!";
swal({
title: "Warning",
text: message,
icon: "error",
button: "Retry",
dangerMode: true,
});
});
};
const handleSaveClick = async () => {
console.log(olderContent)
if (olderContent?.length === 0 || olderContent===undefined) {
addContent();
} else {
updateContent();
}
// // Reload terms and conditions
// await getPrivacyPolicy();
};
const handleChange = (event) => {
setDisplayPanel(event.target.checked);
};
return (
<div className="container">
<div className="row">
<div className="col-12">
<div
className="
page-title-box
d-flex
align-items-center
justify-content-between
"
>
<div style={{ fontSize: "22px" }} className="fw-bold">
Panel 2
</div>
<div style={{ display: "flex", gap: "1rem" }}>
<h4 className="mb-0"></h4>
</div>
<div className="page-title-right">
<FormControlLabel
control={
<Checkbox
checked={displayPanel}
onChange={handleChange}
inputProps={{ 'aria-label': 'controlled' }}
/>
}
label="Display Panel"
/>
<Button
variant="contained"
color="primary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
marginRight: "5px",
}}
onClick={() => handleSaveClick()}
disabled={loading}
>
{"Save"}
</Button>
<Link to="/home">
<Button
variant="contained"
color="secondary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
}}
>
Back
</Button>
</Link>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
<div className="card h-100">
<div className="card-body px-5">
<div className="mb-3">
<label htmlFor="title" className="form-label">
Panel 2 Title
</label>
<input
type="text"
className="form-control"
id="name"
placeholder="Enter title"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
</div>
<div>
<label htmlFor="image" className="form-label">
Panel Image
</label>
<Box>
<label htmlFor="upload-Image">
<TextField
style={{
display: "none",
width: "350px",
height: "350px",
borderRadius: "10%",
}}
fullWidth
id="upload-Image"
type="file"
accept=".jpg , .png ,.jpeg"
label="file"
multiple
variant="outlined"
onChange={(e) => handleFileChange(e)}
/>
<Box
style={{ borderRadius: "10%" }}
sx={{
margin: "1rem 0rem",
cursor: "pointer",
width: "100px",
height: "100px",
border: "2px solid grey",
// borderRadius: '50%',
"&:hover": {
background: "rgba(112,112,112,0.5)",
},
}}
>
<CloudUploadIcon
style={{
color: "grey",
margin: "auto",
fontSize: "5rem",
marginLeft: "0.5rem",
marginTop: "0.5rem",
}}
fontSize="large"
/>
</Box>
</label>
</Box>
{error && <p style={{ color: "red" }}>{error}</p>}
<div>
<strong className="fs-6 fst-italic">
*You cannot upload more than 1 image
</strong>
</div>
<Box style={{ display: "flex" }}>
{image && (
<Box marginRight={"2rem"}>
<img
src={newUpdatedImages ? URL.createObjectURL(newUpdatedImages) : image ? image?.url : ""}
alt="Panel Image"
style={{
width: 350,
height: 270,
marginBottom: "1rem",
}}
/>
<DeleteSharpIcon
onClick={() => handelDelete(image?.public_id)}
fontSize="small"
sx={{
color: "white",
position: "absolute",
cursor: "pointer",
padding: "0.2rem",
background: "black",
borderRadius: "50%",
}}
/>
</Box>
)}
</Box>
</div>
</div>
</div>
</div>
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
<div className="card h-100">
<div className="card-body px-5">
<label>Panel Content</label>
<ReactQuill
theme="snow"
value={content}
onChange={handleContentChange}
modules={{ toolbar: TOOLBAR_OPTIONS }}
/>
</div>
</div>
</div>
</div>
</div>
);
};
export default EditPanel2;

407
src/views/Home/editPanel3.js Normal file
View File

@ -0,0 +1,407 @@
import { useEffect, useState } from "react";
import Button from "@material-ui/core/Button";
import { Link } from "react-router-dom";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import axios from "axios";
import { isAutheticated } from "src/auth";
const TOOLBAR_OPTIONS = [
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ font: [] }],
[{ list: "ordered" }, { list: "bullet" }],
["bold", "italic", "underline", "strike"],
[{ color: [] }, { background: [] }],
[{ align: [] }],
[{ script: "super" }, { script: "sub" }],
["undo", "redo"],
];
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
import DeleteSharpIcon from "@mui/icons-material/DeleteSharp";
import {
Box,
TextField,
Checkbox,
FormControlLabel
} from "@mui/material";
const EditPanel3 = () => {
const token = isAutheticated();
const [loading, setLoading] = useState(false);
const [displayPanel, setDisplayPanel] = useState(false);
const [content, setContent] = useState("");
const [olderContent, setOlderContent] = useState("");
const [image, setimage] = useState("");
const [title, setTitle] = useState("");
const [error, setError] = useState("");
const [newUpdatedImages, setNewUpdatedImages] = useState(null);
const [Img, setImg] = useState(true);
const [id, setId] = useState(null);
const handleContentChange = (content, delta, source, editor) => {
setContent(editor.getHTML());
};
//get Blogdata
const getPanel = async () => {
try {
const res = await axios.get(`/api/panel/panel3/get`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
});
if (res?.status === 200) {
setTitle(res?.data?.panel3[0]?.title);
setimage(res?.data?.panel3[0]?.image);
setContent(res?.data?.panel3[0]?.content);
setOlderContent(res?.data?.panel3[0]?.content);
setDisplayPanel(res?.data?.panel3[0]?.displayPanel);
setId(res?.data?.panel3[0]?._id);
setImg(false);
}
} catch (err) {
console.error(err)
swal({
title: "Error",
text: "Unable to fetch the panel content",
icon: "error",
button: "Retry",
dangerMode: true,
});
}
};
useEffect(() => {
getPanel();
}, []);
const handleFileChange = (e) => {
const files = e.target.files;
// Reset error state
setError("");
// Check if more than one image is selected
if (files.length > 1 || Img === false || newUpdatedImages !== null) {
setError("You can only upload one image.");
return;
}
// Check file types and append to selectedFiles
const allowedTypes = ["image/jpeg", "image/png", "image/jpg"];
const file = files[0]; // Only one file is selected, so we get the first one
if (allowedTypes.includes(file.type)) {
setNewUpdatedImages(file);
setimage(file);
} else {
setError("Please upload only PNG, JPEG, or JPG files.");
}
};
const handelDelete = async (public_id) => {
const ary = public_id.split("/");
setNewUpdatedImages(null);
const res = await axios.delete(
`/api/v1/blog/deleteImage/jatinMor/Blog/${ary[2]}`,
{
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
}
);
if (res) {
setimage(null);
setImg(true);
}
};
const addContent = async () => {
const formData = new FormData();
formData.append("title", title);
formData.append("content", content);
formData.append("displayPanel", displayPanel);
formData.append("image", image);
const response = await axios.post(
"/api/panel/panel3/add",
formData,
{
headers: {
Authorization: `Bearer ${token}`,
},
}
);
if (response.status == 201) {
swal({
title: "Congratulations!!",
text: "Panel 3 added successfully!",
icon: "success",
button: "OK",
});
}
};
const updateContent = () => {
if (title === "" || content === "") {
swal({
title: "Warning",
text: "Fill all mandatory fields",
icon: "error",
button: "Close",
dangerMode: true,
});
return;
}
setLoading(true);
const formData = new FormData();
formData.append("title", title);
formData.append("content", content);
formData.append("displayPanel", displayPanel);
if (newUpdatedImages !== null) {
formData.append("image", newUpdatedImages);
}
axios
.patch(`/api/panel/panel3/update/${id}`, formData, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "multipart/form-data",
"Access-Control-Allow-Origin": "*",
},
})
.then((res) => {
swal({
title: "Updated",
text: " Updated successfully!",
icon: "success",
button: "ok",
});
setLoading(false);
})
.catch((err) => {
setLoading(false);
const message = err.response?.data?.message
? err.response?.data?.message
: "Something went wrong!";
swal({
title: "Warning",
text: message,
icon: "error",
button: "Retry",
dangerMode: true,
});
});
};
const handleSaveClick = async () => {
if (olderContent.length === 0) {
addContent();
} else {
updateContent();
}
// // Reload terms and conditions
// await getPrivacyPolicy();
};
const handleChange = (event) => {
setDisplayPanel(event.target.checked);
};
return (
<div className="container">
<div className="row">
<div className="col-12">
<div
className="
page-title-box
d-flex
align-items-center
justify-content-between
"
>
<div style={{ fontSize: "22px" }} className="fw-bold">
Panel 3
</div>
<div style={{ display: "flex", gap: "1rem" }}>
<h4 className="mb-0"></h4>
</div>
<div className="page-title-right">
<FormControlLabel
control={
<Checkbox
checked={displayPanel}
onChange={handleChange}
inputProps={{ 'aria-label': 'controlled' }}
/>
}
label="Display Panel"
/>
<Button
variant="contained"
color="primary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
marginRight: "5px",
}}
onClick={() => handleSaveClick()}
disabled={loading}
>
{"Save"}
</Button>
<Link to="/home">
<Button
variant="contained"
color="secondary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
}}
>
Back
</Button>
</Link>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
<div className="card h-100">
<div className="card-body px-5">
<div className="mb-3">
<label htmlFor="title" className="form-label">
Panel 3 Title
</label>
<input
type="text"
className="form-control"
id="name"
placeholder="Enter title"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
</div>
<div>
<label htmlFor="image" className="form-label">
Panel Image
</label>
<Box>
<label htmlFor="upload-Image">
<TextField
style={{
display: "none",
width: "350px",
height: "350px",
borderRadius: "10%",
}}
fullWidth
id="upload-Image"
type="file"
accept=".jpg , .png ,.jpeg"
label="file"
multiple
variant="outlined"
onChange={(e) => handleFileChange(e)}
/>
<Box
style={{ borderRadius: "10%" }}
sx={{
margin: "1rem 0rem",
cursor: "pointer",
width: "100px",
height: "100px",
border: "2px solid grey",
// borderRadius: '50%',
"&:hover": {
background: "rgba(112,112,112,0.5)",
},
}}
>
<CloudUploadIcon
style={{
color: "grey",
margin: "auto",
fontSize: "5rem",
marginLeft: "0.5rem",
marginTop: "0.5rem",
}}
fontSize="large"
/>
</Box>
</label>
</Box>
{error && <p style={{ color: "red" }}>{error}</p>}
<div>
<strong className="fs-6 fst-italic">
*You cannot upload more than 1 image
</strong>
</div>
<Box style={{ display: "flex" }}>
{image && (
<Box marginRight={"2rem"}>
<img
src={newUpdatedImages ? URL.createObjectURL(newUpdatedImages) : image ? image?.url : ""}
alt="Panel Image"
style={{
width: 350,
height: 270,
marginBottom: "1rem",
}}
/>
<DeleteSharpIcon
onClick={() => handelDelete(image?.public_id)}
fontSize="small"
sx={{
color: "white",
position: "absolute",
cursor: "pointer",
padding: "0.2rem",
background: "black",
borderRadius: "50%",
}}
/>
</Box>
)}
</Box>
</div>
</div>
</div>
</div>
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
<div className="card h-100">
<div className="card-body px-5">
<label>Panel Content</label>
<ReactQuill
theme="snow"
value={content}
onChange={handleContentChange}
modules={{ toolbar: TOOLBAR_OPTIONS }}
/>
</div>
</div>
</div>
</div>
</div>
);
};
export default EditPanel3;

409
src/views/Home/editPanel4.js Normal file
View File

@ -0,0 +1,409 @@
import { useEffect, useState } from "react";
import Button from "@material-ui/core/Button";
import { Link } from "react-router-dom";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import axios from "axios";
import { isAutheticated } from "src/auth";
const TOOLBAR_OPTIONS = [
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ font: [] }],
[{ list: "ordered" }, { list: "bullet" }],
["bold", "italic", "underline", "strike"],
[{ color: [] }, { background: [] }],
[{ align: [] }],
[{ script: "super" }, { script: "sub" }],
["undo", "redo"],
];
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
import DeleteSharpIcon from "@mui/icons-material/DeleteSharp";
import {
Box,
TextField,
Checkbox,
FormControlLabel
} from "@mui/material";
const Editpanel4 = () => {
const token = isAutheticated();
const [loading, setLoading] = useState(false);
const [displayPanel, setDisplayPanel] = useState(false);
const [content, setContent] = useState("");
const [olderContent, setOlderContent] = useState("");
const [image, setimage] = useState("");
const [title, setTitle] = useState("");
const [error, setError] = useState("");
const [newUpdatedImages, setNewUpdatedImages] = useState(null);
const [Img, setImg] = useState(true);
const [id, setId] = useState(null);
const handleContentChange = (content, delta, source, editor) => {
setContent(editor.getHTML());
};
//get Blogdata
const getPanel = async () => {
try {
const res = await axios.get(`/api/panel/panel4/get`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
});
if (res?.status === 200) {
setTitle(res?.data?.panel4[0]?.title);
if(res?.data?.panel4[0]?.image!==undefined && res?.data?.panel4[0]?.image!==null){
setimage(res?.data?.panel4[0]?.image);
}
setContent(res?.data?.panel4[0]?.content);
setOlderContent(res?.data?.panel4[0]?.content);
setDisplayPanel(res?.data?.panel4[0]?.displayPanel);
setId(res?.data?.panel4[0]?._id);
setImg(false);
}
} catch (err) {
console.error(err)
swal({
title: "Error",
text: "Unable to fetch the panel content",
icon: "error",
button: "Retry",
dangerMode: true,
});
}
};
useEffect(() => {
getPanel();
}, []);
const handleFileChange = (e) => {
const files = e.target.files;
// Reset error state
setError("");
// Check if more than one image is selected
if (files.length > 1 || newUpdatedImages !== null) {
setError("You can only upload one image.");
return;
}
// Check file types and append to selectedFiles
const allowedTypes = ["image/jpeg", "image/png", "image/jpg"];
const file = files[0]; // Only one file is selected, so we get the first one
if (allowedTypes.includes(file.type)) {
setNewUpdatedImages(file);
setimage(file);
} else {
setError("Please upload only PNG, JPEG, or JPG files.");
}
};
const handelDelete = async (public_id) => {
const ary = public_id.split("/");
setNewUpdatedImages(null);
const res = await axios.delete(
`/api/v1/blog/deleteImage/jatinMor/Blog/${ary[2]}`,
{
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
}
);
if (res) {
setimage(null);
setImg(true);
}
};
const addContent = async () => {
const formData = new FormData();
formData.append("title", title);
formData.append("content", content);
formData.append("displayPanel", displayPanel);
formData.append("image", image);
const response = await axios.post(
"/api/panel/panel4/add",
formData,
{
headers: {
Authorization: `Bearer ${token}`,
},
}
);
if (response.status == 201) {
swal({
title: "Congratulations!!",
text: "Panel 4 added successfully!",
icon: "success",
button: "OK",
});
}
};
const updateContent = () => {
if (title === "" || content === "") {
swal({
title: "Warning",
text: "Fill all mandatory fields",
icon: "error",
button: "Close",
dangerMode: true,
});
return;
}
setLoading(true);
const formData = new FormData();
formData.append("title", title);
formData.append("content", content);
formData.append("displayPanel", displayPanel);
if (newUpdatedImages !== null) {
formData.append("image", newUpdatedImages);
}
axios
.patch(`/api/panel/panel4/update/${id}`, formData, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "multipart/form-data",
"Access-Control-Allow-Origin": "*",
},
})
.then((res) => {
swal({
title: "Updated",
text: " Updated successfully!",
icon: "success",
button: "ok",
});
setLoading(false);
})
.catch((err) => {
setLoading(false);
const message = err.response?.data?.message
? err.response?.data?.message
: "Something went wrong!";
swal({
title: "Warning",
text: message,
icon: "error",
button: "Retry",
dangerMode: true,
});
});
};
const handleSaveClick = async () => {
if (!olderContent) {
addContent();
} else {
updateContent();
}
// // Reload terms and conditions
// await getPrivacyPolicy();
};
const handleChange = (event) => {
setDisplayPanel(event.target.checked);
};
return (
<div className="container">
<div className="row">
<div className="col-12">
<div
className="
page-title-box
d-flex
align-items-center
justify-content-between
"
>
<div style={{ fontSize: "22px" }} className="fw-bold">
Panel 4
</div>
<div style={{ display: "flex", gap: "1rem" }}>
<h4 className="mb-0"></h4>
</div>
<div className="page-title-right">
<FormControlLabel
control={
<Checkbox
checked={displayPanel}
onChange={handleChange}
inputProps={{ 'aria-label': 'controlled' }}
/>
}
label="Display Panel"
/>
<Button
variant="contained"
color="primary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
marginRight: "5px",
}}
onClick={() => handleSaveClick()}
disabled={loading}
>
{"Save"}
</Button>
<Link to="/home">
<Button
variant="contained"
color="secondary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
}}
>
Back
</Button>
</Link>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
<div className="card h-100">
<div className="card-body px-5">
<div className="mb-3">
<label htmlFor="title" className="form-label">
Panel 4 Title
</label>
<input
type="text"
className="form-control"
id="name"
placeholder="Enter title"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
</div>
<div>
<label htmlFor="image" className="form-label">
Panel Image
</label>
<Box>
<label htmlFor="upload-Image">
<TextField
style={{
display: "none",
width: "350px",
height: "350px",
borderRadius: "10%",
}}
fullWidth
id="upload-Image"
type="file"
accept=".jpg , .png ,.jpeg"
label="file"
multiple
variant="outlined"
onChange={(e) => handleFileChange(e)}
/>
<Box
style={{ borderRadius: "10%" }}
sx={{
margin: "1rem 0rem",
cursor: "pointer",
width: "100px",
height: "100px",
border: "2px solid grey",
// borderRadius: '50%',
"&:hover": {
background: "rgba(112,112,112,0.5)",
},
}}
>
<CloudUploadIcon
style={{
color: "grey",
margin: "auto",
fontSize: "5rem",
marginLeft: "0.5rem",
marginTop: "0.5rem",
}}
fontSize="large"
/>
</Box>
</label>
</Box>
{error && <p style={{ color: "red" }}>{error}</p>}
<div>
<strong className="fs-6 fst-italic">
*You cannot upload more than 1 image
</strong>
</div>
<Box style={{ display: "flex" }}>
{image && (
<Box marginRight={"2rem"}>
<img
src={newUpdatedImages ? URL.createObjectURL(newUpdatedImages) : image ? image?.url : ""}
alt="Panel Image"
style={{
width: 350,
height: 270,
marginBottom: "1rem",
}}
/>
<DeleteSharpIcon
onClick={() => handelDelete(image?.public_id)}
fontSize="small"
sx={{
color: "white",
position: "absolute",
cursor: "pointer",
padding: "0.2rem",
background: "black",
borderRadius: "50%",
}}
/>
</Box>
)}
</Box>
</div>
</div>
</div>
</div>
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
<div className="card h-100">
<div className="card-body px-5">
<label>Panel Content</label>
<ReactQuill
theme="snow"
value={content}
onChange={handleContentChange}
modules={{ toolbar: TOOLBAR_OPTIONS }}
/>
</div>
</div>
</div>
</div>
</div>
);
};
export default Editpanel4;

165
src/views/Home/home.js Normal file
View File

@ -0,0 +1,165 @@
import {
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Typography,
} from "@mui/material";
import axios from "axios";
import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { isAutheticated } from "src/auth";
export default function Home() {
const [displayPanel1,setDisplayPanel1] = useState("Not Displayed");
const [displayPanel2,setDisplayPanel2] = useState("Not Displayed");
const [displayPanel3,setDisplayPanel3] = useState("Not Displayed");
const [displayPanel4,setDisplayPanel4] = useState("Not Displayed");
const [loading, setLoading] = useState(false);
let token = isAutheticated();
async function getPanelStatus(){
try {
setLoading(true)
let response1 = await axios.get('/api/panel/panel1/get', {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
}
})
let response2 = await axios.get('/api/panel/panel2/get', {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
}
});
let response3 = await axios.get('/api/panel/panel3/get', {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
}
});
let response4 = await axios.get('/api/panel/panel4/get', {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
}
});
if(response1 && response2 && response3 && response4){
if(response1?.data?.panel1[0]?.displayPanel){
setDisplayPanel1("Displayed")
}
if(response2?.data?.panel2[0]?.displayPanel){
setDisplayPanel2("Displayed");
}
if(response3?.data?.panel3[0]?.displayPanel){
setDisplayPanel3("Displayed");
}
if(response4?.data?.panel4[0]?.displayPanel){
setDisplayPanel4("Displayed");
}
setLoading(false);
}
} catch (error) {
console.error(error);
}
}
useEffect(()=>{
getPanelStatus()
},[])
const pages = [
{
name: "Panel 1",
action: "Edit",
path: "/home/panel-1",
status:displayPanel1
},
{
name: "Panel 2",
action: "Edit",
path: "/home/panel-2",
status:displayPanel2
},
{
name: "Panel 3",
action: "Edit",
path: "/home/panel-3",
status:displayPanel3
},
{
name: "Panel 4",
action: "Edit",
path: "/home/panel-4",
status:displayPanel4
},
];
return (
<div className="main-home">
<Typography variant="h6" fontWeight={"bold"}>
Home
</Typography>
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell style={{ fontWeight: "bold" }}>Page</TableCell>
<TableCell style={{ fontWeight: "bold" }} align="right">
Display Status
</TableCell>
<TableCell style={{ fontWeight: "bold" }} align="right">
Action
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{pages.map((row) => (
<TableRow
key={row.name}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell align="right" sx={{pr:4}}>
{loading ? "loading" : `${row.status}`}
</TableCell>
<TableCell align="right">
{" "}
<Link to={row.path}>
<button
style={{
color: "white",
marginRight: "1rem",
}}
type="button"
className="
btn btn-info btn-sm
waves-effect waves-light
btn-table
mt-1
mx-1
"
>
{row.action}
</button>
</Link>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</div>
);
}

20
src/views/Products/AddProduct.js
View File

@ -33,6 +33,7 @@ const AddProduct = () => {
const [category, setCategoryName] = useState("");
const [error, setError] = useState("");
const [selectedTax, setselectedTax] = useState();
const [product_Status, setproduct_Status] = useState("");
const [totalAmt, setTotalAmt] = useState(0);
const [gst_amount, setGst_amount] = useState(0);
@ -127,6 +128,7 @@ const AddProduct = () => {
category === "" ||
selectedTax === "" ||
gst_amount === "" ||
product_Status === "" ||
price === ""
) {
swal({
@ -147,6 +149,7 @@ const AddProduct = () => {
formData.append("category", category);
formData.append("total_amount", totalAmt);
formData.append("gst_amount", gst_amount);
formData.append("product_Status", product_Status);
formData.append("gst", selectedTax);
@ -525,6 +528,23 @@ const AddProduct = () => {
// onChange={(e) => setPrice(e.target.value)}
/>
</div>
<div className=" mb-3">
<label htmlFor="title" className="form-label">
Product Status *
</label>{" "}
<select
className="form-control"
name="product_Status"
id="product_Status"
value={product_Status}
onChange={(e) => setproduct_Status(e.target.value)}
>
<option value="">--Select--</option>
<option value="Active">Active</option>
<option value="Inactive">Inactive</option>
</select>
</div>
</div>
</div>
</div>

22
src/views/Products/EditProduct.js
View File

@ -35,6 +35,8 @@ const EditProduct = () => {
const [error, setError] = useState("");
const [initTax, setInitTax] = useState();
const [selectedTax, setselectedTax] = useState();
const [product_Status, setproduct_Status] = useState("");
const [totalAmt, setTotalAmt] = useState(0);
const [gst_amount, setGst_amount] = useState(0);
const [newUpdatedImages, setNewUpdatedImages] = useState([]);
@ -49,7 +51,6 @@ const EditProduct = () => {
},
})
.then((res) => {
// console.log(res?.data?.product?.gst?._id);
setName(res?.data?.product.name);
setDescription(res.data.product.description);
setProductImages(res.data.product.image);
@ -59,6 +60,7 @@ const EditProduct = () => {
setInitTax(res.data.product?.gst?._id);
setTotalAmt(res.data.product?.total_amount);
setGst_amount(res.data.product?.gst_amount);
setproduct_Status(res.data.product?.product_Status);
})
.catch((err) => {
swal({
@ -153,6 +155,7 @@ const EditProduct = () => {
selectedTax === "" ||
gst_amount === "" ||
price === "" ||
product_Status === "" ||
totalAmt === "" ||
gst_amount === "" ||
(productImages.length == 0 && newUpdatedImages.length == 0)
@ -175,6 +178,7 @@ const EditProduct = () => {
formData.append("category", category);
formData.append("total_amount", totalAmt);
formData.append("gst_amount", gst_amount);
formData.append("product_Status", product_Status);
formData.append("gst", initTax === "" ? selectedTax : initTax);
@ -583,6 +587,22 @@ const EditProduct = () => {
// onChange={(e) => setPrice(e.target.value)}
/>
</div>
<div className=" mb-3">
<label htmlFor="title" className="form-label">
Product Status *
</label>{" "}
<select
className="form-control"
name="product_Status"
id="product_Status"
value={product_Status}
onChange={(e) => setproduct_Status(e.target.value)}
>
<option value="">--Select--</option>
<option value="Active">Active</option>
<option value="Inactive">Inactive</option>
</select>
</div>
</div>
</div>
</div>

4
src/views/Products/ViewProduct.js
View File

@ -135,6 +135,10 @@ function ViewProduct() {
</tr>
{/* <tr><th>Product Time</th><td>{product?.time}</td></tr>
<tr><th>Location</th><td>{product?.location}</td></tr> */}
<tr>
<th>Product Status</th>
<td>{product?.product_Status}</td>
</tr>
<tr>
<th>Created On</th>
<td>

2
src/views/orders/CancelledOrders.js
View File

@ -155,7 +155,7 @@ function CancelledOrders() {
)}
</td>
<td className="text-start">
<span className="badge text-bg-success text-white">
<span className="badge text-bg-danger text-white">
{order?.orderStatus}
</span>
</td>

2
src/views/orders/DispatchedOrders.js
View File

@ -158,7 +158,7 @@ function DispatchedOrders() {
)}
</td>
<td className="text-start">
<span className="badge text-bg-success text-white">
<span className="badge text-bg-info text-white">
{order?.orderStatus}
</span>
</td>

2
src/views/orders/NewOrders.js
View File

@ -210,7 +210,7 @@ function NewOrders() {
)}
</td>
<td className="text-start">
<span className="badge text-bg-success text-white">
<span className="badge text-bg-primary text-white">
{order?.orderStatus}
</span>
</td>

2
src/views/orders/ProcessingOrders.js
View File

@ -159,7 +159,7 @@ function ProcessingOrders() {
)}
</td>
<td className="text-start">
<span className="badge text-bg-success text-white">
<span className="badge text-bg-warning text-white">
{order?.orderStatus}
</span>
</td>

148
src/views/orders/ViewOrders.js
View File

@ -171,6 +171,77 @@ function ViewOrders() {
// swal.close(); // Close the popup if canceled
// }
});
} else if (orderStatus === "cancelled") {
swal({
title: `Are you sure for ${orderStatus}?`,
icon: "warning",
content: {
element: "div",
attributes: {
innerHTML:
'<p>Reson for cancellation.?</p><input id="input1" placeholder="Enter Reason for Cancellation" className="swal2-input" style="margin:3px;height:40px;text-align:center;">',
},
},
buttons: {
Yes: { text: "Submit", value: true },
Cancel: { text: "Cancel", value: "cancel" },
},
}).then((result) => {
if (result === true) {
// You have the input values, you can use them in your API call
const ReasonforCancellation = document
.getElementById("input1")
.value.trim();
// Check if values are entered
if (ReasonforCancellation === "") {
swal({
title: "Warning",
text: "Please enter Reason for Cancellation",
icon: "warning",
button: "Ok",
dangerMode: true,
});
} else {
axios
.patch(
`/api/order/change/status/${id}`,
{
status: orderStatus,
ReasonforCancellation,
},
{
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
}
)
.then((res) => {
console.log("status");
toast.success(
`Order status change ${status} to ${orderStatus}`
);
// setSuccess((prev) => !prev);
})
.catch((err) => {
swal({
title: "Warning",
text: err.response.data.message
? err.response.data.message
: "Something went wrong!",
icon: "error",
button: "Retry",
dangerMode: true,
});
});
}
}
// else {
// swal.close(); // Close the popup if canceled
// }
});
} else if (orderStatus === "delivered") {
swal({
title: `Are you sure for ${orderStatus}?`,
@ -451,9 +522,9 @@ function ViewOrders() {
</div>
<p className="m-0 mt-3 ms-3">
<stong> Total Price:</stong> ₹
<stong> Subtotal:</stong> ₹
{productDetails?.quantity *
productDetails?.price}
productDetails?.total_Amount}
</p>
</div>
<div className="col-sm-6">
@ -461,6 +532,10 @@ function ViewOrders() {
<stong> Price:</stong> ₹
{productDetails?.price}
</p>
<p className="m-0 mt-3">
<stong> GST:</stong> ₹
{productDetails?.gst_amount}
</p>
</div>
</div>
</div>
@ -629,9 +704,22 @@ function ViewOrders() {
<div className="card">
<div className="card-body">
<div className="mt-1">
<h6 className="text-success">
{orderDetails?.orderStatus !== "cancelled" ? (
<h5 className="text-success">
Order Status: {orderDetails?.orderStatus}
</h6>
</h5>
) : (
<>
<h5 className="text-danger">
Order Status: {orderDetails?.orderStatus}
</h5>
<p className="text-danger">
{" "}
Order Cancelled Reason:{" "}
{orderDetails?.order_Cancelled_Reason}
</p>
</>
)}
{/* order status change */}{" "}
<div className="mb-2">
{" "}
@ -712,7 +800,6 @@ function ViewOrders() {
<button className='btn-sm btn-primary' onClick={(e) => handleGetSingleFrenchisee(e)} >Add</button>
</div> */}
</div>
{orderDetails?.shipingInfo !== null && (
<div className="">
<div className="row" style={{ fontSize: "14px" }}>
@ -775,7 +862,39 @@ function ViewOrders() {
)}
</label>
</div>
<div className="mt-1">
<div className="">
<label>
<span className="fw-bold">Payment Mode : </span>
{orderDetails?.paymentMode === "online" ? (
<span className="fw-bold text-success">ONLINE</span>
) : (
<span className="fw-bold text-primary">
CASH ON DELIVERY
</span>
)}
</label>
</div>
<div className="">
<label>
<span className="fw-bold"> Paid At: </span>
{orderDetails?.paidAt
? new Date(orderDetails?.paidAt).toLocaleString(
"en-IN",
{
month: "short",
day: "numeric",
year: "numeric",
hour: "2-digit",
minute: "numeric",
hour12: true,
}
)
: "----"}
</label>
</div>
<div className="">
<label>
<span className="fw-bold"> Order Created By: </span>
{orderDetails?.user?.name}
@ -783,15 +902,20 @@ function ViewOrders() {
</div>
<div className="mt-1">
<label>
<span className="fw-bold">paypal_payment_id : </span>
{orderDetails?.paypal_payment_id}
<span className="fw-bold">
Razorpay Payment ID :{" "}
</span>
{orderDetails?.razorpay_payment_id
? orderDetails?.razorpay_payment_id
: "----"}
</label>
</div>
<div className="mt-1">
<div className="">
<label>
<span className="fw-bold">paypal_payer_id : </span>
{orderDetails?.paypal_payer_id}
<span className="fw-bold">Razorpay Order ID : </span>
{orderDetails?.razorpay_order_id
? orderDetails?.razorpay_order_id
: "----"}
</label>
</div>
</div>