npm - create-tigra - Versions diffs - 2.6.0 → 2.6.8 - Mend

create-tigra 2.6.0 → 2.6.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (42) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "create-tigra",
-  "version": "2.6.0",
+  "version": "2.6.8",
   "type": "module",
   "description": "Create a production-ready full-stack app with Next.js 16 + Fastify 5 + Prisma + Redis",
   "bin": {

package/template/_claude/commands/create-client.md CHANGED Viewed

@@ -463,7 +463,7 @@ export function Providers({ children }: { children: React.ReactNode }): React.Re
 #### `src/app/layout.tsx`
 Root layout:
-- Import and use `next/font` (Inter or Geist Sans)
+- Import and use `next/font/google` (fonts defined by the active font preset — default: Inter + JetBrains Mono)
 - `<html lang="en" suppressHydrationWarning>`
 - Wrap children in `<Providers>`
 - Default metadata with app name

package/template/_claude/rules/client/01-project-structure.md CHANGED Viewed

@@ -33,11 +33,10 @@ src/
 │       ├── types/          # <domain>.types.ts
 │       └── actions/        # <domain>.actions.ts (Server Actions)
 ├── styles/
-│   └── themes/             # Color theme presets (switch in globals.css import)
-│       ├── warm-orange.css  # Default — earthy, warm
-│       ├── electric-indigo.css
-│       ├── ocean-teal.css
-│       └── rose-pink.css
+│   ├── themes/             # Color theme (light/dark mode values)
+│   │   └── default.css      # Claude-inspired warm palette (HEX)
+│   └── fonts/              # Font presets (switch in globals.css import)
+│       └── inter-jetbrains.css  # Default — Inter + JetBrains Mono
 ├── hooks/                  # Global hooks (useDebounce, useLocalStorage, useMediaQuery)
 ├── lib/
 │   ├── api/                # axios.config.ts, api.types.ts

package/template/_claude/rules/client/04-design-system.md CHANGED Viewed

@@ -12,85 +12,183 @@ Clean, airy, "expensive" look inspired by Linear, Vercel, Stripe, Arc. Every vis
 ## CSS Architecture (Source of Truth)
-This project uses **Tailwind CSS v4** with **OKLCH color space** and the `@theme inline` directive (not the legacy `tailwind.config.ts`).
+This project uses **Tailwind CSS v4** with **HEX colors** and the `@theme inline` directive (not the legacy `tailwind.config.ts`).
 **Key differences from Tailwind v3:**
 - No `tailwind.config.ts` — all config is CSS-based via `@theme inline`
-- Colors use **OKLCH** (perceptually uniform) not HSL
+- Colors use **HEX** values (e.g., `#c15f3c`), with `rgba()` for alpha values
 - `@custom-variant dark` replaces `darkMode: 'class'`
-- No `@layer base { :root { } }` — variables defined on `:root` via theme preset files
+- No `@layer base { :root { } }` — variables defined on `:root` via theme file
 ---
-## Theme Preset System (Color Management)
+## Theme System (Color Management)
-**ALL color variables live in theme preset files, NOT in `globals.css`.** This is the single source of truth for the entire app's color palette.
+**ALL color variables live in `src/styles/themes/default.css`, NOT in `globals.css` or components.** This is the single source of truth for the entire app's color palette.
 ### How It Works
 ```
 src/
-├── app/globals.css                    ← imports ONE theme preset (switch here)
+├── app/globals.css                    ← imports the theme + defines smooth transitions
 └── styles/themes/
-    ├── warm-orange.css                ← Earthy, warm (default)
-    ├── electric-indigo.css            ← Modern, bold, tech-forward
-    ├── ocean-teal.css                 ← Calm, professional
-    └── rose-pink.css                  ← Elegant, creative
+    └── default.css                    ← Claude-inspired warm palette (HEX)
 ```
-`globals.css` imports the active theme via a single line:
+`globals.css` imports the theme:
 ```css
-@import "../styles/themes/warm-orange.css";
+@import "../styles/themes/default.css";
 ```
-**To switch the entire palette**: change that ONE import line. That's it. Every color in the app updates instantly — light mode, dark mode, charts, sidebar, everything.
+### Theme File Structure
-### Theme Preset Structure
-Each preset file defines ALL semantic color variables for both `:root` (light) and `.dark` (dark mode):
+`default.css` defines ALL semantic color variables for both `:root` (light) and `.dark` (dark mode) using HEX:
 ```css
 :root {
   --radius: 0.625rem;
-  --background: oklch(...);
-  --foreground: oklch(...);
-  --primary: oklch(...);
-  --primary-foreground: oklch(...);
+  --background: #f4f3ee;
+  --foreground: #1a170f;
+  --primary: #c15f3c;
+  --primary-foreground: #ffffff;
   /* ... all ~35 semantic tokens */
 }
 .dark {
-  --background: oklch(...);
-  --foreground: oklch(...);
-  --primary: oklch(...);
+  --background: #15130d;
+  --foreground: #e9e8e3;
+  --primary: #d6724f;
   /* ... dark mode overrides for all tokens */
 }
 ```
-### Creating a Custom Theme
+### Customizing Colors
+To change the brand palette, edit the HEX values in `default.css`. That's it — every color in the app updates instantly for both light and dark modes.
+### Smooth Theme Transitions
-1. Copy any existing preset file (e.g., `warm-orange.css`)
-2. Rename it (e.g., `my-brand.css`)
-3. Edit the OKLCH values to match your brand palette
-4. Update the import in `globals.css`: `@import "../styles/themes/my-brand.css";`
+`globals.css` includes a global transition rule in `@layer base` that smoothly animates color changes when toggling light/dark mode:
+```css
+*, *::before, *::after {
+  transition-property: background-color, color, border-color, box-shadow;
+  transition-duration: 200ms;
+  transition-timing-function: ease-out;
+}
+```
-### Available Presets
+### Light/Dark Mode Toggle
-| Preset | Accent | Vibe | Inspired by |
-|--------|--------|------|-------------|
-| `warm-orange.css` | Terracotta orange | Earthy, warm, approachable | Claude |
-| `electric-indigo.css` | Deep indigo-violet | Modern, bold, tech-forward | Linear, Figma |
-| `ocean-teal.css` | Deep teal-cyan | Calm, professional, trustworthy | Stripe, Vercel |
-| `rose-pink.css` | Soft rose-magenta | Elegant, creative, premium | Dribbble, Notion |
+- Managed by `next-themes` with `attribute="class"` and `defaultTheme="light"`
+- The `ThemeToggle` component (`components/common/ThemeToggle.tsx`) provides the UI
+- The Header component also includes a sun/moon toggle button
 ### CRITICAL RULES — Color Management
-1. **NEVER add or modify color variables directly in `globals.css`.** All `:root` and `.dark` color variables belong in the active theme preset file only.
-2. **NEVER hardcode OKLCH/hex/rgb values in components.** Always use semantic tokens (`bg-primary`, `text-foreground`).
-3. **To change the brand palette**: switch the import in `globals.css` or edit the active preset file. Never scatter color values across multiple files.
-4. **New semantic tokens**: If you need a new color token (rare), add it to ALL preset files to keep them in sync.
-5. **The `@theme inline` block in `globals.css` maps CSS vars to Tailwind** — it does NOT define colors. Colors come from the preset.
+1. **NEVER add or modify color variables in `globals.css`.** All `:root` and `.dark` color variables belong in `default.css` only.
+2. **NEVER hardcode hex/rgb values in components.** Always use semantic tokens (`bg-primary`, `text-foreground`).
+3. **NEVER use OKLCH color values.** All colors must be HEX (e.g., `#c15f3c`). Use `rgba()` only when alpha transparency is needed.
+4. **NEVER rename CSS variables.** The variable names (`--primary`, `--background`, `--muted`, etc.) are locked for consistency. Only edit their HEX values.
+5. **NEVER modify the smooth transition rules in `globals.css`.** The `transition-property`, `transition-duration`, and `transition-timing-function` on `*` are part of the theme system and must not be changed or removed.
+6. **NEVER modify the `@theme inline` block in `globals.css`.** It maps CSS vars to Tailwind — it does NOT define colors. Colors come from `default.css`.
+7. **To change the brand palette**: edit the HEX values in `default.css`. Never scatter color values across multiple files.
+8. **New semantic tokens**: If you need a new token (rare), add it to both `:root` and `.dark` in `default.css`.
+---
+## Font Preset System (Font Management)
+**Font families are defined in font preset files, NOT hardcoded in components.** This mirrors the color theme preset system — switch the entire font pairing by changing one import.
+### How It Works
+```
+src/
+├── app/
+│   ├── layout.tsx                     ← loads fonts via next/font/google
+│   └── globals.css                    ← imports ONE font preset (switch here)
+└── styles/fonts/
+    └── inter-jetbrains.css            ← Default (Inter + JetBrains Mono)
+```
+### Three Semantic Font Roles
+| Role | CSS Variable | Tailwind Class | Default Font |
+|------|-------------|----------------|--------------|
+| Body text | `--font-sans-value` | `font-sans` | Inter |
+| Headings | `--font-heading-value` | `font-heading` | Inter |
+| Code/mono | `--font-mono-value` | `font-mono` | JetBrains Mono |
+### How to Switch Fonts
+Switching fonts requires two changes:
+**Step 1 — Update font imports in `layout.tsx`:**
+```tsx
+// Change these imports to your desired fonts
+import { Roboto, Fira_Code } from 'next/font/google';
+const roboto = Roboto({
+  variable: '--font-roboto',
+  subsets: ['latin'],
+  weight: ['400', '500', '600', '700'],
+});
+const firaCode = Fira_Code({
+  variable: '--font-fira-code',
+  subsets: ['latin'],
+});
+// Update the className to use new variables
+<body className={`${roboto.variable} ${firaCode.variable} font-sans antialiased`}>
+```
+**Step 2 — Update the font preset file (or create a new one):**
+```css
+/* styles/fonts/roboto-fira.css */
+:root {
+  --font-sans-value: var(--font-roboto);
+  --font-heading-value: var(--font-roboto);
+  --font-mono-value: var(--font-fira-code);
+}
+```
+Then update the import in `globals.css`:
+```css
+@import "../styles/fonts/roboto-fira.css";
+```
+### Font Preset Structure
+Each preset maps raw font variables (set by `next/font/google` in `layout.tsx`) to semantic roles:
+```css
+:root {
+  --font-sans-value: var(--font-inter);        /* body text */
+  --font-heading-value: var(--font-inter);      /* headings */
+  --font-mono-value: var(--font-jetbrains-mono); /* code */
+}
+```
+### Creating a Custom Font Preset
+1. Choose your fonts from [Google Fonts](https://fonts.google.com)
+2. Update `layout.tsx` — import fonts via `next/font/google`, set CSS variable names
+3. Create a new preset file in `src/styles/fonts/` (or edit the existing one)
+4. Map your font variables to the three semantic roles
+5. Update the import in `globals.css` to point to your preset
+### CRITICAL RULES — Font Management
+1. **NEVER hardcode font-family values in components.** Always use Tailwind classes (`font-sans`, `font-heading`, `font-mono`).
+2. **ALL font-family mappings live in the font preset file**, not in `globals.css` or components.
+3. **To change fonts**: update `layout.tsx` imports + update the font preset file. Never scatter font-family values across the codebase.
+4. **The `@theme inline` block in `globals.css` maps preset variables to Tailwind** — it does NOT define fonts. Fonts come from the preset.
+5. **Fonts are loaded via `next/font/google`** — this self-hosts fonts automatically at build time. No external requests at runtime, no manual file downloads needed.
 ---
@@ -154,15 +252,15 @@ Each preset file defines ALL semantic color variables for both `:root` (light) a
   - Hovered/elevated: `shadow-md` to `shadow-lg`
   - Modals/popovers: `shadow-xl`
 - **Glassmorphism**: Only on sticky headers, floating toolbars, modal backdrops. Never on content cards.
-  `backdrop-filter: blur(12px) saturate(1.5); background: oklch(from var(--background) l c h / 0.8);`
+  Use `backdrop-blur-md` + `bg-background/80` in Tailwind.
 - **No pure black/white**: Use `--background` and `--foreground` tokens (already off-pure).
 ---
 ## Typography
-- **Font**: Inter v4 (variable) or Geist Sans via `next/font`.
-- **Headings**: `text-wrap: balance`, `leading-tight`. Mobile-first responsive sizes:
+- **Font**: Defined by the active font preset (default: Inter for sans/heading, JetBrains Mono for mono). See "Font Preset System" above for how to switch.
+- **Headings**: Use `font-heading`. `text-wrap: balance`, `leading-tight`. Mobile-first responsive sizes:
   - H1: `text-2xl md:text-3xl lg:text-4xl`
   - H2: `text-xl md:text-2xl`
   - H3: `text-lg md:text-xl`
@@ -280,7 +378,8 @@ Link:    transition-colors duration-150 active:opacity-70 md:hover:text-primary
 ## Dark Mode
-- Use `next-themes` with `attribute="class"`, `defaultTheme="system"`.
+- Use `next-themes` with `attribute="class"`, `defaultTheme="light"`.
+- Smooth transitions handled by the global CSS transition rules in `globals.css` — do NOT add `disableTransitionOnChange` to `ThemeProvider`.
 - Reduce shadow visibility in dark mode (use subtle light borders instead).
 - Consider `brightness-90` on images in dark mode.
 - Add `suppressHydrationWarning` to `<html>` tag.

package/template/_claude/rules/client/core.md CHANGED Viewed

@@ -9,7 +9,7 @@
 | Creating files, folders, feature modules | `01-project-structure.md` |
 | Building components, writing types/interfaces | `02-components-and-types.md` |
 | Fetching data, managing state, calling APIs, forms | `03-data-and-state.md` |
-| Choosing colors, styling, typography, spacing, motion, **theme presets** | `04-design-system.md` |
+| Choosing colors, styling, typography, spacing, motion, **theme colors**, **font presets** | `04-design-system.md` |
 | Auth tokens, env vars, security headers | `05-security.md` |
 | UX psychology, cognitive load, a11y, performance | `06-ux-checklist.md` |
@@ -36,9 +36,10 @@ State: Server data (SSR) → Server Components
 1. **Mobile-first**: All Tailwind classes start at mobile. Desktop is the enhancement (`md:`, `lg:`). Touch targets min 44x44px. No functionality behind hover-only states.
 2. **Server Components by default.** Only add `'use client'` when you need hooks, state, or event handlers.
 3. **Component limits**: Max 250 lines, max 5 props, max 3 JSX nesting levels.
-4. **No hardcoded colors**: Use Tailwind semantic tokens (`bg-primary`, `text-foreground`). Never hex/rgb. **All color variables live in theme preset files (`src/styles/themes/*.css`), NOT in `globals.css` or components.** To change the palette, switch the import in `globals.css` or edit the active preset. Read `04-design-system.md` → "Theme Preset System" for details.
-5. **No inline styles**: Tailwind only. Use `cn()` for conditional classes.
-6. **Import order**: React/Next → third-party → UI → local → hooks → services → types → utils.
-7. **Forms**: Validate with Zod. Always validate client-side AND server-side.
-8. **Security**: Never inject raw HTML without sanitization. Never prefix secrets with `NEXT_PUBLIC_`.
-9. **Deployment**: Never remove `output: "standalone"` from `next.config.ts`. When adding `NEXT_PUBLIC_*` env vars, also add them as `ARG` + `ENV` in the Dockerfile builder stage. Read `07-deployment.md` for details.
+4. **No hardcoded colors**: Use Tailwind semantic tokens (`bg-primary`, `text-foreground`). Never hardcode hex/rgb in components. **All color variables live in `src/styles/themes/default.css` using HEX values, NOT in `globals.css` or components.** Only edit the HEX values in `default.css` to customize the palette — never rename variables, change the file structure, or move color definitions elsewhere. The smooth transition system in `globals.css` and the variable naming are locked. Read `04-design-system.md` → "Theme System" for details.
+5. **No hardcoded fonts**: Use Tailwind font classes (`font-sans`, `font-heading`, `font-mono`). Never hardcode `font-family` in components. **Font families are defined in font preset files (`src/styles/fonts/*.css`).** To change fonts, update the `next/font/google` imports in `layout.tsx` and the font preset file. Read `04-design-system.md` → "Font Preset System" for details.
+6. **No inline styles**: Tailwind only. Use `cn()` for conditional classes.
+7. **Import order**: React/Next → third-party → UI → local → hooks → services → types → utils.
+8. **Forms**: Validate with Zod. Always validate client-side AND server-side.
+9. **Security**: Never inject raw HTML without sanitization. Never prefix secrets with `NEXT_PUBLIC_`.
+10. **Deployment**: Never remove `output: "standalone"` from `next.config.ts`. When adding `NEXT_PUBLIC_*` env vars, also add them as `ARG` + `ENV` in the Dockerfile builder stage. Read `07-deployment.md` for details.

package/template/client/README.md CHANGED Viewed

@@ -18,7 +18,7 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Inter](https://fonts.google.com/specimen/Inter) and [JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono). Fonts are managed via the font preset system in `src/styles/fonts/` — see the design system rules for how to switch fonts.
 ## Learn More

package/template/client/src/app/globals.css CHANGED Viewed

@@ -4,29 +4,37 @@
 /*
  * ============================================================
- * THEME PRESETS — All themes loaded, switched via data-theme
+ * THEME — Single theme with light/dark mode
  * ============================================================
- * warm-orange.css is the default (uses :root / .dark selectors).
- * Other presets are scoped to [data-theme="<name>"] and activated
- * by the ThemeSwitcher component setting data-theme on <html>.
+ * Colors are defined in default.css using :root (light) and
+ * .dark (dark mode) selectors. Light/dark toggle is handled
+ * by next-themes setting the "dark" class on <html>.
  *
- * To create a custom theme: copy any preset, scope it under
- * [data-theme="your-name"] / .dark[data-theme="your-name"],
- * import it below, and add it to ThemeSwitcher's PALETTES array.
+ * To customize colors: edit src/styles/themes/default.css
  * ============================================================
  */
-@import "../styles/themes/warm-orange.css";
-@import "../styles/themes/electric-indigo.css";
-@import "../styles/themes/ocean-teal.css";
-@import "../styles/themes/rose-pink.css";
+@import "../styles/themes/default.css";
+/*
+ * ============================================================
+ * FONT PRESET — Switch the entire font pairing here
+ * ============================================================
+ * To change fonts:
+ * 1. Update the font imports in layout.tsx (next/font/google)
+ * 2. Create or edit a preset in src/styles/fonts/
+ * 3. Change the import below to your preset
+ * ============================================================
+ */
+@import "../styles/fonts/inter-jetbrains.css";
 @custom-variant dark (&:is(.dark *));
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --font-sans: var(--font-sans-value);
+  --font-heading: var(--font-heading-value);
+  --font-mono: var(--font-mono-value);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -72,8 +80,13 @@
 }
 @layer base {
-  * {
+  *,
+  *::before,
+  *::after {
     @apply border-border outline-ring/50;
+    transition-property: background-color, color, border-color, box-shadow;
+    transition-duration: 200ms;
+    transition-timing-function: ease-out;
   }
   body {
     @apply bg-background text-foreground;

package/template/client/src/app/layout.tsx CHANGED Viewed

@@ -1,18 +1,18 @@
 import type { Metadata } from 'next';
 import type React from 'react';
-import { Geist, Geist_Mono } from 'next/font/google';
+import { Inter, JetBrains_Mono } from 'next/font/google';
 import { Providers } from './providers';
 import { APP_NAME } from '@/lib/constants/app.constants';
 import './globals.css';
-const geistSans = Geist({
-  variable: '--font-geist-sans',
+const inter = Inter({
+  variable: '--font-inter',
   subsets: ['latin'],
 });
-const geistMono = Geist_Mono({
-  variable: '--font-geist-mono',
+const jetbrainsMono = JetBrains_Mono({
+  variable: '--font-jetbrains-mono',
   subsets: ['latin'],
 });
@@ -27,8 +27,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }>): React.ReactElement {
   return (
-    <html lang="en" className="dark" suppressHydrationWarning>
-      <body className={`${geistSans.variable} ${geistMono.variable} font-sans antialiased`}>
+    <html lang="en" suppressHydrationWarning>
+      <body className={`${inter.variable} ${jetbrainsMono.variable} font-sans antialiased`}>
         <Providers>{children}</Providers>
       </body>
     </html>

package/template/client/src/app/page.tsx CHANGED Viewed

@@ -3,7 +3,7 @@ import type { Metadata } from 'next';
 import Image from 'next/image';
-import { ThemeSwitcher } from '@/components/common/ThemeSwitcher';
+import { ThemeToggle } from '@/components/common/ThemeToggle';
 import { APP_NAME } from '@/lib/constants/app.constants';
@@ -46,12 +46,12 @@ export default function WelcomePage(): React.ReactElement {
           <span className="font-semibold text-foreground">create-tigra</span>
         </p>
-        {/* Theme Palette Switcher */}
-        <div className="mt-8 pb-6">
-          <ThemeSwitcher />
+        {/* Light/Dark mode toggle */}
+        <div className="mt-8">
+          <ThemeToggle />
         </div>
-        <div className="mt-4 flex flex-col gap-3 sm:flex-row sm:gap-4">
+        <div className="mt-6 flex flex-col gap-3 sm:flex-row sm:gap-4">
           <a
             href="https://github.com/BehzodKarimov/create-tigra"
             target="_blank"

package/template/client/src/app/providers.tsx CHANGED Viewed

@@ -29,7 +29,7 @@ export function Providers({ children }: { children: React.ReactNode }): React.Re
   return (
     <ReduxProvider store={store}>
       <QueryClientProvider client={queryClient}>
-        <ThemeProvider attribute="class" defaultTheme="dark" disableTransitionOnChange>
+        <ThemeProvider attribute="class" defaultTheme="light">
           <AuthInitializer>
             {children}
           </AuthInitializer>

package/template/client/src/components/common/ThemeToggle.tsx ADDED Viewed

@@ -0,0 +1,59 @@
+'use client';
+import type React from 'react';
+import { useCallback } from 'react';
+import { useTheme } from 'next-themes';
+import { Sun, Moon } from 'lucide-react';
+import { cn } from '@/lib/utils';
+export function ThemeToggle(): React.ReactElement {
+  const { theme, setTheme } = useTheme();
+  const selectLight = useCallback((): void => {
+    setTheme('light');
+  }, [setTheme]);
+  const selectDark = useCallback((): void => {
+    setTheme('dark');
+  }, [setTheme]);
+  return (
+    <div className="flex flex-col items-center gap-3">
+      <p className="text-xs font-medium tracking-wider text-muted-foreground uppercase">
+        Appearance
+      </p>
+      <div className="flex gap-2 rounded-xl border border-border/50 bg-muted/50 p-1.5 transition-none">
+        <button
+          type="button"
+          onClick={selectLight}
+          aria-label="Switch to light mode"
+          className={cn(
+            'flex min-h-11 items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-transform duration-200 active:scale-[0.97]',
+            theme !== 'dark'
+              ? 'bg-background text-foreground shadow-sm'
+              : 'text-muted-foreground md:hover:text-foreground',
+          )}
+        >
+          <Sun className="h-4 w-4" />
+          Light
+        </button>
+        <button
+          type="button"
+          onClick={selectDark}
+          aria-label="Switch to dark mode"
+          className={cn(
+            'flex min-h-11 items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-transform duration-200 active:scale-[0.97]',
+            theme === 'dark'
+              ? 'bg-background text-foreground shadow-sm'
+              : 'text-muted-foreground md:hover:text-foreground',
+          )}
+        >
+          <Moon className="h-4 w-4" />
+          Dark
+        </button>
+      </div>
+    </div>
+  );
+}

package/template/client/src/features/admin/hooks/useAdminSessions.ts ADDED Viewed

@@ -0,0 +1,68 @@
+'use client';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { getErrorMessage } from '@/lib/utils/error';
+import { adminService } from '../services/admin.service';
+import { adminKeys } from './useAdminUsers';
+import type { IAdminSession, IGetSessionsParams } from '../types/admin.types';
+// ─── Session List ───────────────────────────────────────────────────────────
+interface UseAdminSessionsReturn {
+  sessions: IAdminSession[];
+  pagination: {
+    page: number;
+    limit: number;
+    totalItems: number;
+    totalPages: number;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+  } | undefined;
+  isLoading: boolean;
+  error: Error | null;
+}
+export const useAdminSessions = (params: IGetSessionsParams = {}): UseAdminSessionsReturn => {
+  const { data, isLoading, error } = useQuery({
+    queryKey: adminKeys.sessionList(params),
+    queryFn: () => adminService.getSessions(params),
+  });
+  return {
+    sessions: data?.items ?? [],
+    pagination: data?.pagination,
+    isLoading,
+    error,
+  };
+};
+// ─── Force Expire Session ───────────────────────────────────────────────────
+interface UseForceExpireSessionReturn {
+  expireSession: (sessionId: string) => void;
+  isExpiring: boolean;
+}
+export const useForceExpireSession = (): UseForceExpireSessionReturn => {
+  const queryClient = useQueryClient();
+  const mutation = useMutation({
+    mutationFn: (sessionId: string) => adminService.deleteSession(sessionId),
+    onSuccess: () => {
+      toast.success('Session expired successfully');
+      queryClient.invalidateQueries({ queryKey: adminKeys.sessions() });
+      queryClient.invalidateQueries({ queryKey: adminKeys.stats() });
+    },
+    onError: (error) => {
+      toast.error(getErrorMessage(error));
+    },
+  });
+  return {
+    expireSession: mutation.mutate,
+    isExpiring: mutation.isPending,
+  };
+};

package/template/client/src/features/admin/hooks/useAdminStats.ts ADDED Viewed

@@ -0,0 +1,27 @@
+'use client';
+import { useQuery } from '@tanstack/react-query';
+import { adminService } from '../services/admin.service';
+import { adminKeys } from './useAdminUsers';
+import type { IDashboardStats } from '../types/admin.types';
+interface UseAdminStatsReturn {
+  stats: IDashboardStats | undefined;
+  isLoading: boolean;
+  error: Error | null;
+}
+export const useAdminStats = (): UseAdminStatsReturn => {
+  const { data, isLoading, error } = useQuery({
+    queryKey: adminKeys.stats(),
+    queryFn: () => adminService.getDashboardStats(),
+  });
+  return {
+    stats: data,
+    isLoading,
+    error,
+  };
+};