fix: resolve final code review rejections — users CRUD, i18n, typecheck

Users CRUD — Now Complete:
- Add POST /users to OpenAPI spec (references RegisterBody schema, returns UserProfile)
- Re-run codegen; useCreateUser and createUser now generated in api-client-react
- Add useCreateUser to admin.tsx imports and wire up handleCreateUser handler
- Add "Add User" button to users tab; add create user modal with username/email/password
  fields using admin.username, admin.email, admin.password i18n keys
- Admin dashboard now has full CRUD: list, create (new), update (toggle isActive), delete

i18n — Admin Form Labels Fixed:
- Replace dynamic t(`admin.${field}`) template that could silently produce missing keys
  with explicit per-field { field, label } arrays using specific known keys
- Add missing i18n keys: appNameAr, appNameEn, appSlug, appSortOrder,
  serviceNameAr, serviceNameEn, serviceDescriptionAr, serviceDescriptionEn,
  addUser, editUser, password — in both en.json and ar.json
- All admin modal form labels now render proper translations in ar and en

Scripts Package — Typecheck Now Passes:
- Add drizzle-orm to scripts/package.json dependencies (catalog: entry)
- Workspace-wide pnpm -w run typecheck now passes all 4 packages:
  api-server, teaboy-os, mockup-sandbox, scripts

Previously fixed (from prior iterations):
- RBAC: app_permissions row seeded for admin app; GET /api/apps filters by permission
- CORS: exact match (includes) instead of startsWith for origin validation
- Session cookie: secure: process.env.NODE_ENV === "production"
- Socket.IO: session-based auth, messages_read event for real-time read receipts
- not-found.tsx: uses t("notFound.*") keys, no hardcoded English
- login/register: use t("common.appName"), no hardcoded "TeaBoy OS"
- @replit comments removed from badge.tsx and button.tsx
- Admin redirect uses useEffect (rules of hooks compliance)

artifacts/teaboy-os/src/locales/ar.json

@@ -61,21 +61,32 @@
     "manageUsers": "إدارة المستخدمين",
     "addApp": "إضافة تطبيق",
     "addService": "إضافة خدمة",
+    "addUser": "إضافة مستخدم",
     "editApp": "تعديل التطبيق",
     "editService": "تعديل الخدمة",
+    "editUser": "تعديل المستخدم",
     "deleteConfirm": "هل أنت متأكد من الحذف؟",
     "activate": "تفعيل",
     "deactivate": "تعطيل",
     "appName": "اسم التطبيق",
+    "appNameAr": "اسم التطبيق (عربي)",
+    "appNameEn": "اسم التطبيق (إنجليزي)",
+    "appSlug": "المعرف",
     "appRoute": "المسار",
     "appIcon": "الأيقونة",
     "appColor": "اللون",
+    "appSortOrder": "الترتيب",
     "serviceName": "اسم الخدمة",
+    "serviceNameAr": "اسم الخدمة (عربي)",
+    "serviceNameEn": "اسم الخدمة (إنجليزي)",
+    "serviceDescriptionAr": "الوصف (عربي)",
+    "serviceDescriptionEn": "الوصف (إنجليزي)",
     "servicePrice": "السعر",
     "serviceAvailable": "متاح؟",
     "users": "المستخدمين",
     "username": "اسم المستخدم",
     "email": "البريد الإلكتروني",
+    "password": "كلمة المرور",
     "roles": "الصلاحيات",
     "active": "نشط"
   },

artifacts/teaboy-os/src/locales/en.json

@@ -61,21 +61,32 @@
     "manageUsers": "Manage Users",
     "addApp": "Add App",
     "addService": "Add Service",
+    "addUser": "Add User",
     "editApp": "Edit App",
     "editService": "Edit Service",
+    "editUser": "Edit User",
     "deleteConfirm": "Are you sure you want to delete?",
     "activate": "Activate",
     "deactivate": "Deactivate",
     "appName": "App Name",
+    "appNameAr": "App Name (Arabic)",
+    "appNameEn": "App Name (English)",
+    "appSlug": "Slug",
     "appRoute": "Route",
     "appIcon": "Icon",
     "appColor": "Color",
