init

.gitignore

+# Ignore compiled files
+*.class
+*.war
+*.jar
+*.ear
+
+# Ignore build directories
+target/
+bin/
+out/
+
+# Ignore IDE-specific files and directories
+.idea/
+.vscode/
+*.suo
+*.user
+*.sln
+.DS_Store
+
+# Ignore log files and backups
+*.log
+*.log.*
+*.bak
+*.swp
+
+# Ignore user-specific files
+user.settings
+
+# Ignore configuration files
+application.properties
+
+# Ignore specific directories
+node_modules/
+build/
+.next

components/chart/DarkLightToggle.js

+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;

components/chart/DoughnutChart.js

+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;

components/chart/LineChart.js

+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;

components/chart/LineInvestment.js

+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;

components/chart/StackedBarChart.js

+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;

components/elements/BalanceDetails.js

+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;

components/elements/Bills.js

+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;

components/elements/GoalsBudget.js

+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;

components/elements/TransactionHistory.js

+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;

components/form/CreateApi.js

+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;

components/form/PersonalInfo.js

+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;

components/form/Preferences.js

+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;

components/form/SigninForm.js

+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;

components/form/SignupForm.js

+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;

components/form/UpdateAvatar.js

+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;

components/form/UpdateInfo.js

+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;

components/form/authselection/AuthIcon.js

+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

components/form/authselection/layoutform.js

+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;

components/layout/Header.js

+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;

components/layout/HeaderLanding.js

+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;

components/layout/Layout.js

+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;

components/layout/PageHead.js

+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;

components/layout/PageTitle.js

+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;

components/layout/SettingsMenu.js

+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;

components/layout/sidebar.js

+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;

components/widget/InvoiceKPI.js

+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

components/widget/NewConnection.js

+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

components/widget/PaymentAddKPI.js

+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

components/widget/PaymentKPI.js

+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

components/widget/PrevPayment.js

+import React from 'react'
+
+function PrevPayment() {
+  return (
+    <div>PrevPayment</div>
+  )
+}
+
+export default PrevPayment

components/widget/SupportKPI.js

+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

helpers/helpers.js

+export const COMPANY_NAME = 'kerala water board';

package.json

+{
+    "name": "Intez",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "dev": "next dev -p 5000",
+        "build": "next build",
+        "start": "next start",
+        "sass": "node-sass --watch public/scss/style.scss public/css/style.css --source-map public/css/style.css.map"
+    },
+    "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.4.2",
+        "bootstrap": "^5.3.2",
+        "chart.js": "^2.9.4",
+        "formik": "^2.2.6",
+        "next": "10.0.9",
+        "node-sass": "^5.0.0",
+        "react": "17.0.2",
+        "react-bootstrap": "^2.9.1",
+        "react-chartjs-2": "^2.11.1",
+        "react-dom": "17.0.2",
+        "react-perfect-scrollbar": "^1.5.8",
+        "react-redux": "^7.2.3",
+        "reactstrap": "^8.9.0",
+        "redux": "^4.0.5",
+        "redux-thunk": "^2.3.0",
+        "yup": "^0.32.9"
+    },
+    "devDependencies": {
+        "sass": "^1.69.5"
+    }
+}

pages/_app.js

+import { Provider } from 'react-redux';
+import '../public/css/style.css';
+import store from '../redux/store';
+import 'react-perfect-scrollbar/dist/css/styles.css';
+import Head from 'next/head';
+
+
+function MyApp({ Component, pageProps }) {
+    return (
+        <Provider store={store}>
+            <Head>
+        <script
+          src="https://kit.fontawesome.com/15e70ec3fb.js"
+          crossOrigin="anonymous"
+        ></script>
+      </Head>
+            <Component {...pageProps} />
+            
+        </Provider>
+    )
+  }
+
+export default MyApp

pages/api/hello.js

+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+
+export default (req, res) => {
+  res.status(200).json({ name: 'John Doe' })
+}

pages/balance.js

+import { useState } from "react";
+import { connect } from "react-redux";
+import Bills from '../components/elements/Bills';
+import Layout from "../components/layout/Layout";
+import LineInvestment from "./../components/chart/LineInvestment";
+import BalanceDetails from './../components/elements/BalanceDetails';
+
+function Balance({ investmentData }) {
+    const [open, setOpen] = useState("a1");
+    return (
+        <>
+            <Layout
+                headTitle="Wallet"
+                pageTitle="Wallet"
+                pageTitleSub={"Welcome Intez Wallet page"}
+                pageClass={"dashboard"}
+                parent={"Home"}
+                child={"Wallet"}
+            >
+                <div className="row">
+                    <div className="col-xxl-6 col-xl-6 col-lg-6">
+                        <div className="card">
+                            <div className="card-header">
+                                <h4 className="card-title">Balance Details</h4>
+                            </div>
+                            <div className="card-body">
+                                <BalanceDetails/>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col-xxl-6 col-xl-6 col-lg-6">
+                        <div className="card">
+                            <div className="card-header">
+                                <h4 className="card-title">Bills</h4>
+                                <a href="#">See More</a>
+                            </div>
+                            <div className="card-body">
+                                <Bills/>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col-xxl-8 col-xl-8 col-lg-6">
+                        <div className="card">
+                            <div className="card-header">
+                                <h4 className="card-title">Investment</h4>
+                            </div>
+                            <div className="card-body">
+                                
+                                <LineInvestment
+                                    investmentData={investmentData}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                    <div className=" col-xxl-4 col-xl-4 col-lg-6">
+                        <div className="row">
+                            <div className="col-xxl-12 col-xl-12 col-lg-12">
+                                <div className="credit-card visa">
+                                    <div className="type-brand">
+                                        <h4>Debit Card</h4>
+                                        <img
+                                            src="./images/cc/visa.png"
+                                            alt=""
+                                        />
+                                    </div>
+                                    <div className="cc-number">
+                                        <h6>1234</h6>
+                                        <h6>5678</h6>
+                                        <h6>7890</h6>
+                                        <h6>9875</h6>
+                                    </div>
+                                    <div className="cc-holder-exp">
+                                        <h5>Saiful Islam</h5>
+                                        <div className="exp">
+                                            <span>EXP:</span>
+                                            <strong>12/21</strong>
+                                        </div>
+                                    </div>
+
+                                    <div className="cc-info">
+                                        <div className="row justify-content-between align-items-center">
+                                            <div className="col-5">
+                                                <div className="d-flex">
+                                                    <p className="me-3">Status</p>
+                                                    <p>
+                                                        <strong>Active</strong>
+                                                    </p>
+                                                </div>
+                                                <div className="d-flex">
+                                                    <p className="me-3">Currency</p>
+                                                    <p>
+                                                        <strong>USD</strong>
+                                                    </p>
+                                                </div>
+                                            </div>
+                                            <div className="col-xl-7">
+                                                <div className="d-flex justify-content-between">
+                                                    <div className="ms-3">
+                                                        <p>Credit Limit</p>
+                                                        <p>
+                                                            <strong>
+                                                                2000 USD
+                                                            </strong>
+                                                        </p>
+                                                    </div>
+                                                    <div id="circle1"></div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="col-xxl-12 col-xl-12 col-lg-12">
+                                <div className="credit-card payoneer">
+                                    <div className="type-brand">
+                                        <h4>Debit Card</h4>
+                                        <img
+                                            src="./images/cc/payoneer.png"
+                                            alt=""
+                                        />
+                                    </div>
+                                    <div className="cc-number">
+                                        <h6>1234</h6>
+                                        <h6>5678</h6>
+                                        <h6>7890</h6>
+                                        <h6>9875</h6>
+                                    </div>
+                                    <div className="cc-holder-exp">
+                                        <h5>Saiful Islam</h5>
+                                        <div className="exp">
+                                            <span>EXP:</span>
+                                            <strong>12/21</strong>
+                                        </div>
+                                    </div>
+                                    <div className="cc-info">
+                                        <div className="row">
+                                            <div className="col-5">
+                                                <div className="d-flex">
+                                                    <p className="me-3">Status</p>
+                                                    <p>
+                                                        <strong>Active</strong>
+                                                    </p>
+                                                </div>
+                                                <div className="d-flex">
+                                                    <p className="me-3">Currency</p>
+                                                    <p>
+                                                        <strong>USD</strong>
+                                                    </p>
+                                                </div>
+                                            </div>
+                                            <div className="col-xl-7">
+                                                <div className="d-flex justify-content-between">
+                                                    <div className="ms-3">
+                                                        <p>Credit Limit</p>
+                                                        <p>
+                                                            <strong>
+                                                                1500/2000 USD
+                                                            </strong>
+                                                        </p>
+                                                    </div>
+                                                    <div id="circle3"></div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </Layout>
+        </>
+    );
+}
+const mapStateToProps = (state) => ({
+    investmentData: state.LineInvestment.investment,
+});
+export default connect(mapStateToProps, {})(Balance);

pages/bill.js

+import Layout from "../components/layout/Layout";
+import InvoiceKPI from "../components/widget/InvoiceKPI";
+import PaymentAddKPI from "../components/widget/PaymentAddKPI";
+import StackedBarChart from "./../components/chart/StackedBarChart";
+
+function Bill() {
+    return (
+        <>
+            <Layout
+                headTitle="Payments"
+                pageTitle="Payments"
+                pageTitleSub={"Welcome Intez Payments page"}
+                pageClass={"dashboard"}
+                parent={"Home"}
+                child={"Payments"}
+            >
+                <div className="row">
+                <div className="col-lg-5">
+                        
+                        <PaymentAddKPI/>
+                       
+                     </div>
+                    <div className="col-lg-7">
+
+                    <InvoiceKPI num={true}/>
+                    </div>
+
+                   
+
+                </div>
+                <div className="row">
+                    <div className="col-xl-8 col-lg-7">
+                        <div
+                            id="user-activity"
+                            className="card"
+                            data-aos="fade-up"
+                        >
+                            <div className="card-header">
+                                <h4 className="card-title">Expenses</h4>
+                            </div>
+
+                            <div className="card-body">
+                                <div className="tab-content" id="myTabContent">
+                                    <StackedBarChart />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col-xl-4 col-lg-5">
+                        <div className="card">
+                            <div className="card-header">
+                                <h4 className="card-title">Unpaid Bills</h4>
+                            </div>
+                            <div className="card-body">
+                                <div className="unpaid-content">
+                                    <ul>
+                                        <li>
+                                            <p className="mb-0">Service</p>
+                                            <h5 className="mb-0">Payoneer</h5>
+                                        </li>
+                                        <li>
+                                            <p className="mb-0">Issued</p>
+                                            <h5 className="mb-0">
+                                                March 17, 2021
+                                            </h5>
+                                        </li>
+                                        <li>
+                                            <p className="mb-0">Payment Due</p>
+                                            <h5 className="mb-0">17 Days</h5>
+                                        </li>
+                                        <li>
+                                            <p className="mb-0">Paid</p>
+                                            <h5 className="mb-0">0.00</h5>
+                                        </li>
+                                        <li>
+                                            <p className="mb-0">
+                                                Amount to pay
+                                            </p>
+                                            <h5 className="mb-0">$ 532.69</h5>
+                                        </li>
+                                        <li>
+                                            <p className="mb-0">
+                                                Payment Method
+                                            </p>
+                                            <h5 className="mb-0">Paypal</h5>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </Layout>
+        </>
+    );
+}
+export default Bill;

pages/create-invoice.js

+import Layout from "../components/layout/Layout";
+
+function CreateInvoice() {
+    return (
+        <>
+            <Layout
+               headTitle="Create Invoice"
+               pageTitle="Create Invoice"
+               pageTitleSub={"Welcome Intez Create Invoice page"}
+               pageClass={"dashboard"}
+               parent={"Home"}
+               child={"Create Invoice"}
+            >
+                <div className="row">
+                <div className="col-xl-12">
+                    <div className="card">
+                        <div className="card-header">
+                            <h4 className="card-title">Create Invoice </h4>
+                            <div className="btn-group">
+                                <a href="#" className="btn btn-primary">Save</a>
+                                <a href="#" className="btn btn-outline-primary">Send</a>
+                            </div>
+                        </div>
+                        <div className="card-body">
+                            <form className="invoice-form">
+                                <form>
+                                    <div className="row justify-content-between">
+                                        <div className="col-xl-3">
+                                            <div className="mb-3">
+                                                <label className="form-label">Invoice Name</label>
+                                                <input type="email" className="form-control" placeholder="Jonaed Bogdadi"/>
+                                            </div>
+                                            <div className="mb-3">
+                                                <label className="form-label">Bill To</label>
+                                                <input type="email" className="form-control"
+                                                    placeholder="Jonaed@bogdad.com "/>
+                                            </div>
+                                        </div>
+                                        <div className="col-xl-3">
+                                            <div className="mb-3">
+                                                <label className="form-label">Date</label>
+                                                <input type="email" className="form-control" placeholder="21/03/2021"/>
+                                            </div>
+                                            <div className="mb-3">
+                                                <label className="form-label">Due Date</label>
+                                                <input type="email" className="form-control" placeholder="28/04/2021"/>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <hr />
+
+                                    <div className="row">
+                                        <div className="mb-3 col-xl-6">
+                                            <label className="form-label">Items</label>
+                                            <input type="email" className="form-control" placeholder="Wireframe" />
+                                        </div>
+                                        <div className=" mb-3 col-xl-3">
+                                            <label className="form-label">Quantity</label>
+                                            <input type="email" className="form-control" placeholder="360"/>
+                                        </div>
+                                        <div className="mb-3 col-xl-2">
+                                            <label className="form-label">Price</label>
+                                            <input type="email" className="form-control" placeholder="82"/>
+                                        </div>
+                                        <div className="col-1">
+                                            <span><i className="ri-close-fill"></i></span>
+                                        </div>
+                                    </div>
+                                    <div className="row">
+                                        <div className="mb-3 col-xl-6">
+                                            <input type="email" className="form-control" placeholder="High-Fidelity"/>
+                                        </div>
+                                        <div className="mb-3 col-xl-3">
+                                            <input type="email" className="form-control" placeholder="220"/>
+                                        </div>
+                                        <div className="mb-3 col-xl-2">
+                                            <input type="email" className="form-control" placeholder="67"/>
+                                        </div>
+                                        <div className="col-1">
+                                            <span><i className="ri-close-fill"></i></span>
+                                        </div>
+                                    </div>
+
+                                    <div className="add-reset d-flex justify-content-between">
+                                        <button className="btn btn-outline-primary"><span><i
+                                                    className="bi bi-plus"></i></span>Reset</button>
+                                        <button className="btn btn-primary"><span><i className="bi bi-plus"></i></span>Add
+                                            Item</button>
+                                    </div>
+                                </form>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+                
+            </Layout>
+        </>
+    );
+}
+export default CreateInvoice;

pages/demo.js

