-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #223 from Actualiza-Tu-Carro/205-admindashboard
205 - adminDashboard
- Loading branch information
Showing
17 changed files
with
1,247 additions
and
31 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,56 @@ | ||
| 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"; | ||
| 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 <h1>Hola soy DashboardAdmin</h1>; | ||
| return ( | ||
| <> | ||
| <NavBar /> | ||
| <Navbar /> | ||
| <main className="mt-[109px] md:mt-[60px]"> | ||
| {/* <Sidebar /> */} | ||
| <div className="bg-white dark:bg-background-dm w-full mb-6 shadow-lg rounded"> | ||
| <h6 className="mb-1 px-4 py-3 uppercase text-blueGray-100 text-[2rem] font-semibold">Administración</h6> | ||
| </div> | ||
|
|
||
| {/* USERS */} | ||
| <CardUsers /> | ||
|
|
||
| {/* PRODUCTS */} | ||
| <CardProducts /> | ||
| <CardCategories /> | ||
| <CardBrands /> | ||
|
|
||
| {/* ORDERS */} | ||
| <CardOrders /> | ||
|
|
||
| {/* <CardBarChart /> */} | ||
| SETTINGS: | ||
| {/* SETTINGS */} | ||
| <CardSettings /> | ||
| {/* <CardProfile /> */} | ||
|
|
||
| {/* <CardLineChart /> */} | ||
| {/* <CardPageVisits /> */} | ||
| {/* <CardSocialTraffic /> */} | ||
| {/* <CardStats /> */} | ||
| </main> | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <> | ||
| <div | ||
| className={ | ||
| 'relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded ' + | ||
| (color === 'light' ? 'bg-white' : 'bg-lightBlue-900 text-white') | ||
| } | ||
| > | ||
| <div className="rounded-t mb-0 px-4 py-3 border-0"> | ||
| <div className="flex flex-wrap items-center"> | ||
| <div className="relative flex items-center justify-between w-full px-4 max-w-full flex-grow flex-1"> | ||
| <h3 | ||
| className={ | ||
| 'font-semibold text-lg ' + | ||
| (color === 'light' ? 'text-blueGray-700' : 'text-white') | ||
| } | ||
| > | ||
| Marcas | ||
| </h3> | ||
| <SearchBar section="brand" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="block w-full overflow-x-auto"> | ||
| {/* Projects table */} | ||
| <table className="items-center w-full bg-transparent border-collapse"> | ||
| <thead> | ||
| <tr> | ||
| <th | ||
| className={ | ||
| 'px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left ' + | ||
| (color === 'light' | ||
| ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' | ||
| : 'bg-lightBlue-800 text-lightBlue-300 border-lightBlue-700') | ||
| } | ||
| > | ||
| Id | ||
| </th> | ||
| <th | ||
| className={ | ||
| 'px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left ' + | ||
| (color === 'light' | ||
| ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' | ||
| : 'bg-lightBlue-800 text-lightBlue-300 border-lightBlue-700') | ||
| } | ||
| > | ||
| Nombre | ||
| </th> | ||
| <th | ||
| className={ | ||
| 'px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left ' + | ||
| (color === 'light' | ||
| ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' | ||
| : 'bg-lightBlue-800 text-lightBlue-300 border-lightBlue-700') | ||
| } | ||
| > | ||
| Acciones | ||
| </th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| { | ||
| brands.map((BRAND: any, idx: any) => ( | ||
| <tr key={idx}> | ||
| <th className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"> | ||
| {BRAND.id} | ||
| </th> | ||
| <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left flex items-center"> | ||
| {BRAND.name} | ||
| </td> | ||
| <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-right"> | ||
| <TableDropdown /> | ||
| </td> | ||
| </tr> | ||
| )) | ||
| } | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| CardBrands.defaultProps = { | ||
| color: 'light', | ||
| }; | ||
|
|
||
| CardBrands.propTypes = { | ||
| color: PropTypes.oneOf(['light', 'dark']), | ||
| }; |
137 changes: 137 additions & 0 deletions
137
src/components/componetsDashboard/Cards/CardCategories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <> | ||
| <div | ||
| className={ | ||
| 'relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded ' + | ||
| (color === 'light' ? 'bg-white' : 'bg-lightBlue-900 text-white') | ||
| } | ||
| > | ||
| <div className="rounded-t mb-0 px-4 py-3 border-0"> | ||
| <div className="flex flex-wrap items-center"> | ||
| <div className="relative flex items-center justify-between w-full px-4 max-w-full flex-grow flex-1"> | ||
| <h3 | ||
| className={ | ||
| 'font-semibold text-lg ' + | ||
| (color === 'light' ? 'text-blueGray-700' : 'text-white') | ||
| } | ||
| > | ||
| Categorías | ||
| </h3> | ||
| <SearchBar section="category" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="block w-full overflow-x-auto"> | ||
| {/* Projects table */} | ||
| <table className="items-center w-full bg-transparent border-collapse"> | ||
| <thead> | ||
| <tr> | ||
| <th | ||
| className={ | ||
| 'px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left ' + | ||
| (color === 'light' | ||
| ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' | ||
| : 'bg-lightBlue-800 text-lightBlue-300 border-lightBlue-700') | ||
| } | ||
| > | ||
| Id | ||
| </th> | ||
| <th | ||
| className={ | ||
| 'px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left ' + | ||
| (color === 'light' | ||
| ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' | ||
| : 'bg-lightBlue-800 text-lightBlue-300 border-lightBlue-700') | ||
| } | ||
| > | ||
| Nombre | ||
| </th> | ||
| <th | ||
| className={ | ||
| 'px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left ' + | ||
| (color === 'light' | ||
| ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' | ||
| : 'bg-lightBlue-800 text-lightBlue-300 border-lightBlue-700') | ||
| } | ||
| > | ||
| Acciones | ||
| </th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| { | ||
| categories.map((CATEGORY: any, idx: any) => ( | ||
| <tr key={idx}> | ||
| <th className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"> | ||
| {CATEGORY.id} | ||
| </th> | ||
| <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left flex items-center"> | ||
| {CATEGORY.name} | ||
| </td> | ||
| <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-right"> | ||
| <TableDropdown /> | ||
| </td> | ||
| </tr> | ||
| )) | ||
| } | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| CardCategories.defaultProps = { | ||
| color: 'light', | ||
| }; | ||
|
|
||
| CardCategories.propTypes = { | ||
| color: PropTypes.oneOf(['light', 'dark']), | ||
| }; |
Oops, something went wrong.