bugfix: click on new patient button resets the patient data entry form now. appointment's add patient flow updated so that it matches tha patients feature.

frontend/src/components/ui/patient/CreatePatientModal.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Button } from '@/components/ui/shared/Button';
+import { DialogCloseButton } from '@/components/ui/shared/DialogCloseButton';
 import { Input } from '@/components/ui/shared/Input';
 import { CreatePatientInput } from '@/types/patient';
 
@@ -11,22 +12,27 @@ interface CreatePatientModalProps {
   onSubmit: () => void;
   onClose: () => void;
   loading?: boolean;
+  /** Inline panel on Patients page; centered dialog on Appointments. */
+  variant?: 'inline' | 'dialog';
 }
 
-export function CreatePatientModal({
-  isOpen,
+function CreatePatientFormFields({
   formData,
   onChange,
   onSubmit,
   onClose,
-  loading = false,
-}: CreatePatientModalProps) {
-  if (!isOpen) {
-    return null;
-  }
-
+  loading,
+  showCancel,
+}: {
+  formData: CreatePatientInput;
+  onChange: (patch: Partial<CreatePatientInput>) => void;
+  onSubmit: () => void;
+  onClose: () => void;
+  loading: boolean;
+  showCancel: boolean;
+}) {
   return (
-    <div className="surface-card p-4 space-y-3">
+    <>
       <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
         <Input
           label="First name"
@@ -60,10 +66,80 @@ export function CreatePatientModal({
         >
           Save Patient
         </Button>
-        <Button variant="ghost" onClick={onClose}>
-          Cancel
-        </Button>
+        {showCancel && (
+          <Button variant="ghost" onClick={onClose}>
+            Cancel
+          </Button>
+        )}
       </div>
+    </>
+  );
+}
+
+export function CreatePatientModal({
+  isOpen,
+  formData,
+  onChange,
+  onSubmit,
+  onClose,
+  loading = false,
+  variant = 'inline',
+}: CreatePatientModalProps) {
+  if (!isOpen) {
+    return null;
+  }
+
+  if (variant === 'dialog') {
+    return (
+      <div
+        className="fixed inset-0 z-[60] flex items-center justify-center p-4 bg-black/55"
+        role="presentation"
+        onMouseDown={(e) => {
+          if (e.target === e.currentTarget) {
+            onClose();
+          }
+        }}
+      >
+        <div
+          className="surface-card w-full max-w-[min(56rem,calc(100vw-17rem))] p-5 space-y-4 shadow-xl"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="create-patient-dialog-title"
+          onMouseDown={(e) => e.stopPropagation()}
+        >
+          <div className="flex items-start justify-between gap-2">
+            <h2
+              id="create-patient-dialog-title"
+              className="text-lg font-semibold text-text-primary pr-2"
+            >
+              New patient
+            </h2>
+            <DialogCloseButton onClick={onClose} />
+          </div>
+
+          <CreatePatientFormFields
+            formData={formData}
+            onChange={onChange}
+            onSubmit={onSubmit}
+            onClose={onClose}
+            loading={loading}
+            showCancel={false}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="surface-card p-4 space-y-3">
+      <CreatePatientFormFields
+        formData={formData}
+        onChange={onChange}
+        onSubmit={onSubmit}
+        onClose={onClose}
+        loading={loading}
+        showCancel
+      />
     </div>
   );
 }