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,
} from "@/components/ui/dialog";
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 { authClient } from "@/lib/auth-client";
import { cn } from "@/lib/utils";
@@ -239,6 +241,11 @@ export function PatientFormDialog({
isEdit && patient ? patient.fileNumber : generateFileNumber()
);
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
// created patient has no wallet, and review mode stages an import.
@@ -453,10 +460,27 @@ export function PatientFormDialog({
/>
) : (
<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
scrollFade={false}
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")}>
<div className="flex items-center gap-2">
<Input
@@ -780,6 +804,8 @@ export function PatientFormDialog({
)}
<StagedFilesField onChange={setFiles} value={files} />
</>
)}
</DialogPanel>
<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>
)}
<DialogClose render={<Button type="button" variant="outline" />}>
{t("patientForm.cancel")}
{tab === "show" ? t("patientForm.close") : t("patientForm.cancel")}
</DialogClose>
<Button disabled={!name.trim() || submitting} type="submit">
{submitting
? t("patientForm.saving")
: isReview
? t("patientForm.saveDraft")
: isEdit
? t("patientForm.saveChanges")
: t("patientForm.savePatient")}
</Button>
{tab !== "show" && (
<Button disabled={!name.trim() || submitting} type="submit">
{submitting
? t("patientForm.saving")
: isReview
? t("patientForm.saveDraft")
: isEdit
? t("patientForm.saveChanges")
: t("patientForm.savePatient")}
</Button>
)}
</DialogFooter>
</form>
)}
@@ -1566,6 +1566,11 @@
"moreActions": "إجراءات إضافية"
},
"patientForm": {
"close": "إغلاق",
"tabs": {
"add": "إضافة",
"show": "عرض"
},
"editTitle": "تعديل السجل",
"createTitle": "إضافة مريض",
"editDescription": "حدّث سجل {{name}} وأضف بيانات جديدة.",
@@ -1546,6 +1546,11 @@
"moreActions": "Weitere Aktionen"
},
"patientForm": {
"close": "Schließen",
"tabs": {
"add": "Hinzufügen",
"show": "Anzeigen"
},
"editTitle": "Datensatz bearbeiten",
"createTitle": "Patient hinzufügen",
"editDescription": "Aktualisieren Sie die Akte von {{name}} und fügen Sie neue Daten hinzu.",
@@ -1546,6 +1546,11 @@
"moreActions": "More actions"
},
"patientForm": {
"close": "Close",
"tabs": {
"add": "Add",
"show": "Show"
},
"editTitle": "Edit record",
"createTitle": "Add patient",
"editDescription": "Update {{name}}'s chart and add new data.",
@@ -1546,6 +1546,11 @@
"moreActions": "Plus dactions"
},
"patientForm": {
"close": "Fermer",
"tabs": {
"add": "Ajouter",
"show": "Afficher"
},
"editTitle": "Modifier le dossier",
"createTitle": "Ajouter un patient",
"editDescription": "Mettez à jour le dossier de {{name}} et ajoutez de nouvelles données.",
@@ -1546,6 +1546,11 @@
"moreActions": "Ficillo dheeraad ah"
},
"patientForm": {
"close": "Xir",
"tabs": {
"add": "Ku dar",
"show": "Muuji"
},
"editTitle": "Wax ka beddel diiwaanka",
"createTitle": "Ku dar bukaan",
"editDescription": "Cusbooneysii diiwaanka {{name}} oo ku dar xog cusub.",