init
Cette révision appartient à :
@@ -0,0 +1,251 @@
|
||||
import Link from "next/link";
|
||||
import { DropdownMenu, DropdownToggle, UncontrolledDropdown } from "reactstrap";
|
||||
function Header() {
|
||||
return (
|
||||
<>
|
||||
<div className="header">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-xxl-12">
|
||||
<div className="header-content">
|
||||
<div className="">
|
||||
|
||||
<div className="search">
|
||||
<form action="#">
|
||||
{/* <div className="input-group">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Search Here"
|
||||
/>
|
||||
<span className="input-group-text">
|
||||
<i className="ri-search-line"></i>
|
||||
</span>
|
||||
</div> */}
|
||||
|
||||
<div className="d-flex align-items-center gap-2 ">
|
||||
<a className="full-logo">
|
||||
<img style={{width:'200px'}} src="./images/kerala/keralawater.png" alt="" width="30" />
|
||||
</a>
|
||||
{/* <h1 className="p-0 m-0">Kerala Water Authority</h1> */}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="header-right">
|
||||
<div
|
||||
className="dark-light-toggle"
|
||||
onclick="themeToggle()"
|
||||
>
|
||||
<span className="dark">
|
||||
<i className="ri-moon-line"></i>
|
||||
</span>
|
||||
<span className="light">
|
||||
<i className="ri-sun-line"></i>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<UncontrolledDropdown
|
||||
tag="div"
|
||||
className="nav-item dropdown notification"
|
||||
>
|
||||
<DropdownToggle
|
||||
tag="div"
|
||||
data-toggle="dropdown"
|
||||
>
|
||||
<div className="notify-bell icon-menu">
|
||||
<span>
|
||||
<i className="ri-notification-2-line"></i>
|
||||
</span>
|
||||
</div>
|
||||
</DropdownToggle>
|
||||
<DropdownMenu
|
||||
right
|
||||
className="dropdown-menu notification-list"
|
||||
>
|
||||
<h4>Recent Notification</h4>
|
||||
<div className="lists">
|
||||
<Link href="#">
|
||||
<a className="">
|
||||
<div className="d-flex align-items-center">
|
||||
<span className="me-3 icon success">
|
||||
<i className="ri-check-line"></i>
|
||||
</span>
|
||||
<div>
|
||||
<p>
|
||||
Account
|
||||
created
|
||||
successfully
|
||||
</p>
|
||||
<span>
|
||||
2020-11-04
|
||||
12:00:23
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="#">
|
||||
<a className="">
|
||||
<div className="d-flex align-items-center">
|
||||
<span className="me-3 icon fail">
|
||||
<i className="ri-close-line"></i>
|
||||
</span>
|
||||
<div>
|
||||
<p>
|
||||
2FA
|
||||
verification
|
||||
failed
|
||||
</p>
|
||||
<span>
|
||||
2020-11-04
|
||||
12:00:23
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="#">
|
||||
<a className="">
|
||||
<div className="d-flex align-items-center">
|
||||
<span className="me-3 icon success">
|
||||
<i className="ri-check-line"></i>
|
||||
</span>
|
||||
<div>
|
||||
<p>
|
||||
Device
|
||||
confirmation
|
||||
completed
|
||||
</p>
|
||||
<span>
|
||||
2020-11-04
|
||||
12:00:23
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="#">
|
||||
<a className="">
|
||||
<div className="d-flex align-items-center">
|
||||
<span className="me-3 icon pending">
|
||||
<i className="ri-question-mark"></i>
|
||||
</span>
|
||||
<div>
|
||||
<p>
|
||||
Phone
|
||||
verification
|
||||
pending
|
||||
</p>
|
||||
<span>
|
||||
2020-11-04
|
||||
12:00:23
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="/notification">
|
||||
<a>
|
||||
More
|
||||
<i className="ri-arrow-right-s-line"></i>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</DropdownMenu>
|
||||
</UncontrolledDropdown>
|
||||
|
||||
<UncontrolledDropdown
|
||||
tag="div"
|
||||
className="dropdown profile_log"
|
||||
>
|
||||
<DropdownToggle
|
||||
tag="div"
|
||||
data-toggle="dropdown"
|
||||
>
|
||||
<div className="user icon-menu ">
|
||||
<span>
|
||||
<i className="ri-user-line"></i>
|
||||
</span>
|
||||
</div>
|
||||
</DropdownToggle>
|
||||
<DropdownMenu
|
||||
right
|
||||
className="dropdown-menu"
|
||||
>
|
||||
<div className="user-email">
|
||||
<div className="user">
|
||||
<span className="thumb">
|
||||
<img
|
||||
src="./images/profile/3.png"
|
||||
alt=""
|
||||
/>
|
||||
</span>
|
||||
<div className="user-info">
|
||||
<h5>Jannatul Maowa</h5>
|
||||
<span>
|
||||
Intez.inc@gmail.com
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Link href="/profile">
|
||||
<a className="dropdown-item">
|
||||
<span>
|
||||
<i className="ri-user-line"></i>
|
||||
</span>
|
||||
Profile
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="/balance">
|
||||
<a className="dropdown-item">
|
||||
<span>
|
||||
<i className="ri-wallet-line"></i>
|
||||
</span>
|
||||
Balance
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="/settings-profile">
|
||||
<a className="dropdown-item">
|
||||
<span>
|
||||
<i className="ri-settings-3-line"></i>
|
||||
</span>
|
||||
Settings
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="/settings-activity">
|
||||
<a className="dropdown-item">
|
||||
<span>
|
||||
<i className="ri-time-line"></i>
|
||||
</span>
|
||||
Activity
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="/lock">
|
||||
<a className="dropdown-item">
|
||||
<span>
|
||||
<i className="ri-lock-line"></i>
|
||||
</span>
|
||||
Lock
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="/signin">
|
||||
<a className="dropdown-item logout">
|
||||
<i className="ri-logout-circle-line"></i>
|
||||
Logout
|
||||
</a>
|
||||
</Link>
|
||||
</DropdownMenu>
|
||||
</UncontrolledDropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default Header;
|
||||
@@ -0,0 +1,41 @@
|
||||
import Link from "next/link";
|
||||
function HeaderLanding() {
|
||||
return (
|
||||
<>
|
||||
<div className="header landing">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-xl-12">
|
||||
<nav className="navbar">
|
||||
<div className="brand-logo">
|
||||
<Link href="/">
|
||||
<a>
|
||||
<img src="./images/logo.png" alt="" />
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="header-right">
|
||||
<div
|
||||
className="dark-light-toggle"
|
||||
onclick="themeToggle()"
|
||||
>
|
||||
<span className="dark">
|
||||
<i className="icofont-moon"></i>
|
||||
</span>
|
||||
<span className="light">
|
||||
<i className="icofont-sun-alt"></i>
|
||||
</span>
|
||||
</div>
|
||||
<a href="#" className="btn btn-primary">
|
||||
Buy
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default HeaderLanding;
|
||||
@@ -0,0 +1,46 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import Header from "./Header";
|
||||
import PageHead from "./PageHead";
|
||||
import PageTitle from "./PageTitle";
|
||||
import Sidebar from "./sidebar";
|
||||
|
||||
const Layout = ({
|
||||
headTitle,
|
||||
children,
|
||||
pageTitle,
|
||||
pageTitleSub,
|
||||
pageClass,
|
||||
parent,
|
||||
child,
|
||||
}) => {
|
||||
const [height, setHeight] = useState();
|
||||
useEffect(() => {
|
||||
setHeight(window.screen.height);
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<PageHead headTitle={headTitle} />
|
||||
<div id="main-wrapper" className={pageClass}>
|
||||
<Header />
|
||||
<Sidebar />
|
||||
|
||||
<div className="content-body" style={{ minHeight: height - 122 }}>
|
||||
|
||||
<div className="container ">
|
||||
{pageTitle && (
|
||||
<PageTitle
|
||||
pageTitle={pageTitle}
|
||||
pageTitleSub={pageTitleSub}
|
||||
parent={parent}
|
||||
child={child}
|
||||
/>
|
||||
)}
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
@@ -0,0 +1,14 @@
|
||||
import Head from "next/head";
|
||||
function PageHead({headTitle}) {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>
|
||||
{headTitle ? headTitle : "Intez - Dashboard React App"}
|
||||
</title>
|
||||
<link rel="icon" href="/favicon.png" />
|
||||
</Head>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default PageHead;
|
||||
@@ -0,0 +1,26 @@
|
||||
function PageTitle({ pageTitle, pageTitleSub, parent, child }) {
|
||||
return (
|
||||
<>
|
||||
<div className="page-title">
|
||||
<div className="row align-items-center justify-content-between">
|
||||
<div className="col-6 d-none d-md-block">
|
||||
<div className="page-title-content">
|
||||
<h3>{pageTitle}</h3>
|
||||
<p className="mb-2">{pageTitleSub}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-auto">
|
||||
<div className="breadcrumbs">
|
||||
<a href="#">{parent} </a>
|
||||
<span>
|
||||
<i className="ri-arrow-right-s-line"></i>
|
||||
</span>
|
||||
<a href="#">{child}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default PageTitle;
|
||||
@@ -0,0 +1,82 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
function SettingsMenu() {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<>
|
||||
{/* <li className={router.pathname == "/" ? "active" : ""}>
|
||||
<Link href="/">
|
||||
<a>
|
||||
<span>
|
||||
<i className="bi bi-house"></i>
|
||||
</span>
|
||||
<span className="nav-text">Dashboard</span>
|
||||
</a>
|
||||
</Link>
|
||||
</li> */}
|
||||
|
||||
<ul className="settings-menu">
|
||||
<li
|
||||
className={
|
||||
router.pathname == "/settings-profile" ? "active" : ""
|
||||
}
|
||||
>
|
||||
<Link href="/settings-profile">
|
||||
<a>Profile</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li
|
||||
className={
|
||||
router.pathname == "/settings-application"
|
||||
? "active"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
<Link href="/settings-application">
|
||||
<a>Application</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li
|
||||
className={
|
||||
router.pathname == "/settings-security" ? "active" : ""
|
||||
}
|
||||
>
|
||||
<Link href="/settings-security">
|
||||
<a>Security</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li
|
||||
className={
|
||||
router.pathname == "/settings-activity" ? "active" : ""
|
||||
}
|
||||
>
|
||||
<Link href="/settings-activity">
|
||||
<a>Activity</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li
|
||||
className={
|
||||
router.pathname == "/settings-payment-method"
|
||||
? "active"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
<Link href="/settings-payment-method">
|
||||
<a>Payment Method</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li
|
||||
className={
|
||||
router.pathname == "/settings-api" ? "active" : ""
|
||||
}
|
||||
>
|
||||
<Link href="/settings-api">
|
||||
<a>API</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default SettingsMenu;
|
||||
@@ -0,0 +1,199 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import React from 'react';
|
||||
|
||||
function Sidebar() {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<>
|
||||
<div className="sidebar">
|
||||
<div className="brand-logo">
|
||||
|
||||
{/* <Link href="/">
|
||||
<a className="mini-logo">
|
||||
<img src="./images/logoi.png" alt="" width="40" />
|
||||
</a>
|
||||
</Link> */}
|
||||
</div>
|
||||
<div className="menu">
|
||||
<ul>
|
||||
<li className={`${router.pathname == "/" ? "active" : ""} align-items-center d-flex flex-column justify-content-center`}>
|
||||
<Link href="/">
|
||||
<span>
|
||||
<a>
|
||||
<span>
|
||||
<i className="ri-home-5-line"></i>
|
||||
|
||||
</span>
|
||||
|
||||
|
||||
</a>
|
||||
<span className="text-white">Home</span>
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li
|
||||
className={
|
||||
` align-items-center d-flex flex-column justify-content-center`
|
||||
}
|
||||
>
|
||||
<Link href="/water">
|
||||
|
||||
<span >
|
||||
<a>
|
||||
<span>
|
||||
<i className="fa-solid fa-droplet"></i>
|
||||
</span>
|
||||
|
||||
</a>
|
||||
<span className="text-white">Water</span>
|
||||
</span>
|
||||
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li
|
||||
className={
|
||||
`align-items-center d-flex flex-column justify-content-center`
|
||||
}
|
||||
>
|
||||
<Link href="/services">
|
||||
|
||||
<span className="d-flex flex-column align-items-center">
|
||||
<a>
|
||||
<span>
|
||||
<i class="fa-solid fa-screwdriver-wrench"></i>
|
||||
</span>
|
||||
|
||||
</a>
|
||||
<span className="text-white">Services</span>
|
||||
</span>
|
||||
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li
|
||||
className={
|
||||
`${ router.pathname == "/bill"
|
||||
? "active"
|
||||
: ""} align-items-center d-flex flex-column justify-content-center`
|
||||
}
|
||||
>
|
||||
<Link href="/bill">
|
||||
<span className="d-flex flex-column align-items-center">
|
||||
<a>
|
||||
<span>
|
||||
<i className="ri-wallet-line"></i>
|
||||
</span>
|
||||
|
||||
</a>
|
||||
<span className="text-white">Payment</span>
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li
|
||||
className={
|
||||
`${router.pathname == "/signin"
|
||||
? "active"
|
||||
: " logout"} d-none d-md-block`
|
||||
}
|
||||
>
|
||||
<Link href="/signin">
|
||||
<a>
|
||||
<span>
|
||||
<i className="ri-logout-circle-line"></i>
|
||||
</span>
|
||||
<span className="nav-text">Signout</span>
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="card-limit-progress">
|
||||
<div className="d-flex justify-content-between align-items-center mb-3">
|
||||
<div className="flex-grow-2 me-3">
|
||||
<div className="d-flex justify-content-between mb-1">
|
||||
<h5 className="mb-1">Visa</h5>
|
||||
<p className="mb-0">
|
||||
<strong>75% </strong>
|
||||
</p>
|
||||
</div>
|
||||
<div className="progress">
|
||||
<div
|
||||
className="progress-bar bg-light"
|
||||
role="progressbar"
|
||||
style={{
|
||||
width: "75%",
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex justify-content-between align-items-center mb-3">
|
||||
<div className="flex-grow-2 me-3">
|
||||
<div className="d-flex justify-content-between mb-1">
|
||||
<h5 className="mb-1">Master</h5>
|
||||
<p className="mb-0">
|
||||
<strong>65% </strong>
|
||||
</p>
|
||||
</div>
|
||||
<div className="progress">
|
||||
<div
|
||||
className="progress-bar bg-white"
|
||||
role="progressbar"
|
||||
style={{
|
||||
width: "65%",
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex justify-content-between align-items-center mb-3">
|
||||
<div className="flex-grow-2 me-3">
|
||||
<div className="d-flex justify-content-between mb-1">
|
||||
<h5 className="mb-1">Paypal</h5>
|
||||
<p className="mb-0">
|
||||
<strong>50% </strong>
|
||||
</p>
|
||||
</div>
|
||||
<div className="progress">
|
||||
<div
|
||||
className="progress-bar bg-white"
|
||||
role="progressbar"
|
||||
style={{
|
||||
width: "50%",
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex justify-content-between align-items-center mb-2">
|
||||
<div className="flex-grow-2 me-3">
|
||||
<div className="d-flex justify-content-between mb-1">
|
||||
<h5 className="mb-1">Amex</h5>
|
||||
<p className="mb-0">
|
||||
<strong>20% </strong>
|
||||
</p>
|
||||
</div>
|
||||
<div className="progress">
|
||||
<div
|
||||
className="progress-bar bg-white"
|
||||
role="progressbar"
|
||||
style={{
|
||||
width: "20%",
|
||||
}}
|
||||
>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default Sidebar;
|
||||
Référencer dans un nouveau ticket
Bloquer un utilisateur