Use server actions instead of client-side API calls

packages/bridge-ui/config/users.ts

@@ -1,5 +1,11 @@
 import { ServiceConfig } from "../lib/service";
 
+const getRoles = async () => [
+  { value: "admin", label: "Admin" },
+  { value: "user", label: "User" },
+  { value: "none", label: "None" },
+];
+
 export const usersConfig: ServiceConfig = {
   entity: "users",
   table: "User",
@@ -17,6 +23,13 @@ export const usersConfig: ServiceConfig = {
       required: true,
       size: 12,
     },
+    {
+      name: "role",
+      label: "Role",
+      required: true,
+      getOptions: getRoles,
+      size: 12,
+    },
   ],
   updateFields: [
     { name: "name", label: "Name", required: true, size: 12 },
@@ -47,8 +60,13 @@ export const usersConfig: ServiceConfig = {
       flex: 2,
     },
     {
-      field: "updatedAt",
-      headerName: "Updated At",
+      field: "role",
+      headerName: "Role",
+      flex: 1,
+    },
+    {
+      field: "createdAt",
+      headerName: "Created At",
       valueGetter: (value: any) => new Date(value).toLocaleString(),
       flex: 1,
     },

packages/ui/components/Autocomplete.tsx

@@ -7,6 +7,7 @@ type AutocompleteProps = {
   label: string;
   options: any[];
   formState: Record<string, any>;
+  updateFormState: (name: string, value: any) => void;
   disabled?: boolean;
   required?: boolean;
 };
@@ -16,18 +17,21 @@ export const Autocomplete: FC<AutocompleteProps> = ({
   label,
   options,
   formState,
+  updateFormState,
   disabled = false,
   required = false,
 }) => (
   <AutocompleteInternal
     disablePortal
     options={options}
-    defaultValue={formState.values[name]}
+    value={formState.values[name] || ""}
+    onChange={(e: any) => updateFormState?.(name, e.target.id)}
     fullWidth
     size="small"
     renderInput={(params) => (
       <TextField
         {...params}
+        name={name}
         label={label}
         disabled={disabled}
         required={required}