pih-appointment-widget 0.0.27 → 0.0.29

package/README.md

@@ -1,70 +1,70 @@
-# Getting Started with Create React App
-
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `npm start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
-
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
-
-### `npm test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
-
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
-
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-
-### Analyzing the Bundle Size
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `npm run build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+
+If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+
+You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `npm run build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

package/babel.config.js

@@ -1,6 +1,6 @@
-module.exports = {
-    presets: [
-      '@babel/preset-env',
-      '@babel/preset-react'
-    ],
+module.exports = {
+    presets: [
+      '@babel/preset-env',
+      '@babel/preset-react'
+    ],
   };

package/dist/App.js

@@ -19,20 +19,21 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _AppointmentPage = _interopRequireWildcard(require("./components/AppointmentPage.js"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 let bookingWidgetInstance = null;
 
 // SDK for embedding appointment widget
 const BookingSDK = {
-  /**
-   * Show appointment widget with configuration
-   * @param {object} config - Configuration object
-   * @param {string} config.apiBaseUrl - Base URL for API
-   * @param {string} config.hospitalId - Hospital ID
-   * @param {number} config.doctorId - Doctor ID
-   * @param {string} config.joinCallUrl - Video call URL
-   * @param {function} onAction - Optional callback for actions
+  /**
+   * Show appointment widget with configuration
+   * @param {object} config - Configuration object
+   * @param {string} config.apiBaseUrl - Base URL for API
+   * @param {string} config.hospitalId - Hospital ID
+   * @param {number} config.doctorId - Doctor ID
+   * @param {string} config.joinCallUrl - Video call URL
+   * @param {function} onAction - Optional callback for actions
    */
   showWidget: (config, onAction) => {
     if (!bookingWidgetInstance) {

package/dist/components/AppointmentPage.js

@@ -8,10 +8,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _appointmentService = require("../services/appointmentService");
 var _httpService = require("../services/httpService");
 var _apiConfig = require("../constants/apiConfig");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // Decode JWT payload (no verification; for display only). Returns {} on invalid/missing.
 function getJwtPayload(token) {
   if (!token || typeof token !== "string") return {};
@@ -21,7 +19,7 @@ function getJwtPayload(token) {
     const base64 = parts[1].replace(/-/g, "+").replace(/_/g, "/");
     const padded = base64.padEnd(base64.length + (4 - base64.length % 4) % 4, "=");
     return JSON.parse(atob(padded));
-  } catch (_unused) {
+  } catch {
     return {};
   }
 }
@@ -41,32 +39,26 @@ const PIH_APPOINTMENT_WIDGET_DATA_ATTR = "data-pih-widget";
 
 // Extract from SSO login response (not from appToken JWT — these are only in login response)
 function extractAppToken(response) {
-  var _ref, _ref2, _ref3, _response$data$access, _response$data, _response$data2;
   if (!response || response.err) return null;
-  return (_ref = (_ref2 = (_ref3 = (_response$data$access = (_response$data = response.data) === null || _response$data === void 0 ? void 0 : _response$data.access_token) !== null && _response$data$access !== void 0 ? _response$data$access : (_response$data2 = response.data) === null || _response$data2 === void 0 ? void 0 : _response$data2.token) !== null && _ref3 !== void 0 ? _ref3 : response.token) !== null && _ref2 !== void 0 ? _ref2 : response.accessToken) !== null && _ref !== void 0 ? _ref : null;
+  return response.data?.access_token ?? response.data?.token ?? response.token ?? response.accessToken ?? null;
 }
 function extractDoctorIdFromLoginResponse(response) {
-  var _ref4, _response$data$doctor;
-  if (!(response !== null && response !== void 0 && response.data)) return null;
-  const id = (_ref4 = (_response$data$doctor = response.data.doctor_id) !== null && _response$data$doctor !== void 0 ? _response$data$doctor : response.data.doctorId) !== null && _ref4 !== void 0 ? _ref4 : null;
+  if (!response?.data) return null;
+  const id = response.data.doctor_id ?? response.data.doctorId ?? null;
   console.log(id, 'extractDoctorIdFromLoginResponse -> id');
   return id != null ? String(id) : null;
 }
 function extractUserNameFromLoginResponse(response) {
-  var _ref5, _ref6, _response$data$name;
-  if (!(response !== null && response !== void 0 && response.data)) return null;
-  const name = (_ref5 = (_ref6 = (_response$data$name = response.data.name) !== null && _response$data$name !== void 0 ? _response$data$name : response.data.doctor_name) !== null && _ref6 !== void 0 ? _ref6 : response.data.userName) !== null && _ref5 !== void 0 ? _ref5 : null;
+  if (!response?.data) return null;
+  const name = response.data.name ?? response.data.doctor_name ?? response.data.userName ?? null;
   return name != null ? String(name) : null;
 }
 
 // Error boundary so a render error never shows a blank screen
 class AppointmentErrorBoundary extends _react.Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", {
-      hasError: false
-    });
-  }
+  state = {
+    hasError: false
+  };
   static getDerivedStateFromError() {
     return {
       hasError: true
@@ -123,21 +115,21 @@ class AppointmentErrorBoundary extends _react.Component {
 }
 
 // SDK Component - accepts configuration from parent app
-const AppointmentPage = _ref7 => {
+const AppointmentPage = _ref => {
   let {
     config = {}
-  } = _ref7;
+  } = _ref;
   const [storedApiBaseUrl, setStoredApiBaseUrl] = (0, _react.useState)(() => {
     try {
       return typeof localStorage !== "undefined" ? localStorage.getItem(STORAGE_KEY_API_BASE_URL) : null;
-    } catch (_unused2) {
+    } catch {
       return null;
     }
   });
   const [storedHospitalId, setStoredHospitalId] = (0, _react.useState)(() => {
     try {
       return typeof localStorage !== "undefined" ? localStorage.getItem(STORAGE_KEY_HOSPITAL_ID) : null;
-    } catch (_unused3) {
+    } catch {
       return null;
     }
   });
@@ -148,14 +140,14 @@ const AppointmentPage = _ref7 => {
   const [storedIdToken, setStoredIdToken] = (0, _react.useState)(() => {
     try {
       return typeof localStorage !== "undefined" ? localStorage.getItem(STORAGE_KEY_ID_TOKEN) : null;
-    } catch (_unused4) {
+    } catch {
       return null;
     }
   });
   const [storedEmail, setStoredEmail] = (0, _react.useState)(() => {
     try {
       return typeof localStorage !== "undefined" ? localStorage.getItem(STORAGE_KEY_EMAIL) : null;
-    } catch (_unused5) {
+    } catch {
       return null;
     }
   });
@@ -170,10 +162,12 @@ const AppointmentPage = _ref7 => {
       if (token && String(token).trim()) {
         const prevToken = localStorage.getItem(STORAGE_KEY_ID_TOKEN);
         if (prevToken !== token) {
-          // New token from parent (e.g. Flutter opened with different user) — clear app token so we SSO with new credentials
+          // New token from parent (e.g. Flutter re-login) — clear app token and force SSO for the new session.
+          // refreshLoginTrigger increment guarantees SSO re-runs even if appToken was already null in state.
           setAppToken(null);
           setDoctorIdFromLogin(null);
           setUserName(null);
+          setRefreshLoginTrigger(t => t + 1);
           localStorage.removeItem(STORAGE_KEY_APP_TOKEN);
           localStorage.removeItem(STORAGE_KEY_DOCTOR_ID);
           localStorage.removeItem(STORAGE_KEY_USER_NAME);
@@ -198,21 +192,21 @@ const AppointmentPage = _ref7 => {
   const [appToken, setAppToken] = (0, _react.useState)(() => {
     try {
       return typeof localStorage !== "undefined" ? localStorage.getItem(STORAGE_KEY_APP_TOKEN) : null;
-    } catch (_unused6) {
+    } catch {
       return null;
     }
   });
   const [doctorIdFromLogin, setDoctorIdFromLogin] = (0, _react.useState)(() => {
     try {
       return typeof localStorage !== "undefined" ? localStorage.getItem(STORAGE_KEY_DOCTOR_ID) : null;
-    } catch (_unused7) {
+    } catch {
       return null;
     }
   });
   const [userName, setUserName] = (0, _react.useState)(() => {
     try {
       return typeof localStorage !== "undefined" ? localStorage.getItem(STORAGE_KEY_USER_NAME) : null;
-    } catch (_unused8) {
+    } catch {
       return null;
     }
   });
@@ -223,7 +217,7 @@ const AppointmentPage = _ref7 => {
       const hasId = localStorage.getItem(STORAGE_KEY_ID_TOKEN);
       const hasEmail = localStorage.getItem(STORAGE_KEY_EMAIL);
       return !hasApp && !!(hasId && hasEmail);
-    } catch (_unused9) {
+    } catch {
       return false;
     }
   });
@@ -285,7 +279,7 @@ const AppointmentPage = _ref7 => {
     const y = date.getFullYear();
     const m = String(date.getMonth() + 1).padStart(2, "0");
     const d = String(date.getDate()).padStart(2, "0");
-    return "".concat(y, "-").concat(m, "-").concat(d);
+    return `${y}-${m}-${d}`;
   };
   const getDateRange = option => {
     const today = new Date();
@@ -316,8 +310,8 @@ const AppointmentPage = _ref7 => {
         to = formatLocalDate(lastOfMonth);
         break;
       case "currentYear":
-        from = "".concat(today.getFullYear(), "-01-01");
-        to = "".concat(today.getFullYear(), "-12-31");
+        from = `${today.getFullYear()}-01-01`;
+        to = `${today.getFullYear()}-12-31`;
         break;
       default:
         from = to = getTodayDate();
@@ -342,7 +336,7 @@ const AppointmentPage = _ref7 => {
       case "currentYear":
         return "Current Year";
       case "custom":
-        return isMobile ? "Custom" : "".concat(fromDate, " to ").concat(toDate);
+        return isMobile ? "Custom" : `${fromDate} to ${toDate}`;
       default:
         return "Today";
     }
@@ -427,12 +421,12 @@ const AppointmentPage = _ref7 => {
 
   // Helper to get unique identifier from appointment
   const getAppointmentId = appointment => {
-    return (appointment === null || appointment === void 0 ? void 0 : appointment.id) || (appointment === null || appointment === void 0 ? void 0 : appointment._id) || (appointment === null || appointment === void 0 ? void 0 : appointment.appointmentId) || (appointment === null || appointment === void 0 ? void 0 : appointment.patientId) || JSON.stringify(appointment);
+    return appointment?.id || appointment?._id || appointment?.appointmentId || appointment?.patientId || JSON.stringify(appointment);
   };
 
   // Generate avatar with first letter if no image
   const getPatientAvatar = appointment => {
-    if (appointment !== null && appointment !== void 0 && appointment.image) {
+    if (appointment?.image) {
       return appointment.image;
     }
     // Return null to use the letter avatar component
@@ -471,7 +465,12 @@ const AppointmentPage = _ref7 => {
     }
   };
   const fetchAppointments = (0, _react.useCallback)(async () => {
-    if (!appToken) return;
+    console.log(appToken, 'fetchAppointments -> appToken');
+    if (!appToken) {
+      // No token available — force SSO re-login so the next render re-fetches automatically.
+      if (idToken && email) setRefreshLoginTrigger(t => t + 1);
+      return;
+    }
     console.log(doctorIdFromLogin, 'fetchAppointments -> doctorIdFromLogin');
     const doctorId = doctorIdFromLogin;
     setLoading(true);
@@ -517,7 +516,7 @@ const AppointmentPage = _ref7 => {
     } finally {
       setLoading(false);
     }
-  }, [activeTab, fromDate, toDate, appointmentTypeFilter, apiBaseUrl, hospitalId, doctorIdFromLogin, appToken]);
+  }, [activeTab, fromDate, toDate, appointmentTypeFilter, apiBaseUrl, hospitalId, doctorIdFromLogin, appToken, idToken, email]);
 
   // Handle appointment selection - no API call, just show data from list
   const handleAppointmentSelect = appointment => {
@@ -551,7 +550,6 @@ const AppointmentPage = _ref7 => {
     setCallLoading(true);
     setCallError(null);
     try {
-      var _response$data3;
       const callConfig = {
         apiBaseUrl,
         hospitalId,
@@ -579,7 +577,7 @@ const AppointmentPage = _ref7 => {
         setCallError("Session expired. Re-authenticating...");
         return;
       }
-      if (response.err || !((_response$data3 = response.data) !== null && _response$data3 !== void 0 && _response$data3.token)) {
+      if (response.err || !response.data?.token) {
         setCallError(String(response.err || "Failed to initiate call"));
         return;
       }
@@ -798,6 +796,8 @@ const AppointmentPage = _ref7 => {
   }, [showPipVideo, isPipMinimized, isPipFullscreen, pipSize]);
 
   // Call login API only when we have no appToken (or got 401 / 403 and need refresh). Otherwise use stored appToken.
+  // appToken is intentionally included in deps: when the persist effect clears it (new idToken from Flutter after
+  // re-login), this effect re-evaluates needLogin with appToken=null and fires SSO for the new session.
   (0, _react.useEffect)(() => {
     const needLogin = idToken && email && (!appToken || refreshLoginTrigger > 0);
     if (!needLogin) return;
@@ -843,13 +843,18 @@ const AppointmentPage = _ref7 => {
           }
         } catch (e) {}
       }
-    }).catch(() => {}).finally(() => {
+    }).catch(err => {
+      if (!cancelled) {
+        setTokenError(err?.message || "Authentication failed. Please try again.");
+        setAppToken(null);
+      }
+    }).finally(() => {
       if (!cancelled) setTokenLoading(false);
     });
     return () => {
       cancelled = true;
     };
-  }, [apiBaseUrl, hospitalId, idToken, email, refreshLoginTrigger]);
+  }, [apiBaseUrl, hospitalId, idToken, email, refreshLoginTrigger, appToken]);
 
   // Reset page to 1 and clear call error when filters/tab change
   (0, _react.useEffect)(() => {
@@ -872,7 +877,32 @@ const AppointmentPage = _ref7 => {
 
     // Add responsive styles and animations
     const style = document.createElement("style");
-    style.innerHTML = "\n      @keyframes spin {\n        0% { transform: rotate(0deg); }\n        100% { transform: rotate(360deg); }\n      }\n      \n      @media (max-width: 768px) {\n        .appointments-grid {\n          grid-template-columns: 1.5fr 1fr 0.8fr !important;\n        }\n        .appointments-header-grid {\n          grid-template-columns: 1.5fr 1fr 0.8fr !important;\n        }\n        .hide-on-mobile {\n          display: none !important;\n        }\n      }\n      @media (max-width: 480px) {\n        .appointments-header-grid {\n          font-size: 10px !important;\n        }\n        .appointments-grid {\n          font-size: 11px !important;\n        }\n      }\n    ";
+    style.innerHTML = `
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+      
+      @media (max-width: 768px) {
+        .appointments-grid {
+          grid-template-columns: 1.5fr 1fr 0.8fr !important;
+        }
+        .appointments-header-grid {
+          grid-template-columns: 1.5fr 1fr 0.8fr !important;
+        }
+        .hide-on-mobile {
+          display: none !important;
+        }
+      }
+      @media (max-width: 480px) {
+        .appointments-header-grid {
+          font-size: 10px !important;
+        }
+        .appointments-grid {
+          font-size: 11px !important;
+        }
+      }
+    `;
     document.head.appendChild(style);
 
     // Handle window resize
@@ -925,7 +955,7 @@ const AppointmentPage = _ref7 => {
         justifyContent: "center",
         padding: "24px"
       }
-    }, /*#__PURE__*/_react.default.createElement("style", null, "@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }"), /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/_react.default.createElement("style", null, `@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }`), /*#__PURE__*/_react.default.createElement("div", {
       style: {
         width: "40px",
         height: "40px",
@@ -1676,7 +1706,7 @@ const AppointmentPage = _ref7 => {
       style: {
         fontSize: "13px"
       }
-    }, searchQuery ? "No appointments found for \"".concat(searchQuery, "\"") : "No appointments found"), searchQuery && /*#__PURE__*/_react.default.createElement("button", {
+    }, searchQuery ? `No appointments found for "${searchQuery}"` : "No appointments found"), searchQuery && /*#__PURE__*/_react.default.createElement("button", {
       onClick: () => setSearchQuery(""),
       style: {
         marginTop: "12px",
@@ -1955,7 +1985,7 @@ const AppointmentPage = _ref7 => {
         fontWeight: "700",
         fontSize: isMobile ? "12px" : "13px"
       }
-    }, (selectedAppointment === null || selectedAppointment === void 0 ? void 0 : selectedAppointment.specialisation) || (selectedAppointment === null || selectedAppointment === void 0 ? void 0 : selectedAppointment.speciality) || "N/A")), /*#__PURE__*/_react.default.createElement("div", {
+    }, selectedAppointment?.specialisation || selectedAppointment?.speciality || "N/A")), /*#__PURE__*/_react.default.createElement("div", {
       style: {
         textAlign: "right"
       }
@@ -1970,7 +2000,7 @@ const AppointmentPage = _ref7 => {
         fontWeight: "700",
         fontSize: isMobile ? "12px" : "13px"
       }
-    }, (selectedAppointment === null || selectedAppointment === void 0 ? void 0 : selectedAppointment.type) || (selectedAppointment === null || selectedAppointment === void 0 ? void 0 : selectedAppointment.appointmentType) || "Online"))), /*#__PURE__*/_react.default.createElement("div", {
+    }, selectedAppointment?.type || selectedAppointment?.appointmentType || "Online"))), /*#__PURE__*/_react.default.createElement("div", {
       style: {
         display: "flex",
         justifyContent: "space-between"
@@ -1990,7 +2020,7 @@ const AppointmentPage = _ref7 => {
         fontWeight: "700",
         fontSize: isMobile ? "12px" : "13px"
       }
-    }, (selectedAppointment === null || selectedAppointment === void 0 ? void 0 : selectedAppointment.date) || (selectedAppointment === null || selectedAppointment === void 0 ? void 0 : selectedAppointment.appointmentDate) || "N/A")), /*#__PURE__*/_react.default.createElement("div", {
+    }, selectedAppointment?.date || selectedAppointment?.appointmentDate || "N/A")), /*#__PURE__*/_react.default.createElement("div", {
       style: {
         textAlign: "right"
       }
@@ -2005,7 +2035,7 @@ const AppointmentPage = _ref7 => {
         fontWeight: "700",
         fontSize: isMobile ? "12px" : "13px"
       }
-    }, (selectedAppointment === null || selectedAppointment === void 0 ? void 0 : selectedAppointment.time) || (selectedAppointment === null || selectedAppointment === void 0 ? void 0 : selectedAppointment.appointmentTime) || "N/A"))), /*#__PURE__*/_react.default.createElement("div", {
+    }, selectedAppointment?.time || selectedAppointment?.appointmentTime || "N/A"))), /*#__PURE__*/_react.default.createElement("div", {
       style: {
         display: "flex",
         justifyContent: "space-between"
@@ -2025,7 +2055,7 @@ const AppointmentPage = _ref7 => {
         fontWeight: "700",
         fontSize: isMobile ? "12px" : "13px"
       }
-    }, (selectedAppointment === null || selectedAppointment === void 0 ? void 0 : selectedAppointment.doctor) || (selectedAppointment === null || selectedAppointment === void 0 ? void 0 : selectedAppointment.doctorName) || "N/A"))), /*#__PURE__*/_react.default.createElement("div", {
+    }, selectedAppointment?.doctor || selectedAppointment?.doctorName || "N/A"))), /*#__PURE__*/_react.default.createElement("div", {
       style: {
         display: "flex",
         justifyContent: "space-between"
@@ -2045,7 +2075,7 @@ const AppointmentPage = _ref7 => {
         fontWeight: "700",
         fontSize: isMobile ? "12px" : "13px"
       }
-    }, (selectedAppointment === null || selectedAppointment === void 0 ? void 0 : selectedAppointment.hospital) || (selectedAppointment === null || selectedAppointment === void 0 ? void 0 : selectedAppointment.hospitalName) || "N/A"))), /*#__PURE__*/_react.default.createElement("div", {
+    }, selectedAppointment?.hospital || selectedAppointment?.hospitalName || "N/A"))), /*#__PURE__*/_react.default.createElement("div", {
       style: {
         display: "flex",
         justifyContent: "space-between"
@@ -2066,7 +2096,7 @@ const AppointmentPage = _ref7 => {
         fontSize: isMobile ? "11px" : "12px",
         lineHeight: "1.4"
       }
-    }, (selectedAppointment === null || selectedAppointment === void 0 ? void 0 : selectedAppointment.reason) || (selectedAppointment === null || selectedAppointment === void 0 ? void 0 : selectedAppointment.reasonForAppointment) || "No reason provided"))), activeTab === "upcoming" && /*#__PURE__*/_react.default.createElement("div", {
+    }, selectedAppointment?.reason || selectedAppointment?.reasonForAppointment || "No reason provided"))), activeTab === "upcoming" && /*#__PURE__*/_react.default.createElement("div", {
       style: {
         display: "flex",
         flexDirection: isMobile ? "column" : "row",
@@ -2119,12 +2149,12 @@ const AppointmentPage = _ref7 => {
     }, "Select an appointment to view details"))))))), showPipVideo && /*#__PURE__*/_react.default.createElement("div", {
       style: {
         position: "fixed",
-        left: isPipFullscreen ? "0" : isMobile ? "10px" : "".concat(pipPosition.x, "px"),
-        top: isPipFullscreen ? "0" : isMobile ? "70px" : "".concat(pipPosition.y, "px"),
+        left: isPipFullscreen ? "0" : isMobile ? "10px" : `${pipPosition.x}px`,
+        top: isPipFullscreen ? "0" : isMobile ? "70px" : `${pipPosition.y}px`,
         right: isPipFullscreen ? "0" : isMobile ? "10px" : "auto",
         bottom: isPipFullscreen ? "0" : "auto",
-        width: isPipFullscreen ? "100vw" : isMobile ? "calc(100vw - 20px)" : isPipMinimized ? "350px" : "".concat(pipSize.width, "px"),
-        height: isPipFullscreen ? "100vh" : isPipMinimized ? "auto" : isMobile ? "300px" : "".concat(pipSize.height, "px"),
+        width: isPipFullscreen ? "100vw" : isMobile ? "calc(100vw - 20px)" : isPipMinimized ? "350px" : `${pipSize.width}px`,
+        height: isPipFullscreen ? "100vh" : isPipMinimized ? "auto" : isMobile ? "300px" : `${pipSize.height}px`,
         background: "#FFFFFF",
         borderRadius: isPipFullscreen ? "0" : "8px",
         boxShadow: "0 8px 24px rgba(0, 0, 0, 0.3)",
@@ -2175,7 +2205,7 @@ const AppointmentPage = _ref7 => {
         textOverflow: "ellipsis",
         whiteSpace: "nowrap"
       }
-    }, "Video Call - ", (selectedAppointment === null || selectedAppointment === void 0 ? void 0 : selectedAppointment.patientName) || "Patient")), /*#__PURE__*/_react.default.createElement("div", {
+    }, "Video Call - ", selectedAppointment?.patientName || "Patient")), /*#__PURE__*/_react.default.createElement("div", {
       style: {
         display: "flex",
         gap: isMobile ? "4px" : "6px",
@@ -2304,7 +2334,7 @@ const AppointmentPage = _ref7 => {
       src: (() => {
         if (!callToken) return "";
         const base = String(joinCallUrlBase || "").replace(/\/?$/, "/");
-        return "".concat(base).concat(callToken);
+        return `${base}${callToken}`;
       })(),
       style: {
         width: "100%",
@@ -2375,7 +2405,12 @@ const AppointmentPage = _ref7 => {
         background: "transparent",
         zIndex: 10001
       }
-    })), /*#__PURE__*/_react.default.createElement("style", null, "\n            @keyframes pulse {\n              0%, 100% { opacity: 1; }\n              50% { opacity: 0.5; }\n            }\n          "))), showAuthError && /*#__PURE__*/_react.default.createElement("div", {
+    })), /*#__PURE__*/_react.default.createElement("style", null, `
+            @keyframes pulse {
+              0%, 100% { opacity: 1; }
+              50% { opacity: 0.5; }
+            }
+          `))), showAuthError && /*#__PURE__*/_react.default.createElement("div", {
       style: {
         position: "fixed",
         inset: 0,