Refactor Dashboard component: replace old implementation with new charts and project overview cards
This commit is contained in:
parent
d0ab36799f
commit
c0477285e3
140
src/components/Dashboard/Dashboard.jsx
Normal file
140
src/components/Dashboard/Dashboard.jsx
Normal file
@ -0,0 +1,140 @@
|
||||
import React from 'react';
|
||||
import HorizontalBarChart from '../Charts/HorizontalBarChart';
|
||||
import LineChart from '../Charts/LineChart';
|
||||
const dummyCategories = ['Project 1', 'Project 2', 'Project 3', 'Project 4', 'Project 5'];
|
||||
const dummyData = [45, 38, 30, 25, 20];
|
||||
|
||||
const lineChartseries = [
|
||||
{
|
||||
name: "Planned Projects",
|
||||
data: [20, 25, 30, 35, 40, 45, 50]
|
||||
},
|
||||
{
|
||||
name: "Completed Projects",
|
||||
data: [5, 15, 28, 36, 42, 46, 48]
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
const lineChartCategories = ["January", "February", "March", "April", "May", "June", "July"];
|
||||
|
||||
|
||||
const Dashboard = () => {
|
||||
return (
|
||||
<div className="container-xxl flex-grow-1 container-p-y">
|
||||
<div className="row gy-4">
|
||||
|
||||
{/* Projects Card */}
|
||||
<div className="col-sm-6 col-lg-4">
|
||||
<div className="card p-3 h-100 text-center d-flex justify-content-between">
|
||||
<div className="d-flex justify-content-start align-items-center mb-3">
|
||||
<i
|
||||
className="rounded-circle bx bx-building-house"
|
||||
style={{ fontSize: "xx-large" }}
|
||||
></i>
|
||||
<h5 className="fw-bold mb-0 ms-2" style={{ fontSize: '1.5rem' }}>Projects</h5>
|
||||
</div>
|
||||
<div className="d-flex justify-content-around align-items-start mt-n2">
|
||||
<div>
|
||||
<h4 className="mb-0 fw-bold">25</h4>
|
||||
<small className="text-muted">Total</small>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="mb-0 fw-bold">30</h4>
|
||||
<small className="text-muted">Ongoing</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Teams Card */}
|
||||
<div className="col-sm-6 col-lg-4">
|
||||
<div className="card p-3 h-100 text-center d-flex justify-content-between">
|
||||
<div className="d-flex justify-content-start align-items-center mb-3">
|
||||
<i className="bx bx-group text-warning" style={{ fontSize: '2rem' }}></i>
|
||||
<h5 className="fw-bold mb-0 ms-2" style={{ fontSize: '1.5rem' }}>Teams</h5>
|
||||
</div>
|
||||
<div className="d-flex justify-content-around align-items-start mt-n2">
|
||||
<div>
|
||||
<h4 className="mb-0 fw-bold">500</h4>
|
||||
<small className="text-muted">Total Employees</small>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="mb-0 fw-bold">360</h4>
|
||||
<small className="text-muted">In Role</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tasks Card */}
|
||||
<div className="col-sm-6 col-lg-4">
|
||||
<div className="card p-3 h-100 text-center d-flex justify-content-between">
|
||||
<div className="d-flex justify-content-start align-items-center mb-3">
|
||||
<i className="bx bx-task text-success" style={{ fontSize: '2rem' }}></i>
|
||||
<h5 className="fw-bold mb-0 ms-2" style={{ fontSize: '1.5rem' }}>Tasks</h5>
|
||||
</div>
|
||||
<div className="d-flex justify-content-around align-items-start mt-n2">
|
||||
<div>
|
||||
<h4 className="mb-0 fw-bold">10000</h4>
|
||||
<small className="text-muted">Total</small>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="mb-0 fw-bold">4000</h4>
|
||||
<small className="text-muted">Completed</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Chart Section */}
|
||||
<div class="col-xxl-6 col-lg-7">
|
||||
<div class="card h-100">
|
||||
<div class="card-header d-flex align-items-start justify-content-between">
|
||||
<div class="card-title mb-0">
|
||||
<h5 class="mb-1">Projects </h5>
|
||||
<p class="card-subtitle">Total Projects Overview</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<HorizontalBarChart
|
||||
categories={dummyCategories}
|
||||
seriesData={dummyData}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xxl-6 col-lg-7">
|
||||
<div class="card h-100">
|
||||
<div class="card-header d-flex align-items-center justify-content-between">
|
||||
<div class="card-title mb-0">
|
||||
<h5 class="mb-1">Project Progress</h5>
|
||||
<p class="card-subtitle">Progress Overview by Project</p>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-label-primary">Project A</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-label-primary dropdown-toggle dropdown-toggle-split"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Project A</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Project B</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Project C</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Project D</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<LineChart seriesData={lineChartseries} categories={lineChartCategories} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Dashboard;
|
||||
@ -1,549 +0,0 @@
|
||||
|
||||
|
||||
const Dashboard = () => {
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Content */}
|
||||
<div className="container-xxl flex-grow-1 container-p-y">
|
||||
<div className="row">
|
||||
<div className="col-lg-8 mb-4 order-0">
|
||||
<div className="card">
|
||||
<div className="d-flex align-items-end row">
|
||||
<div className="col-sm-7">
|
||||
<div className="card-body">
|
||||
<h5 className="card-title text-primary">Congratulations User! 🎉</h5>
|
||||
<p className="mb-4">
|
||||
You have done <span className="fw-bold">72%</span> more sales today. Check your new badge in
|
||||
your profile.
|
||||
</p>
|
||||
|
||||
<a className="btn btn-sm btn-outline-primary">View Badges</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-5 text-center text-sm-left">
|
||||
<div className="card-body pb-0 px-0 px-md-4">
|
||||
<img
|
||||
src="./img/illustrations/man-with-laptop-light.png"
|
||||
height="140"
|
||||
alt="View Badge User"
|
||||
data-app-dark-img="illustrations/man-with-laptop-dark.png"
|
||||
data-app-light-img="illustrations/man-with-laptop-light.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-4 order-1">
|
||||
<div className="row">
|
||||
<div className="col-lg-6 col-md-12 col-6 mb-4">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="card-title d-flex align-items-start justify-content-between">
|
||||
<div className="avatar flex-shrink-0">
|
||||
<img
|
||||
src="./img/icons/unicons/chart-success.png"
|
||||
alt="chart success"
|
||||
className="rounded"
|
||||
/>
|
||||
</div>
|
||||
<div className="dropdown">
|
||||
<button
|
||||
className="btn p-0"
|
||||
type="button"
|
||||
id="cardOpt3"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i className="bx bx-dots-vertical-rounded"></i>
|
||||
</button>
|
||||
<div className="dropdown-menu dropdown-menu-end" aria-labelledby="cardOpt3">
|
||||
<a className="dropdown-item" >View More</a>
|
||||
<a className="dropdown-item" >Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="fw-semibold d-block mb-1">Projects</span>
|
||||
<h3 className="card-title mb-2">25</h3>
|
||||
<small className="text-success fw-semibold"><i className="bx bx-up-arrow-alt"></i> +20%</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 col-md-12 col-6 mb-4">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="card-title d-flex align-items-start justify-content-between">
|
||||
<div className="avatar flex-shrink-0">
|
||||
<img
|
||||
src="./img/icons/unicons/wallet-info.png"
|
||||
alt="Credit Card"
|
||||
className="rounded"
|
||||
/>
|
||||
</div>
|
||||
<div className="dropdown">
|
||||
<button
|
||||
className="btn p-0"
|
||||
type="button"
|
||||
id="cardOpt6"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i className="bx bx-dots-vertical-rounded"></i>
|
||||
</button>
|
||||
<div className="dropdown-menu dropdown-menu-end" aria-labelledby="cardOpt6">
|
||||
<a className="dropdown-item" >View More</a>
|
||||
<a className="dropdown-item" >Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span>Upcoming Projects</span>
|
||||
<h3 className="card-title text-nowrap mb-1">10</h3>
|
||||
<small className="text-success fw-semibold"><i className="bx bx-up-arrow-alt"></i> +28.42%</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Total Revenue */}
|
||||
<div className="col-12 col-lg-8 order-2 order-md-3 order-lg-2 mb-4">
|
||||
<div className="card">
|
||||
<div className="row row-bordered g-0">
|
||||
<div className="col-md-8">
|
||||
<h5 className="card-header m-0 me-2 pb-3">Project Status</h5>
|
||||
<div id="totalRevenueChart" className="px-2"></div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="card-body">
|
||||
<div className="text-center">
|
||||
<div className="dropdown">
|
||||
<button
|
||||
className="btn btn-sm btn-outline-primary dropdown-toggle"
|
||||
type="button"
|
||||
id="growthReportId"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
>
|
||||
2022
|
||||
</button>
|
||||
<div className="dropdown-menu dropdown-menu-end" aria-labelledby="growthReportId">
|
||||
<a className="dropdown-item" >2021</a>
|
||||
<a className="dropdown-item" >2020</a>
|
||||
<a className="dropdown-item" >2019</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="growthChart"></div>
|
||||
<div className="text-center fw-semibold pt-3 mb-2">62% Company Growth</div>
|
||||
|
||||
<div className="d-flex px-xxl-4 px-lg-2 p-4 gap-xxl-3 gap-lg-1 gap-3 justify-content-between">
|
||||
<div className="d-flex">
|
||||
<div className="me-2">
|
||||
<span className="badge bg-label-primary p-2"><i className="bx bx-rupee text-primary"></i></span>
|
||||
</div>
|
||||
<div className="d-flex flex-column">
|
||||
<small>2022</small>
|
||||
<h6 className="mb-0">32.5k</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex">
|
||||
<div className="me-2">
|
||||
<span className="badge bg-label-info p-2"><i className="bx bx-wallet text-info"></i></span>
|
||||
</div>
|
||||
<div className="d-flex flex-column">
|
||||
<small>2021</small>
|
||||
<h6 className="mb-0">41.2k</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/*/ Total Revenue */}
|
||||
<div className="col-12 col-md-8 col-lg-4 order-3 order-md-2">
|
||||
<div className="row">
|
||||
{/* <div className="col-6 mb-4">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="card-title d-flex align-items-start justify-content-between">
|
||||
<div className="avatar flex-shrink-0">
|
||||
<img src="./img/icons/unicons/paypal.png" alt="Credit Card" className="rounded" />
|
||||
</div>
|
||||
<div className="dropdown">
|
||||
<button
|
||||
className="btn p-0"
|
||||
type="button"
|
||||
id="cardOpt4"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i className="bx bx-dots-vertical-rounded"></i>
|
||||
</button>
|
||||
<div className="dropdown-menu dropdown-menu-end" aria-labelledby="cardOpt4">
|
||||
<a className="dropdown-item" >View More</a>
|
||||
<a className="dropdown-item" >Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="d-block mb-1">Payments</span>
|
||||
<h3 className="card-title text-nowrap mb-2">$2,456</h3>
|
||||
<small className="text-danger fw-semibold"><i className="bx bx-down-arrow-alt"></i> -14.82%</small>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
{/* <div className="col-6 mb-4">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="card-title d-flex align-items-start justify-content-between">
|
||||
<div className="avatar flex-shrink-0">
|
||||
<img src="./img/icons/unicons/cc-primary.png" alt="Credit Card" className="rounded" />
|
||||
</div>
|
||||
<div className="dropdown">
|
||||
<button
|
||||
className="btn p-0"
|
||||
type="button"
|
||||
id="cardOpt1"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i className="bx bx-dots-vertical-rounded"></i>
|
||||
</button>
|
||||
<div className="dropdown-menu" aria-labelledby="cardOpt1">
|
||||
<a className="dropdown-item" >View More</a>
|
||||
<a className="dropdown-item" >Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="fw-semibold d-block mb-1">Transactions</span>
|
||||
<h3 className="card-title mb-2">$14,857</h3>
|
||||
<small className="text-success fw-semibold"><i className="bx bx-up-arrow-alt"></i> +28.14%</small>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
{/* </div>
|
||||
<div className="row"> */}
|
||||
<div className="col-12 mb-4">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="d-flex justify-content-between flex-sm-row flex-column gap-3">
|
||||
<div className="d-flex flex-sm-column flex-row align-items-start justify-content-between">
|
||||
<div className="card-title">
|
||||
<h5 className="text-nowrap mb-2">Profile Report</h5>
|
||||
<span className="badge bg-label-warning rounded-pill">Year 2021</span>
|
||||
</div>
|
||||
<div className="mt-sm-auto">
|
||||
<small className="text-success text-nowrap fw-semibold"
|
||||
><i className="bx bx-chevron-up"></i> 68.2%</small
|
||||
>
|
||||
<h3 className="mb-0">$84,686k</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div id="profileReportChart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
{/* Order Statistics */}
|
||||
<div className="col-md-6 col-lg-4 col-xl-4 order-0 mb-4">
|
||||
<div className="card h-100">
|
||||
<div className="card-header d-flex align-items-center justify-content-between pb-0">
|
||||
<div className="card-title mb-0">
|
||||
<h5 className="m-0 me-2">Order Statistics</h5>
|
||||
<small className="text-muted">42.82k Total Sales</small>
|
||||
</div>
|
||||
<div className="dropdown">
|
||||
<button
|
||||
className="btn p-0"
|
||||
type="button"
|
||||
id="orederStatistics"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i className="bx bx-dots-vertical-rounded"></i>
|
||||
</button>
|
||||
<div className="dropdown-menu dropdown-menu-end" aria-labelledby="orederStatistics">
|
||||
<a className="dropdown-item" >Select All</a>
|
||||
<a className="dropdown-item" >Refresh</a>
|
||||
<a className="dropdown-item" >Share</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="d-flex justify-content-between align-items-center mb-3">
|
||||
<div className="d-flex flex-column align-items-center gap-1">
|
||||
<h2 className="mb-2">8,258</h2>
|
||||
<span>Total Orders</span>
|
||||
</div>
|
||||
<div id="orderStatisticsChart"></div>
|
||||
</div>
|
||||
<ul className="p-0 m-0">
|
||||
<li className="d-flex mb-4 pb-1">
|
||||
<div className="avatar flex-shrink-0 me-3">
|
||||
<span className="avatar-initial rounded bg-label-primary"
|
||||
><i className="bx bx-mobile-alt"></i
|
||||
></span>
|
||||
</div>
|
||||
<div className="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
|
||||
<div className="me-2">
|
||||
<h6 className="mb-0">Electronic</h6>
|
||||
<small className="text-muted">Mobile, Earbuds, TV</small>
|
||||
</div>
|
||||
<div className="user-progress">
|
||||
<small className="fw-semibold">82.5k</small>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="d-flex mb-4 pb-1">
|
||||
<div className="avatar flex-shrink-0 me-3">
|
||||
<span className="avatar-initial rounded bg-label-success"><i className="bx bx-closet"></i></span>
|
||||
</div>
|
||||
<div className="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
|
||||
<div className="me-2">
|
||||
<h6 className="mb-0">Fashion</h6>
|
||||
<small className="text-muted">T-shirt, Jeans, Shoes</small>
|
||||
</div>
|
||||
<div className="user-progress">
|
||||
<small className="fw-semibold">23.8k</small>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="d-flex mb-4 pb-1">
|
||||
<div className="avatar flex-shrink-0 me-3">
|
||||
<span className="avatar-initial rounded bg-label-info"><i className="bx bx-home-alt"></i></span>
|
||||
</div>
|
||||
<div className="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
|
||||
<div className="me-2">
|
||||
<h6 className="mb-0">Decor</h6>
|
||||
<small className="text-muted">Fine Art, Dining</small>
|
||||
</div>
|
||||
<div className="user-progress">
|
||||
<small className="fw-semibold">849k</small>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="d-flex">
|
||||
<div className="avatar flex-shrink-0 me-3">
|
||||
<span className="avatar-initial rounded bg-label-secondary"
|
||||
><i className="bx bx-football"></i ></span>
|
||||
</div>
|
||||
<div className="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
|
||||
<div className="me-2">
|
||||
<h6 className="mb-0">Sports</h6>
|
||||
<small className="text-muted">Football, Cricket Kit</small>
|
||||
</div>
|
||||
<div className="user-progress">
|
||||
<small className="fw-semibold">99</small>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/*/ Order Statistics */}
|
||||
|
||||
{/* Expense Overview */}
|
||||
<div className="col-md-6 col-lg-4 order-1 mb-4">
|
||||
<div className="card h-100">
|
||||
<div className="card-header">
|
||||
<ul className="nav nav-pills" role="tablist">
|
||||
<li className="nav-item">
|
||||
<button
|
||||
type="button"
|
||||
className="nav-link active"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#navs-tabs-line-card-income"
|
||||
aria-controls="navs-tabs-line-card-income"
|
||||
aria-selected="true"
|
||||
>
|
||||
Income
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<button type="button" className="nav-link" role="tab">Expenses</button>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<button type="button" className="nav-link" role="tab">Profit</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="card-body px-0">
|
||||
<div className="tab-content p-0">
|
||||
<div className="tab-pane fade show active" id="navs-tabs-line-card-income" role="tabpanel">
|
||||
<div className="d-flex p-4 pt-3">
|
||||
<div className="avatar flex-shrink-0 me-3">
|
||||
<img src="./img/icons/unicons/wallet.png" alt="User" />
|
||||
</div>
|
||||
<div>
|
||||
<small className="text-muted d-block">Total Balance</small>
|
||||
<div className="d-flex align-items-center">
|
||||
<h6 className="mb-0 me-1">$459.10</h6>
|
||||
<small className="text-success fw-semibold">
|
||||
<i className="bx bx-chevron-up"></i>
|
||||
42.9%
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="incomeChart"></div>
|
||||
<div className="d-flex justify-content-center pt-4 gap-2">
|
||||
<div className="flex-shrink-0">
|
||||
<div id="expensesOfWeek"></div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="mb-n1 mt-1">Expenses This Week</p>
|
||||
<small className="text-muted">$39 less than last week</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/*/ Expense Overview */}
|
||||
|
||||
{/* Transactions */}
|
||||
<div className="col-md-6 col-lg-4 order-2 mb-4">
|
||||
<div className="card h-100">
|
||||
<div className="card-header d-flex align-items-center justify-content-between">
|
||||
<h5 className="card-title m-0 me-2">Transactions</h5>
|
||||
<div className="dropdown">
|
||||
<button
|
||||
className="btn p-0"
|
||||
type="button"
|
||||
id="transactionID"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i className="bx bx-dots-vertical-rounded"></i>
|
||||
</button>
|
||||
<div className="dropdown-menu dropdown-menu-end" aria-labelledby="transactionID">
|
||||
<a className="dropdown-item" >Last 28 Days</a>
|
||||
<a className="dropdown-item" >Last Month</a>
|
||||
<a className="dropdown-item" >Last Year</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<ul className="p-0 m-0">
|
||||
<li className="d-flex mb-4 pb-1">
|
||||
<div className="avatar flex-shrink-0 me-3">
|
||||
<img src="./img/icons/unicons/paypal.png" alt="User" className="rounded" />
|
||||
</div>
|
||||
<div className="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
|
||||
<div className="me-2">
|
||||
<small className="text-muted d-block mb-1">Paypal</small>
|
||||
<h6 className="mb-0">Send money</h6>
|
||||
</div>
|
||||
<div className="user-progress d-flex align-items-center gap-1">
|
||||
<h6 className="mb-0">+82.6</h6>
|
||||
<span className="text-muted">USD</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="d-flex mb-4 pb-1">
|
||||
<div className="avatar flex-shrink-0 me-3">
|
||||
<img src="./img/icons/unicons/wallet.png" alt="User" className="rounded" />
|
||||
</div>
|
||||
<div className="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
|
||||
<div className="me-2">
|
||||
<small className="text-muted d-block mb-1">Wallet</small>
|
||||
<h6 className="mb-0">Mac'D</h6>
|
||||
</div>
|
||||
<div className="user-progress d-flex align-items-center gap-1">
|
||||
<h6 className="mb-0">+270.69</h6>
|
||||
<span className="text-muted">USD</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="d-flex mb-4 pb-1">
|
||||
<div className="avatar flex-shrink-0 me-3">
|
||||
<img src="./img/icons/unicons/chart.png" alt="User" className="rounded" />
|
||||
</div>
|
||||
<div className="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
|
||||
<div className="me-2">
|
||||
<small className="text-muted d-block mb-1">Transfer</small>
|
||||
<h6 className="mb-0">Refund</h6>
|
||||
</div>
|
||||
<div className="user-progress d-flex align-items-center gap-1">
|
||||
<h6 className="mb-0">+637.91</h6>
|
||||
<span className="text-muted">USD</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="d-flex mb-4 pb-1">
|
||||
<div className="avatar flex-shrink-0 me-3">
|
||||
<img src="./img/icons/unicons/cc-success.png" alt="User" className="rounded" />
|
||||
</div>
|
||||
<div className="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
|
||||
<div className="me-2">
|
||||
<small className="text-muted d-block mb-1">Credit Card</small>
|
||||
<h6 className="mb-0">Ordered Food</h6>
|
||||
</div>
|
||||
<div className="user-progress d-flex align-items-center gap-1">
|
||||
<h6 className="mb-0">-838.71</h6>
|
||||
<span className="text-muted">USD</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="d-flex mb-4 pb-1">
|
||||
<div className="avatar flex-shrink-0 me-3">
|
||||
<img src="./img/icons/unicons/wallet.png" alt="User" className="rounded" />
|
||||
</div>
|
||||
<div className="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
|
||||
<div className="me-2">
|
||||
<small className="text-muted d-block mb-1">Wallet</small>
|
||||
<h6 className="mb-0">Starbucks</h6>
|
||||
</div>
|
||||
<div className="user-progress d-flex align-items-center gap-1">
|
||||
<h6 className="mb-0">+203.33</h6>
|
||||
<span className="text-muted">USD</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="d-flex">
|
||||
<div className="avatar flex-shrink-0 me-3">
|
||||
<img src="./img/icons/unicons/cc-warning.png" alt="User" className="rounded" />
|
||||
</div>
|
||||
<div className="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
|
||||
<div className="me-2">
|
||||
<small className="text-muted d-block mb-1">Mastercard</small>
|
||||
<h6 className="mb-0">Ordered Food</h6>
|
||||
</div>
|
||||
<div className="user-progress d-flex align-items-center gap-1">
|
||||
<h6 className="mb-0">-92.45</h6>
|
||||
<span className="text-muted">USD</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/*/ Transactions */}
|
||||
</div>
|
||||
</div>
|
||||
{/* / Content */}
|
||||
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
export default Dashboard;
|
||||
Loading…
x
Reference in New Issue
Block a user