-
-
+ const [patient, setPatient] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ /* edit-mode state */
+ const [editing, setEditing] = useState(false);
+ const [saving, setSaving] = useState(false);
+ const [saveError, setSaveError] = useState("");
+ const [form, setForm] = useState({
+ allergies: "",
+ currentMedications: "",
+ pastSurgeries: "",
+ chronicConditions: "",
+ });
+
+ /* ── fetch profile ── */
+ const fetchProfile = async () => {
+ try {
+ const id = propPatientId || localStorage.getItem("patientId");
+ const token = localStorage.getItem("token");
+ if (!id) { setError("Please log in again."); setLoading(false); return; }
+ const res = await fetch(`${API_BASE_URL}/api/patient/get/${id}`, {
+ headers: { "Content-Type": "application/json", ...(token && { Authorization: `Bearer ${token}` }) },
+ });
+ if (!res.ok) throw new Error("Failed to load profile");
+ const data = await res.json();
+ setPatient(data);
+ setError(null);
+ } catch (err) {
+ setError(err.message || "Failed to load profile");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ useEffect(() => { fetchProfile(); }, [propPatientId]);
+
+ /* ── open edit form ── */
+ const handleEditClick = () => {
+ setForm({
+ allergies: patient?.allergies || "",
+ currentMedications: patient?.currentMedications || "",
+ pastSurgeries: patient?.pastSurgeries || "",
+ chronicConditions: patient?.chronicConditions || "",
+ });
+ setSaveError("");
+ setEditing(true);
+ };
+
+ /* ── save edits ── */
+ const handleSave = async () => {
+ setSaving(true);
+ setSaveError("");
+ try {
+ const id = propPatientId || localStorage.getItem("patientId");
+ const token = localStorage.getItem("token");
+ const res = await fetch(`${API_BASE_URL}/api/patient/update/${id}`, {
+ method: "PUT",
+ headers: {
+ "Content-Type": "application/json",
+ ...(token && { Authorization: `Bearer ${token}` }),
+ },
+ body: JSON.stringify(form),
+ });
+ if (!res.ok) throw new Error("Failed to save changes");
+ const updated = await res.json();
+ setPatient((prev) => ({ ...prev, ...updated }));
+ setEditing(false);
+ } catch (err) {
+ setSaveError(err.message || "Failed to save changes");
+ } finally {
+ setSaving(false);
+ }
+ };
+
+ /* ── loading / error states ── */
+ if (loading) return (
+
+
+
+
+ {[1,2,3,4,5,6].map((i) =>
)}
- );
- }
-
- if (error) {
- return (
-
-
{error}
-
-
- );
- }
+
+ );
+
+ if (error) return (
+
+
{error}
+
+
+ );
if (!patient) return null;
- const age = calculateAge(patient.dateOfBirth);
- const patientIdFormatted = formatPatientId(patient.id || patient.Id);
- const addressFull = formatAddress(patient.address, patient.city, patient.district, patient.postalCode);
- const allergiesList = parseList(patient.allergies);
- const medicationsList = parseMedications(patient.currentMedications);
- const chronicConditionsList = parseList(patient.medicalConditions);
- const pastSurgeriesList = parseSurgeries(patient.pastSurgeries);
+ /* ── derived display values ── */
+ const age = calculateAge(patient.dateOfBirth);
+ const patientIdFmt = formatPatientId(patient.id || patient.Id);
+ const addressFull = formatAddress(patient.address, patient.city, patient.district, patient.postalCode);
+ const allergiesList = parseList(patient.allergies);
+ const medsList = parseMedications(patient.currentMedications);
+ const chronicList = parseList(patient.chronicConditions); // ← correct field
+ const surgeriesList = parseSurgeries(patient.pastSurgeries);
+
+ /* shared textarea style */
+ const taClass = "w-full border border-gray-300 rounded-xl px-3 py-2 text-sm text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-400 resize-none";
return (
- {/* Personal Information Card */}
+
+ {/* ══════════════ Personal Information ══════════════ */}
Personal Information
+ {/* Left column */}
-
- Full Name
- {patient.name || "—"}
-
-
- Patient ID
- {patientIdFormatted}
-
-
- Age
-
- {age != null ? `${age} years` : "—"}
-
-
-
- Blood Type
- {patient.bloodType || "—"}
-
-
- NIC No
- {patient.nicNo || "—"}
-
-
- Gender
- {patient.gender || "—"}
-
+ {[
+ ["Full Name", patient.name],
+ ["Patient ID", patientIdFmt],
+ ["Age", age != null ? `${age} years` : "—"],
+ ["Blood Type", patient.bloodType],
+ ["NIC No", patient.nicNo],
+ ["Gender", patient.gender],
+ ].map(([label, val]) => (
+
+ {label}
+ {val || "—"}
+
+ ))}
+ {/* Right column */}
-
-
-
- Email
- {patient.email || "—"}
-
-
-
-
-
- Phone
- {patient.contactNo || "—"}
-
-
-
-
-
- Address
- {addressFull}
-
-
-
-
-
-
Emergency Contact
-
{patient.guardiansName || "—"}
- {patient.guardianRelationship && (
-
({patient.guardianRelationship})
- )}
+ {[
+ [Mail, "Email", patient.email, true],
+ [Phone, "Phone", patient.contactNo, false],
+ [MapPin, "Address", addressFull, true],
+ [User, "Emergency Contact", patient.guardiansName, false],
+ [Phone, "Emergency Phone", patient.guardiansContactNo, false],
+ ].map(([Icon, label, val, wrap]) => (
+
+
+
+ {label}
+ {val || "—"}
+ {label === "Emergency Contact" && patient.guardianRelationship && (
+ ({patient.guardianRelationship})
+ )}
+
-
-
-
-
- Emergency Phone
- {patient.guardiansContactNo || "—"}
-
-
+ ))}
- {/* Medical History Card */}
+ {/* ══════════════ Medical History ══════════════ */}
-
Medical History
-
-
-
-
-
- Allergies
-
-
- {allergiesList.length > 0 ? (
- allergiesList.map((allergy, index) => (
-
- {allergy}
-
- ))
- ) : (
-
None recorded
- )}
+ {/* Header + Edit / Save / Cancel buttons */}
+
+
Medical History
+ {!editing ? (
+
+ ) : (
+
+
+
+
+ )}
+
+
+ {saveError && (
+
+ {saveError}
+
+ )}
+
+ {/* ── Read-only view ── */}
+ {!editing && (
+
+ {/* Left column */}
+
+
+
+
+
+ Current Medications
+
+ {medsList.length > 0 ? (
+
+ {medsList.map((med, i) => (
+
+
{med.name}
+ {med.frequency &&
{med.frequency}
}
+
+ ))}
+
+ ) :
None recorded}
-
-
-
- Current Medications
-
-
- {medicationsList.length > 0 ? (
- medicationsList.map((med, index) => (
-
-
{med.name}
- {med.frequency &&
{med.frequency}
}
-
- ))
- ) : (
-
None recorded
- )}
+ {/* Right column */}
+
+
+
+ Chronic Conditions
+
+
+
+
+
+
+ Past Surgeries
+
+ {surgeriesList.length > 0 ? (
+
+ {surgeriesList.map((s, i) => (
+
+
{s.name}
+ {s.date &&
{s.date}
}
+
+ ))}
+
+ ) :
None recorded}
+ )}
-
-
-
-
- Chronic Conditions
-
-
- {chronicConditionsList.length > 0 ? (
- chronicConditionsList.map((condition, index) => (
-
- ))
- ) : (
-
None recorded
- )}
+ {/* ── Edit form ── */}
+ {editing && (
+
+ {/* Left column */}
+
+
+
+