risadmin_prod/Authsec_ReactBootStrapNew
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui imrpovement, system parameter, navbar

Browse Source
This commit is contained in:
Harish Sargar 2025-04-02 19:39:36 +05:30
parent 1ce1c27f8c
commit a7965fc12f
14 changed files with 957 additions and 853 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/APIServices/SystemparameterApi.js
View File

@ -9,9 +9,9 @@ export const getSysParameter = async (id) => {
}
}
export const addSysParameter = async (id) => {
export const addSysParameter = async (formdata) => {
try {
const response = await apiService.post(`/sysparam/addSysParams`);
const response = await apiService.put(`/sysparam/updateSysParams/${1}`,formdata);
console.log("add response data ",response.data)
return response.data; // Return only the data part of the response
} catch (error) {

5
src/App.js
View File

@ -1,6 +1,7 @@
import React from "react";
import { SystemParameterProvider } from './context/SystemParameterContext';
import {
BrowserRouter,
Route,
@ -62,11 +63,12 @@ import DashboardRunner from "components/Dashboard/dashboardRunner/dashboardRunne
const App = () => {
return (
<SystemParameterProvider>
<div>
{/* ToastContainer should be placed in the root component */}
<ToastContainer
position="top-right"
autoClose={3000}
autoClose={1500}
hideProgressBar={false}
newestOnTop
closeOnClick
@ -140,6 +142,7 @@ const App = () => {
</Routes>
</BrowserRouter>
</div>
</SystemParameterProvider>
);
};

2
src/components/Dashboard/CSS/CSS/UserMaintainanceView.css
View File

@ -1,3 +1,5 @@
.table-responsive{
box-shadow: 2px 2px 6px -1px grey;

149
src/components/Dashboard/MenuAccessControl.js
View File

@ -1,13 +1,18 @@
import React, { useState, useEffect } from "react";
import { Button, Dropdown, Modal, Form,Row,Col,InputGroup,
import {
Button, Dropdown, Modal, Form, Row, Col, InputGroup,
FormControl,
} from "react-bootstrap";
import { Table ,Pagination,
} from "react-bootstrap";
import {
Table, Pagination,
PaginationItem,
PaginationLink,Input,Label} from 'reactstrap';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faEdit, faTrashAlt, faPlus, faBars,
faTimes } from "@fortawesome/free-solid-svg-icons";
PaginationLink, Input, Label
} from 'reactstrap';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faEdit, faTrashAlt, faPlus, faBars,
faTimes
} from "@fortawesome/free-solid-svg-icons";
import "bootstrap/dist/css/bootstrap.min.css";
import "../Dashboard/CSS/CSS/CommonStyle.css";
import { FaSearch, FaTimes } from "react-icons/fa";
@ -16,13 +21,13 @@ import Spinner from '../../UIComponants/Spinner';
import { getByUsrGrpId } from "APIServices/MenuAccessControlAPI";
import { toast } from "react-toastify";
function MenuAccessControl({ selected,Sync}) {
function MenuAccessControl({ selected, Sync }) {
const [loading, setLoading] = useState(true);
const [menuItems, setMenuItems] = useState([]);
const [menus,setMenus] = useState([]);
const [menus, setMenus] = useState([]);
const [showAddEditModal, setShowAddEditModal] = useState(false);
const [selectedMenuId, setSelectedMenuId] = useState(null);
const [usrgrp, setUsrgrp] = useState('DefaultGroup');
const [usrgrp, setUsrgrp] = useState(1);
const [allData, setAllData] = useState([]);
@ -68,15 +73,15 @@ function MenuAccessControl({ selected,Sync}) {
},
]);
const [visibleColumns, setVisibleColumns] = useState({
No:true,
No: true,
menuId: true,
menuItemName: true,
view:true,
create:true,
edit:true,
delete:true,
query:true,
export:true,
view: true,
create: true,
edit: true,
delete: true,
query: true,
export: true,
isActive: true,
actions: true
});
@ -85,12 +90,12 @@ function MenuAccessControl({ selected,Sync}) {
menuId: "",
menuItemName: "",
view:"",
create:"",
edit:"",
delete:"",
query:"",
export:"",
view: "",
create: "",
edit: "",
delete: "",
query: "",
export: "",
isActive: true,
});
@ -110,7 +115,7 @@ function MenuAccessControl({ selected,Sync}) {
useEffect(() => {
const apiUrl = `${process.env.REACT_APP_API_URL}/api/getAllMenuItems`;
const apiUrl = `${process.env.REACT_APP_API_URL}/api/getAllUsrGrp`;
const token = localStorage.getItem("authToken");
const fetchMenuItems = async () => {
try {
@ -134,44 +139,44 @@ function MenuAccessControl({ selected,Sync}) {
};
fetchMenuItems();
}, []);
}, []);
useEffect(() => {
useEffect(() => {
fetchData();
}, []);
}, []);
// const fetchData = async () => {
// try {
// const data = await getByUsrGrpId(usrgrp);
// console.log("Data fetched successfully:", data);
// const fetchData = async () => {
// try {
// const data = await getByUsrGrpId(usrgrp);
// console.log("Data fetched successfully:", data);
// setAlldata(data); // Update the state with fetched data
// toast.success("Data fetched successfully!");
// } catch (error) {
// console.error('Error fetching data:', error);
// toast.error("Failed to fetch data.");
// }
// };
// setAlldata(data); // Update the state with fetched data
// toast.success("Data fetched successfully!");
// } catch (error) {
// console.error('Error fetching data:', error);
// toast.error("Failed to fetch data.");
// }
// };
// const fetchData = async () => {
// try {
// console.log("Fetching data for usrgrp:", usrgrp);
// const data = await getByUsrGrpId(usrgrp);
// if (!data) {
// console.error("Received undefined data");
// toast.error("Failed to fetch data.");
// return;
// }
// console.log("Data fetched successfully:", data);
// setAlldata(data);
// toast.success("Data fetched successfully!");
// } catch (error) {
// console.error("Error fetching data:", error);
// toast.error("Failed to fetch data.");
// }
// };
// const fetchData = async () => {
// try {
// console.log("Fetching data for usrgrp:", usrgrp);
// const data = await getByUsrGrpId(usrgrp);
// if (!data) {
// console.error("Received undefined data");
// toast.error("Failed to fetch data.");
// return;
// }
// console.log("Data fetched successfully:", data);
// setAlldata(data);
// toast.success("Data fetched successfully!");
// } catch (error) {
// console.error("Error fetching data:", error);
// toast.error("Failed to fetch data.");
// }
// };
const fetchData = async () => {
const fetchData = async () => {
try {
console.log("Fetching data for usrgrp:", usrgrp);
const data = await getByUsrGrpId(usrgrp);
@ -187,10 +192,10 @@ const fetchData = async () => {
console.error("Error fetching data:", error.message || error);
toast.error("Failed to fetch data.");
}
};
const idselected = (value) => {
};
const idselected = (value) => {
setSelectedMenuId(value);
};
};
const toggleColumn = (column) => {
setVisibleColumns((prev) => ({
@ -199,7 +204,7 @@ const idselected = (value) => {
}));
};
const handleInputChange = (event,menuId) => {
const handleInputChange = (event, menuId) => {
const { name, value, checked, type } = event.target;
setCurrentMenuItem(prev => ({
...prev,
@ -256,7 +261,7 @@ const idselected = (value) => {
setMenuItems(menuItems.filter(item => item.menuId !== menuId));
};
const handleRecordsPerPageChange=(number) =>{
const handleRecordsPerPageChange = (number) => {
setRecordsPerPage(number);
setCurrentPage(1);
}
@ -282,15 +287,15 @@ const idselected = (value) => {
)
.slice((currentPage - 1) * recordsPerPage, currentPage * recordsPerPage);
return (
<div style={{marginTop:"11rem"}}>
<div style={{ marginTop: "11rem" }}>
{loading ? (
<Spinner/>
):(
<Spinner />
) : (
<div className="container-fluid mt-5">
<div
className="d-flex justify-content-between align-items-center mb-4"
style={{ gap: "15px" }}
>
>
{/* Left Side */}
<div className="d-flex align-items-center" style={{ gap: "15px" }}>
<h1 className="title_main mb-0">Menu Access Control</h1>
@ -310,7 +315,7 @@ const idselected = (value) => {
style={{ width: "150px", height: "40px" }}
onChange={(e) => handleSelectChange(e.target.value)}
>
{alldata.map((sub) => (
{menuItems.map((sub) => (
<option
key={sub.usrGrp}
value={sub.usrGrp}
@ -345,7 +350,7 @@ const idselected = (value) => {
</label>
</div>
</div>
</div>
</div>
<Row className="align-items-center my-3">
{/* Left: Search Bar */}
<Col
@ -422,7 +427,7 @@ const idselected = (value) => {
)}
</tr>
</thead>
<tbody className="tbody">
<tbody className="tbody">
{slicedMenus.length === 0 ? (
<tr>
<td
@ -463,7 +468,7 @@ const idselected = (value) => {
}}
/>
</>
) :["view", "create", "edit", "delete", "query", "export"].includes(key) ? (
) : ["view", "create", "edit", "delete", "query", "export"].includes(key) ? (
<Input
type="checkbox"
checked={item[key]}
@ -477,7 +482,7 @@ const idselected = (value) => {
onChange={(e) => handleInputChange(e, item.menuId)}
disabled={false}
/>
): key === "isActive" ? (
) : key === "isActive" ? (
<span
className="status"
style={{
@ -501,7 +506,7 @@ const idselected = (value) => {
</tr>
))
)}
</tbody>
</tbody>
</Table>
</div>
@ -711,7 +716,7 @@ const idselected = (value) => {
</Modal.Footer>
</Form>
</Modal.Body>
</Modal>
</Modal>
</div>

2
src/components/Dashboard/MenuMaintenance.js
View File

@ -559,7 +559,7 @@ function MenuMaintenance() {
console.log("sliced menu", slicedMenus); // Verify the data in slicedMenus
return (
<div style={{ marginTop: "11rem" }}>
<div style={{ marginTop: "-20px" }}>
{loading ? (
<Spinner />
) : (

10
src/components/Dashboard/SetupView.js
View File

@ -1,4 +1,4 @@
import React,{useState,useEffect} from "react";
import React, { useState, useEffect } from "react";
import "../Dashboard/CSS/CSS/SetupView.css"; // Assuming you have a CSS file for styling
import { useNavigate } from "react-router-dom";
import Spinner from '../../UIComponants/Spinner';
@ -92,14 +92,14 @@ function SetupView({
<h3>Access Type</h3>
<p>Content for Card 6</p>
</div>
<div className="usercard" onClick={()=>{
<div className="usercard" onClick={() => {
navigate("/admin/api-registry")
}}>
<i className="fas fa-database"></i>
<h3>API Registry</h3>
<p>Content for Card 7</p>
</div>
<div className="usercard" onClick={()=>{
<div className="usercard" onClick={() => {
navigate("/admin/token-registry")
}}>
<i className="fas fa-key"></i>
@ -176,14 +176,14 @@ function SetupView({
<h3>Premium Datatypes</h3>
<p>Content for Card 18</p>
</div> */}
<div className="usercard" onClick={()=>{
<div className="usercard" onClick={() => {
navigate("/admin/user-report")
}}>
<i className="fa fa-file"></i>
<h3>Reports</h3>
<p>Report Description</p>
</div>
<div className="usercard" onClick={()=>{
<div className="usercard" onClick={() => {
navigate("/admin/dynamic-form")
}}>
<i className="fa fa-file"></i>

27
src/components/Dashboard/SystemParameter.js
View File

@ -154,32 +154,32 @@ import {getSysParameter,addSysParameter} from "../../APIServices/Systemparameter
const SystemParameterForm = () => {
const [formData, setFormData] = useState({
schedulerTimer: "",
schedulerTime: "",
leaseTaxCode: "",
vesselConfirmationProcessLimit: "",
vesselConfProcessLimit: "",
rowToDisplay: "",
linkToDisplay: "",
rowToAdd: "",
lovRowToDisplay: "",
lovLinkToDisplay: "",
oldServerName: "",
oldBase: "",
oldAdminUser: "",
oldServerPort: "",
oidserverName: "",
oidBase: "",
oidAdminUser: "",
oidServerPort: "",
userDefaultGroup: "",
defaultDepartment: "",
defaultPosition: "",
singleCharge: "",
firstDayOfWeek: "",
firstDayOftheWeek: "",
hourPerShift: "",
cnBillingFrequency: "",
billingDepartmentCode: "",
basePriceList: "",
nonContainerServiceOrderAutoApprovalDeptCode: "",
ediMAESchedulerOnOff: "",
ediSchedulerOnOff: "",
logo: null,
companyDisplayName: "",
nonContainerServiceOrder: "",
ediMaeSchedulerONOFF: "",
ediSchedulerONOFF: "",
upload_Logo: null,
company_Display_Name: "",
});
const [loading, setLoading] = useState(true);
@ -216,6 +216,7 @@ const SystemParameterForm = () => {
event.preventDefault();
try {
console.log("Form Data:", formData);
const sysParamData = await addSysParameter(formData);
console.log("API Response:", sysParamData);
@ -290,7 +291,7 @@ const SystemParameterForm = () => {
</Row>
{Object.keys(formData).map((key, index) =>
key !== "logo" ? (
key !== "upload_Logo" ? (
<Row className="mb-3" key={index}>
<Col xs={6} className="d-flex align-items-center">
<Form.Label className="mb-0">

8
src/components/Dashboard/UserMaintenanceView.js
View File

@ -579,23 +579,23 @@ function UserMaintenanceView() {
.slice((currentPage - 1) * recordsPerPage, currentPage * recordsPerPage);
return (
<div style={{marginTop:"11rem"}}>
<div style={{marginTop:"8rem"}}>
{loading ? (
<Spinner/>
):(
<div className="container-fluid mt-5">
{/* Header */}
<div className="d-flex justify-content-between align-items-center mb-4">
<div className="d-flex justify-content-between align-items-center mb-0">
<h1 className="title_main">User Maintenance</h1>
</div>
<Row className="align-items-center my-3">
<Row className="align-items-center my-1">
{/* Left: Search Bar */}
<Col
xs={12}
md={8}
lg={6}
className="d-flex justify-content-center my-3"
className="d-flex justify-content-center my-2"
>
<InputGroup
className="search-bar"

28
src/components/Navbars/AdminNavbar.js
View File

@ -1,4 +1,8 @@
import { useNavigate, Link } from "react-router-dom";
import { removeCurrentUser,getCurrentUser } from "../../utils/tokenService";
import React, { useState, useEffect } from 'react';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faUser } from "@fortawesome/free-solid-svg-icons";
import {
DropdownMenu,
DropdownItem,
@ -18,9 +22,22 @@ import "./AdminNavbar.css";
import "bootstrap-icons/font/bootstrap-icons.css";
const AdminNavbar = ({ brandText }) => {
const[currentUser,setCurrentUser]=useState();
useEffect(() => {
const user = getCurrentUser();
console.log(user);
setCurrentUser(user);
console.log(currentUser);
if (!user) {
navigate("/login");
}
}, []);
console.log(brandText);
const navigate = useNavigate();
const handleLogout = () => {
removeCurrentUser();
// localStorage.removeItem("authToken"); // Uncomment if needed
navigate("/login");
};
@ -55,7 +72,7 @@ const AdminNavbar = ({ brandText }) => {
{/* Search and Profile */}
<div className="nav-right d-flex align-items-center">
<Form className="navbar-search navbar-search-dark form-inline">
<FormGroup className="mb-0">
{/* <FormGroup className="mb-0">
<InputGroup className="input-group-alternative search-input-group">
<InputGroupAddon addonType="prepend">
<InputGroupText className="search-icon">
@ -64,7 +81,7 @@ const AdminNavbar = ({ brandText }) => {
</InputGroupAddon>
<Input placeholder="Search" type="text" className="search-input" />
</InputGroup>
</FormGroup>
</FormGroup> */}
</Form>
<Nav className="align-items-center" navbar>
@ -72,14 +89,15 @@ const AdminNavbar = ({ brandText }) => {
<DropdownToggle className="pr-0" nav>
<Media className="align-items-center">
<span className="avatar avatar-sm rounded-circle">
<img
{/* <img
alt="Profile"
src={require("../../assets/img/theme/team-4-800x800.jpg")}
/>
/> */}
<FontAwesomeIcon icon={faUser} />
</span>
<Media className="ml-2 d-none d-lg-block">
<span className="brand_name mb-0 text-sm font-weight-bold text-white-50">
Jessica Jones
{currentUser ? currentUser.fullname : "Guest"}
</span>
</Media>
</Media>

61
src/context/SystemParameterContext.js Normal file
View File

@ -0,0 +1,61 @@
import React, { createContext, useContext, useState, useEffect } from 'react';
import { getSysParameter } from '../APIServices/SystemparameterApi';
const SystemParameterContext = createContext();
export const useSystemParameters = () => {
const context = useContext(SystemParameterContext);
if (!context) {
throw new Error('useSystemParameters must be used within a SystemParameterProvider');
}
return context;
};
export const SystemParameterProvider = ({ children }) => {
const [systemParameters, setSystemParameters] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchSystemParameters = async () => {
try {
const data = await getSysParameter(1); // Assuming 1 is the default ID for system parameters
setSystemParameters(data);
console.log("system parameters data ",data)
setError(null);
} catch (err) {
setError('Failed to fetch system parameters');
console.error('Error fetching system parameters:', err);
} finally {
setLoading(false);
}
};
fetchSystemParameters();
}, []);
const value = {
systemParameters,
loading,
error,
refetch: async () => {
setLoading(true);
try {
const data = await getSysParameter(1);
setSystemParameters(data);
setError(null);
} catch (err) {
setError('Failed to fetch system parameters');
console.error('Error fetching system parameters:', err);
} finally {
setLoading(false);
}
}
};
return (
<SystemParameterContext.Provider value={value}>
{children}
</SystemParameterContext.Provider>
);
};

6
src/layouts/Admin.js
View File

@ -3,7 +3,7 @@ import { useLocation } from "react-router-dom";
import AdminNavbar from "components/Navbars/AdminNavbar.js";
import AdminFooter from "components/Footers/AdminFooter.js";
import Sidebar from "components/Sidebar/Sidebar.js";
import { useSystemParameters } from "../context/SystemParameterContext";
import { Outlet } from "react-router-dom"; // Import Outlet for nested routing
import routes from "routes.js";
@ -39,7 +39,7 @@ const Admin = (props) => {
// Check if the current page is an admin page
const isAdminPage = location.pathname.startsWith("/admin");
const { systemParameters, loading, error } = useSystemParameters();
return (
<>
{/* Render Navbar only on admin pages */}
@ -47,7 +47,7 @@ const Admin = (props) => {
<div className="navbar-container">
<AdminNavbar
{...props}
brandText={getBrandText(location.pathname)}
brandText={systemParameters ? systemParameters.company_Display_Name : "Loading..."}
/>
</div>
)}

18
src/utils/tokenService.js
View File

@ -1,19 +1,23 @@
const TOKEN_KEY = 'authToken';
const TOKEN_KEY = 'CurrentUser';
export const setToken = (token) => {
localStorage.setItem(TOKEN_KEY, token);
export const setCurrentUser = (user) => {
localStorage.setItem(TOKEN_KEY, user);
};
export const getCurrentUser = () => {
return JSON.parse(localStorage.getItem(TOKEN_KEY));
};
export const getToken = () => {
return localStorage.getItem(TOKEN_KEY);
const userData = localStorage.getItem(TOKEN_KEY);
return userData ? JSON.parse(userData).token : null;
};
export const removeToken = () => {
export const removeCurrentUser = () => {
localStorage.removeItem(TOKEN_KEY);
};
@ -21,3 +25,7 @@ export const removeToken = () => {
export const isTokenAvailable = () => {
return !!localStorage.getItem(TOKEN_KEY); // Returns true if token exists
};

549
src/views/Index.js
View File

@ -81,284 +81,285 @@ const Index = (props) => {
setChartExample1Data("data" + index);
};
return (
<div >
<>Home Page</>
// <div >
<Header />
<Sidebar menuData={menuData} />
// <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>
)}
// {/* 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>
// </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>
);
};

11
src/views/examples/Login.js
View File

@ -1,7 +1,7 @@
// Import necessary components
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import { setToken } from "../../utils/tokenService";
import { setCurrentUser} from "../../utils/tokenService";
import { LoginEnvironment } from "../examples/LoginEnviornment";
import "../../assets/css/login.css";
@ -84,12 +84,15 @@ const Login = () => {
if (response.ok) {
// Handle successful login
console.log("Login successful ",response);
const responseData = await response.json();
console.log("Login successful ",responseData);
const authToken = responseData.item.token;
console.log("Login successful, token received");
// Store authentication token
setToken(authToken);
setCurrentUser(JSON.stringify(responseData.item));
// setToken(authToken);
console.log("Token stored in local storage, redirecting to dashboard");
// Redirect to dashboard
@ -103,7 +106,9 @@ const Login = () => {
} catch (error) {
// Handle connection errors
console.error("Login API error:", error.message);
setError(`An error occurred during login: ${error.message}`);
// setError(`An error occurred during login: ${error.message}`);
setError(`Something went wrong !!!!`);
}
};