crud

admin crud ops implemented partialy

AGENTS.md

@@ -1,22 +1,24 @@
 # AGENTS.md
 
 ## Project Overview
-FitAI is a fitness management solution with admin web app and React Native mobile app for client management, payments, attendance tracking, and notifications.
+
+FitAI fitness management solution: Next.js admin web app + Expo React Native mobile app for client management, payments, attendance tracking, and notifications. Monorepo with shared packages.
 
 ## Build/Test Commands
-This project is in early prototype stage - no build system configured yet.
-- When implementing: expect standard npm/yarn commands (npm run dev, npm run build, npm test)
-- For single tests: use npm test -- --testNamePattern="test name" or npm test path/to/test.test.js
+
+- Admin: npm run dev/build/lint/typecheck/test (from apps/admin)
+- Mobile: npm run start/build/lint/typecheck/test (from apps/mobile)
+- Database: npm run build/dev/typecheck/db:push/db:studio (from packages/database)
+- Single test: npm test -- --testNamePattern="test name" or npm test path/to/test.test.js
 
 ## Code Style Guidelines
-- Use TypeScript for type safety
-- Follow React/React Native conventions
-- Use camelCase for variables and functions
-- Use PascalCase for components
-- Import order: external libraries → internal modules → relative imports
-- Implement proper error handling with try/catch blocks
-- Use semantic HTML and accessible components
-- Follow mobile-first responsive design principles
-- Implement proper state management (Context API or Redux)
-- Use environment variables for configuration
-- Write comprehensive tests for critical functionality
+
+- TypeScript strict mode, avoid `any` (warned by ESLint)
+- React/React Native conventions with functional components
+- camelCase for variables/functions, PascalCase for components
+- Import order: external → internal (@fitai/\*) → relative imports
+- Error handling with try/catch, use React Query for API errors
+- ESLint enforced: no-unused-vars, prefer-const, no-var
+- Use Zod for validation, React Hook Form for forms
+- Database: Drizzle ORM with SQLite, use shared schemas
+- Testing: Jest + Testing Library, write tests for critical functionality

apps/admin/next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/admin/package.json

@@ -12,38 +12,39 @@
   },
   "dependencies": {
     "@fitai/shared": "file:../../packages/shared",
-    "@hookform/resolvers": "^3.3.0",
-    "@tanstack/react-query": "^5.0.0",
-    "@types/bcryptjs": "^2.4.6",
-    "@types/sqlite3": "^3.1.11",
-    "ag-charts-community": "^9.0.0",
-    "ag-charts-react": "^9.0.0",
-    "ag-grid-community": "^32.0.0",
-    "ag-grid-react": "^32.0.0",
-    "autoprefixer": "^10.4.0",
-    "axios": "^1.6.0",
-    "bcryptjs": "^2.4.3",
-    "lucide-react": "^0.294.0",
-    "next": "^14.0.0",
-    "postcss": "^8.4.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "react-hook-form": "^7.47.0",
-    "recharts": "^2.8.0",
+    "@hookform/resolvers": "^5.2.2",
+    "@tailwindcss/postcss": "^4.1.17",
+    "@tanstack/react-query": "^5.90.7",
+    "@types/bcryptjs": "^3.0.0",
+    "@types/sqlite3": "^5.1.0",
+    "ag-charts-community": "^12.3.1",
+    "ag-charts-react": "^12.3.1",
+    "ag-grid-community": "^34.3.1",
+    "ag-grid-react": "^34.3.1",
+    "autoprefixer": "^10.4.21",
+    "axios": "^1.13.2",
+    "bcryptjs": "^3.0.3",
+    "lucide-react": "^0.553.0",
+    "next": "^16.0.1",
+    "postcss": "^8.5.6",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-hook-form": "^7.66.0",
+    "recharts": "^3.3.0",
     "sqlite": "^5.1.1",
     "sqlite3": "^5.1.7",
-    "tailwindcss": "^3.3.0",
-    "zod": "^3.22.0"
+    "tailwindcss": "^4.1.17",
+    "zod": "^4.1.12"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.1.0",
-    "@testing-library/react": "^13.4.0",
-    "@types/node": "^20.0.0",
-    "@types/react": "18.3.26",
-    "@types/react-dom": "^18.0.0",
-    "eslint": "^8.45.0",
-    "eslint-config-next": "^14.0.0",
-    "jest": "^29.7.0",
-    "typescript": "^5.0.0"
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^24.10.0",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "eslint": "^9.39.1",
+    "eslint-config-next": "^16.0.1",
+    "jest": "^30.2.0",
+    "typescript": "^5.9.3"
   }
 }

apps/admin/postcss.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
+    "@tailwindcss/postcss": {},
     autoprefixer: {},
   },
-}
+};

apps/admin/src/app/api/users/route.ts

@@ -1,32 +1,162 @@
-import { NextRequest, NextResponse } from 'next/server'
-import { getDatabase } from '../../../lib/database/index'
+import { NextRequest, NextResponse } from "next/server";
+import { getDatabase } from "../../../lib/database/index";
+import bcrypt from "bcryptjs";
 
 export async function GET(request: NextRequest) {
   try {
-    const db = await getDatabase()
-    const { searchParams } = new URL(request.url)
-    const role = searchParams.get('role')
+    const db = await getDatabase();
+    const { searchParams } = new URL(request.url);
+    const role = searchParams.get("role");
 
-    let users = await db.getAllUsers()
+    let users = await db.getAllUsers();
 
     if (role) {
-      users = users.filter(user => user.role === role)
+      users = users.filter((user) => user.role === role);
     }
 
     const usersWithClients = await Promise.all(
       users.map(async (user) => {
-        const { password: _, ...userWithoutPassword } = user
-        const client = await db.getClientByUserId(user.id)
-        return { ...userWithoutPassword, client }
-      })
-    )
+        const { password: _, ...userWithoutPassword } = user;
+        const client = await db.getClientByUserId(user.id);
+        return { ...userWithoutPassword, client };
+      }),
+    );
 
-    return NextResponse.json({ users: usersWithClients })
+    return NextResponse.json({ users: usersWithClients });
   } catch (error) {
-    console.error('Get users error:', error)
+    console.error("Get users error:", error);
     return NextResponse.json(
-      { error: 'Internal server error' },
-      { status: 500 }
-    )
+      { error: "Internal server error" },
+      { status: 500 },
+    );
   }
