test new layout

src/app/[orgId]/settings/sites/SitesDataTable.tsx

@@ -2,149 +2,29 @@
 
 import {
     ColumnDef,
-    flexRender,
-    getCoreRowModel,
-    useReactTable,
-    getPaginationRowModel,
-    SortingState,
-    getSortedRowModel,
-    ColumnFiltersState,
-    getFilteredRowModel
 } from "@tanstack/react-table";
-
-import {
-    Table,
-    TableBody,
-    TableCell,
-    TableContainer,
-    TableHead,
-    TableHeader,
-    TableRow
-} from "@/components/ui/table";
-import { Button } from "@app/components/ui/button";
-import { useState } from "react";
-import { Input } from "@app/components/ui/input";
-import { DataTablePagination } from "@app/components/DataTablePagination";
-import { Plus, Search } from "lucide-react";
+import { DataTable } from "@app/components/ui/data-table";
 
 interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
-    addSite?: () => void;
+    createSite?: () => void;
 }
 
 export function SitesDataTable<TData, TValue>({
-    addSite,
     columns,
-    data
+    data,
+    createSite
 }: DataTableProps<TData, TValue>) {
-    const [sorting, setSorting] = useState<SortingState>([]);
-    const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-    const [globalFilter, setGlobalFilter] = useState<any>([]);
-
-    const table = useReactTable({
-        data,
-        columns,
-        getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        onSortingChange: setSorting,
-        getSortedRowModel: getSortedRowModel(),
-        onColumnFiltersChange: setColumnFilters,
-        getFilteredRowModel: getFilteredRowModel(),
-        onGlobalFilterChange: setGlobalFilter,
-        initialState: {
-            pagination: {
-                pageSize: 20,
-                pageIndex: 0
-            }
-        },
-        state: {
-            sorting,
-            columnFilters,
-            globalFilter
-        }
-    });
-
     return (
-        <div>
-            <div className="flex items-center justify-between pb-4">
-                <div className="flex items-center max-w-sm mr-2 w-full relative">
-                    <Input
-                        placeholder="Search sites"
-                        value={globalFilter ?? ""}
-                        onChange={(e) =>
-                            table.setGlobalFilter(String(e.target.value))
-                        }
-                        className="w-full pl-8"
-                    />
-                    <Search className="h-4 w-4 absolute left-2 top-1/2 transform -translate-y-1/2" />
-                </div>
-                <Button
-                    onClick={() => {
-                        if (addSite) {
-                            addSite();
-                        }
-                    }}
-                >
-                    <Plus className="mr-2 h-4 w-4" /> Add Site
-                </Button>
-            </div>
-            <TableContainer>
-                <Table>
-                    <TableHeader>
-                        {table.getHeaderGroups().map((headerGroup) => (
-                            <TableRow key={headerGroup.id}>
-                                {headerGroup.headers.map((header) => {
-                                    return (
-                                        <TableHead key={header.id}>
-                                            {header.isPlaceholder
-                                                ? null
-                                                : flexRender(
-                                                      header.column.columnDef
-                                                          .header,
-                                                      header.getContext()
-                                                  )}
-                                        </TableHead>
-                                    );
-                                })}
-                            </TableRow>
-                        ))}
-                    </TableHeader>
-                    <TableBody>
-                        {table.getRowModel().rows?.length ? (
-                            table.getRowModel().rows.map((row) => (
-                                <TableRow
-                                    key={row.id}
-                                    data-state={
-                                        row.getIsSelected() && "selected"
-                                    }
-                                >
-                                    {row.getVisibleCells().map((cell) => (
-                                        <TableCell key={cell.id}>
-                                            {flexRender(
-                                                cell.column.columnDef.cell,
-                                                cell.getContext()
-                                            )}
-                                        </TableCell>
-                                    ))}
-                                </TableRow>
-                            ))
-                        ) : (
-                            <TableRow>
-                                <TableCell
-                                    colSpan={columns.length}
-                                    className="h-24 text-center"
-                                >
-                                    No sites. Create one to get started.
-                                </TableCell>
-                            </TableRow>
-                        )}
-                    </TableBody>
-                </Table>
-            </TableContainer>
-            <div className="mt-4">
-                <DataTablePagination table={table} />
-            </div>
-        </div>
+        <DataTable
+            columns={columns}
+            data={data}
+            title="Sites"
+            searchPlaceholder="Search sites..."
+            searchColumn="name"
+            onAdd={createSite}
+            addButtonText="Add Site"
+        />
     );
 }

