spectraVal · spectraVal · Jul 25, 2026 · Jul 25, 2026
diff --git a/frontend/index.html b/frontend/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>my-react-app</title>
+    <title>QueueNova Health</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -5,6 +5,7 @@ import { ProtectedRoute } from './routes/ProtectedRoute';
 import RegisterPage from './pages/RegisterPage';
 import LoginPage from './pages/LoginPage';
 import DashboardPage from './pages/DashboardPage';
+import ProfilePage from './pages/ProfilePage';
 
 function App() {
   return (
@@ -23,6 +24,10 @@ function App() {
               path="/dashboard"
               element={<DashboardPage />}
             />
+            <Route 
+              path="/profile"
+              element={<ProfilePage />} 
+            />
           </Route>
 
           {/* Fallback */}

diff --git a/frontend/src/pages/.gitkeep b/frontend/src/pages/.gitkeep
diff --git a/frontend/src/pages/ProfilePage.tsx b/frontend/src/pages/ProfilePage.tsx
@@ -0,0 +1,355 @@
+import { useState, useEffect } from 'react';
+import { AxiosError } from 'axios';
+import { patientService } from '../services/patientService';
+import { LogoutButton } from '../components/LogoutButton';
+import type {
+  PatientProfile,
+  PatientProfileUpdatePayload,
+  // ApiSuccessResponse,
+} from '../types/patient';
+
+type FieldErrors = Partial<Record<keyof PatientProfileUpdatePayload, string>>;
+
+interface ApiValidationError {
+  message: string;
+  errors: Record<string, string[]>;
+}
+
+export default function ProfilePage() {
+  const [profile, setProfile] = useState<PatientProfile | null>(null);
+  const [isLoadingProfile, setIsLoadingProfile] = useState(true);
+  const [fetchError, setFetchError] = useState('');
+
+  const [form, setForm] = useState<PatientProfileUpdatePayload>({});
+  const [fieldErrors, setFieldErrors] = useState<FieldErrors>({});
+  const [genericError, setGenericError] = useState('');
+  const [successMessage, setSuccessMessage] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  useEffect(() => {
+    patientService
+      .getProfile()
+      .then((response) => {
+        const data = response.data;
+        setProfile(data);
+        setForm({
+          name: data.name,
+          phone: data.phone,
+          bpjs_number: data.bpjs_number,
+          birth_place: data.birth_place,
+          birth_date: data.birth_date,
+          gender: data.gender,
+        });
+      })
+      .catch(() => {
+        setFetchError('Failed to load profile. Please refresh the page.');
+      })
+      .finally(() => {
+        setIsLoadingProfile(false);
+      });
+  }, []);
+
+  function handleChange(
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
+  ) {
+    const { name, value } = e.target;
+    setForm((prev) => ({ ...prev, [name]: value === '' ? null : value }));
+    setFieldErrors((prev) => ({ ...prev, [name]: undefined }));
+    setGenericError('');
+    setSuccessMessage('');
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setIsSubmitting(true);
+    setFieldErrors({});
+    setGenericError('');
+    setSuccessMessage('');
+
+    try {
+      const response = await patientService.updateProfile(form);
+      setProfile(response.data);
+      setSuccessMessage('Profile updated successfully.');
+    } catch (err) {
+      const error = err as AxiosError<ApiValidationError>;
+
+      if (error.response?.status === 422 && error.response.data.errors) {
+        const raw = error.response.data.errors;
+        const mapped: FieldErrors = {};
+
+        for (const key of Object.keys(raw) as Array<keyof PatientProfileUpdatePayload>) {
+            mapped[key] = raw[key][0];
+        }
+
+            setFieldErrors(mapped);
+        } else {
+            setGenericError("Failed to update profile. Please try again.");
+        }
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  if (isLoadingProfile) {
+    return <div style={styles.loadingContainer}>Loading profile...</div>;
+  }
+
+  if (fetchError) {
+    return (
+      <div style={styles.loadingContainer}>
+        <p style={{ color: '#ef4444' }}>{fetchError}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div style={styles.container}>
+      <div style={styles.card}>
+        <div style={styles.headerRow}>
+          <div>
+            <h1 style={styles.title}>My Profile</h1>
+            <p style={styles.subtitle}>
+              {profile?.name} · {profile?.phone ?? '-'}
+            </p>
+          </div>
+          <LogoutButton />
+        </div>
+
+        {successMessage && (
+          <div style={styles.successBanner} role="status">
+            {successMessage}
+          </div>
+        )}
+
+        {genericError && (
+          <div style={styles.genericError} role="alert">
+            {genericError}
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} noValidate style={styles.form}>
+          <Field
+            label="Full Name"
+            name="name"
+            type="text"
+            value={form.name ?? ''}
+            onChange={handleChange}
+            error={fieldErrors.name}
+          />
+          <Field
+            label="Phone Number"
+            name="phone"
+            type="tel"
+            value={form.phone ?? ''}
+            onChange={handleChange}
+            error={fieldErrors.phone}
+          />
+          <Field
+            label="BPJS Number"
+            name="bpjs_number"
+            type="text"
+            value={form.bpjs_number ?? ''}
+            onChange={handleChange}
+            error={fieldErrors.bpjs_number}
+          />
+          <Field
+            label="Birth Place"
+            name="birth_place"
+            type="text"
+            value={form.birth_place ?? ''}
+            onChange={handleChange}
+            error={fieldErrors.birth_place}
+          />
+          <Field
+            label="Birth Date"
+            name="birth_date"
+            type="date"
+            value={form.birth_date ?? ''}
+            onChange={handleChange}
+            error={fieldErrors.birth_date}
+          />
+
+          <div style={styles.fieldWrapper}>
+            <label htmlFor="gender" style={styles.label}>
+              Gender
+            </label>
+            <select
+              id="gender"
+              name="gender"
+              value={form.gender ?? ''}
+              onChange={handleChange}
+              style={{
+                ...styles.input,
+                ...(fieldErrors.gender ? styles.inputError : {}),
+              }}
+            >
+              <option value="">— Select gender —</option>
+              <option value="laki-laki">Laki-laki</option>
+              <option value="perempuan">Perempuan</option>
+            </select>
+            {fieldErrors.gender && (
+              <span style={styles.fieldError} role="alert">
+                {fieldErrors.gender}
+              </span>
+            )}
+          </div>
+
+          <button
+            type="submit"
+            disabled={isSubmitting}
+            style={{
+              ...styles.button,
+              ...(isSubmitting ? styles.buttonDisabled : {}),
+            }}
+          >
+            {isSubmitting ? 'Saving...' : 'Save Changes'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+interface FieldProps {
+  label: string;
+  name: string;
+  type: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  error?: string;
+}
+
+function Field({ label, name, type, value, onChange, error }: FieldProps) {
+  return (
+    <div style={styles.fieldWrapper}>
+      <label htmlFor={name} style={styles.label}>
+        {label}
+      </label>
+      <input
+        id={name}
+        name={name}
+        type={type}
+        value={value}
+        onChange={onChange}
+        aria-invalid={!!error}
+        aria-describedby={error ? `${name}-error` : undefined}
+        style={{
+          ...styles.input,
+          ...(error ? styles.inputError : {}),
+        }}
+      />
+      {error && (
+        <span id={`${name}-error`} style={styles.fieldError} role="alert">
+          {error}
+        </span>
+      )}
+    </div>
+  );
+}
+
+const styles: Record<string, React.CSSProperties> = {
+  container: {
+    minHeight: '100vh',
+    backgroundColor: '#f5f7fa',
+    padding: '32px 24px',
+  },
+  card: {
+    backgroundColor: '#ffffff',
+    borderRadius: '8px',
+    border: '1px solid #e2e8f0',
+    padding: '40px',
+    width: '100%',
+    maxWidth: '520px',
+    margin: '0 auto',
+  },
+  headerRow: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    marginBottom: '28px',
+  },
+  title: {
+    fontSize: '20px',
+    fontWeight: 700,
+    color: '#1a202c',
+    margin: 0,
+  },
+  subtitle: {
+    fontSize: '13px',
+    color: '#64748b',
+    marginTop: '4px',
+    marginBottom: 0,
+  },
+  form: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px',
+  },
+  fieldWrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+  },
+  label: {
+    fontSize: '13px',
+    fontWeight: 500,
+    color: '#374151',
+  },
+  input: {
+    padding: '10px 12px',
+    fontSize: '14px',
+    border: '1px solid #d1d5db',
+    borderRadius: '6px',
+    outline: 'none',
+    color: '#1a202c',
+    backgroundColor: '#ffffff',
+  },
+  inputError: {
+    borderColor: '#ef4444',
+  },
+  fieldError: {
+    fontSize: '12px',
+    color: '#ef4444',
+  },
+  successBanner: {
+    padding: '10px 14px',
+    backgroundColor: '#f0fdf4',
+    border: '1px solid #bbf7d0',
+    borderRadius: '6px',
+    fontSize: '13px',
+    color: '#15803d',
+    marginBottom: '16px',
+  },
+  genericError: {
+    padding: '10px 14px',
+    backgroundColor: '#fef2f2',
+    border: '1px solid #fecaca',
+    borderRadius: '6px',
+    fontSize: '13px',
+    color: '#b91c1c',
+    marginBottom: '16px',
+  },
+  button: {
+    marginTop: '4px',
+    padding: '11px',
+    backgroundColor: '#2563eb',
+    color: '#ffffff',
+    border: 'none',
+    borderRadius: '6px',
+    fontSize: '14px',
+    fontWeight: 600,
+    cursor: 'pointer',
+  },
+  buttonDisabled: {
+    backgroundColor: '#93c5fd',
+    cursor: 'not-allowed',
+  },
+  loadingContainer: {
+    minHeight: '100vh',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: '14px',
+    color: '#64748b',
+  },
+};
diff --git a/frontend/src/services/.gitkeep b/frontend/src/services/.gitkeep