create-tigra 2.6.5 → 2.6.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-tigra",
-  "version": "2.6.5",
+  "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/rules/client/01-project-structure.md

@@ -33,11 +33,8 @@ 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)

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

@@ -12,85 +12,89 @@ 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
+
+`globals.css` includes a global transition rule in `@layer base` that smoothly animates color changes when toggling light/dark mode:
 
-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";`
+```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`.
 
 ---
 
@@ -248,7 +252,7 @@ Each preset maps raw font variables (set by `next/font/google` in `layout.tsx`)
   - 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).
 
 ---
@@ -256,7 +260,7 @@ Each preset maps raw font variables (set by `next/font/google` in `layout.tsx`)
 ## Typography
 
 - **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**: `text-wrap: balance`, `leading-tight`. Mobile-first responsive sizes:
+- **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`
@@ -374,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

@@ -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**, **font 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,7 +36,7 @@ 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.
+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.

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

@@ -4,21 +4,16 @@
 
 /*
  * ============================================================
- * 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";
 
 /*
  * ============================================================
@@ -85,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

@@ -27,7 +27,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>): React.ReactElement {
   return (
-    <html lang="en" className="dark" suppressHydrationWarning>
+    <html lang="en" suppressHydrationWarning>
       <body className={`${inter.variable} ${jetbrainsMono.variable} font-sans antialiased`}>
         <Providers>{children}</Providers>
       </body>

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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,
+  };
+};

package/template/client/src/features/admin/hooks/useAdminUsers.ts

@@ -0,0 +1,132 @@
+'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 type { IAdminUser, IAdminUserDetail, IGetUsersParams, IGetSessionsParams } from '../types/admin.types';
+
+// ─── Query Key Factory ──────────────────────────────────────────────────────
+
+export const adminKeys = {
+  all: ['admin'] as const,
+  stats: () => [...adminKeys.all, 'stats'] as const,
+  users: () => [...adminKeys.all, 'users'] as const,
+  userList: (params: IGetUsersParams) => [...adminKeys.users(), 'list', params] as const,
+  userDetail: (userId: string) => [...adminKeys.users(), 'detail', userId] as const,
+  sessions: () => [...adminKeys.all, 'sessions'] as const,
+  sessionList: (params: IGetSessionsParams) => [...adminKeys.sessions(), 'list', params] as const,
+};
+
+// ─── User List ──────────────────────────────────────────────────────────────
+
+interface UseAdminUsersReturn {
+  users: IAdminUser[];
+  pagination: {
+    page: number;
+    limit: number;
+    totalItems: number;
+    totalPages: number;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+  } | undefined;
+  isLoading: boolean;
+  error: Error | null;
+}
+
+export const useAdminUsers = (params: IGetUsersParams = {}): UseAdminUsersReturn => {
+  const { data, isLoading, error } = useQuery({
+    queryKey: adminKeys.userList(params),
+    queryFn: () => adminService.getUsers(params),
+  });
+
+  return {
+    users: data?.items ?? [],
+    pagination: data?.pagination,
+    isLoading,
+    error,
+  };
+};
+
+// ─── User Detail ────────────────────────────────────────────────────────────
+
+interface UseAdminUserDetailReturn {
+  user: IAdminUserDetail | undefined;
+  isLoading: boolean;
+  error: Error | null;
+}
+
+export const useAdminUserDetail = (userId: string): UseAdminUserDetailReturn => {
+  const { data, isLoading, error } = useQuery({
+    queryKey: adminKeys.userDetail(userId),
+    queryFn: () => adminService.getUserDetail(userId),
+    enabled: !!userId,
+  });
+
+  return {
+    user: data,
+    isLoading,
+    error,
+  };
+};
+
+// ─── Update User Status ─────────────────────────────────────────────────────
+
+interface UseUpdateUserStatusReturn {
+  updateStatus: (params: { userId: string; isActive: boolean }) => void;
+  isUpdating: boolean;
+}
+
+export const useUpdateUserStatus = (): UseUpdateUserStatusReturn => {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: ({ userId, isActive }: { userId: string; isActive: boolean }) =>
+      adminService.updateUserStatus(userId, { isActive }),
+    onSuccess: (_data, variables) => {
+      const action = variables.isActive ? 'activated' : 'deactivated';
+      toast.success(`User ${action} successfully`);
+      queryClient.invalidateQueries({ queryKey: adminKeys.users() });
+      queryClient.invalidateQueries({ queryKey: adminKeys.stats() });
+    },
+    onError: (error) => {
+      toast.error(getErrorMessage(error));
+    },
+  });
+
+  return {
+    updateStatus: mutation.mutate,
+    isUpdating: mutation.isPending,
+  };
+};
+
+// ─── Update User Role ───────────────────────────────────────────────────────
+
+interface UseUpdateUserRoleReturn {
+  updateRole: (params: { userId: string; role: 'USER' | 'ADMIN' }) => void;
+  isUpdating: boolean;
+}
+
+export const useUpdateUserRole = (): UseUpdateUserRoleReturn => {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: ({ userId, role }: { userId: string; role: 'USER' | 'ADMIN' }) =>
+      adminService.updateUserRole(userId, { role }),
+    onSuccess: () => {
+      toast.success('User role updated successfully');
+      queryClient.invalidateQueries({ queryKey: adminKeys.users() });
+      queryClient.invalidateQueries({ queryKey: adminKeys.stats() });
+    },
+    onError: (error) => {
+      toast.error(getErrorMessage(error));
+    },
+  });
+
+  return {
+    updateRole: mutation.mutate,
+    isUpdating: mutation.isPending,
+  };
+};