Extract duplicate status display logic to shared utility

- Created frontend/app/utils/appointment.ts with getStatusDisplay()
- Supports context-aware text (isOwnView parameter)
- Updated both appointments pages to use shared utility

frontend/app/admin/appointments/page.tsx

@@ -8,24 +8,11 @@ import { Header } from "../../components/Header";
 import { useRequireAuth } from "../../hooks/useRequireAuth";
 import { components } from "../../generated/api";
 import { formatDateTime } from "../../utils/date";
+import { getStatusDisplay } from "../../utils/appointment";
 
 type AppointmentResponse = components["schemas"]["AppointmentResponse"];
 type PaginatedAppointments = components["schemas"]["PaginatedResponse_AppointmentResponse_"];
 
-// Helper to get status display
-function getStatusDisplay(status: string): { text: string; bgColor: string; textColor: string } {
-  switch (status) {
-    case "booked":
-      return { text: "Booked", bgColor: "rgba(34, 197, 94, 0.2)", textColor: "#4ade80" };
-    case "cancelled_by_user":
-      return { text: "Cancelled by user", bgColor: "rgba(239, 68, 68, 0.2)", textColor: "#f87171" };
-    case "cancelled_by_admin":
-      return { text: "Cancelled by admin", bgColor: "rgba(239, 68, 68, 0.2)", textColor: "#f87171" };
-    default:
-      return { text: status, bgColor: "rgba(255,255,255,0.1)", textColor: "rgba(255,255,255,0.6)" };
-  }
-}
-
 const styles: Record<string, React.CSSProperties> = {
   main: {
     minHeight: "100vh",

frontend/app/appointments/page.tsx

@@ -8,23 +8,10 @@ import { Header } from "../components/Header";
 import { useRequireAuth } from "../hooks/useRequireAuth";
 import { components } from "../generated/api";
 import { formatDateTime } from "../utils/date";
+import { getStatusDisplay } from "../utils/appointment";
 
 type AppointmentResponse = components["schemas"]["AppointmentResponse"];
 
-// Helper to get status display
-function getStatusDisplay(status: string): { text: string; bgColor: string; textColor: string } {
-  switch (status) {
-    case "booked":
-      return { text: "Booked", bgColor: "rgba(34, 197, 94, 0.2)", textColor: "#4ade80" };
-    case "cancelled_by_user":
-      return { text: "Cancelled by you", bgColor: "rgba(239, 68, 68, 0.2)", textColor: "#f87171" };
-    case "cancelled_by_admin":
-      return { text: "Cancelled by admin", bgColor: "rgba(239, 68, 68, 0.2)", textColor: "#f87171" };
-    default:
-      return { text: status, bgColor: "rgba(255,255,255,0.1)", textColor: "rgba(255,255,255,0.6)" };
-  }
-}
-
 const styles: Record<string, React.CSSProperties> = {
   main: {
     minHeight: "100vh",
@@ -266,7 +253,7 @@ export default function AppointmentsPage() {
                 </h2>
                 <div style={styles.appointmentList}>
                   {upcomingAppointments.map((apt) => {
-                    const status = getStatusDisplay(apt.status);
+                    const status = getStatusDisplay(apt.status, true);
                     return (
                       <div key={apt.id} style={styles.appointmentCard}>
                         <div style={styles.appointmentHeader}>
@@ -332,7 +319,7 @@ export default function AppointmentsPage() {
                 </h2>
                 <div style={styles.appointmentList}>
                   {pastOrCancelledAppointments.map((apt) => {
-                    const status = getStatusDisplay(apt.status);
+                    const status = getStatusDisplay(apt.status, true);
                     return (
                       <div key={apt.id} style={{...styles.appointmentCard, ...styles.appointmentCardPast}}>
                         <div style={styles.appointmentTime}>

frontend/app/utils/appointment.ts

@@ -0,0 +1,33 @@
+/**
+ * Appointment-related utilities.
+ */
+
+export interface StatusDisplay {
+  text: string;
+  bgColor: string;
+  textColor: string;
+}
+
+/**
+ * Get display information for an appointment status.
+ * 
+ * @param status - The appointment status string
+ * @param isOwnView - If true, uses "Cancelled by you" instead of "Cancelled by user"
+ */
+export function getStatusDisplay(status: string, isOwnView: boolean = false): StatusDisplay {
+  switch (status) {
+    case "booked":
+      return { text: "Booked", bgColor: "rgba(34, 197, 94, 0.2)", textColor: "#4ade80" };
+    case "cancelled_by_user":
+      return {
+        text: isOwnView ? "Cancelled by you" : "Cancelled by user",
+        bgColor: "rgba(239, 68, 68, 0.2)",
+        textColor: "#f87171",
+      };
+    case "cancelled_by_admin":
+      return { text: "Cancelled by admin", bgColor: "rgba(239, 68, 68, 0.2)", textColor: "#f87171" };
+    default:
+      return { text: status, bgColor: "rgba(255,255,255,0.1)", textColor: "rgba(255,255,255,0.6)" };
+  }
+}
+