init
This commit is contained in:
@@ -0,0 +1,94 @@
|
||||
import { Bar } from "react-chartjs-2";
|
||||
|
||||
function StackedBarChart() {
|
||||
const data = {
|
||||
labels: [
|
||||
"4 Jan",
|
||||
"5 Jan",
|
||||
"6 Jan",
|
||||
"7 Jan",
|
||||
"8 Jan",
|
||||
"9 Jan",
|
||||
"10 Jan",
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
label: "Youtube",
|
||||
backgroundColor: "#1652F0",
|
||||
borderColor: "transparent",
|
||||
data: [35, 65, 52, 115, 98, 185, 125],
|
||||
lineTension: 0,
|
||||
pointRadius: 0,
|
||||
borderWidth: 2,
|
||||
},
|
||||
{
|
||||
label: "Facebook",
|
||||
backgroundColor: "#f73164",
|
||||
borderColor: "transparent",
|
||||
data: [40, 105, 92, 155, 138, 205, 165],
|
||||
lineTension: 0,
|
||||
// borderDash: [10, 5],
|
||||
borderWidth: 1,
|
||||
pointRadius: 0,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const options = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
stacked: true,
|
||||
barPercentage: 0.63,
|
||||
gridLines: {
|
||||
display: false,
|
||||
drawBorder: false,
|
||||
},
|
||||
ticks: {
|
||||
fontColor: "#8a909d",
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
stacked: true,
|
||||
gridLines: {
|
||||
display: true,
|
||||
color: "#eee",
|
||||
},
|
||||
ticks: {
|
||||
stepSize: 50,
|
||||
fontColor: "#8a909d",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
tooltips: {
|
||||
mode: "index",
|
||||
intersect: false,
|
||||
titleFontColor: "#888",
|
||||
bodyFontColor: "#555",
|
||||
titleFontSize: 12,
|
||||
bodyFontSize: 15,
|
||||
backgroundColor: "rgba(256,256,256,0.95)",
|
||||
displayColors: true,
|
||||
xPadding: 10,
|
||||
yPadding: 7,
|
||||
borderColor: "rgba(220, 220, 220, 0.9)",
|
||||
borderWidth: 2,
|
||||
caretSize: 6,
|
||||
caretPadding: 5,
|
||||
},
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Bar data={data} height={150} options={options} id="activityBar" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default StackedBarChart;
|
||||
@@ -0,0 +1,49 @@
|
||||
import { Doughnut } from "react-chartjs-2";
|
||||
|
||||
function DoughnutChart({ doughnutData }) {
|
||||
const data = {
|
||||
datasets: [
|
||||
{
|
||||
data: doughnutData.data,
|
||||
backgroundColor: [
|
||||
"rgba(22, 82, 240,1)",
|
||||
"rgba(22, 82, 240,0.5)",
|
||||
"rgba(22, 82, 240,0.15)",
|
||||
],
|
||||
},
|
||||
],
|
||||
labels: ["Facebook", "Youtube", "Google"],
|
||||
};
|
||||
|
||||
const options = {
|
||||
responsive: true,
|
||||
cutoutPercentage: 80,
|
||||
maintainAspectRatio: false,
|
||||
animation: {
|
||||
animateRotate: true,
|
||||
animateScale: true,
|
||||
},
|
||||
legend: {
|
||||
display: true,
|
||||
position: "bottom",
|
||||
labels: {
|
||||
usePointStyle: true,
|
||||
// fontFamily: "Segoe UI",
|
||||
fontSize: 12,
|
||||
fontColor: "#464a53",
|
||||
padding: 20,
|
||||
},
|
||||
},
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Doughnut
|
||||
data={data}
|
||||
height={150}
|
||||
options={options}
|
||||
id="most-selling-items"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default DoughnutChart;
|
||||
@@ -0,0 +1,99 @@
|
||||
import { Line } from "react-chartjs-2";
|
||||
|
||||
function LineChart({lineData}) {
|
||||
const data = {
|
||||
labels: [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar",
|
||||
"Apr",
|
||||
"May",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Aug",
|
||||
"Sep",
|
||||
"Oct",
|
||||
"Nov",
|
||||
"Dec",
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
label: "Water",
|
||||
backgroundColor: "rgba(22, 82, 240, 0.75)",
|
||||
borderColor: "transparent",
|
||||
data: lineData.facebook,
|
||||
lineTension: 0,
|
||||
pointRadius: 0,
|
||||
borderWidth: 2,
|
||||
},
|
||||
{
|
||||
label: "Water",
|
||||
backgroundColor: "rgba(22, 82, 240, 0.5)",
|
||||
borderColor: "transparent",
|
||||
data: lineData.youtube,
|
||||
lineTension: 0,
|
||||
// borderDash: [10, 5],
|
||||
borderWidth: 1,
|
||||
pointRadius: 0,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const options = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
stacked: true,
|
||||
barPercentage: 0.45,
|
||||
gridLines: {
|
||||
display: false,
|
||||
drawBorder: false,
|
||||
},
|
||||
ticks: {
|
||||
// fontColor: "#8a909d",
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
stacked: true,
|
||||
gridLines: {
|
||||
display: false,
|
||||
color: "#eee",
|
||||
},
|
||||
ticks: {
|
||||
stepSize: 50,
|
||||
// fontColor: "#8a909d",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
tooltips: {
|
||||
mode: "index",
|
||||
intersect: false,
|
||||
titleFontColor: "#888",
|
||||
bodyFontColor: "#555",
|
||||
titleFontSize: 12,
|
||||
bodyFontSize: 15,
|
||||
backgroundColor: "rgba(256,256,256,0.95)",
|
||||
displayColors: true,
|
||||
xPadding: 10,
|
||||
yPadding: 7,
|
||||
borderColor: "rgba(220, 220, 220, 0.9)",
|
||||
borderWidth: 2,
|
||||
caretSize: 6,
|
||||
caretPadding: 5,
|
||||
},
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Line data={data} height={150} options={options} id="activity" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default LineChart;
|
||||
@@ -0,0 +1,68 @@
|
||||
import { Line } from "react-chartjs-2";
|
||||
|
||||
function LineInvestment({ investmentData }) {
|
||||
const data = {
|
||||
labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016"],
|
||||
datasets: [
|
||||
{
|
||||
label: "Youtube",
|
||||
data: investmentData.data,
|
||||
backgroundColor: "rgba(22, 82, 240,0.15)",
|
||||
borderColor: "#1652F0",
|
||||
pointRadius: 0,
|
||||
// lineTension: 0,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const options = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
animation: {
|
||||
animateRotate: true,
|
||||
animateScale: true,
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
legend: {
|
||||
display: false,
|
||||
labels: {
|
||||
usePointStyle: false,
|
||||
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: true,
|
||||
gridLines: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
},
|
||||
scaleLabel: {
|
||||
display: false,
|
||||
labelString: 'Month'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
display: true,
|
||||
gridLines: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
},
|
||||
scaleLabel: {
|
||||
display: false,
|
||||
labelString: 'Value'
|
||||
}
|
||||
}]
|
||||
},
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Line data={data} height={150} options={options} id="transaction-graph" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default LineInvestment;
|
||||
@@ -0,0 +1,99 @@
|
||||
import { Bar } from "react-chartjs-2";
|
||||
|
||||
function StackedBarChart() {
|
||||
const data = {
|
||||
labels: [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar",
|
||||
"Apr",
|
||||
"May",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Aug",
|
||||
"Sep",
|
||||
"Oct",
|
||||
"Nov",
|
||||
"Dec",
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
label: "Youtube",
|
||||
backgroundColor: "rgba(22, 82, 240, 0.75)",
|
||||
borderColor: "transparent",
|
||||
data: [35, 65, 52, 115, 98, 185, 125,35, 65, 52, 115, 140],
|
||||
lineTension: 0,
|
||||
pointRadius: 0,
|
||||
borderWidth: 2,
|
||||
},
|
||||
{
|
||||
label: "Facebook",
|
||||
backgroundColor: "rgba(22, 82, 240, 0.5)",
|
||||
borderColor: "transparent",
|
||||
data: [40, 105, 92, 155, 138, 205, 165, 35, 65, 52, 115, 110],
|
||||
lineTension: 0,
|
||||
// borderDash: [10, 5],
|
||||
borderWidth: 1,
|
||||
pointRadius: 0,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const options = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
stacked: true,
|
||||
barPercentage: 0.40,
|
||||
gridLines: {
|
||||
display: false,
|
||||
drawBorder: false,
|
||||
},
|
||||
ticks: {
|
||||
fontColor: "#8a909d",
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
stacked: true,
|
||||
gridLines: {
|
||||
display: true,
|
||||
color: "#eee",
|
||||
},
|
||||
ticks: {
|
||||
stepSize: 50,
|
||||
fontColor: "#8a909d",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
tooltips: {
|
||||
mode: "index",
|
||||
intersect: false,
|
||||
titleFontColor: "#888",
|
||||
bodyFontColor: "#555",
|
||||
titleFontSize: 12,
|
||||
bodyFontSize: 15,
|
||||
backgroundColor: "rgba(256,256,256,0.95)",
|
||||
displayColors: true,
|
||||
xPadding: 10,
|
||||
yPadding: 7,
|
||||
borderColor: "rgba(220, 220, 220, 0.9)",
|
||||
borderWidth: 2,
|
||||
caretSize: 6,
|
||||
caretPadding: 5,
|
||||
},
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Bar data={data} height={150} options={options} id="activityBar" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default StackedBarChart;
|
||||
@@ -0,0 +1,69 @@
|
||||
import { useState } from "react";
|
||||
function BalanceDetails() {
|
||||
const [open, setOpen] = useState("a1");
|
||||
return (
|
||||
<>
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="total-balance">
|
||||
<p>Total Balance</p>
|
||||
<h2>$221,478</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-6 col-lg-6 col-md-6 col-sm-6">
|
||||
<div
|
||||
className={`${
|
||||
open === "a1"
|
||||
? "balance-stats active"
|
||||
: "balance-stats"
|
||||
}`}
|
||||
onMouseOver={() => setOpen("a1")}
|
||||
>
|
||||
<p>Last Month</p>
|
||||
<h3>$42,678</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-6 col-lg-6 col-md-6 col-sm-6">
|
||||
<div
|
||||
className={`${
|
||||
open === "a2"
|
||||
? "balance-stats active"
|
||||
: "balance-stats"
|
||||
}`}
|
||||
onMouseOver={() => setOpen("a2")}
|
||||
>
|
||||
<p>Expenses</p>
|
||||
<h3>$1,798</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-6 col-lg-6 col-md-6 col-sm-6">
|
||||
<div
|
||||
className={`${
|
||||
open === "a3"
|
||||
? "balance-stats active"
|
||||
: "balance-stats"
|
||||
}`}
|
||||
onMouseOver={() => setOpen("a3")}
|
||||
>
|
||||
<p>Taxes</p>
|
||||
<h3>$255.25</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-6 col-lg-6 col-md-6 col-sm-6">
|
||||
<div
|
||||
className={`${
|
||||
open === "a4"
|
||||
? "balance-stats active"
|
||||
: "balance-stats"
|
||||
}`}
|
||||
onMouseOver={() => setOpen("a4")}
|
||||
>
|
||||
<p>Debt</p>
|
||||
<h3>$365,478</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default BalanceDetails;
|
||||
@@ -0,0 +1,59 @@
|
||||
import { useState } from "react";
|
||||
function Bills() {
|
||||
const [open, setOpen] = useState("a1");
|
||||
return (
|
||||
<>
|
||||
<div className="bills-widget">
|
||||
<div className={`${
|
||||
open === "a1"
|
||||
? "bills-widget-content d-flex justify-content-between align-items-center active"
|
||||
: "bills-widget-content d-flex justify-content-between align-items-center"
|
||||
}`}
|
||||
onMouseOver={() => setOpen("a1")}>
|
||||
<div>
|
||||
<p>Netflix</p>
|
||||
<h4>$17.00</h4>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" className="btn btn-primary">
|
||||
Pay Now
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`${
|
||||
open === "a2"
|
||||
? "bills-widget-content d-flex justify-content-between align-items-center active"
|
||||
: "bills-widget-content d-flex justify-content-between align-items-center"
|
||||
}`}
|
||||
onMouseOver={() => setOpen("a2")}>
|
||||
<div>
|
||||
<p className="text-danger">Spotify</p>
|
||||
<h4>$11.00</h4>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" className="btn btn-primary">
|
||||
Pay Now
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`${
|
||||
open === "a3"
|
||||
? "bills-widget-content d-flex justify-content-between align-items-center active"
|
||||
: "bills-widget-content d-flex justify-content-between align-items-center"
|
||||
}`}
|
||||
onMouseOver={() => setOpen("a3")}>
|
||||
<div>
|
||||
<p className="text-danger">Spotify</p>
|
||||
<h4>$11.00</h4>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" className="btn btn-primary">
|
||||
Pay Now
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default Bills;
|
||||
@@ -0,0 +1,154 @@
|
||||
import PerfectScrollbar from "react-perfect-scrollbar";
|
||||
function GoalsBudget() {
|
||||
return (
|
||||
<>
|
||||
<div className="budget-content" style={{ height: "295px" }}>
|
||||
<PerfectScrollbar>
|
||||
<ul>
|
||||
<li className="d-flex justify-content-between align-items-center">
|
||||
<div className="d-flex flex-grow-2">
|
||||
<div className="budget-icon me-3 mt-1">
|
||||
<img
|
||||
src="/images/social/facebook.png"
|
||||
alt=""
|
||||
width="40"
|
||||
/>
|
||||
</div>
|
||||
<div className="budget-info flex-grow-2 me-3">
|
||||
<div className="d-flex justify-content-between mb-1">
|
||||
<h5 className="mb-1">Facebook Ads</h5>
|
||||
<p className="mb-0">
|
||||
<strong>75 </strong>/ 100
|
||||
</p>
|
||||
</div>
|
||||
<div className="progress">
|
||||
<div
|
||||
className="progress-bar"
|
||||
role="progressbar"
|
||||
style={{
|
||||
width: "75%",
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="d-flex justify-content-between align-items-center">
|
||||
<div className="d-flex flex-grow-2">
|
||||
<div className="budget-icon me-3 mt-1">
|
||||
<img
|
||||
src="/images/social/youtube.png"
|
||||
alt=""
|
||||
width="40"
|
||||
/>
|
||||
</div>
|
||||
<div className="budget-info flex-grow-2 me-3">
|
||||
<div className="d-flex justify-content-between mb-1">
|
||||
<h5 className="mb-1">Youtube Premium</h5>
|
||||
<p className="mb-0">
|
||||
<strong>25 </strong>/ 100
|
||||
</p>
|
||||
</div>
|
||||
<div className="progress">
|
||||
<div
|
||||
className="progress-bar bg-success"
|
||||
role="progressbar"
|
||||
style={{
|
||||
width: "25%",
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="d-flex justify-content-between align-items-center">
|
||||
<div className="d-flex flex-grow-2">
|
||||
<div className="budget-icon me-3 mt-1">
|
||||
<img
|
||||
src="/images/social/spotify.png"
|
||||
alt=""
|
||||
width="40"
|
||||
/>
|
||||
</div>
|
||||
<div className="budget-info flex-grow-2 me-3">
|
||||
<div className="d-flex justify-content-between mb-1">
|
||||
<h5 className="mb-1">Spotify Music</h5>
|
||||
<p className="mb-0">
|
||||
<strong>50 </strong>/ 100
|
||||
</p>
|
||||
</div>
|
||||
<div className="progress">
|
||||
<div
|
||||
className="progress-bar bg-info"
|
||||
role="progressbar"
|
||||
style={{
|
||||
width: "50%",
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="d-flex justify-content-between align-items-center">
|
||||
<div className="d-flex flex-grow-2">
|
||||
<div className="budget-icon me-3 mt-1">
|
||||
<img
|
||||
src="/images/social/skype.png"
|
||||
alt=""
|
||||
width="40"
|
||||
/>
|
||||
</div>
|
||||
<div className="budget-info flex-grow-2 me-3">
|
||||
<div className="d-flex justify-content-between mb-1">
|
||||
<h5 className="mb-1">Skype Premium</h5>
|
||||
<p className="mb-0">
|
||||
<strong>45 </strong>/ 100
|
||||
</p>
|
||||
</div>
|
||||
<div className="progress">
|
||||
<div
|
||||
className="progress-bar bg-danger"
|
||||
role="progressbar"
|
||||
style={{
|
||||
width: "45%",
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="d-flex justify-content-between align-items-center">
|
||||
<div className="d-flex flex-grow-2">
|
||||
<div className="budget-icon me-3 mt-1">
|
||||
<img
|
||||
src="/images/social/envato.png"
|
||||
alt=""
|
||||
width="40"
|
||||
/>
|
||||
</div>
|
||||
<div className="budget-info flex-grow-2 me-3">
|
||||
<div className="d-flex justify-content-between mb-1">
|
||||
<h5 className="mb-1">Envato Element</h5>
|
||||
<p className="mb-0">
|
||||
<strong>35 </strong>/ 100
|
||||
</p>
|
||||
</div>
|
||||
<div className="progress">
|
||||
<div
|
||||
className="progress-bar bg-purple"
|
||||
role="progressbar"
|
||||
style={{
|
||||
width: "35%",
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</PerfectScrollbar>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default GoalsBudget;
|
||||
@@ -0,0 +1,122 @@
|
||||
import { useState } from "react";
|
||||
import PerfectScrollbar from "react-perfect-scrollbar";
|
||||
function TransactionHistory() {
|
||||
const [open, setOpen] = useState("p1");
|
||||
return (
|
||||
<>
|
||||
<div className="invoice-content" style={{ height: "295px" }}>
|
||||
<PerfectScrollbar>
|
||||
<ul>
|
||||
<li
|
||||
className={`${
|
||||
open === "p1"
|
||||
? "d-flex justify-content-between active"
|
||||
: "d-flex justify-content-between"
|
||||
}`}
|
||||
onMouseOver={() => setOpen("p1")}
|
||||
>
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="invoice-user-img me-3">
|
||||
<img
|
||||
src="/images/avatar/1.jpg"
|
||||
alt=""
|
||||
width="50"
|
||||
/>
|
||||
</div>
|
||||
<div className="invoice-info">
|
||||
<h5 className="mb-0">Terry P. Camacho</h5>
|
||||
<p>5 january 2021 at 10.15 pm</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-end">
|
||||
<h5 className="mb-2">+450.00</h5>
|
||||
<span className=" text-white bg-success">Paid</span>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
className={`${
|
||||
open === "p2"
|
||||
? "d-flex justify-content-between active"
|
||||
: "d-flex justify-content-between"
|
||||
}`}
|
||||
onMouseOver={() => setOpen("p2")}
|
||||
>
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="invoice-user-img me-3">
|
||||
<img
|
||||
src="/images/avatar/2.jpg"
|
||||
alt=""
|
||||
width="50"
|
||||
/>
|
||||
</div>
|
||||
<div className="invoice-info">
|
||||
<h5 className="mb-0">John L. Foster</h5>
|
||||
<p>5 january 2021 at 10.15 pm</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-end">
|
||||
<h5 className="mb-2">+450.00</h5>
|
||||
<span className=" text-white bg-warning">Due</span>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
className={`${
|
||||
open === "p3"
|
||||
? "d-flex justify-content-between active"
|
||||
: "d-flex justify-content-between"
|
||||
}`}
|
||||
onMouseOver={() => setOpen("p3")}
|
||||
>
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="invoice-user-img me-3">
|
||||
<img
|
||||
src="/images/avatar/3.jpg"
|
||||
alt=""
|
||||
width="50"
|
||||
/>
|
||||
</div>
|
||||
<div className="invoice-info">
|
||||
<h5 className="mb-0">John C. Adams</h5>
|
||||
<p>5 january 2021 at 10.15 pm</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-end">
|
||||
<h5 className="mb-2">+450.00</h5>
|
||||
<span className=" text-white bg-danger">
|
||||
Cancel
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
className={`${
|
||||
open === "p4"
|
||||
? "d-flex justify-content-between active"
|
||||
: "d-flex justify-content-between"
|
||||
}`}
|
||||
onMouseOver={() => setOpen("p4")}
|
||||
>
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="invoice-user-img me-3">
|
||||
<img
|
||||
src="/images/avatar/4.jpg"
|
||||
alt=""
|
||||
width="50"
|
||||
/>
|
||||
</div>
|
||||
<div className="invoice-info">
|
||||
<h5 className="mb-0">Weston P. Thomas</h5>
|
||||
<p>5 january 2021 at 10.15 pm</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-end">
|
||||
<h5 className="mb-2">+450.00</h5>
|
||||
<span className=" text-white bg-success">Paid</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</PerfectScrollbar>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default TransactionHistory;
|
||||
@@ -0,0 +1,87 @@
|
||||
import { ErrorMessage, Field, Form, Formik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
|
||||
const initialValues = {
|
||||
generateKey: "",
|
||||
confirmKey: "",
|
||||
};
|
||||
|
||||
const CreateApiSchema = Yup.object().shape({
|
||||
generateKey: Yup.string().required("Generate Key is required"),
|
||||
confirmKey: Yup.string().required("Confirm Key required"),
|
||||
});
|
||||
|
||||
function CreateApi() {
|
||||
return (
|
||||
<>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={CreateApiSchema}
|
||||
onSubmit={(fields) => {
|
||||
alert(
|
||||
"SUCCESS!! :-)\n\n" + JSON.stringify(fields, null, 4)
|
||||
);
|
||||
}}
|
||||
>
|
||||
{({ errors, status, touched }) => (
|
||||
<Form>
|
||||
<div className="row">
|
||||
<div className="col-xxl-6 col-xl-6 col-lg-6 mb-3">
|
||||
<label className="form-label">
|
||||
Generate New Key
|
||||
</label>
|
||||
<Field
|
||||
name="generateKey"
|
||||
type="text"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.generateKey &&
|
||||
touched.generateKey
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="generateKey"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-xxl-6 col-xl-6 col-lg-6 mb-3">
|
||||
<label className="form-label">
|
||||
Confirm Passphrase
|
||||
</label>
|
||||
<Field
|
||||
name="confirmKey"
|
||||
type="text"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.confirmKey &&
|
||||
touched.confirmKey
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="confirmKey"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-3">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary mr-2"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default CreateApi;
|
||||
@@ -0,0 +1,176 @@
|
||||
import { ErrorMessage, Field, Form, Formik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
|
||||
const initialValues = {
|
||||
fullName: "",
|
||||
email: "",
|
||||
address: "",
|
||||
city: "",
|
||||
country: "",
|
||||
postal: "",
|
||||
};
|
||||
|
||||
const PersonalInfoSchema = Yup.object().shape({
|
||||
fullName: Yup.string().required("Full is required"),
|
||||
email: Yup.string().email("Email is invalid").required("Email is required"),
|
||||
address: Yup.string().required("Present Address is required"),
|
||||
city: Yup.string().required("City is required"),
|
||||
postal: Yup.string().required("Post code is required"),
|
||||
country: Yup.string().required("country is required"),
|
||||
});
|
||||
|
||||
function PersonalInfo() {
|
||||
return (
|
||||
<>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={PersonalInfoSchema}
|
||||
onSubmit={(fields) => {
|
||||
alert(
|
||||
"SUCCESS!! :-)\n\n" + JSON.stringify(fields, null, 4)
|
||||
);
|
||||
}}
|
||||
>
|
||||
{({ errors, status, touched }) => (
|
||||
<Form>
|
||||
<div className="row">
|
||||
<div className="col-xxl-6 col-xl-6 col-lg-6 mb-3">
|
||||
<label className="form-label">Full Name</label>
|
||||
<Field
|
||||
name="fullName"
|
||||
type="text"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.fullName && touched.fullName
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="fullName"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-xxl-6 col-xl-6 col-lg-6 mb-3">
|
||||
<label className="form-label">Email</label>
|
||||
<Field
|
||||
name="email"
|
||||
type="text"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.email && touched.email
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="email"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-xxl-6 col-xl-6 col-lg-6 mb-3">
|
||||
<label className="form-label">Address</label>
|
||||
<Field
|
||||
name="address"
|
||||
type="text"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.address && touched.address
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="address"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-xxl-6 col-xl-6 col-lg-6 mb-3">
|
||||
<label className="form-label">City</label>
|
||||
<Field
|
||||
name="city"
|
||||
type="text"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.city && touched.city
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="city"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-xxl-6 col-xl-6 col-lg-6 mb-3">
|
||||
<label className="form-label">Post Code</label>
|
||||
<Field
|
||||
name="postal"
|
||||
type="text"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.postal && touched.postal
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="postal"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-xxl-6 col-xl-6 col-lg-6 mb-3">
|
||||
<label className="form-label">Country</label>
|
||||
<Field
|
||||
name="country"
|
||||
as="select"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.country && touched.country
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
>
|
||||
<option value="Bangladesh">
|
||||
Bangladesh
|
||||
</option>
|
||||
<option value="United States">
|
||||
United States
|
||||
</option>
|
||||
<option value="United Kingdom">
|
||||
United Kingdom
|
||||
</option>
|
||||
</Field>
|
||||
<ErrorMessage
|
||||
name="country"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-3">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary mr-2"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default PersonalInfo;
|
||||
@@ -0,0 +1,153 @@
|
||||
import { ErrorMessage, Field, Form, Formik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
|
||||
const initialValues = {
|
||||
language: "",
|
||||
currency: "",
|
||||
theme: "",
|
||||
timeZone: "",
|
||||
};
|
||||
|
||||
const PreferencesSchema = Yup.object().shape({
|
||||
language: Yup.string().required("Language is required"),
|
||||
currency: Yup.string().required("Currency is required"),
|
||||
theme: Yup.string().required("Theme is required"),
|
||||
timeZone: Yup.string().required("Timezone is required"),
|
||||
});
|
||||
|
||||
function Preferences() {
|
||||
return (
|
||||
<>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={PreferencesSchema}
|
||||
onSubmit={(fields) => {
|
||||
alert(
|
||||
"SUCCESS!! :-)\n\n" + JSON.stringify(fields, null, 4)
|
||||
);
|
||||
}}
|
||||
>
|
||||
{({ errors, status, touched }) => (
|
||||
<Form>
|
||||
<div className="row">
|
||||
<div className="col-xxl-6 col-xl-6 col-lg-6 mb-3">
|
||||
<label className="form-label">
|
||||
Language Default
|
||||
</label>
|
||||
<Field
|
||||
name="language"
|
||||
as="select"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.language && touched.language
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
>
|
||||
<option value="Bangladesh">
|
||||
Bangladesh
|
||||
</option>
|
||||
<option value="United States">
|
||||
United States
|
||||
</option>
|
||||
<option value="United Kingdom">
|
||||
United Kingdom
|
||||
</option>
|
||||
</Field>
|
||||
<ErrorMessage
|
||||
name="language"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-xxl-6 col-xl-6 col-lg-6 mb-3">
|
||||
<label className="form-label">Currency</label>
|
||||
<Field
|
||||
name="currency"
|
||||
as="select"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.currency && touched.currency
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
>
|
||||
<option value="">USD</option>
|
||||
<option value="">Euro</option>
|
||||
<option value="">BDT</option>
|
||||
</Field>
|
||||
<ErrorMessage
|
||||
name="currency"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-xxl-6 col-xl-6 col-lg-6 mb-3">
|
||||
<label className="form-label">Theme</label>
|
||||
<Field
|
||||
name="theme"
|
||||
as="select"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.theme && touched.theme
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
>
|
||||
<option value="">Light</option>
|
||||
<option value="">Dark</option>
|
||||
<option value="">Blue</option>
|
||||
</Field>
|
||||
<ErrorMessage
|
||||
name="theme"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-xxl-6 col-xl-6 col-lg-6 mb-3">
|
||||
<label className="form-label">Time Zone</label>
|
||||
<Field
|
||||
name="timeZone"
|
||||
as="select"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.timeZone && touched.timeZone
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
>
|
||||
<option>
|
||||
(GMT-12:00) International Date Line West
|
||||
</option>
|
||||
<option>
|
||||
(GMT-11:00) Midway Island, Samoa
|
||||
</option>
|
||||
<option>(GMT-10:00) Hawaii</option>
|
||||
<option>(GMT-09:00) Alaska</option>
|
||||
<option>
|
||||
(GMT-08:00) Pacific Time (US & Canada)
|
||||
</option>
|
||||
</Field>
|
||||
<ErrorMessage
|
||||
name="timeZone"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-3">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary mr-2"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default Preferences;
|
||||
@@ -0,0 +1,125 @@
|
||||
import { ErrorMessage, Field, Form, Formik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
import Link from "next/link";
|
||||
import AuthIcon from "./authselection/AuthIcon";
|
||||
const initialValues = {
|
||||
email: "",
|
||||
password: "",
|
||||
};
|
||||
|
||||
const SigninFormSchema = Yup.object().shape({
|
||||
email: Yup.string().email("Email is invalid").required("Email is required"),
|
||||
password: Yup.string()
|
||||
.min(6, "Password must be at least 6 characters")
|
||||
.required("Password is required"),
|
||||
});
|
||||
|
||||
function SigninForm() {
|
||||
return (
|
||||
<>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={SigninFormSchema}
|
||||
onSubmit={(fields) => {
|
||||
alert(
|
||||
"SUCCESS!! :-)\n\n" + JSON.stringify(fields, null, 4)
|
||||
);
|
||||
}}
|
||||
>
|
||||
{({ errors, status, touched }) => (
|
||||
<Form>
|
||||
<div className="row">
|
||||
|
||||
<div className="col-12 mb-3 d-flex justify-content-around">
|
||||
<input type="radio" id="html" className="d-none" name="fav_language" value="HTML" />
|
||||
<label className="auth-icon-label" for="html">
|
||||
<AuthIcon isActive={true} title="Consumer" icon="user" />
|
||||
</label>
|
||||
<input className="d-none" type="radio" id="css" name="fav_language" value="CSS" />
|
||||
<label className="auth-icon-label" for="css">
|
||||
<AuthIcon title="Employee" icon="address-card" />
|
||||
</label>
|
||||
<input className="d-none" type="radio" id="javascript" name="fav_language" value="JavaScript" />
|
||||
<label className="auth-icon-label" for="javascript">
|
||||
<AuthIcon title="Plumber" icon="gear" />
|
||||
</label>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="col-12 mb-3">
|
||||
<label className="form-label">Email</label>
|
||||
<Field
|
||||
name="email"
|
||||
type="text"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.email && touched.email
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="email"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className="col-12 mb-3">
|
||||
<label className="form-label">Password</label>
|
||||
<Field
|
||||
name="password"
|
||||
type="text"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.password && touched.password
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="password"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-6">
|
||||
<div className="form-check">
|
||||
<Field
|
||||
type="checkbox"
|
||||
name="acceptTerms"
|
||||
className={
|
||||
"form-check-input "
|
||||
}
|
||||
/>
|
||||
<label
|
||||
className="form-check-label"
|
||||
>
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-6 text-end">
|
||||
<Link href="/reset">
|
||||
<a>Forgot Password?</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 d-grid gap-2">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary mr-2"
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default SigninForm;
|
||||
@@ -0,0 +1,167 @@
|
||||
import { ErrorMessage, Field, Form, Formik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
import AuthIcon from "./authselection/AuthIcon";
|
||||
import Link from "next/link";
|
||||
|
||||
const initialValues = {
|
||||
fullName: "",
|
||||
email: "",
|
||||
password: "",
|
||||
acceptTerms: false,
|
||||
};
|
||||
|
||||
const SignupFormSchema = Yup.object().shape({
|
||||
fullName: Yup.string().required("Full is required"),
|
||||
email: Yup.string().email("Email is invalid").required("Email is required"),
|
||||
password: Yup.string()
|
||||
.min(6, "Password must be at least 6 characters")
|
||||
.required("Password is required"),
|
||||
acceptTerms: Yup.bool().oneOf([true], "Accept Ts & Cs is required"),
|
||||
});
|
||||
|
||||
function SignupForm() {
|
||||
return (
|
||||
<>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
|
||||
onSubmit={(fields) => {
|
||||
alert(
|
||||
"SUCCESS!! :-)\n\n" + JSON.stringify(fields, null, 4)
|
||||
);
|
||||
}}
|
||||
>
|
||||
{({ errors, status, touched }) => (
|
||||
<Form>
|
||||
<div className="row">
|
||||
|
||||
<div className="col-12 mb-1 d-flex justify-content-around">
|
||||
<input type="radio" id="html" className="d-none" name="fav_language" value="HTML" />
|
||||
<label className="auth-icon-label" for="html">
|
||||
<AuthIcon isActive={true} title="Consumer" icon="user" />
|
||||
</label>
|
||||
<input className="d-none" type="radio" id="css" name="fav_language" value="CSS" />
|
||||
<label className="auth-icon-label" for="css">
|
||||
<AuthIcon title="Employee" icon="address-card" />
|
||||
</label>
|
||||
<input className="d-none" type="radio" id="javascript" name="fav_language" value="JavaScript" />
|
||||
<label className="auth-icon-label" for="javascript">
|
||||
<AuthIcon title="Plumber" icon="gear" />
|
||||
</label>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="col-12 mb-1">
|
||||
<label className="form-label">Name</label>
|
||||
<Field
|
||||
name="name"
|
||||
type="text"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.email && touched.email
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="name"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 mb-1">
|
||||
<label className="form-label">Email</label>
|
||||
<Field
|
||||
name="email"
|
||||
type="text"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.email && touched.email
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="email"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-12 mb-1">
|
||||
<label className="form-label">Number</label>
|
||||
<Field
|
||||
name="number"
|
||||
type="number"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.email && touched.email
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="number"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className="col-12 mb-1">
|
||||
<label className="form-label">Password</label>
|
||||
<Field
|
||||
name="password"
|
||||
type="text"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.password && touched.password
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="password"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-6">
|
||||
<div className="form-check">
|
||||
<Field
|
||||
type="checkbox"
|
||||
name="acceptTerms"
|
||||
className={
|
||||
"form-check-input "
|
||||
}
|
||||
/>
|
||||
<label
|
||||
className="form-check-label"
|
||||
>
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-6 text-end">
|
||||
<Link href="/reset">
|
||||
<a>Forgot Password?</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-1 d-grid gap-2">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary mr-2"
|
||||
>
|
||||
Sign Up
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default SignupForm;
|
||||
@@ -0,0 +1,97 @@
|
||||
import { ErrorMessage, Field, Form, Formik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
|
||||
const initialValues = {
|
||||
fullName: "",
|
||||
photo: "",
|
||||
};
|
||||
|
||||
const UpdateAvatarSchema = Yup.object().shape({
|
||||
fullName: Yup.string().required("Full Name is required"),
|
||||
photo: Yup.string().required("Photo required"),
|
||||
});
|
||||
|
||||
function UpdateAvatar() {
|
||||
return (
|
||||
<>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={UpdateAvatarSchema}
|
||||
onSubmit={(fields) => {
|
||||
alert(
|
||||
"SUCCESS!! :-)\n\n" + JSON.stringify(fields, null, 4)
|
||||
);
|
||||
}}
|
||||
>
|
||||
{({ errors, status, touched }) => (
|
||||
<Form>
|
||||
<div className="row">
|
||||
<div className="col-12 mb-3">
|
||||
<label className="form-label">Full Name</label>
|
||||
<Field
|
||||
name="fullName"
|
||||
type="text"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.fullName && touched.fullName
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="fullName"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-xxl-12">
|
||||
<div className="d-flex align-items-center mb-3">
|
||||
<img
|
||||
className="me-3 rounded-circle me-0 me-sm-3"
|
||||
src="images/profile/3.png"
|
||||
width="55"
|
||||
height="55"
|
||||
alt=""
|
||||
/>
|
||||
<div className="media-body">
|
||||
<h4 className="mb-0">Jannatul Maowa</h4>
|
||||
<p className="mb-0">
|
||||
Max file size is 20mb
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<Field
|
||||
name="photo"
|
||||
type="file"
|
||||
className={
|
||||
|
||||
(errors.photo && touched.photo
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="photo"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-3">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary mr-2"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default UpdateAvatar;
|
||||
@@ -0,0 +1,83 @@
|
||||
import { ErrorMessage, Field, Form, Formik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
|
||||
const initialValues = {
|
||||
email: "",
|
||||
password: "",
|
||||
};
|
||||
|
||||
const UpdateInfoSchema = Yup.object().shape({
|
||||
email: Yup.string().email("Email is invalid").required("Email is required"),
|
||||
password: Yup.string()
|
||||
.min(6, "Password must be at least 6 characters")
|
||||
.required("Password is required"),
|
||||
});
|
||||
|
||||
function UpdateInfo() {
|
||||
return (
|
||||
<>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={UpdateInfoSchema}
|
||||
onSubmit={(fields) => {
|
||||
alert(
|
||||
"SUCCESS!! :-)\n\n" + JSON.stringify(fields, null, 4)
|
||||
);
|
||||
}}
|
||||
>
|
||||
{({ errors, status, touched }) => (
|
||||
<Form>
|
||||
<div className="row">
|
||||
<div className="col-12 mb-3">
|
||||
<label className="form-label">Email</label>
|
||||
<Field
|
||||
name="email"
|
||||
type="text"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.email && touched.email
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="email"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 mb-3">
|
||||
<label className="form-label">Password</label>
|
||||
<Field
|
||||
name="password"
|
||||
type="text"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.password && touched.password
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="password"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-3">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary mr-2"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default UpdateInfo;
|
||||
@@ -0,0 +1,16 @@
|
||||
import React from 'react'
|
||||
|
||||
function AuthIcon({title,icon,isActive=false}) {
|
||||
return (
|
||||
<div className={`align-items-center d-flex justify-content-center text-center flex-column `}>
|
||||
<div style={{fontSize:'25px',width:'50px',height:'50px'}} className=' text-center'>
|
||||
<i className={`px-2 fa-solid w-100 align-items-center d-flex justify-content-center h-100 fa-${icon} ${isActive ? 'auth-select-icon bg-primary text-white':''}`}></i>
|
||||
</div>
|
||||
<div className='font-13'>
|
||||
{title}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AuthIcon
|
||||
@@ -0,0 +1,59 @@
|
||||
import Tab from 'react-bootstrap/Tab';
|
||||
import Tabs from 'react-bootstrap/Tabs';
|
||||
import SigninForm from '../SigninForm';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
function Layoutform({ doughnutData }) {
|
||||
const [key, setKey] = React.useState('consumer');
|
||||
return (
|
||||
<React.Fragment>
|
||||
|
||||
|
||||
<Tabs
|
||||
defaultActiveKey="profile"
|
||||
id="justify-tab-example"
|
||||
className="mb-3 biz-tab-main"
|
||||
onSelect={(k) => setKey(k)}
|
||||
value={key}
|
||||
>
|
||||
<Tab className='border-bottom biz-tab-item selectedtab-biz' eventKey="consumer" title={ <div>
|
||||
<div>
|
||||
<i className="px-2 fa-solid fa-user"></i>
|
||||
</div>
|
||||
<div>
|
||||
Consumer
|
||||
</div>
|
||||
</div>
|
||||
}>
|
||||
<SigninForm />
|
||||
</Tab>
|
||||
|
||||
<Tab className='border-bottom biz-tab-item' eventKey="employee" title={ <div>
|
||||
<div>
|
||||
<i className="px-2 fa-solid fa-user"></i>
|
||||
</div>
|
||||
<div>
|
||||
Employee
|
||||
</div>
|
||||
</div>
|
||||
} >
|
||||
<SigninForm />
|
||||
</Tab>
|
||||
<Tab className='border-bottom biz-tab-item' eventKey="plumber" title={ <div>
|
||||
<div>
|
||||
<i className="px-2 fa-solid fa-gear"></i>
|
||||
</div>
|
||||
<div>
|
||||
Plumber
|
||||
</div>
|
||||
</div>
|
||||
}>
|
||||
<SigninForm />
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
export default Layoutform;
|
||||
@@ -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;
|
||||
@@ -0,0 +1,165 @@
|
||||
import React from 'react'
|
||||
|
||||
function InvoiceKPI({num}) {
|
||||
|
||||
|
||||
return (
|
||||
|
||||
<div className="card">
|
||||
<div className="card-header">
|
||||
<h4 className="card-title">Previous Invoices</h4>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
|
||||
<div className="invoice-table">
|
||||
<div className="table-responsive">
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
id="flexCheckDefault"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th>Client</th>
|
||||
<th>Amount</th>
|
||||
<th>Status</th>
|
||||
<th>Due</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
id="flexCheckDefault"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<img
|
||||
src="/images/avatar/1.jpg"
|
||||
alt=""
|
||||
width="30"
|
||||
className="me-2"
|
||||
/>
|
||||
Weston P. Thomas
|
||||
</td>
|
||||
<td>₹7000</td>
|
||||
<td>
|
||||
<span className="badge px-3 py-2 bg-success">
|
||||
Paid
|
||||
</span>
|
||||
</td>
|
||||
<td>February 16, 2021</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
id="flexCheckDefault"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<img
|
||||
src="/images/avatar/2.jpg"
|
||||
alt=""
|
||||
width="30"
|
||||
className="me-2"
|
||||
/>
|
||||
William D. Gibson
|
||||
</td>
|
||||
<td>₹650</td>
|
||||
<td>
|
||||
<span className="badge px-3 py-2 bg-success">
|
||||
Paid
|
||||
</span>
|
||||
</td>
|
||||
<td>December 21, 2021</td>
|
||||
</tr>
|
||||
|
||||
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
id="flexCheckDefault"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<img
|
||||
src="/images/avatar/5.jpg"
|
||||
alt=""
|
||||
width="30"
|
||||
className="me-2"
|
||||
/>
|
||||
Terry P. Camacho
|
||||
</td>
|
||||
<td>₹465</td>
|
||||
<td>
|
||||
<span className="badge px-3 py-2 bg-danger">
|
||||
Cancel
|
||||
</span>
|
||||
</td>
|
||||
<td>November 26, 2021</td>
|
||||
</tr>
|
||||
|
||||
{num?<React.Fragment>
|
||||
<tr>
|
||||
<td>
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
id="flexCheckDefault"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<img
|
||||
src="/images/avatar/5.jpg"
|
||||
alt=""
|
||||
width="30"
|
||||
className="me-2"
|
||||
/>
|
||||
Terry P. Camacho
|
||||
</td>
|
||||
<td>₹645</td>
|
||||
<td>
|
||||
<span className="badge px-3 py-2 bg-danger">
|
||||
Cancel
|
||||
</span>
|
||||
</td>
|
||||
<td>November 26, 2021</td>
|
||||
</tr>
|
||||
|
||||
</React.Fragment>:null}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default InvoiceKPI
|
||||
@@ -0,0 +1,24 @@
|
||||
import React from 'react'
|
||||
|
||||
function NewConnection() {
|
||||
return (
|
||||
<div className="col-xl-12 col-lg-12">
|
||||
{/* </div> <div className="col-xl-6 col-lg-6"> */}
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className='d-flex flex-column align-items-center'>
|
||||
<div className='water-connection'>
|
||||
<img src='./images/kerala/tap.jpg' className='w-100 h-100' />
|
||||
</div>
|
||||
<div className='d-flex flex-column pt-3'>
|
||||
<span className='text-dark' style={{fontSize:'20px'}}> </span>
|
||||
<button className="btn bg-primary br-btn">Click here for new Connection</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default NewConnection
|
||||
@@ -0,0 +1,49 @@
|
||||
import React from 'react'
|
||||
|
||||
function PaymentAddKPI() {
|
||||
return (
|
||||
|
||||
<div className="card">
|
||||
{/* <div className="card-header">
|
||||
<h4 className="card-title">Stats</h4>
|
||||
</div> */}
|
||||
<div className="card-body">
|
||||
<div>
|
||||
<h3>Your Wallet</h3>
|
||||
</div>
|
||||
<hr />
|
||||
<div>
|
||||
<h1 className='p-0 m-0'>₹0.00</h1>
|
||||
<span className='font-14'>Your Current Balance</span>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div>
|
||||
<div className='text-dark'>Add money to wallet</div>
|
||||
<span style={{fontSize:'10px'}}>We recommend to recharge your Wallet with <span className='text-success'>₹500.00</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="py-4 position-relative">
|
||||
<span style={{top:'30px'}} className="align-items-center pl-2 position-absolute pt-2">
|
||||
<span className='px-2'>₹</span>
|
||||
</span>
|
||||
|
||||
<input type="number" className="form-control hs_borderRadius-4 pl-4" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button className='btn bg-primary br-btn'>Proceed</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default PaymentAddKPI
|
||||
@@ -0,0 +1,29 @@
|
||||
import React from 'react'
|
||||
|
||||
function PaymentKPI() {
|
||||
return (
|
||||
<div className="col-xxl-12 col-xl-6 col-lg-12">
|
||||
<div id="user-activity" className="card" data-aos="fade-up">
|
||||
<div className="card-header">
|
||||
<h4 className="card-title">Amount To Be Paid</h4>
|
||||
</div>
|
||||
|
||||
<div className="card-body">
|
||||
|
||||
<div className='d-flex justify-content-between '>
|
||||
{/* <div className='text-dark'>Amount To Be Paid</div> */}
|
||||
<div className='d-flex justify-content-center align-items-center'><div className='pb-0 text-danger' style={{fontWeight:'900',fontSize:'1.3rem'}}>₹14000</div></div>
|
||||
<div className='d-flex justify-content-end '>
|
||||
<button className='btn bg-primary br-btn'>Pay Now</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className='d-flex justify-content-end pt-2 '>
|
||||
<button className='btn bg-primary br-btn'>Pay Now</button>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PaymentKPI
|
||||
@@ -0,0 +1,9 @@
|
||||
import React from 'react'
|
||||
|
||||
function PrevPayment() {
|
||||
return (
|
||||
<div>PrevPayment</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PrevPayment
|
||||
@@ -0,0 +1,22 @@
|
||||
import React from 'react'
|
||||
|
||||
function SupportKPI() {
|
||||
return (
|
||||
<div className="col-xxl-6 col-xl-6 col-lg-6">
|
||||
<div id="user-activity" className="card" data-aos="fade-up">
|
||||
|
||||
<div className="card-body">
|
||||
|
||||
<div>
|
||||
<img src='./images/kerala/support.png' className='w-100 h-100' />
|
||||
</div>
|
||||
<div className='d-flex justify-content-around py-2'>
|
||||
<button className='btn bg-primary br-btn'>Create Support Ticket</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SupportKPI
|
||||
Fai riferimento in un nuovo problema
Block a user