Responsive++

Qodestackr · Sep 5, 2023 · ced465f · ced465f
1 parent d8dc071
commit ced465f
Show file tree

Hide file tree

Showing 8 changed files with 7,486 additions and 8,366 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -18,6 +18,7 @@ import DashboardHome from "@/pages/dashboard/DashboardHome";
 import Billing from "@/pages/dashboard/screens/billing/Billing";
 import RequestDemo from "./pages/request-demo/RequestDemo";
 import { TableDemo } from "./core/components/table/TableTest";
+import { EmployeePayroll } from "./pages/dashboard/screens/payroll/EmployeePayroll";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -30,10 +31,10 @@ const queryClient = new QueryClient({
       /**
        * This callback will fire any time the query successfully fetches new data or the cache is updated via `setQueryData`.
        */
-      onSuccess: (data: unknown) => {},
+      onSuccess: (data: unknown) => { },
       // onError?: (err: TError) => void;
 
-      onSettled: (data: unknown | undefined) => {},
+      onSettled: (data: unknown | undefined) => { },
       /**
        * Whether errors should be thrown instead of setting the `error` property.
        * If set to `true` or `suspense` is `true`, all errors will be thrown to the error boundary.
@@ -82,7 +83,7 @@ function App() {
           <Route path="events" element={<TableDemo />} />
           <Route path="notice-board" element={<TableDemo />} />
           <Route path="projects" element={<TableDemo />} />
-          <Route path="payroll" element={<TableDemo />} />
+          <Route path="payroll" element={<EmployeePayroll />} />
           <Route path="documents" element={<TableDemo />} />
           <Route path="backups" element={<TableDemo />} />
         </Route>

diff --git a/src/data/payroll/employeePayroll.ts b/src/data/payroll/employeePayroll.ts
@@ -0,0 +1,236 @@
+import type { Payment } from "@/types/interfaces/payroll"
+
+export const employeePayrollData: Payment[] = [
+  {
+    "id": "e1",
+    "name": "John Doe",
+    "position": "Software Engineer",
+    "amount": 0,
+    "status": "pending",
+    "email": "[email protected]"
+  },
+  {
+    "id": "e2",
+    "name": "Jane Smith",
+    "position": "Data Analyst",
+    "amount": 0,
+    "status": "pending",
+    "email": "[email protected]"
+  },
+  {
+    "id": "e3",
+    "name": "Bob Johnson",
+    "position": "Product Manager",
+    "amount": 0,
+    "status": "pending",
+    "email": "[email protected]"
+  },
+  {
+    "id": "e4",
+    "name": "Alice Brown",
+    "position": "UX Designer",
+    "amount": 0,
+    "status": "pending",
+    "email": "[email protected]"
+  },
+  {
+    "id": "e5",
+    "name": "Charlie Wilson",
+    "position": "Quality Assurance",
+    "amount": 0,
+    "status": "pending",
+    "email": "[email protected]"
+  },
+  {
+    "id": "e6",
+    "name": "Eve Adams",
+    "position": "Business Analyst",
+    "amount": 0,
+    "status": "pending",
+    "email": "[email protected]"
+  },
+  {
+    "id": "e7",
+    "name": "David Lee",
+    "position": "Project Manager",
+    "amount": 0,
+    "status": "pending",
+    "email": "[email protected]"
+  },
+  {
+    "id": "e8",
+    "name": "Grace Taylor",
+    "position": "HR Manager",
+    "amount": 0,
+    "status": "pending",
+    "email": "[email protected]"
+  },
+  {
+    "id": "e9",
+    "name": "Frank Martinez",
+    "position": "DevOps Engineer",
+    "amount": 0,
+    "status": "pending",
+    "email": "[email protected]"
+  },
+  {
+    "id": "e10",
+    "name": "Sophia White",
+    "position": "Frontend Developer",
+    "amount": 0,
+    "status": "pending",
+    "email": "[email protected]"
+  },
+  {
+    "id": "e11",
+    "name": "Henry Thomas",
+    "position": "Backend Developer",
+    "amount": 0,
+    "status": "pending",
+    "email": "[email protected]"
+  },
+  {
+    "id": "e12",
+    "name": "Olivia Wilson",
+    "position": "Marketing Specialist",
+    "amount": 0,
+    "status": "pending",
+    "email": "[email protected]"
+  },
+  {
+    "id": "e13",
+    "name": "James Garcia",
+    "position": "Finance Manager",
+    "amount": 0,
+    "status": "pending",
+    "email": "[email protected]"
+  },
+  {
+    "id": "e14",
+    "name": "Linda Rodriguez",
+    "position": "Customer Support",
+    "amount": 0,
+    "status": "pending",
+    "email": "[email protected]"
+  },
+  {
+    "id": "e15",
+    "name": "Robert Smith",
+    "position": "IT Administrator",
+    "amount": 0,
+    "status": "pending",
+    "email": "[email protected]"
+  },
+  {
+    "id": "e16",
+    "name": "Mia Hernandez",
+    "position": "Sales Executive",
+    "amount": 0,
+    "status": "pending",
+    "email": "[email protected]"
+  },
+  {
+    "id": "e17",
+    "name": "Michael Davis",
+    "position": "Legal Counsel",
+    "amount": 0,
+    "status": "pending",
+    "email": "[email protected]"
+  },
+  {
+    "id": "e18",
+    "name": "Emily Clark",
+    "position": "Graphic Designer",
+    "amount": 0,
+    "status": "pending",
+    "email": "[email protected]"
+  },
+  {
+    "id": "e19",
+    "name": "Daniel Brown",
+    "position": "Operations Manager",
+    "amount": 0,
+    "status": "pending",
+    "email": "[email protected]"
+  },
+  {
+    "id": "e20",
+    "name": "Ava Martin",
+    "position": "Researcher",
+    "amount": 0,
+    "status": "pending",
+    "email": "[email protected]"
+  },
+  {
+    "id": "e21",
+    "name": "William Thompson",
+    "position": "Product Designer",
+    "amount": 0,
+    "status": "pending",
+    "email": "[email protected]"
+  },
+  {
+    "id": "e22",
+    "name": "Sofia Anderson",
+    "position": "Content Writer",
+    "amount": 0,
+    "status": "pending",
+    "email": "[email protected]"
+  },
+  {
+    "id": "e23",
+    "name": "Jackson Moore",
+    "position": "Supply Chain Manager",
+    "amount": 0,
+    "status": "pending",
+    "email": "[email protected]"
+  },
+  {
+    "id": "e24",
+    "name": "Ella Garcia",
+    "position": "Quality Control",
+    "amount": 0,
+    "status": "pending",
+    "email": "[email protected]"
+  },
+  {
+    "id": "e25",
+    "name": "Matthew Wilson",
+    "position": "Systems Analyst",
+    "amount": 0,
+    "status": "pending",
+    "email": "[email protected]"
+  },
+  {
+    "id": "e26",
+    "name": "Aria Lopez",
+    "position": "Data Scientist",
+    "amount": 0,
+    "status": "pending",
+    "email": "[email protected]"
+  },
+  {
+    "id": "e27",
+    "name": "Benjamin Allen",
+    "position": "Logistics Coordinator",
+    "amount": 0,
+    "status": "pending",
+    "email": "[email protected]"
+  },
+  {
+    "id": "e28",
+    "name": "Liam Taylor",
+    "position": "Network Engineer",
+    "amount": 0,
+    "status": "pending",
+    "email": "[email protected]"
+  },
+  {
+    "id": "e30",
+    "name": "Christopher Anderson",
+    "position": "Business Development",
+    "amount": 0,
+    "status": "pending",
+    "email": "[email protected]"
+  }
+]
diff --git a/src/layouts/dashboard-layouts/DashboardNav.tsx b/src/layouts/dashboard-layouts/DashboardNav.tsx
@@ -24,19 +24,6 @@ export default function DashboardNav() {
         Plan Activation Required
       </Badge>
 
-      <div className="flex items-center">
-        <div className="relative flex">
-          <span className="absolute inset-y-0 left-0 pl-3 flex items-center">
-            <Search />
-          </span>
-          <input
-            type="text"
-            className="h-10 pl-10 pr-3 border rounded-md focus:ring-1 focus:ring-primary focus:border-primary"
-            placeholder="Search"
-          />
-        </div>
-      </div>
-
       <div className="flex items-center">
         <button className="text-muted-foreground mx-3 hover:text-white">
           {allowNotifications ? <Bell /> : <BellOff />}

diff --git a/src/layouts/dashboard-layouts/sidebar/DashboardSidebar.tsx b/src/layouts/dashboard-layouts/sidebar/DashboardSidebar.tsx
@@ -1,5 +1,6 @@
-import React from "react";
+import React, { useState } from "react";
 import { Link } from "react-router-dom";
+import { useWindowSize } from "@core/hooks";
 
 import {
   HomeIcon,
@@ -36,34 +37,47 @@ const adminItems = [
   //   name: "Admin Action",
   //   icon: AdminActionOnlyIcon,
   // },
-  { route:"/login", name: "Logout", icon: LogOutIcon}
+  { route: "/login", name: "Logout", icon: LogOutIcon }
 ];
 
 export default function DashboardSidebar() {
+  // const { width } = useWindowSize();
+  // const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+
+  // const toggleSidebar = () => {
+  //   setIsSidebarOpen(!isSidebarOpen);
+  // };
+
   return (
-    <aside className="bg-gray-800 text-white w-1/4 min-h-screen p-4">
-      <nav className="max-w-[240px]">
-        <ul>
+    <aside className="bg-gray-800 text-white"> {/*w - full flex md: p-4 overflow-hidden */}
+      <nav>
+        <ul className="overflow-hidden flex flex-row gap-4 justify-between items-end md:items-start md:gap-2 md:flex-col">
           {sidebarItems.map((item, index) => (
             <li key={index} className="mb-4">
               <Link
                 to={item.route}
                 className="flex items-center hover:text-gray-300"
               >
                 {React.createElement(item.icon, { size: 24 })}
-                <span className="hidden lg:inline-block ml-2">{item.name}</span>
+                <span className="hidden lg:inline-block ml-2">
+                  {item.name}
+                </span>
               </Link>
             </li>
           ))}
-          <li className="mt-8 mb-4 text-sm text-gray-400 uppercase">Main</li>
+          <li className="md:mt-8 md:mb-4 text-sm text-gray-400 uppercase hidden md:block">
+            Main
+          </li>
           {adminItems.map((item, index) => (
             <li key={index} className="mb-4">
               <Link
                 to={item.route}
                 className="flex items-center hover:text-gray-300"
               >
                 {React.createElement(item.icon, { size: 24 })}
-                <span className="hidden lg:inline-block ml-2">{item.name}</span>
+                <span className="hidden lg:inline-block ml-2">
+                  {item.name}
+                </span>
               </Link>
             </li>
           ))}