Nessuna descrizione
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.js 19KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355
  1. import { connect } from "react-redux";
  2. import DoughnutChart from "../components/chart/DoughnutChart";
  3. import BarChart from "../components/chart/LineChart";
  4. import Layout from "../components/layout/Layout";
  5. import BalanceDetails from "./../components/elements/BalanceDetails";
  6. import GoalsBudget from "./../components/elements/GoalsBudget";
  7. import TransactionHistory from "./../components/elements/TransactionHistory";
  8. import NewConnection from "../components/widget/NewConnection";
  9. import Link from "next/link";
  10. import PaymentAddKPI from "../components/widget/PaymentAddKPI";
  11. import PaymentKPI from "../components/widget/PaymentKPI";
  12. import SupportKPI from "../components/widget/SupportKPI";
  13. import InvoiceKPI from "../components/widget/InvoiceKPI";
  14. function Home({ lineData, doughnutData }) {
  15. return (
  16. <>
  17. <Layout
  18. headTitle="Dashboard"
  19. pageTitle="Dashboard"
  20. pageTitleSub={"Welcome Rahul"}
  21. pageClass={"dashboard"}
  22. parent={"Home"}
  23. child={"Dashboard"}
  24. >
  25. <div className="row">
  26. <div className="col-xxl-6 col-xl-6 col-lg-6">
  27. <div className="row">
  28. <NewConnection />
  29. <PaymentKPI />
  30. </div>
  31. </div>
  32. <div className="col-xl-6 col-lg-6">
  33. <div id="user-activity" className="card" data-aos="fade-up">
  34. <div className="card-header">
  35. <h4 className="card-title">Water Consumption Levels</h4>
  36. </div>
  37. <div className="card-body">
  38. <BarChart lineData={lineData} />
  39. </div>
  40. </div>
  41. </div>
  42. <hr />
  43. <div className="col-xl-6 col-lg-6">
  44. <PaymentAddKPI />
  45. </div>
  46. <div className="col-xl-6 col-lg-6">
  47. <InvoiceKPI />
  48. </div>
  49. <hr />
  50. <SupportKPI />
  51. <div className="col-xl-6 col-lg-6">
  52. <div className="card">
  53. <div className="card-header">
  54. <h4 className="card-title">Stats</h4>
  55. </div>
  56. <div className="card-body">
  57. <div className="row">
  58. <div className="col-xl-6 col-lg-6 col-md-6 col-sm-6">
  59. <div className="stat-widget d-flex align-items-center">
  60. <div className="widget-icon me-3 bg-primary">
  61. <span>
  62. <i className="ri-wallet-line"></i>
  63. </span>
  64. </div>
  65. <div className="widget-content">
  66. <h3>432568</h3>
  67. <p>Last Balance</p>
  68. </div>
  69. {/* <p className="text-success mb-0">
  70. +168.001%{" "}
  71. <span>
  72. <i className="bi bi-arrow-up"></i>
  73. </span>
  74. </p> */}
  75. </div>
  76. </div>
  77. <div className="col-xl-6 col-lg-6 col-md-6 col-sm-6">
  78. <div className="stat-widget d-flex align-items-center">
  79. <div className="widget-icon me-3 bg-secondary">
  80. <span>
  81. <i className="ri-wallet-2-line"></i>
  82. </span>
  83. </div>
  84. <div className="widget-content">
  85. <h3>245860</h3>
  86. <p>Hold Balance</p>
  87. {/* <p className="text-success mb-0">
  88. +168.001%{" "}
  89. <span>
  90. <i className="bi bi-arrow-up"></i>
  91. </span>
  92. </p> */}
  93. </div>
  94. </div>
  95. </div>
  96. <div className="col-xl-6 col-lg-6 col-md-6 col-sm-6">
  97. <div className="stat-widget d-flex align-items-center">
  98. <div className="widget-icon me-3 bg-success">
  99. <span>
  100. <i className="ri-wallet-3-line"></i>
  101. </span>
  102. </div>
  103. <div className="widget-content">
  104. <h3>25.35</h3>
  105. <p>Current Rate</p>
  106. {/* <p className="text-danger mb-0">
  107. -15.034%{" "}
  108. <span>
  109. <i className="bi bi-arrow-down"></i>
  110. </span>
  111. </p> */}
  112. </div>
  113. </div>
  114. </div>
  115. <div className="col-xl-6 col-lg-6 col-md-6 col-sm-6">
  116. <div className="stat-widget d-flex align-items-center">
  117. <div className="widget-icon me-3 bg-danger">
  118. <span>
  119. <i className="ri-wallet-3-line"></i>
  120. </span>
  121. </div>
  122. <div className="widget-content">
  123. <h3>22.56</h3>
  124. <p>Bounce Rate</p>
  125. {/* <p className="text-danger mb-0">
  126. -15.034%{" "}
  127. <span>
  128. <i className="bi bi-arrow-down"></i>
  129. </span>
  130. </p> */}
  131. </div>
  132. </div>
  133. </div>
  134. </div>
  135. </div>
  136. </div>
  137. </div>
  138. <div className="d-none">
  139. <div className="col-xxl-4 col-xl-4 col-lg-6">
  140. <div className="card">
  141. <div className="card-header">
  142. <h4 className="card-title">Unpaid Bills</h4>
  143. </div>
  144. <div className="card-body">
  145. <div className="unpaid-content">
  146. <ul>
  147. <li>
  148. <p className="mb-0">Service</p>
  149. <h5 className="mb-0">Youtube Chanel</h5>
  150. </li>
  151. <li>
  152. <p className="mb-0">Issued</p>
  153. <h5 className="mb-0">March 17, 2021</h5>
  154. </li>
  155. <li>
  156. <p className="mb-0">Payment Due</p>
  157. <h5 className="mb-0">17 Days</h5>
  158. </li>
  159. <li>
  160. <p className="mb-0">Paid</p>
  161. <h5 className="mb-0">0.00</h5>
  162. </li>
  163. <li>
  164. <p className="mb-0">Amount to pay</p>
  165. <h5 className="mb-0">$ 532.69</h5>
  166. </li>
  167. <li>
  168. <p className="mb-0">Payment Method</p>
  169. <h5 className="mb-0">Paypal</h5>
  170. </li>
  171. </ul>
  172. </div>
  173. </div>
  174. </div>
  175. </div>
  176. <div className="col-xl-4 col-xxl-4 col-lg-6">
  177. <div className="row">
  178. <div className="col-xl-12 col-lg-12">
  179. <div className="credit-card visa">
  180. <div className="type-brand">
  181. <h4>Debit Card</h4>
  182. <img src="/images/cc/visa.png" alt="" />
  183. </div>
  184. <div className="cc-number">
  185. <h6>1234</h6>
  186. <h6>5678</h6>
  187. <h6>7890</h6>
  188. <h6>9875</h6>
  189. </div>
  190. <div className="cc-holder-exp">
  191. <h5>Saiful Islam</h5>
  192. <div className="exp">
  193. <span>EXP:</span>
  194. <strong>12/21</strong>
  195. </div>
  196. </div>
  197. {/* <div className="cc-info">
  198. <div className="row justify-content-between align-items-center">
  199. <div className="col-5">
  200. <div className="d-flex">
  201. <p className="me-3">Status</p>
  202. <p>
  203. <strong>Active</strong>
  204. </p>
  205. </div>
  206. <div className="d-flex">
  207. <p className="me-3">Currency</p>
  208. <p>
  209. <strong>USD</strong>
  210. </p>
  211. </div>
  212. </div>
  213. <div className="col-xl-7">
  214. <div className="d-flex justify-content-between">
  215. <div className="ms-3">
  216. <p>Credit Limit</p>
  217. <p>
  218. <strong>
  219. 2000 USD
  220. </strong>
  221. </p>
  222. </div>
  223. <div id="circle1"></div>
  224. </div>
  225. </div>
  226. </div>
  227. </div> */}
  228. </div>
  229. </div>
  230. <div className="col-xl-12 col-lg-12">
  231. <div className="credit-card payoneer">
  232. <div className="type-brand">
  233. <h4>Debit Card</h4>
  234. <img
  235. src="/images/cc/payoneer.png"
  236. alt=""
  237. />
  238. </div>
  239. <div className="cc-number">
  240. <h6>1234</h6>
  241. <h6>5678</h6>
  242. <h6>7890</h6>
  243. <h6>9875</h6>
  244. </div>
  245. <div className="cc-holder-exp">
  246. <h5>Saiful Islam</h5>
  247. <div className="exp">
  248. <span>EXP:</span>
  249. <strong>12/21</strong>
  250. </div>
  251. </div>
  252. {/* <div className="cc-info">
  253. <div className="row">
  254. <div className="col-5">
  255. <div className="d-flex">
  256. <p className="me-3">Status</p>
  257. <p>
  258. <strong>Active</strong>
  259. </p>
  260. </div>
  261. <div className="d-flex">
  262. <p className="me-3">Currency</p>
  263. <p>
  264. <strong>USD</strong>
  265. </p>
  266. </div>
  267. </div>
  268. <div className="col-xl-7">
  269. <div className="d-flex justify-content-between">
  270. <div className="ms-3">
  271. <p>Credit Limit</p>
  272. <p>
  273. <strong>
  274. 1500/2000 USD
  275. </strong>
  276. </p>
  277. </div>
  278. <div id="circle3"></div>
  279. </div>
  280. </div>
  281. </div>
  282. </div> */}
  283. </div>
  284. </div>
  285. </div>
  286. </div>
  287. <div className=" col-xxl-4 col-xl-4 col-lg-6">
  288. <div className="card">
  289. <div className="card-header">
  290. <h4 className="card-title">Balance Details</h4>
  291. </div>
  292. <div className="card-body">
  293. <BalanceDetails />
  294. </div>
  295. </div>
  296. </div>
  297. <div className=" col-xxl-4 col-xl-4 col-lg-6">
  298. <div className="card">
  299. <div className="card-header">
  300. <h4 className="card-title">Statistics</h4>
  301. </div>
  302. <div className="card-body">
  303. <DoughnutChart doughnutData={doughnutData} />
  304. </div>
  305. </div>
  306. </div>
  307. <div className="col-xl-4 col-lg-6">
  308. <div className="card">
  309. <div className="card-header">
  310. <h4 className="card-title">Transaction History</h4>
  311. <a href="#">See more</a>
  312. </div>
  313. <div className="card-body">
  314. <TransactionHistory />
  315. </div>
  316. </div>
  317. </div>
  318. <div className="col-xl-4 col-lg-6">
  319. <div className="card">
  320. <div className="card-header">
  321. <h4 className="card-title">Goals Budget</h4>
  322. </div>
  323. <div className="card-body">
  324. <GoalsBudget />
  325. </div>
  326. </div>
  327. </div>
  328. </div>
  329. </div>
  330. </Layout>
  331. </>
  332. );
  333. }
  334. const mapStateToProps = (state) => ({
  335. lineData: state.LineChart.expenses,
  336. doughnutData: state.DoughnutChart.statistics,
  337. });
  338. export default connect(mapStateToProps, {})(Home);