dynamic form

app/(dashboard)/dashboard/employee/[employeeId]/page.tsx

@@ -0,0 +1,23 @@
+import BreadCrumb from "@/components/breadcrumb";
+import { ProductForm } from "@/components/forms/product-form";
+import React from "react";
+
+export default function Page() {
+  const breadcrumbItems = [
+    { title: "Employee", link: "/dashboard/employee" },
+    { title: "Create", link: "/dashboard/employee/create" },
+  ];
+  return (
+    <div className="flex-1 space-y-4 p-8 pt-6">
+      <BreadCrumb items={breadcrumbItems} />
+      <ProductForm
+        categories={[
+          { _id: "shirts", name: "shirts" },
+          { _id: "pants", name: "pants" },
+        ]}
+        initialData={null}
+        key={null}
+      />
+    </div>
+  );
+}

app/(dashboard)/dashboard/employee/page.tsx

@@ -1,17 +1,65 @@
 import BreadCrumb from "@/components/breadcrumb";
-import { EmployeeClient } from "@/components/tables/employee-tables/client";
+import { columns } from "@/components/tables/employee-tables/columns";
+import { EmployeeTable } from "@/components/tables/employee-tables/employee-table";
+import { buttonVariants } from "@/components/ui/button";
+import { Heading } from "@/components/ui/heading";
+import { Separator } from "@/components/ui/separator";
 import { Employee } from "@/constants/data";
+import { cn } from "@/lib/utils";
+import { Plus } from "lucide-react";
+import Link from "next/link";
 
 const breadcrumbItems = [{ title: "User", link: "/dashboard/user" }];
-export default async function page() {
-  const res = await fetch("https://api.slingacademy.com/v1/sample-data/users");
+
+type paramsProps = {
+  searchParams: {
+    [key: string]: string | string[] | undefined;
+  };
+};
+
+export default async function page({ searchParams }: paramsProps) {
+  const page = Number(searchParams.page) || 1;
+  const pageLimit = Number(searchParams.limit) || 10;
+  const country = searchParams.search || null;
+  const offset = (page - 1) * pageLimit;
+
+  const res = await fetch(
+    `https://api.slingacademy.com/v1/sample-data/users?offset=${offset}&limit=${pageLimit}` +
+      (country ? `&search=${country}` : ""),
+  );
   const employeeRes = await res.json();
+  console.log("employeeRes", employeeRes);
+  const totalUsers = employeeRes.total_users; //1000
+  const pageCount = Math.ceil(totalUsers / pageLimit);
   const employee: Employee[] = employeeRes.users;
+  console.log("employee", employee);
   return (
     <>
       <div className="flex-1 space-y-4  p-4 md:p-8 pt-6">
         <BreadCrumb items={breadcrumbItems} />
-        <EmployeeClient data={employee} />
+
+        <div className="flex items-start justify-between">
+          <Heading
+            title={`Employee (${totalUsers})`}
+            description="Manage users for your business"
+          />
+
+          <Link
+            href={"/dashboard/employee/new"}
+            className={cn(buttonVariants({ variant: "default" }))}
+          >
+            <Plus className="mr-2 h-4 w-4" /> Add New
+          </Link>
+        </div>
+        <Separator />
+        <EmployeeTable
+          searchKey="country"
+          pageNo={page}
+          columns={columns}
+          totalUsers={totalUsers}
+          data={employee}
+          pageCount={pageCount}
+        />
       </div>
     </>
   );

app/(dashboard)/dashboard/layout.tsx

@@ -17,7 +17,7 @@ export default function DashboardLayout({
       <Header />
       <div className="flex h-screen overflow-hidden">
         <Sidebar className="w-1/6 hidden md:block" />
-        <main className="flex-1 pt-16 overflow-x-hidden overflow-y-scroll ">
+        <main className="flex-1 pt-16 overflow-x-hidden overflow-y-auto ">
           {children}
         </main>
       </div>

app/(dashboard)/dashboard/page.tsx

@@ -156,6 +156,27 @@ export default function page() {
                 </CardContent>
               </Card>
             </div>
+            <div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-7">
+              <Card className="col-span-4">
+                <CardHeader>
+                  <CardTitle>Overview</CardTitle>
+                </CardHeader>
+                <CardContent className="pl-2">
+                  <Overview />
+                </CardContent>
+              </Card>
+              <Card className="col-span-4 md:col-span-3">
+                <CardHeader>
+                  <CardTitle>Recent Sales</CardTitle>
+                  <CardDescription>
+                    You made 265 sales this month.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <RecentSales />
+                </CardContent>
+              </Card>
+            </div>
           </TabsContent>
         </Tabs>
       </div>

app/layout.tsx

@@ -21,7 +21,7 @@ export default async function RootLayout({
   const session = await getServerSession();
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={inter.className}>
+      <body className={`${inter.className} overflow-hidden`}>
         <Providers session={session}>
           <Toaster />
           {children}