690328:1703 Fixing Refactor uuid by Kimi #11

frontend/components/admin/security/rbac-matrix.tsx

@@ -10,7 +10,8 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import apiClient from '@/lib/api/client';
 
 interface Role {
-  roleId: number;
+  publicId?: string; // ADR-019: public identifier
+  roleId?: number;   // Internal INT
   roleName: string;
   permissions?: Permission[];
 }
@@ -151,16 +152,17 @@ export function RbacMatrix() {
                   <div className="text-xs text-muted-foreground">{perm.description}</div>
                 </TableCell>
                 {roleList.map((role) => {
+                  const roleId = role.roleId ?? 0;
                   // Assume role.permissions is populated
                   const currentRolePerms = role.permissions?.map((p) => p.permissionId) || [];
-                  const activePerms = pendingChanges[role.publicId] || currentRolePerms;
+                  const activePerms = pendingChanges[roleId] || currentRolePerms;
                   const isChecked = activePerms.includes(perm.permissionId);
 
                   return (
-                    <TableCell key={`${role.publicId}-${perm.permissionId}`} className="text-center">
+                    <TableCell key={`${roleId}-${perm.permissionId}`} className="text-center">
                       <Checkbox
                         checked={isChecked}
-                        onCheckedChange={() => handleToggle(role.publicId, perm.permissionId, currentRolePerms)}
+                        onCheckedChange={() => handleToggle(roleId, perm.permissionId, currentRolePerms)}
                       />
                     </TableCell>
                   );

frontend/components/admin/user-dialog.tsx

@@ -108,7 +108,7 @@ export function UserDialog({ open, onOpenChange, user }: UserDialogProps) {
         isActive: user.isActive,
         lineId: user.lineId || '',
         primaryOrganizationId: user.primaryOrganizationId?.toString() || ALL_ORGANIZATIONS_VALUE,
-        roleIds: user.roles?.map((r: { publicId: string }) => r.publicId) || [],
+        roleIds: user.roles?.map((r: { roleId?: number }) => r.roleId).filter((id): id is number => id !== undefined) || [],
         password: '',
         confirmPassword: '',
       });
@@ -297,23 +297,26 @@ export function UserDialog({ open, onOpenChange, user }: UserDialogProps) {
                 <p className="text-sm text-muted-foreground">Loading roles...</p>
               )}
               {Array.isArray(roles) &&
-                roles.map((role: { publicId: string; roleName: string; description?: string }) => (
-                  <div key={role.publicId} className="flex items-start space-x-2">
-                    <Checkbox
-                      id={`role-${role.publicId}`}
-                      checked={selectedRoleIds.includes(role.publicId)}
-                      onCheckedChange={(checked) => {
-                        const current = selectedRoleIds;
-                        if (checked) {
-                          setValue('roleIds', [...current, role.publicId]);
-                        } else {
-                          setValue(
-                            'roleIds',
-                            current.filter((id) => id !== role.publicId)
-                          );
-                        }
-                      }}
-                    />
+                roles.map((role: { publicId?: string; roleId?: number; roleName: string; description?: string }) => {
+                  const roleId = role.roleId;
+                  if (roleId === undefined) return null;
+                  return (
+                    <div key={role.publicId ?? roleId} className="flex items-start space-x-2">
+                      <Checkbox
+                        id={`role-${role.publicId ?? roleId}`}
+                        checked={selectedRoleIds.includes(roleId)}
+                        onCheckedChange={(checked) => {
+                          const current = selectedRoleIds;
+                          if (checked) {
+                            setValue('roleIds', [...current, roleId]);
+                          } else {
+                            setValue(
+                              'roleIds',
+                              current.filter((id) => id !== roleId)
+                            );
+                          }
+                        }}
+                      />
                     <div className="grid gap-1.5 leading-none">
                       <label
                         htmlFor={`role-${role.publicId}`}
@@ -323,8 +326,9 @@ export function UserDialog({ open, onOpenChange, user }: UserDialogProps) {
                       </label>
                       <p className="text-xs text-muted-foreground">{role.description}</p>
                     </div>
-                  </div>
-                ))}
+                    </div>
+                  );
+                })}
             </div>
           </div>