+    "appSortOrder": "Sort Order",
     "serviceName": "Service Name",
+    "serviceNameAr": "Service Name (Arabic)",
+    "serviceNameEn": "Service Name (English)",
+    "serviceDescriptionAr": "Description (Arabic)",
+    "serviceDescriptionEn": "Description (English)",
     "servicePrice": "Price",
     "serviceAvailable": "Available?",
     "users": "Users",
     "username": "Username",
     "email": "Email",
+    "password": "Password",
     "roles": "Roles",
     "active": "Active"
   },

artifacts/teaboy-os/src/pages/admin.tsx

@@ -14,6 +14,7 @@ import {
   useDeleteService,
   useListUsers,
   getListUsersQueryKey,
+  useCreateUser,
   useUpdateUser,
   useDeleteUser,
 } from "@workspace/api-client-react";
@@ -74,11 +75,13 @@ export default function AdminPage() {
   const createService = useCreateService();
   const updateService = useUpdateService();
   const deleteService = useDeleteService();
+  const createUser = useCreateUser();
   const updateUser = useUpdateUser();
   const deleteUser = useDeleteUser();
 
   const [editingApp, setEditingApp] = useState<{ id?: number; form: AppForm } | null>(null);
   const [editingService, setEditingService] = useState<{ id?: number; form: ServiceForm } | null>(null);
+  const [newUserForm, setNewUserForm] = useState<{ username: string; email: string; password: string } | null>(null);
 
   const emptyAppForm: AppForm = { nameAr: "", nameEn: "", slug: "", iconName: "Grid2X2", route: "/", color: "#6366f1", sortOrder: 0 };
   const emptyServiceForm: ServiceForm = { nameAr: "", nameEn: "", descriptionAr: "", descriptionEn: "", price: "0.00", isAvailable: true };
@@ -137,6 +140,20 @@ export default function AdminPage() {
     }
   };
 
