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/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)" };
+  }
+}
+