doo-boilerplate 0.1.15 → 0.2.0

package/dist/index.js

@@ -2,14 +2,13 @@
 
 // src/cli.ts
 import * as p3 from "@clack/prompts";
-import pc3 from "picocolors";
-import path5 from "path";
-import fse4 from "fs-extra";
+import pc2 from "picocolors";
+import path4 from "path";
+import fse3 from "fs-extra";
 import { Command } from "commander";
 
 // src/prompts.ts
 import * as p from "@clack/prompts";
-import pc from "picocolors";
 
 // src/utils/validate.ts
 import validatePkgName from "validate-npm-package-name";
@@ -27,14 +26,10 @@ function validateProjectName(name) {
 // src/prompts.ts
 async function collectOptions(defaults, isTTY2 = true) {
   if (!isTTY2) {
-    const valid = ["editor", "charts", "dnd", "sentry"];
     const validPMs2 = ["pnpm", "bun", "yarn"];
     const projectName2 = defaults.projectName ?? "my-portal";
-    const framework2 = defaults.framework === "nextjs" || defaults.framework === "vite" ? defaults.framework : "vite";
     const packageManager2 = validPMs2.includes(defaults.pm) ? defaults.pm : "pnpm";
-    const features2 = (defaults.features ?? []).filter((f) => valid.includes(f));
-    const auth2 = defaults.auth === "jwt" || defaults.auth === "oauth" || defaults.auth === "none" ? defaults.auth : "jwt";
-    return { projectName: projectName2, framework: framework2, packageManager: packageManager2, features: features2, auth: auth2 };
+    return { projectName: projectName2, packageManager: packageManager2 };
   }
   let projectName;
   if (defaults.projectName) {
@@ -57,23 +52,6 @@ async function collectOptions(defaults, isTTY2 = true) {
     }
     projectName = answer;
   }
-  let framework;
-  if (defaults.framework === "nextjs" || defaults.framework === "vite") {
-    framework = defaults.framework;
-  } else {
-    const answer = await p.select({
-      message: "Framework",
-      options: [
-        { value: "vite", label: "Vite 8", hint: "SPA \xB7 faster builds \xB7 TanStack Router" },
-        { value: "nextjs", label: "Next.js 16", hint: "SSR \xB7 App Router \xB7 i18n-ready" }
-      ]
-    });
-    if (p.isCancel(answer)) {
-      p.cancel("Operation cancelled.");
-      process.exit(0);
-    }
-    framework = answer;
-  }
   const validPMs = ["pnpm", "bun", "yarn"];
   let packageManager;
   if (validPMs.includes(defaults.pm)) {
@@ -93,71 +71,17 @@ async function collectOptions(defaults, isTTY2 = true) {
     }
     packageManager = answer;
   }
-  let features;
-  if (defaults.features && defaults.features.length > 0) {
-    const valid = ["editor", "charts", "dnd", "sentry"];
-    features = defaults.features.filter((f) => valid.includes(f));
-  } else {
-    const answer = await p.multiselect({
-      message: "Features " + pc.dim("(space to toggle, enter to confirm)"),
-      options: [
-        { value: "editor", label: "Rich text editor", hint: "Tiptap" },
-        { value: "charts", label: "Charts", hint: "ECharts" },
-        { value: "dnd", label: "Drag & drop", hint: "@dnd-kit" },
-        { value: "sentry", label: "Error tracking", hint: "Sentry" }
-      ],
-      required: false
-    });
-    if (p.isCancel(answer)) {
-      p.cancel("Operation cancelled.");
-      process.exit(0);
-    }
-    features = answer;
-  }
-  let auth;
-  if (defaults.auth === "jwt" || defaults.auth === "oauth" || defaults.auth === "none") {
-    auth = defaults.auth;
-  } else {
-    const answer = await p.select({
-      message: "Auth pattern",
-      options: [
-        { value: "jwt", label: "JWT tokens", hint: "access + refresh token flow" },
-        { value: "oauth", label: "OAuth", hint: "placeholder, configure later" },
-        { value: "none", label: "None", hint: "skip auth setup" }
-      ]
-    });
-    if (p.isCancel(answer)) {
-      p.cancel("Operation cancelled.");
-      process.exit(0);
-    }
-    auth = answer;
-  }
-  return { projectName, framework, packageManager, features, auth };
+  return { projectName, packageManager };
 }
 
 // src/scaffold.ts
-import fse3 from "fs-extra";
-import path3 from "path";
+import fse2 from "fs-extra";
+import path2 from "path";
 import { fileURLToPath } from "url";
 
-// src/utils/package-json.ts
+// src/utils/template.ts
 import fse from "fs-extra";
 import path from "path";
-async function mergeDepsIntoPackageJson(destDir, deps) {
-  const pkgPath = path.join(destDir, "package.json");
-  const pkg = await fse.readJson(pkgPath);
-  if (deps.dependencies) {
-    pkg.dependencies = { ...pkg.dependencies, ...deps.dependencies };
-  }
-  if (deps.devDependencies) {
-    pkg.devDependencies = { ...pkg.devDependencies, ...deps.devDependencies };
-  }
-  await fse.writeJson(pkgPath, pkg, { spaces: 2 });
-}
-
-// src/utils/template.ts
-import fse2 from "fs-extra";
-import path2 from "path";
 var TEXT_EXTENSIONS = [
   ".ts",
   ".tsx",
@@ -173,23 +97,23 @@ var TEXT_EXTENSIONS = [
   ".txt"
 ];
 async function getAllTextFiles(dir) {
-  const entries = await fse2.readdir(dir, { withFileTypes: true, recursive: true });
+  const entries = await fse.readdir(dir, { withFileTypes: true, recursive: true });
   return entries.filter((e) => {
     if (!e.isFile()) return false;
     if (!TEXT_EXTENSIONS.some((ext) => e.name.endsWith(ext))) return false;
     const parent = e.parentPath ?? e.path ?? dir;
-    const fullPath = path2.join(parent, e.name);
-    return !fullPath.includes("node_modules") && !fullPath.includes(`${path2.sep}optional${path2.sep}`);
+    const fullPath = path.join(parent, e.name);
+    return !fullPath.includes("node_modules") && !fullPath.includes(`${path.sep}optional${path.sep}`);
   }).map((e) => {
     const parent = e.parentPath ?? e.path ?? dir;
-    return path2.join(parent, e.name);
+    return path.join(parent, e.name);
   });
 }
 async function replaceInFiles(dir, replacements) {
   const files = await getAllTextFiles(dir);
   await Promise.all(
     files.map(async (file) => {
-      let content = await fse2.readFile(file, "utf-8");
+      let content = await fse.readFile(file, "utf-8");
       let changed = false;
       for (const [from, to] of Object.entries(replacements)) {
         if (content.includes(from)) {
@@ -198,14 +122,14 @@ async function replaceInFiles(dir, replacements) {
         }
       }
       if (changed) {
-        await fse2.writeFile(file, content, "utf-8");
+        await fse.writeFile(file, content, "utf-8");
       }
     })
   );
 }
 
 // src/scaffold.ts
-var __dirname2 = path3.dirname(fileURLToPath(import.meta.url));
+var __dirname2 = path2.dirname(fileURLToPath(import.meta.url));
 var FILE_RENAMES = [
   ["_gitignore", ".gitignore"],
   ["_env.example", ".env.example"],
@@ -213,41 +137,24 @@ var FILE_RENAMES = [
   ["_prettierignore", ".prettierignore"]
 ];
 async function scaffold(options, destDir) {
-  const templateName = options.framework === "nextjs" ? "template-nextjs" : "template-vite";
-  const templateSymlink = path3.join(__dirname2, "..", "templates", templateName);
-  const templateDir = await fse3.realpath(templateSymlink);
-  await fse3.copy(templateDir, destDir, {
+  const templateSymlink = path2.join(__dirname2, "..", "templates", "template-vite");
+  const templateDir = await fse2.realpath(templateSymlink);
+  await fse2.copy(templateDir, destDir, {
     overwrite: true,
-    filter: (src) => !src.includes(`${path3.sep}optional${path3.sep}`) && src !== path3.join(templateDir, "optional")
+    filter: (src) => !src.includes(`${path2.sep}optional${path2.sep}`) && src !== path2.join(templateDir, "optional")
   });
   for (const [from, to] of FILE_RENAMES) {
-    const fromPath = path3.join(destDir, from);
-    const toPath = path3.join(destDir, to);
-    if (await fse3.pathExists(fromPath)) {
-      await fse3.move(fromPath, toPath);
+    const fromPath = path2.join(destDir, from);
+    const toPath = path2.join(destDir, to);
+    if (await fse2.pathExists(fromPath)) {
+      await fse2.move(fromPath, toPath);
     }
   }
-  for (const feature of options.features) {
-    await applyFeature(feature, templateDir, destDir);
-  }
   await replaceInFiles(destDir, {
     "{{PROJECT_NAME}}": options.projectName,
     "{{YEAR}}": (/* @__PURE__ */ new Date()).getFullYear().toString()
   });
 }
-async function applyFeature(feature, templateDir, destDir) {
-  const featureDir = path3.join(templateDir, "optional", feature);
-  if (!await fse3.pathExists(featureDir)) return;
-  const filesDir = path3.join(featureDir, "files");
-  if (await fse3.pathExists(filesDir)) {
-    await fse3.copy(filesDir, path3.join(destDir, "src"), { overwrite: true });
-  }
-  const depsFile = path3.join(featureDir, "deps.json");
-  if (await fse3.pathExists(depsFile)) {
-    const deps = await fse3.readJson(depsFile);
-    await mergeDepsIntoPackageJson(destDir, deps);
-  }
-}
 
 // src/git.ts
 import { execa } from "execa";
@@ -261,20 +168,20 @@ async function initGit(destDir) {
 
 // src/post-setup.ts
 import * as p2 from "@clack/prompts";
-import pc2 from "picocolors";
-import path4 from "path";
+import pc from "picocolors";
+import path3 from "path";
 function printSuccess(options, destDir, isTTY2 = true) {
-  const relPath = path4.relative(process.cwd(), destDir);
+  const relPath = path3.relative(process.cwd(), destDir);
   const cdTarget = relPath || options.projectName;
   const pm = options.packageManager;
-  const runCmd = `${pm} ${pm === "npm" ? "run dev" : "dev"}`;
-  const msg = `${pc2.green("\u2713")} Project created! Get started:
+  const runCmd = `${pm} dev`;
+  const msg = `${pc.green("\u2713")} Project created! Get started:
 
-  ${pc2.cyan(`cd ${cdTarget}`)}
-  ${pc2.cyan(`${pm} install`)}
-  ${pc2.cyan(runCmd)}
+  ${pc.cyan(`cd ${cdTarget}`)}
+  ${pc.cyan(`${pm} install`)}
+  ${pc.cyan(runCmd)}
 
-  ${pc2.dim("Copy .env.example \u2192 .env and fill in your API URLs.")}`;
+  ${pc.dim("Copy .env.example \u2192 .env and fill in your API URLs.")}`;
   if (isTTY2) {
     p2.outro(msg);
   } else {
@@ -288,34 +195,31 @@ function log(msg) {
   console.log(msg);
 }
 async function run() {
-  const program = new Command().name("create-pila-app").description("Scaffold a Pila portal frontend project").version("0.1.0").argument("[project-name]", "Name of the project").option("--framework <framework>", "nextjs or vite").option("--pm <pm>", "Package manager: pnpm, bun, or yarn").option("--features <features>", "Comma-separated: editor,charts,dnd,sentry").option("--auth <auth>", "jwt, oauth, or none").option("--no-git", "Skip git initialization").parse(process.argv);
+  const program = new Command().name("create-pila-app").description("Scaffold a Pila portal frontend project").version("0.1.0").argument("[project-name]", "Name of the project").option("--pm <pm>", "Package manager: pnpm, bun, or yarn").option("--no-git", "Skip git initialization").parse(process.argv);
   log("");
   if (isTTY) {
-    p3.intro(pc3.bgCyan(pc3.black(" create-pila-app ")));
+    p3.intro(pc2.bgCyan(pc2.black(" create-pila-app ")));
   } else {
-    log(pc3.bgCyan(pc3.black(" create-pila-app ")));
+    log(pc2.bgCyan(pc2.black(" create-pila-app ")));
   }
   const args = program.args;
   const opts = program.opts();
   const options = await collectOptions({
     projectName: args[0],
-    framework: opts.framework,
-    pm: opts.pm,
-    features: opts.features?.split(","),
-    auth: opts.auth
+    pm: opts.pm
   }, isTTY);
-  const destDir = path5.resolve(process.cwd(), options.projectName);
-  if (await fse4.pathExists(destDir)) {
-    const files = await fse4.readdir(destDir);
+  const destDir = path4.resolve(process.cwd(), options.projectName);
+  if (await fse3.pathExists(destDir)) {
+    const files = await fse3.readdir(destDir);
     if (files.length > 0) {
       const msg = `Directory "${options.projectName}" already exists and is not empty.`;
       if (isTTY) p3.cancel(msg);
-      else log(pc3.red("\u2716 " + msg));
+      else log(pc2.red("\u2716 " + msg));
       process.exit(1);
     }
   }
-  await fse4.ensureDir(destDir);
-  log(pc3.cyan("\u2192 Scaffolding project..."));
+  await fse3.ensureDir(destDir);
+  log(pc2.cyan("\u2192 Scaffolding project..."));
   if (isTTY) {
     const scaffoldSpinner = p3.spinner();
     scaffoldSpinner.start("Scaffolding project...");
@@ -328,7 +232,7 @@ async function run() {
     }
   } else {
     await scaffold(options, destDir);
-    log(pc3.green("\u2713 Project scaffolded"));
+    log(pc2.green("\u2713 Project scaffolded"));
   }
   if (opts.git !== false) {
     try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doo-boilerplate",
-  "version": "0.1.15",
+  "version": "0.2.0",
   "description": "CLI to scaffold Pila portal frontend projects",
   "type": "module",
   "bin": {

package/templates/template-vite/_env.example

@@ -6,3 +6,11 @@ VITE_API_AUTH_URL=http://localhost:8001
 VITE_APP_URL=http://localhost:3000
 VITE_APP_NAME={{PROJECT_NAME}}
 VITE_MODE=development
+
+# Sentry Error Tracking (optional)
+VITE_SENTRY_DSN=
+
+# Sentry Source Maps Upload (build-time only, optional)
+SENTRY_AUTH_TOKEN=
+SENTRY_ORG=
+SENTRY_PROJECT=

package/templates/template-vite/package.json

@@ -19,6 +19,7 @@
     "docker:scan": "bash scripts/trivy-scan.sh"
   },
   "dependencies": {
+    "@sentry/react": "^9.0.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "i18next": "^25.2.1",
@@ -56,7 +57,8 @@
     "@radix-ui/react-switch": "^1.1.3",
     "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-tooltip": "^1.1.8",
-    "cmdk": "^1.1.1"
+    "cmdk": "^1.1.1",
+    "recharts": "^2.15.0"
   },
   "devDependencies": {
     "@types/react": "^19",
@@ -83,7 +85,8 @@
     "husky": "^9.1.7",
     "lint-staged": "^15.2.11",
     "knip": "^5.64.2",
-    "swagger-typescript-api": "^13.2.7"
+    "swagger-typescript-api": "^13.2.7",
+    "@sentry/vite-plugin": "^3.0.0"
   },
   "lint-staged": {
     "*.{js,ts,tsx,css}": ["eslint --fix", "prettier --write"]

package/templates/template-vite/src/components/data-table/data-table-column-header.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react'
+import { type Column } from '@tanstack/react-table'
+import { ArrowDown, ArrowUp, ChevronsUpDown, EyeOff } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+
+interface DataTableColumnHeaderProps<TData, TValue> extends React.HTMLAttributes<HTMLDivElement> {
+  column: Column<TData, TValue>
+  title: string
+}
+
+export function DataTableColumnHeader<TData, TValue>({
+  column,
+  title,
+  className,
+}: DataTableColumnHeaderProps<TData, TValue>) {
+  if (!column.getCanSort()) {
+    return <div className={cn(className)}>{title}</div>
+  }
+
+  return (
+    <div className={cn('flex items-center space-x-2', className)}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant='ghost' size='sm' className='-ml-3 h-8 data-[state=open]:bg-accent'>
+            <span>{title}</span>
+            {column.getIsSorted() === 'desc' ? (
+              <ArrowDown className='ml-2 h-4 w-4' />
+            ) : column.getIsSorted() === 'asc' ? (
+              <ArrowUp className='ml-2 h-4 w-4' />
+            ) : (
+              <ChevronsUpDown className='ml-2 h-4 w-4' />
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align='start'>
+          <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
+            <ArrowUp className='mr-2 h-3.5 w-3.5 text-muted-foreground/70' />
+            Asc
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
+            <ArrowDown className='mr-2 h-3.5 w-3.5 text-muted-foreground/70' />
+            Desc
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
+            <EyeOff className='mr-2 h-3.5 w-3.5 text-muted-foreground/70' />
+            Hide
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}

package/templates/template-vite/src/components/data-table/data-table-faceted-filter.tsx

@@ -0,0 +1,129 @@
+import * as React from 'react'
+import { type Column } from '@tanstack/react-table'
+import { Check, PlusCircle } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '@/components/ui/command'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { Separator } from '@/components/ui/separator'
+
+interface FacetedFilterOption {
+  label: string
+  value: string
+  icon?: React.ComponentType<{ className?: string }>
+}
+
+interface DataTableFacetedFilterProps<TData, TValue> {
+  column?: Column<TData, TValue>
+  title?: string
+  options: FacetedFilterOption[]
+}
+
+export function DataTableFacetedFilter<TData, TValue>({
+  column,
+  title,
+  options,
+}: DataTableFacetedFilterProps<TData, TValue>) {
+  const facets = column?.getFacetedUniqueValues()
+  const selectedValues = new Set(column?.getFilterValue() as string[])
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant='outline' size='sm' className='h-8 border-dashed'>
+          <PlusCircle className='mr-2 h-4 w-4' />
+          {title}
+          {selectedValues.size > 0 && (
+            <>
+              <Separator orientation='vertical' className='mx-2 h-4' />
+              <Badge variant='secondary' className='rounded-sm px-1 font-normal lg:hidden'>
+                {selectedValues.size}
+              </Badge>
+              <div className='hidden space-x-1 lg:flex'>
+                {selectedValues.size > 2 ? (
+                  <Badge variant='secondary' className='rounded-sm px-1 font-normal'>
+                    {selectedValues.size} selected
+                  </Badge>
+                ) : (
+                  options
+                    .filter((option) => selectedValues.has(option.value))
+                    .map((option) => (
+                      <Badge key={option.value} variant='secondary' className='rounded-sm px-1 font-normal'>
+                        {option.label}
+                      </Badge>
+                    ))
+                )}
+              </div>
+            </>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className='w-[200px] p-0' align='start'>
+        <Command>
+          <CommandInput placeholder={title} />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => {
+                const isSelected = selectedValues.has(option.value)
+                return (
+                  <CommandItem
+                    key={option.value}
+                    onSelect={() => {
+                      if (isSelected) {
+                        selectedValues.delete(option.value)
+                      } else {
+                        selectedValues.add(option.value)
+                      }
+                      const filterValues = Array.from(selectedValues)
+                      column?.setFilterValue(filterValues.length ? filterValues : undefined)
+                    }}
+                  >
+                    <div
+                      className={cn(
+                        'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
+                        isSelected ? 'bg-primary text-primary-foreground' : 'opacity-50 [&_svg]:invisible'
+                      )}
+                    >
+                      <Check className='h-4 w-4' />
+                    </div>
+                    {option.icon && <option.icon className='mr-2 h-4 w-4 text-muted-foreground' />}
+                    <span>{option.label}</span>
+                    {facets?.get(option.value) && (
+                      <span className='ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs'>
+                        {facets.get(option.value)}
+                      </span>
+                    )}
+                  </CommandItem>
+                )
+              })}
+            </CommandGroup>
+            {selectedValues.size > 0 && (
+              <>
+                <CommandSeparator />
+                <CommandGroup>
+                  <CommandItem
+                    onSelect={() => column?.setFilterValue(undefined)}
+                    className='justify-center text-center'
+                  >
+                    Clear filters
+                  </CommandItem>
+                </CommandGroup>
+              </>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}

package/templates/template-vite/src/components/data-table/data-table-pagination.tsx

@@ -0,0 +1,80 @@
+import { type Table } from '@tanstack/react-table'
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react'
+
+import { Button } from '@/components/ui/button'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+
+interface DataTablePaginationProps<TData> {
+  table: Table<TData>
+}
+
+export function DataTablePagination<TData>({ table }: DataTablePaginationProps<TData>) {
+  return (
+    <div className='flex items-center justify-between px-2'>
+      <div className='flex-1 text-sm text-muted-foreground'>
+        {table.getFilteredSelectedRowModel().rows.length} of {table.getFilteredRowModel().rows.length} row(s) selected.
+      </div>
+      <div className='flex items-center space-x-6 lg:space-x-8'>
+        <div className='flex items-center space-x-2'>
+          <p className='text-sm font-medium'>Rows per page</p>
+          <Select
+            value={`${table.getState().pagination.pageSize}`}
+            onValueChange={(value) => table.setPageSize(Number(value))}
+          >
+            <SelectTrigger className='h-8 w-[70px]'>
+              <SelectValue placeholder={table.getState().pagination.pageSize} />
+            </SelectTrigger>
+            <SelectContent side='top'>
+              {[10, 20, 30, 40, 50].map((pageSize) => (
+                <SelectItem key={pageSize} value={`${pageSize}`}>
+                  {pageSize}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className='flex w-[100px] items-center justify-center text-sm font-medium'>
+          Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+        </div>
+        <div className='flex items-center space-x-2'>
+          <Button
+            variant='outline'
+            className='hidden h-8 w-8 p-0 lg:flex'
+            onClick={() => table.setPageIndex(0)}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <span className='sr-only'>Go to first page</span>
+            <ChevronsLeft className='h-4 w-4' />
+          </Button>
+          <Button
+            variant='outline'
+            className='h-8 w-8 p-0'
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <span className='sr-only'>Go to previous page</span>
+            <ChevronLeft className='h-4 w-4' />
+          </Button>
+          <Button
+            variant='outline'
+            className='h-8 w-8 p-0'
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            <span className='sr-only'>Go to next page</span>
+            <ChevronRight className='h-4 w-4' />
+          </Button>
+          <Button
+            variant='outline'
+            className='hidden h-8 w-8 p-0 lg:flex'
+            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+            disabled={!table.getCanNextPage()}
+          >
+            <span className='sr-only'>Go to last page</span>
+            <ChevronsRight className='h-4 w-4' />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}