From 8d14ed1e9b676a3b39cabd3448d3e41b549da746 Mon Sep 17 00:00:00 2001 From: SebastianMartel Date: Wed, 1 Nov 2023 06:51:52 -0500 Subject: [PATCH 1/3] fixing Link components from dashboard --- src/app/dashboardAdmin/page.tsx | 25 ++++++++++++++++++- .../componetsDashboard/Cards/CardProfile.jsx | 4 +-- .../Dropdowns/IndexDropdown.js | 19 +++++++------- .../Dropdowns/PagesDropdown.js | 16 ++++++------ .../componetsDashboard/Navbars/AuthNavbar.js | 2 +- .../componetsDashboard/Navbars/IndexNavbar.js | 8 +++--- 6 files changed, 50 insertions(+), 24 deletions(-) diff --git a/src/app/dashboardAdmin/page.tsx b/src/app/dashboardAdmin/page.tsx index 9318512..bf4e5ee 100644 --- a/src/app/dashboardAdmin/page.tsx +++ b/src/app/dashboardAdmin/page.tsx @@ -1,3 +1,26 @@ +import CardBarChart from "~/components/componetsDashboard/Cards/CardBarChart"; +import CardLineChart from "~/components/componetsDashboard/Cards/CardLineChart"; +import CardPageVisits from "~/components/componetsDashboard/Cards/CardPageVisits"; +import CardProfile from "~/components/componetsDashboard/Cards/CardProfile"; +import CardSettings from "~/components/componetsDashboard/Cards/CardSettings"; +import CardSocialTraffic from "~/components/componetsDashboard/Cards/CardSocialTraffic"; +import CardStats from "~/components/componetsDashboard/Cards/CardStats"; +import CardTable from "~/components/componetsDashboard/Cards/CardTable"; + +import Navbar from "~/components/componetsDashboard/Navbars/IndexNavbar"; + export default function landing() { - return

Hola soy DashboardAdmin

; + return ( +
+ + + + + + + + + +
+ ); } diff --git a/src/components/componetsDashboard/Cards/CardProfile.jsx b/src/components/componetsDashboard/Cards/CardProfile.jsx index f0891a0..af03d9e 100644 --- a/src/components/componetsDashboard/Cards/CardProfile.jsx +++ b/src/components/componetsDashboard/Cards/CardProfile.jsx @@ -41,7 +41,7 @@ export default function CardProfile() {
-

+

Jenna Stones

@@ -70,7 +70,7 @@ export default function CardProfile() { e.preventDefault()} + // onClick={(e) => e.preventDefault()} > Show more diff --git a/src/components/componetsDashboard/Dropdowns/IndexDropdown.js b/src/components/componetsDashboard/Dropdowns/IndexDropdown.js index 81d0d05..d02475b 100644 --- a/src/components/componetsDashboard/Dropdowns/IndexDropdown.js +++ b/src/components/componetsDashboard/Dropdowns/IndexDropdown.js @@ -1,6 +1,7 @@ "use client" import React from "react"; -import { Link } from "react-router-dom"; +import Link from "next/link"; +// import { Link } from "react-router-dom"; import { createPopper } from "@popperjs/core"; const IndexDropdown = () => { @@ -45,25 +46,25 @@ const IndexDropdown = () => { Admin Layout Dashboard Settings Tables Maps @@ -77,13 +78,13 @@ const IndexDropdown = () => { Auth Layout Login Register @@ -97,13 +98,13 @@ const IndexDropdown = () => { No Layout Landing Profile diff --git a/src/components/componetsDashboard/Dropdowns/PagesDropdown.js b/src/components/componetsDashboard/Dropdowns/PagesDropdown.js index aa5f57d..0a9eb15 100644 --- a/src/components/componetsDashboard/Dropdowns/PagesDropdown.js +++ b/src/components/componetsDashboard/Dropdowns/PagesDropdown.js @@ -45,7 +45,7 @@ const PagesDropdown = () => { Admin Layout { Dashboard { Settings { Tables { Auth Layout { Login { No Layout { Landing Notus React diff --git a/src/components/componetsDashboard/Navbars/IndexNavbar.js b/src/components/componetsDashboard/Navbars/IndexNavbar.js index 7df697f..69a3fa0 100644 --- a/src/components/componetsDashboard/Navbars/IndexNavbar.js +++ b/src/components/componetsDashboard/Navbars/IndexNavbar.js @@ -1,9 +1,11 @@ /*eslint-disable*/ +"use client" import React from "react"; -import { Link } from "react-router-dom"; +import Link from "next/link"; +// import { Link } from "react-router-dom"; // components -import IndexDropdown from "components/Dropdowns/IndexDropdown.js"; +import IndexDropdown from "../Dropdowns/IndexDropdown"; export default function Navbar(props) { const [navbarOpen, setNavbarOpen] = React.useState(false); @@ -13,7 +15,7 @@ export default function Navbar(props) {
Notus React From 8c3a5bf4852761b94539c3d7bf68c380558933c5 Mon Sep 17 00:00:00 2001 From: SebastianMartel Date: Fri, 3 Nov 2023 07:59:17 -0500 Subject: [PATCH 2/3] dashboarAdmin: user & products tables --- src/app/dashboardAdmin/page.tsx | 48 ++++- .../componetsDashboard/Cards/CardBarChart.jsx | 2 +- .../componetsDashboard/Cards/CardProducts.tsx | 202 ++++++++++++++++++ .../componetsDashboard/Cards/CardTable.jsx | 2 +- .../componetsDashboard/Cards/CardUsers.tsx | 192 +++++++++++++++++ .../Dropdowns/TableDropdown.js | 5 +- .../componetsDashboard/Navbars/IndexNavbar.js | 2 +- .../componetsDashboard/Sidebar/Sidebar.js | 113 +--------- 8 files changed, 446 insertions(+), 120 deletions(-) create mode 100644 src/components/componetsDashboard/Cards/CardProducts.tsx create mode 100644 src/components/componetsDashboard/Cards/CardUsers.tsx diff --git a/src/app/dashboardAdmin/page.tsx b/src/app/dashboardAdmin/page.tsx index bf4e5ee..c7eb69c 100644 --- a/src/app/dashboardAdmin/page.tsx +++ b/src/app/dashboardAdmin/page.tsx @@ -7,20 +7,46 @@ import CardSocialTraffic from "~/components/componetsDashboard/Cards/CardSocialT import CardStats from "~/components/componetsDashboard/Cards/CardStats"; import CardTable from "~/components/componetsDashboard/Cards/CardTable"; -import Navbar from "~/components/componetsDashboard/Navbars/IndexNavbar"; +// import Navbar from "~/components/componetsDashboard/Navbars/IndexNavbar"; +// import NavBar from "~/components/navBar/navBar"; +import Navbar from "../../components/componetsDashboard/Navbars/AdminNavbar"; +import Sidebar from "~/components/componetsDashboard/Sidebar/Sidebar"; +import CardUsers from "~/components/componetsDashboard/Cards/CardUsers" +import CardProducts from "~/components/componetsDashboard/Cards/CardProducts"; + + export default function landing() { return ( -
+ <> + {/* */} - - - - - - - - -
+
+ {/* */} +
+
Administración
+
+ + {/* USERS */} + + + {/* PRODUCTS */} + + + {/* ORDERS */} + + + {/* */} + SETTINGS: + {/* SETTINGS */} + + {/* */} + + {/* */} + {/* */} + {/* */} + {/* */} +
+ ); } diff --git a/src/components/componetsDashboard/Cards/CardBarChart.jsx b/src/components/componetsDashboard/Cards/CardBarChart.jsx index e8ff067..a17ba07 100644 --- a/src/components/componetsDashboard/Cards/CardBarChart.jsx +++ b/src/components/componetsDashboard/Cards/CardBarChart.jsx @@ -101,7 +101,7 @@ export default function CardBarChart() { }, []); return ( <> -
+
diff --git a/src/components/componetsDashboard/Cards/CardProducts.tsx b/src/components/componetsDashboard/Cards/CardProducts.tsx new file mode 100644 index 0000000..54081d6 --- /dev/null +++ b/src/components/componetsDashboard/Cards/CardProducts.tsx @@ -0,0 +1,202 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +// components +import TableDropdown from '~/components/componetsDashboard/Dropdowns/TableDropdown'; + + +interface ProductsInterface { + id: number, + name: string, + picture: string, + category: string, + stock: number, + regularPrice: number, + salePrice: number +}; + +const PRODUCTS: ProductsInterface[] = [ + { + id: 1, + name: "Farola Hyundai I35 Elantra 2012 2016 Drl Tubo Led Proyector", + picture: "https://media.istockphoto.com/id/1337144146/vector/default-avatar-profile-icon-vector.jpg?s=612x612&w=0&k=20&c=BIbFwuv7FxTWvh5S3vB6bkT0Qv8Vn8N5Ffseq84ClGI=", + category: "Farolas", + stock: 10, + regularPrice: 2489900, + salePrice: 2150910 + }, + { + id: 2, + name: "Stop Hyundai i35 Elantra 2012-2016 Tubo Led+ Secuencial Giro", + picture: "https://media.istockphoto.com/id/1337144146/vector/default-avatar-profile-icon-vector.jpg?s=612x612&w=0&k=20&c=BIbFwuv7FxTWvh5S3vB6bkT0Qv8Vn8N5Ffseq84ClGI=", + category: "Farolas", + stock: 0, + regularPrice: 2289900, + salePrice: 2060910 + } +]; + + +type CardProductsProps = { + color: string +}; + +export default function CardProducts({ color }: CardProductsProps) { + return ( + <> +
+
+
+
+

+ Productos +

+
+
+
+
+ {/* Projects table */} + + + + + + + + + + + + + + { + PRODUCTS.map((PRODUCT, idx) => ( + + + + + + + + + + )) + } + +
+ Id + + Nombre + + Categoría + + Stock + + Precio regular + + Precio de oferta + + Acciones +
+ {PRODUCT.id} + + ...{' '} + + {PRODUCT.name} + + + {PRODUCT.category} + + {PRODUCT.stock} + +
+ {PRODUCT.regularPrice} +
+ 		+
+ {PRODUCT.salePrice} +
+ 		+ +
+
+
+ + ); +}; + +CardProducts.defaultProps = { + color: 'light', +}; + +CardProducts.propTypes = { + color: PropTypes.oneOf(['light', 'dark']), +}; diff --git a/src/components/componetsDashboard/Cards/CardTable.jsx b/src/components/componetsDashboard/Cards/CardTable.jsx index 0c5cb91..04103ed 100644 --- a/src/components/componetsDashboard/Cards/CardTable.jsx +++ b/src/components/componetsDashboard/Cards/CardTable.jsx @@ -23,7 +23,7 @@ export default function CardTable({ color }) { (color === 'light' ? 'text-blueGray-700' : 'text-white') } > - Card Tables + Orders
diff --git a/src/components/componetsDashboard/Cards/CardUsers.tsx b/src/components/componetsDashboard/Cards/CardUsers.tsx new file mode 100644 index 0000000..8234778 --- /dev/null +++ b/src/components/componetsDashboard/Cards/CardUsers.tsx @@ -0,0 +1,192 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +// components +import TableDropdown from '~/components/componetsDashboard/Dropdowns/TableDropdown'; + + +interface UsersInterface { + id: number, + name: string, + picture: string, + emailAddress: string, + status: "active" | "inactive", + registerDate: string, +}; + +const USERS:UsersInterface[] = [ + { + id: 1, + name: "John", + picture: "https://media.istockphoto.com/id/1337144146/vector/default-avatar-profile-icon-vector.jpg?s=612x612&w=0&k=20&c=BIbFwuv7FxTWvh5S3vB6bkT0Qv8Vn8N5Ffseq84ClGI=", + status: "active", + emailAddress: "johndoe@gmail.com", + registerDate: "27/09/2023" + }, + { + id: 2, + name: "Doe", + picture: "https://media.istockphoto.com/id/1337144146/vector/default-avatar-profile-icon-vector.jpg?s=612x612&w=0&k=20&c=BIbFwuv7FxTWvh5S3vB6bkT0Qv8Vn8N5Ffseq84ClGI=", + status: "inactive", + emailAddress: "doejohn@hotmail.com", + registerDate: "21/07/2023" + } +]; + + +type CardUsersProps = { + color: string +}; + +export default function CardUsers({ color }: CardUsersProps) { + return ( + <> +
+
+
+
+

