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 { try {
const response = await apiService.post(`/sysparam/addSysParams`); const response = await apiService.put(`/sysparam/updateSysParams/${1}`,formdata);
console.log("add response data ",response.data) console.log("add response data ",response.data)
return response.data; // Return only the data part of the response return response.data; // Return only the data part of the response
} catch (error) { } catch (error) {

5
src/App.js
View File

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

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

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

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

@ -1,13 +1,18 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { Button, Dropdown, Modal, Form,Row,Col,InputGroup, import {
Button, Dropdown, Modal, Form, Row, Col, InputGroup,
FormControl, FormControl,
} from "react-bootstrap"; } from "react-bootstrap";
import { Table ,Pagination, import {
Table, Pagination,
PaginationItem, PaginationItem,
PaginationLink,Input,Label} from 'reactstrap'; PaginationLink, Input, Label
} from 'reactstrap';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faEdit, faTrashAlt, faPlus, faBars, import {
faTimes } from "@fortawesome/free-solid-svg-icons"; faEdit, faTrashAlt, faPlus, faBars,
faTimes
} from "@fortawesome/free-solid-svg-icons";
import "bootstrap/dist/css/bootstrap.min.css"; import "bootstrap/dist/css/bootstrap.min.css";
import "../Dashboard/CSS/CSS/CommonStyle.css"; import "../Dashboard/CSS/CSS/CommonStyle.css";
import { FaSearch, FaTimes } from "react-icons/fa"; import { FaSearch, FaTimes } from "react-icons/fa";
@ -22,7 +27,7 @@ function MenuAccessControl({ selected,Sync}) {
const [menus, setMenus] = useState([]); const [menus, setMenus] = useState([]);
const [showAddEditModal, setShowAddEditModal] = useState(false); const [showAddEditModal, setShowAddEditModal] = useState(false);
const [selectedMenuId, setSelectedMenuId] = useState(null); const [selectedMenuId, setSelectedMenuId] = useState(null);
const [usrgrp, setUsrgrp] = useState('DefaultGroup'); const [usrgrp, setUsrgrp] = useState(1);
const [allData, setAllData] = useState([]); const [allData, setAllData] = useState([]);
@ -110,7 +115,7 @@ function MenuAccessControl({ selected,Sync}) {
useEffect(() => { 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 token = localStorage.getItem("authToken");
const fetchMenuItems = async () => { const fetchMenuItems = async () => {
try { try {
@ -310,7 +315,7 @@ const idselected = (value) => {
style={{ width: "150px", height: "40px" }} style={{ width: "150px", height: "40px" }}
onChange={(e) => handleSelectChange(e.target.value)} onChange={(e) => handleSelectChange(e.target.value)}
> >
{alldata.map((sub) => ( {menuItems.map((sub) => (
<option <option
key={sub.usrGrp} key={sub.usrGrp}
value={sub.usrGrp} value={sub.usrGrp}

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

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

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

@ -154,32 +154,32 @@ import {getSysParameter,addSysParameter} from "../../APIServices/Systemparameter
const SystemParameterForm = () => { const SystemParameterForm = () => {
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
schedulerTimer: "", schedulerTime: "",
leaseTaxCode: "", leaseTaxCode: "",
vesselConfirmationProcessLimit: "", vesselConfProcessLimit: "",
rowToDisplay: "", rowToDisplay: "",
linkToDisplay: "", linkToDisplay: "",
rowToAdd: "", rowToAdd: "",
lovRowToDisplay: "", lovRowToDisplay: "",
lovLinkToDisplay: "", lovLinkToDisplay: "",
oldServerName: "", oidserverName: "",
oldBase: "", oidBase: "",
oldAdminUser: "", oidAdminUser: "",
oldServerPort: "", oidServerPort: "",
userDefaultGroup: "", userDefaultGroup: "",
defaultDepartment: "", defaultDepartment: "",
defaultPosition: "", defaultPosition: "",
singleCharge: "", singleCharge: "",
firstDayOfWeek: "", firstDayOftheWeek: "",
hourPerShift: "", hourPerShift: "",
cnBillingFrequency: "", cnBillingFrequency: "",
billingDepartmentCode: "", billingDepartmentCode: "",
basePriceList: "", basePriceList: "",
nonContainerServiceOrderAutoApprovalDeptCode: "", nonContainerServiceOrder: "",
ediMAESchedulerOnOff: "", ediMaeSchedulerONOFF: "",
ediSchedulerOnOff: "", ediSchedulerONOFF: "",
logo: null, upload_Logo: null,
companyDisplayName: "", company_Display_Name: "",
}); });
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
@ -216,6 +216,7 @@ const SystemParameterForm = () => {
event.preventDefault(); event.preventDefault();
try { try {
console.log("Form Data:", formData);
const sysParamData = await addSysParameter(formData); const sysParamData = await addSysParameter(formData);
console.log("API Response:", sysParamData); console.log("API Response:", sysParamData);
@ -290,7 +291,7 @@ const SystemParameterForm = () => {
</Row> </Row>
{Object.keys(formData).map((key, index) => {Object.keys(formData).map((key, index) =>
key !== "logo" ? ( key !== "upload_Logo" ? (
<Row className="mb-3" key={index}> <Row className="mb-3" key={index}>
<Col xs={6} className="d-flex align-items-center"> <Col xs={6} className="d-flex align-items-center">
<Form.Label className="mb-0"> <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); .slice((currentPage - 1) * recordsPerPage, currentPage * recordsPerPage);
return ( return (
<div style={{marginTop:"11rem"}}> <div style={{marginTop:"8rem"}}>
{loading ? ( {loading ? (
<Spinner/> <Spinner/>
):( ):(
<div className="container-fluid mt-5"> <div className="container-fluid mt-5">
{/* Header */} {/* 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> <h1 className="title_main">User Maintenance</h1>
</div> </div>
<Row className="align-items-center my-3"> <Row className="align-items-center my-1">
{/* Left: Search Bar */} {/* Left: Search Bar */}
<Col <Col
xs={12} xs={12}
md={8} md={8}
lg={6} lg={6}
className="d-flex justify-content-center my-3" className="d-flex justify-content-center my-2"
> >
<InputGroup <InputGroup
className="search-bar" className="search-bar"

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

@ -1,4 +1,8 @@
import { useNavigate, Link } from "react-router-dom"; 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 { import {
DropdownMenu, DropdownMenu,
DropdownItem, DropdownItem,
@ -18,9 +22,22 @@ import "./AdminNavbar.css";
import "bootstrap-icons/font/bootstrap-icons.css"; import "bootstrap-icons/font/bootstrap-icons.css";
const AdminNavbar = ({ brandText }) => { 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 navigate = useNavigate();
const handleLogout = () => { const handleLogout = () => {
removeCurrentUser();
// localStorage.removeItem("authToken"); // Uncomment if needed // localStorage.removeItem("authToken"); // Uncomment if needed
navigate("/login"); navigate("/login");
}; };
@ -55,7 +72,7 @@ const AdminNavbar = ({ brandText }) => {
{/* Search and Profile */} {/* Search and Profile */}
<div className="nav-right d-flex align-items-center"> <div className="nav-right d-flex align-items-center">
<Form className="navbar-search navbar-search-dark form-inline"> <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"> <InputGroup className="input-group-alternative search-input-group">
<InputGroupAddon addonType="prepend"> <InputGroupAddon addonType="prepend">
<InputGroupText className="search-icon"> <InputGroupText className="search-icon">
@ -64,7 +81,7 @@ const AdminNavbar = ({ brandText }) => {
</InputGroupAddon> </InputGroupAddon>
<Input placeholder="Search" type="text" className="search-input" /> <Input placeholder="Search" type="text" className="search-input" />
</InputGroup> </InputGroup>
</FormGroup> </FormGroup> */}
</Form> </Form>
<Nav className="align-items-center" navbar> <Nav className="align-items-center" navbar>
@ -72,14 +89,15 @@ const AdminNavbar = ({ brandText }) => {
<DropdownToggle className="pr-0" nav> <DropdownToggle className="pr-0" nav>
<Media className="align-items-center"> <Media className="align-items-center">
<span className="avatar avatar-sm rounded-circle"> <span className="avatar avatar-sm rounded-circle">
<img {/* <img
alt="Profile" alt="Profile"
src={require("../../assets/img/theme/team-4-800x800.jpg")} src={require("../../assets/img/theme/team-4-800x800.jpg")}
/> /> */}
<FontAwesomeIcon icon={faUser} />
</span> </span>
<Media className="ml-2 d-none d-lg-block"> <Media className="ml-2 d-none d-lg-block">
<span className="brand_name mb-0 text-sm font-weight-bold text-white-50"> <span className="brand_name mb-0 text-sm font-weight-bold text-white-50">
Jessica Jones {currentUser ? currentUser.fullname : "Guest"}
</span> </span>
</Media> </Media>
</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 AdminNavbar from "components/Navbars/AdminNavbar.js";
import AdminFooter from "components/Footers/AdminFooter.js"; import AdminFooter from "components/Footers/AdminFooter.js";
import Sidebar from "components/Sidebar/Sidebar.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 { Outlet } from "react-router-dom"; // Import Outlet for nested routing
import routes from "routes.js"; import routes from "routes.js";
@ -39,7 +39,7 @@ const Admin = (props) => {
// Check if the current page is an admin page // Check if the current page is an admin page
const isAdminPage = location.pathname.startsWith("/admin"); const isAdminPage = location.pathname.startsWith("/admin");
const { systemParameters, loading, error } = useSystemParameters();
return ( return (
<> <>
{/* Render Navbar only on admin pages */} {/* Render Navbar only on admin pages */}
@ -47,7 +47,7 @@ const Admin = (props) => {
<div className="navbar-container"> <div className="navbar-container">
<AdminNavbar <AdminNavbar
{...props} {...props}
brandText={getBrandText(location.pathname)} brandText={systemParameters ? systemParameters.company_Display_Name : "Loading..."}
/> />
</div> </div>
)} )}

18
src/utils/tokenService.js
View File

@ -1,19 +1,23 @@
const TOKEN_KEY = 'authToken'; const TOKEN_KEY = 'CurrentUser';
export const setToken = (token) => { export const setCurrentUser = (user) => {
localStorage.setItem(TOKEN_KEY, token); localStorage.setItem(TOKEN_KEY, user);
}; };
export const getCurrentUser = () => {
return JSON.parse(localStorage.getItem(TOKEN_KEY));
};
export const getToken = () => { 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); localStorage.removeItem(TOKEN_KEY);
}; };
@ -21,3 +25,7 @@ export const removeToken = () => {
export const isTokenAvailable = () => { export const isTokenAvailable = () => {
return !!localStorage.getItem(TOKEN_KEY); // Returns true if token exists 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); setChartExample1Data("data" + index);
}; };
return ( return (
<div > <>Home Page</>
// <div >
<Header /> // <Header />
<Sidebar menuData={menuData} /> // <Sidebar menuData={menuData} />
{/* Page content */} // {/* Page content */}
<Container className="mt--7" fluid style={{ marginTop: "-4rem" }}> // <Container className="mt--7" fluid style={{ marginTop: "-4rem" }}>
<Row> // <Row>
<Col className="mb-5 mb-xl-0" xl="8"> // <Col className="mb-5 mb-xl-0" xl="8">
<Card className="bg-gradient-default shadow"> // <Card className="bg-gradient-default shadow">
<CardHeader className="bg-transparent"> // <CardHeader className="bg-transparent">
<Row className="align-items-center"> // <Row className="align-items-center">
<div className="col"> // <div className="col">
<h6 className="text-uppercase text-light ls-1 mb-1"> // <h6 className="text-uppercase text-light ls-1 mb-1">
Overview // Overview
</h6> // </h6>
<h2 className="text-white mb-0">Sales value</h2> // <h2 className="text-white mb-0">Sales value</h2>
</div> // </div>
<div className="col"> // <div className="col">
<Nav className="justify-content-end" pills> // <Nav className="justify-content-end" pills>
<NavItem> // <NavItem>
<NavLink // <NavLink
className={classnames("py-2 px-3", { // className={classnames("py-2 px-3", {
active: activeNav === 1, // active: activeNav === 1,
})} // })}
href="#pablo" // href="#pablo"
onClick={(e) => toggleNavs(e, 1)} // onClick={(e) => toggleNavs(e, 1)}
> // >
<span className="d-none d-md-block">Month</span> // <span className="d-none d-md-block">Month</span>
<span className="d-md-none">M</span> // <span className="d-md-none">M</span>
</NavLink> // </NavLink>
</NavItem> // </NavItem>
<NavItem> // <NavItem>
<NavLink // <NavLink
className={classnames("py-2 px-3", { // className={classnames("py-2 px-3", {
active: activeNav === 2, // active: activeNav === 2,
})} // })}
data-toggle="tab" // data-toggle="tab"
href="#pablo" // href="#pablo"
onClick={(e) => toggleNavs(e, 2)} // onClick={(e) => toggleNavs(e, 2)}
> // >
<span className="d-none d-md-block">Week</span> // <span className="d-none d-md-block">Week</span>
<span className="d-md-none">W</span> // <span className="d-md-none">W</span>
</NavLink> // </NavLink>
</NavItem> // </NavItem>
</Nav> // </Nav>
</div> // </div>
</Row> // </Row>
</CardHeader> // </CardHeader>
<CardBody> // <CardBody>
{/* Chart */} // {/* Chart */}
<div className="chart"> // <div className="chart">
{chartExample1[chartExample1Data] ? ( // {chartExample1[chartExample1Data] ? (
<Line // <Line
data={chartExample1[chartExample1Data]} // data={chartExample1[chartExample1Data]}
options={chartExample1.options} // options={chartExample1.options}
/> // />
) : ( // ) : (
<p>Loading chart...</p> // <p>Loading chart...</p>
)} // )}
</div> // </div>
</CardBody> // </CardBody>
</Card> // </Card>
</Col> // </Col>
<Col xl="4"> // <Col xl="4">
<Card className="shadow"> // <Card className="shadow">
<CardHeader className="bg-transparent"> // <CardHeader className="bg-transparent">
<Row className="align-items-center"> // <Row className="align-items-center">
<div className="col"> // <div className="col">
<h6 className="text-uppercase text-muted ls-1 mb-1"> // <h6 className="text-uppercase text-muted ls-1 mb-1">
Performance // Performance
</h6> // </h6>
<h2 className="mb-0">Total orders</h2> // <h2 className="mb-0">Total orders</h2>
</div> // </div>
</Row> // </Row>
</CardHeader> // </CardHeader>
<CardBody> // <CardBody>
{/* Chart */} // {/* Chart */}
<div className="chart"> // <div className="chart">
<Bar // <Bar
data={chartExample2.data} // data={chartExample2.data}
options={chartExample2.options} // options={chartExample2.options}
/> // />
</div> // </div>
</CardBody> // </CardBody>
</Card> // </Card>
</Col> // </Col>
</Row> // </Row>
<Row className="mt-5"> // <Row className="mt-5">
<Col className="mb-5 mb-xl-0" xl="8"> // <Col className="mb-5 mb-xl-0" xl="8">
<Card className="shadow"> // <Card className="shadow">
<CardHeader className="border-0"> // <CardHeader className="border-0">
<Row className="align-items-center"> // <Row className="align-items-center">
<div className="col"> // <div className="col">
<h3 className="mb-0">Page visits</h3> // <h3 className="mb-0">Page visits</h3>
</div> // </div>
<div className="col text-right"> // <div className="col text-right">
<Button // <Button
color="primary" // color="primary"
href="#pablo" // href="#pablo"
onClick={(e) => e.preventDefault()} // onClick={(e) => e.preventDefault()}
size="sm" // size="sm"
> // >
See all // See all
</Button> // </Button>
</div> // </div>
</Row> // </Row>
</CardHeader> // </CardHeader>
<Table className="align-items-center table-flush" responsive> // <Table className="align-items-center table-flush" responsive>
<thead className="thead-light"> // <thead className="thead-light">
<tr> // <tr>
<th scope="col">Page name</th> // <th scope="col">Page name</th>
<th scope="col">Visitors</th> // <th scope="col">Visitors</th>
<th scope="col">Unique users</th> // <th scope="col">Unique users</th>
<th scope="col">Bounce rate</th> // <th scope="col">Bounce rate</th>
</tr> // </tr>
</thead> // </thead>
<tbody> // <tbody>
<tr> // <tr>
<th scope="row">/argon/</th> // <th scope="row">/argon/</th>
<td>4,569</td> // <td>4,569</td>
<td>340</td> // <td>340</td>
<td> // <td>
<i className="fas fa-arrow-up text-success mr-3" /> 46,53% // <i className="fas fa-arrow-up text-success mr-3" /> 46,53%
</td> // </td>
</tr> // </tr>
<tr> // <tr>
<th scope="row">/argon/index.html</th> // <th scope="row">/argon/index.html</th>
<td>3,985</td> // <td>3,985</td>
<td>319</td> // <td>319</td>
<td> // <td>
<i className="fas fa-arrow-down text-warning mr-3" />{" "} // <i className="fas fa-arrow-down text-warning mr-3" />{" "}
46,53% // 46,53%
</td> // </td>
</tr> // </tr>
<tr> // <tr>
<th scope="row">/argon/charts.html</th> // <th scope="row">/argon/charts.html</th>
<td>3,513</td> // <td>3,513</td>
<td>294</td> // <td>294</td>
<td> // <td>
<i className="fas fa-arrow-down text-warning mr-3" />{" "} // <i className="fas fa-arrow-down text-warning mr-3" />{" "}
36,49% // 36,49%
</td> // </td>
</tr> // </tr>
<tr> // <tr>
<th scope="row">/argon/tables.html</th> // <th scope="row">/argon/tables.html</th>
<td>2,050</td> // <td>2,050</td>
<td>147</td> // <td>147</td>
<td> // <td>
<i className="fas fa-arrow-up text-success mr-3" /> 50,87% // <i className="fas fa-arrow-up text-success mr-3" /> 50,87%
</td> // </td>
</tr> // </tr>
<tr> // <tr>
<th scope="row">/argon/profile.html</th> // <th scope="row">/argon/profile.html</th>
<td>1,795</td> // <td>1,795</td>
<td>190</td> // <td>190</td>
<td> // <td>
<i className="fas fa-arrow-down text-danger mr-3" />{" "} // <i className="fas fa-arrow-down text-danger mr-3" />{" "}
46,53% // 46,53%
</td> // </td>
</tr> // </tr>
</tbody> // </tbody>
</Table> // </Table>
</Card> // </Card>
</Col> // </Col>
<Col xl="4"> // <Col xl="4">
<Card className="shadow"> // <Card className="shadow">
<CardHeader className="border-0"> // <CardHeader className="border-0">
<Row className="align-items-center"> // <Row className="align-items-center">
<div className="col"> // <div className="col">
<h3 className="mb-0">Social traffic</h3> // <h3 className="mb-0">Social traffic</h3>
</div> // </div>
<div className="col text-right"> // <div className="col text-right">
<Button // <Button
color="primary" // color="primary"
href="#pablo" // href="#pablo"
onClick={(e) => e.preventDefault()} // onClick={(e) => e.preventDefault()}
size="sm" // size="sm"
> // >
See all // See all
</Button> // </Button>
</div> // </div>
</Row> // </Row>
</CardHeader> // </CardHeader>
<Table className="align-items-center table-flush" responsive> // <Table className="align-items-center table-flush" responsive>
<thead className="thead-light"> // <thead className="thead-light">
<tr> // <tr>
<th scope="col">Referral</th> // <th scope="col">Referral</th>
<th scope="col">Visitors</th> // <th scope="col">Visitors</th>
<th scope="col" /> // <th scope="col" />
</tr> // </tr>
</thead> // </thead>
<tbody> // <tbody>
<tr> // <tr>
<th scope="row">Facebook</th> // <th scope="row">Facebook</th>
<td>1,480</td> // <td>1,480</td>
<td> // <td>
<div className="d-flex align-items-center"> // <div className="d-flex align-items-center">
<span className="mr-2">60%</span> // <span className="mr-2">60%</span>
<div> // <div>
<Progress // <Progress
max="100" // max="100"
value="60" // value="60"
barClassName="bg-gradient-danger" // barClassName="bg-gradient-danger"
/> // />
</div> // </div>
</div> // </div>
</td> // </td>
</tr> // </tr>
<tr> // <tr>
<th scope="row">Facebook</th> // <th scope="row">Facebook</th>
<td>5,480</td> // <td>5,480</td>
<td> // <td>
<div className="d-flex align-items-center"> // <div className="d-flex align-items-center">
<span className="mr-2">70%</span> // <span className="mr-2">70%</span>
<div> // <div>
<Progress // <Progress
max="100" // max="100"
value="70" // value="70"
barClassName="bg-gradient-success" // barClassName="bg-gradient-success"
/> // />
</div> // </div>
</div> // </div>
</td> // </td>
</tr> // </tr>
<tr> // <tr>
<th scope="row">Google</th> // <th scope="row">Google</th>
<td>4,807</td> // <td>4,807</td>
<td> // <td>
<div className="d-flex align-items-center"> // <div className="d-flex align-items-center">
<span className="mr-2">80%</span> // <span className="mr-2">80%</span>
<div> // <div>
<Progress max="100" value="80" /> // <Progress max="100" value="80" />
</div> // </div>
</div> // </div>
</td> // </td>
</tr> // </tr>
<tr> // <tr>
<th scope="row">Instagram</th> // <th scope="row">Instagram</th>
<td>3,678</td> // <td>3,678</td>
<td> // <td>
<div className="d-flex align-items-center"> // <div className="d-flex align-items-center">
<span className="mr-2">75%</span> // <span className="mr-2">75%</span>
<div> // <div>
<Progress // <Progress
max="100" // max="100"
value="75" // value="75"
barClassName="bg-gradient-info" // barClassName="bg-gradient-info"
/> // />
</div> // </div>
</div> // </div>
</td> // </td>
</tr> // </tr>
<tr> // <tr>
<th scope="row">twitter</th> // <th scope="row">twitter</th>
<td>2,645</td> // <td>2,645</td>
<td> // <td>
<div className="d-flex align-items-center"> // <div className="d-flex align-items-center">
<span className="mr-2">30%</span> // <span className="mr-2">30%</span>
<div> // <div>
<Progress // <Progress
max="100" // max="100"
value="30" // value="30"
barClassName="bg-gradient-warning" // barClassName="bg-gradient-warning"
/> // />
</div> // </div>
</div> // </div>
</td> // </td>
</tr> // </tr>
</tbody> // </tbody>
</Table> // </Table>
</Card> // </Card>
</Col> // </Col>
</Row> // </Row>
</Container> // </Container>
</div> // </div>
); );
}; };

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

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