367 lines
12 KiB
JavaScript
367 lines
12 KiB
JavaScript
|
|
import { useState, useEffect } from "react";
|
|
import Sidebar from "../../src/components/Sidebar/Sidebar";
|
|
import classnames from "classnames";
|
|
// import Chart from "chart.js";
|
|
import { Chart } from 'chart.js/auto';
|
|
|
|
import { Line, Bar } from "react-chartjs-2";
|
|
import {
|
|
Button,
|
|
Card,
|
|
CardHeader,
|
|
CardBody,
|
|
NavItem,
|
|
NavLink,
|
|
Nav,
|
|
Progress,
|
|
Table,
|
|
Container,
|
|
Row,
|
|
Col,
|
|
} from "reactstrap";
|
|
|
|
// core components
|
|
import {
|
|
chartOptions,
|
|
parseOptions,
|
|
chartExample1,
|
|
chartExample2,
|
|
} from "variables/charts.js";
|
|
|
|
import Header from "components/Headers/Header.js";
|
|
import { fetchMenuItems } from "../APIServices/MenuAPI";
|
|
import routes from "routes.js";
|
|
|
|
const Index = (props) => {
|
|
const [activeNav, setActiveNav] = useState(1);
|
|
const [chartExample1Data, setChartExample1Data] = useState("data1");
|
|
const [menuItems, setMenuItems] = useState([]); // State for menu items
|
|
const [error, setError] = useState(""); // State for errors
|
|
const [menuData, setMenuData] = useState([]);
|
|
// useEffect(() => {
|
|
// const loadMenuItems = async () => {
|
|
// try {
|
|
// console.log("Menu is loading...");
|
|
// const data = await fetchMenuItems();
|
|
// setMenuItems(data);
|
|
// console.log("menu data",data);
|
|
// } catch (error) {
|
|
// console.error("Fetching error:", error);
|
|
// setError(error.message);
|
|
// }
|
|
// };
|
|
|
|
// loadMenuItems();
|
|
// }, []);
|
|
|
|
useEffect(() => {
|
|
// Sidebar items ke liye class add karo
|
|
const sidebarElement = document.querySelector(".menu-header");
|
|
if (sidebarElement) {
|
|
sidebarElement.classList.add("index-active"); // Special class add karo
|
|
}
|
|
|
|
// Cleanup jab component unmount hoga
|
|
return () => {
|
|
if (sidebarElement) {
|
|
sidebarElement.classList.remove("index-active"); // Class remove karo
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
|
|
if (window.Chart) {
|
|
parseOptions(Chart, chartOptions());
|
|
}
|
|
|
|
const toggleNavs = (e, index) => {
|
|
e.preventDefault();
|
|
setActiveNav(index);
|
|
setChartExample1Data("data" + index);
|
|
};
|
|
return (
|
|
// <>Home Page</>
|
|
<div >
|
|
|
|
<Header />
|
|
<Sidebar menuData={menuData} />
|
|
|
|
|
|
{/* Page content */}
|
|
<Container className="mt--7" fluid style={{ marginTop: "-4rem" }}>
|
|
<Row>
|
|
<Col className="mb-5 mb-xl-0" xl="8">
|
|
<Card className="bg-gradient-default shadow">
|
|
<CardHeader className="bg-transparent">
|
|
<Row className="align-items-center">
|
|
<div className="col">
|
|
<h6 className="text-uppercase text-light ls-1 mb-1">
|
|
Overview
|
|
</h6>
|
|
<h2 className="text-white mb-0">Sales value</h2>
|
|
</div>
|
|
<div className="col">
|
|
<Nav className="justify-content-end" pills>
|
|
<NavItem>
|
|
<NavLink
|
|
className={classnames("py-2 px-3", {
|
|
active: activeNav === 1,
|
|
})}
|
|
href="#pablo"
|
|
onClick={(e) => toggleNavs(e, 1)}
|
|
>
|
|
<span className="d-none d-md-block">Month</span>
|
|
<span className="d-md-none">M</span>
|
|
</NavLink>
|
|
</NavItem>
|
|
<NavItem>
|
|
<NavLink
|
|
className={classnames("py-2 px-3", {
|
|
active: activeNav === 2,
|
|
})}
|
|
data-toggle="tab"
|
|
href="#pablo"
|
|
onClick={(e) => toggleNavs(e, 2)}
|
|
>
|
|
<span className="d-none d-md-block">Week</span>
|
|
<span className="d-md-none">W</span>
|
|
</NavLink>
|
|
</NavItem>
|
|
</Nav>
|
|
</div>
|
|
</Row>
|
|
</CardHeader>
|
|
<CardBody>
|
|
{/* Chart */}
|
|
<div className="chart">
|
|
{chartExample1[chartExample1Data] ? (
|
|
<Line
|
|
data={chartExample1[chartExample1Data]}
|
|
options={chartExample1.options}
|
|
/>
|
|
) : (
|
|
<p>Loading chart...</p>
|
|
)}
|
|
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|
|
</Col>
|
|
<Col xl="4">
|
|
<Card className="shadow">
|
|
<CardHeader className="bg-transparent">
|
|
<Row className="align-items-center">
|
|
<div className="col">
|
|
<h6 className="text-uppercase text-muted ls-1 mb-1">
|
|
Performance
|
|
</h6>
|
|
<h2 className="mb-0">Total orders</h2>
|
|
</div>
|
|
</Row>
|
|
</CardHeader>
|
|
<CardBody>
|
|
{/* Chart */}
|
|
<div className="chart">
|
|
<Bar
|
|
data={chartExample2.data}
|
|
options={chartExample2.options}
|
|
/>
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|
|
</Col>
|
|
</Row>
|
|
<Row className="mt-5">
|
|
<Col className="mb-5 mb-xl-0" xl="8">
|
|
<Card className="shadow">
|
|
<CardHeader className="border-0">
|
|
<Row className="align-items-center">
|
|
<div className="col">
|
|
<h3 className="mb-0">Page visits</h3>
|
|
</div>
|
|
<div className="col text-right">
|
|
<Button
|
|
color="primary"
|
|
href="#pablo"
|
|
onClick={(e) => e.preventDefault()}
|
|
size="sm"
|
|
>
|
|
See all
|
|
</Button>
|
|
</div>
|
|
</Row>
|
|
</CardHeader>
|
|
<Table className="align-items-center table-flush" responsive>
|
|
<thead className="thead-light">
|
|
<tr>
|
|
<th scope="col">Page name</th>
|
|
<th scope="col">Visitors</th>
|
|
<th scope="col">Unique users</th>
|
|
<th scope="col">Bounce rate</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">/argon/</th>
|
|
<td>4,569</td>
|
|
<td>340</td>
|
|
<td>
|
|
<i className="fas fa-arrow-up text-success mr-3" /> 46,53%
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">/argon/index.html</th>
|
|
<td>3,985</td>
|
|
<td>319</td>
|
|
<td>
|
|
<i className="fas fa-arrow-down text-warning mr-3" />{" "}
|
|
46,53%
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">/argon/charts.html</th>
|
|
<td>3,513</td>
|
|
<td>294</td>
|
|
<td>
|
|
<i className="fas fa-arrow-down text-warning mr-3" />{" "}
|
|
36,49%
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">/argon/tables.html</th>
|
|
<td>2,050</td>
|
|
<td>147</td>
|
|
<td>
|
|
<i className="fas fa-arrow-up text-success mr-3" /> 50,87%
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">/argon/profile.html</th>
|
|
<td>1,795</td>
|
|
<td>190</td>
|
|
<td>
|
|
<i className="fas fa-arrow-down text-danger mr-3" />{" "}
|
|
46,53%
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</Table>
|
|
</Card>
|
|
</Col>
|
|
<Col xl="4">
|
|
<Card className="shadow">
|
|
<CardHeader className="border-0">
|
|
<Row className="align-items-center">
|
|
<div className="col">
|
|
<h3 className="mb-0">Social traffic</h3>
|
|
</div>
|
|
<div className="col text-right">
|
|
<Button
|
|
color="primary"
|
|
href="#pablo"
|
|
onClick={(e) => e.preventDefault()}
|
|
size="sm"
|
|
>
|
|
See all
|
|
</Button>
|
|
</div>
|
|
</Row>
|
|
</CardHeader>
|
|
<Table className="align-items-center table-flush" responsive>
|
|
<thead className="thead-light">
|
|
<tr>
|
|
<th scope="col">Referral</th>
|
|
<th scope="col">Visitors</th>
|
|
<th scope="col" />
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">Facebook</th>
|
|
<td>1,480</td>
|
|
<td>
|
|
<div className="d-flex align-items-center">
|
|
<span className="mr-2">60%</span>
|
|
<div>
|
|
<Progress
|
|
max="100"
|
|
value="60"
|
|
barClassName="bg-gradient-danger"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Facebook</th>
|
|
<td>5,480</td>
|
|
<td>
|
|
<div className="d-flex align-items-center">
|
|
<span className="mr-2">70%</span>
|
|
<div>
|
|
<Progress
|
|
max="100"
|
|
value="70"
|
|
barClassName="bg-gradient-success"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Google</th>
|
|
<td>4,807</td>
|
|
<td>
|
|
<div className="d-flex align-items-center">
|
|
<span className="mr-2">80%</span>
|
|
<div>
|
|
<Progress max="100" value="80" />
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Instagram</th>
|
|
<td>3,678</td>
|
|
<td>
|
|
<div className="d-flex align-items-center">
|
|
<span className="mr-2">75%</span>
|
|
<div>
|
|
<Progress
|
|
max="100"
|
|
value="75"
|
|
barClassName="bg-gradient-info"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">twitter</th>
|
|
<td>2,645</td>
|
|
<td>
|
|
<div className="d-flex align-items-center">
|
|
<span className="mr-2">30%</span>
|
|
<div>
|
|
<Progress
|
|
max="100"
|
|
value="30"
|
|
barClassName="bg-gradient-warning"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</Table>
|
|
</Card>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Index;
|