updates on the design and the onboarding things

src/pages/doormile/clients/ClientOnboarding.jsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { ArrowLeft, Building2, Copy, Eye, EyeOff, KeyRound, ShieldCheck, UserPlus } from 'lucide-react';
+import { ArrowLeft, Building2, Copy, Eye, EyeOff, KeyRound, Pencil, ShieldCheck, Trash2, UserPlus } from 'lucide-react';
 import {
   Alert, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage,
   BreadcrumbSeparator, Button, DataTable, EmptyState, Field, Input, PageHeader, Stack,
@@ -9,6 +9,7 @@ import {
 import { inputVariants } from '@/components/ui/input';
 import { useAuth } from '@/lib/AuthContext';
 import { useOnboardClient, useOnboardedClients, useOnboardingCities } from '@/lib/doormileHooks';
+import { EditClientModal, RemoveClientModal } from './ClientLoginDialogs';
 import {
   canOnboardClients, generateClientPassword, onboardingUnavailableMessage, validateOnboarding,
 } from '@/lib/clientOnboarding';
@@ -54,6 +55,12 @@ function serverFieldOf(message) {
 
 function OnboardedList() {
   const { data = [], isLoading } = useOnboardedClients();
+  const [editing, setEditing] = useState(null);
+  const [removing, setRemoving] = useState(null);
+  // Rows without an authid come from a backend older than Edit/Delete (it has
+  // neither the field nor the PUT/DELETE routes). Never send /clients/undefined:
+  // disable the actions and say what to do instead.
+  const backendTooOld = data.length > 0 && data.some((r) => r.authid == null);
   const columns = [
     { key: 'tenantname', header: 'Client', accessor: (r) => r.tenantname },
     { key: 'loginemail', header: 'Console login', accessor: (r) => r.loginemail },
@@ -64,17 +71,53 @@ function OnboardedList() {
       header: 'Login created',
       accessor: (r) => (r.logincreatedat ? new Date(r.logincreatedat).toLocaleString('en-IN', { dateStyle: 'medium', timeStyle: 'short' }) : '—'),
     },
+    {
+      key: 'actions',
+      header: 'Actions',
+      align: 'right',
+      cell: (r) => (
+        <div className="flex justify-end gap-1.5">
+          <Button
+            size="sm"
+            variant="outline"
+            disabled={r.authid == null}
+            onClick={() => setEditing(r)}
+            aria-label={`Edit ${r.tenantname}`}
+          >
+            <Pencil className="mr-1 h-3.5 w-3.5" /> Edit
+          </Button>
+          <Button
+            size="sm"
+            variant="outline"
+            className="text-destructive hover:text-destructive"
+            disabled={r.authid == null}
+            onClick={() => setRemoving(r)}
+            aria-label={`Delete ${r.tenantname}`}
+          >
+            <Trash2 className="mr-1 h-3.5 w-3.5" /> Delete
+          </Button>
+        </div>
+      ),
+    },
   ];
   return (
     <Surface radius="xl" padding="lg">
       <h2 className="text-body font-semibold text-ink-1 mb-3">Clients with a console login</h2>
+      {backendTooOld && (
+        <Alert tone="warning" className="mb-3" role="alert" title="Edit and Delete are not available on this server yet">
+          The API server this console talks to is running an older backend build without the edit and delete
+          endpoints. Rebuild and redeploy doormile_backend from the current code, then reload this page.
+        </Alert>
+      )}
       <DataTable
         columns={columns}
         rows={data}
-        getRowId={(row, i) => `${row.tenantid}-${row.loginemail}-${i}`}
+        getRowId={(row, i) => row.authid ?? `${row.tenantid}-${row.loginemail}-${i}`}
         loading={isLoading}
         emptyState={<EmptyState icon={Building2} size="sm" title="No client logins yet" />}
       />
+      <EditClientModal row={editing} onClose={() => setEditing(null)} />
+      <RemoveClientModal row={removing} onClose={() => setRemoving(null)} />
     </Surface>
   );
 }