frontend: Show/Add tabs in patient edit dialog

Editing a record now defaults to a read-only Show tab (reusing
PatientDetail) with an Add tab for the editable form + Add buttons.
Create and import-review keep the plain form. The existing post-save
wallet-sync step (Next -> send to patient's wallet when linked) is
unchanged. Adds patientForm.tabs.{add,show} + patientForm.close to all
locales.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Khalid Abdi
2026-07-18 23:20:22 +03:00
parent b9d4d4f458
commit bac3e7a1d0
6 changed files with 63 additions and 10 deletions
@@ -23,6 +23,8 @@ import {
DialogTitle, DialogTitle,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Tabs, TabsList, TabsTab } from "@/components/ui/tabs";
import { PatientDetail } from "@/components/patients/patient-detail";
import { ROLE_LABELS } from "@/lib/access"; import { ROLE_LABELS } from "@/lib/access";
import { authClient } from "@/lib/auth-client"; import { authClient } from "@/lib/auth-client";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@@ -239,6 +241,11 @@ export function PatientFormDialog({
isEdit && patient ? patient.fileNumber : generateFileNumber() isEdit && patient ? patient.fileNumber : generateFileNumber()
); );
const [step, setStep] = useState<"form" | "wallet">("form"); const [step, setStep] = useState<"form" | "wallet">("form");
// Editing an existing record shows Show/Add tabs: "Show" (default) is the
// read-only record; "Add" is the editable form with the Add buttons. Create
// and import-review keep the plain form (nothing to show yet).
const showTabs = isEdit && !isReview && Boolean(patient);
const [tab, setTab] = useState<"add" | "show">(showTabs ? "show" : "add");
// Only edits to an existing (non-review) record can sync to a wallet — a newly // Only edits to an existing (non-review) record can sync to a wallet — a newly
// created patient has no wallet, and review mode stages an import. // created patient has no wallet, and review mode stages an import.
@@ -453,10 +460,27 @@ export function PatientFormDialog({
/> />
) : ( ) : (
<form className="contents" onSubmit={handleSubmit}> <form className="contents" onSubmit={handleSubmit}>
{showTabs && (
<div className="px-1 pt-1">
<Tabs
onValueChange={(value) => setTab(value as "add" | "show")}
value={tab}
>
<TabsList className="w-full">
<TabsTab value="add">{t("patientForm.tabs.add")}</TabsTab>
<TabsTab value="show">{t("patientForm.tabs.show")}</TabsTab>
</TabsList>
</Tabs>
</div>
)}
<DialogPanel <DialogPanel
scrollFade={false} scrollFade={false}
className="no-scrollbar flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto" className="no-scrollbar flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto"
> >
{showTabs && tab === "show" && patient ? (
<PatientDetail patient={patient} />
) : (
<>
<Field label={t("patientForm.fileNumber")}> <Field label={t("patientForm.fileNumber")}>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Input <Input
@@ -780,6 +804,8 @@ export function PatientFormDialog({
)} )}
<StagedFilesField onChange={setFiles} value={files} /> <StagedFilesField onChange={setFiles} value={files} />
</>
)}
</DialogPanel> </DialogPanel>
<DialogFooter className="flex-col items-stretch gap-2 sm:flex-row sm:items-center"> <DialogFooter className="flex-col items-stretch gap-2 sm:flex-row sm:items-center">
@@ -787,17 +813,19 @@ export function PatientFormDialog({
<p className="text-sm text-destructive sm:me-auto">{error}</p> <p className="text-sm text-destructive sm:me-auto">{error}</p>
)} )}
<DialogClose render={<Button type="button" variant="outline" />}> <DialogClose render={<Button type="button" variant="outline" />}>
{t("patientForm.cancel")} {tab === "show" ? t("patientForm.close") : t("patientForm.cancel")}
</DialogClose> </DialogClose>
<Button disabled={!name.trim() || submitting} type="submit"> {tab !== "show" && (
{submitting <Button disabled={!name.trim() || submitting} type="submit">
? t("patientForm.saving") {submitting
: isReview ? t("patientForm.saving")
? t("patientForm.saveDraft") : isReview
: isEdit ? t("patientForm.saveDraft")
? t("patientForm.saveChanges") : isEdit
: t("patientForm.savePatient")} ? t("patientForm.saveChanges")
</Button> : t("patientForm.savePatient")}
</Button>
)}
</DialogFooter> </DialogFooter>
</form> </form>
)} )}
@@ -1566,6 +1566,11 @@
"moreActions": "إجراءات إضافية" "moreActions": "إجراءات إضافية"
}, },
"patientForm": { "patientForm": {
"close": "إغلاق",
"tabs": {
"add": "إضافة",
"show": "عرض"
},
"editTitle": "تعديل السجل", "editTitle": "تعديل السجل",
"createTitle": "إضافة مريض", "createTitle": "إضافة مريض",
"editDescription": "حدّث سجل {{name}} وأضف بيانات جديدة.", "editDescription": "حدّث سجل {{name}} وأضف بيانات جديدة.",
@@ -1546,6 +1546,11 @@
"moreActions": "Weitere Aktionen" "moreActions": "Weitere Aktionen"
}, },
"patientForm": { "patientForm": {
"close": "Schließen",
"tabs": {
"add": "Hinzufügen",
"show": "Anzeigen"
},
"editTitle": "Datensatz bearbeiten", "editTitle": "Datensatz bearbeiten",
"createTitle": "Patient hinzufügen", "createTitle": "Patient hinzufügen",
"editDescription": "Aktualisieren Sie die Akte von {{name}} und fügen Sie neue Daten hinzu.", "editDescription": "Aktualisieren Sie die Akte von {{name}} und fügen Sie neue Daten hinzu.",
@@ -1546,6 +1546,11 @@
"moreActions": "More actions" "moreActions": "More actions"
}, },
"patientForm": { "patientForm": {
"close": "Close",
"tabs": {
"add": "Add",
"show": "Show"
},
"editTitle": "Edit record", "editTitle": "Edit record",
"createTitle": "Add patient", "createTitle": "Add patient",
"editDescription": "Update {{name}}'s chart and add new data.", "editDescription": "Update {{name}}'s chart and add new data.",
@@ -1546,6 +1546,11 @@
"moreActions": "Plus dactions" "moreActions": "Plus dactions"
}, },
"patientForm": { "patientForm": {
"close": "Fermer",
"tabs": {
"add": "Ajouter",
"show": "Afficher"
},
"editTitle": "Modifier le dossier", "editTitle": "Modifier le dossier",
"createTitle": "Ajouter un patient", "createTitle": "Ajouter un patient",
"editDescription": "Mettez à jour le dossier de {{name}} et ajoutez de nouvelles données.", "editDescription": "Mettez à jour le dossier de {{name}} et ajoutez de nouvelles données.",
@@ -1546,6 +1546,11 @@
"moreActions": "Ficillo dheeraad ah" "moreActions": "Ficillo dheeraad ah"
}, },
"patientForm": { "patientForm": {
"close": "Xir",
"tabs": {
"add": "Ku dar",
"show": "Muuji"
},
"editTitle": "Wax ka beddel diiwaanka", "editTitle": "Wax ka beddel diiwaanka",
"createTitle": "Ku dar bukaan", "createTitle": "Ku dar bukaan",
"editDescription": "Cusbooneysii diiwaanka {{name}} oo ku dar xog cusub.", "editDescription": "Cusbooneysii diiwaanka {{name}} oo ku dar xog cusub.",