website refactor

apps/website/app/admin/users/AdminUsersWrapper.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { AdminUsersTemplate } from '@/templates/AdminUsersTemplate';
+import { AdminUsersViewData } from '@/lib/view-data/AdminUsersViewData';
+import { updateUserStatus, deleteUser } from '../actions';
+
+interface AdminUsersWrapperProps {
+  initialViewData: AdminUsersViewData;
+}
+
+export function AdminUsersWrapper({ initialViewData }: AdminUsersWrapperProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  
+  // UI state (not business logic)
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [deletingUser, setDeletingUser] = useState<string | null>(null);
+  
+  // Current filter values from URL
+  const search = searchParams.get('search') || '';
+  const roleFilter = searchParams.get('role') || '';
+  const statusFilter = searchParams.get('status') || '';
+
+  // Callbacks that update URL (triggers RSC re-render)
+  const handleSearch = useCallback((newSearch: string) => {
+    const params = new URLSearchParams(searchParams);
+    if (newSearch) params.set('search', newSearch);
+    else params.delete('search');
+    params.delete('page'); // Reset to page 1
+    router.push(`/admin/users?${params.toString()}`);
+  }, [router, searchParams]);
+
+  const handleFilterRole = useCallback((role: string) => {
+    const params = new URLSearchParams(searchParams);
+    if (role) params.set('role', role);
+    else params.delete('role');
+    params.delete('page');
+    router.push(`/admin/users?${params.toString()}`);
+  }, [router, searchParams]);
+
+  const handleFilterStatus = useCallback((status: string) => {
+    const params = new URLSearchParams(searchParams);
+    if (status) params.set('status', status);
+    else params.delete('status');
+    params.delete('page');
+    router.push(`/admin/users?${params.toString()}`);
+  }, [router, searchParams]);
+
+  const handleClearFilters = useCallback(() => {
+    router.push('/admin/users');
+  }, [router]);
+
+  const handleRefresh = useCallback(() => {
+    router.refresh();
+  }, [router]);
+
+  // Mutation callbacks (call Server Actions)
+  const handleUpdateStatus = useCallback(async (userId: string, newStatus: string) => {
+    try {
+      setLoading(true);
+      await updateUserStatus(userId, newStatus);
+      // Revalidate data
+      router.refresh();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to update status');
+    } finally {
+      setLoading(false);
+    }
+  }, [router]);
+
+  const handleDeleteUser = useCallback(async (userId: string) => {
+    if (!confirm('Are you sure you want to delete this user? This action cannot be undone.')) {
+      return;
+    }
+
+    try {
+      setDeletingUser(userId);
+      await deleteUser(userId);
+      // Revalidate data
+      router.refresh();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to delete user');
+    } finally {
+      setDeletingUser(null);
+    }
+  }, [router]);
+
+  return (
+    <AdminUsersTemplate
+      adminUsersViewData={initialViewData}
+      onRefresh={handleRefresh}
+      onSearch={handleSearch}
+      onFilterRole={handleFilterRole}
+      onFilterStatus={handleFilterStatus}
+      onClearFilters={handleClearFilters}
+      onUpdateStatus={handleUpdateStatus}
+      onDeleteUser={handleDeleteUser}
+      search={search}
+      roleFilter={roleFilter}
+      statusFilter={statusFilter}
+      loading={loading}
+      error={error}
+      deletingUser={deletingUser}
+    />
+  );
+}

apps/website/app/admin/users/page.tsx

@@ -1,5 +1,51 @@
-import { AdminUsersClient } from '../AdminUsersClient';
+import { AdminUsersPageQuery } from '@/lib/page-queries/AdminUsersPageQuery';
+import { AdminUsersWrapper } from './AdminUsersWrapper';
 
-export default function AdminUsers() {
-  return <AdminUsersClient />;
+interface AdminUsersPageProps {
+  searchParams?: {
+    search?: string;
+    role?: string;
+    status?: string;
+    page?: string;
+  };
+}
+
+export default async function AdminUsersPage({ searchParams }: AdminUsersPageProps) {
+  // Parse query parameters
+  const query = {
+    search: searchParams?.search,
+    role: searchParams?.role,
+    status: searchParams?.status,
+    page: searchParams?.page ? parseInt(searchParams.page, 10) : 1,
+    limit: 50,
+  };
+
+  // Execute PageQuery using static method
+  const result = await AdminUsersPageQuery.execute(query);
+
+  // Handle errors
+  if (result.isErr()) {
+    const error = result.getError();
+    if (error === 'notFound') {
+      return (
+        <div className="container mx-auto p-6">
+          <div className="bg-racing-red/10 border border-racing-red text-racing-red px-4 py-3 rounded-lg">
+            Access denied - You must be logged in as an Owner or Admin
+          </div>
+        </div>
+      );
+    }
+    return (
+      <div className="container mx-auto p-6">
+        <div className="bg-racing-red/10 border border-racing-red text-racing-red px-4 py-3 rounded-lg">
+          Failed to load users: {error}
+        </div>
+      </div>
+    );
+  }
+
+  const viewData = result.unwrap();
+
+  // Pass to client wrapper for UI interactions
+  return <AdminUsersWrapper initialViewData={viewData} />;
 }