Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

205 - adminDashboard #223

Merged
merged 4 commits into from
Nov 10, 2023
Merged

205 - adminDashboard #223

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8d14ed1
fixing Link components from dashboard
Squiffles Nov 1, 2023
8c3a5bf
dashboarAdmin: user & products tables
Squiffles Nov 3, 2023
9cbfb4f
adminDashboard: sections, searchBar
Squiffles Nov 10, 2023
c40ca3e
dashboardAdmin: merge
Squiffles Nov 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 54 additions & 1 deletion src/app/dashboardAdmin/page.tsx
View file
Open in desktop
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>
</>
);
}
2 changes: 1 addition & 1 deletion src/components/componetsDashboard/Cards/CardBarChart.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ export default function CardBarChart() {
}, []);
return (
<>
<div className="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
<div className="relative flex flex-col min-w-0 break-words bg-white dark:bg-background-dm w-full mb-6 shadow-lg rounded">
<div className="rounded-t mb-0 px-4 py-3 bg-transparent">
<div className="flex flex-wrap items-center">
<div className="relative w-full max-w-full flex-grow flex-1">
Expand Down
137 changes: 137 additions & 0 deletions src/components/componetsDashboard/Cards/CardBrands.tsx
View file
Open in desktop
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 src/components/componetsDashboard/Cards/CardCategories.tsx
View file
Open in desktop
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']),
};
Loading