website refactor

apps/website/templates/AdminUsersTemplate.tsx

@@ -9,10 +9,16 @@ import {
   Trash2,
   AlertTriangle
 } from 'lucide-react';
-import { AdminUsersViewData } from './AdminUsersViewData';
+import { AdminUsersViewData } from '@/lib/view-data/AdminUsersViewData';
 
-interface AdminUsersTemplateProps {
-  viewData: AdminUsersViewData;
+/**
+ * AdminUsersTemplate
+ * 
+ * Pure template for admin users page.
+ * Accepts ViewData only, no business logic.
+ */
+export function AdminUsersTemplate(props: {
+  adminUsersViewData: AdminUsersViewData;
   onRefresh: () => void;
   onSearch: (search: string) => void;
   onFilterRole: (role: string) => void;
@@ -26,30 +32,24 @@ interface AdminUsersTemplateProps {
   loading: boolean;
   error: string | null;
   deletingUser: string | null;
-}
+}) {
+  const {
+    adminUsersViewData: viewData,
+    onRefresh,
+    onSearch,
+    onFilterRole,
+    onFilterStatus,
+    onClearFilters,
+    onUpdateStatus,
+    onDeleteUser,
+    search,
+    roleFilter,
+    statusFilter,
+    loading,
+    error,
+    deletingUser
+  } = props;
 
-/**
- * AdminUsersTemplate
- * 
- * Pure template for admin users page.
- * Accepts ViewData only, no business logic.
- */
-export function AdminUsersTemplate({
-  viewData,
-  onRefresh,
-  onSearch,
-  onFilterRole,
-  onFilterStatus,
-  onClearFilters,
-  onUpdateStatus,
-  onDeleteUser,
-  search,
-  roleFilter,
-  statusFilter,
-  loading,
-  error,
-  deletingUser
-}: AdminUsersTemplateProps) {
   const toStatusBadgeProps = (
     status: string,
   ): { status: 'success' | 'warning' | 'error' | 'neutral'; label: string } => {
@@ -311,7 +311,7 @@ export function AdminUsersTemplate({
               <div>
                 <div className="text-sm text-gray-400 mb-1">Active</div>
                 <div className="text-2xl font-bold text-white">
-                  {viewData.users.filter(u => u.status === 'active').length}
+                  {viewData.activeUserCount}
                 </div>
               </div>
               <div className="w-6 h-6 text-green-400">✓</div>
@@ -322,7 +322,7 @@ export function AdminUsersTemplate({
               <div>
                 <div className="text-sm text-gray-400 mb-1">Admins</div>
                 <div className="text-2xl font-bold text-white">
-                  {viewData.users.filter(u => u.isSystemAdmin).length}
+                  {viewData.adminCount}
                 </div>
               </div>
               <Shield className="w-6 h-6 text-purple-400" />