+ Usuarios +

+
+
+
+
+ {/* Projects table */} + + + + + + + + + + + + + { + USERS.map ((USER, idx) => ( + + + + + + + + + )) + } + +
+ Id + + Nombre + + Correo electrónico + + Estado + + Fecha de registro + + Acciones +
+ {USER.id} + + ...{' '} + + {USER.name} + + + {USER.emailAddress} + + {USER.status} + +
+ {USER.registerDate} +
+
+
+
+
+
+ 		+ +
+
+
+ + ); +}; + +CardUsers.defaultProps = { + color: 'light', +}; + +CardUsers.propTypes = { + color: PropTypes.oneOf(['light', 'dark']), +}; diff --git a/src/components/componetsDashboard/Dropdowns/TableDropdown.js b/src/components/componetsDashboard/Dropdowns/TableDropdown.js index 66d7eaf..894bb51 100644 --- a/src/components/componetsDashboard/Dropdowns/TableDropdown.js +++ b/src/components/componetsDashboard/Dropdowns/TableDropdown.js @@ -2,7 +2,8 @@ import React from "react"; import { createPopper } from "@popperjs/core"; -const NotificationDropdown = () => { +// prev name: NotificationDropdown +const TableDropdown = () => { // dropdown props const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false); const btnDropdownRef = React.createRef(); @@ -68,4 +69,4 @@ const NotificationDropdown = () => { ); }; -export default NotificationDropdown; +export default TableDropdown; diff --git a/src/components/componetsDashboard/Navbars/IndexNavbar.js b/src/components/componetsDashboard/Navbars/IndexNavbar.js index 69a3fa0..1df3e24 100644 --- a/src/components/componetsDashboard/Navbars/IndexNavbar.js +++ b/src/components/componetsDashboard/Navbars/IndexNavbar.js @@ -41,7 +41,7 @@ export default function Navbar(props) { className="hover:text-blueGray-500 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold" href="https://www.creative-tim.com/learning-lab/tailwind/react/overview/notus?ref=nr-index-navbar" > - {" "} + Docs diff --git a/src/components/componetsDashboard/Sidebar/Sidebar.js b/src/components/componetsDashboard/Sidebar/Sidebar.js index 2a335f8..c6aa28d 100644 --- a/src/components/componetsDashboard/Sidebar/Sidebar.js +++ b/src/components/componetsDashboard/Sidebar/Sidebar.js @@ -5,6 +5,8 @@ import Link from 'next/link'; import NotificationDropdown from '~/components/componetsDashboard/Dropdowns/NotificationDropdown.js'; import UserDropdown from '~/components/componetsDashboard/Dropdowns/UserDropdown.js'; +import { Images } from '~/assets/img'; +import Image from 'next/image'; export default function Sidebar() { const [collapseShow, setCollapseShow] = React.useState('hidden'); @@ -22,10 +24,10 @@ export default function Sidebar() { {/* Brand */} - Notus React + {/* User */}
    @@ -48,10 +50,10 @@ export default function Sidebar() {
    - Notus React +
    @@ -112,7 +114,7 @@ export default function Sidebar() { className={ 'text-xs uppercase py-3 font-bold block ' + (window.location.href.indexOf('/dashboardUser/settings') !== - -1 + -1 ? 'text-lightBlue-500 hover:text-lightBlue-600' : 'text-blueGray-700 hover:text-blueGray-500') } @@ -146,7 +148,7 @@ export default function Sidebar() { className={ 'fas fa-table mr-2 text-sm ' + (window.location.href.indexOf('/dashboardUser/Tables') !== - -1 + -1 ? 'opacity-75' : 'text-blueGray-300') } @@ -169,7 +171,7 @@ export default function Sidebar() { className={ 'fas fa-map-marked mr-2 text-sm ' + (window.location.href.indexOf('/dashboardUser/Maps') !== - -1 + -1 ? 'opacity-75' : 'text-blueGray-300') } @@ -238,103 +240,6 @@ export default function Sidebar() {
- - {/* Divider */} -
- {/* Heading */} -
- Documentation -
- {/* Navigation */} -
From 9cbfb4f964afef9271546a0a16461fb68290fac3 Mon Sep 17 00:00:00 2001 From: SebastianMartel Date: Thu, 9 Nov 2023 20:33:50 -0500 Subject: [PATCH 3/3] adminDashboard: sections, searchBar --- src/app/dashboardAdmin/page.tsx | 16 +- .../componetsDashboard/Cards/CardBrands.tsx | 137 +++++++++ .../Cards/CardCategories.tsx | 137 +++++++++ .../componetsDashboard/Cards/CardOrders.tsx | 274 ++++++++++++++++++ .../componetsDashboard/Cards/CardProducts.tsx | 61 +++- .../componetsDashboard/Cards/CardUsers.tsx | 38 ++- .../SearchBar/SearchBar.tsx | 54 ++++ src/store/dashboardAdminStore.ts | 102 +++++++ 8 files changed, 793 insertions(+), 26 deletions(-) create mode 100644 src/components/componetsDashboard/Cards/CardBrands.tsx create mode 100644 src/components/componetsDashboard/Cards/CardCategories.tsx create mode 100644 src/components/componetsDashboard/Cards/CardOrders.tsx create mode 100644 src/components/componetsDashboard/SearchBar/SearchBar.tsx create mode 100644 src/store/dashboardAdminStore.ts diff --git a/src/app/dashboardAdmin/page.tsx b/src/app/dashboardAdmin/page.tsx index c7eb69c..23de396 100644 --- a/src/app/dashboardAdmin/page.tsx +++ b/src/app/dashboardAdmin/page.tsx @@ -8,18 +8,20 @@ import CardStats from "~/components/componetsDashboard/Cards/CardStats"; import CardTable from "~/components/componetsDashboard/Cards/CardTable"; // import Navbar from "~/components/componetsDashboard/Navbars/IndexNavbar"; -// import NavBar from "~/components/navBar/navBar"; +import NavBar from "~/components/navBar/navBar"; import Navbar from "../../components/componetsDashboard/Navbars/AdminNavbar"; import Sidebar from "~/components/componetsDashboard/Sidebar/Sidebar"; import CardUsers from "~/components/componetsDashboard/Cards/CardUsers" import CardProducts from "~/components/componetsDashboard/Cards/CardProducts"; - +import CardOrders from "~/components/componetsDashboard/Cards/CardOrders"; +import CardCategories from "~/components/componetsDashboard/Cards/CardCategories"; +import CardBrands from "~/components/componetsDashboard/Cards/CardBrands"; export default function landing() { return ( <> - {/* */} +
{/* */} @@ -28,13 +30,15 @@ export default function landing() {
{/* USERS */} - + {/* PRODUCTS */} - + + + {/* ORDERS */} - + {/* */} SETTINGS: diff --git a/src/components/componetsDashboard/Cards/CardBrands.tsx b/src/components/componetsDashboard/Cards/CardBrands.tsx new file mode 100644 index 0000000..012bca2 --- /dev/null +++ b/src/components/componetsDashboard/Cards/CardBrands.tsx @@ -0,0 +1,137 @@ +"use client"; +import { useEffect } from 'react'; +import PropTypes from 'prop-types'; + +// components +import SearchBar from '../SearchBar/SearchBar'; +import TableDropdown from '~/components/componetsDashboard/Dropdowns/TableDropdown'; + +import useDashboardAdminStore from '~/store/dashboardAdminStore'; + + +interface BrandsInterface { + id: number, + name: string, +}; + +const BRANDS: BrandsInterface[] = [ + { + id: 1, + name: "Audi" + }, + { + id: 2, + name: "Mitsubishi" + } +]; + + +type CardBrandsProps = { + color: string +}; + +export default function CardBrands({ color }: CardBrandsProps) { + + + // GLOBAL STORE: + const { brands, updateBrands }: any = useDashboardAdminStore(); + + + // LIFE CYCLES: + useEffect(() => { + updateBrands(BRANDS); + }, []); + + + // COMPONENT: + return ( + <> +
+
+
+
+

+ Marcas +

+ +
+
+
+
+ {/* Projects table */} + + + + + + + + + + { + brands.map((BRAND: any, idx: any) => ( + + + + + + )) + } + +
+ Id + + Nombre + + Acciones +
+ {BRAND.id} + + {BRAND.name} + + +
+
+
+ + ); +}; + +CardBrands.defaultProps = { + color: 'light', +}; + +CardBrands.propTypes = { + color: PropTypes.oneOf(['light', 'dark']), +}; diff --git a/src/components/componetsDashboard/Cards/CardCategories.tsx b/src/components/componetsDashboard/Cards/CardCategories.tsx new file mode 100644 index 0000000..8389e9d --- /dev/null +++ b/src/components/componetsDashboard/Cards/CardCategories.tsx @@ -0,0 +1,137 @@ +"use client"; +import { useEffect } from "react"; +import PropTypes from 'prop-types'; + +// components +import SearchBar from '../SearchBar/SearchBar'; +import TableDropdown from '~/components/componetsDashboard/Dropdowns/TableDropdown'; + +import useDashboardAdminStore from "~/store/dashboardAdminStore"; + + +interface CategoriesInterface { + id: number, + name: string, +}; + +const CATEGORIES: CategoriesInterface[] = [ + { + id: 1, + name: "Escape" + }, + { + id: 2, + name: "Pisos" + } +]; + + +type CardCategoriesProps = { + color: string +}; + +export default function CardCategories({ color }: CardCategoriesProps) { + + + // GLOBAL STORE: + const { categories, updateCategories }: any = useDashboardAdminStore(); + + + // LIFE CYCLES: + useEffect(() => { + updateCategories(CATEGORIES); + }, []); + + + // COMPONENT: + return ( + <> +
+
+
+
+

+ Categorías +

+ +
+
+
+
+ {/* Projects table */} + + + + + + + + + + { + categories.map((CATEGORY: any, idx: any) => ( + + + + + + )) + } + +
+ Id + + Nombre + + Acciones +
+ {CATEGORY.id} + + {CATEGORY.name} + + +
+
+
+ + ); +}; + +CardCategories.defaultProps = { + color: 'light', +}; + +CardCategories.propTypes = { + color: PropTypes.oneOf(['light', 'dark']), +}; \ No newline at end of file diff --git a/src/components/componetsDashboard/Cards/CardOrders.tsx b/src/components/componetsDashboard/Cards/CardOrders.tsx new file mode 100644 index 0000000..866d064 --- /dev/null +++ b/src/components/componetsDashboard/Cards/CardOrders.tsx @@ -0,0 +1,274 @@ +"use client"; +import { useEffect, useState } from 'react'; +import PropTypes from 'prop-types'; + +// components +import SearchBar from '../SearchBar/SearchBar'; +import TableDropdown from '~/components/componetsDashboard/Dropdowns/TableDropdown'; + +import useDashboardAdminStore from '~/store/dashboardAdminStore'; + + +interface OrdersInterface { + id: number, + orderNumber: number, + creationDate: string, + status: "cancelled" | "declined" | "approved" | "processing" | "inbound" | "delivered", + total: number, + list: { + product: string, + quantity: number, + value: number + }[], + payment: { + date: string, + method: "MercadoPago" | "cash", + state: "approved" | "declined" | "pending", + approvalNumber: number + }, + client: { + name: string, + emailAddress: string, + phoneNumber: string, + address: { + department: string, + locality: string, + neighborhood: string, + number: number, + references: string + } + } +}; + + +const ORDERS: OrdersInterface[] = [ + { + id: 1, + orderNumber: 123456789098, + creationDate: "01 November 2023", + status: "declined", + total: 2489900, + list: [{ + product: "product A", + quantity: 1, + value: 2489900 + }], + payment: { + date: "01 Novemeber 2023, 10:25 a.m. GMT-3", + method: "MercadoPago", + state: "approved", + approvalNumber: 123456789 + }, + client: { + name: "John", + emailAddress: "johndoe@gmail.com", + phoneNumber: "+54 123456789", + address: { + department: "Departamento", + locality: "Localidad", + neighborhood: "Barrio", + number: 123, + references: "Cerca al mall" + } + } + }, + { + id: 2, + orderNumber: 324567876543, + creationDate: "27 October 2023", + status: "delivered", + total: 1929900, + list: [{ + product: "product B", + quantity: 1, + value: 1929900 + }], + payment: { + date: "27 October 2023, 10:25 a.m. GMT-3", + method: "MercadoPago", + state: "approved", + approvalNumber: 987654321 + }, + client: { + name: "Doe", + emailAddress: "doejohn@gmail.com", + phoneNumber: "+57 123456789", + address: { + department: "Departamento", + locality: "Localidad", + neighborhood: "Vecindario", + number: 321, + references: "Cerca al mall" + } + } + } +]; + + +type CardOrdersProps = { + color: string +}; + +export default function CardOrders({ color }: CardOrdersProps) { + + + // GLOBAL STORE: + const { orders, updateOrders }: any = useDashboardAdminStore(); + + + // LOCAL STATES: + const [showDetails, setShowDetails] = useState(false); + + + // LIFECYCLES: + useEffect(() => { + updateOrders(ORDERS); + }, []) + + + // COMPONENT: + return ( + <> +
+
+
+
+

+ Pedidos +

+ +
+
+
+
+ + + + + + + + + + + + + { + orders.map((PRODUCT: any, idx: any) => ( + <> + + + + + + + + + { + showDetails ? ( +
+
+ Id + + Número de orden + + Fecha de creación + + Estado + + Total + + Acciones +
+ {PRODUCT.id} + + {PRODUCT.orderNumber} + + {PRODUCT.creationDate} + + {PRODUCT.status} + + {PRODUCT.total} + + {/* */} + +
+ + + + + +
+
+ ) : null + } + + )) + } + + +
+
+ + ); +}; + +CardOrders.defaultProps = { + color: 'light', +}; + +CardOrders.propTypes = { + color: PropTypes.oneOf(['light', 'dark']), +}; \ No newline at end of file diff --git a/src/components/componetsDashboard/Cards/CardProducts.tsx b/src/components/componetsDashboard/Cards/CardProducts.tsx index 54081d6..fdd663d 100644 --- a/src/components/componetsDashboard/Cards/CardProducts.tsx +++ b/src/components/componetsDashboard/Cards/CardProducts.tsx @@ -1,15 +1,20 @@ -import React from 'react'; +"use client"; +import { useEffect } from 'react'; import PropTypes from 'prop-types'; // components +import SearchBar from '../SearchBar/SearchBar'; import TableDropdown from '~/components/componetsDashboard/Dropdowns/TableDropdown'; +import useDashboardAdminStore from '~/store/dashboardAdminStore'; + interface ProductsInterface { id: number, name: string, picture: string, category: string, + brand: string, stock: number, regularPrice: number, salePrice: number @@ -21,18 +26,28 @@ const PRODUCTS: ProductsInterface[] = [ name: "Farola Hyundai I35 Elantra 2012 2016 Drl Tubo Led Proyector", picture: "https://media.istockphoto.com/id/1337144146/vector/default-avatar-profile-icon-vector.jpg?s=612x612&w=0&k=20&c=BIbFwuv7FxTWvh5S3vB6bkT0Qv8Vn8N5Ffseq84ClGI=", category: "Farolas", + brand: "Hyundai", stock: 10, regularPrice: 2489900, salePrice: 2150910 - }, - { + }, { id: 2, name: "Stop Hyundai i35 Elantra 2012-2016 Tubo Led+ Secuencial Giro", picture: "https://media.istockphoto.com/id/1337144146/vector/default-avatar-profile-icon-vector.jpg?s=612x612&w=0&k=20&c=BIbFwuv7FxTWvh5S3vB6bkT0Qv8Vn8N5Ffseq84ClGI=", category: "Farolas", - stock: 0, + brand: "Audi", + stock: 7, regularPrice: 2289900, salePrice: 2060910 + }, { + id: 3, + name: "Stop Hyundai i35 Elantra 2012-2016 Tubo Led Full Led Ahumado", + picture: "https://media.istockphoto.com/id/1337144146/vector/default-avatar-profile-icon-vector.jpg?s=612x612&w=0&k=20&c=BIbFwuv7FxTWvh5S3vB6bkT0Qv8Vn8N5Ffseq84ClGI=", + category: "Farolas", + brand: "Mitsubishi", + stock: 3, + regularPrice: 1929900, + salePrice: 1736910 } ]; @@ -42,6 +57,19 @@ type CardProductsProps = { }; export default function CardProducts({ color }: CardProductsProps) { + + + // GLOBAL STORE: + const { products, updateProducts }: any = useDashboardAdminStore(); + + + // LIFE CYCLES: + useEffect(() => { + updateProducts(PRODUCTS); + }, []); + + + // COMPONENT: return ( <>
-
+

Productos

+
- {/* Projects table */} @@ -99,6 +127,16 @@ export default function CardProducts({ color }: CardProductsProps) { > Categoría + { - PRODUCTS.map((PRODUCT, idx) => ( + products.map((PRODUCT: any, idx: any) => ( + { - USERS.map ((USER, idx) => ( + users.map((USER: any, idx: any) => ( - + )) } @@ -189,4 +207,4 @@ CardUsers.defaultProps = { CardUsers.propTypes = { color: PropTypes.oneOf(['light', 'dark']), -}; +}; \ No newline at end of file diff --git a/src/components/componetsDashboard/SearchBar/SearchBar.tsx b/src/components/componetsDashboard/SearchBar/SearchBar.tsx new file mode 100644 index 0000000..4cee99c --- /dev/null +++ b/src/components/componetsDashboard/SearchBar/SearchBar.tsx @@ -0,0 +1,54 @@ +"use client"; +import { useState } from "react"; + +import { BiSearch } from "react-icons/bi"; +import useDashboardAdminStore from "~/store/dashboardAdminStore"; + + +type SearchBarProps = { + section: "user" | "product" | "brand" | "category" | "order"; +}; + + +function SearchBar({ section }: SearchBarProps) { + + + const [input, setInput] = useState(""); + + const { filterUsers, filterProducts, filterCategories, filterBrands, filterOrders }: any = useDashboardAdminStore(); + + const handleChange = (event: any) => { + setInput(event.target.value) + }; + + const filter = (input: string) => { + switch (section) { + case "user": filterUsers(input); break; + case "product": filterProducts(input); break; + case "category": filterCategories(input); break; + case "brand": filterBrands(input); break; + case "order": filterOrders(input); break; + default: break; + }; + }; + + + return ( +
+ filter(input)} + /> + handleChange(e)} + /> +
+ ) +}; + + +export default SearchBar; \ No newline at end of file diff --git a/src/store/dashboardAdminStore.ts b/src/store/dashboardAdminStore.ts new file mode 100644 index 0000000..0d14292 --- /dev/null +++ b/src/store/dashboardAdminStore.ts @@ -0,0 +1,102 @@ +import { create } from "zustand"; + + +const useDashboardAdminStore = create((set) => ({ + // USERS: + originalUsers: [], + users: [], + updateUsers: (data: any) => + set(() => ({ + users: data, + originalUsers: data + })), + filterUsers: (input: string) => { + set((state: any) => { + const filteredUsers = state.originalUsers.filter((object: any) => + object.name.toLowerCase().includes(input.toLowerCase()) + ); + return { + users: filteredUsers + } + }) + }, + + // PRODUCTS: + originalProducts: [], + products: [], + updateProducts: (data: any) => + set(() => ({ + products: data, + originalProducts: data + })), + filterProducts: (input: string) => { + set((state: any) => { + const filteredProducts = state.originalProducts.filter((object: any) => + object.name.toLowerCase().includes(input.toLowerCase()) + ); + return { + products: filteredProducts + } + }) + }, + + // CATEGORIES: + originalCategories: [], + categories: [], + updateCategories: (data: any) => + set(() => ({ + categories: data, + originalCategories: data + })), + filterCategories: (input: string) => { + set((state: any) => { + const filteredCategories = state.originalCategories.filter((object: any) => + object.name.toLowerCase().includes(input.toLowerCase()) + ); + return { + categories: filteredCategories + } + }) + }, + + // BRANDS: + originalBrands: [], + brands: [], + updateBrands: (data: any) => + set(() => ({ + brands: data, + originalBrands: data + })), + filterBrands: (input: string) => { + set((state: any) => { + const filteredBrands = state.originalBrands.filter((object: any) => + object.name.toLowerCase().includes(input.toLowerCase()) + ); + return { + brands: filteredBrands + } + }) + }, + + // ORDERS: + originalOrders: [], + orders: [], + updateOrders: (data: any) => + set(() => ({ + orders: data, + originalOrders: data + })), + filterOrders: (input: string) => { + set((state: any) => { + const filteredOrders = state.originalOrders.filter((object: any) => + object.orderNumber.toString().includes(input.toString()) + ); + return { + orders: filteredOrders + } + }) + }, +})); + + +export default useDashboardAdminStore; \ No newline at end of file
+ Marca +
{PRODUCT.id} @@ -153,7 +191,7 @@ export default function CardProducts({ color }: CardProductsProps) { src={PRODUCT.picture} className="h-12 w-12 bg-white rounded-full border" alt="..." - >{' '} + > - {PRODUCT.stock} + {PRODUCT.brand} + + = 10 ? "text-[#00FF00]" : PRODUCT.stock >= 5 ? "text-[#FFC107]" : "text-[#FF0000]"}`}> {PRODUCT.stock}
@@ -199,4 +240,4 @@ CardProducts.defaultProps = { CardProducts.propTypes = { color: PropTypes.oneOf(['light', 'dark']), -}; +}; \ No newline at end of file diff --git a/src/components/componetsDashboard/Cards/CardUsers.tsx b/src/components/componetsDashboard/Cards/CardUsers.tsx index 8234778..02ad492 100644 --- a/src/components/componetsDashboard/Cards/CardUsers.tsx +++ b/src/components/componetsDashboard/Cards/CardUsers.tsx @@ -1,20 +1,24 @@ -import React from 'react'; +"use client"; +import { useEffect } from 'react'; import PropTypes from 'prop-types'; // components +import SearchBar from '../SearchBar/SearchBar'; import TableDropdown from '~/components/componetsDashboard/Dropdowns/TableDropdown'; +import useDashboardAdminStore from '~/store/dashboardAdminStore'; + interface UsersInterface { id: number, name: string, picture: string, emailAddress: string, - status: "active" | "inactive", + status: "active" | "blocked", registerDate: string, }; -const USERS:UsersInterface[] = [ +const USERS: UsersInterface[] = [ { id: 1, name: "John", @@ -27,7 +31,7 @@ const USERS:UsersInterface[] = [ id: 2, name: "Doe", picture: "https://media.istockphoto.com/id/1337144146/vector/default-avatar-profile-icon-vector.jpg?s=612x612&w=0&k=20&c=BIbFwuv7FxTWvh5S3vB6bkT0Qv8Vn8N5Ffseq84ClGI=", - status: "inactive", + status: "blocked", emailAddress: "doejohn@hotmail.com", registerDate: "21/07/2023" } @@ -39,6 +43,19 @@ type CardUsersProps = { }; export default function CardUsers({ color }: CardUsersProps) { + + + // GLOBAL STORE: + const { users, updateUsers }: any = useDashboardAdminStore(); + + + // LIFE CYCLES: + useEffect(() => { + updateUsers(USERS); + }, []); + + + // COMPONENT: return ( <>
-
+

Usuarios

+
@@ -130,7 +148,7 @@ export default function CardUsers({ color }: CardUsersProps) {
{USER.id} @@ -140,7 +158,7 @@ export default function CardUsers({ color }: CardUsersProps) { src={USER.picture} className="h-12 w-12 bg-white rounded-full border" alt="..." - >{' '} + > - {USER.status} + {USER.status === "active" ? "activado" : "bloqueado"}
@@ -172,7 +190,7 @@ export default function CardUsers({ color }: CardUsersProps) {