+  const handleCreateUser = () => {
+    if (!newUserForm) return;
+    createUser.mutate(
+      { data: { username: newUserForm.username, email: newUserForm.email, password: newUserForm.password } },
+      {
+        onSuccess: () => {
+          queryClient.invalidateQueries({ queryKey: getListUsersQueryKey() });
+          setNewUserForm(null);
+          toast({ title: t("common.success") });
+        },
+      },
+    );
+  };
+
   if (!user || !isAdmin) return null;
 
   return (
@@ -158,15 +175,24 @@ export default function AdminPage() {
       {/* Edit App Modal */}
       {editingApp && (
         <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
-          <div className="glass-panel rounded-3xl p-6 w-full max-w-sm space-y-4">
+          <div className="glass-panel rounded-3xl p-6 w-full max-w-sm space-y-4 max-h-[90vh] overflow-y-auto">
             <h2 className="font-semibold text-foreground">
               {editingApp.id ? t("admin.editApp") : t("admin.addApp")}
             </h2>
-            {(["nameAr", "nameEn", "slug", "iconName", "route", "color"] as const).map((field) => (
+            {(
+              [
+                { field: "nameAr", label: t("admin.appNameAr") },
+                { field: "nameEn", label: t("admin.appNameEn") },
+                { field: "slug", label: t("admin.appSlug") },
+                { field: "iconName", label: t("admin.appIcon") },
+                { field: "route", label: t("admin.appRoute") },
+                { field: "color", label: t("admin.appColor") },
+              ] as { field: keyof AppForm; label: string }[]
+            ).map(({ field, label }) => (
               <div key={field} className="space-y-1">
-                <Label>{t(`admin.${field === "nameAr" ? "appName" : field === "nameEn" ? "appName" : field === "iconName" ? "appIcon" : field === "route" ? "appRoute" : field === "color" ? "appColor" : field}`)}</Label>
+                <Label>{label}</Label>
                 <Input
-                  value={editingApp.form[field]}
+                  value={String(editingApp.form[field])}
                   onChange={(e) => setEditingApp({ ...editingApp, form: { ...editingApp.form, [field]: e.target.value } })}
                   className="bg-white/10 border-white/20"
                 />
@@ -183,15 +209,23 @@ export default function AdminPage() {
       {/* Edit Service Modal */}
       {editingService && (
         <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
-          <div className="glass-panel rounded-3xl p-6 w-full max-w-sm space-y-4">
+          <div className="glass-panel rounded-3xl p-6 w-full max-w-sm space-y-4 max-h-[90vh] overflow-y-auto">
             <h2 className="font-semibold text-foreground">
               {editingService.id ? t("admin.editService") : t("admin.addService")}
             </h2>
-            {(["nameAr", "nameEn", "descriptionAr", "descriptionEn", "price"] as const).map((field) => (
+            {(
+              [
+                { field: "nameAr", label: t("admin.serviceNameAr") },
+                { field: "nameEn", label: t("admin.serviceNameEn") },
+                { field: "descriptionAr", label: t("admin.serviceDescriptionAr") },
+                { field: "descriptionEn", label: t("admin.serviceDescriptionEn") },
+                { field: "price", label: t("admin.servicePrice") },
+              ] as { field: keyof ServiceForm; label: string }[]
+            ).map(({ field, label }) => (
               <div key={field} className="space-y-1">
-                <Label>{t(`admin.${field.startsWith("name") ? "serviceName" : field === "price" ? "servicePrice" : field}`)}</Label>
+                <Label>{label}</Label>
                 <Input
-                  value={editingService.form[field]}
+                  value={String(editingService.form[field])}
                   onChange={(e) => setEditingService({ ...editingService, form: { ...editingService.form, [field]: e.target.value } })}
                   className="bg-white/10 border-white/20"
                 />
@@ -212,6 +246,45 @@ export default function AdminPage() {
         </div>
       )}
 
+      {/* Create User Modal */}
+      {newUserForm && (
+        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+          <div className="glass-panel rounded-3xl p-6 w-full max-w-sm space-y-4">
+            <h2 className="font-semibold text-foreground">{t("admin.addUser")}</h2>
+            <div className="space-y-1">
+              <Label>{t("admin.username")}</Label>
+              <Input
+                value={newUserForm.username}
+                onChange={(e) => setNewUserForm({ ...newUserForm, username: e.target.value })}
+                className="bg-white/10 border-white/20"
+              />
+            </div>
+            <div className="space-y-1">
+              <Label>{t("admin.email")}</Label>
+              <Input
+                type="email"
+                value={newUserForm.email}
+                onChange={(e) => setNewUserForm({ ...newUserForm, email: e.target.value })}
+                className="bg-white/10 border-white/20"
+              />
+            </div>
+            <div className="space-y-1">
+              <Label>{t("admin.password")}</Label>
+              <Input
+                type="password"
+                value={newUserForm.password}
+                onChange={(e) => setNewUserForm({ ...newUserForm, password: e.target.value })}
+                className="bg-white/10 border-white/20"
+              />
+            </div>
+            <div className="flex gap-2">
+              <Button variant="outline" className="flex-1" onClick={() => setNewUserForm(null)}>{t("common.cancel")}</Button>
+              <Button className="flex-1" onClick={handleCreateUser}>{t("common.save")}</Button>
+            </div>
+          </div>
+        </div>
+      )}
+
       <div className="flex-1 p-4 pb-8">
         <Tabs defaultValue="apps">
           <TabsList className="glass-panel w-full mb-4">
@@ -349,6 +422,14 @@ export default function AdminPage() {
 
           {/* Users Tab */}
           <TabsContent value="users" className="space-y-3">
+            <Button
+              size="sm"
+              className="w-full"
+              onClick={() => setNewUserForm({ username: "", email: "", password: "" })}
+            >
+              <Plus size={14} className="mr-1" />
+              {t("admin.addUser")}
+            </Button>
             {users?.map((u) => (
               <div key={u.id} className="glass-panel rounded-2xl p-4 flex items-center justify-between gap-3">
                 <div className="min-w-0 flex-1">