Merge pull request #186 from Actualiza-Tu-Carro/181-agregar-dashboard

181 agregar dashboard

package.json

@@ -11,10 +11,13 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.4.2",
+    "@popperjs/core": "^2.11.8",
     "@types/node": "20.4.5",
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.14",
+    "chart.js": "^4.4.0",
     "encoding": "^0.1.13",
     "eslint": "8.46.0",
     "eslint-config-next": "13.4.12",

src/app/dashboardUser/Maps/page.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import '~/assets/styles/tailwind.css';
+
+// components
+
+import MapExample from "~/components/componetsDashboard/Maps/MapExample";
+
+export default function Maps() {
+  return (
+    <>
+      <div className="flex flex-wrap">
+        <div className="w-full px-4">
+          <div className="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
+            <MapExample />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

src/app/dashboardUser/Settings/page.tsx

@@ -0,0 +1,23 @@
+"use client"
+import React from 'react';
+import '~/assets/styles/tailwind.css';
+
+// components
+
+import CardSettings from "~/components/componetsDashboard/Cards/CardSettings" ;
+import CardProfile from "~/components/componetsDashboard/Cards/CardProfile";
+
+export default function Settings() {
+  return (
+    <>
+      <div className="flex flex-wrap">
+        <div className="w-full lg:w-8/12 px-4">
+          <CardSettings />
+        </div>
+        <div className="w-full lg:w-4/12 px-4">
+          <CardProfile />
+        </div>
+      </div>
+    </>
+  );
+}

src/app/dashboardUser/Tables/page.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+// components
+
+import CardTable from '~/components/componetsDashboard/Cards/CardTable';
+
+export default function Tables() {
+  return (
+    <>
+      <div className="flex flex-wrap mt-4">
+        <div className="w-full mb-12 px-4">
+          <CardTable />
+        </div>
+        <div className="w-full mb-12 px-4">
+          <CardTable color="dark" />
+        </div>
+      </div>
+    </>
+  );
+}

src/app/dashboardUser/layout.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import '~/assets/styles/tailwind.css';
+// import { Switch, Route, Redirect } from 'react-router-dom';
+
+// components
+
+import AdminNavbar from '~/components/componetsDashboard/Navbars/AdminNavbar.js';
+import Sidebar from '~/components/componetsDashboard//Sidebar/Sidebar.js';
+import HeaderStats from '~/components/componetsDashboard//Headers/HeaderStats.js';
+import FooterAdmin from '~/components/componetsDashboard//Footers/FooterAdmin.js';
+
+// views
+
+import Dashboard from '~/app/dashboardUser/page';
+import { type } from 'os';
+// import Maps from 'views/admin/Maps.js';
+// import Settings from 'views/admin/Settings.js';
+// import Tables from 'views/admin/Tables.js';
+type AdminProps = {
+  children: React.ReactNode;
+};
+
+export default function Admin({ children }: AdminProps) {
+  return (
+    <>
+      <Sidebar />
+      <div className="relative md:ml-64 bg-blueGray-100">
+        <AdminNavbar />
+        {/* Header */}
+        <HeaderStats />
+              <div className="px-4 md:px-10 mx-auto w-full -m-24">
+           {children}
+          {/* <Switch>
+            <Route path="/admin/dashboard" exact component={Dashboard} />
+            <Route path="/admin/maps" exact component={Maps} />
+            <Route path="/admin/settings" exact component={Settings} />
+            <Route path="/admin/tables" exact component={Tables} />
+            <Redirect from="/admin" to="/admin/dashboard" />
+          </Switch> */}
+          <FooterAdmin />
+        </div>
+      </div>
+    </>
+  );
+}

src/app/dashboardUser/page.tsx

@@ -1,3 +1,32 @@
-export default function landing() {
-  return <h1>Hola soy DashboardUser</h1>;
+import React from 'react';
+import '~/assets/styles/tailwind.css';
+
+// components
+
+import CardLineChart from "~/components/componetsDashboard/Cards/CardLineChart"
+import CardBarChart from '~/components/componetsDashboard/Cards/CardBarChart';
+import CardPageVisits from '~/components/componetsDashboard/Cards/CardPageVisits';
+import CardSocialTraffic from '~/components/componetsDashboard/Cards/CardSocialTraffic';
+
+export default function Dashboard() {
+  return (
+    <>
+      <div className="flex flex-wrap">
+        <div className="w-full xl:w-8/12 mb-12 xl:mb-0 px-4">
+          <CardLineChart />
+        </div>
+        <div className="w-full xl:w-4/12 px-4">
+          <CardBarChart />
+        </div>
+      </div>
+      <div className="flex flex-wrap mt-4">
+        <div className="w-full xl:w-8/12 mb-12 xl:mb-0 px-4">
+          <CardPageVisits />
+        </div>
+        <div className="w-full xl:w-4/12 px-4">
+          <CardSocialTraffic />
+        </div>
+      </div>
+    </>
+  );
 }

src/app/layout.tsx

@@ -9,6 +9,9 @@ import { ThemeProvider } from 'next-themes';
 const inter = Inter({ subsets: ['latin'] });
 
 
+import '@fortawesome/fontawesome-free/css/all.min.css';
+
+
 export default function RootLayout({
   children,
 }: {