init
This commit is contained in:
@@ -0,0 +1,69 @@
|
||||
import { useState } from "react";
|
||||
function BalanceDetails() {
|
||||
const [open, setOpen] = useState("a1");
|
||||
return (
|
||||
<>
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="total-balance">
|
||||
<p>Total Balance</p>
|
||||
<h2>$221,478</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-6 col-lg-6 col-md-6 col-sm-6">
|
||||
<div
|
||||
className={`${
|
||||
open === "a1"
|
||||
? "balance-stats active"
|
||||
: "balance-stats"
|
||||
}`}
|
||||
onMouseOver={() => setOpen("a1")}
|
||||
>
|
||||
<p>Last Month</p>
|
||||
<h3>$42,678</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-6 col-lg-6 col-md-6 col-sm-6">
|
||||
<div
|
||||
className={`${
|
||||
open === "a2"
|
||||
? "balance-stats active"
|
||||
: "balance-stats"
|
||||
}`}
|
||||
onMouseOver={() => setOpen("a2")}
|
||||
>
|
||||
<p>Expenses</p>
|
||||
<h3>$1,798</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-6 col-lg-6 col-md-6 col-sm-6">
|
||||
<div
|
||||
className={`${
|
||||
open === "a3"
|
||||
? "balance-stats active"
|
||||
: "balance-stats"
|
||||
}`}
|
||||
onMouseOver={() => setOpen("a3")}
|
||||
>
|
||||
<p>Taxes</p>
|
||||
<h3>$255.25</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-6 col-lg-6 col-md-6 col-sm-6">
|
||||
<div
|
||||
className={`${
|
||||
open === "a4"
|
||||
? "balance-stats active"
|
||||
: "balance-stats"
|
||||
}`}
|
||||
onMouseOver={() => setOpen("a4")}
|
||||
>
|
||||
<p>Debt</p>
|
||||
<h3>$365,478</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default BalanceDetails;
|
||||
@@ -0,0 +1,59 @@
|
||||
import { useState } from "react";
|
||||
function Bills() {
|
||||
const [open, setOpen] = useState("a1");
|
||||
return (
|
||||
<>
|
||||
<div className="bills-widget">
|
||||
<div className={`${
|
||||
open === "a1"
|
||||
? "bills-widget-content d-flex justify-content-between align-items-center active"
|
||||
: "bills-widget-content d-flex justify-content-between align-items-center"
|
||||
}`}
|
||||
onMouseOver={() => setOpen("a1")}>
|
||||
<div>
|
||||
<p>Netflix</p>
|
||||
<h4>$17.00</h4>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" className="btn btn-primary">
|
||||
Pay Now
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`${
|
||||
open === "a2"
|
||||
? "bills-widget-content d-flex justify-content-between align-items-center active"
|
||||
: "bills-widget-content d-flex justify-content-between align-items-center"
|
||||
}`}
|
||||
onMouseOver={() => setOpen("a2")}>
|
||||
<div>
|
||||
<p className="text-danger">Spotify</p>
|
||||
<h4>$11.00</h4>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" className="btn btn-primary">
|
||||
Pay Now
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`${
|
||||
open === "a3"
|
||||
? "bills-widget-content d-flex justify-content-between align-items-center active"
|
||||
: "bills-widget-content d-flex justify-content-between align-items-center"
|
||||
}`}
|
||||
onMouseOver={() => setOpen("a3")}>
|
||||
<div>
|
||||
<p className="text-danger">Spotify</p>
|
||||
<h4>$11.00</h4>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" className="btn btn-primary">
|
||||
Pay Now
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default Bills;
|
||||
@@ -0,0 +1,154 @@
|
||||
import PerfectScrollbar from "react-perfect-scrollbar";
|
||||
function GoalsBudget() {
|
||||
return (
|
||||
<>
|
||||
<div className="budget-content" style={{ height: "295px" }}>
|
||||
<PerfectScrollbar>
|
||||
<ul>
|
||||
<li className="d-flex justify-content-between align-items-center">
|
||||
<div className="d-flex flex-grow-2">
|
||||
<div className="budget-icon me-3 mt-1">
|
||||
<img
|
||||
src="/images/social/facebook.png"
|
||||
alt=""
|
||||
width="40"
|
||||
/>
|
||||
</div>
|
||||
<div className="budget-info flex-grow-2 me-3">
|
||||
<div className="d-flex justify-content-between mb-1">
|
||||
<h5 className="mb-1">Facebook Ads</h5>
|
||||
<p className="mb-0">
|
||||
<strong>75 </strong>/ 100
|
||||
</p>
|
||||
</div>
|
||||
<div className="progress">
|
||||
<div
|
||||
className="progress-bar"
|
||||
role="progressbar"
|
||||
style={{
|
||||
width: "75%",
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="d-flex justify-content-between align-items-center">
|
||||
<div className="d-flex flex-grow-2">
|
||||
<div className="budget-icon me-3 mt-1">
|
||||
<img
|
||||
src="/images/social/youtube.png"
|
||||
alt=""
|
||||
width="40"
|
||||
/>
|
||||
</div>
|
||||
<div className="budget-info flex-grow-2 me-3">
|
||||
<div className="d-flex justify-content-between mb-1">
|
||||
<h5 className="mb-1">Youtube Premium</h5>
|
||||
<p className="mb-0">
|
||||
<strong>25 </strong>/ 100
|
||||
</p>
|
||||
</div>
|
||||
<div className="progress">
|
||||
<div
|
||||
className="progress-bar bg-success"
|
||||
role="progressbar"
|
||||
style={{
|
||||
width: "25%",
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="d-flex justify-content-between align-items-center">
|
||||
<div className="d-flex flex-grow-2">
|
||||
<div className="budget-icon me-3 mt-1">
|
||||
<img
|
||||
src="/images/social/spotify.png"
|
||||
alt=""
|
||||
width="40"
|
||||
/>
|
||||
</div>
|
||||
<div className="budget-info flex-grow-2 me-3">
|
||||
<div className="d-flex justify-content-between mb-1">
|
||||
<h5 className="mb-1">Spotify Music</h5>
|
||||
<p className="mb-0">
|
||||
<strong>50 </strong>/ 100
|
||||
</p>
|
||||
</div>
|
||||
<div className="progress">
|
||||
<div
|
||||
className="progress-bar bg-info"
|
||||
role="progressbar"
|
||||
style={{
|
||||
width: "50%",
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="d-flex justify-content-between align-items-center">
|
||||
<div className="d-flex flex-grow-2">
|
||||
<div className="budget-icon me-3 mt-1">
|
||||
<img
|
||||
src="/images/social/skype.png"
|
||||
alt=""
|
||||
width="40"
|
||||
/>
|
||||
</div>
|
||||
<div className="budget-info flex-grow-2 me-3">
|
||||
<div className="d-flex justify-content-between mb-1">
|
||||
<h5 className="mb-1">Skype Premium</h5>
|
||||
<p className="mb-0">
|
||||
<strong>45 </strong>/ 100
|
||||
</p>
|
||||
</div>
|
||||
<div className="progress">
|
||||
<div
|
||||
className="progress-bar bg-danger"
|
||||
role="progressbar"
|
||||
style={{
|
||||
width: "45%",
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="d-flex justify-content-between align-items-center">
|
||||
<div className="d-flex flex-grow-2">
|
||||
<div className="budget-icon me-3 mt-1">
|
||||
<img
|
||||
src="/images/social/envato.png"
|
||||
alt=""
|
||||
width="40"
|
||||
/>
|
||||
</div>
|
||||
<div className="budget-info flex-grow-2 me-3">
|
||||
<div className="d-flex justify-content-between mb-1">
|
||||
<h5 className="mb-1">Envato Element</h5>
|
||||
<p className="mb-0">
|
||||
<strong>35 </strong>/ 100
|
||||
</p>
|
||||
</div>
|
||||
<div className="progress">
|
||||
<div
|
||||
className="progress-bar bg-purple"
|
||||
role="progressbar"
|
||||
style={{
|
||||
width: "35%",
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</PerfectScrollbar>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default GoalsBudget;
|
||||
@@ -0,0 +1,122 @@
|
||||
import { useState } from "react";
|
||||
import PerfectScrollbar from "react-perfect-scrollbar";
|
||||
function TransactionHistory() {
|
||||
const [open, setOpen] = useState("p1");
|
||||
return (
|
||||
<>
|
||||
<div className="invoice-content" style={{ height: "295px" }}>
|
||||
<PerfectScrollbar>
|
||||
<ul>
|
||||
<li
|
||||
className={`${
|
||||
open === "p1"
|
||||
? "d-flex justify-content-between active"
|
||||
: "d-flex justify-content-between"
|
||||
}`}
|
||||
onMouseOver={() => setOpen("p1")}
|
||||
>
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="invoice-user-img me-3">
|
||||
<img
|
||||
src="/images/avatar/1.jpg"
|
||||
alt=""
|
||||
width="50"
|
||||
/>
|
||||
</div>
|
||||
<div className="invoice-info">
|
||||
<h5 className="mb-0">Terry P. Camacho</h5>
|
||||
<p>5 january 2021 at 10.15 pm</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-end">
|
||||
<h5 className="mb-2">+450.00</h5>
|
||||
<span className=" text-white bg-success">Paid</span>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
className={`${
|
||||
open === "p2"
|
||||
? "d-flex justify-content-between active"
|
||||
: "d-flex justify-content-between"
|
||||
}`}
|
||||
onMouseOver={() => setOpen("p2")}
|
||||
>
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="invoice-user-img me-3">
|
||||
<img
|
||||
src="/images/avatar/2.jpg"
|
||||
alt=""
|
||||
width="50"
|
||||
/>
|
||||
</div>
|
||||
<div className="invoice-info">
|
||||
<h5 className="mb-0">John L. Foster</h5>
|
||||
<p>5 january 2021 at 10.15 pm</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-end">
|
||||
<h5 className="mb-2">+450.00</h5>
|
||||
<span className=" text-white bg-warning">Due</span>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
className={`${
|
||||
open === "p3"
|
||||
? "d-flex justify-content-between active"
|
||||
: "d-flex justify-content-between"
|
||||
}`}
|
||||
onMouseOver={() => setOpen("p3")}
|
||||
>
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="invoice-user-img me-3">
|
||||
<img
|
||||
src="/images/avatar/3.jpg"
|
||||
alt=""
|
||||
width="50"
|
||||
/>
|
||||
</div>
|
||||
<div className="invoice-info">
|
||||
<h5 className="mb-0">John C. Adams</h5>
|
||||
<p>5 january 2021 at 10.15 pm</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-end">
|
||||
<h5 className="mb-2">+450.00</h5>
|
||||
<span className=" text-white bg-danger">
|
||||
Cancel
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
className={`${
|
||||
open === "p4"
|
||||
? "d-flex justify-content-between active"
|
||||
: "d-flex justify-content-between"
|
||||
}`}
|
||||
onMouseOver={() => setOpen("p4")}
|
||||
>
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="invoice-user-img me-3">
|
||||
<img
|
||||
src="/images/avatar/4.jpg"
|
||||
alt=""
|
||||
width="50"
|
||||
/>
|
||||
</div>
|
||||
<div className="invoice-info">
|
||||
<h5 className="mb-0">Weston P. Thomas</h5>
|
||||
<p>5 january 2021 at 10.15 pm</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-end">
|
||||
<h5 className="mb-2">+450.00</h5>
|
||||
<span className=" text-white bg-success">Paid</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</PerfectScrollbar>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default TransactionHistory;
|
||||
Fai riferimento in un nuovo problema
Block a user