Fix frontend JSONB references

src/components/admin/ProfileAuditLog.tsx

@@ -8,8 +8,18 @@ import { format } from 'date-fns';
 import { handleError } from '@/lib/errorHandler';
 import { AuditLogEntry } from '@/types/database';
 
+interface ProfileChangeField {
+  field_name: string;
+  old_value: string | null;
+  new_value: string | null;
+}
+
+interface ProfileAuditLogWithChanges extends Omit<AuditLogEntry, 'changes'> {
+  profile_change_fields?: ProfileChangeField[];
+}
+
 export function ProfileAuditLog(): React.JSX.Element {
-  const [logs, setLogs] = useState<AuditLogEntry[]>([]);
+  const [logs, setLogs] = useState<ProfileAuditLogWithChanges[]>([]);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
@@ -22,13 +32,18 @@ export function ProfileAuditLog(): React.JSX.Element {
         .from('profile_audit_log')
         .select(`
           *,
-          profiles!user_id(username, display_name)
+          profiles!user_id(username, display_name),
+          profile_change_fields(
+            field_name,
+            old_value,
+            new_value
+          )
         `)
         .order('created_at', { ascending: false })
         .limit(50);
 
       if (error) throw error;
-      setLogs((data || []) as AuditLogEntry[]);
+      setLogs((data || []) as ProfileAuditLogWithChanges[]);
     } catch (error: unknown) {
       handleError(error, { action: 'Load audit logs' });
     } finally {
@@ -71,7 +86,20 @@ export function ProfileAuditLog(): React.JSX.Element {
                   <Badge variant="secondary">{log.action}</Badge>
                 </TableCell>
                 <TableCell>
-                  <pre className="text-xs">{JSON.stringify(log.changes || {}, null, 2)}</pre>
+                  {log.profile_change_fields && log.profile_change_fields.length > 0 ? (
+                    <div className="space-y-1">
+                      {log.profile_change_fields.map((change, idx) => (
+                        <div key={idx} className="text-xs">
+                          <span className="font-medium">{change.field_name}:</span>{' '}
+                          <span className="text-muted-foreground">{change.old_value || 'null'}</span>
+                          {' → '}
+                          <span className="text-foreground">{change.new_value || 'null'}</span>
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <span className="text-xs text-muted-foreground">No changes</span>
+                  )}
                 </TableCell>
                 <TableCell className="text-sm text-muted-foreground">
                   {format(new Date(log.created_at), 'PPpp')}