-}
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const db = await getDatabase();
+    const body = await request.json();
+    const { email, password, firstName, lastName, role, phone } = body;
+
+    if (!email || !password || !firstName || !lastName || !role) {
+      return NextResponse.json(
+        { error: "Missing required fields" },
+        { status: 400 },
+      );
+    }
+
+    // Check if user already exists
+    const existingUser = await db.getUserByEmail(email);
+    if (existingUser) {
+      return NextResponse.json(
+        { error: "User with this email already exists" },
+        { status: 409 },
+      );
+    }
+
+    // Hash password
+    const hashedPassword = await bcrypt.hash(password, 12);
+
+    // Create user
+    const userId = await db.createUser({
+      email,
+      password: hashedPassword,
+      firstName,
+      lastName,
+      role,
+      phone,
+    });
+
+    return NextResponse.json({ userId }, { status: 201 });
+  } catch (error) {
+    console.error("Create user error:", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 },
+    );
+  }
+}
+
+export async function PUT(request: NextRequest) {
+  try {
+    const db = await getDatabase();
+    const body = await request.json();
+    const { id, email, firstName, lastName, role, phone } = body;
+
+    if (!id) {
+      return NextResponse.json(
+        { error: "User ID is required" },
+        { status: 400 },
+      );
+    }
+
+    // Get existing user
+    const existingUser = await db.getUserById(id);
+    if (!existingUser) {
+      return NextResponse.json({ error: "User not found" }, { status: 404 });
+    }
+
+    // Check if email is being changed and if it's already taken
+    if (email && email !== existingUser.email) {
+      const userWithEmail = await db.getUserByEmail(email);
+      if (userWithEmail) {
+        return NextResponse.json(
+          { error: "Email already in use" },
+          { status: 409 },
+        );
+      }
+    }
+
+    // Update user
+    await db.updateUser(id, {
+      email: email || existingUser.email,
+      firstName: firstName || existingUser.firstName,
+      lastName: lastName || existingUser.lastName,
+      role: role || existingUser.role,
+      phone: phone !== undefined ? phone : existingUser.phone,
+    });
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error("Update user error:", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 },
+    );
+  }
+}
+
+export async function DELETE(request: NextRequest) {
+  try {
+    const db = await getDatabase();
+    const { searchParams } = new URL(request.url);
+    const id = searchParams.get("id");
+    const body = await request.json().catch(() => ({}));
+    const { ids } = body;
+
+    if (ids && Array.isArray(ids)) {
+      // Bulk delete
+      await Promise.all(ids.map((userId: string) => db.deleteUser(userId)));
+      return NextResponse.json({ success: true, deleted: ids.length });
+    } else if (id) {
+      // Single delete
+      const user = await db.getUserById(id);
+      if (!user) {
+        return NextResponse.json({ error: "User not found" }, { status: 404 });
+      }
+      await db.deleteUser(id);
+      return NextResponse.json({ success: true });
+    } else {
+      return NextResponse.json(
+        { error: "User ID or IDs array required" },
+        { status: 400 },
+      );
+    }
+  } catch (error) {
+    console.error("Delete user error:", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 },
+    );
+  }
+}

apps/admin/src/app/page.tsx

@@ -1,8 +1,8 @@
-'use client'
+"use client";
 
