UI/integrations page

app/(dashboard)/dashboard/user/[userId]/page.tsx → app/(dashboard)/dashboard/integration/[appId]/page.tsx

@@ -5,8 +5,8 @@ import React from "react";
 
 export default function Page() {
   const breadcrumbItems = [
-    { title: "User", link: "/dashboard/user" },
-    { title: "Create", link: "/dashboard/user/create" },
+    { title: "Integration", link: "/dashboard/integration" },
+    { title: "Create", link: "/dashboard/integration/create" },
   ];
   return (
     <ScrollArea className="h-full">

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

@@ -0,0 +1,15 @@
+import BreadCrumb from "@/components/breadcrumb";
+import { IntegrationClient } from "@/components/tables/user-tables/client";
+import { integrations } from "@/constants/data";
+
+const breadcrumbItems = [{ title: "Integrations", link: "/dashboard/user" }];
+export default function page() {
+  return (
+    <>
+      <div className="flex-1 space-y-4  p-4 md:p-8 pt-6">
+        <BreadCrumb items={breadcrumbItems} />
+        <IntegrationClient data={integrations} />
+      </div>
+    </>
+  );
+}

components/tables/user-tables/cell-action.tsx

@@ -8,13 +8,13 @@ import {
   DropdownMenuLabel,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { User } from "@/constants/data";
+import { Integration } from "@/constants/data";
 import { Edit, MoreHorizontal, Trash } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
 interface CellActionProps {
-  data: User;
+  data: Integration;
 }
 
 export const CellAction: React.FC<CellActionProps> = ({ data }) => {

components/tables/user-tables/client.tsx

@@ -3,34 +3,51 @@ import { Button } from "@/components/ui/button";
 import { DataTable } from "@/components/ui/data-table";
 import { Heading } from "@/components/ui/heading";
 import { Separator } from "@/components/ui/separator";
-import { User } from "@/constants/data";
+import { Integration } from "@/constants/data";
 import { Plus } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { columns } from "./columns";
+import { integrationColumns } from "./columns";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { ProductForm } from "@/components/forms/product-form";
 
-interface ProductsClientProps {
-  data: User[];
+interface IntegrationsList {
+  data: Integration[];
 }
 
-export const UserClient: React.FC<ProductsClientProps> = ({ data }) => {
+export const IntegrationClient: React.FC<IntegrationsList> = ({ data }) => {
   const router = useRouter();
 
   return (
     <>
       <div className="flex items-start justify-between">
-        <Heading
-          title={`Users (${data.length})`}
-          description="Manage users (Client side table functionalities.)"
-        />
-        <Button
+        <Heading title={`Integrations (${data.length})`} description="Manage Apps and integrations" />
+        {/* <Button
           className="text-xs md:text-sm"
           onClick={() => router.push(`/dashboard/user/new`)}
         >
-          <Plus className="mr-2 h-4 w-4" /> Add New
-        </Button>
+        </Button> */}
+        <Dialog>
+          <DialogTrigger>
+            <Plus className="mr-2 h-4 w-4" /> Add New
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Add new Integration</DialogTitle>
+              <DialogDescription>
+                <ProductForm
+                  categories={[
+                    { _id: "shirts", name: "shirts" },
+                    { _id: "pants", name: "pants" },
+                  ]}
+                  initialData={null}
+                />
+              </DialogDescription>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
       </div>
       <Separator />
-      <DataTable searchKey="name" columns={columns} data={data} />
+      <DataTable searchKey="name" columns={integrationColumns} data={data} />
     </>
   );
 };

components/tables/user-tables/columns.tsx

@@ -1,47 +1,62 @@
 "use client";
 import { ColumnDef } from "@tanstack/react-table";
 import { CellAction } from "./cell-action";
-import { User } from "@/constants/data";
+import { Integration } from "@/constants/data";
 import { Checkbox } from "@/components/ui/checkbox";
 
-export const columns: ColumnDef<User>[] = [
+export const integrationColumns: ColumnDef<Integration>[] = [
   {
     id: "select",
-    header: ({ table }) => (
-      <Checkbox
-        checked={table.getIsAllPageRowsSelected()}
-        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-        aria-label="Select all"
-      />
-    ),
-    cell: ({ row }) => (
-      <Checkbox
-        checked={row.getIsSelected()}
-        onCheckedChange={(value) => row.toggleSelected(!!value)}
-        aria-label="Select row"
-      />
-    ),
+    header: "Select",
+    cell: ({ row }) => <Checkbox checked={row.getIsSelected()} onCheckedChange={(value) => row.toggleSelected(!!value)} aria-label="Select row" />,
     enableSorting: false,
     enableHiding: false,
   },
   {
     accessorKey: "name",
-    header: "NAME",
+    header: "Name",
   },
   {
     accessorKey: "company",
-    header: "COMPANY",
+    header: "Company",
   },
   {
-    accessorKey: "role",
-    header: "ROLE",
+    accessorKey: "verified",
+    header: "Verified",
+    cell: ({ row }) => <Checkbox checked={row.original.verified} aria-label="Verified status" />,
   },
   {
     accessorKey: "status",
-    header: "STATUS",
+    header: "Status",
+  },
+  {
+    accessorKey: "callbackUrl",
+    header: "Callback URL",
+  },
+  {
+    accessorKey: "scope",
+    header: "Scope",
+    cell: ({ row }) => row.original.scope.join(", "),
+  },
+  {
+    accessorKey: "lastSync",
+    header: "Last Sync",
+    cell: ({ row }) => row.original.lastSync,
+  },
+  {
+    accessorKey: "createdAt",
+    header: "Created At",
+    cell: ({ row }) => row.original.createdAt,
+  },
+  {
+    accessorKey: "updatedAt",
+    header: "Updated At",
+    cell: ({ row }) => row.original.updatedAt,
   },
   {
     id: "actions",
+    header: "Actions",
     cell: ({ row }) => <CellAction data={row.original} />,
   },
 ];
+