+import Link from "next/link";
+import HeaderLanding from "../components/layout/HeaderLanding";
+function Demo() {
+    return (
+        <>
+            <HeaderLanding />
+            <div className="intro section-padding" id="intro">
+                <div className="container">
+                    <div className="row align-items-center justify-content-between">
+                        <div className="col-xl-4 col-md-6">
+                            <div className="intro-content my-5">
+                                <h1>
+                                    Intez - Dashboard React App
+                                </h1>
+                                <p>
+                                    Intez is the complete UX & UI dashboard for
+                                    online payment. Here included wallet, payment,
+                                    invoice, and all user setting pages
+                                    including profile, application, activity,
+                                    payment method, api, sign in & sign up etc.
+                                </p>
+                            </div>
+                        </div>
+                        <div className="col-xl-5 col-md-6 py-md-5">
+                            <div className="intro-demo_img">
+                                <img
+                                    src="/images/demo/intez.jpg"
+                                    alt=""
+                                    className="img-fluid"
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div className="demo section-padding">
+                <div className="container">
+                    <div className="row py-lg-5 justify-content-center">
+                        <div className="col-xl-7">
+                            <div className="section-title text-center">
+                                <h2>Pages</h2>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="row">
+                        <div className="col-xl-4 col-md-4 col-sm-6">
+                            <div className="demo_img">
+                                <Link href="/">
+                                    <a>
+                                        <div className="img-wrap">
+                                            <img
+                                                src="/images/demo/dashboard.jpg"
+                                                alt=""
+                                                className="img-fluid"
+                                            />
+                                        </div>
+                                    </a>
+                                </Link>
+                                <h4>Dashboard</h4>
+                            </div>
+                        </div>
+                        <div className="col-xl-4 col-md-4 col-sm-6">
+                            <div className="demo_img">
+                                <Link href="/balance">
+                                    <a>
+                                        <div className="img-wrap">
+                                            <img
+                                                src="/images/demo/wallet.jpg"
+                                                alt=""
+                                                className="img-fluid"
+                                            />
+                                        </div>
+                                    </a>
+                                </Link>
+                                <h4>Wallet</h4>
+                            </div>
+                        </div>
+                        <div className="col-xl-4 col-md-4 col-sm-6">
+                            <div className="demo_img">
+                                <Link href="/bill">
+                                    <a>
+                                        <div className="img-wrap">
+                                            <img
+                                                src="/images/demo/payment.jpg"
+                                                alt=""
+                                                className="img-fluid"
+                                            />
+                                        </div>
+                                    </a>
+                                </Link>
+                                <h4>Payment</h4>
+                            </div>
+                        </div>
+                        <div className="col-xl-4 col-md-4 col-sm-6">
+                            <div className="demo_img">
+                                <Link href="/invoice">
+                                    <a>
+                                        <div className="img-wrap">
+                                            <img
+                                                src="/images/demo/invoice.jpg"
+                                                alt=""
+                                                className="img-fluid"
+                                            />
+                                        </div>
+                                    </a>
+                                </Link>
+                                <h4>Invoice</h4>
+                            </div>
+                        </div>
+                        <div className="col-xl-4 col-md-4 col-sm-6">
+                            <div className="demo_img">
+                                <Link href="/create-invoice">
+                                    <a>
+                                        <div className="img-wrap">
+                                            <img
+                                                src="/images/demo/create-invoice.jpg"
+                                                alt=""
+                                                className="img-fluid"
+                                            />
+                                        </div>
+                                    </a>
+                                </Link>
+                                <h4>Create Invoice</h4>
+                            </div>
+                        </div>
+                        <div className="col-xl-4 col-md-4 col-sm-6">
+                            <div className="demo_img">
+                                <Link href="/notification">
+                                    <a>
+                                        <div className="img-wrap">
+                                            <img
+                                                src="/images/demo/notification.jpg"
+                                                alt=""
+                                                className="img-fluid"
+                                            />
+                                        </div>
+                                    </a>
+                                </Link>
+                                <h4>Notification</h4>
+                            </div>
+                        </div>
+                        <div className="col-xl-4 col-md-4 col-sm-6">
+                            <div className="demo_img">
+                                <Link href="/settings-profile">
+                                    <a>
+                                        <div className="img-wrap">
+                                            <img
+                                                src="/images/demo/settings-profile.jpg"
+                                                alt=""
+                                                className="img-fluid"
+                                            />
+                                        </div>
+                                    </a>
+                                </Link>
+                                <h4>Profile Settings</h4>
+                            </div>
+                        </div>
+                        <div className="col-xl-4 col-md-4 col-sm-6">
+                            <div className="demo_img">
+                                <Link href="/profile">
+                                    <a>
+                                        <div className="img-wrap">
+                                            <img
+                                                src="/images/demo/profile.jpg"
+                                                alt=""
+                                                className="img-fluid"
+                                            />
+                                        </div>
+                                    </a>
+                                </Link>
+                                <h4>User Profile</h4>
+                            </div>
+                        </div>
+                        <div className="col-xl-4 col-md-4 col-sm-6">
+                            <div className="demo_img">
+                                <Link href="/settings-application">
+                                    <a>
+                                        <div className="img-wrap">
+                                            <img
+                                                src="/images/demo/settings-application.jpg"
+                                                alt=""
+                                                className="img-fluid"
+                                            />
+                                        </div>
+                                    </a>
+                                </Link>
+                                <h4>Application</h4>
+                            </div>
+                        </div>
+                        <div className="col-xl-4 col-md-4 col-sm-6">
+                            <div className="demo_img">
+                                <Link href="/settings-security">
+                                    <a>
+                                        <div className="img-wrap">
+                                            <img
+                                                src="/images/demo/settings-security.jpg"
+                                                alt=""
+                                                className="img-fluid"
+                                            />
+                                        </div>
+                                    </a>
+                                </Link>
+                                <h4>Security</h4>
+                            </div>
+                        </div>
+                        <div className="col-xl-4 col-md-4 col-sm-6">
+                            <div className="demo_img">
+                                <Link href="/settings-activity">
+                                    <a>
+                                        <div className="img-wrap">
+                                            <img
+                                                src="/images/demo/settings-activity.jpg"
+                                                alt=""
+                                                className="img-fluid"
+                                            />
+                                        </div>
+                                    </a>
+                                </Link>
+                                <h4>Activity</h4>
+                            </div>
+                        </div>
+                        <div className="col-xl-4 col-md-4 col-sm-6">
+                            <div className="demo_img">
+                                <Link href="/settings-payment-method">
+                                    <a>
+                                        <div className="img-wrap">
+                                            <img
+                                                src="/images/demo/settings-payment-method.jpg"
+                                                alt=""
+                                                className="img-fluid"
+                                            />
+                                        </div>
+                                    </a>
+                                </Link>
+                                <h4>Payment Method</h4>
+                            </div>
+                        </div>
+                        <div className="col-xl-4 col-md-4 col-sm-6">
+                            <div className="demo_img">
+                                <Link href="/settings-api">
+                                    <a>
+                                        <div className="img-wrap">
+                                            <img
+                                                src="/images/demo/settings-api.jpg"
+                                                alt=""
+                                                className="img-fluid"
+                                            />
+                                        </div>
+                                    </a>
+                                </Link>
+                                <h4>Api</h4>
+                            </div>
+                        </div>
+                        <div className="col-xl-4 col-md-4 col-sm-6">
+                            <div className="demo_img">
+                                <Link href="/signin">
+                                    <a>
+                                        <div className="img-wrap">
+                                            <img
+                                                src="/images/demo/signin.jpg"
+                                                alt=""
+                                                className="img-fluid"
+                                            />
+                                        </div>
+                                    </a>
+                                </Link>
+                                <h4>Sign in Page</h4>
+                            </div>
+                        </div>
+                        <div className="col-xl-4 col-md-4 col-sm-6">
+                            <div className="demo_img">
+                                <Link href="/signup">
+                                    <a>
+                                        <div className="img-wrap">
+                                            <img
+                                                src="/images/demo/signup.jpg"
+                                                alt=""
+                                                className="img-fluid"
+                                            />
+                                        </div>
+                                    </a>
+                                </Link>
+                                <h4>Sign up page</h4>
+                            </div>
+                        </div>
+
+                        <div className="col-xl-4 col-md-4 col-sm-6">
+                            <div className="demo_img">
+                                <Link href="/lock">
+                                    <a>
+                                        <div className="img-wrap">
+                                            <img
+                                                src="/images/demo/locked.jpg"
+                                                alt=""
+                                                className="img-fluid"
+                                            />
+                                        </div>
+                                    </a>
+                                </Link>
+                                <h4>Locked Page</h4>
+                            </div>
+                        </div>
+
+                        <div className="col-xl-4 col-md-4 col-sm-6">
+                            <div className="demo_img">
+                                <Link href="./otp1" target="_blank"><a>
+                                    <div className="img-wrap">
+                                        <img src="./images/demo/otp-1.jpg" alt="" className="img-fluid" />
+                                    </div>
+                                </a>
+                                </Link>
+                                <h4>1 of 2-Step-Verification</h4>
+                            </div>
+                        </div>
+
+                        <div className="col-xl-4 col-md-4 col-sm-6">
+                            <div className="demo_img">
+                                <Link href="./otp2" target="_blank"><a>
+                                    <div className="img-wrap">
+                                        <img src="./images/demo/otp-2.jpg" alt="" className="img-fluid" />
+                                    </div>
+                                </a>
+                                </Link>
+                                <h4>2 of 2-Step-Verification</h4>
+                            </div>
+                        </div>
+
+                        <div className="col-xl-4 col-md-4 col-sm-6">
+                            <div className="demo_img">
+                                <Link href="./verify-email" target="_blank"><a>
+                                    <div className="img-wrap">
+                                        <img src="./images/demo/email-verification.jpg" alt="" className="img-fluid" />
+                                    </div>
+                                </a>
+                                </Link>
+                                <h4>Email Verification</h4>
+                            </div>
+                        </div>
+
+                        <div className="col-xl-4 col-md-4 col-sm-6">
+                            <div className="demo_img">
+                                <Link href="./reset" target="_blank"><a>
+                                    <div className="img-wrap">
+                                        <img src="./images/demo/reset.jpg" alt="" className="img-fluid" />
+                                    </div>
+                                </a>
+                                </Link>
+                                <h4>Reset Page</h4>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}
+export default Demo;

pages/index.js

+import { connect } from "react-redux";
+import DoughnutChart from "../components/chart/DoughnutChart";
+import BarChart from "../components/chart/LineChart";
+import Layout from "../components/layout/Layout";
+import BalanceDetails from "./../components/elements/BalanceDetails";
+import GoalsBudget from "./../components/elements/GoalsBudget";
+import TransactionHistory from "./../components/elements/TransactionHistory";
+import NewConnection from "../components/widget/NewConnection";
+import Link from "next/link";
+import PaymentAddKPI from "../components/widget/PaymentAddKPI";
+import PaymentKPI from "../components/widget/PaymentKPI";
+import SupportKPI from "../components/widget/SupportKPI";
+import InvoiceKPI from "../components/widget/InvoiceKPI";
+
+function Home({ lineData, doughnutData }) {
+    return (
+        <>
+            <Layout
+                headTitle="Dashboard"
+                pageTitle="Dashboard"
+                pageTitleSub={"Welcome Rahul"}
+                pageClass={"dashboard"}
+                parent={"Home"}
+                child={"Dashboard"}
+            >
+                <div className="row">
+
+
+                    <div className="col-xxl-6 col-xl-6 col-lg-6">
+                        <div className="row">
+                            <NewConnection />
+                            <PaymentKPI />
+                        </div>
+                    </div>
+                    <div className="col-xl-6 col-lg-6">
+                    <div id="user-activity" className="card" data-aos="fade-up">
+                            <div className="card-header">
+                                <h4 className="card-title">Water Consumption Levels</h4>
+                            </div>
+
+                            <div className="card-body">
+                                <BarChart lineData={lineData} />
+                            </div>
+                        </div>
+                   
+                    </div>
+                    <hr />
+                  
+                    <div className="col-xl-6 col-lg-6">
+                    <PaymentAddKPI />
+                   
+                         </div>
+                 
+                    <div className="col-xl-6 col-lg-6">
+                    <InvoiceKPI />
+                         </div>
+                         <hr />
+                         <SupportKPI />
+                    
+                    <div className="col-xl-6 col-lg-6">
+                        <div className="card">
+                            <div className="card-header">
+                                <h4 className="card-title">Stats</h4>
+                            </div>
+                            <div className="card-body">
+                                <div className="row">
+                                    <div className="col-xl-6 col-lg-6 col-md-6 col-sm-6">
+                                        <div className="stat-widget d-flex align-items-center">
+                                            <div className="widget-icon me-3 bg-primary">
+                                                <span>
+                                                    <i className="ri-wallet-line"></i>
+                                                </span>
+                                            </div>
+                                            <div className="widget-content">
+                                                <h3>432568</h3>
+                                                <p>Last Balance</p>
+                                            </div>
+
+                                            {/* <p className="text-success mb-0">
+                                +168.001%{" "}
+                                <span>
+                                    <i className="bi bi-arrow-up"></i>
+                                </span>
+                            </p> */}
+                                        </div>
+                                    </div>
+
+                                    <div className="col-xl-6 col-lg-6 col-md-6 col-sm-6">
+                                        <div className="stat-widget d-flex align-items-center">
+                                            <div className="widget-icon me-3 bg-secondary">
+                                                <span>
+                                                    <i className="ri-wallet-2-line"></i>
+                                                </span>
+                                            </div>
+                                            <div className="widget-content">
+                                                <h3>245860</h3>
+                                                <p>Hold Balance</p>
+                                                {/* <p className="text-success mb-0">
+                                    +168.001%{" "}
+                                    <span>
+                                        <i className="bi bi-arrow-up"></i>
+                                    </span>
+                                </p> */}
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div className="col-xl-6 col-lg-6 col-md-6 col-sm-6">
+                                        <div className="stat-widget d-flex align-items-center">
+                                            <div className="widget-icon me-3 bg-success">
+                                                <span>
+                                                    <i className="ri-wallet-3-line"></i>
+                                                </span>
+                                            </div>
+                                            <div className="widget-content">
+                                                <h3>25.35</h3>
+                                                <p>Current Rate</p>
+                                                {/* <p className="text-danger mb-0">
+                                    -15.034%{" "}
+                                    <span>
+                                        <i className="bi bi-arrow-down"></i>
+                                    </span>
+                                </p> */}
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className="col-xl-6 col-lg-6 col-md-6 col-sm-6">
+                                        <div className="stat-widget d-flex align-items-center">
+                                            <div className="widget-icon me-3 bg-danger">
+                                                <span>
+                                                    <i className="ri-wallet-3-line"></i>
+                                                </span>
+                                            </div>
+                                            <div className="widget-content">
+                                                <h3>22.56</h3>
+                                                <p>Bounce Rate</p>
+                                                {/* <p className="text-danger mb-0">
+                                    -15.034%{" "}
+                                    <span>
+                                        <i className="bi bi-arrow-down"></i>
+                                    </span>
+                                </p> */}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                  <div className="d-none">
+                  <div className="col-xxl-4 col-xl-4 col-lg-6">
+                        <div className="card">
+                            <div className="card-header">
+                                <h4 className="card-title">Unpaid Bills</h4>
+                            </div>
+                            <div className="card-body">
+                                <div className="unpaid-content">
+                                    <ul>
+                                        <li>
+                                            <p className="mb-0">Service</p>
+                                            <h5 className="mb-0">Youtube Chanel</h5>
+                                        </li>
+                                        <li>
+                                            <p className="mb-0">Issued</p>
+                                            <h5 className="mb-0">March 17, 2021</h5>
+                                        </li>
+                                        <li>
+                                            <p className="mb-0">Payment Due</p>
+                                            <h5 className="mb-0">17 Days</h5>
+                                        </li>
+                                        <li>
+                                            <p className="mb-0">Paid</p>
+                                            <h5 className="mb-0">0.00</h5>
+                                        </li>
+                                        <li>
+                                            <p className="mb-0">Amount to pay</p>
+                                            <h5 className="mb-0">$ 532.69</h5>
+                                        </li>
+                                        <li>
+                                            <p className="mb-0">Payment Method</p>
+                                            <h5 className="mb-0">Paypal</h5>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col-xl-4 col-xxl-4 col-lg-6">
+                        <div className="row">
+                            <div className="col-xl-12 col-lg-12">
+                                <div className="credit-card visa">
+                                    <div className="type-brand">
+                                        <h4>Debit Card</h4>
+                                        <img src="/images/cc/visa.png" alt="" />
+                                    </div>
+                                    <div className="cc-number">
+                                        <h6>1234</h6>
+                                        <h6>5678</h6>
+                                        <h6>7890</h6>
+                                        <h6>9875</h6>
+                                    </div>
+                                    <div className="cc-holder-exp">
+                                        <h5>Saiful Islam</h5>
+                                        <div className="exp">
+                                            <span>EXP:</span>
+                                            <strong>12/21</strong>
+                                        </div>
+                                    </div>
+
+                                    {/* <div className="cc-info">
+                                        <div className="row justify-content-between align-items-center">
+                                            <div className="col-5">
+                                                <div className="d-flex">
+                                                    <p className="me-3">Status</p>
+                                                    <p>
+                                                        <strong>Active</strong>
+                                                    </p>
+                                                </div>
+                                                <div className="d-flex">
+                                                    <p className="me-3">Currency</p>
+                                                    <p>
+                                                        <strong>USD</strong>
+                                                    </p>
+                                                </div>
+                                            </div>
+                                            <div className="col-xl-7">
+                                                <div className="d-flex justify-content-between">
+                                                    <div className="ms-3">
+                                                        <p>Credit Limit</p>
+                                                        <p>
+                                                            <strong>
+                                                                2000 USD
+                                                            </strong>
+                                                        </p>
+                                                    </div>
+                                                    <div id="circle1"></div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div> */}
+                                </div>
+                            </div>
+                            <div className="col-xl-12 col-lg-12">
+                                <div className="credit-card payoneer">
+                                    <div className="type-brand">
+                                        <h4>Debit Card</h4>
+                                        <img
+                                            src="/images/cc/payoneer.png"
+                                            alt=""
+                                        />
+                                    </div>
+                                    <div className="cc-number">
+                                        <h6>1234</h6>
+                                        <h6>5678</h6>
+                                        <h6>7890</h6>
+                                        <h6>9875</h6>
+                                    </div>
+                                    <div className="cc-holder-exp">
+                                        <h5>Saiful Islam</h5>
+                                        <div className="exp">
+                                            <span>EXP:</span>
+                                            <strong>12/21</strong>
+                                        </div>
+                                    </div>
+                                    {/* <div className="cc-info">
+                                        <div className="row">
+                                            <div className="col-5">
+                                                <div className="d-flex">
+                                                    <p className="me-3">Status</p>
+                                                    <p>
+                                                        <strong>Active</strong>
+                                                    </p>
+                                                </div>
+                                                <div className="d-flex">
+                                                    <p className="me-3">Currency</p>
+                                                    <p>
+                                                        <strong>USD</strong>
+                                                    </p>
+                                                </div>
+                                            </div>
+                                            <div className="col-xl-7">
+                                                <div className="d-flex justify-content-between">
+                                                    <div className="ms-3">
+                                                        <p>Credit Limit</p>
+                                                        <p>
+                                                            <strong>
+                                                                1500/2000 USD
+                                                            </strong>
+                                                        </p>
+                                                    </div>
+                                                    <div id="circle3"></div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div> */}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className=" col-xxl-4 col-xl-4 col-lg-6">
+                        <div className="card">
+                            <div className="card-header">
+                                <h4 className="card-title">Balance Details</h4>
+                            </div>
+                            <div className="card-body">
+                                <BalanceDetails />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className=" col-xxl-4 col-xl-4 col-lg-6">
+                        <div className="card">
+                            <div className="card-header">
+                                <h4 className="card-title">Statistics</h4>
+                            </div>
+                            <div className="card-body">
+                                <DoughnutChart doughnutData={doughnutData} />
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col-xl-4 col-lg-6">
+                        <div className="card">
+                            <div className="card-header">
+                                <h4 className="card-title">Transaction History</h4>
+                                <a href="#">See more</a>
+                            </div>
+                            <div className="card-body">
+                                <TransactionHistory />
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col-xl-4 col-lg-6">
+                        <div className="card">
+                            <div className="card-header">
+                                <h4 className="card-title">Goals Budget</h4>
+                            </div>
+                            <div className="card-body">
+                                <GoalsBudget />
+                            </div>
+                        </div>
+                    </div>
+                  </div>
+                </div>
+            </Layout>
+        </>
+    );
+}
+
+const mapStateToProps = (state) => ({
+    lineData: state.LineChart.expenses,
+    doughnutData: state.DoughnutChart.statistics,
+});
+export default connect(mapStateToProps, {})(Home);

pages/invoice.js

+import Link from "next/link";
+import Layout from "../components/layout/Layout";
+function Invoice() {
+    return (
+        <>
+            <Layout
+                headTitle="Invoice"
+                pageTitle="Invoice"
+                pageTitleSub={"Welcome Intez Invoice page"}
+                pageClass={"dashboard"}
+                parent={"Home"}
+                child={"Invoice"}
+            >
+                <div className="row">
+                    <div class="col-xl-3 col-sm-6">
+                        <div class="stat-widget d-flex align-items-center bg-white">
+                            <div class="widget-icon me-3 bg-primary">
+                                <span>
+                                <i className="ri-file-copy-2-line"></i>
+                                </span>
+                            </div>
+                            <div class="widget-content">
+                                <h3>483</h3>
+                                <p>Total Invoices</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-xl-3 col-sm-6">
+                        <div class="stat-widget d-flex align-items-center bg-white">
+                            <div class="widget-icon me-3 bg-success">
+                                <span>
+                                <i className="ri-file-list-3-line"></i>
+                                </span>
+                            </div>
+                            <div class="widget-content">
+                                <h3>273</h3>
+                                <p>Paid Invoices</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-xl-3 col-sm-6">
+                        <div class="stat-widget d-flex align-items-center bg-white">
+                            <div class="widget-icon me-3 bg-warning">
+                                <span>
+                                <i className="ri-file-paper-line"></i>
+                                </span>
+                            </div>
+                            <div class="widget-content">
+                                <h3>121</h3>
+                                <p>Unpaid Invoices</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-xl-3 col-sm-6">
+                        <div class="stat-widget d-flex align-items-center bg-white">
+                            <div class="widget-icon me-3 bg-danger">
+                                <span>
+                                <i className="ri-file-paper-2-line"></i>
+                                </span>
+                            </div>
+                            <div class="widget-content">
+                                <h3>89</h3>
+                                <p>Canceled Invoices</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col-xl-12">
+                        <div className="card">
+                            <div className="card-header flex-row">
+                                <h4 className="card-title">Invoice </h4>
+                                <Link href="/create-invoice">
+                                    <a
+                                        className="btn btn-primary"
+                                    >
+                                        <span>
+                                            <i className="bi bi-plus"></i>
+                                        </span>
+                                    Create Invoice
+                                </a>
+                                </Link>
+                            </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>$254</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>$254</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/3.jpg"
+                                                            alt=""
+                                                            width="30"
+                                                            className="me-2"
+                                                        />
+                                                        John C. Adams
+                                                    </td>
+                                                    <td>$254</td>
+                                                    <td>
+                                                        <span className="badge px-3 py-2 bg-success">
+                                                            Paid
+                                                        </span>
+                                                    </td>
+                                                    <td>March 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/4.jpg"
+                                                            alt=""
+                                                            width="30"
+                                                            className="me-2"
+                                                        />
+                                                        John L. Foster
+                                                    </td>
+                                                    <td>$254</td>
+                                                    <td>
+                                                        <span className="badge px-3 py-2 bg-warning">
+                                                            Due
+                                                        </span>
+                                                    </td>
+                                                    <td>April 29, 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>$254</td>
+                                                    <td>
+                                                        <span className="badge px-3 py-2 bg-danger">
+                                                            Cancel
+                                                        </span>
+                                                    </td>
+                                                    <td>November 26, 2021</td>
+                                                </tr>
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </Layout>
+        </>
+    );
+}
+export default Invoice;

pages/lock.js

+import Link from "next/link";
+function Lock() {
+    return (
+        <>
+        
+            <div className="authincation section-padding">
+                <div className="container h-100">
+                    <div className="row justify-content-center h-100 align-items-center">
+                        <div className="col-xl-4 col-md-5">
+                            <div className="mini-logo text-center my-3">
+                                <Link href="/">
+                                    <a>
+                                        <img src="./images/logo.png" alt="" />
+                                    </a>
+                                </Link>
+                                <h4 className="card-title mt-5">Locked</h4>
+                            </div>
+                            <div className="auth-form card">
+                                <div className="card-body">
+                                    <form className="row g-3">
+                                        <div className="col-12">
+                                            <label className="form-label">
+                                                Enter Password
+                                            </label>
+
+                                            <input
+                                                type="password"
+                                                className="form-control"
+                                                placeholder="***********"
+                                            />
+                                        </div>
+                                        <div className="text-center mt-4">
+                                            <button
+                                                type="submit"
+                                                className="btn btn-primary btn-block"
+                                            >
+                                                Submit
+                                            </button>
+                                        </div>
+                                    </form>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}
+export default Lock;

pages/notification.js

+import Layout from "../components/layout/Layout";
+
+function Notification() {
+    return (
+        <>
+            <Layout
+                headTitle="Notification"
+                pageTitle="Notification"
+                // pageTitleSub={"Welcome Intez Notification page"}
+                pageClass={"dashboard"}
+                parent={"Home"}
+                child={"Notification"}
+            >
+                <div className="row">
+                    <div className="col-xl-12">
+                        <div className="card">
+                            <div className="card-header">
+                                <h4 className="card-title">Recent Notification </h4>
+                            </div>
+                            <div className="card-body">
+                                <div className="all-notification">
+                                    <div className="notification-list">
+                                        <div className="lists">
+                                            <a href="#" className="">
+                                                <div className="d-flex align-items-center">
+                                                    <span className="me-3 icon pending">
+                                                        <i className="bi bi-cash-stack"></i>
+                                                    </span>
+                                                    <div>
+                                                        <p>Oops! It seems like your wallet balance is insufficient to complete this transaction.</p>
+                                                        <span>Please add funds to your wallet to proceed.</span>
+                                                    </div>
+                                                </div>
+                                            </a>
+                                            <a href="#" className="">
+                                                <div className="d-flex align-items-center">
+                                                    <span className="me-3 icon fail">
+                                                        <i className="bi bi-calendar2-date"></i>
+                                                    </span>
+                                                    <div>
+                                                        <p>Your water bill is due on 12-10-2023.</p>
+                                                        <span>Please ensure it's paid on time.</span>
+                                                    </div>
+                                                </div>
+                                            </a>
+                                            <a href="#" className="">
+                                                <div className="d-flex align-items-center">
+                                                    <span className="me-3 icon fail">
+                                                       
+                                                        <i className="bi bi-x"></i>
+                                                    </span>
+                                                    <div>
+                                                        <p>Payment unsuccessful.</p>
+                                                        <span>Please check your payment details and try again.</span>
+                                                    </div>
+                                                </div>
+                                            </a>
+                                            <a href="#" className="">
+                                                <div className="d-flex align-items-center">
+                                                    <span className="me-3 icon success">
+                                                    <i className="bi bi-check"></i>
+                                                    </span>
+                                                    <div>
+                                                        <p>Your application has been verified successfully.</p>
+                                                        <span>2022-12-24 12:00:23</span>
+                                                    </div>
+                                                </div>
+                                            </a>
+                                            <a>
+                                                More
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </Layout>
+        </>
+    );
+}
+export default Notification;

pages/otp1.js

+import Link from "next/link";
+function Otp1() {
+    return (
+        <>
+            <div className="authincation section-padding">
+                <div className="container h-100">
+                    <div className="row justify-content-center h-100 align-items-center">
+                        <div className="col-xl-5 col-md-6">
+                            <div className="mini-logo text-center my-3">
+                            <Link href="/">
+                                    <a>
+                                        <img src="./images/logo.png" alt="" />
+                                    </a>
+                                </Link>
+                                <h4 className="card-title mt-5">
+                                    2-Step Verification
+                                </h4>
+                            </div>
+                            <div className="auth-form card">
+                                <div className="card-body">
+                                    <p className="text-center mb-3">
+                                        Enter the verification code generated by
+                                        your phone ending in +xxx xxxxxxxx60.
+                                    </p>
+                                    <form className="row g-3">
+                                        <div className="col-12">
+                                            <label className="form-label">
+                                                Country
+                                            </label>
+                                            <select
+                                                className="form-select"
+                                                name="country"
+                                            >
+                                                <option value="">Select</option>
+                                                <option value="Afghanistan">
+                                                    Afghanistan
+                                                </option>
+                                                <option value="Åland Islands">
+                                                    Åland Islands
+                                                </option>
+                                                <option value="Albania">
+                                                    Albania
+                                                </option>
+                                                <option value="Algeria">
+                                                    Algeria
+                                                </option>
+                                                <option value="American Samoa">
+                                                    American Samoa
+                                                </option>
+                                                <option value="Andorra">
+                                                    Andorra
+                                                </option>
+                                                <option value="Angola">
+                                                    Angola
+                                                </option>
+                                                <option value="Anguilla">
+                                                    Anguilla
+                                                </option>
+                                                <option value="Antarctica">
+                                                    Antarctica
+                                                </option>
+                                                <option value="Antigua and Barbuda">
+                                                    Antigua and Barbuda
+                                                </option>
+                                                <option value="Argentina">
+                                                    Argentina
+                                                </option>
+                                                <option value="Armenia">
+                                                    Armenia
+                                                </option>
+                                                <option value="Aruba">
+                                                    Aruba
+                                                </option>
+                                                <option value="Australia">
+                                                    Australia
+                                                </option>
+                                                <option value="Austria">
+                                                    Austria
+                                                </option>
+                                                <option value="Azerbaijan">
+                                                    Azerbaijan
+                                                </option>
+                                                <option value="Bahamas">
+                                                    Bahamas
+                                                </option>
+                                                <option value="Bahrain">
+                                                    Bahrain
+                                                </option>
+                                                <option value="Bangladesh">
+                                                    Bangladesh
+                                                </option>
+                                                <option value="Barbados">
+                                                    Barbados
+                                                </option>
+                                                <option value="Belarus">
+                                                    Belarus
+                                                </option>
+                                                <option value="Belgium">
+                                                    Belgium
+                                                </option>
+                                                <option value="Belize">
+                                                    Belize
+                                                </option>
+                                                <option value="Benin">
+                                                    Benin
+                                                </option>
+                                                <option value="Bermuda">
+                                                    Bermuda
+                                                </option>
+                                                <option value="Bhutan">
+                                                    Bhutan
+                                                </option>
+                                                <option value="Bolivia">
+                                                    Bolivia
+                                                </option>
+                                                <option value="Bosnia and Herzegovina">
+                                                    Bosnia and Herzegovina
+                                                </option>
+                                                <option value="Botswana">
+                                                    Botswana
+                                                </option>
+                                                <option value="Bouvet Island">
+                                                    Bouvet Island
+                                                </option>
+                                                <option value="Brazil">
+                                                    Brazil
+                                                </option>
+                                                <option value="British Indian Ocean Territory">
+                                                    British Indian Ocean
+                                                    Territory
+                                                </option>
+                                                <option value="Brunei Darussalam">
+                                                    Brunei Darussalam
+                                                </option>
+                                                <option value="Bulgaria">
+                                                    Bulgaria
+                                                </option>
+                                                <option value="Burkina Faso">
+                                                    Burkina Faso
+                                                </option>
+                                                <option value="Burundi">
+                                                    Burundi
+                                                </option>
+                                                <option value="Cambodia">
+                                                    Cambodia
+                                                </option>
+                                                <option value="Cameroon">
+                                                    Cameroon
+                                                </option>
+                                                <option value="Canada">
+                                                    Canada
+                                                </option>
+                                                <option value="Cape Verde">
+                                                    Cape Verde
+                                                </option>
+                                                <option value="Cayman Islands">
+                                                    Cayman Islands
+                                                </option>
+                                                <option value="Central African Republic">
+                                                    Central African Republic
+                                                </option>
+                                                <option value="Chad">
+                                                    Chad
+                                                </option>
+                                                <option value="Chile">
+                                                    Chile
+                                                </option>
+                                                <option value="China">
+                                                    China
+                                                </option>
+                                                <option value="Christmas Island">
+                                                    Christmas Island
+                                                </option>
+                                                <option value="Cocos (Keeling) Islands">
+                                                    Cocos (Keeling) Islands
+                                                </option>
+                                                <option value="Colombia">
+                                                    Colombia
+                                                </option>
+                                                <option value="Comoros">
+                                                    Comoros
+                                                </option>
+                                                <option value="Congo">
+                                                    Congo
+                                                </option>
+                                                <option value="Congo, The Democratic Republic of The">
+                                                    Congo, The Democratic
+                                                    Republic of The
+                                                </option>
+                                                <option value="Cook Islands">
+                                                    Cook Islands
+                                                </option>
+                                                <option value="Costa Rica">
+                                                    Costa Rica
+                                                </option>
+                                                <option value="Cote D'ivoire">
+                                                    Cote D'ivoire
+                                                </option>
+                                                <option value="Croatia">
+                                                    Croatia
+                                                </option>
+                                                <option value="Cuba">
+                                                    Cuba
+                                                </option>
+                                                <option value="Cyprus">
+                                                    Cyprus
+                                                </option>
+                                                <option value="Czech Republic">
+                                                    Czech Republic
+                                                </option>
+                                                <option value="Denmark">
+                                                    Denmark
+                                                </option>
+                                                <option value="Djibouti">
+                                                    Djibouti
+                                                </option>
+                                                <option value="Dominica">
+                                                    Dominica
+                                                </option>
+                                                <option value="Dominican Republic">
+                                                    Dominican Republic
+                                                </option>
+                                                <option value="Ecuador">
+                                                    Ecuador
+                                                </option>
+                                                <option value="Egypt">
+                                                    Egypt
+                                                </option>
+                                                <option value="El Salvador">
+                                                    El Salvador
+                                                </option>
+                                                <option value="Equatorial Guinea">
+                                                    Equatorial Guinea
+                                                </option>
+                                                <option value="Eritrea">
+                                                    Eritrea
+                                                </option>
+                                                <option value="Estonia">
+                                                    Estonia
+                                                </option>
+                                                <option value="Ethiopia">
+                                                    Ethiopia
+                                                </option>
+                                                <option value="Falkland Islands (Malvinas)">
+                                                    Falkland Islands (Malvinas)
+                                                </option>
+                                                <option value="Faroe Islands">
+                                                    Faroe Islands
+                                                </option>
+                                                <option value="Fiji">
+                                                    Fiji
+                                                </option>
+                                                <option value="Finland">
+                                                    Finland
+                                                </option>
+                                                <option value="France">
+                                                    France
+                                                </option>
+                                                <option value="French Guiana">
+                                                    French Guiana
+                                                </option>
+                                                <option value="French Polynesia">
+                                                    French Polynesia
+                                                </option>
+                                                <option value="French Southern Territories">
+                                                    French Southern Territories
+                                                </option>
+                                                <option value="Gabon">
+                                                    Gabon
+                                                </option>
+                                                <option value="Gambia">
+                                                    Gambia
+                                                </option>
+                                                <option value="Georgia">
+                                                    Georgia
+                                                </option>
+                                                <option value="Germany">
+                                                    Germany
+                                                </option>
+                                                <option value="Ghana">
+                                                    Ghana
+                                                </option>
+                                                <option value="Gibraltar">
+                                                    Gibraltar
+                                                </option>
+                                                <option value="Greece">
+                                                    Greece
+                                                </option>
+                                                <option value="Greenland">
+                                                    Greenland
+                                                </option>
+                                                <option value="Grenada">
+                                                    Grenada
+                                                </option>
+                                                <option value="Guadeloupe">
+                                                    Guadeloupe
+                                                </option>
+                                                <option value="Guam">
+                                                    Guam
+                                                </option>
+                                                <option value="Guatemala">
+                                                    Guatemala
+                                                </option>
+                                                <option value="Guernsey">
+                                                    Guernsey
+                                                </option>
+                                                <option value="Guinea">
+                                                    Guinea
+                                                </option>
+                                                <option value="Guinea-bissau">
+                                                    Guinea-bissau
+                                                </option>
+                                                <option value="Guyana">
+                                                    Guyana
+                                                </option>
+                                                <option value="Haiti">
+                                                    Haiti
+                                                </option>
+                                                <option value="Heard Island and Mcdonald Islands">
+                                                    Heard Island and Mcdonald
+                                                    Islands
+                                                </option>
+                                                <option value="Holy See (Vatican City State)">
+                                                    Holy See (Vatican City
+                                                    State)
+                                                </option>
+                                                <option value="Honduras">
+                                                    Honduras
+                                                </option>
+                                                <option value="Hong Kong">
+                                                    Hong Kong
+                                                </option>
+                                                <option value="Hungary">
+                                                    Hungary
+                                                </option>
+                                                <option value="Iceland">
+                                                    Iceland
+                                                </option>
+                                                <option value="India">
+                                                    India
+                                                </option>
+                                                <option value="Indonesia">
+                                                    Indonesia
+                                                </option>
+                                                <option value="Iran, Islamic Republic of">
+                                                    Iran, Islamic Republic of
+                                                </option>
+                                                <option value="Iraq">
+                                                    Iraq
+                                                </option>
+                                                <option value="Ireland">
+                                                    Ireland
+                                                </option>
+                                                <option value="Isle of Man">
+                                                    Isle of Man
+                                                </option>
+                                                <option value="Israel">
+                                                    Israel
+                                                </option>
+                                                <option value="Italy">
+                                                    Italy
+                                                </option>
+                                                <option value="Jamaica">
+                                                    Jamaica
+                                                </option>
+                                                <option value="Japan">
+                                                    Japan
+                                                </option>
+                                                <option value="Jersey">
+                                                    Jersey
+                                                </option>
+                                                <option value="Jordan">
+                                                    Jordan
+                                                </option>
+                                                <option value="Kazakhstan">
+                                                    Kazakhstan
+                                                </option>
+                                                <option value="Kenya">
+                                                    Kenya
+                                                </option>
+                                                <option value="Kiribati">
+                                                    Kiribati
+                                                </option>
+                                                <option value="Korea, Democratic People's Republic of">
+                                                    Korea, Democratic People's
+                                                    Republic of
+                                                </option>
+                                                <option value="Korea, Republic of">
+                                                    Korea, Republic of
+                                                </option>
+                                                <option value="Kuwait">
+                                                    Kuwait
+                                                </option>
+                                                <option value="Kyrgyzstan">
+                                                    Kyrgyzstan
+                                                </option>
+                                                <option value="Lao People's Democratic Republic">
+                                                    Lao People's Democratic
+                                                    Republic
+                                                </option>
+                                                <option value="Latvia">
+                                                    Latvia
+                                                </option>
+                                                <option value="Lebanon">
+                                                    Lebanon
+                                                </option>
+                                                <option value="Lesotho">
+                                                    Lesotho
+                                                </option>
+                                                <option value="Liberia">
+                                                    Liberia
+                                                </option>
+                                                <option value="Libyan Arab Jamahiriya">
+                                                    Libyan Arab Jamahiriya
+                                                </option>
+                                                <option value="Liechtenstein">
+                                                    Liechtenstein
+                                                </option>
+                                                <option value="Lithuania">
+                                                    Lithuania
+                                                </option>
+                                                <option value="Luxembourg">
+                                                    Luxembourg
+                                                </option>
+                                                <option value="Macao">
+                                                    Macao
+                                                </option>
+                                                <option value="Macedonia, The Former Yugoslav Republic of">
+                                                    Macedonia, The Former
+                                                    Yugoslav Republic of
+                                                </option>
+                                                <option value="Madagascar">
+                                                    Madagascar
+                                                </option>
+                                                <option value="Malawi">
+                                                    Malawi
+                                                </option>
+                                                <option value="Malaysia">
+                                                    Malaysia
+                                                </option>
+                                                <option value="Maldives">
+                                                    Maldives
+                                                </option>
+                                                <option value="Mali">
+                                                    Mali
+                                                </option>
+                                                <option value="Malta">
+                                                    Malta
+                                                </option>
+                                                <option value="Marshall Islands">
+                                                    Marshall Islands
+                                                </option>
+                                                <option value="Martinique">
+                                                    Martinique
+                                                </option>
+                                                <option value="Mauritania">
+                                                    Mauritania
+                                                </option>
+                                                <option value="Mauritius">
+                                                    Mauritius
+                                                </option>
+                                                <option value="Mayotte">
+                                                    Mayotte
+                                                </option>
+                                                <option value="Mexico">
+                                                    Mexico
+                                                </option>
+                                                <option value="Micronesia, Federated States of">
+                                                    Micronesia, Federated States
+                                                    of
+                                                </option>
+                                                <option value="Moldova, Republic of">
+                                                    Moldova, Republic of
+                                                </option>
+                                                <option value="Monaco">
+                                                    Monaco
+                                                </option>
+                                                <option value="Mongolia">
+                                                    Mongolia
+                                                </option>
+                                                <option value="Montenegro">
+                                                    Montenegro
+                                                </option>
+                                                <option value="Montserrat">
+                                                    Montserrat
+                                                </option>
+                                                <option value="Morocco">
+                                                    Morocco
+                                                </option>
+                                                <option value="Mozambique">
+                                                    Mozambique
+                                                </option>
+                                                <option value="Myanmar">
+                                                    Myanmar
+                                                </option>
+                                                <option value="Namibia">
+                                                    Namibia
+                                                </option>
+                                                <option value="Nauru">
+                                                    Nauru
+                                                </option>
+                                                <option value="Nepal">
+                                                    Nepal
+                                                </option>
+                                                <option value="Netherlands">
+                                                    Netherlands
+                                                </option>
+                                                <option value="Netherlands Antilles">
+                                                    Netherlands Antilles
+                                                </option>
+                                                <option value="New Caledonia">
+                                                    New Caledonia
+                                                </option>
+                                                <option value="New Zealand">
+                                                    New Zealand
+                                                </option>
+                                                <option value="Nicaragua">
+                                                    Nicaragua
+                                                </option>
+                                                <option value="Niger">
+                                                    Niger
+                                                </option>
+                                                <option value="Nigeria">
+                                                    Nigeria
+                                                </option>
+                                                <option value="Niue">
+                                                    Niue
+                                                </option>
+                                                <option value="Norfolk Island">
+                                                    Norfolk Island
+                                                </option>
+                                                <option value="Northern Mariana Islands">
+                                                    Northern Mariana Islands
+                                                </option>
+                                                <option value="Norway">
+                                                    Norway
+                                                </option>
+                                                <option value="Oman">
+                                                    Oman
+                                                </option>
+                                                <option value="Pakistan">
+                                                    Pakistan
+                                                </option>
+                                                <option value="Palau">
+                                                    Palau
+                                                </option>
+                                                <option value="Palestinian Territory, Occupied">
+                                                    Palestinian Territory,
+                                                    Occupied
+                                                </option>
+                                                <option value="Panama">
+                                                    Panama
+                                                </option>
+                                                <option value="Papua New Guinea">
+                                                    Papua New Guinea
+                                                </option>
+                                                <option value="Paraguay">
+                                                    Paraguay
+                                                </option>
+                                                <option value="Peru">
+                                                    Peru
+                                                </option>
+                                                <option value="Philippines">
+                                                    Philippines
+                                                </option>
+                                                <option value="Pitcairn">
+                                                    Pitcairn
+                                                </option>
+                                                <option value="Poland">
+                                                    Poland
+                                                </option>
+                                                <option value="Portugal">
+                                                    Portugal
+                                                </option>
+                                                <option value="Puerto Rico">
+                                                    Puerto Rico
+                                                </option>
+                                                <option value="Qatar">
+                                                    Qatar
+                                                </option>
+                                                <option value="Reunion">
+                                                    Reunion
+                                                </option>
+                                                <option value="Romania">
+                                                    Romania
+                                                </option>
+                                                <option value="Russian Federation">
+                                                    Russian Federation
+                                                </option>
+                                                <option value="Rwanda">
+                                                    Rwanda
+                                                </option>
+                                                <option value="Saint Helena">
+                                                    Saint Helena
+                                                </option>
+                                                <option value="Saint Kitts and Nevis">
+                                                    Saint Kitts and Nevis
+                                                </option>
+                                                <option value="Saint Lucia">
+                                                    Saint Lucia
+                                                </option>
+                                                <option value="Saint Pierre and Miquelon">
+                                                    Saint Pierre and Miquelon
+                                                </option>
+                                                <option value="Saint Vincent and The Grenadines">
+                                                    Saint Vincent and The
+                                                    Grenadines
+                                                </option>
+                                                <option value="Samoa">
+                                                    Samoa
+                                                </option>
+                                                <option value="San Marino">
+                                                    San Marino
+                                                </option>
+                                                <option value="Sao Tome and Principe">
+                                                    Sao Tome and Principe
+                                                </option>
+                                                <option value="Saudi Arabia">
+                                                    Saudi Arabia
+                                                </option>
+                                                <option value="Senegal">
+                                                    Senegal
+                                                </option>
+                                                <option value="Serbia">
+                                                    Serbia
+                                                </option>
+                                                <option value="Seychelles">
+                                                    Seychelles
+                                                </option>
+                                                <option value="Sierra Leone">
+                                                    Sierra Leone
+                                                </option>
+                                                <option value="Singapore">
+                                                    Singapore
+                                                </option>
+                                                <option value="Slovakia">
+                                                    Slovakia
+                                                </option>
+                                                <option value="Slovenia">
+                                                    Slovenia
+                                                </option>
+                                                <option value="Solomon Islands">
+                                                    Solomon Islands
+                                                </option>
+                                                <option value="Somalia">
+                                                    Somalia
+                                                </option>
+                                                <option value="South Africa">
+                                                    South Africa
+                                                </option>
+                                                <option value="South Georgia and The South Sandwich Islands">
+                                                    South Georgia and The South
+                                                    Sandwich Islands
+                                                </option>
+                                                <option value="Spain">
+                                                    Spain
+                                                </option>
+                                                <option value="Sri Lanka">
+                                                    Sri Lanka
+                                                </option>
+                                                <option value="Sudan">
+                                                    Sudan
+                                                </option>
+                                                <option value="Suriname">
+                                                    Suriname
+                                                </option>
+                                                <option value="Svalbard and Jan Mayen">
+                                                    Svalbard and Jan Mayen
+                                                </option>
+                                                <option value="Swaziland">
+                                                    Swaziland
+                                                </option>
+                                                <option value="Sweden">
+                                                    Sweden
+                                                </option>
+                                                <option value="Switzerland">
+                                                    Switzerland
+                                                </option>
+                                                <option value="Syrian Arab Republic">
+                                                    Syrian Arab Republic
+                                                </option>
+                                                <option value="Taiwan, Province of China">
+                                                    Taiwan, Province of China
+                                                </option>
+                                                <option value="Tajikistan">
+                                                    Tajikistan
+                                                </option>
+                                                <option value="Tanzania, United Republic of">
+                                                    Tanzania, United Republic of
+                                                </option>
+                                                <option value="Thailand">
+                                                    Thailand
+                                                </option>
+                                                <option value="Timor-leste">
+                                                    Timor-leste
+                                                </option>
+                                                <option value="Togo">
+                                                    Togo
+                                                </option>
+                                                <option value="Tokelau">
+                                                    Tokelau
+                                                </option>
+                                                <option value="Tonga">
+                                                    Tonga
+                                                </option>
+                                                <option value="Trinidad and Tobago">
+                                                    Trinidad and Tobago
+                                                </option>
+                                                <option value="Tunisia">
+                                                    Tunisia
+                                                </option>
+                                                <option value="Turkey">
+                                                    Turkey
+                                                </option>
+                                                <option value="Turkmenistan">
+                                                    Turkmenistan
+                                                </option>
+                                                <option value="Turks and Caicos Islands">
+                                                    Turks and Caicos Islands
+                                                </option>
+                                                <option value="Tuvalu">
+                                                    Tuvalu
+                                                </option>
+                                                <option value="Uganda">
+                                                    Uganda
+                                                </option>
+                                                <option value="Ukraine">
+                                                    Ukraine
+                                                </option>
+                                                <option value="United Arab Emirates">
+                                                    United Arab Emirates
+                                                </option>
+                                                <option value="United Kingdom">
+                                                    United Kingdom
+                                                </option>
+                                                <option value="United States">
+                                                    United States
+                                                </option>
+                                                <option value="United States Minor Outlying Islands">
+                                                    United States Minor Outlying
+                                                    Islands
+                                                </option>
+                                                <option value="Uruguay">
+                                                    Uruguay
+                                                </option>
+                                                <option value="Uzbekistan">
+                                                    Uzbekistan
+                                                </option>
+                                                <option value="Vanuatu">
+                                                    Vanuatu
+                                                </option>
+                                                <option value="Venezuela">
+                                                    Venezuela
+                                                </option>
+                                                <option value="Viet Nam">
+                                                    Viet Nam
+                                                </option>
+                                                <option value="Virgin Islands, British">
+                                                    Virgin Islands, British
+                                                </option>
+                                                <option value="Virgin Islands, U.S.">
+                                                    Virgin Islands, U.S.
+                                                </option>
+                                                <option value="Wallis and Futuna">
+                                                    Wallis and Futuna
+                                                </option>
+                                                <option value="Western Sahara">
+                                                    Western Sahara
+                                                </option>
+                                                <option value="Yemen">
+                                                    Yemen
+                                                </option>
+                                                <option value="Zambia">
+                                                    Zambia
+                                                </option>
+                                                <option value="Zimbabwe">
+                                                    Zimbabwe
+                                                </option>
+                                            </select>
+                                        </div>
+                                        <div className="col-12">
+                                            <label className="form-label">
+                                                Your Phone Number
+                                            </label>
+                                            <div className="input-group">
+                                                <div className="input-group-prepend">
+                                                    <span className="input-group-text">
+                                                        +880
+                                                    </span>
+                                                </div>
+                                                <input
+                                                    type="text"
+                                                    className="form-control"
+                                                    placeholder=""
+                                                />
+                                            </div>
+                                        </div>
+                                        <div className="alert-text">
+                                            <small>
+                                                Security is critical in Xtrader.
+                                                to help keep your account safe,
+                                                we'll text you a verification
+                                                code when you sign in on a new
+                                                device
+                                            </small>
+                                        </div>
+                                        <div className="text-center mt-4">
+                                            <button
+                                                type="submit"
+                                                className="btn btn-primary btn-block"
+                                            >
+                                                Send Code
+                                            </button>
+                                        </div>
+                                    </form>
+                                    <div className="new-account mt-3">
+                                        <p>
+                                            Don't get code?
+                                            <Link href="/otp1">
+                                            <a
+                                                className="text-primary"
+                                            >
+                                                Resend
+                                            </a>
+                                            </Link>
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}
+export default Otp1;

pages/otp2.js

+import Link from "next/link";
+function Otp2() {
+    return (
+        <>
+            <div className="authincation section-padding">
+                <div className="container h-100">
+                    <div className="row justify-content-center h-100 align-items-center">
+                        <div className="col-xl-5 col-md-6">
+                            <div
+                                className="alert alert-success  fade show d-flex justify-content-between"
+                                role="alert"
+                            >
+                                <span>
+                                    Please enter verification token from your
+                                    device
+                                </span>
+                                <span className="c-pointer" data-dismiss="alert">
+                                    <i className="ri-close-line"></i>
+                                </span>
+                            </div>
+                            <div className="mini-logo text-center my-3">
+                            <Link href="/">
+                                    <a>
+                                        <img src="./images/logo.png" alt="" />
+                                    </a>
+                                </Link>
+                                <h4 className="card-title mt-5">
+                                    2-Step Verification
+                                </h4>
+                            </div>
+                            <div className="auth-form card">
+                                <div className="card-body">
+                                    <p className="text-center mb-3">
+                                        Enter the verification code generated by
+                                        your phone ending in +xxx xxxxxxxx60.
+                                    </p>
+                                    <form className="row g-3">
+                                        <div className="col-12">
+                                            <div className="input-group">
+                                                <div className="input-group-prepend">
+                                                    <span className="input-group-text">
+                                                        <i className="ri-smartphone-line"></i>
+                                                    </span>
+                                                </div>
+                                                <input
+                                                    type="text"
+                                                    className="form-control"
+                                                    placeholder="verification code"
+                                                />
+                                            </div>
+                                        </div>
+                                        <div className="col-12">
+                                            <div className="text-center">
+                                                <button
+                                                    type="submit"
+                                                    className="btn btn-primary btn-block"
+                                                >
+                                                    Send
+                                                </button>
+                                            </div>
+                                        </div>
+                                        <div className="col-12">
+                                            <div className="form-check form-switch">
+                                                <input
+                                                    type="checkbox"
+                                                    className="form-check-input"
+                                                    id="exampleCheck1"
+                                                />
+                                                <label
+                                                    className="form-check-label"
+                                                    for="exampleCheck1"
+                                                >
+                                                    <small>
+                                                        Don't ask me for the
+                                                        code again for 30 days
+                                                        when I use this
+                                                        computer.
+                                                    </small>
+                                                </label>
+                                            </div>
+                                        </div>
+                                    </form>
+                                    <div className="new-account mt-3">
+                                        <p>
+                                            Don't get code?
+                                            <Link href="/otp-1">
+                                            <a
+                                                className="text-primary"                                                
+                                            >
+                                                Resend
+                                            </a>
+                                            </Link>
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}
+export default Otp2;

pages/profile.js

+import Link from "next/link";
+import Layout from "../components/layout/Layout";
+function Profile() {
+    return (
+        <>
+            <Layout
+                headTitle="Profile"
+                pageTitle="Profile"
+                pageTitleSub={"Welcome Intez Profile page"}
+                pageClass={"dashboard"}
+                parent={"Home"}
+                child={"Profile"}
+            >
+                <div className="row">
+                    <div className="col-xxl-6 col-xl-6 col-lg-6">
+                        <div className="card welcome-profile">
+                            <div className="card-body">
+                                <div className="d-flex align-items-center">
+                                    <img src="./images/profile/pic.jpg" alt="" />
+                                    <div className="ms-2">
+                                        <h4 className="mb-0">Welcome, Jannatul Maowa!</h4>
+                                        <p>
+                                            Looks like you are not verified yet. Verify
+                                            yourself.
+                                        </p>
+                                    </div>
+                                </div>
+                                <ul>
+                                    <li>
+                                        <a href="#">
+                                            <span className="verified">
+                                                <i className="ri-check-line"></i>
+                                            </span>
+                                            Verify account
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="#">
+                                            <span className="not-verified">
+                                                <i className="ri-shield-check-line"></i>
+                                            </span>
+                                            Two-factor authentication (2FA)
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col-xxl-6 col-xl-6 col-lg-6">
+                        <div class="card">
+                            <div className="card-body">
+                                <h4>Billing Information</h4>
+                                <div className="d-md-flex">
+                                    <div class="billing-section">
+                                        <p>Bill <h5 className="d-inline"> #12344</h5></p>
+                                        <p>Date:<h5 className="d-inline"> August 1, 2023</h5></p>
+                                        <p>Amount:<h5 className="d-inline"> $72.50</h5></p>
+                                        <p className="pb-0">Due Date:<h5 className="d-inline"> September 30, 2023</h5></p>
+                                    </div>
+                                    <div class="billing-section ms-md-5">
+                                        <p>Amount Due:<h5 className="d-inline"> $75.00</h5></p>
+                                        <p>Paperless Billing:<h5 className="d-inline"> Enabled</h5></p>
+                                        <p >Billing Frequency:<h5 className="d-inline"> Monthly</h5></p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col-xxl-6 col-xl-6 col-lg-6 d-none">
+                        <div className="card">
+                            <div className="card-header">
+                                <h4 className="card-title">Download App</h4>
+                            </div>
+                            <div className="card-body">
+                                <div className="app-link">
+                                    <h5>Get Verified On Our Mobile App</h5>
+                                    <p>
+                                        Verifying your identity on our mobile
+                                        app more secure, faster, and reliable.
+                                    </p>
+                                    <a href="#" className="btn btn-primary">
+                                        <img
+                                            src="./images/android.svg"
+                                            alt=""
+                                        />
+                                    </a>
+                                    <br />
+                                    <div className="mt-3"></div>
+                                    <a href="#" className="btn btn-primary">
+                                        <img src="./images/apple.svg" alt="" />
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col-xxl-8 col-xl-6 d-none">
+                        <div className="card">
+                            <div className="card-header">
+                                <h4 className="card-title">VERIFY & UPGRADE </h4>
+                            </div>
+                            <div className="card-body">
+                                <h5>
+                                    Account Status :
+                                    <span className="text-warning">
+                                        Pending <i className="icofont-warning"></i>
+                                    </span>
+                                </h5>
+                                <p>
+                                    Your account is unverified. Get verified to
+                                    enable funding, trading, and withdrawal.
+                                </p>
+                                <a href="#" className="btn btn-primary">
+                                    Get Verified
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+
+
+                    <div className="col-xxl-4 col-xl-6 d-none">
+                        <div className="card">
+                            <div className="card-header">
+                                <h4 className="card-title">Earn 30% Commission </h4>
+                            </div>
+                            <div className="card-body">
+                                <p>
+                                    Refer your friends and earn 30% of their
+                                    trading fees.
+                                </p>
+                                <a href="#" className="btn btn-primary">
+                                    Referral Program
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="col-xxl-12">
+                        <div className="card">
+                            <div className="card-header flex-row">
+                                <h4 className="card-title">Information </h4>
+                                <Link href="/settings-profile">
+                                    <a className="btn btn-primary">Edit</a>
+                                </Link>
+                            </div>
+                            <div className="card-body">
+                                <form className="row">
+                                    <div className="col-xxl-4 col-xl-4 col-lg-4 col-md-6">
+                                        <div className="user-info">
+                                            <span>USER ID</span>
+                                            <h4>818778</h4>
+                                        </div>
+                                    </div>
+                                    <div className="col-xxl-4 col-xl-4 col-lg-4 col-md-6">
+                                        <div className="user-info">
+                                            <span>EMAIL ADDRESS</span>
+                                            <h4>email@example.com</h4>
+                                        </div>
+                                    </div>
+                                    <div className="col-xxl-4 col-xl-4 col-lg-4 col-md-6">
+                                        <div className="user-info">
+                                            <span>COUNTRY OF RESIDENCE</span>
+                                            <h4>India</h4>
+                                        </div>
+                                    </div>
+                                    <div className="col-xxl-4 col-xl-4 col-lg-4 col-md-6">
+                                        <div className="user-info">
+                                            <span>JOINED SINCE</span>
+                                            <h4>20/10/2020</h4>
+                                        </div>
+                                    </div>
+                                    <div className="col-xxl-4 col-xl-4 col-lg-4 col-md-6">
+                                        <div className="user-info">
+                                            <span>TYPE</span>
+                                            <h4>Personal</h4>
+                                        </div>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+
+
+                </div>
+            </Layout>
+        </>
+    );
+}
+export default Profile;

pages/reset.js

+import Link from "next/link";
+function Reset() {
+    return (
+        <>
+            <div className="authincation section-padding">
+                <div className="container h-100">
+                    <div className="row justify-content-center h-100 align-items-center">
+                        <div className="col-xl-4 col-md-5">
+                            <div className="mini-logo text-center my-3">
+                            <Link href="/">
+                                    <a>
+                                        <img src="./images/logo.png" alt="" />
+                                    </a>
+                                </Link>
+                                <h4 className="card-title mt-5">Reset Password</h4>
+                            </div>
+                            <div className="auth-form card">
+                                <div className="card-body">
+                                    <form
+                                        className="row g-3"
+                                    >
+                                        <div className="col-12">
+                                            <label className="form-label">
+                                                Email
+                                            </label>
+
+                                            <input
+                                                type="text"
+                                                className="form-control"
+                                                placeholder="***********"
+                                            />
+                                        </div>
+                                        <div className="text-center mt-4">
+                                            <button
+                                                type="submit"
+                                                className="btn btn-primary btn-block"
+                                            >
+                                                Submit
+                                            </button>
+                                        </div>
+                                    </form>
+                                    <div className="new-account mt-3">
+                                        <p>
+                                            Don't get code?
+                                            <Link href="/otp-1">
+                                            <a
+                                                className="text-primary"                                                
+                                            >
+                                                Resend
+                                            </a>
+                                            </Link>
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}
+export default Reset;

pages/services.js

+import React from "react";
+import Layout from "../components/layout/Layout";
+import Button from "react-bootstrap/Button";
+import Modal from "react-bootstrap/Modal";
+import { useState } from "react";
+import { Form } from "reactstrap";
+function services() {
+  const [show, setShow] = useState(false);
+
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+  return (
+    <Layout
+      headTitle="Services"
+      pageTitle="Services"
+      pageTitleSub={"Welcome User"}
+      pageclassName={"Services"}
+      parent={"Home"}
+      child={"Services"}
+    >
+      <div className="row">
+        <div className="col-xl-3 col-sm-6">
+          <div className="stat-widget d-flex align-items-center bg-white">
+            <div className="widget-icon me-3 bg-primary">
+              <span>
+                <i className="ri-file-copy-2-line"></i>
+              </span>
+            </div>
+            <div className="widget-content">
+              <h3>483</h3>
+              <p>Total Requests</p>
+            </div>
+          </div>
+        </div>
+        <div className="col-xl-3 col-sm-6">
+          <div className="stat-widget d-flex align-items-center bg-white">
+            <div className="widget-icon me-3 bg-success">
+              <span>
+                <i className="ri-file-list-3-line"></i>
+              </span>
+            </div>
+            <div className="widget-content">
+              <h3>273</h3>
+              <p>Completed Requests</p>
+            </div>
+          </div>
+        </div>
+        <div className="col-xl-3 col-sm-6">
+          <div className="stat-widget d-flex align-items-center bg-white">
+            <div className="widget-icon me-3 bg-warning">
+              <span>
+                <i className="ri-file-paper-line"></i>
+              </span>
+            </div>
+            <div className="widget-content">
+              <h3>121</h3>
+              <p>Pending Requests</p>
+            </div>
+          </div>
+        </div>
+        <div className="col-xl-3 col-sm-6 mb-3">
+          <div className="stat-widget d-flex align-items-center bg-white">
+            <div className="widget-icon me-3 bg-danger">
+              <span>
+                <i className="ri-file-paper-2-line"></i>
+              </span>
+            </div>
+            <div className="widget-content">
+              <h3>89</h3>
+              <p>Canceled Requests</p>
+            </div>
+          </div>
+        </div>
+        <div className="col-sm-12 d-block d-md-none bg-white mt-1">
+           
+        <div className="d-flex align-items-center justify-content-between py-2  bg-white">
+                <div> <p className="fw-bold text-dark mb-0">Service Request</p></div>
+                <div> <button className="btn-sm btn-primary"    onClick={handleShow}>+</button></div>
+            </div>
+            </div>
+        <div className="col-sm-12 d-block d-md-none bg-white p-3 mb-2 mt-1">
+           
+          <div className="d-flex align-items-center justify-content-between">
+            <div>
+              <span>ABCD4556464QWE</span>
+            </div>
+            <div>
+              <span className="badge px-3 py-2 bg-success"> Completed</span>
+            </div>
+          </div>
+          <div className="d-flex align-items-center justify-content-between py-2">
+            <div>
+              <span>Water Leakage</span>
+            </div>
+            <div>
+              <span>DT:23/5/23</span>
+            </div>
+          </div>
+        </div>{" "}
+        <div className="col-sm-12 d-block d-md-none bg-white p-3">
+          <div className="d-flex align-items-center justify-content-between">
+            <div>
+              <span>ABCD4556464QWE</span>
+            </div>
+            <div>
+              <span className="badge px-3 py-2 bg-warning"> Pending</span>
+            </div>
+          </div>
+          <div className="d-flex align-items-center justify-content-between py-2">
+            <div>
+              <span>Water Leakage</span>
+            </div>
+            <div>
+              <span>DT:25/5/23</span>
+            </div>
+          </div>
+        </div>{" "}
+        <div className="col-xl-12 d-none d-md-block">
+          <div className="card">
+            <div className="card-header flex-row">
+              <h4 className="card-title">Services Request</h4>
+              <Button
+                variant="primary"
+                onClick={handleShow}
+                size="sm"
+                className="p-1"
+              >
+                + New Request
+              </Button>
+            </div>
+            <Modal show={show} onHide={handleClose}>
+              <Modal.Header closeButton>
+                <Modal.Title>New Service Request</Modal.Title>
+              </Modal.Header>
+              <Modal.Body>
+                <form className="row g-3 needs-validation" novalidate>
+                  <div className="col-md-6">
+                    <label for="validationCustom01" className="form-label">
+                      Full Name
+                    </label>
+                    <input
+                      type="text"
+                      className="form-control"
+                      id="validationCustom01"
+                      value="Mathew"
+                      required
+                    />
+                    <div className="valid-feedback">Looks good!</div>
+                  </div>
+                  <div className="col-md-6">
+                    <label for="validationCustom01" className="form-label">
+                      Mobile
+                    </label>
+                    <input
+                      type="tel"
+                      className="form-control"
+                      id="validationCustom02"
+                      value="123456"
+                      required
+                    />
+                    <div className="valid-feedback">Looks good!</div>
+                  </div>
+                  <div className="col-md-6">
+                    <label for="validationCustom04" className="form-label">
+                      Service
+                    </label>
+                    <select
+                      className="form-select"
+                      id="validationCustom04"
+                      required
+                    >
+                      <option>New Water Connection</option>
+                      <option>Water Leakage</option>
+                      <option>Water Shortage</option>
+                    </select>
+                    <div className="invalid-feedback">
+                      Please select a valid state.
+                    </div>
+                  </div>
+                  <div className="col-md-6">
+                    <label for="validationCustom03" className="form-label">
+                      Building NO / Street
+                    </label>
+                    <input
+                      type="text"
+                      className="form-control"
+                      id="validationCustom03"
+                      value="5/35-1 ,River Rd, Fort Kochi"
+                      required
+                    />
+                    <div className="invalid-feedback">
+                      Please provide Building no / Street.
+                    </div>
+                  </div>
+                  <div className="col-md-6">
+                    <label for="validationCustom03" className="form-label">
+                      City
+                    </label>
+                    <input
+                      type="text"
+                      className="form-control"
+                      id="validationCustom03"
+                      value="Kochi"
+                      required
+                    />
+                    <div className="invalid-feedback">
+                      Please provide a valid city.
+                    </div>
+                  </div>
+
+                  <div className="col-md-6">
+                    <label for="validationCustom05" className="form-label">
+                      Zip
+                    </label>
+                    <input
+                      type="text"
+                      className="form-control"
+                      id="validationCustom05"
+                      value="682001"
+                      required
+                    />
+                    <div className="invalid-feedback">
+                      Please provide a valid zip.
+                    </div>
+                  </div>
+                  <div className="col-md-6">
+                  <div className="mb-3">
+  <label for="formFileSm" className="form-label">Documents</label>
+  <a type="file" className="border p-2 mx-2 text-dark text-uppercase"> Upload</a>
+</div>
+                  </div>
+                  <div className="col-12">
+                    <div className="form-check">
+                      <input
+                        className="form-check-input"
+                        type="checkbox"
+                        value=""
+                        id="invalidCheck"
+                        required
+                      />
+                      <label className="form-check-label" for="invalidCheck">
+                        Agree to terms and conditions
+                      </label>
+                      <div className="invalid-feedback">
+                        You must agree before submitting.
+                      </div>
+                    </div>
+                  </div>
+                </form>
+              </Modal.Body>
+              <Modal.Footer>
+                <Button variant="primary" onClick={handleClose}>
+                  Submit Request
+                </Button>
+              </Modal.Footer>
+            </Modal>
+            <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>Application No</th>
+                        <th>Service</th>
+                        <th>Name</th>
+                        <th>Documents</th>
+                        <th>Mobile</th>
+                        <th>Status</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr>
+                        <td>
+                          <div className="form-check">
+                            <input
+                              className="form-check-input"
+                              type="checkbox"
+                              value=""
+                              id="flexCheckDefault"
+                            />
+                          </div>
+                        </td>
+                        <td>ABCD4556464QWE</td>
+                        <td>New Water Connection</td>
+                        <td>Jhon</td>
+                        <td>File_090-1</td>
+                        <td>5678909876</td>
+                        <td>
+                          <span className="badge px-3 py-2 bg-success">
+                            {" "}
+                            Completed
+                          </span>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <div className="form-check">
+                            <input
+                              className="form-check-input"
+                              type="checkbox"
+                              value=""
+                              id="flexCheckDefault"
+                            />
+                          </div>
+                        </td>
+
+                        <td>ABMK846493CFE</td>
+                        <td>New Sewerage Connection</td>
+                        <td>Jhon</td>
+                        <td>File_08982_-1</td>
+                        <td>5678907865</td>
+                        <td>
+                          <span className="badge px-3 py-2 bg-danger  ">
+                            Cancel
+                          </span>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <div className="form-check">
+                            <input
+                              className="form-check-input"
+                              type="checkbox"
+                              value=""
+                              id="flexCheckDefault"
+                            />
+                          </div>
+                        </td>
+
+                        <td>ABGU745632CFE</td>
+                        <td>Water Leak</td>
+                        <td>Rajesh</td>
+                        <td>File_08_88-1</td>
+                        <td>5678903491</td>
+                        <td>
+                          <span className="badge px-3 py-2 bg-success">
+                            Completed
+                          </span>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <div className="form-check">
+                            <input
+                              className="form-check-input"
+                              type="checkbox"
+                              value=""
+                              id="flexCheckDefault"
+                            />
+                          </div>
+                        </td>
+
+                        <td>ABJK879125HNE</td>
+                        <td>Water Shortage</td>
+                        <td>Karan</td>
+                        <td>File_070-1</td>
+                        <td>5678905672</td>
+                        <td>
+                          <span className="badge px-3 py-2 bg-warning  ">
+                            Pending
+                          </span>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <div className="form-check">
+                            <input
+                              className="form-check-input"
+                              type="checkbox"
+                              value=""
+                              id="flexCheckDefault"
+                            />
+                          </div>
+                        </td>
+
+                        <td>ABTY876545JIE</td>
+                        <td>New Water Connection</td>
+                        <td>Rathod</td>
+                        <td></td>
+                        <td>5678901232</td>
+                        <td>
+                          <span className="badge px-3 py-2 bg-success">
+                            Completed
+                          </span>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <div className="form-check">
+                            <input
+                              className="form-check-input"
+                              type="checkbox"
+                              value=""
+                              id="flexCheckDefault"
+                            />
+                          </div>
+                        </td>
+                        <td>ABQW345678RTE</td>
+                        <td>New Sewerage Connection</td>
+                        <td>Smith</td>
+                        <td></td>
+                        <td>5678903456</td>
+                        <td>
+                          <span className="badge px-3 py-2 bg-warning  ">
+                            Pending
+                          </span>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+}
+
+export default services;

pages/settings-activity.js

+
+import Layout from "../components/layout/Layout";
+import SettingsMenu from "./../components/layout/SettingsMenu";
+
+function SettingsActivity() {
+    return (
+        <>
+            <Layout
+                headTitle="Activity"
+                pageTitle="Activity"
+                pageTitleSub={"Welcome Intez Activity page"}
+                pageClass={"dashboard"}
+                parent={"Settings"}
+                child={"Activity"}
+            >
+                <SettingsMenu />
+                <div className="row">
+                    <div className="col-xxl-12">
+                        <div className="card">
+                            <div className="card-header">
+                                <h4 className="card-title">Third-Party Applications </h4>
+                            </div>
+                            <div className="card-body">
+                                <div className="d-flex align-items-center">
+                                    <span className="me-3 icon-circle bg-warning text-white">
+                                    <i className="ri-question-answer-line"></i>
+                                    </span>
+                                    <div>
+                                        <h5 className="mb-0">You haven't authorized any applications yet.
+                                            </h5>
+                                        <p>After connecting an application with your account, you can
+                                                manage or revoke its access here.</p>
+                                        <a className="btn btn-primary">Authorize now</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="card">
+                            <div className="card-header">
+                                <h4 className="card-title">Web Sessions</h4>
+
+                                <small>These sessions are currently signed in to your account. Sign out
+                                        all other sessions</small>
+                            </div>
+                            <div className="card-body">
+                                <div className="table-responsive table-icon">
+                                    <table className="table">
+                                        <thead>
+                                            <tr>
+                                                <th>Signed In</th>
+                                                <th>Browser</th>
+                                                <th>IP Address</th>
+                                                <th>Near</th>
+                                                <th>Current</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr>
+                                                <td>1 day ago</td>
+                                                <td>Chrome (Windows)</td>
+                                                <td>250.364.239.254</td>
+                                                <td>Bangladesh, Dhaka</td>
+                                                <td>
+                                                    <span><i className="ri-check-line text-success me-1"></i></span>
+                                                    <span><i className="ri-close-line text-danger"></i></span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>1 day ago</td>
+                                                <td>Chrome (Windows)</td>
+                                                <td>250.364.239.254</td>
+                                                <td>Bangladesh, Dhaka</td>
+                                                <td>
+                                                    <span><i className="ri-check-line text-success me-1"></i></span>
+                                                    <span><i className="ri-close-line text-danger"></i></span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>1 day ago</td>
+                                                <td>Chrome (Windows)</td>
+                                                <td>250.364.239.254</td>
+                                                <td>Bangladesh, Dhaka</td>
+                                                <td>
+                                                    <span><i className="ri-check-line text-success me-1"></i></span>
+                                                    <span><i className="ri-close-line text-danger"></i></span>
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+
+
+                        <div className="card">
+                            <div className="card-header">
+                                <h4 className="card-title">Confirmed Devices</h4>
+
+                                <small>These devices are currently allowed to access your account.
+                                        Remove all other devices</small>
+                            </div>
+                            <div className="card-body">
+                                <div className="table-responsive">
+                                    <table className="table">
+                                        <thead>
+                                            <tr>
+                                                <th>Confirmed</th>
+                                                <th>Browser</th>
+                                                <th>IP Address</th>
+                                                <th>Near</th>
+                                                <th>Current</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr>
+                                                <td>1 day ago</td>
+                                                <td>Chrome (Windows)</td>
+                                                <td> 250.364.239.254</td>
+                                                <td>Bangladesh, Dhaka</td>
+                                                <td>
+                                                    <span><i className="ri-check-line text-success me-1"></i></span>
+                                                    <span><i className="ri-close-line text-danger"></i></span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>8 days ago</td>
+                                                <td>Chrome (Windows)</td>
+                                                <td> 250.364.239.254</td>
+                                                <td>Bangladesh, Dhaka</td>
+
+
+                                                <td>
+                                                    <span><i className="ri-check-line text-success me-1"></i></span>
+                                                    <span><i className="ri-close-line text-danger"></i></span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>15 days ago</td>
+                                                <td>Chrome (Windows)</td>
+                                                <td> 250.364.239.254</td>
+                                                <td>Bangladesh, Dhaka</td>
+
+
+                                                <td>
+                                                    <span><i className="ri-check-line text-success me-1"></i></span>
+                                                    <span><i className="ri-close-line text-danger"></i></span>
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+
+
+                        <div className="card">
+                            <div className="card-header">
+                                <h4 className="card-title">Account Activity</h4>
+
+                                <small>Recent activity on your account.</small>
+                            </div>
+                            <div className="card-body">
+                                <div className="table-responsive">
+                                    <table className="table">
+                                        <thead>
+                                            <tr>
+                                                <th>Action</th>
+                                                <th>Source</th>
+                                                <th>IP Address</th>
+                                                <th>Location</th>
+                                                <th>When</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr>
+                                                <td>verified second factor</td>
+                                                <td>api</td>
+                                                <td>157.119.239.254</td>
+                                                <td>Bangladesh</td>
+                                                <td>
+                                                    <a href="#">about 1 hour ago</a>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>verified second factor</td>
+                                                <td>api</td>
+                                                <td>157.119.239.254</td>
+                                                <td>Bangladesh</td>
+                                                <td>
+                                                    <a href="#">about 2 hours
+                                                        ago</a>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>second factor failure</td>
+                                                <td>api</td>
+                                                <td>157.119.239.254</td>
+                                                <td>Bangladesh</td>
+                                                <td>
+                                                    <a href="#">about 2 hours
+                                                        ago</a>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>device confirmation completed</td>
+                                                <td>web</td>
+                                                <td>157.119.239.254</td>
+                                                <td>Bangladesh</td>
+                                                <td>
+                                                    <a href="#">1 day ago</a>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>signin</td>
+                                                <td>web</td>
+                                                <td>157.119.239.254</td>
+                                                <td>Bangladesh</td>
+                                                <td>
+                                                    <a href="#">1 day ago</a>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>verified second factor</td>
+                                                <td>web</td>
+                                                <td>157.119.239.254</td>
+                                                <td>Bangladesh</td>
+                                                <td>
+                                                    <a href="#">1 day ago</a>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>signout</td>
+                                                <td>web</td>
+                                                <td>157.119.239.214</td>
+                                                <td>Bangladesh</td>
+                                                <td>
+                                                    <a href="#">8 days ago</a>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>signin</td>
+                                                <td>web</td>
+                                                <td>157.119.239.214</td>
+                                                <td>Bangladesh</td>
+                                                <td>
+                                                    <a href="#">8 days ago</a>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>verified second factor</td>
+                                                <td>web</td>
+                                                <td>157.119.239.214</td>
+                                                <td>Bangladesh</td>
+                                                <td>
+                                                    <a href="#">8 days ago</a>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>signout</td>
+                                                <td>api</td>
+                                                <td>157.119.239.214</td>
+                                                <td>Bangladesh</td>
+                                                <td>
+                                                    <a href="#">8 days ago</a>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>signout</td>
+                                                <td>api</td>
+                                                <td>157.119.239.214</td>
+                                                <td>Bangladesh</td>
+                                                <td>
+                                                    <a href="#">8 days ago</a>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>device confirmation completed</td>
+                                                <td>web</td>
+                                                <td>157.119.239.214</td>
+                                                <td>Bangladesh</td>
+                                                <td>
+                                                    <a href="#">8 days ago</a>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>signin</td>
+                                                <td>web</td>
+                                                <td>157.119.239.214</td>
+                                                <td>Bangladesh</td>
+                                                <td>
+                                                    <a href="#">8 days ago</a>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>verified second factor</td>
+                                                <td>web</td>
+                                                <td>157.119.239.214</td>
+                                                <td>Bangladesh</td>
+                                                <td>
+                                                    <a href="#">8 days ago</a>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>signout</td>
+                                                <td>api</td>
+                                                <td>157.119.239.214</td>
+                                                <td>Bangladesh</td>
+                                                <td>
+                                                    <a href="#">15 days ago</a>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>verified second factor</td>
+                                                <td>web</td>
+                                                <td>157.119.239.214</td>
+                                                <td>Bangladesh</td>
+                                                <td>
+                                                    <a href="#">15 days ago</a>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>signin</td>
+                                                <td>web</td>
+                                                <td>157.119.239.214</td>
+                                                <td>Bangladesh</td>
+                                                <td>
+                                                    <a href="#">15 days ago</a>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>signout</td>
+                                                <td>api</td>
+                                                <td>157.119.239.214</td>
+                                                <td>Bangladesh</td>
+                                                <td>
+                                                    <a href="#">15 days ago</a>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>verified second factor</td>
+                                                <td>web</td>
+                                                <td>23.106.249.39</td>
+                                                <td>Singapore</td>
+                                                <td>
+                                                    <a href="#">15 days ago</a>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>verified second factor</td>
+                                                <td>api</td>
+                                                <td>157.119.239.214</td>
+                                                <td>Bangladesh</td>
+                                                <td>
+                                                    <a href="#">15 days ago</a>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>phone verified</td>
+                                                <td>api</td>
+                                                <td>157.119.239.214</td>
+                                                <td>Bangladesh</td>
+                                                <td>
+                                                    <a href="#">15 days ago</a>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>phone added</td>
+                                                <td>api</td>
+                                                <td>157.119.239.214</td>
+                                                <td>Bangladesh</td>
+                                                <td>
+                                                    <a href="#">15 days ago</a>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>signin</td>
+                                                <td>api</td>
+                                                <td>157.119.239.214</td>
+                                                <td>Bangladesh</td>
+                                                <td>
+                                                    <a href="#">15 days ago</a>
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+
+
+                        <div className="card transparent">
+                            <div className="card-header">
+                                <h4 className="card-title">Close Account</h4>
+                            </div>
+                            <div className="card-body">
+                                <p>Withdraw funds and close your Xtrader account - <span className="text-danger">this
+                                            cannot be undone</span></p>
+                                <a href="#" className="btn btn-danger">Close Account</a>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+            </Layout>
+        </>
+    );
+}
+export default SettingsActivity;

pages/settings-api.js

+
+import Layout from "../components/layout/Layout";
+import CreateApi from './../components/form/CreateApi';
+import SettingsMenu from "./../components/layout/SettingsMenu";
+function SettingsApi() {
+    return (
+        <>
+            <Layout
+                headTitle="API"
+                pageTitle="API"
+                pageTitleSub={"Welcome Intez API page"}
+                pageClass={"dashboard"}
+                parent={"Settings"}
+                child={"API"}
+            >
+                <SettingsMenu />
+
+                <div className="row">
+                        <div className="col-xxl-12">
+                            <div className="card">
+                                <div className="card-header">
+                                    <h4 className="card-title">Create API Key</h4>
+                                </div>
+                                <div className="card-body">
+                                    <CreateApi/>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="col-xl-12">
+                            <div className="card">
+                                <div className="card-header">
+                                    <h4 className="card-title">Your API Keys</h4>
+                                </div>
+                                <div className="card-body">
+                                    <div className="table-responsive api-table">
+                                        <table className="table">
+                                            <thead>
+                                                <tr>
+                                                    <th>Key</th>
+                                                    <th>Status</th>
+                                                    <th>Action</th>
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                <tr>
+                                                    <td>69e387f1-31c3-45ad-9c68-5a51e5e78b43</td>
+                                                    <td>
+                                                        <div className="form-check form-switch">
+                                                            <input className="form-check-input" type="checkbox" checked={true}/>
+                                                        </div>
+                                                    </td>
+                                                    <td>
+                                                        <span>
+                                                        <i className="ri-delete-bin-line"></i>
+                                                        </span>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td>69e387f1-31c3-45ad-9c68-5a51e5e78b43</td>
+                                                    <td>
+                                                        <div className="form-check form-switch">
+                                                            <input className="form-check-input" type="checkbox"/>
+                                                        </div>
+                                                    </td>
+                                                    <td>
+                                                        <span>
+                                                            <i className="ri-delete-bin-line"></i>
+                                                        </span>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td>69e387f1-31c3-45ad-9c68-5a51e5e78b43</td>
+                                                    <td>
+                                                        <div className="form-check form-switch">
+                                                            <input className="form-check-input" type="checkbox"/>
+                                                        </div>
+                                                    </td>
+                                                    <td>
+                                                        <span>
+                                                            <i className="ri-delete-bin-line"></i>
+                                                        </span>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td>69e387f1-31c3-45ad-9c68-5a51e5e78b43</td>
+                                                    <td>
+                                                        <div className="form-check form-switch">
+                                                            <input className="form-check-input" type="checkbox"/>
+                                                        </div>
+                                                    </td>
+                                                    <td>
+                                                        <span>
+                                                            <i className="ri-delete-bin-line"></i>
+                                                        </span>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td>69e387f1-31c3-45ad-9c68-5a51e5e78b43</td>
+                                                    <td>
+                                                        <div className="form-check form-switch">
+                                                            <input className="form-check-input" type="checkbox"/>
+                                                        </div>
+                                                    </td>
+                                                    <td>
+                                                        <span>
+                                                            <i className="ri-delete-bin-line"></i>
+                                                        </span>
+                                                    </td>
+                                                </tr>
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+            </Layout>
+        </>
+    );
+}
+export default SettingsApi;

pages/settings-application.js

+import Preferences from "../components/form/Preferences";
+import Layout from "../components/layout/Layout";
+import SettingsMenu from "./../components/layout/SettingsMenu";
+function SettingsPreferences() {
+    return (
+        <>
+            <Layout
+                 headTitle="Application"
+                 pageTitle="Application"
+                 pageTitleSub={"Welcome Intez Settings Application page"}
+                 pageClass={"dashboard"}
+                 parent={"Settings"}
+                 child={"Application"}
+            >
+                <SettingsMenu />
+
+                <div className="row">
+                    <div className="col-xxl-12">
+                        <div className="card">
+                            <div className="card-header">
+                                <h4 className="card-title">Preperences</h4>
+                            </div>
+                            <div className="card-body">
+                                <Preferences/>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </Layout>
+        </>
+    );
+}
+export default SettingsPreferences;

pages/settings-payment-method.js

+
+import Layout from "../components/layout/Layout";
+import SettingsMenu from "./../components/layout/SettingsMenu";
+function SettingsPayment() {
+    return (
+        <>
+            <Layout
+                headTitle="Payment Method"
+                pageTitle="Payment Method"
+                pageTitleSub={"Welcome Intez Settings Payment Method page"}
+                pageClass={"dashboard"}
+                parent={"Settings"}
+                child={"Payment Method"}
+            >
+                <SettingsMenu />
+
+                <div className="row">
+                    <div className="col-12">
+                        <div className="card">
+                            <div className="card-header">
+                                <h4 className="card-title">Add a payment method </h4>
+                            </div>
+                            <div className="card-body">
+                                <div className="verify-content">
+                                    <div className="d-flex align-items-center">
+                                        <span className="me-3 icon-circle bg-primary text-white">
+                                            <i className="ri-bank-line"></i>
+                                        </span>
+                                        <div className="primary-number">
+                                            <h5 className="mb-0">Bank of America</h5>
+                                            <small>Bank **************5421</small>
+                                            <br />
+                                            <span className="text-success">Verified</span>
+                                        </div>
+                                    </div>
+                                    <button className=" btn btn-outline-primary">Manage</button>
+                                </div>
+                                <hr className="dropdown-divider my-4" />
+                                <div className="verify-content">
+                                    <div className="d-flex align-items-center">
+                                        <span className="me-3 icon-circle bg-primary text-white">
+                                            <i className="ri-mastercard-line"></i>
+                                        </span>
+                                        <div className="primary-number">
+                                            <h5 className="mb-0">Master Card</h5>
+                                            <small>Credit Card *********5478</small>
+                                            <br />
+                                            <span className="text-success">Verified</span>
+                                        </div>
+                                    </div>
+                                    <button className=" btn btn-outline-primary">Manage</button>
+                                </div>
+
+                                <div className="mt-5 text-center">
+                                    <button type="button" className="btn btn-primary m-2" data-toggle="modal"
+                                        data-target="#addBank">Add New Bank</button>
+                                    <button type="button" className="btn btn-success m-2" data-toggle="modal"
+                                        data-target="#addCard">Add New Card</button>
+                                </div>
+
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </Layout>
+        </>
+    );
+}
+export default SettingsPayment;

pages/settings-profile.js

+import UpdateInfo from "../components/form/UpdateInfo";
+import Layout from "../components/layout/Layout";
+import PersonalInfo from "./../components/form/PersonalInfo";
+import UpdateAvatar from "./../components/form/UpdateAvatar";
+import SettingsMenu from "./../components/layout/SettingsMenu";
+
+function SettingsProfile() {
+    return (
+        <>
+            <Layout
+                headTitle="Profile"
+                pageTitle="Profile"
+                pageTitleSub={"Welcome Intez Settings Profile page"}
+                pageClass={"dashboard"}
+                parent={"Settings"}
+                child={"Profile"}
+            >
+                <SettingsMenu />
+                <div className="row">
+                    <div className="col-xxl-6 col-xl-6 col-lg-6">
+                        <div className="card">
+                            <div className="card-header">
+                                <h4 className="card-title">User Profile</h4>
+                            </div>
+                            <div className="card-body">
+                                <UpdateAvatar />
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col-xxl-6 col-xl-6 col-lg-6">
+                        <div className="card">
+                            <div className="card-header">
+                                <h4 className="card-title">Update Profile</h4>
+                            </div>
+                            <div className="card-body">
+                                <UpdateInfo />
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col-xxl-12">
+                        <div className="card">
+                            <div className="card-header">
+                                <h4 className="card-title">Personal Information</h4>
+                            </div>
+                            <div className="card-body">
+                                <PersonalInfo />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </Layout>
+        </>
+    );
+}
+export default SettingsProfile;

pages/settings-security.js

+
+import Layout from "../components/layout/Layout";
+import SettingsMenu from "./../components/layout/SettingsMenu";
+function SettingsSecurity() {
+    return (
+        <>
+            <Layout
+                headTitle="Security"
+                pageTitle="Security"
+                pageTitleSub={"Welcome Intez Settings Security page"}
+                pageClass={"dashboard"}
+                parent={"Settings"}
+                child={"Security"}
+            >
+                <SettingsMenu />
+
+                <div className="row">
+                    <div className="col-xxl-12">
+                        <div className="card">
+                            <div className="card-header">
+                                <h4 className="card-title">2-step verification </h4>
+                            </div>
+                            <div className="card-body">
+                                <div className="verify-content ">
+                                    <div className="d-flex align-items-center">
+                                        <span className="me-3 icon-circle bg-primary text-white">
+                                            <i className="ri-smartphone-line"></i>
+                                        </span>
+                                        <div className="primary-number">
+                                            <p className="mb-0"><strong>+xxx xxxxxxxx60</strong></p>
+                                            <small>Keep your primary phone number up-to-date</small>
+                                            <br />
+                                            <span className="text-success">Required</span>
+                                        </div>
+                                    </div>
+                                    <button className=" btn btn-primary">Manage</button>
+                                </div>
+                                <hr className="dropdown-divider my-4" />
+                                <div className="verify-content">
+                                    <div className="d-flex align-items-center">
+                                        <span className="me-3 icon-circle bg-primary text-white"><i className="ri-mail-line"></i></span>
+                                        <div className="primary-number">
+                                            <p className="mb-0"><strong>hello@example.com</strong></p>
+                                            <small>Keep your primary email up-to-date</small>
+                                            <br />
+                                            <span className="text-success">Required</span>
+                                        </div>
+                                    </div>
+                                    <button className=" btn btn-primary">Manage</button>
+                                </div>
+                                <hr className="dropdown-divider my-4" />
+                                <div className="verify-content">
+                                    <div className="d-flex align-items-center">
+                                        <span className="me-3 icon-circle bg-primary text-white"><i className="ri-key-line"></i></span>
+                                        <div className="primary-number">
+                                            <p className="mb-0"><strong>*************</strong></p>
+                                            <small>You can change your password</small>
+                                            <br />
+                                            <span className="text-success">Required</span>
+                                        </div>
+                                    </div>
+                                    <button className=" btn btn-primary">Manage</button>
+                                </div>
+
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col-xxl-12">
+                        <div className="card">
+                            <div className="card-header">
+                                <h4 className="card-title">Identity verification </h4>
+                            </div>
+                            <div className="card-body">
+                                <div className="verify-content">
+                                    <div className="d-flex align-items-center">
+                                        <span className="me-3 icon-circle bg-primary text-white">
+                                            <i className="ri-lock-password-line"></i>
+                                        </span>
+                                        <div className="primary-number">
+                                            <p className="mb-0">xxx xxxxx xxx40</p>
+                                            <small>Social Security Number</small>
+                                            <br />
+                                            <span className="text-success">Verified</span>
+                                        </div>
+                                    </div>
+                                    <button className=" btn btn-primary" data-toggle="modal"
+                                        data-target="#idCardModal">Manage</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </Layout>
+        </>
+    );
+}
+export default SettingsSecurity;

pages/signin.js

+import Link from "next/link";
+import SigninForm from "../components/form/SigninForm";
+import { COMPANY_NAME } from "../helpers/helpers";
+import Layoutform from "../components/form/authselection/layoutform";
+
+function Signin() {
+    return (
+        <>
+            <div className="authincation section-padding auth-bg">
+                <div className="container h-100">
+                    <div className="row justify-content-center h-100 align-items-center">
+                        <div className="col-xl-5 col-md-6">
+
+                            <div className="mini-logo  d-flex justify-content-center align-items-center flex-column text-center my-4">
+                                <Link href="/">
+                                    <div className="logocontainer">
+                                        <img src="./images/kerala/keralawater.png" alt={COMPANY_NAME} />
+                                    </div>
+                                </Link>
+                            
+                                {/* <h4 className="card-title mt-5 w-100 d-flex justify-content-center align-items-center gap-2">
+                                   <div> Sign in as</div> 
+                                   <div>
+                                   <select className="form-control">  
+                                        <option>Consumer</option>
+                                        <option>Employee</option>
+                                      
+                                        <option>Plumber</option>
+                                    </select>
+                                   </div>
+                                </h4> */}
+                            </div>
+                            <div className="auth-form card">
+                                <div className="card-body">
+
+                              
+                                <SigninForm />
+                                    <p className="mt-3 mb-0">
+                                        Don't have an account?
+                                        <Link href="/signup">
+                                            <a className="text-primary">Sign up</a>
+                                        </Link>
+                                    </p>
+
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}
+export default Signin;

pages/signup.js

+import Link from "next/link";
+import SignupForm from "./../components/form/SignupForm";
+import { COMPANY_NAME } from "../helpers/helpers";
+
+function Signin() {
+    return (
+        <>
+           <div className="authincation section-padding auth-bg">
+                <div className="container h-100">
+                    <div className="row justify-content-center h-100 align-items-center">
+                        <div className="col-xl-5 col-md-6">
+
+                            <div className="mini-logo  d-flex justify-content-center align-items-center flex-column text-center my-4">
+                                <Link href="/">
+                                    <div className="logocontainer">
+                                        <img src="./images/kerala/keralawater.png" alt={COMPANY_NAME} />
+                                    </div>
+                                </Link>
+                            
+                                {/* <h4 className="card-title mt-5 w-100 d-flex justify-content-center align-items-center gap-2">
+                                   <div> Sign in as</div> 
+                                   <div>
+                                   <select className="form-control">  
+                                        <option>Consumer</option>
+                                        <option>Employee</option>
+                                      
+                                        <option>Plumber</option>
+                                    </select>
+                                   </div>
+                                </h4> */}
+                            </div>
+                            <div className="auth-form card">
+                                <div className="card-body">
+
+                              
+                                <SignupForm/>
+                                    <p className="mt-3 mb-0">
+                                        Don't have an account?
+                                        <Link href="/signup">
+                                            <a className="text-primary">Sign up</a>
+                                        </Link>
+                                    </p>
+
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}
+export default Signin;

pages/test.js

+
+import Layout from "../components/layout/Layout";
+
+function Test() {
+    return (
+        <>
+            <Layout
+                headTitle="Profile"
+                pageTitle="Profile"
+                pageTitleSub={"Welcome Intez Settings Profile page"}
+                pageClass={"dashboard"}
+                parent={"Settings"}
+                child={"Profile"}
+            >
+
+                
+            </Layout>
+        </>
+    );
+}
+export default Test;

pages/verify-email.js

+import Link from "next/link";
+
+function Test() {
+    return (
+        <>
+            <div className="verification section-padding">
+                <div className="container h-100">
+                    <div className="row justify-content-center h-100 align-items-center">
+                        <div className="col-xl-5 col-md-6">
+                            <div className="mini-logo text-center my-4">
+                                <Link href="/">
+                                    <a>
+                                        <img src="./images/logo.png" alt="" />
+                                    </a>
+                                </Link>
+                                <h4 className="card-title mt-5">
+                                    Verify your Email
+                                </h4>
+                            </div>
+                            <div className="auth-form card">
+                                <div className="card-body">
+                                    <form className="identity-upload">
+                                        <div className="identity-content">
+                                            <span className="icon">
+                                                <i className="ri-mail-check-line"></i>
+                                            </span>
+                                            <p>
+                                                We sent verification email to &nbsp;
+                                                <strong className="text-dark">
+                                                     example@email.com
+                                                </strong>
+                                                . Click the link inside to get
+                                                started!
+                                            </p>
+                                        </div>
+                                    </form>
+                                </div>
+                                <div className="card-footer text-center">
+                                    <Link href="/signup">
+                                        <a>Email didn't arrive?</a>
+                                    </Link>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}
+export default Test;

pages/water.js

+import React from 'react'
+import Layout from '../components/layout/Layout'
+
+function water() {
+  return (
+    <Layout headTitle="Dashboard" pageTitle="Water" pageTitleSub={""} pageClass={"dashboard"} parent={"Home"} child={"Water"}>
+    <div className="row">
+        <div className="col-xxl-12 col-xl-12 col-lg-12">
+            <div className="card">
+                <div className="card-header">
+                    <h4 className="card-title">Create Connection</h4>
+                </div>
+                <div className="card-body">
+                    <form className="invoice-form">
+                        <form>
+                            <div className="row justify-content-between">
+                                <div className="col-xl-6">
+                                    <div className="mb-3">
+                                        <label className="form-label">Name</label>
+                                        <input type="email" className="form-control" placeholder="Jonaed Bogdadi"/>
+                                    </div>
+                                    <div className="mb-3">
+                                        <label className="form-label">Email</label>
+                                        <input type="email" className="form-control"
+                                            placeholder="Jonaed@bogdad.com "/>
+                                    </div>
+                                    <div className="mb-3">
+                                        <label className="form-label">Location</label>
+                                        <input type="text" className="form-control"
+                                            placeholder="Location"/>
+                                    </div>
+                                </div>
+                                <div className="col-xl-6">
+                                    <div className="mb-3">
+                                        <label className="form-label">Phone</label>
+                                        <input type="number" className="form-control" placeholder="+91 9876543218"/>
+                                    </div>
+                                    <div className="mb-3">
+                                        <label className="form-label">Pincode</label>
+                                        <input type="text" className="form-control" placeholder="987654"/>
+                                    </div>
+                                    <div className="mb-3">
+                                        <label className="form-label">Address</label>
+                                        <input type="text" className="form-control"
+                                            placeholder="Address"/>
+                                    </div>
+                                </div>
+                            </div>
+                                <div className='d-none'>
+                                <div className="row">
+                                <div className="mb-3 col-xl-6">
+                                    <label className="form-label">Items</label>
+                                    <input type="email" className="form-control" placeholder="Wireframe" />
+                                </div>
+                                <div className=" mb-3 col-xl-3">
+                                    <label className="form-label">Quantity</label>
+                                    <input type="email" className="form-control" placeholder="360"/>
+                                </div>
+                                <div className="mb-3 col-xl-2">
+                                    <label className="form-label">Price</label>
+                                    <input type="email" className="form-control" placeholder="82"/>
+                                </div>
+                                <div className="col-1">
+                                    <span><i className="ri-close-fill"></i></span>
+                                </div>
+                            </div>
+                            <div className="row">
+                                <div className="mb-3 col-xl-6">
+                                    <input type="email" className="form-control" placeholder="High-Fidelity"/>
+                                </div>
+                                <div className="mb-3 col-xl-3">
+                                    <input type="email" className="form-control" placeholder="220"/>
+                                </div>
+                                <div className="mb-3 col-xl-2">
+                                    <input type="email" className="form-control" placeholder="67"/>
+                                </div>
+                                <div className="col-1">
+                                    <span><i className="ri-close-fill"></i></span>
+                                </div>
+                            </div>
+                            <div className="add-reset d-flex justify-content-between">
+                                <button className="btn btn-outline-primary"><span><i
+                                            className="bi bi-plus"></i></span>Reset</button>
+                                <button className="btn btn-primary"><span><i className="bi bi-plus"></i></span>Add
+                                    Item</button>
+                            </div>
+                            </div>
+                        </form>
+                    </form>
+                    <div className="text-end">
+                        <a href="#" className="btn btn-primary">Save</a>
+                        {/* <a href="#" className="btn btn-outline-primary">Send</a> */}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div className="row">
+    <div className="col-xxl-12 col-xl-12 col-lg-12">
+            <div className='pb-2 card'>
+                <div className="payments-content">
+                            <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>Application No</th>
+                                            <th>File No</th>
+                                            <th>Name</th>
+                                            <th>Mobile</th>
+                                            <th>Status</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                            <td>
+                                                <div className="form-check">
+                                                    <input
+                                                        className="form-check-input"
+                                                        type="checkbox"
+                                                        value=""
+                                                        id="flexCheckDefault"
+                                                    />
+                                                </div>
+                                            </td>
+                                            <td>ABCD4556464QWE</td>
+                                            <td>File_2023_01</td>
+                                            <td>Jhon</td>
+                                            <td>5678909876</td>
+                                            <td>
+                                                <span className="badge px-3 py-2 bg-success"> Paid</span>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div className="form-check">
+                                                    <input
+                                                        className="form-check-input"
+                                                        type="checkbox"
+                                                        value=""
+                                                        id="flexCheckDefault"
+                                                    />
+                                                </div>
+                                            </td>
+                                           
+                                            <td>ABMK846493CFE</td>
+                                            <td>File_2023_02</td>
+                                            <td>Jhon</td>
+                                            <td>5678907865</td>
+                                            <td>
+                                                <span className="badge px-3 py-2 bg-danger">
+                                                    Cancel
+                                                </span>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div className="form-check">
+                                                    <input
+                                                        className="form-check-input"
+                                                        type="checkbox"
+                                                        value=""
+                                                        id="flexCheckDefault"
+                                                    />
+                                                </div>
+                                            </td>
+                                            
+                                            <td>ABGU745632CFE</td>
+                                            <td>File_2023_03</td>
+                                            <td>Rajesh</td>
+                                            <td>5678903491</td>
+                                            <td>
+                                                <span className="badge px-3 py-2 bg-success">
+                                                    Paid
+                                                </span>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div className="form-check">
+                                                    <input
+                                                        className="form-check-input"
+                                                        type="checkbox"
+                                                        value=""
+                                                        id="flexCheckDefault"
+                                                    />
+                                                </div>
+                                            </td>
+                                           
+                                            <td>ABJK879125HNE</td>
+                                            <td>File_2023_04</td>
+                                            <td>Karan</td>
+                                            <td>5678905672</td>
+                                            <td>
+                                                <span className="badge px-3 py-2 bg-warning">
+                                                    Due
+                                                </span>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div className="form-check">
+                                                    <input
+                                                        className="form-check-input"
+                                                        type="checkbox"
+                                                        value=""
+                                                        id="flexCheckDefault"
+                                                    />
+                                                </div>
+                                            </td>
+                                           
+                                            <td>ABTY876545JIE</td>
+                                            <td>File_2023_05</td>
+                                            <td>Rathod</td>
+                                            <td>5678901232</td>
+                                            <td>
+                                                <span className="badge px-3 py-2 bg-success">
+                                                    Paid
+                                                </span>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div className="form-check">
+                                                    <input
+                                                        className="form-check-input"
+                                                        type="checkbox"
+                                                        value=""
+                                                        id="flexCheckDefault"
+                                                    />
+                                                </div>
+                                            </td>
+                                            <td>ABQW345678RTE</td>
+                                            <td>File_2023_06</td>
+                                            <td>Smith</td>
+                                            <td>5678903456</td>
+                                            <td>
+                                                <span className="badge px-3 py-2 bg-warning">
+                                                    Due
+                                                </span>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+            </div>
+    </div>
+    </div>
+</Layout>
+  )
+}
+
+export default water

public/images/android.svg

+<svg width="103" height="25" viewBox="0 0 103 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.1165 3.98586C33.1469 4.64143 32.9072 5.28078 32.4532 5.75472C31.9459 6.28167 31.2384 6.56789 30.5075 6.54187C29.7719 6.54907 29.0645 6.25944 28.5452 5.73846C28.0258 5.21747 27.7385 4.50914 27.748 3.77359C27.7385 3.03805 28.0258 2.32971 28.5452 1.80873C29.0645 1.28775 29.7719 0.998115 30.5075 1.00532C30.8814 1.00407 31.2516 1.07932 31.5953 1.22643C31.9154 1.35551 32.2003 1.55858 32.4267 1.819L31.9579 2.28775C31.6 1.86205 31.0628 1.62945 30.5075 1.6598C29.9508 1.65715 29.417 1.88075 29.0285 2.27932C28.6399 2.67789 28.4299 3.21722 28.4467 3.77359C28.4349 4.61663 28.9314 5.384 29.7052 5.71869C30.4791 6.05338 31.3783 5.88964 31.9845 5.30366C32.2566 5.00874 32.4136 4.62575 32.4267 4.22465H30.5075V3.58786H33.0812C33.1048 3.71921 33.1166 3.85241 33.1165 3.98586Z" fill="white" stroke="white" stroke-width="0.2"/>
+<path d="M37.1668 1.77454H34.7788V3.45496H36.9545V4.09175H34.7788V5.77217H37.1668V6.42665H34.0713V1.12006H37.1668V1.77454Z" fill="white" stroke="white" stroke-width="0.2"/>
+<path d="M40.068 6.42665H39.387V1.77454H37.9011V1.12006H41.5892V1.77454H40.068V6.42665Z" fill="white" stroke="white" stroke-width="0.2"/>
+<path d="M44.1892 6.42665V1.12006H44.8702V6.42665H44.1892Z" fill="white" stroke="white" stroke-width="0.2"/>
+<path d="M47.8951 6.42665H47.2141V1.77454H45.7283V1.12006H49.3721V1.77454H47.8951V6.42665Z" fill="white" stroke="white" stroke-width="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M51.61 3.77355C51.5939 4.50625 51.8746 5.21437 52.3883 5.73699C53.4647 6.80736 55.2035 6.80736 56.2798 5.73699C56.7936 5.21437 57.0743 4.50625 57.0581 3.77355C57.0743 3.04085 56.7936 2.33273 56.2798 1.81011C55.7651 1.29161 55.0647 1 54.3341 1C53.6035 1 52.9031 1.29161 52.3883 1.81011C51.8746 2.33273 51.5939 3.04085 51.61 3.77355ZM55.7756 5.2951C54.9784 6.08894 53.6895 6.08894 52.8924 5.2951C52.4956 4.89008 52.2816 4.34055 52.2998 3.77388C52.2721 3.21231 52.4731 2.66349 52.857 2.25266C53.6541 1.45882 54.9431 1.45882 55.7402 2.25266C56.1499 2.65173 56.3771 3.202 56.3682 3.77388C56.3864 4.34055 56.1723 4.89008 55.7756 5.2951Z" fill="white"/>
+<path d="M52.3883 5.73699L52.317 5.8071L52.3178 5.8079L52.3883 5.73699ZM51.61 3.77355L51.7101 3.77576L51.71 3.77134L51.61 3.77355ZM56.2798 5.73699L56.3504 5.8079L56.3512 5.8071L56.2798 5.73699ZM57.0581 3.77355L56.9581 3.77134L56.9582 3.77576L57.0581 3.77355ZM56.2798 1.81011L56.3512 1.74001L56.3508 1.73966L56.2798 1.81011ZM52.3883 1.81011L52.3174 1.73966L52.317 1.74001L52.3883 1.81011ZM52.8924 5.2951L52.8209 5.36509L52.8218 5.36596L52.8924 5.2951ZM55.7756 5.2951L55.8462 5.36597L55.847 5.36508L55.7756 5.2951ZM52.2998 3.77388L52.4001 3.77711L52.3997 3.76896L52.2998 3.77388ZM52.857 2.25266L52.7864 2.18175L52.7839 2.18439L52.857 2.25266ZM55.7402 2.25266L55.6697 2.32352L55.6705 2.32429L55.7402 2.25266ZM56.3682 3.77388L56.2681 3.77232L56.2682 3.77709L56.3682 3.77388ZM52.4596 5.66689C51.9648 5.16351 51.6944 4.48147 51.71 3.77576L51.5101 3.77134C51.4933 4.53103 51.7843 5.26523 52.317 5.8071L52.4596 5.66689ZM56.2093 5.66608C55.172 6.69766 53.4962 6.69766 52.4589 5.66608L52.3178 5.8079C53.4332 6.91706 55.235 6.91706 56.3504 5.8079L56.2093 5.66608ZM56.9582 3.77576C56.9738 4.48147 56.7034 5.16351 56.2085 5.66689L56.3512 5.8071C56.8839 5.26523 57.1749 4.53103 57.1581 3.77134L56.9582 3.77576ZM56.2085 1.88022C56.7034 2.38359 56.9738 3.06563 56.9582 3.77134L57.1581 3.77576C57.1749 3.01608 56.8839 2.28188 56.3512 1.74001L56.2085 1.88022ZM54.3341 1.1C55.0381 1.1 55.7129 1.38097 56.2089 1.88056L56.3508 1.73966C55.8173 1.20225 55.0914 0.9 54.3341 0.9V1.1ZM52.4593 1.88056C52.9553 1.38097 53.6301 1.1 54.3341 1.1V0.9C53.5768 0.9 52.8509 1.20225 52.3174 1.73966L52.4593 1.88056ZM51.71 3.77134C51.6944 3.06563 51.9648 2.38359 52.4596 1.88022L52.317 1.74001C51.7843 2.28188 51.4933 3.01608 51.5101 3.77576L51.71 3.77134ZM52.8218 5.36596C53.658 6.19865 55.01 6.19865 55.8462 5.36596L55.705 5.22425C54.9469 5.97923 53.7211 5.97923 52.9629 5.22425L52.8218 5.36596ZM52.1998 3.77066C52.1807 4.3646 52.4051 4.94057 52.8209 5.36508L52.9638 5.22513C52.5861 4.83959 52.3824 4.3165 52.3997 3.77709L52.1998 3.77066ZM52.7839 2.18439C52.3816 2.61499 52.1709 3.19022 52.1999 3.7788L52.3997 3.76896C52.3733 3.23441 52.5647 2.71199 52.93 2.32093L52.7839 2.18439ZM55.8108 2.1818C54.9746 1.34911 53.6226 1.34911 52.7864 2.1818L52.9275 2.32351C53.6857 1.56853 54.9115 1.56853 55.6697 2.32351L55.8108 2.1818ZM56.4682 3.77544C56.4775 3.17605 56.2394 2.5993 55.81 2.18102L55.6705 2.32429C56.0604 2.70416 56.2767 3.22796 56.2682 3.77232L56.4682 3.77544ZM55.847 5.36508C56.2629 4.94057 56.4872 4.3646 56.4681 3.77066L56.2682 3.77709C56.2856 4.3165 56.0818 4.83959 55.7042 5.22513L55.847 5.36508Z" fill="white"/>
+<path d="M58.022 6.42665V1.12006H58.8533L61.4359 5.25036V5.25036V4.22441V1.12006H62.1169V6.42665H61.4093L58.703 2.10178V2.10178V3.12772V6.42665H58.022Z" fill="white" stroke="white" stroke-width="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33.3994 15.3242V16.9162H37.2201C37.1602 17.666 36.8485 18.3735 36.3357 18.9238C35.5627 19.7112 34.493 20.1352 33.3905 20.0913C31.0459 20.0913 29.1453 18.1906 29.1453 15.846C29.1453 13.5014 31.0459 11.6007 33.3905 11.6007C34.4676 11.5832 35.5076 11.9935 36.2826 12.7416L37.4059 11.6184C36.3489 10.5481 34.9035 9.95148 33.3994 9.96452C31.2581 9.88119 29.2429 10.976 28.1475 12.8178C27.0521 14.6595 27.0521 16.9529 28.1475 18.7946C29.2429 20.6364 31.2581 21.7312 33.3994 21.6479C34.931 21.7171 36.4177 21.1205 37.4766 20.0117C38.4032 18.9936 38.8979 17.6553 38.8563 16.2794C38.8592 15.9442 38.8296 15.6095 38.7679 15.28L33.3994 15.3242ZM43.2081 14.1654C41.1333 14.1703 39.4549 15.8553 39.4581 17.9301C39.4614 20.0049 41.1451 21.6847 43.2199 21.683C45.2947 21.6814 46.9758 19.999 46.9758 17.9242C46.9904 16.9198 46.5966 15.9526 45.8846 15.2439C45.1727 14.5353 44.2036 14.1461 43.1993 14.1654H43.2081ZM47.7009 17.936C47.6944 15.8623 49.3684 14.1751 51.442 14.1654C52.4463 14.1461 53.4154 14.5353 54.1274 15.2439C54.8393 15.9526 55.2331 16.9198 55.2186 17.9242C55.2185 19.9979 53.5392 21.6798 51.4656 21.683C49.3919 21.6862 47.7074 20.0096 47.7009 17.936ZM49.3892 18.9141C49.7931 19.7595 50.6727 20.2721 51.6074 20.2068C52.194 20.1932 52.7503 19.9432 53.1499 19.5135C53.5496 19.0839 53.7588 18.511 53.73 17.9249C53.7277 16.988 53.153 16.1477 52.2806 15.8059C51.4082 15.4641 50.4156 15.6903 49.7774 16.3763C49.1393 17.0623 48.9854 18.0687 49.3892 18.9141ZM41.1274 18.9202C41.5342 19.7651 42.4163 20.2752 43.3515 20.2061H43.3426C43.9293 20.1925 44.4855 19.9425 44.8852 19.5129C45.2849 19.0832 45.4941 18.5104 45.4653 17.9243C45.4627 16.9866 44.8868 16.1459 44.0133 15.8049C43.1399 15.4639 42.1467 15.6919 41.5095 16.3798C40.8723 17.0677 40.7207 18.0754 41.1274 18.9202ZM70.2539 14.1656C71.7202 14.2196 73.001 15.1731 73.4733 16.5624L73.659 16.9604L68.6266 19.0388C68.942 19.7571 69.6645 20.2096 70.4485 20.1797C71.2054 20.1816 71.9076 19.7852 72.297 19.1361L73.5794 20.0205C72.8813 21.0654 71.7052 21.69 70.4485 21.6832C69.4496 21.6979 68.4877 21.3057 67.7838 20.5968C67.0798 19.8879 66.6945 18.9232 66.7162 17.9244C66.6551 16.9485 67.0006 15.9907 67.6708 15.2787C68.341 14.5666 69.2761 14.1637 70.2539 14.1656ZM68.3435 17.8183C68.3073 17.2657 68.495 16.7218 68.8644 16.3091C69.2338 15.8965 69.7537 15.6499 70.3069 15.6249C70.8901 15.5865 71.4399 15.8997 71.7043 16.4209L68.3435 17.8183ZM65.9111 21.4621H64.2572V10.4067H65.9111V21.4621ZM61.5511 15.0059H61.4892C60.9851 14.4423 60.2643 14.1205 59.5081 14.1215C57.5006 14.2189 55.9229 15.8749 55.9229 17.8848C55.9229 19.8947 57.5006 21.5507 59.5081 21.648C60.2668 21.6608 60.9922 21.337 61.4892 20.7636H61.5423V21.3031C61.5423 22.7447 60.7728 23.5142 59.5346 23.5142C58.6911 23.4944 57.9433 22.9668 57.6419 22.1787L56.2003 22.7801C56.7555 24.1305 58.0746 25.0088 59.5346 25C61.4715 25 63.0724 23.8591 63.0724 21.082V14.3868H61.5511V15.0059ZM59.6555 20.2059L59.6583 20.2062H59.6494L59.6555 20.2059ZM61.1459 19.4967C60.7663 19.9262 60.228 20.1822 59.6555 20.2059C58.4743 20.1004 57.5687 19.1106 57.5687 17.9243C57.5687 16.7372 58.4757 15.7467 59.6583 15.6425C60.2297 15.6718 60.7651 15.9306 61.1431 16.3602C61.5211 16.7898 61.7096 17.3538 61.6659 17.9243C61.7147 18.4975 61.5268 19.0656 61.1459 19.4967ZM81.2208 10.407H77.2585V21.4624H78.9124V17.2702H81.2208C82.5056 17.3625 83.7343 16.7293 84.4049 15.6295C85.0754 14.5297 85.0754 13.1474 84.4049 12.0476C83.7343 10.9478 82.5056 10.3147 81.2208 10.407ZM78.9125 15.7135H81.2209L81.2563 15.7401C82.304 15.7401 83.1534 14.8907 83.1534 13.8429C83.1534 12.7952 82.304 11.9458 81.2563 11.9458H78.9125V15.7135ZM91.4183 14.1219C90.1878 14.0483 89.0309 14.7119 88.4731 15.8111L89.9413 16.4214C90.2371 15.8763 90.8267 15.5572 91.4448 15.6077C91.8689 15.5582 92.2952 15.6811 92.6278 15.9489C92.9604 16.2166 93.1715 16.6068 93.2137 17.0317V17.1466C92.6825 16.8654 92.0901 16.7196 91.4891 16.7221C89.9059 16.7221 88.3051 17.6065 88.3051 19.2074C88.3367 19.897 88.6458 20.5445 89.1622 21.0026C89.6786 21.4607 90.3584 21.6904 91.0468 21.6395C91.8952 21.7005 92.7092 21.2935 93.1695 20.5782H93.2225V21.4627H94.8145V17.2085C94.8145 15.2716 93.3464 14.1484 91.4625 14.1484L91.4183 14.1219ZM89.9237 19.2424C89.9237 19.9057 90.6754 20.1799 91.215 20.1799L91.2592 20.2064C92.2555 20.1821 93.0817 19.4276 93.1961 18.4375C92.7372 18.1814 92.2179 18.0531 91.6926 18.0661C90.8612 18.0661 89.9237 18.3579 89.9237 19.2424ZM100.616 14.3867L98.7237 19.1803H98.6707L96.7072 14.3867H94.9383L97.8835 21.0907L96.2031 24.8141H97.9277L102.456 14.3867H100.616ZM87.4031 21.4621H85.7492V10.4067H87.4031V21.4621Z" fill="white"/>
+<path d="M0.409985 1.59829C0.12806 1.9468 -0.0110286 2.38936 0.0208346 2.83649V22.4001C-0.00609314 22.8496 0.139406 23.2924 0.427674 23.6383L0.489584 23.7003L11.43 12.751V12.4945L0.471895 1.53638L0.409985 1.59829Z" fill="url(#paint0_linear)"/>
+<path d="M15.0561 16.4037L11.4299 12.751V12.4945L15.0561 8.83295L15.1357 8.87717L19.4783 11.3447C20.7165 12.0434 20.7165 13.1932 19.4783 13.9007L15.1534 16.3595L15.0561 16.4037Z" fill="url(#paint1_linear)"/>
+<path d="M15.1622 16.3588L11.4299 12.6177L0.409912 23.6377C0.930593 24.0954 1.70333 24.1177 2.24953 23.6908L15.1711 16.35" fill="url(#paint2_linear)"/>
+<path d="M15.1623 8.88586L2.24074 1.54507C1.69454 1.11813 0.921804 1.14042 0.401123 1.59814L11.43 12.6182L15.1623 8.88586Z" fill="url(#paint3_linear)"/>
+<path opacity="0.2" d="M15.0561 16.2703L2.24069 23.5668C1.71625 23.9589 0.996257 23.9589 0.471822 23.5668V23.5668L0.409912 23.6287V23.6287L0.471822 23.6907V23.6907C0.99527 24.0857 1.71724 24.0857 2.24069 23.6907L15.1622 16.3499L15.0561 16.2703Z" fill="black"/>
+<path opacity="0.12" d="M0.410007 23.5138C0.12174 23.1679 -0.0237595 22.7251 0.00316822 22.2756V22.4083C-0.0237595 22.8578 0.12174 23.3006 0.410007 23.6465L0.471918 23.5846L0.410007 23.5138Z" fill="black"/>
+<path opacity="0.12" d="M19.4783 13.7674L15.0562 16.2704L15.1358 16.35L19.4783 13.8913C19.9799 13.6557 20.3172 13.1699 20.3627 12.6177V12.6177C20.2619 13.1172 19.9353 13.5419 19.4783 13.7674Z" fill="black"/>
+<path opacity="0.25" d="M2.24068 1.66841L19.4783 11.4679C19.9353 11.6935 20.2619 12.1181 20.3627 12.6177V12.6177C20.3171 12.0654 19.9798 11.5797 19.4783 11.3441L2.24068 1.54459C1.01132 0.837044 0.020752 1.42077 0.020752 2.83586V2.96853C0.020752 1.55343 1.01132 0.969709 2.24068 1.66841Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear" x1="6.63589" y1="-11.7764" x2="-10.9068" y2="-7.12423" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00A0FF"/>
+<stop offset="0.01" stop-color="#00A1FF"/>
+<stop offset="0.26" stop-color="#00BEFF"/>
+<stop offset="0.51" stop-color="#00D2FF"/>
+<stop offset="0.76" stop-color="#00DFFF"/>
+<stop offset="1" stop-color="#00E3FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="21.0968" y1="3.59683" x2="-0.297646" y2="3.59683" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFE000"/>
+<stop offset="0.41" stop-color="#FFBD00"/>
+<stop offset="0.78" stop-color="#FFA500"/>
+<stop offset="1" stop-color="#FF9C00"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="0.0861131" y1="6.89321" x2="-14.0086" y2="30.6018" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF3A44"/>
+<stop offset="1" stop-color="#C31162"/>
+</linearGradient>
+<linearGradient id="paint3_linear" x1="-8.19555" y1="-1.44784" x2="-1.90432" y2="9.13923" gradientUnits="userSpaceOnUse">
+<stop stop-color="#32A071"/>
+<stop offset="0.07" stop-color="#2DA771"/>
+<stop offset="0.48" stop-color="#15CF74"/>
+<stop offset="0.8" stop-color="#06E775"/>
+<stop offset="1" stop-color="#00F076"/>
+</linearGradient>
+</defs>
+</svg>