-import Link from 'next/link'
-import { UserManagement } from '@/components/users/UserManagement'
-import { AnalyticsDashboard } from '@/components/analytics/AnalyticsDashboard'
+import Link from "next/link";
+import { UserManagement } from "@/components/users/UserManagement";
+import { AnalyticsDashboard } from "@/components/analytics/AnalyticsDashboard";
 
 export default function Home() {
   return (
@@ -13,13 +13,13 @@ export default function Home() {
             FitAI Admin Dashboard
           </h1>
           <nav className="flex gap-4">
-            <Link 
+            <Link
               href="/users"
               className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
             >
               User Management
             </Link>
-            <Link 
+            <Link
               href="/analytics"
               className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors"
             >
@@ -27,11 +27,13 @@ export default function Home() {
             </Link>
           </nav>
         </div>
-        
+
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
           <div className="bg-white rounded-lg shadow p-6">
             <h2 className="text-xl font-semibold mb-4">Client Management</h2>
-            <p className="text-gray-600">Manage fitness clients and their profiles</p>
+            <p className="text-gray-600">
+              Manage fitness clients and their profiles
+            </p>
           </div>
           <div className="bg-white rounded-lg shadow p-6">
             <h2 className="text-xl font-semibold mb-4">Payment Tracking</h2>
@@ -45,20 +47,22 @@ export default function Home() {
 
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
           <div className="bg-white rounded-lg shadow p-6">
-            <h2 className="text-2xl font-semibold mb-6">Recent User Activity</h2>
-            <div className="h-96">
+            <h2 className="text-2xl font-semibold mb-6">
+              Recent User Activity
+            </h2>
+            <div>
               <UserManagement />
             </div>
           </div>
-          
+
           <div className="bg-white rounded-lg shadow p-6">
             <h2 className="text-2xl font-semibold mb-6">Quick Analytics</h2>
-            <div className="h-96">
+            <div>
               <AnalyticsDashboard />
             </div>
           </div>
         </div>
       </div>
     </main>
-  )
-}
+  );
+}

apps/admin/src/components/charts/MembershipDistributionChart.tsx

@@ -1,88 +1,102 @@
-'use client'
+"use client";
 
-import React, { useMemo } from 'react'
-import { AgChartsReact } from 'ag-charts-react'
-import { AgChartOptions } from 'ag-charts-community'
+import React, { useMemo } from "react";
+import { AgCharts } from "ag-charts-react";
+import { AgChartOptions } from "ag-charts-community";
 
 interface PieData {
-  label: string
-  value: number
-  color?: string
+  label: string;
+  value: number;
+  color?: string;
 }
 
 interface MembershipDistributionChartProps {
-  data: PieData[]
-  title?: string
+  data: PieData[];
+  title?: string;
 }
 
-export function MembershipDistributionChart({ data, title = 'Membership Distribution' }: MembershipDistributionChartProps) {
-  const chartOptions: AgChartOptions = useMemo(() => ({
-    title: {
-      text: title,
-      fontSize: 18,
-      fontWeight: 'bold',
-    },
-    data,
-    series: [
-      {
-        type: 'pie',
-        calloutLabelKey: 'label',
-        angleKey: 'value',
-        sectorLabelKey: 'label',
-        fills: data.map(item => item.color || '#3b82f6'),
-        strokes: ['#ffffff'],
-        strokeWidth: 2,
-        calloutLabel: {
-          enabled: true,
-          fontSize: 12,
-          fontWeight: 'bold',
-        },
-        sectorLabel: {
-          enabled: true,
-          fontSize: 14,
-          fontWeight: 'bold',
-          color: '#ffffff',
-          formatter: (params: any) => {
-            const percentage = ((params.datum.value / data.reduce((sum, item) => sum + item.value, 0)) * 100).toFixed(1)
-            return `${params.datum.label}: ${percentage}%`
+export function MembershipDistributionChart({
+  data,
+  title = "Membership Distribution",
+}: MembershipDistributionChartProps) {
+  const chartOptions: AgChartOptions = useMemo(
+    () => ({
+      title: {
+        text: title,
+        fontSize: 18,
+        fontWeight: "bold",
+      },
+      data,
+      series: [
+        {
+          type: "pie",
+          calloutLabelKey: "label",
+          angleKey: "value",
+          sectorLabelKey: "label",
+          fills: data.map((item) => item.color || "#3b82f6"),
+          strokes: ["#ffffff"],
+          strokeWidth: 2,
+          calloutLabel: {
+            enabled: true,
+            fontSize: 12,
+            fontWeight: "bold",
           },
-        },
-        highlightStyle: {
-          item: {
-            fillOpacity: 0.8,
-            stroke: '#000000',
-            strokeWidth: 2,
+          sectorLabel: {
+            enabled: true,
+            fontSize: 14,
+            fontWeight: "bold",
+            color: "#ffffff",
+            formatter: (params: any) => {
+              const percentage = (
+                (params.datum.value /
+                  data.reduce((sum, item) => sum + item.value, 0)) *
+                100
+              ).toFixed(1);
+              return `${params.datum.label}: ${percentage}%`;
+            },
           },
-        },
-        tooltip: {
-          enabled: true,
-          renderer: (params: any) => {
-            const percentage = ((params.datum.value / data.reduce((sum, item) => sum + item.value, 0)) * 100).toFixed(1)
-            return `<div class="bg-white p-2 rounded shadow-lg border">
+          highlightStyle: {
+            item: {
+              fillOpacity: 0.8,
+              stroke: "#000000",
+              strokeWidth: 2,
+            },
+          },
+          tooltip: {
+            enabled: true,
+            renderer: (params: any) => {
+              const percentage = (
+                (params.datum.value /
+                  data.reduce((sum, item) => sum + item.value, 0)) *
+                100
+              ).toFixed(1);
+              return `<div class="bg-white p-2 rounded shadow-lg border">
               <div class="font-bold">${params.datum.label}</div>
               <div class="text-sm">Count: ${params.datum.value}</div>
               <div class="text-sm">Percentage: ${percentage}%</div>
-            </div>`
+            </div>`;
+            },
           },
         },
+      ],
+      legend: {
+        enabled: true,
+        position: "right",
+        fontSize: 12,
+        marker: {
+          shape: "square",
+          size: 12,
+        },
       },
-    ],
-    legend: {
-      enabled: true,
-      position: 'right',
-      fontSize: 12,
-      marker: {
-        shape: 'square',
-        size: 12,
+      padding: {
+        top: 20,
+        right: 20,
+        bottom: 20,
+        left: 20,
       },
-    },
-    padding: {
-      top: 20,
-      right: 20,
-      bottom: 20,
-      left: 20,
-    },
-  }), [data, title])
+    }),
+    [data, title],
+  );
 
-  return <AgChartsReact options={chartOptions} />
-}
+  return <AgCharts options={chartOptions} />;
+}

apps/admin/src/components/charts/RevenueChart.tsx

@@ -1,99 +1,105 @@
-'use client'
+"use client";
 
-import React, { useMemo } from 'react'
-import { AgChartsReact } from 'ag-charts-react'
-import { AgChartOptions } from 'ag-charts-community'
+import React, { useMemo } from "react";
+import { AgCharts } from "ag-charts-react";
+import { AgChartOptions } from "ag-charts-community";
 
 interface BarData {
-  category: string
-  value: number
-  color?: string
+  category: string;
+  value: number;
+  color?: string;
 }
 
 interface RevenueChartProps {
-  data: BarData[]
-  title?: string
+  data: BarData[];
+  title?: string;
 }
 
-export function RevenueChart({ data, title = 'Monthly Revenue' }: RevenueChartProps) {
-  const chartOptions: AgChartOptions = useMemo(() => ({
-    title: {
-      text: title,
-      fontSize: 18,
-      fontWeight: 'bold',
-    },
-    data,
-    series: [
-      {
-        type: 'bar',
-        xKey: 'category',
-        yKey: 'value',
-        fills: data.map(item => item.color || '#10b981'),
-        strokes: ['#ffffff'],
-        strokeWidth: 2,
-        cornerRadius: 4,
-        highlightStyle: {
-          item: {
-            fill: '#059669',
-            stroke: '#ffffff',
-            strokeWidth: 2,
+export function RevenueChart({
+  data,
+  title = "Monthly Revenue",
+}: RevenueChartProps) {
+  const chartOptions: AgChartOptions = useMemo(
+    () => ({
+      title: {
+        text: title,
+        fontSize: 18,
+        fontWeight: "bold",
+      },
+      data,
+      series: [
+        {
+          type: "bar",
+          xKey: "category",
+          yKey: "value",
+          fills: data.map((item) => item.color || "#10b981"),
+          strokes: ["#ffffff"],
+          strokeWidth: 2,
+          cornerRadius: 4,
+          highlightStyle: {
+            item: {
+              fill: "#059669",
+              stroke: "#ffffff",
+              strokeWidth: 2,
+            },
           },
-        },
-        label: {
-          enabled: true,
-          position: 'top',
-          fontSize: 12,
-          fontWeight: 'bold',
-          color: '#374151',
-          formatter: (params: any) => `$${params.value.toLocaleString()}`,
-        },
-        tooltip: {
-          enabled: true,
-          renderer: (params: any) => {
-            return `<div class="bg-white p-2 rounded shadow-lg border">
+          label: {
+            enabled: true,
+            position: "top",
+            fontSize: 12,
+            fontWeight: "bold",
+            color: "#374151",
+            formatter: (params: any) => `$${params.value.toLocaleString()}`,
+          },
+          tooltip: {
+            enabled: true,
+            renderer: (params: any) => {
+              return `<div class="bg-white p-2 rounded shadow-lg border">
               <div class="font-bold">${params.datum.category}</div>
               <div class="text-sm">Revenue: $${params.datum.value.toLocaleString()}</div>
-            </div>`
+            </div>`;
+            },
           },
         },
+      ],
+      axes: [
+        {
+          type: "category",
+          position: "bottom",
+          title: {
+            text: "Month",
+            fontSize: 14,
+          },
+          label: {
+            fontSize: 12,
+            rotation: 45,
+          },
+        },
+        {
+          type: "number",
+          position: "left",
+          title: {
+            text: "Revenue ($)",
+            fontSize: 14,
+          },
+          label: {
+            fontSize: 12,
+            formatter: (params: any) => `$${params.value.toLocaleString()}`,
+          },
+        },
+      ],
+      legend: {
+        enabled: false,
       },
-    ],
-    axes: [
-      {
-        type: 'category',
-        position: 'bottom',
-        title: {
-          text: 'Month',
-          fontSize: 14,
-        },
-        label: {
-          fontSize: 12,
-          rotation: 45,
-        },
+      padding: {
+        top: 20,
+        right: 20,
+        bottom: 60,
+        left: 80,
       },
-      {
-        type: 'number',
-        position: 'left',
-        title: {
-          text: 'Revenue ($)',
-          fontSize: 14,
-        },
-        label: {
-          fontSize: 12,
-          formatter: (params: any) => `$${params.value.toLocaleString()}`,
-        },
-      },
-    ],
-    legend: {
-      enabled: false,
-    },
-    padding: {
-      top: 20,
-      right: 20,
-      bottom: 60,
-      left: 80,
-    },
-  }), [data, title])
+    }),
+    [data, title],
+  );
 
-  return <AgChartsReact options={chartOptions} />
-}
+  return <AgCharts options={chartOptions} />;
+}

apps/admin/src/components/charts/UserGrowthChart.tsx

@@ -1,78 +1,84 @@
-'use client'
+"use client";
 
-import React, { useMemo } from 'react'
-import { AgChartsReact } from 'ag-charts-react'
-import { AgChartOptions } from 'ag-charts-community'
+import React, { useMemo } from "react";
+import { AgCharts } from "ag-charts-react";
+import { AgChartOptions } from "ag-charts-community";
 
 interface ChartData {
-  label: string
-  value: number
-  color?: string
+  label: string;
+  value: number;
+  color?: string;
 }
 
 interface UserGrowthChartProps {
-  data: ChartData[]
-  title?: string
+  data: ChartData[];
+  title?: string;
 }
 
-export function UserGrowthChart({ data, title = 'User Growth' }: UserGrowthChartProps) {
-  const chartOptions: AgChartOptions = useMemo(() => ({
-    title: {
-      text: title,
-      fontSize: 18,
-      fontWeight: 'bold',
-    },
-    data,
-    series: [
-      {
-        type: 'line',
-        xKey: 'label',
-        yKey: 'value',
-        stroke: '#3b82f6',
-        strokeWidth: 3,
-        marker: {
-          size: 6,
-          fill: '#3b82f6',
-          stroke: '#ffffff',
-          strokeWidth: 2,
-        },
-        highlightStyle: {
-          item: {
-            fill: '#1d4ed8',
-            stroke: '#ffffff',
+export function UserGrowthChart({
+  data,
+  title = "User Growth",
+}: UserGrowthChartProps) {
+  const chartOptions: AgChartOptions = useMemo(
+    () => ({
+      title: {
+        text: title,
+        fontSize: 18,
+        fontWeight: "bold",
+      },
+      data,
+      series: [
+        {
+          type: "line",
+          xKey: "label",
+          yKey: "value",
+          stroke: "#3b82f6",
+          strokeWidth: 3,
+          marker: {
+            size: 6,
+            fill: "#3b82f6",
+            stroke: "#ffffff",
             strokeWidth: 2,
           },
+          highlightStyle: {
+            item: {
+              fill: "#1d4ed8",
+              stroke: "#ffffff",
+              strokeWidth: 2,
+            },
+          },
         },
-      },
-    ],
-    axes: [
-      {
-        type: 'category',
-        position: 'bottom',
-        title: {
-          text: 'Time Period',
-          fontSize: 14,
+      ],
+      axes: [
+        {
+          type: "category",
+          position: "bottom",
+          title: {
+            text: "Time Period",
+            fontSize: 14,
+          },
         },
-      },
-      {
-        type: 'number',
-        position: 'left',
-        title: {
-          text: 'Number of Users',
-          fontSize: 14,
+        {
+          type: "number",
+          position: "left",
+          title: {
+            text: "Number of Users",
+            fontSize: 14,
+          },
         },
+      ],
+      legend: {
+        enabled: false,
       },
-    ],
-    legend: {
-      enabled: false,
-    },
-    padding: {
-      top: 20,
-      right: 20,
-      bottom: 20,
-      left: 20,
-    },
-  }), [data, title])
+      padding: {
+        top: 20,
+        right: 20,
+        bottom: 20,
+        left: 20,
+      },
+    }),
+    [data, title],
+  );
 
-  return <AgChartsReact options={chartOptions} />
-}
+  return <AgCharts options={chartOptions} />;
+}

apps/admin/src/components/users/UserGrid.tsx

@@ -1,167 +1,248 @@
-'use client'
+"use client";
 
-import React, { useState, useMemo } from 'react'
-import { AgGridReact } from 'ag-grid-react'
-import { ColDef } from 'ag-grid-community'
-import 'ag-grid-community/styles/ag-grid.css'
-import 'ag-grid-community/styles/ag-theme-alpine.css'
-import { formatDate } from '@/lib/utils'
+import React, { useState, useMemo } from "react";
+import { AgGridReact } from "ag-grid-react";
+import { ColDef, ModuleRegistry, AllCommunityModule } from "ag-grid-community";
+import "ag-grid-community/styles/ag-grid.css";
+import "ag-grid-community/styles/ag-theme-alpine.css";
+import { formatDate } from "@/lib/utils";
+
+ModuleRegistry.registerModules([AllCommunityModule]);
 
 interface User {
-  id: string
-  email: string
-  firstName: string
-  lastName: string
-  role: string
-  phone?: string
-  createdAt: Date
+  id: string;
+  email: string;
+  firstName: string;
+  lastName: string;
+  role: string;
+  phone?: string;
+  createdAt: Date;
   client?: {
-    id: string
-    membershipType: string
-    membershipStatus: string
-    joinDate: Date
-    lastVisit?: Date
-  }
+    id: string;
+    membershipType: string;
+    membershipStatus: string;
+    joinDate: Date;
+    lastVisit?: Date;
+  };
 }
 
 interface UserGridProps {
-  users: User[]
-  onUserSelect?: (user: User) => void
-  loading?: boolean
+  users: User[];
+  onUserSelect?: (user: User) => void;
+  onEditUser?: (user: User) => void;
+  onDeleteUser?: (user: User) => void;
+  onBulkDelete?: (users: User[]) => void;
+  loading?: boolean;
 }
 
-export function UserGrid({ users, onUserSelect, loading = false }: UserGridProps) {
-  const [selectedUser, setSelectedUser] = useState<User | null>(null)
+export function UserGrid({
+  users,
+  onUserSelect,
+  onEditUser,
+  onDeleteUser,
+  onBulkDelete,
+  loading = false,
+}: UserGridProps) {
+  const [selectedUsers, setSelectedUsers] = useState<User[]>([]);
+  const [searchQuery, setSearchQuery] = useState<string>("");
 
-  const columnDefs: ColDef<User>[] = useMemo(() => [
-    {
-      headerName: 'Name',
-      valueGetter: (params) => `${params.data?.firstName} ${params.data?.lastName}`,
-      filter: 'agTextColumnFilter',
-      sortable: true,
-      minWidth: 150,
-    },
-    {
-      headerName: 'Email',
-      field: 'email',
-      filter: 'agTextColumnFilter',
-      sortable: true,
-      minWidth: 200,
-    },
-    {
-      headerName: 'Role',
-      field: 'role',
-      filter: 'agSetColumnFilter',
-      sortable: true,
-      cellRenderer: (params: any) => {
-        const roleColors = {
-          admin: 'bg-purple-100 text-purple-800',
-          trainer: 'bg-blue-100 text-blue-800',
-          client: 'bg-green-100 text-green-800',
-        }
-        const colorClass = roleColors[params.value as keyof typeof roleColors] || 'bg-gray-100 text-gray-800'
-        return `<span class="px-2 py-1 rounded text-xs font-medium ${colorClass}">${params.value}</span>`
+  const columnDefs: ColDef<User>[] = useMemo(
+    () => [
+      {
+        headerName: "Name",
+        valueGetter: (params) =>
+          `${params.data?.firstName} ${params.data?.lastName}`,
+        filter: "agTextColumnFilter",
+        sortable: true,
+        minWidth: 150,
       },
-      minWidth: 120,
-    },
-    {
-      headerName: 'Phone',
-      field: 'phone',
-      filter: 'agTextColumnFilter',
-      sortable: true,
-      minWidth: 130,
-    },
-    {
-      headerName: 'Membership',
-      valueGetter: (params) => params.data?.client?.membershipType || 'N/A',
-      filter: 'agSetColumnFilter',
-      sortable: true,
-      cellRenderer: (params: any) => {
-        if (!params.value || params.value === 'N/A') return 'N/A'
-        
-        const membershipColors = {
-          vip: 'bg-yellow-100 text-yellow-800',
-          premium: 'bg-blue-100 text-blue-800',
-          basic: 'bg-gray-100 text-gray-800',
-        }
-        const colorClass = membershipColors[params.value as keyof typeof membershipColors] || 'bg-gray-100 text-gray-800'
-        return `<span class="px-2 py-1 rounded text-xs font-medium ${colorClass}">${params.value}</span>`
+      {
+        headerName: "Email",
+        field: "email",
+        filter: "agTextColumnFilter",
+        sortable: true,
+        minWidth: 200,
       },
-      minWidth: 120,
-    },
-    {
-      headerName: 'Status',
-      valueGetter: (params) => params.data?.client?.membershipStatus || 'N/A',
-      filter: 'agSetColumnFilter',
-      sortable: true,
-      cellRenderer: (params: any) => {
-        if (!params.value || params.value === 'N/A') return 'N/A'
-        
-        const statusColors = {
-          active: 'bg-green-100 text-green-800',
-          inactive: 'bg-red-100 text-red-800',
-          suspended: 'bg-yellow-100 text-yellow-800',
-        }
-        const colorClass = statusColors[params.value as keyof typeof statusColors] || 'bg-gray-100 text-gray-800'
-        return `<span class="px-2 py-1 rounded text-xs font-medium ${colorClass}">${params.value}</span>`
+      {
+        headerName: "Role",
+        field: "role",
+        filter: "agTextColumnFilter",
+        sortable: true,
+        cellRenderer: (params: any) => {
+          const roleColors = {
+            admin: "bg-purple-100 text-purple-800",
+            trainer: "bg-blue-100 text-blue-800",
+            client: "bg-green-100 text-green-800",
+          };
+          const colorClass =
+            roleColors[params.value as keyof typeof roleColors] ||
+            "bg-gray-100 text-gray-800";
+          return `<span class="px-2 py-1 rounded text-xs font-medium ${colorClass}">${params.value}</span>`;
+        },
+        minWidth: 120,
       },
-      minWidth: 120,
-    },
-    {
-      headerName: 'Join Date',
-      valueGetter: (params) => params.data?.client?.joinDate || params.data?.createdAt,
-      filter: 'agDateColumnFilter',
-      sortable: true,
-      valueFormatter: (params: any) => formatDate(new Date(params.value)),
-      minWidth: 120,
-    },
-    {
-      headerName: 'Last Visit',
-      valueGetter: (params) => params.data?.client?.lastVisit,
-      filter: 'agDateColumnFilter',
-      sortable: true,
-      valueFormatter: (params: any) => params.value ? formatDate(new Date(params.value)) : 'Never',
-      minWidth: 120,
-    },
-  ], [])
+      {
+        headerName: "Phone",
+        field: "phone",
+        filter: "agTextColumnFilter",
+        sortable: true,
+        minWidth: 130,
+      },
+      {
+        headerName: "Membership",
+        valueGetter: (params) => params.data?.client?.membershipType || "N/A",
+        filter: "agTextColumnFilter",
+        sortable: true,
+        cellRenderer: (params: any) => {
+          if (!params.value || params.value === "N/A") return "N/A";
 
-  const defaultColDef: ColDef = useMemo(() => ({
-    flex: 1,
-    resizable: true,
-    floatingFilter: true,
-    suppressMenu: true,
-  }), [])
+          const membershipColors = {
+            vip: "bg-yellow-100 text-yellow-800",
+            premium: "bg-blue-100 text-blue-800",
+            basic: "bg-gray-100 text-gray-800",
+          };
+          const colorClass =
+            membershipColors[params.value as keyof typeof membershipColors] ||
+            "bg-gray-100 text-gray-800";
+          return `<span class="px-2 py-1 rounded text-xs font-medium ${colorClass}">${params.value}</span>`;
+        },
+        minWidth: 120,
+      },
+      {
+        headerName: "Status",
+        valueGetter: (params) => params.data?.client?.membershipStatus || "N/A",
+        filter: "agTextColumnFilter",
+        sortable: true,
+        cellRenderer: (params: any) => {
+          if (!params.value || params.value === "N/A") return "N/A";
 
-  const onSelectionChanged = () => {
-    const selectedNodes = gridRef.current?.api.getSelectedNodes()
-    if (selectedNodes?.length > 0) {
-      const user = selectedNodes[0].data
-      setSelectedUser(user)
-      onUserSelect?.(user)
-    }
-  }
+          const statusColors = {
+            active: "bg-green-100 text-green-800",
+            inactive: "bg-red-100 text-red-800",
+            suspended: "bg-yellow-100 text-yellow-800",
+          };
+          const colorClass =
+            statusColors[params.value as keyof typeof statusColors] ||
+            "bg-gray-100 text-gray-800";
+          return `<span class="px-2 py-1 rounded text-xs font-medium ${colorClass}">${params.value}</span>`;
+        },
+        minWidth: 120,
+      },
+      {
+        headerName: "Join Date",
+        valueGetter: (params) =>
+          params.data?.client?.joinDate || params.data?.createdAt,
+        filter: "agDateColumnFilter",
+        sortable: true,
+        valueFormatter: (params: any) => formatDate(new Date(params.value)),
+        minWidth: 120,
+      },
+      {
+        headerName: "Last Visit",
+        valueGetter: (params) => params.data?.client?.lastVisit,
+        filter: "agDateColumnFilter",
+        sortable: true,
+        valueFormatter: (params: any) =>
+          params.value ? formatDate(new Date(params.value)) : "Never",
+        minWidth: 120,
+      },
+    ],
+    [],
+  );
 
-  const gridRef = React.useRef<AgGridReact<User>>(null)
+  const defaultColDef: ColDef = useMemo(
+    () => ({
+      flex: 1,
+      resizable: true,
+      floatingFilter: true,
+      suppressMenu: true,
+    }),
+    [],
+  );
+
+  const gridRef = React.useRef<AgGridReact<User>>(null);
 
   const gridOptions = {
+    theme: "legacy",
     columnDefs,
     defaultColDef,
     rowData: users,
-    rowSelection: 'single',
-    onSelectionChanged,
-    enableRangeSelection: true,
-    enableCellTextSelection: true,
+    rowSelection: "multiple",
+    onSelectionChanged: () => {
+      const selectedNodes = gridRef.current?.api.getSelectedNodes();
+      const selectedData = selectedNodes?.map((node) => node.data) || [];
+      setSelectedUsers(selectedData);
+      if (selectedData.length === 1 && onUserSelect) {
+        onUserSelect(selectedData[0]);
+      }
+    },
     suppressRowClickSelection: false,
     animateRows: true,
     loading: loading,
     pagination: true,
     paginationPageSize: 20,
     paginationPageSizeSelector: [10, 20, 50, 100],
-  }
+    quickFilterText: searchQuery,
+  };
+
+  const handleEdit = () => {
+    if (selectedUsers.length === 1 && onEditUser) {
+      onEditUser(selectedUsers[0]);
+    }
+  };
+
+  const handleDelete = () => {
+    if (selectedUsers.length === 1 && onDeleteUser) {
+      onDeleteUser(selectedUsers[0]);
+    }
+  };
+
+  const handleBulkDelete = () => {
+    if (selectedUsers.length > 0 && onBulkDelete) {
+      onBulkDelete(selectedUsers);
+    }
+  };
 
   return (
-    <div className="ag-theme-alpine" style={{ height: '600px', width: '100%' }}>
-      <AgGridReact<User> {...gridOptions} ref={gridRef} />
+    <div>
+      <div className="flex justify-between items-center mb-4">
+        <input
+          type="text"
+          placeholder="Search users..."
+          className="border border-gray-300 rounded px-4 py-2"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+        />
+        <div className="flex gap-2">
+          <button
+            className="bg-green-500 text-white px-4 py-2 rounded disabled:opacity-50"
+            onClick={handleEdit}
+            disabled={selectedUsers.length !== 1}
+          >
+            Edit User
+          </button>
+          <button
+            className="bg-red-500 text-white px-4 py-2 rounded disabled:opacity-50"
+            onClick={handleDelete}
+            disabled={selectedUsers.length !== 1}
+          >
+            Delete User
+          </button>
+          <button
+            className="bg-yellow-500 text-white px-4 py-2 rounded disabled:opacity-50"
+            onClick={handleBulkDelete}
+            disabled={selectedUsers.length === 0}
+          >
+            Bulk Delete
+          </button>
+        </div>
+      </div>
+      <div
+        className="ag-theme-alpine"
+        style={{ height: "600px", width: "100%" }}
+      >
+        <AgGridReact<User> {...gridOptions} ref={gridRef} />
+      </div>
     </div>
-  )
-}
+  );
+}

apps/admin/src/components/users/UserManagement.tsx

@@ -1,85 +1,182 @@
-'use client'
+"use client";
 
-import { useState, useEffect } from 'react'
-import { UserGrid } from '@/components/users/UserGrid'
-import { Button } from '@/components/ui/Button'
-import { Card, CardHeader, CardContent } from '@/components/ui/Card'
+import { useState, useEffect } from "react";
+import { UserGrid } from "@/components/users/UserGrid";
+import { Button } from "@/components/ui/Button";
+import { Card, CardHeader, CardContent } from "@/components/ui/Card";
 
 interface User {
-  id: string
-  email: string
-  firstName: string
-  lastName: string
-  role: string
-  phone?: string
-  createdAt: Date
+  id: string;
+  email: string;
+  firstName: string;
+  lastName: string;
+  role: string;
+  phone?: string;
+  createdAt: Date;
   client?: {
-    id: string
-    membershipType: string
-    membershipStatus: string
-    joinDate: Date
-    lastVisit?: Date
-  }
+    id: string;
+    membershipType: string;
+    membershipStatus: string;
+    joinDate: Date;
+    lastVisit?: Date;
+  };
 }
 
 export function UserManagement() {
-  const [users, setUsers] = useState<User[]>([])
-  const [loading, setLoading] = useState(true)
-  const [filter, setFilter] = useState<string>('all')
-  const [selectedUser, setSelectedUser] = useState<User | null>(null)
+  const [users, setUsers] = useState<User[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [filter, setFilter] = useState<string>("all");
+  const [selectedUser, setSelectedUser] = useState<User | null>(null);
+  const [isEditing, setIsEditing] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [editForm, setEditForm] = useState<{
+    firstName: string;
+    lastName: string;
+    email: string;
+    role: string;
+    phone: string;
+  } | null>(null);
 
   useEffect(() => {
-    fetchUsers()
-  }, [filter])
+    fetchUsers();
+  }, [filter]);
 
   const fetchUsers = async () => {
-    setLoading(true)
+    setLoading(true);
     try {
-      const url = filter === 'all' 
-        ? '/api/users' 
-        : `/api/users?role=${filter}`
-      
-      const response = await fetch(url)
-      const data = await response.json()
-      setUsers(data.users || [])
-    } catch (error) {
-      console.error('Failed to fetch users:', error)
-    } finally {
-      setLoading(false)
-    }
-  }
+      const url = filter === "all" ? "/api/users" : `/api/users?role=${filter}`;
 
-  const handleUserSelect = (user: User) => {
-    setSelectedUser(user)
-  }
+      const response = await fetch(url);
+      const data = await response.json();
+      setUsers(data.users || []);
+    } catch (error) {
+      console.error("Failed to fetch users:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleUserSelect = (user: User | null) => {
+    setSelectedUser(user);
+  };
+
+  const handleEditUser = (user: User) => {
+    setSelectedUser(user);
+    setEditForm({
+      firstName: user.firstName,
+      lastName: user.lastName,
+      email: user.email,
+      role: user.role,
+      phone: user.phone || "",
+    });
+    setIsEditing(true);
+  };
+
+  const handleDeleteUser = (user: User) => {
+    setSelectedUser(user);
+    setIsDeleting(true);
+  };
+
+  const handleBulkDelete = async (users: User[]) => {
+    if (users.length === 0) return;
+
+    if (!confirm(`Are you sure you want to delete ${users.length} users?`))
+      return;
+
+    try {
+      const response = await fetch("/api/users", {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ ids: users.map((u) => u.id) }),
+      });
+      if (response.ok) {
+        fetchUsers();
+      } else {
+        alert("Error deleting users");
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
 
   const handleExport = () => {
     const csvContent = [
-      ['Name', 'Email', 'Role', 'Phone', 'Membership', 'Status', 'Join Date', 'Last Visit'],
-      ...users.map(user => [
+      [
+        "Name",
+        "Email",
+        "Role",
+        "Phone",
+        "Membership",
+        "Status",
+        "Join Date",
+        "Last Visit",
+      ],
+      ...users.map((user) => [
         `${user.firstName} ${user.lastName}`,
         user.email,
         user.role,
-        user.phone || '',
-        user.client?.membershipType || '',
-        user.client?.membershipStatus || '',
+        user.phone || "",
+        user.client?.membershipType || "",
+        user.client?.membershipStatus || "",
         user.client?.joinDate || user.createdAt,
-        user.client?.lastVisit || ''
-      ])
-    ].map(row => row.join(',')).join('\n')
+        user.client?.lastVisit || "",
+      ]),
+    ]
+      .map((row) => row.join(","))
+      .join("\n");
 
-    const blob = new Blob([csvContent], { type: 'text/csv' })
-    const url = window.URL.createObjectURL(blob)
-    const a = document.createElement('a')
-    a.href = url
-    a.download = `users_${new Date().toISOString().split('T')[0]}.csv`
-    a.click()
-    window.URL.revokeObjectURL(url)
-  }
+    const blob = new Blob([csvContent], { type: "text/csv" });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `users_${new Date().toISOString().split("T")[0]}.csv`;
+    a.click();
+    window.URL.revokeObjectURL(url);
+  };
 
   const handleRefresh = () => {
-    fetchUsers()
-  }
+    fetchUsers();
+  };
+
+  const handleSaveEdit = async () => {
+    if (!editForm || !selectedUser) return;
+
+    try {
+      const response = await fetch("/api/users", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ id: selectedUser.id, ...editForm }),
+      });
+      if (response.ok) {
+        setIsEditing(false);
+        setEditForm(null);
+        fetchUsers();
+      } else {
+        alert("Error updating user");
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const handleDeleteConfirm = async () => {
+    if (!selectedUser) return;
+
+    try {
+      const response = await fetch(`/api/users?id=${selectedUser.id}`, {
+        method: "DELETE",
+      });
+      if (response.ok) {
+        setIsDeleting(false);
+        setSelectedUser(null);
+        fetchUsers();
+      } else {
+        alert("Error deleting user");
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
 
   return (
     <div className="space-y-6">
@@ -87,26 +184,40 @@ export function UserManagement() {
         <h2 className="text-2xl font-bold">User Management</h2>
         <div className="flex gap-2">
           <Button
-            variant={filter === 'all' ? 'primary' : 'secondary'}
-            onClick={() => setFilter('all')}
+            variant={filter === "all" ? "primary" : "secondary"}
+            onClick={() => setFilter("all")}
           >
             All Users
           </Button>
           <Button
-            variant={filter === 'client' ? 'primary' : 'secondary'}
-            onClick={() => setFilter('client')}
+            variant="secondary"
+            onClick={handleEditUser}
+            disabled={!selectedUser}
+          >
+            Edit User
+          </Button>
+          <Button
+            variant="secondary"
+            onClick={handleDeleteUser}
+            disabled={!selectedUser}
+          >
+            Delete User
+          </Button>
+          <Button
+            variant={filter === "client" ? "primary" : "secondary"}
+            onClick={() => setFilter("client")}
           >
             Clients
           </Button>
           <Button
-            variant={filter === 'trainer' ? 'primary' : 'secondary'}
-            onClick={() => setFilter('trainer')}
+            variant={filter === "trainer" ? "primary" : "secondary"}
+            onClick={() => setFilter("trainer")}
           >
             Trainers
           </Button>
           <Button
-            variant={filter === 'admin' ? 'primary' : 'secondary'}
-            onClick={() => setFilter('admin')}
+            variant={filter === "admin" ? "primary" : "secondary"}
+            onClick={() => setFilter("admin")}
           >
             Admins
           </Button>
@@ -134,14 +245,142 @@ export function UserManagement() {
 
       <Card>
         <CardContent className="p-0">
-          <UserGrid 
-            users={users} 
-            onUserSelect={handleUserSelect}
+          <UserGrid
+            users={users}
+            onUserSelect={(user) => handleUserSelect(user)}
+            onEditUser={handleEditUser}
+            onDeleteUser={handleDeleteUser}
+            onBulkDelete={handleBulkDelete}
             loading={loading}
           />
         </CardContent>
       </Card>
 
+      {isEditing && editForm && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white p-6 rounded-lg shadow-lg max-w-md w-full">
+            <h3 className="text-lg font-semibold mb-4">Edit User</h3>
+            <form
+              onSubmit={(e) => {
+                e.preventDefault();
+                handleSaveEdit();
+              }}
+            >
+              <div className="mb-4">
+                <label className="block text-sm font-medium mb-1">
+                  First Name
+                </label>
+                <input
+                  type="text"
+                  value={editForm.firstName}
+                  onChange={(e) =>
+                    setEditForm({ ...editForm, firstName: e.target.value })
+                  }
+                  className="w-full border border-gray-300 rounded px-3 py-2"
+                  required
+                />
+              </div>
+              <div className="mb-4">
+                <label className="block text-sm font-medium mb-1">
+                  Last Name
+                </label>
+                <input
+                  type="text"
+                  value={editForm.lastName}
+                  onChange={(e) =>
+                    setEditForm({ ...editForm, lastName: e.target.value })
+                  }
+                  className="w-full border border-gray-300 rounded px-3 py-2"
+                  required
+                />
+              </div>
+              <div className="mb-4">
+                <label className="block text-sm font-medium mb-1">Email</label>
+                <input
+                  type="email"
+                  value={editForm.email}
+                  onChange={(e) =>
+                    setEditForm({ ...editForm, email: e.target.value })
+                  }
+                  className="w-full border border-gray-300 rounded px-3 py-2"
+                  required
+                />
+              </div>
+              <div className="mb-4">
+                <label className="block text-sm font-medium mb-1">Role</label>
+                <select
+                  value={editForm.role}
+                  onChange={(e) =>
+                    setEditForm({ ...editForm, role: e.target.value })
+                  }
+                  className="w-full border border-gray-300 rounded px-3 py-2"
+                  required
+                >
+                  <option value="client">Client</option>
+                  <option value="trainer">Trainer</option>
+                  <option value="admin">Admin</option>
+                </select>
+              </div>
+              <div className="mb-4">
+                <label className="block text-sm font-medium mb-1">Phone</label>
+                <input
+                  type="tel"
+                  value={editForm.phone}
+                  onChange={(e) =>
+                    setEditForm({ ...editForm, phone: e.target.value })
+                  }
+                  className="w-full border border-gray-300 rounded px-3 py-2"
+                />
+              </div>
+              <div className="flex justify-end gap-2">
+                <button
+                  type="button"
+                  onClick={() => {
+                    setIsEditing(false);
+                    setEditForm(null);
+                  }}
+                  className="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+                >
+                  Save
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {isDeleting && selectedUser && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white p-6 rounded-lg shadow-lg max-w-md w-full">
+            <h3 className="text-lg font-semibold mb-4">Delete User</h3>
+            <p className="mb-4">
+              Are you sure you want to delete {selectedUser.firstName}{" "}
+              {selectedUser.lastName}? This action cannot be undone.
+            </p>
+            <div className="flex justify-end gap-2">
+              <button
+                onClick={() => setIsDeleting(false)}
+                className="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleDeleteConfirm}
+                className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
+              >
+                Delete
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {selectedUser && (
         <Card>
           <CardHeader>
@@ -152,22 +391,55 @@ export function UserManagement() {
               <div>
                 <h4 className="font-medium mb-2">Basic Information</h4>
                 <div className="space-y-1 text-sm">
-                  <p><span className="font-medium">Name:</span> {selectedUser.firstName} {selectedUser.lastName}</p>
-                  <p><span className="font-medium">Email:</span> {selectedUser.email}</p>
-                  <p><span className="font-medium">Phone:</span> {selectedUser.phone || 'N/A'}</p>
-                  <p><span className="font-medium">Role:</span> {selectedUser.role}</p>
-                  <p><span className="font-medium">Joined:</span> {selectedUser.createdAt.toLocaleDateString()}</p>
+                  <p>
+                    <span className="font-medium">Name:</span>{" "}
+                    {selectedUser.firstName} {selectedUser.lastName}
+                  </p>
+                  <p>
+                    <span className="font-medium">Email:</span>{" "}
+                    {selectedUser.email}
+                  </p>
+                  <p>
+                    <span className="font-medium">Phone:</span>{" "}
+                    {selectedUser.phone || "N/A"}
+                  </p>
+                  <p>
+                    <span className="font-medium">Role:</span>{" "}
+                    {selectedUser.role}
+                  </p>
+                  <p>
+                    <span className="font-medium">Joined:</span>{" "}
+                    {new Date(selectedUser.createdAt).toLocaleDateString()}
+                  </p>
                 </div>
               </div>
-              
+
               {selectedUser.client && (
                 <div>
                   <h4 className="font-medium mb-2">Client Information</h4>
                   <div className="space-y-1 text-sm">
-                    <p><span className="font-medium">Membership:</span> {selectedUser.client.membershipType}</p>
-                    <p><span className="font-medium">Status:</span> {selectedUser.client.membershipStatus}</p>
-                    <p><span className="font-medium">Member Since:</span> {selectedUser.client.joinDate.toLocaleDateString()}</p>
-                    <p><span className="font-medium">Last Visit:</span> {selectedUser.client.lastVisit?.toLocaleDateString() || 'Never'}</p>
+                    <p>
+                      <span className="font-medium">Membership:</span>{" "}
+                      {selectedUser.client.membershipType}
+                    </p>
+                    <p>
+                      <span className="font-medium">Status:</span>{" "}
+                      {selectedUser.client.membershipStatus}
+                    </p>
+                    <p>
+                      <span className="font-medium">Member Since:</span>{" "}
+                      {new Date(
+                        selectedUser.client.joinDate,
+                      ).toLocaleDateString()}
+                    </p>
+                    <p>
+                      <span className="font-medium">Last Visit:</span>{" "}
+                      {selectedUser.client.lastVisit
+                        ? new Date(
+                            selectedUser.client.lastVisit,
+                          ).toLocaleDateString()
+                        : "Never"}
+                    </p>
                   </div>
                 </div>
               )}
@@ -176,5 +448,5 @@ export function UserManagement() {
         </Card>
       )}
     </div>
-  )
-}
+  );
+}

apps/admin/tsconfig.json

@@ -15,7 +15,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {

apps/mobile/package.json

@@ -14,16 +14,16 @@
     "test": "jest"
   },
   "dependencies": {
-    "@expo/vector-icons": "^15.0.3",
+    "@expo/vector-icons": "^15.0.0",
     "@hookform/resolvers": "^3.3.0",
     "@tanstack/react-query": "^5.0.0",
     "ajv": "^8.12.0",
     "ajv-keywords": "^5.1.0",
     "axios": "^1.6.0",
-    "expo": "~54.0.0",
-    "expo-camera": "~17.0.9",
-    "expo-linking": "~8.0.8",
-    "expo-notifications": "~0.32.12",
+    "expo": "~54.0.23",
+    "expo-camera": "~17.0.0",
+    "expo-linking": "~8.0.0",
+    "expo-notifications": "~0.32.0",
     "expo-router": "~6.0.14",
     "expo-secure-store": "~15.0.7",
     "react": "19.1.0",
@@ -44,6 +44,6 @@
     "jest": "^29.2.1",
     "@testing-library/react-native": "^12.4.0",
     "react-test-renderer": "19.1.0",
-    "babel-preset-expo": "~54.0.0"
+    "babel-preset-expo": "~54.0.7"
   }
 }

improvements.md

@@ -0,0 +1,72 @@
+prototype/improvements.md
+```
+
+### Improvements for FitAI Solution
+
+#### 1. Database Implementation
+- Replace in-memory storage with a persistent database (e.g., PostgreSQL or MongoDB).
+- Integrate Drizzle ORM for database schema management.
+- Create database migration scripts for seamless updates.
+- Implement connection pooling for better scalability.
+
+#### 2. Enhanced User Management
+- Add CRUD operations for user management (edit, delete, deactivate).
+- Implement bulk user operations for efficiency.
+- Introduce user search and pagination for better navigation.
+- Develop user activity logs for tracking changes and actions.
+
+#### 3. Payment System
+- Design a payment schema and corresponding API endpoints.
+- Enable payment status tracking and history for clients.
+- Automate payment reminders to improve collection rates.
+
+#### 4. Attendance Tracking
+- Develop check-in/check-out functionality using QR codes or NFC.
+- Provide attendance analytics and reporting tools.
+- Integrate class scheduling for better attendance management.
+
+#### 5. Notifications System
+- Set up push notifications for real-time updates.
+- Implement email and SMS notifications for broader reach.
+- Allow users to customize notification preferences.
+
+#### 6. Mobile App Enhancements
+- Add offline mode support for uninterrupted usage.
+- Introduce workout tracking and progress monitoring features.
+- Enable users to upload progress photos and measurements.
+- Provide goal-setting and tracking functionalities.
+
+#### 7. Admin Dashboard Improvements
+- Add advanced analytics for revenue, retention, and peak hours.
+- Develop a KPI dashboard for real-time business insights.
+- Introduce member retention analytics to identify at-risk clients.
+
+#### 8. Trainer Features
+- Assign trainers to clients for personalized service.
+- Enable trainers to create and manage workout plans.
+- Provide tools for tracking client progress.
+- Develop a communication system for trainers and clients.
+
+#### 9. AI Integration
+- Build a workout recommendation engine using AI.
+- Develop progress prediction algorithms for clients.
+- Provide nutrition suggestions based on user data.
+- Assess injury risks using predictive analytics.
+
+#### 10. Technical Enhancements
+- Add comprehensive error boundaries for better fault tolerance.
+- Implement a robust logging and monitoring system.
+- Set up a CI/CD pipeline for automated deployments.
+- Optimize performance with caching and API rate limiting.
+
+#### 11. Security Improvements
+- Add input sanitization and security headers.
+- Implement advanced authentication mechanisms.
+- Introduce API rate limiting to prevent abuse.
+- Conduct regular security audits to identify vulnerabilities.
+
+#### 12. Long-Term Goals
+- Transition to a microservices architecture for scalability.
+- Support multi-tenancy for broader market reach.
+- Add internationalization for global adoption.
+- Develop a Progressive Web App (PWA) for better accessibility.

nextsteps.md

@@ -0,0 +1,110 @@
+prototype/nextsteps.md
+```
+
+```prototype/nextsteps.md
+# Next Steps for FitAI Solution
+
+## Phase 1: Core Features (High Priority)
+
+### 1. Database Implementation
+- Replace in-memory storage with a persistent database (e.g., PostgreSQL or MongoDB).
+- Set up Drizzle ORM for database schema management.
+- Create and test database migration scripts.
+- Implement database connection pooling for scalability.
+
+### 2. Enhanced User Management
+- Add CRUD operations for users (edit, delete, deactivate).
+- Implement bulk user operations for efficiency.
+- Introduce user search and pagination for better navigation.
+- Develop user activity logs for tracking changes.
+
+### 3. Payment System
+- Design and implement a payment schema and API endpoints.
+- Enable payment status tracking and history for clients.
+- Automate payment reminders via email or push notifications.
+
+### 4. Attendance Tracking
+- Build check-in/check-out functionality for clients.
+- Integrate QR code or NFC-based check-in systems.
+- Develop attendance analytics and reporting tools.
+- Add class scheduling and attendance tracking features.
+
+## Phase 2: Advanced Features (Medium Priority)
+
+### 1. Notifications System
+- Set up push notifications for mobile apps.
+- Implement email and SMS notifications for critical updates.
+- Allow users to customize notification preferences.
+
+### 2. Enhanced Mobile Features
+- Add offline mode support for mobile apps.
+- Introduce workout tracking and progress monitoring.
+- Enable users to upload progress photos and measurements.
+- Develop goal-setting and tracking features.
+
+### 3. Admin Analytics
+- Build a dashboard for key metrics and KPIs.
+- Add revenue tracking and member retention analytics.
+- Analyze peak hours and usage trends for better planning.
+
+### 4. Trainer Features
+- Enable trainer-client assignment and management.
+- Develop tools for creating and sharing workout plans.
+- Add progress tracking tools for trainers.
+- Implement a communication system between trainers and clients.
+
+## Phase 3: AI Integration (Low Priority)
+
+### 1. Fitness AI
+- Develop a workout recommendation engine using AI.
+- Implement progress prediction algorithms for clients.
+- Add nutrition suggestions based on user goals.
+- Introduce injury risk assessment tools.
+
+### 2. Business Intelligence
+- Build predictive analytics for user behavior and trends.
+- Implement churn prediction models to retain clients.
+- Optimize revenue streams using AI-driven insights.
+- Plan capacity and resource allocation with AI.
+
+## Technical Debt and Improvements
+
+### Immediate (Next Sprint)
+- Add comprehensive error boundaries for better user experience.
+- Implement a robust logging system for debugging and monitoring.
+- Write unit and integration tests for critical functionality.
+- Set up a CI/CD pipeline for automated testing and deployment.
+- Add input sanitization and security headers to APIs.
+
+### Medium Term
+- Introduce proper state management (e.g., Redux or Zustand).
+- Implement API rate limiting to prevent abuse.
+- Develop a caching strategy for frequently accessed data.
+- Set up monitoring and alerting systems for production.
+- Optimize performance for both admin and mobile apps.
+
+### Long Term
+- Transition to a microservices architecture for scalability.
+- Add multi-tenant support for gym chains.
+- Implement advanced security features (e.g., 2FA, encryption).
+- Localize the solution for international markets.
+- Develop a Progressive Web App (PWA) for cross-platform access.
+
+## Success Metrics
+
+### Technical Metrics
+- API response time < 200ms.
+- Mobile app load time < 3 seconds.
+- 99.9% system uptime.
+- Zero critical security vulnerabilities.
+
+### Business Metrics
+- User registration conversion rate > 80%.
+- Admin task completion time < 2 minutes.
+- User retention rate > 90%.
+- System adoption rate > 95%.
+
+---
+
+**Last Updated**: [Insert Date]
+**Version**: 1.0.0

package.json

@@ -21,12 +21,12 @@
     "typecheck:mobile": "cd apps/mobile && npx tsc --noEmit"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
-    "concurrently": "^8.2.2",
-    "eslint": "^8.45.0",
-    "prettier": "^3.0.0",
-    "typescript": "^5.0.0"
+    "@typescript-eslint/eslint-plugin": "^8.46.3",
+    "@typescript-eslint/parser": "^8.46.3",
+    "concurrently": "^9.2.1",
+    "eslint": "^9.39.1",
+    "prettier": "^3.6.2",
+    "typescript": "^5.9.3"
   },
   "engines": {
     "node": ">=18.0.0",

packages/database/package.json

@@ -11,12 +11,12 @@
     "db:studio": "drizzle-kit studio"
   },
   "dependencies": {
-    "drizzle-orm": "^0.29.0",
-    "better-sqlite3": "^9.0.0",
-    "@types/better-sqlite3": "^7.6.0"
+    "drizzle-orm": "^0.44.7",
+    "better-sqlite3": "^12.4.1",
+    "@types/better-sqlite3": "^7.6.13"
   },
   "devDependencies": {
-    "typescript": "^5.0.0",
-    "drizzle-kit": "^0.20.0"
+    "typescript": "^5.9.3",
+    "drizzle-kit": "^0.31.6"
   }
 }

packages/shared/package-lock.json

@@ -0,0 +1,41 @@
+{
+  "name": "@fitai/shared",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "@fitai/shared",
+      "version": "1.0.0",
+      "dependencies": {
+        "zod": "^4.1.12"
+      },
+      "devDependencies": {
+        "typescript": "^5.9.3"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/zod": {
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.12.tgz",
+      "integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    }
+  }
+}

packages/shared/package.json

@@ -9,9 +9,9 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "zod": "^3.22.0"
+    "zod": "^4.1.12"
   },
   "devDependencies": {
-    "typescript": "^5.0.0"
+    "typescript": "^5.9.3"
   }
 }