src/app/[orgId]/settings/sites/SitesTable.tsx

@@ -47,7 +47,6 @@ type SitesTableProps = {
 export default function SitesTable({ sites, orgId }: SitesTableProps) {
     const router = useRouter();
 
-    const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
     const [selectedSite, setSelectedSite] = useState<SiteRow | null>(null);
     const [rows, setRows] = useState<SiteRow[]>(sites);
@@ -281,58 +280,20 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
 
     return (
         <>
-            <CreateSiteFormModal
-                open={isCreateModalOpen}
-                setOpen={setIsCreateModalOpen}
-                onCreate={(val) => {
-                    setRows([val, ...rows]);
-                }}
-                orgId={orgId}
-            />
-
             {selectedSite && (
                 <ConfirmDeleteDialog
                     open={isDeleteModalOpen}
-                    setOpen={(val) => {
-                        setIsDeleteModalOpen(val);
-                        setSelectedSite(null);
-                    }}
-                    dialog={
-                        <div className="space-y-4">
-                            <p>
-                                Are you sure you want to remove the site{" "}
-                                <b>{selectedSite?.name || selectedSite?.id}</b>{" "}
-                                from the organization?
-                            </p>
-
-                            <p>
-                                Once removed, the site will no longer be
-                                accessible.{" "}
-                                <b>
-                                    All resources and targets associated with
-                                    the site will also be removed.
-                                </b>
-                            </p>
-
-                            <p>
-                                To confirm, please type the name of the site
-                                below.
-                            </p>
-                        </div>
-                    }
-                    buttonText="Confirm Delete Site"
-                    onConfirm={async () => deleteSite(selectedSite!.id)}
-                    string={selectedSite.name}
+                    setOpen={setIsDeleteModalOpen}
+                    onConfirm={() => deleteSite(selectedSite.id)}
                     title="Delete Site"
+                    description="Are you sure you want to delete this site? This action cannot be undone."
                 />
             )}
 
             <SitesDataTable
                 columns={columns}
                 data={rows}
-                addSite={() => {
-                    router.push(`/${orgId}/settings/sites/create`);
-                }}
+                createSite={() => router.push(`/${orgId}/settings/sites/create`)}
             />
         </>
     );

src/app/[orgId]/settings/sites/[niceId]/layout.tsx

@@ -4,7 +4,7 @@ import { GetSiteResponse } from "@server/routers/site";
 import { AxiosResponse } from "axios";
 import { redirect } from "next/navigation";
 import { authCookieHeader } from "@app/lib/api/cookies";
-import { SidebarSettings } from "@app/components/SidebarSettings";
+import { HorizontalTabs } from "@app/components/HorizontalTabs";
 import Link from "next/link";
 import { ArrowLeft } from "lucide-react";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
@@ -38,7 +38,7 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
         redirect(`/${params.orgId}/settings/sites`);
     }
 
-    const sidebarNavItems = [
+    const navItems = [
         {
             title: "General",
             href: "/{orgId}/settings/sites/{niceId}/general"
@@ -46,32 +46,13 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
     ];
 
     return (
-        <>
-            <div className="mb-4 flex-row">
-                <Breadcrumb>
-                    <BreadcrumbList>
-                        <BreadcrumbItem>
-                            <Link href="../">Sites</Link>
-                        </BreadcrumbItem>
-                        <BreadcrumbSeparator />
-                        <BreadcrumbItem>
-                            <BreadcrumbPage>{site.name}</BreadcrumbPage>
-                        </BreadcrumbItem>
-                    </BreadcrumbList>
-                </Breadcrumb>
-            </div>
-
-            <SettingsSectionTitle
-                title={`${site?.name} Settings`}
-                description="Configure the settings on your site"
-            />
-
-            <SiteProvider site={site}>
-                <SidebarSettings sidebarNavItems={sidebarNavItems}>
-                    <SiteInfoCard />
+        <SiteProvider site={site}>
+            <div className="space-y-6">
+                <SiteInfoCard />
+                <HorizontalTabs items={navItems}>
                     {children}
-                </SidebarSettings>
-            </SiteProvider>
-        </>
+                </HorizontalTabs>
+            </div>
+        </SiteProvider>
     );
 }

src/app/[orgId]/settings/sites/page.tsx

@@ -51,7 +51,7 @@ export default async function SitesPage(props: SitesPageProps) {
 
     return (
         <>
-            <SitesSplashCard />
+            {/* <SitesSplashCard /> */}
 
             <SettingsSectionTitle
                 title="Manage Sites"