pih-appointment-widget 0.0.29 → 0.0.30

package/dist/components/AppointmentPage.js

@@ -544,6 +544,39 @@ const AppointmentPage = _ref => {
     }
   };
 
+  // Returns true if the current time is within 2 hours after the appointment's scheduled slot time.
+  // Handles date format: "Sun, 15 Mar 2026" and time format: "12:15 PM"
+  const isWithinJoinWindow = appointment => {
+    const dateStr = appointment?.date || appointment?.appointmentDate;
+    const timeStr = appointment?.time || appointment?.appointmentTime;
+    if (!dateStr || !timeStr) return false;
+    try {
+      // Parse "12:15 PM" or "9:30 AM" into 24-hour h/m values
+      const ampmMatch = String(timeStr).trim().match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);
+      let h, m;
+      if (ampmMatch) {
+        h = parseInt(ampmMatch[1], 10);
+        m = parseInt(ampmMatch[2], 10);
+        const period = ampmMatch[3].toUpperCase();
+        if (period === "AM" && h === 12) h = 0;
+        if (period === "PM" && h !== 12) h += 12;
+      } else {
+        // Already 24-hour "HH:MM"
+        const parts = String(timeStr).trim().split(":");
+        h = parseInt(parts[0], 10);
+        m = parseInt(parts[1], 10);
+      }
+      if (isNaN(h) || isNaN(m)) return false;
+      // "Sun, 15 Mar 2026 12:15:00" — space-separated; JS parses RFC-like date strings correctly
+      const appointmentDate = new Date(`${dateStr} ${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:00`);
+      if (isNaN(appointmentDate.getTime())) return false;
+      const windowEnd = new Date(appointmentDate.getTime() + 2 * 60 * 60 * 1000);
+      return new Date() <= windowEnd;
+    } catch {
+      return false;
+    }
+  };
+
   // Handle join call — call initiate API to get LiveKit token+url, then open PiP
   const handleJoinCall = async () => {
     if (!selectedAppointment || !appToken) return;
@@ -616,25 +649,6 @@ const AppointmentPage = _ref => {
     fetchAppointments();
   };
 
-  // End call silently when user presses browser back button during an active call.
-  (0, _react.useEffect)(() => {
-    if (!showPipVideo) return;
-    window.history.pushState({
-      pipActive: true
-    }, "");
-    const handlePopState = () => {
-      setShowPipVideo(false);
-      setIsPipMinimized(false);
-      setIsPipFullscreen(false);
-      setCallToken(null);
-      setCallUrl(null);
-      setCallError(null);
-      window.history.back();
-    };
-    window.addEventListener("popstate", handlePopState);
-    return () => window.removeEventListener("popstate", handlePopState);
-  }, [showPipVideo]);
-
   // Handle PiP minimize
   const handleTogglePipSize = () => {
     if (isPipFullscreen) {
@@ -2096,7 +2110,7 @@ const AppointmentPage = _ref => {
         fontSize: isMobile ? "11px" : "12px",
         lineHeight: "1.4"
       }
-    }, selectedAppointment?.reason || selectedAppointment?.reasonForAppointment || "No reason provided"))), activeTab === "upcoming" && /*#__PURE__*/_react.default.createElement("div", {
+    }, selectedAppointment?.reason || selectedAppointment?.reasonForAppointment || "No reason provided"))), (activeTab === "upcoming" || activeTab === "completed" && isWithinJoinWindow(selectedAppointment)) && /*#__PURE__*/_react.default.createElement("div", {
       style: {
         display: "flex",
         flexDirection: isMobile ? "column" : "row",
@@ -2105,7 +2119,7 @@ const AppointmentPage = _ref => {
       }
     }, /*#__PURE__*/_react.default.createElement("button", {
       type: "button",
-      onClick: handleJoinCall,
+      onClick: !callLoading ? handleJoinCall : undefined,
       disabled: callLoading,
       style: {
         flex: 1,
@@ -2119,7 +2133,7 @@ const AppointmentPage = _ref => {
         fontSize: isMobile ? "11px" : "12px",
         cursor: callLoading ? "not-allowed" : "pointer"
       }
-    }, callLoading ? "Connecting..." : "Join Call >")), activeTab === "upcoming" && callError && /*#__PURE__*/_react.default.createElement("div", {
+    }, callLoading ? "Connecting..." : "Join Call >")), (activeTab === "upcoming" || activeTab === "completed") && callError && /*#__PURE__*/_react.default.createElement("div", {
       style: {
         fontSize: "11px",
         color: "#e53935",

package/dist/pih-appointment-widget.umd.js

@@ -726,6 +726,39 @@
       setCallError(null);
     };
 
+    // Returns true if the current time is within 2 hours after the appointment's scheduled slot time.
+    // Handles date format: "Sun, 15 Mar 2026" and time format: "12:15 PM"
+    const isWithinJoinWindow = appointment => {
+      const dateStr = appointment?.date || appointment?.appointmentDate;
+      const timeStr = appointment?.time || appointment?.appointmentTime;
+      if (!dateStr || !timeStr) return false;
+      try {
+        // Parse "12:15 PM" or "9:30 AM" into 24-hour h/m values
+        const ampmMatch = String(timeStr).trim().match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);
+        let h, m;
+        if (ampmMatch) {
+          h = parseInt(ampmMatch[1], 10);
+          m = parseInt(ampmMatch[2], 10);
+          const period = ampmMatch[3].toUpperCase();
+          if (period === "AM" && h === 12) h = 0;
+          if (period === "PM" && h !== 12) h += 12;
+        } else {
+          // Already 24-hour "HH:MM"
+          const parts = String(timeStr).trim().split(":");
+          h = parseInt(parts[0], 10);
+          m = parseInt(parts[1], 10);
+        }
+        if (isNaN(h) || isNaN(m)) return false;
+        // "Sun, 15 Mar 2026 12:15:00" — space-separated; JS parses RFC-like date strings correctly
+        const appointmentDate = new Date(`${dateStr} ${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:00`);
+        if (isNaN(appointmentDate.getTime())) return false;
+        const windowEnd = new Date(appointmentDate.getTime() + 2 * 60 * 60 * 1000);
+        return new Date() <= windowEnd;
+      } catch {
+        return false;
+      }
+    };
+
     // Handle join call — call initiate API to get LiveKit token+url, then open PiP
     const handleJoinCall = async () => {
       if (!selectedAppointment || !appToken) return;
@@ -798,25 +831,6 @@
       fetchAppointments();
     };
 
-    // End call silently when user presses browser back button during an active call.
-    React.useEffect(() => {
-      if (!showPipVideo) return;
-      window.history.pushState({
-        pipActive: true
-      }, "");
-      const handlePopState = () => {
-        setShowPipVideo(false);
-        setIsPipMinimized(false);
-        setIsPipFullscreen(false);
-        setCallToken(null);
-        setCallUrl(null);
-        setCallError(null);
-        window.history.back();
-      };
-      window.addEventListener("popstate", handlePopState);
-      return () => window.removeEventListener("popstate", handlePopState);
-    }, [showPipVideo]);
-
     // Handle PiP minimize
     const handleTogglePipSize = () => {
       if (isPipFullscreen) {
@@ -2132,7 +2146,7 @@
           fontSize: isMobile ? "11px" : "12px",
           lineHeight: "1.4"
         }
-      }, selectedAppointment?.reason || selectedAppointment?.reasonForAppointment || "No reason provided"))), activeTab === "upcoming" && /*#__PURE__*/React__default["default"].createElement("div", {
+      }, selectedAppointment?.reason || selectedAppointment?.reasonForAppointment || "No reason provided"))), (activeTab === "upcoming" || activeTab === "completed" && isWithinJoinWindow(selectedAppointment)) && /*#__PURE__*/React__default["default"].createElement("div", {
         style: {
           display: "flex",
           flexDirection: isMobile ? "column" : "row",
@@ -2141,7 +2155,7 @@
         }
       }, /*#__PURE__*/React__default["default"].createElement("button", {
         type: "button",
-        onClick: handleJoinCall,
+        onClick: !callLoading ? handleJoinCall : undefined,
         disabled: callLoading,
         style: {
           flex: 1,
@@ -2155,7 +2169,7 @@
           fontSize: isMobile ? "11px" : "12px",
           cursor: callLoading ? "not-allowed" : "pointer"
         }
-      }, callLoading ? "Connecting..." : "Join Call >")), activeTab === "upcoming" && callError && /*#__PURE__*/React__default["default"].createElement("div", {
+      }, callLoading ? "Connecting..." : "Join Call >")), (activeTab === "upcoming" || activeTab === "completed") && callError && /*#__PURE__*/React__default["default"].createElement("div", {
         style: {
           fontSize: "11px",
           color: "#e53935",

package/dist/pih-appointment-widget.umd.min.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","react","react-dom"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).MyPackage={},e.React,e.ReactDOM)}(this,(function(e,t,n){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(t),i=o(n);const r="/appointment/V1/consultant/all-appointments",l="/notification/V1/consultation/online/initiate",d="https://wbafedevittisalwe01-had2b3e0a7h6fyey.westeurope-01.azurewebsites.net/call/",s=async function(e,t,n){let o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},a=(e||"").toUpperCase();"INPROGRESS"===a&&(a="IN_PROGRESS");const i=o.apiBaseUrl,l=o.hospitalId,d=o.doctorId,s=o.token||"",p={hospitalId:l,doctorId:d,fromDate:t,toDate:n,statuses:a,appointmentType:"ONLINE"},c=`${i}${r}`,u=await async function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"";const o=new URL(e);return o.search=new URLSearchParams(t).toString(),fetch(o,{method:"GET",headers:{"Content-Type":"application/json",Authorization:`${n}`}}).then((async e=>{const t=await e.json().catch((()=>({})));return e.ok?t:{err:t?.resultInfo?.message||"Something went wrong!",status:e.status}})).catch((e=>(console.error("Fetch error:",e),{err:e?.message||String(e)||"Network error"})))}(c,p,"PIH-Appointment-Widget",s);return u},p=async function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};console.log("initiateConsultation -> config",t);const n=`${t.apiBaseUrl.replace(/\/$/,"")}${l}`,o=t.appToken||"";return async function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},o=arguments.length>4?arguments[4]:void 0;const a=new URL(e);Object.keys(n).forEach((e=>{a.searchParams.append(e,n[e])}));const i={"Content-Type":"application/json"};o&&(i.Authorization=o);const r={method:"POST",headers:i,body:JSON.stringify(t)};return fetch(a.toString(),r).then((async e=>{const t=await e.json().catch((()=>({})));return e.ok?t:{err:t?.resultInfo?.message||"Something went wrong!",status:e.status}})).catch((e=>(console.error("Fetch error:",e),{err:e.message||"Network error"})))}(n,{patientId:String(e.patientId||""),primaryPatientId:String(e.primaryPatientId||e.patientId||""),hospitalId:t.hospitalId,doctorId:String(t.doctorId),patientName:e.patientName||e.name||"",doctorName:e.doctorName||t.doctorName,appointmentId:String(e.id||e.appointmentId||e._id||"")},"PIH-Appointment-Widget",{},o)};const c="pih_appointment_idToken",u="pih_appointment_email",m="pih_appointment_appToken",f="pih_appointment_doctorId",x="pih_appointment_userName",g="pih_appointment_apiBaseUrl",h="pih_appointment_hospitalId",y=720,E="pih-appointment-widget",F="data-pih-widget";class w extends t.Component{state={hasError:!1};static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(e,t){"undefined"!=typeof console&&console.error&&console.error("Appointment widget error:",e,t)}render(){return this.state.hasError?a.default.createElement("div",{className:E,[F]:"teleconsult-appointments",style:{fontFamily:'"Nunito", serif',background:"#F5F5F7",boxSizing:"border-box",minHeight:"100vh",display:"flex",alignItems:"center",justifyContent:"center",padding:"24px",textAlign:"center"}},a.default.createElement("div",{style:{maxWidth:"400px"}},a.default.createElement("div",{style:{fontSize:"48px",marginBottom:"16px"}},"⚠️"),a.default.createElement("h2",{style:{fontSize:"20px",fontWeight:700,color:"#1a1a1a",margin:"0 0 8px 0"}},"Something went wrong"),a.default.createElement("p",{style:{fontSize:"14px",color:"#666",margin:0,lineHeight:1.5}},"Please refresh the page or try again later."))):this.props.children}}const b=e=>{let{config:n={}}=e;const[o,i]=t.useState((()=>{try{return"undefined"!=typeof localStorage?localStorage.getItem(g):null}catch{return null}})),[r,l]=t.useState((()=>{try{return"undefined"!=typeof localStorage?localStorage.getItem(h):null}catch{return null}})),b=n.apiBaseUrl||o||"https://afiyaapiqa.powermindinc.com",S=n.hospitalId||r,[v,k]=t.useState((()=>{try{return"undefined"!=typeof localStorage?localStorage.getItem(c):null}catch{return null}})),[C,I]=t.useState((()=>{try{return"undefined"!=typeof localStorage?localStorage.getItem(u):null}catch{return null}})),D=n.idToken||n.token||v,z=n.email||C;t.useEffect((()=>{try{if("undefined"==typeof localStorage)return;const e=n.idToken||n.token;if(e&&String(e).trim()){localStorage.getItem(c)!==e&&(M(null),A(null),N(null),_((e=>e+1)),localStorage.removeItem(m),localStorage.removeItem(f),localStorage.removeItem(x)),localStorage.setItem(c,e),k(e)}n.email&&String(n.email).trim()&&(localStorage.setItem(u,n.email),I(n.email)),n.apiBaseUrl&&String(n.apiBaseUrl).trim()&&(localStorage.setItem(g,n.apiBaseUrl.trim()),i(n.apiBaseUrl.trim())),null!=n.hospitalId&&String(n.hospitalId).trim()&&(localStorage.setItem(h,String(n.hospitalId).trim()),l(String(n.hospitalId).trim()))}catch(e){}}),[n.idToken,n.token,n.email,n.apiBaseUrl,n.hospitalId]);const[W,M]=t.useState((()=>{try{return"undefined"!=typeof localStorage?localStorage.getItem(m):null}catch{return null}})),[T,A]=t.useState((()=>{try{return"undefined"!=typeof localStorage?localStorage.getItem(f):null}catch{return null}})),[R,N]=t.useState((()=>{try{return"undefined"!=typeof localStorage?localStorage.getItem(x):null}catch{return null}})),[P,j]=t.useState((()=>{try{if("undefined"==typeof localStorage)return!1;const e=localStorage.getItem(m),t=localStorage.getItem(c),n=localStorage.getItem(u);return!e&&!(!t||!n)}catch{return!1}})),[B,H]=t.useState(null),[L,U]=t.useState(!1),[$,_]=t.useState(0);t.useEffect((()=>{W&&P&&j(!1)}),[W,P]),t.useEffect((()=>{W||(D&&z?(U(!1),H((e=>"Sign in required. Redirecting to home..."===e?null:e))):(H("Sign in required. Redirecting to home..."),U(!0)))}),[W,D,z]),t.useEffect((()=>{if(!L)return;const e=n.homeUrl||"https://wbaemrdevittisalwe01-fnapdpfme7bvduhh.westeurope-01.azurewebsites.net/";if(!e||"undefined"==typeof window)return;const t=setTimeout((()=>{window.location.href=e}),2500);return()=>clearTimeout(t)}),[L,n.homeUrl]),t.useEffect((()=>{if(!P)return;const e=setTimeout((()=>{H("Request timed out. Please try again."),j(!1)}),3e4);return()=>clearTimeout(e)}),[P]);const Y=n.joinCallUrl||d;W&&String(Y||"").replace(/\/?$/,"/");const O=function(e){if(!e||"string"!=typeof e)return{};try{const t=e.split(".");if(3!==t.length)return{};const n=t[1].replace(/-/g,"+").replace(/_/g,"/"),o=n.padEnd(n.length+(4-n.length%4)%4,"=");return JSON.parse(atob(o))}catch{return{}}}(D),V=R||O.name||O.sub||"User",q=()=>(new Date).toISOString().split("T")[0],X=e=>`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}-${String(e.getDate()).padStart(2,"0")}`,[G,J]=t.useState("upcoming"),[K,Q]=t.useState([]),[Z,ee]=t.useState(null),[te,ne]=t.useState(!1),[oe,ae]=t.useState(null),[ie,re]=t.useState(window.innerWidth<768),[le,de]=t.useState("today"),[se,pe]=t.useState("today"),[ce,ue]=t.useState(!1),[me,fe]=t.useState(!1),[xe,ge]=t.useState("all"),[he,ye]=t.useState("asc"),[Ee,Fe]=t.useState(""),[we,be]=t.useState(!1),[Se,ve]=t.useState(!1),[ke,Ce]=t.useState(!1),[Ie,De]=t.useState(null),[ze,We]=t.useState(null),[Me,Te]=t.useState(!1),[Ae,Re]=t.useState(null),[Ne,Pe]=t.useState((()=>({x:Math.max(20,"undefined"!=typeof window?window.innerWidth-y-20:300),y:80}))),[je,Be]=t.useState({width:y,height:560}),[He,Le]=t.useState(!1),[Ue,$e]=t.useState({x:0,y:0}),[_e,Ye]=t.useState(!1),[Oe,Ve]=t.useState(null),[qe,Xe]=t.useState({x:0,y:0,width:0,height:0});t.useState(!1);const[Ge,Je]=t.useState(1),Ke=K.filter((e=>{if(!Ee.trim())return!0;const t=Ee.toLowerCase(),n=(e.patientName||"").toLowerCase(),o=String(e.patientId||"").toLowerCase();return n.includes(t)||o.includes(t)})),Qe=20*(Ge-1),Ze=Qe+20,et=Ke.slice(Qe,Ze),tt=Math.ceil(Ke.length/20),nt=Ke.length,[ot,at]=t.useState(q()),[it,rt]=t.useState(q()),[lt,dt]=t.useState(),[st,pt]=t.useState(),ct=e=>e?.id||e?._id||e?.appointmentId||e?.patientId||JSON.stringify(e),ut=e=>e?.image?e.image:null,mt=e=>e?e.charAt(0).toUpperCase():"?",ft=e=>{if(!e)return"#4C4DDC";const t=["#4C4DDC","#1CC3CE","#FF6B6B","#4ECDC4","#45B7D1","#FFA07A","#98D8C8","#F7DC6F"];return t[e.charCodeAt(0)%t.length]},xt=()=>{const e="asc"===he?"desc":"asc";ye(e);const t=[...K].sort(((t,n)=>{const o=new Date(t.appointmentDate||t.date||0),a=new Date(n.appointmentDate||n.date||0);return"asc"===e?o-a:a-o}));Q(t),Je(1),t.length>0&&ee(t[0])},gt=t.useCallback((async()=>{if(console.log(W,"fetchAppointments -> appToken"),!W)return void(D&&z&&_((e=>e+1)));console.log(T,"fetchAppointments -> doctorIdFromLogin");const e=T;ne(!0),ae(null);try{const t={apiBaseUrl:b,hospitalId:S,doctorId:e,token:W},n=await s(G,ot,it,t);if(401===n.status||403===n.status){try{"undefined"!=typeof localStorage&&(localStorage.removeItem(m),localStorage.removeItem(f),localStorage.removeItem(x))}catch(e){}return M(null),A(null),N(null),_((e=>e+1)),void ae("Session expired. Re-authenticating...")}if(n.err)return void ae(String(n.err||"Failed to fetch appointments"));const o=n.data||n.appointments||n||[];Q(Array.isArray(o)?o:[]),Array.isArray(o)&&o.length>0?ee(o[0]):ee(null)}catch(e){console.error("Error fetching appointments:",e),ae(e.message||"Failed to fetch appointments")}finally{ne(!1)}}),[G,ot,it,xe,b,S,T,W,D,z]),ht=e=>{ee(e),Re(null)},yt=async()=>{if(Z&&W){Te(!0),Re(null);try{const e={apiBaseUrl:b,hospitalId:S,doctorId:T,doctorName:R||V,appToken:W};console.log(Z,"selectedAppointment"),console.log(e,"callConfig");const t=await p(Z,e);if(console.log(t.status,"response"),401===t.status||403===t.status){try{"undefined"!=typeof localStorage&&(localStorage.removeItem(m),localStorage.removeItem(f),localStorage.removeItem(x))}catch(e){}return M(null),A(null),N(null),_((e=>e+1)),void Re("Session expired. Re-authenticating...")}if(t.err||!t.data?.token)return void Re(String(t.err||"Failed to initiate call"));const o=n.joinCallUrl||d,a=t.data.token?String(o||"").replace(/\/?$/,"/")+t.data.token:"";console.log("joinCallUrl",a),De(t.data.token),We(a||""),be(!0),ve(!1),Ce(!1),Be({width:y,height:560}),Pe({x:Math.max(20,window.innerWidth-y-20),y:80})}catch(e){Re(e.message||"Failed to initiate call")}finally{Te(!1)}}},Et=()=>{be(!1),ve(!1),Ce(!1),De(null),We(null),Re(null),gt()};t.useEffect((()=>{if(!we)return;window.history.pushState({pipActive:!0},"");const e=()=>{be(!1),ve(!1),Ce(!1),De(null),We(null),Re(null),window.history.back()};return window.addEventListener("popstate",e),()=>window.removeEventListener("popstate",e)}),[we]);const Ft=()=>{ke&&Ce(!1),ve(!Se)},wt=()=>{Se&&ve(!1),Ce(!ke)},bt=e=>{if(0!==e.button)return;if(e.target.closest("button"))return;e.currentTarget.setPointerCapture&&e.currentTarget.setPointerCapture(e.pointerId),Le(!0);const t=e.currentTarget.getBoundingClientRect();$e({x:e.clientX-t.left,y:e.clientY-t.top})},St=t.useCallback((e=>{if(!ke)if(He){const t=e.clientX-Ue.x,n=e.clientY-Ue.y,o=window.innerWidth-je.width,a=window.innerHeight-je.height;Pe({x:Math.max(0,Math.min(t,o)),y:Math.max(0,Math.min(n,a))})}else if(_e){const t=e.clientX-qe.x,n=e.clientY-qe.y;let o=qe.width,a=qe.height,i=qe.posX,r=qe.posY;const l=300,d=250,s=window.innerWidth-40,p=window.innerHeight-100;if("bottom-right"===Oe)o=Math.min(Math.max(qe.width+t,l),s),a=Math.min(Math.max(qe.height+n,d),p),i+o>window.innerWidth&&(o=window.innerWidth-i),r+a>window.innerHeight&&(a=window.innerHeight-r);else if("bottom-left"===Oe){o=Math.min(Math.max(qe.width-t,l),s),i=Math.max(0,qe.posX+t),0===i&&(o=qe.posX+qe.width),a=Math.min(Math.max(qe.height+n,d),p),r+a>window.innerHeight&&(a=window.innerHeight-r)}else if("top-right"===Oe){o=Math.min(Math.max(qe.width+t,l),s),i+o>window.innerWidth&&(o=window.innerWidth-i);a=Math.min(Math.max(qe.height-n,d),p),r=Math.max(0,qe.posY+n),0===r&&(a=qe.posY+qe.height)}else if("top-left"===Oe){o=Math.min(Math.max(qe.width-t,l),s),i=Math.max(0,qe.posX+t),0===i&&(o=qe.posX+qe.width);a=Math.min(Math.max(qe.height-n,d),p),r=Math.max(0,qe.posY+n),0===r&&(a=qe.posY+qe.height)}Be({width:o,height:a}),Pe({x:i,y:r})}}),[He,_e,Ue,Oe,qe,Ne,je,ke]),vt=()=>{Le(!1),Ye(!1),Ve(null)},kt=(e,t)=>{t.preventDefault(),t.stopPropagation(),t.currentTarget.setPointerCapture&&t.currentTarget.setPointerCapture(t.pointerId),Ye(!0),Ve(e),Xe({x:t.clientX,y:t.clientY,width:je.width,height:je.height,posX:Ne.x,posY:Ne.y})};t.useEffect((()=>{if(!we||ke)return;const e=()=>{if(!(window.innerWidth<768)){const e=Se?350:je.width,t=Se?60:je.height,n=window.innerWidth-40,o=window.innerHeight-100,a=Math.min(e,n),i=Math.min(t,o);a===je.width&&i===je.height||Be({width:a,height:i});const r=window.innerWidth-a-20,l=window.innerHeight-i-20;Pe((e=>({x:Math.min(e.x,r),y:Math.min(e.y,l)})))}};return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)}),[we,Se,ke,je]),t.useEffect((()=>{if(!(D&&z&&(!W||$>0)))return;let e=!1;return j(!0),H(null),(async(e,t,n,o)=>{const a=`${e.replace(/\/$/,"")}/um/user/V1/sso/login?hospitalId=${encodeURIComponent(t)}`,i={method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({idToken:n,email:o})};return console.log("[getTokenFromSso] request",{url:a,body:{idToken:n?n.slice(0,50)+"...":null,email:o}}),fetch(a,i).then((e=>(console.log("[getTokenFromSso] response status",e.status,e.statusText),e.ok?e.json().then((e=>(console.log("[getTokenFromSso] success",{hasData:!!e,dataKeys:e?Object.keys(e):[],hasAccessToken:!!e?.data?.access_token}),e))):e.json().then((t=>{const n=t?.resultInfo?.message||"SSO login failed";return console.log("[getTokenFromSso] error body",t),{err:n,status:e.status}})).catch((()=>({err:"Something went wrong!",status:e.status})))))).catch((e=>(console.error("[getTokenFromSso] catch",e),{err:e.message||"Network error"})))})(b,S,D,z).then((t=>{if(e)return;const n=function(e){return!e||e.err?null:e.data?.access_token??e.data?.token??e.token??e.accessToken??null}(t);if(400===t.status)return H(t.err||"Invalid request. Redirecting to home..."),j(!1),void U(!0);if(t.err||!n){H(String(t.err||"Failed to get token")),M(null),A(null),N(null);try{"undefined"!=typeof localStorage&&(localStorage.removeItem(m),localStorage.removeItem(f),localStorage.removeItem(x))}catch(e){}}else{const e=function(e){if(!e?.data)return null;const t=e.data.doctor_id??e.data.doctorId??null;return console.log(t,"extractDoctorIdFromLoginResponse -> id"),null!=t?String(t):null}(t);console.log(e,"extractDoctorIdFromLoginResponse -> doctorId");const o=function(e){if(!e?.data)return null;const t=e.data.name??e.data.doctor_name??e.data.userName??null;return null!=t?String(t):null}(t);M(n),A(e),N(o),H(null),U(!1);try{"undefined"!=typeof localStorage&&(localStorage.setItem(m,n),e&&localStorage.setItem(f,e),o&&localStorage.setItem(x,o))}catch(e){}}})).catch((t=>{e||(H(t?.message||"Authentication failed. Please try again."),M(null))})).finally((()=>{e||j(!1)})),()=>{e=!0}}),[b,S,D,z,$,W]),t.useEffect((()=>{Je(1),Re(null)}),[G,le,ot,it,Ee,xe]),t.useEffect((()=>{!P&&W&&gt()}),[gt,W,P]),t.useEffect((()=>{const e=document.createElement("link");e.href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap",e.rel="stylesheet",document.head.appendChild(e);const t=document.createElement("style");t.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    ",document.head.appendChild(t);const n=()=>{re(window.innerWidth<768)};return window.addEventListener("resize",n),()=>{document.head.removeChild(e),document.head.removeChild(t),window.removeEventListener("resize",n)}}),[]),t.useEffect((()=>{const e=e=>{!ce||e.target.closest("button")||e.target.closest('input[type="date"]')||ue(!1),me&&!e.target.closest("[data-appointment-type-picker]")&&fe(!1)};return document.addEventListener("click",e),()=>{document.removeEventListener("click",e)}}),[ce,me]);let Ct='"Nunito", serif';const It=B||!W&&(!D||!z),Dt=B||"Sign in required. Redirecting to home...";let zt;return zt=P&&D&&z?a.default.createElement("div",{className:E,[F]:"teleconsult-appointments",style:{fontFamily:Ct,background:"#F5F5F7",boxSizing:"border-box",height:"100%",minHeight:"100vh",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",padding:"24px"}},a.default.createElement("style",null,"@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }"),a.default.createElement("div",{style:{width:"40px",height:"40px",border:"3px solid #f3f3f3",borderTop:"3px solid #4C4DDC",borderRadius:"50%",animation:"spin 1s linear infinite",marginBottom:"16px"}}),a.default.createElement("p",{style:{fontSize:"14px",color:"#666",margin:0}},"Checking authorisation...")):a.default.createElement(a.default.Fragment,null,a.default.createElement("div",{className:E,[F]:"teleconsult-appointments",style:{fontFamily:Ct,background:"#F5F5F7",boxSizing:"border-box",height:"100%",minHeight:"100vh",width:"100%",display:"flex",flexDirection:"column",overflow:"hidden"}},a.default.createElement("div",{style:{background:"#FFFFFF",padding:ie?"10px 12px":"12px 24px",display:"flex",justifyContent:"space-between",alignItems:"center",borderBottom:"1px solid #E5E5E5",flexWrap:"nowrap",gap:ie?"8px":"0"}},a.default.createElement("div",{style:{position:"relative",width:ie?"calc(100% - 90px)":"480px",maxWidth:ie?"none":"480px"}},a.default.createElement("input",{type:"text",placeholder:"Search by patient name or ID",value:Ee,onChange:e=>Fe(e.target.value),style:{width:"100%",padding:ie?"8px 32px 8px 10px":"8px 36px 8px 14px",border:"1px solid #E5E5E5",borderRadius:"6px",fontSize:ie?"12px":"13px",fontFamily:Ct,background:"#FFFFFF",outline:"none",boxSizing:"border-box"}}),Ee&&a.default.createElement("button",{onClick:()=>Fe(""),style:{position:"absolute",right:"8px",top:"50%",transform:"translateY(-50%)",background:"none",border:"none",cursor:"pointer",padding:"4px",display:"flex",alignItems:"center",justifyContent:"center",color:"#999",fontSize:"16px"},title:"Clear search"},"✕")),!1),a.default.createElement("div",{style:{padding:ie?"12px":"16px 24px",flex:1,minHeight:0,overflow:"hidden",display:"flex",flexDirection:"column"}},a.default.createElement("div",{style:{marginBottom:ie?"10px":"14px"}},a.default.createElement("h1",{style:{fontSize:ie?"18px":"22px",fontWeight:700,color:"#1a1a1a",margin:"0 0 2px 0"}},"Tele Consultation"),a.default.createElement("p",{style:{fontSize:ie?"11px":"12px",color:"#999",margin:0}},"Displaying All Tele Consultation Appointments")),a.default.createElement("div",{style:{display:"flex",justifyContent:"space-between",alignItems:ie?"flex-start":"center",marginBottom:ie?"10px":"14px",flexDirection:ie?"column":"row",gap:ie?"12px":"0"}},a.default.createElement("div",{style:{display:"flex",gap:"6px",flexWrap:"wrap",width:ie?"100%":"auto"}},a.default.createElement("button",{onClick:()=>J("upcoming"),style:{background:"upcoming"===G?"#4C4DDC":"#FFFFFF",padding:ie?"8px 10px":"9px 16px",border:"upcoming"===G?"none":"1px solid #E5E5E5",borderRadius:"6px",fontSize:ie?"10px":"13px",color:"upcoming"===G?"white":"#555555",fontWeight:600,fontFamily:Ct,cursor:"pointer",flex:ie?"1 1 auto":"none",minWidth:ie?"0":"auto",transition:"all 0.3s ease",whiteSpace:"nowrap"}},"Upcoming Appointments"),a.default.createElement("button",{onClick:()=>J("completed"),style:{background:"completed"===G?"#4C4DDC":"#FFFFFF",padding:ie?"8px 10px":"9px 16px",border:"completed"===G?"none":"1px solid #E5E5E5",borderRadius:"6px",fontSize:ie?"10px":"13px",color:"completed"===G?"white":"#555555",fontWeight:600,fontFamily:Ct,cursor:"pointer",flex:ie?"1 1 auto":"none",minWidth:ie?"0":"auto",transition:"all 0.3s ease",whiteSpace:"nowrap"}},"Completed Appointments"),a.default.createElement("button",{onClick:()=>J("cancelled"),style:{background:"cancelled"===G?"#4C4DDC":"#FFFFFF",padding:ie?"8px 10px":"9px 16px",border:"cancelled"===G?"none":"1px solid #E5E5E5",borderRadius:"6px",fontSize:ie?"10px":"13px",color:"cancelled"===G?"white":"#555555",fontWeight:600,fontFamily:Ct,cursor:"pointer",flex:ie?"1 1 auto":"none",minWidth:ie?"0":"auto",transition:"all 0.3s ease",whiteSpace:"nowrap"}},"Cancelled Appointments")),a.default.createElement("div",{style:{display:"flex",gap:"8px",alignItems:"center",width:"auto",position:"relative",justifyContent:ie?"flex-start":"flex-end",flexWrap:"wrap"}},a.default.createElement("button",{onClick:()=>{ce||(dt(ot),pt(it),pe(le)),ue(!ce)},style:{padding:"8px 12px",fontFamily:Ct,fontWeight:600,border:"1px solid #E5E5E5",borderRadius:"6px",fontSize:ie?"11px":"13px",color:"#1a1a1a",background:"#FFFFFF",display:"flex",alignItems:"center",gap:ie?"4px":"6px",cursor:"pointer",flex:"none",minWidth:ie?"100px":"auto",justifyContent:"center"}},a.default.createElement("svg",{width:ie?"12":"14",height:ie?"12":"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},a.default.createElement("rect",{x:"3",y:"4",width:"18",height:"18",rx:"2",ry:"2"}),a.default.createElement("line",{x1:"16",y1:"2",x2:"16",y2:"6"}),a.default.createElement("line",{x1:"8",y1:"2",x2:"8",y2:"6"}),a.default.createElement("line",{x1:"3",y1:"10",x2:"21",y2:"10"})),a.default.createElement("span",{style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}},(()=>{switch(le){case"today":default:return"Today";case"tomorrow":return"Tomorrow";case"currentWeek":return"Current Week";case"thisMonth":return"This Month";case"currentYear":return"Current Year";case"custom":return ie?"Custom":`${ot} to ${it}`}})()),a.default.createElement("svg",{width:ie?"8":"10",height:ie?"8":"10",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},a.default.createElement("polyline",{points:"6 9 12 15 18 9"}))),ce&&a.default.createElement("div",{style:{position:"absolute",top:"100%",right:ie?"auto":0,left:ie?0:"auto",marginTop:"4px",background:"#FFFFFF",border:"1px solid #E5E5E5",borderRadius:"8px",boxShadow:"0 4px 16px rgba(0,0,0,0.15)",padding:"8px",zIndex:1e3,minWidth:ie?"280px":"240px",width:ie?"calc(100vw - 24px)":"auto",maxWidth:ie?"calc(100vw - 24px)":"280px"}},a.default.createElement("div",{style:{marginBottom:"custom"===se?"12px":"0"}},["thisMonth","today","tomorrow","currentWeek","currentYear","custom"].map((e=>a.default.createElement("button",{key:e,onClick:()=>{if(pe(e),"custom"!==e){const t=(e=>{const t=new Date;let n,o;switch(e){case"today":default:n=o=q();break;case"tomorrow":const e=new Date(t);e.setDate(e.getDate()+1),n=o=X(e);break;case"currentWeek":const a=new Date(t),i=new Date(t),r=t.getDay(),l=0===r?-6:1-r;a.setDate(t.getDate()+l),i.setDate(a.getDate()+6),n=X(a),o=X(i);break;case"thisMonth":const d=new Date(t.getFullYear(),t.getMonth(),1),s=new Date(t.getFullYear(),t.getMonth()+1,0);n=X(d),o=X(s);break;case"currentYear":n=`${t.getFullYear()}-01-01`,o=`${t.getFullYear()}-12-31`}return{from:n,to:o}})(e);de(e),at(t.from),rt(t.to),dt(t.from),pt(t.to),ue(!1)}else dt(""),pt("")},style:{width:"100%",padding:"10px 12px",background:se===e?"#E8EEF4":"#FFFFFF",border:"none",borderRadius:"4px",fontSize:"13px",fontFamily:Ct,cursor:"pointer",textAlign:"left",fontWeight:se===e?600:400,color:se===e?"#4C4DDC":"#1a1a1a",marginBottom:"4px",display:"flex",justifyContent:"space-between",alignItems:"center",transition:"all 0.2s ease"},onMouseEnter:t=>{se!==e&&(t.target.style.background="#F5F5F5")},onMouseLeave:t=>{se!==e&&(t.target.style.background="#FFFFFF")}},a.default.createElement("span",null,{thisMonth:"This Month",today:"Today",tomorrow:"Tomorrow",currentWeek:"Current Week",currentYear:"Current Year",custom:"Custom"}[e]),se===e&&a.default.createElement("span",{style:{color:"#4C4DDC",fontSize:"16px"}},"✓"))))),"custom"===se&&a.default.createElement("div",{style:{paddingTop:"8px",borderTop:"1px solid #E5E5E5"}},a.default.createElement("div",{style:{marginBottom:"8px"}},a.default.createElement("input",{type:"date",value:lt,onChange:e=>dt(e.target.value),placeholder:"Start Date",style:{width:"100%",padding:"10px 8px",border:"1px solid #E5E5E5",borderRadius:"4px",fontSize:"13px",fontFamily:Ct,boxSizing:"border-box",cursor:"pointer"}})),a.default.createElement("div",{style:{marginBottom:"12px"}},a.default.createElement("input",{type:"date",value:st,onChange:e=>pt(e.target.value),placeholder:"End Date",style:{width:"100%",padding:"10px 8px",border:"1px solid #E5E5E5",borderRadius:"4px",fontSize:"13px",fontFamily:Ct,boxSizing:"border-box",cursor:"pointer"}})),a.default.createElement("div",{style:{display:"flex",gap:"8px"}},a.default.createElement("button",{onClick:()=>{pe(le),dt(ot),pt(it),ue(!1)},style:{flex:1,padding:"10px 12px",background:"#FFFFFF",color:"#4C4DDC",border:"1px solid #4C4DDC",borderRadius:"4px",fontSize:"13px",fontFamily:Ct,fontWeight:600,cursor:"pointer"}},"Cancel"),a.default.createElement("button",{onClick:()=>{lt&&st&&(de("custom"),at(lt),rt(st),ue(!1))},style:{flex:1,padding:"10px 12px",background:"#4C4DDC",color:"#FFFFFF",border:"none",borderRadius:"4px",fontSize:"13px",fontFamily:Ct,fontWeight:600,cursor:"pointer"}},"Submit")))))),a.default.createElement("div",{style:{display:"flex",flexDirection:ie?"column":"row",gap:ie?"12px":"14px",flex:1,minHeight:0,overflow:ie?"auto":"hidden"}},a.default.createElement("div",{style:{flex:ie?"none":"1 1 65%",width:ie?"100%":"auto",display:"flex",flexDirection:"column",minHeight:ie?"400px":0}},a.default.createElement("div",{style:{background:"#FFFFFF",borderRadius:"8px",boxShadow:"0 1px 4px rgba(0,0,0,0.08)",overflow:"hidden",display:"flex",flexDirection:"column",flex:ie?"none":1,minHeight:ie?"auto":0}},a.default.createElement("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",padding:ie?"12px 14px":"14px 18px",borderBottom:"1px solid #F1F1F1"}},a.default.createElement("div",{style:{display:"flex",alignItems:"center",gap:ie?"6px":"8px"}},a.default.createElement("span",{style:{fontSize:ie?"14px":"15px",fontWeight:700,color:"#1a1a1a"}},"Appointments"),a.default.createElement("span",{style:{background:"#4C4DDC",color:"#fff",fontSize:ie?"10px":"11px",fontWeight:600,padding:ie?"2px 7px":"3px 8px",borderRadius:"12px"}},nt))),a.default.createElement("div",{className:"appointments-header-grid",style:{display:"grid",gridTemplateColumns:ie?"1.5fr 1fr 0.8fr":"2.5fr 1fr 1.5fr 0.8fr 1.2fr",gap:ie?"8px":"12px",padding:ie?"8px 12px":"10px 18px",background:"#F5F5F5",fontSize:ie?"10px":"12px",fontWeight:600,color:"#666"}},a.default.createElement("div",null,"Patients name"),!ie&&a.default.createElement("div",null,"Patient ID"),a.default.createElement("div",{onClick:xt,style:{display:"flex",alignItems:"center",gap:"3px",cursor:"pointer",userSelect:"none"}},"Date",a.default.createElement("span",{style:{opacity:.7,fontSize:"10px"}},"asc"===he?"▲":"▼")),!ie&&a.default.createElement("div",null,"Slot"),!ie&&a.default.createElement("div",null,"Doctor")),a.default.createElement("div",{style:{overflow:"auto",flex:1}},P?a.default.createElement("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",padding:"40px",color:"#888"}},a.default.createElement("div",{style:{textAlign:"center"}},a.default.createElement("div",{style:{width:"40px",height:"40px",border:"3px solid #f3f3f3",borderTop:"3px solid #4C4DDC",borderRadius:"50%",animation:"spin 1s linear infinite",margin:"0 auto 10px"}}),"Getting token...")):te?a.default.createElement("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",padding:"40px",color:"#888"}},a.default.createElement("div",{style:{textAlign:"center"}},a.default.createElement("div",{style:{width:"40px",height:"40px",border:"3px solid #f3f3f3",borderTop:"3px solid #4C4DDC",borderRadius:"50%",animation:"spin 1s linear infinite",margin:"0 auto 10px"}}),"Loading appointments...")):oe?a.default.createElement("div",{style:{padding:"40px",textAlign:"center",color:"#FF0000"}},a.default.createElement("div",{style:{fontSize:"16px",marginBottom:"8px"}},"⚠️ Error"),a.default.createElement("div",{style:{fontSize:"13px"}},oe),a.default.createElement("button",{onClick:gt,style:{marginTop:"16px",padding:"8px 16px",background:"#4C4DDC",color:"white",border:"none",borderRadius:"6px",cursor:"pointer",fontFamily:Ct}},"Retry")):0===et.length?a.default.createElement("div",{style:{padding:"40px",textAlign:"center",color:"#888"}},a.default.createElement("div",{style:{fontSize:"16px",marginBottom:"8px"}},"📋"),a.default.createElement("div",{style:{fontSize:"13px"}},Ee?`No appointments found for "${Ee}"`:"No appointments found"),Ee&&a.default.createElement("button",{onClick:()=>Fe(""),style:{marginTop:"12px",padding:"6px 12px",background:"#4C4DDC",color:"white",border:"none",borderRadius:"4px",cursor:"pointer",fontSize:"12px",fontFamily:Ct}},"Clear Search")):et.map((e=>a.default.createElement("div",{key:ct(e),role:"button",tabIndex:0,onClick:()=>ht(e),onKeyDown:t=>"Enter"===t.key&&ht(e),className:"appointments-grid",style:{display:"grid",gridTemplateColumns:ie?"1.5fr 1fr 0.8fr":"2.5fr 1fr 1.5fr 0.8fr 1.2fr",gap:ie?"8px":"12px",padding:ie?"10px 12px":"12px 18px",background:ct(Z)===ct(e)?"#E8EEF4":"#FFFFFF",borderTop:"1px solid #F1F1F1",alignItems:"center",cursor:"pointer",fontSize:ie?"11px":"13px"}},a.default.createElement("div",{style:{display:"flex",alignItems:"center",gap:ie?"8px":"10px"}},ut(e)?a.default.createElement("img",{src:e.image,alt:"",style:{width:ie?"32px":"36px",height:ie?"32px":"36px",borderRadius:"50%",objectFit:"cover"}}):a.default.createElement("div",{style:{width:ie?"32px":"36px",height:ie?"32px":"36px",borderRadius:"50%",background:ft(e.patientName),display:"flex",alignItems:"center",justifyContent:"center",color:"#FFFFFF",fontWeight:600,fontSize:ie?"14px":"16px"}},mt(e.patientName)),a.default.createElement("div",null,a.default.createElement("div",{style:{fontWeight:600,color:"#1a1a1a",fontSize:ie?"11px":"13px"}},e.patientName),a.default.createElement("div",{style:{fontSize:ie?"9px":"11px",color:"#888"}},e.email))),!ie&&a.default.createElement("div",{style:{color:"#555",fontSize:"12px"}},e.patientId),a.default.createElement("div",{style:{color:"#555",fontSize:ie?"10px":"12px"}},(()=>{const t=e.appointmentDate||"",n=t.match(/\s(\d{1,2}:\d{2}(?:\s*(?:AM|PM))?)$/i);return n?a.default.createElement(a.default.Fragment,null,a.default.createElement("div",null,t.slice(0,n.index).trim()),a.default.createElement("div",{style:{fontSize:ie?"9px":"11px",color:"#888"}},n[1].trim())):a.default.createElement("div",null,t)})()),!ie&&a.default.createElement("div",{style:{color:"#555",fontSize:"12px"}},e.appointmentTime||"-"),!ie&&a.default.createElement("div",{style:{color:"#555",fontSize:"12px"}},e.doctorName||e.doctor||"-"))))),!te&&!oe&&et.length>0&&a.default.createElement("div",{style:{padding:ie?"12px 14px":"14px 18px",borderTop:"1px solid #F1F1F1",display:"flex",justifyContent:"space-between",alignItems:"center",background:"#FFFFFF",flexWrap:ie?"wrap":"nowrap",gap:ie?"10px":"0"}},a.default.createElement("div",{style:{fontSize:ie?"11px":"12px",color:"#666"}},"Showing page ",Ge," of ",tt," (",nt," total)"),a.default.createElement("div",{style:{display:"flex",gap:"6px",alignItems:"center"}},a.default.createElement("button",{onClick:()=>Je((e=>Math.max(1,e-1))),disabled:1===Ge,style:{padding:ie?"6px 10px":"6px 12px",border:"1px solid #E5E5E5",borderRadius:"4px",background:1===Ge?"#F5F5F5":"#FFFFFF",color:1===Ge?"#999":"#1a1a1a",fontSize:ie?"11px":"12px",fontFamily:Ct,fontWeight:600,cursor:1===Ge?"not-allowed":"pointer",opacity:1===Ge?.5:1}},"Previous"),a.default.createElement("div",{style:{display:"flex",gap:"4px"}},[...Array(Math.min(5,tt))].map(((e,t)=>{let n;return n=tt<=5||Ge<=3?t+1:Ge>=tt-2?tt-4+t:Ge-2+t,a.default.createElement("button",{key:n,onClick:()=>Je(n),style:{padding:ie?"6px 10px":"6px 12px",border:Ge===n?"none":"1px solid #E5E5E5",borderRadius:"4px",background:Ge===n?"#4C4DDC":"#FFFFFF",color:Ge===n?"#FFFFFF":"#1a1a1a",fontSize:ie?"11px":"12px",fontFamily:Ct,fontWeight:600,cursor:"pointer",minWidth:ie?"32px":"36px"}},n)}))),a.default.createElement("button",{onClick:()=>Je((e=>Math.min(tt,e+1))),disabled:Ge===tt,style:{padding:ie?"6px 10px":"6px 12px",border:"1px solid #E5E5E5",borderRadius:"4px",background:Ge===tt?"#F5F5F5":"#FFFFFF",color:Ge===tt?"#999":"#1a1a1a",fontSize:ie?"11px":"12px",fontFamily:Ct,fontWeight:600,cursor:Ge===tt?"not-allowed":"pointer",opacity:Ge===tt?.5:1}},"Next"))))),a.default.createElement("div",{style:{flex:ie?"none":"1 1 35%",width:ie?"100%":"auto",display:Z||!ie?"flex":"none",flexDirection:"column",minHeight:ie?"auto":0}},a.default.createElement("div",{style:{border:"1px solid #E5E5E5",borderRadius:"8px",overflow:"hidden",background:"#FFFFFF",boxShadow:"0 1px 4px rgba(0,0,0,0.08)",display:"flex",flexDirection:"column",flex:ie?"none":1,minHeight:ie?"auto":0}},Z?a.default.createElement(a.default.Fragment,null,a.default.createElement("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",padding:ie?"12px 14px":"16px 18px",background:"#E8EEF4",borderBottom:"1px solid #E5E5E5"}},a.default.createElement("div",null,a.default.createElement("div",{style:{color:"#002668",fontSize:ie?"14px":"16px",fontWeight:"700"}},Z.patientName||"N/A"),a.default.createElement("div",{style:{color:"#002668",fontSize:ie?"11px":"13px"}},Z.patientId||Z.mrn||"N/A")),a.default.createElement("div",null,ut(Z)?a.default.createElement("img",{style:{width:ie?"36px":"44px",height:ie?"36px":"44px",borderRadius:"50%",objectFit:"cover"},src:Z.image,alt:Z.patientName}):a.default.createElement("div",{style:{width:ie?"36px":"44px",height:ie?"36px":"44px",borderRadius:"50%",background:ft(Z.patientName),display:"flex",alignItems:"center",justifyContent:"center",color:"#FFFFFF",fontWeight:700,fontSize:ie?"16px":"20px"}},mt(Z.patientName)))),a.default.createElement("div",{style:{padding:ie?"12px 14px":"14px 18px",gap:ie?"10px":"12px",display:"flex",flexDirection:"column",background:"white",overflow:"auto",flex:1,position:"relative"}},a.default.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},a.default.createElement("div",{style:{textAlign:"left"}},a.default.createElement("div",{style:{fontSize:ie?"10px":"11px",color:"#888",marginBottom:"3px"}},"Speciality"),a.default.createElement("div",{style:{fontWeight:"700",fontSize:ie?"12px":"13px"}},Z?.specialisation||Z?.speciality||"N/A")),a.default.createElement("div",{style:{textAlign:"right"}},a.default.createElement("div",{style:{fontSize:ie?"10px":"11px",color:"#888",marginBottom:"3px"}},"Appointment Type"),a.default.createElement("div",{style:{fontWeight:"700",fontSize:ie?"12px":"13px"}},Z?.type||Z?.appointmentType||"Online"))),a.default.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},a.default.createElement("div",{style:{textAlign:"left"}},a.default.createElement("div",{style:{fontSize:ie?"10px":"11px",color:"#888",marginBottom:"3px"}},"Appointment Date"),a.default.createElement("div",{style:{fontWeight:"700",fontSize:ie?"12px":"13px"}},Z?.date||Z?.appointmentDate||"N/A")),a.default.createElement("div",{style:{textAlign:"right"}},a.default.createElement("div",{style:{fontSize:ie?"10px":"11px",color:"#888",marginBottom:"3px"}},"Appointment Time"),a.default.createElement("div",{style:{fontWeight:"700",fontSize:ie?"12px":"13px"}},Z?.time||Z?.appointmentTime||"N/A"))),a.default.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},a.default.createElement("div",{style:{textAlign:"left"}},a.default.createElement("div",{style:{fontSize:ie?"10px":"11px",color:"#888",marginBottom:"3px"}},"Doctor"),a.default.createElement("div",{style:{fontWeight:"700",fontSize:ie?"12px":"13px"}},Z?.doctor||Z?.doctorName||"N/A"))),a.default.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},a.default.createElement("div",{style:{textAlign:"left"}},a.default.createElement("div",{style:{fontSize:ie?"10px":"11px",color:"#888",marginBottom:"3px"}},"Hospital"),a.default.createElement("div",{style:{fontWeight:"700",fontSize:ie?"12px":"13px"}},Z?.hospital||Z?.hospitalName||"N/A"))),a.default.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},a.default.createElement("div",{style:{textAlign:"left"}},a.default.createElement("div",{style:{fontSize:ie?"10px":"11px",color:"#888",marginBottom:"3px"}},"Reason for Appointment"),a.default.createElement("div",{style:{fontWeight:"600",fontSize:ie?"11px":"12px",lineHeight:"1.4"}},Z?.reason||Z?.reasonForAppointment||"No reason provided"))),"upcoming"===G&&a.default.createElement("div",{style:{display:"flex",flexDirection:ie?"column":"row",gap:"6px",marginTop:"10px"}},a.default.createElement("button",{type:"button",onClick:yt,disabled:Me,style:{flex:1,background:Me?"#99e4e8":"#1CC3CE",color:"#FFFFFF",border:"1px solid #1CC3CE",borderRadius:"6px",padding:ie?"10px 8px":"8px 6px",fontFamily:Ct,fontWeight:600,fontSize:ie?"11px":"12px",cursor:Me?"not-allowed":"pointer"}},Me?"Connecting...":"Join Call >")),"upcoming"===G&&Ae&&a.default.createElement("div",{style:{fontSize:"11px",color:"#e53935",marginTop:"6px",textAlign:"center",width:"100%"}},"⚠️ ",Ae))):a.default.createElement("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100%",padding:"40px",color:"#888",textAlign:"center"}},a.default.createElement("div",null,a.default.createElement("div",{style:{fontSize:"16px",marginBottom:"8px"}},"📋"),a.default.createElement("div",{style:{fontSize:"13px"}},"Select an appointment to view details"))))))),we&&a.default.createElement("div",{style:{position:"fixed",left:ke?"0":ie?"10px":`${Ne.x}px`,top:ke?"0":ie?"70px":`${Ne.y}px`,right:ke?"0":ie?"10px":"auto",bottom:ke?"0":"auto",width:ke?"100vw":ie?"calc(100vw - 20px)":Se?"350px":`${je.width}px`,height:ke?"100vh":Se?"auto":ie?"300px":`${je.height}px`,background:"#FFFFFF",borderRadius:ke?"0":"8px",boxShadow:"0 8px 24px rgba(0, 0, 0, 0.3)",zIndex:1e5,overflow:"hidden",display:"flex",flexDirection:"column",transition:He||_e?"none":"all 0.3s ease"}},a.default.createElement("div",{onPointerDown:ie||ke?void 0:bt,onPointerMove:ie||ke?void 0:St,onPointerUp:ie||ke?void 0:vt,onPointerCancel:ie||ke?void 0:vt,style:{background:"linear-gradient(135deg, #4C4DDC 0%, #3A3BBD 100%)",color:"#FFFFFF",padding:ie?"8px 10px":"10px 12px",display:"flex",justifyContent:"space-between",alignItems:"center",cursor:ie||ke?"default":"move",userSelect:"none"}},a.default.createElement("div",{style:{display:"flex",alignItems:"center",gap:ie?"6px":"8px",flex:1,minWidth:0}},a.default.createElement("div",{style:{width:ie?"6px":"8px",height:ie?"6px":"8px",borderRadius:"50%",background:"#FF4444",animation:"pulse 2s infinite",flexShrink:0}}),a.default.createElement("span",{style:{fontSize:ie?"11px":"13px",fontWeight:600,fontFamily:Ct,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}},"Video Call - ",Z?.patientName||"Patient")),a.default.createElement("div",{style:{display:"flex",gap:ie?"4px":"6px",alignItems:"center",flexShrink:0}},a.default.createElement("button",{onClick:Ft,style:{background:"rgba(255, 255, 255, 0.2)",border:"1px solid rgba(255, 255, 255, 0.3)",borderRadius:"6px",color:"#FFFFFF",cursor:"pointer",padding:ie?"5px 8px":"6px 10px",lineHeight:1,display:"flex",alignItems:"center",justifyContent:"center",minWidth:ie?"28px":"32px",height:ie?"28px":"32px",transition:"background 0.2s ease"},onMouseEnter:e=>e.target.style.background="rgba(255, 255, 255, 0.3)",onMouseLeave:e=>e.target.style.background="rgba(255, 255, 255, 0.2)",title:Se?"Restore":"Minimize"},Se?a.default.createElement("svg",{width:ie?"14":"16",height:ie?"14":"16",viewBox:"0 0 16 16",fill:"none"},a.default.createElement("rect",{x:"3",y:"3",width:"10",height:"10",stroke:"white",strokeWidth:"1.8",fill:"none"})):a.default.createElement("svg",{width:ie?"14":"16",height:ie?"14":"16",viewBox:"0 0 16 16",fill:"none"},a.default.createElement("line",{x1:"3",y1:"8",x2:"13",y2:"8",stroke:"white",strokeWidth:"1.8",strokeLinecap:"round"}))),a.default.createElement("button",{onClick:wt,style:{background:"rgba(255, 255, 255, 0.2)",border:"1px solid rgba(255, 255, 255, 0.3)",borderRadius:"6px",color:"#FFFFFF",cursor:"pointer",padding:ie?"5px 8px":"6px 10px",lineHeight:1,display:"flex",alignItems:"center",justifyContent:"center",minWidth:ie?"28px":"32px",height:ie?"28px":"32px",transition:"background 0.2s ease"},onMouseEnter:e=>e.target.style.background="rgba(255, 255, 255, 0.3)",onMouseLeave:e=>e.target.style.background="rgba(255, 255, 255, 0.2)",title:ke?"Exit Fullscreen":"Fullscreen"},ke?a.default.createElement("svg",{width:ie?"14":"16",height:ie?"14":"16",viewBox:"0 0 16 16",fill:"none"},a.default.createElement("path",{d:"M10 3H13V6M6 13H3V10M13 10V13H10M3 6V3H6",stroke:"white",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round"})):a.default.createElement("svg",{width:ie?"14":"16",height:ie?"14":"16",viewBox:"0 0 16 16",fill:"none"},a.default.createElement("path",{d:"M3 6V3H6M13 10V13H10M10 3H13V6M6 13H3V10",stroke:"white",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round"}))),a.default.createElement("button",{onClick:Et,style:{background:"rgba(255, 255, 255, 0.2)",border:"1px solid rgba(255, 255, 255, 0.3)",borderRadius:"6px",color:"#FFFFFF",cursor:"pointer",padding:ie?"5px 8px":"6px 10px",lineHeight:1,display:"flex",alignItems:"center",justifyContent:"center",minWidth:ie?"28px":"32px",height:ie?"28px":"32px",fontWeight:"bold",fontSize:ie?"18px":"22px",transition:"background 0.2s ease"},onMouseEnter:e=>e.target.style.background="rgba(255, 255, 255, 0.3)",onMouseLeave:e=>e.target.style.background="rgba(255, 255, 255, 0.2)",title:"Close"},"×"))),a.default.createElement("div",{style:{flex:1,background:"#000000",position:"relative",display:Se?"none":"flex",flexDirection:"column"}},a.default.createElement("iframe",{src:(()=>{if(!Ie)return"";return`${String(Y||"").replace(/\/?$/,"/")}${Ie}`})(),style:{width:"100%",height:"100%",border:"none",flex:1},allow:"camera; microphone; display-capture; autoplay",allowFullScreen:!0,title:"Video Call"})),!ie&&!ke&&!Se&&a.default.createElement(a.default.Fragment,null,a.default.createElement("div",{onPointerDown:e=>kt("top-left",e),onPointerMove:St,onPointerUp:vt,onPointerCancel:vt,style:{position:"absolute",left:0,top:0,width:"16px",height:"16px",cursor:"nwse-resize",background:"transparent",zIndex:10001}}),a.default.createElement("div",{onPointerDown:e=>kt("top-right",e),onPointerMove:St,onPointerUp:vt,onPointerCancel:vt,style:{position:"absolute",right:0,top:0,width:"16px",height:"16px",cursor:"nesw-resize",background:"transparent",zIndex:10001}}),a.default.createElement("div",{onPointerDown:e=>kt("bottom-left",e),onPointerMove:St,onPointerUp:vt,onPointerCancel:vt,style:{position:"absolute",left:0,bottom:0,width:"16px",height:"16px",cursor:"nesw-resize",background:"transparent",zIndex:10001}}),a.default.createElement("div",{onPointerDown:e=>kt("bottom-right",e),onPointerMove:St,onPointerUp:vt,onPointerCancel:vt,style:{position:"absolute",right:0,bottom:0,width:"16px",height:"16px",cursor:"nwse-resize",background:"transparent",zIndex:10001}})),a.default.createElement("style",null,"\n            @keyframes pulse {\n              0%, 100% { opacity: 1; }\n              50% { opacity: 0.5; }\n            }\n          "))),It&&a.default.createElement("div",{style:{position:"fixed",inset:0,zIndex:1e5,display:"flex",alignItems:"center",justifyContent:"center",padding:"24px",background:"rgba(0,0,0,0.4)",boxSizing:"border-box"}},a.default.createElement("div",{style:{fontFamily:Ct,maxWidth:"400px",width:"100%",padding:"32px 24px",background:"#FFFFFF",borderRadius:"12px",boxShadow:"0 8px 32px rgba(0,0,0,0.2)",textAlign:"center"}},a.default.createElement("div",{style:{fontSize:"48px",marginBottom:"16px"}},"🔒"),a.default.createElement("h2",{style:{fontSize:"20px",fontWeight:700,color:"#1a1a1a",margin:"0 0 8px 0"}},B?"Not authorised":"Sign in required"),a.default.createElement("p",{style:{fontSize:"14px",color:"#666",margin:0,lineHeight:1.5}},Dt),a.default.createElement("p",{style:{fontSize:"13px",color:"#999",marginTop:"16px",marginBottom:0}},"Redirecting to login...")))),a.default.createElement(w,null,zt)};let S=null;const v={showWidget:(e,t)=>{S||(S=document.createElement("div"),document.body.appendChild(S));const n=()=>a.default.createElement(a.default.Fragment,null,a.default.createElement(b,{config:e}));i.default.render(a.default.createElement(n,null),S)},closePopup:()=>{S&&(i.default.unmountComponentAtNode(S),S=null)}};window.BookingSDK=v,e.AppointmentPage=b,e.PIH_APPOINTMENT_WIDGET_CLASS=E,e.default=v,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","react","react-dom"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).MyPackage={},e.React,e.ReactDOM)}(this,(function(e,t,n){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(t),i=o(n);const r="/appointment/V1/consultant/all-appointments",l="/notification/V1/consultation/online/initiate",d="https://wbafedevittisalwe01-had2b3e0a7h6fyey.westeurope-01.azurewebsites.net/call/",s=async function(e,t,n){let o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},a=(e||"").toUpperCase();"INPROGRESS"===a&&(a="IN_PROGRESS");const i=o.apiBaseUrl,l=o.hospitalId,d=o.doctorId,s=o.token||"",p={hospitalId:l,doctorId:d,fromDate:t,toDate:n,statuses:a,appointmentType:"ONLINE"},c=`${i}${r}`,u=await async function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"";const o=new URL(e);return o.search=new URLSearchParams(t).toString(),fetch(o,{method:"GET",headers:{"Content-Type":"application/json",Authorization:`${n}`}}).then((async e=>{const t=await e.json().catch((()=>({})));return e.ok?t:{err:t?.resultInfo?.message||"Something went wrong!",status:e.status}})).catch((e=>(console.error("Fetch error:",e),{err:e?.message||String(e)||"Network error"})))}(c,p,"PIH-Appointment-Widget",s);return u},p=async function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};console.log("initiateConsultation -> config",t);const n=`${t.apiBaseUrl.replace(/\/$/,"")}${l}`,o=t.appToken||"";return async function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},o=arguments.length>4?arguments[4]:void 0;const a=new URL(e);Object.keys(n).forEach((e=>{a.searchParams.append(e,n[e])}));const i={"Content-Type":"application/json"};o&&(i.Authorization=o);const r={method:"POST",headers:i,body:JSON.stringify(t)};return fetch(a.toString(),r).then((async e=>{const t=await e.json().catch((()=>({})));return e.ok?t:{err:t?.resultInfo?.message||"Something went wrong!",status:e.status}})).catch((e=>(console.error("Fetch error:",e),{err:e.message||"Network error"})))}(n,{patientId:String(e.patientId||""),primaryPatientId:String(e.primaryPatientId||e.patientId||""),hospitalId:t.hospitalId,doctorId:String(t.doctorId),patientName:e.patientName||e.name||"",doctorName:e.doctorName||t.doctorName,appointmentId:String(e.id||e.appointmentId||e._id||"")},"PIH-Appointment-Widget",{},o)};const c="pih_appointment_idToken",u="pih_appointment_email",m="pih_appointment_appToken",f="pih_appointment_doctorId",x="pih_appointment_userName",g="pih_appointment_apiBaseUrl",h="pih_appointment_hospitalId",y=720,E="pih-appointment-widget",F="data-pih-widget";class w extends t.Component{state={hasError:!1};static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(e,t){"undefined"!=typeof console&&console.error&&console.error("Appointment widget error:",e,t)}render(){return this.state.hasError?a.default.createElement("div",{className:E,[F]:"teleconsult-appointments",style:{fontFamily:'"Nunito", serif',background:"#F5F5F7",boxSizing:"border-box",minHeight:"100vh",display:"flex",alignItems:"center",justifyContent:"center",padding:"24px",textAlign:"center"}},a.default.createElement("div",{style:{maxWidth:"400px"}},a.default.createElement("div",{style:{fontSize:"48px",marginBottom:"16px"}},"⚠️"),a.default.createElement("h2",{style:{fontSize:"20px",fontWeight:700,color:"#1a1a1a",margin:"0 0 8px 0"}},"Something went wrong"),a.default.createElement("p",{style:{fontSize:"14px",color:"#666",margin:0,lineHeight:1.5}},"Please refresh the page or try again later."))):this.props.children}}const S=e=>{let{config:n={}}=e;const[o,i]=t.useState((()=>{try{return"undefined"!=typeof localStorage?localStorage.getItem(g):null}catch{return null}})),[r,l]=t.useState((()=>{try{return"undefined"!=typeof localStorage?localStorage.getItem(h):null}catch{return null}})),S=n.apiBaseUrl||o||"https://afiyaapiqa.powermindinc.com",b=n.hospitalId||r,[v,k]=t.useState((()=>{try{return"undefined"!=typeof localStorage?localStorage.getItem(c):null}catch{return null}})),[C,I]=t.useState((()=>{try{return"undefined"!=typeof localStorage?localStorage.getItem(u):null}catch{return null}})),D=n.idToken||n.token||v,z=n.email||C;t.useEffect((()=>{try{if("undefined"==typeof localStorage)return;const e=n.idToken||n.token;if(e&&String(e).trim()){localStorage.getItem(c)!==e&&(M(null),A(null),R(null),_((e=>e+1)),localStorage.removeItem(m),localStorage.removeItem(f),localStorage.removeItem(x)),localStorage.setItem(c,e),k(e)}n.email&&String(n.email).trim()&&(localStorage.setItem(u,n.email),I(n.email)),n.apiBaseUrl&&String(n.apiBaseUrl).trim()&&(localStorage.setItem(g,n.apiBaseUrl.trim()),i(n.apiBaseUrl.trim())),null!=n.hospitalId&&String(n.hospitalId).trim()&&(localStorage.setItem(h,String(n.hospitalId).trim()),l(String(n.hospitalId).trim()))}catch(e){}}),[n.idToken,n.token,n.email,n.apiBaseUrl,n.hospitalId]);const[W,M]=t.useState((()=>{try{return"undefined"!=typeof localStorage?localStorage.getItem(m):null}catch{return null}})),[T,A]=t.useState((()=>{try{return"undefined"!=typeof localStorage?localStorage.getItem(f):null}catch{return null}})),[N,R]=t.useState((()=>{try{return"undefined"!=typeof localStorage?localStorage.getItem(x):null}catch{return null}})),[P,j]=t.useState((()=>{try{if("undefined"==typeof localStorage)return!1;const e=localStorage.getItem(m),t=localStorage.getItem(c),n=localStorage.getItem(u);return!e&&!(!t||!n)}catch{return!1}})),[B,H]=t.useState(null),[L,$]=t.useState(!1),[U,_]=t.useState(0);t.useEffect((()=>{W&&P&&j(!1)}),[W,P]),t.useEffect((()=>{W||(D&&z?($(!1),H((e=>"Sign in required. Redirecting to home..."===e?null:e))):(H("Sign in required. Redirecting to home..."),$(!0)))}),[W,D,z]),t.useEffect((()=>{if(!L)return;const e=n.homeUrl||"https://wbaemrdevittisalwe01-fnapdpfme7bvduhh.westeurope-01.azurewebsites.net/";if(!e||"undefined"==typeof window)return;const t=setTimeout((()=>{window.location.href=e}),2500);return()=>clearTimeout(t)}),[L,n.homeUrl]),t.useEffect((()=>{if(!P)return;const e=setTimeout((()=>{H("Request timed out. Please try again."),j(!1)}),3e4);return()=>clearTimeout(e)}),[P]);const Y=n.joinCallUrl||d;W&&String(Y||"").replace(/\/?$/,"/");const O=function(e){if(!e||"string"!=typeof e)return{};try{const t=e.split(".");if(3!==t.length)return{};const n=t[1].replace(/-/g,"+").replace(/_/g,"/"),o=n.padEnd(n.length+(4-n.length%4)%4,"=");return JSON.parse(atob(o))}catch{return{}}}(D),V=N||O.name||O.sub||"User",q=()=>(new Date).toISOString().split("T")[0],X=e=>`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}-${String(e.getDate()).padStart(2,"0")}`,[G,J]=t.useState("upcoming"),[K,Q]=t.useState([]),[Z,ee]=t.useState(null),[te,ne]=t.useState(!1),[oe,ae]=t.useState(null),[ie,re]=t.useState(window.innerWidth<768),[le,de]=t.useState("today"),[se,pe]=t.useState("today"),[ce,ue]=t.useState(!1),[me,fe]=t.useState(!1),[xe,ge]=t.useState("all"),[he,ye]=t.useState("asc"),[Ee,Fe]=t.useState(""),[we,Se]=t.useState(!1),[be,ve]=t.useState(!1),[ke,Ce]=t.useState(!1),[Ie,De]=t.useState(null),[ze,We]=t.useState(null),[Me,Te]=t.useState(!1),[Ae,Ne]=t.useState(null),[Re,Pe]=t.useState((()=>({x:Math.max(20,"undefined"!=typeof window?window.innerWidth-y-20:300),y:80}))),[je,Be]=t.useState({width:y,height:560}),[He,Le]=t.useState(!1),[$e,Ue]=t.useState({x:0,y:0}),[_e,Ye]=t.useState(!1),[Oe,Ve]=t.useState(null),[qe,Xe]=t.useState({x:0,y:0,width:0,height:0});t.useState(!1);const[Ge,Je]=t.useState(1),Ke=K.filter((e=>{if(!Ee.trim())return!0;const t=Ee.toLowerCase(),n=(e.patientName||"").toLowerCase(),o=String(e.patientId||"").toLowerCase();return n.includes(t)||o.includes(t)})),Qe=20*(Ge-1),Ze=Qe+20,et=Ke.slice(Qe,Ze),tt=Math.ceil(Ke.length/20),nt=Ke.length,[ot,at]=t.useState(q()),[it,rt]=t.useState(q()),[lt,dt]=t.useState(),[st,pt]=t.useState(),ct=e=>e?.id||e?._id||e?.appointmentId||e?.patientId||JSON.stringify(e),ut=e=>e?.image?e.image:null,mt=e=>e?e.charAt(0).toUpperCase():"?",ft=e=>{if(!e)return"#4C4DDC";const t=["#4C4DDC","#1CC3CE","#FF6B6B","#4ECDC4","#45B7D1","#FFA07A","#98D8C8","#F7DC6F"];return t[e.charCodeAt(0)%t.length]},xt=()=>{const e="asc"===he?"desc":"asc";ye(e);const t=[...K].sort(((t,n)=>{const o=new Date(t.appointmentDate||t.date||0),a=new Date(n.appointmentDate||n.date||0);return"asc"===e?o-a:a-o}));Q(t),Je(1),t.length>0&&ee(t[0])},gt=t.useCallback((async()=>{if(console.log(W,"fetchAppointments -> appToken"),!W)return void(D&&z&&_((e=>e+1)));console.log(T,"fetchAppointments -> doctorIdFromLogin");const e=T;ne(!0),ae(null);try{const t={apiBaseUrl:S,hospitalId:b,doctorId:e,token:W},n=await s(G,ot,it,t);if(401===n.status||403===n.status){try{"undefined"!=typeof localStorage&&(localStorage.removeItem(m),localStorage.removeItem(f),localStorage.removeItem(x))}catch(e){}return M(null),A(null),R(null),_((e=>e+1)),void ae("Session expired. Re-authenticating...")}if(n.err)return void ae(String(n.err||"Failed to fetch appointments"));const o=n.data||n.appointments||n||[];Q(Array.isArray(o)?o:[]),Array.isArray(o)&&o.length>0?ee(o[0]):ee(null)}catch(e){console.error("Error fetching appointments:",e),ae(e.message||"Failed to fetch appointments")}finally{ne(!1)}}),[G,ot,it,xe,S,b,T,W,D,z]),ht=e=>{ee(e),Ne(null)},yt=async()=>{if(Z&&W){Te(!0),Ne(null);try{const e={apiBaseUrl:S,hospitalId:b,doctorId:T,doctorName:N||V,appToken:W};console.log(Z,"selectedAppointment"),console.log(e,"callConfig");const t=await p(Z,e);if(console.log(t.status,"response"),401===t.status||403===t.status){try{"undefined"!=typeof localStorage&&(localStorage.removeItem(m),localStorage.removeItem(f),localStorage.removeItem(x))}catch(e){}return M(null),A(null),R(null),_((e=>e+1)),void Ne("Session expired. Re-authenticating...")}if(t.err||!t.data?.token)return void Ne(String(t.err||"Failed to initiate call"));const o=n.joinCallUrl||d,a=t.data.token?String(o||"").replace(/\/?$/,"/")+t.data.token:"";console.log("joinCallUrl",a),De(t.data.token),We(a||""),Se(!0),ve(!1),Ce(!1),Be({width:y,height:560}),Pe({x:Math.max(20,window.innerWidth-y-20),y:80})}catch(e){Ne(e.message||"Failed to initiate call")}finally{Te(!1)}}},Et=()=>{Se(!1),ve(!1),Ce(!1),De(null),We(null),Ne(null),gt()},Ft=()=>{ke&&Ce(!1),ve(!be)},wt=()=>{be&&ve(!1),Ce(!ke)},St=e=>{if(0!==e.button)return;if(e.target.closest("button"))return;e.currentTarget.setPointerCapture&&e.currentTarget.setPointerCapture(e.pointerId),Le(!0);const t=e.currentTarget.getBoundingClientRect();Ue({x:e.clientX-t.left,y:e.clientY-t.top})},bt=t.useCallback((e=>{if(!ke)if(He){const t=e.clientX-$e.x,n=e.clientY-$e.y,o=window.innerWidth-je.width,a=window.innerHeight-je.height;Pe({x:Math.max(0,Math.min(t,o)),y:Math.max(0,Math.min(n,a))})}else if(_e){const t=e.clientX-qe.x,n=e.clientY-qe.y;let o=qe.width,a=qe.height,i=qe.posX,r=qe.posY;const l=300,d=250,s=window.innerWidth-40,p=window.innerHeight-100;if("bottom-right"===Oe)o=Math.min(Math.max(qe.width+t,l),s),a=Math.min(Math.max(qe.height+n,d),p),i+o>window.innerWidth&&(o=window.innerWidth-i),r+a>window.innerHeight&&(a=window.innerHeight-r);else if("bottom-left"===Oe){o=Math.min(Math.max(qe.width-t,l),s),i=Math.max(0,qe.posX+t),0===i&&(o=qe.posX+qe.width),a=Math.min(Math.max(qe.height+n,d),p),r+a>window.innerHeight&&(a=window.innerHeight-r)}else if("top-right"===Oe){o=Math.min(Math.max(qe.width+t,l),s),i+o>window.innerWidth&&(o=window.innerWidth-i);a=Math.min(Math.max(qe.height-n,d),p),r=Math.max(0,qe.posY+n),0===r&&(a=qe.posY+qe.height)}else if("top-left"===Oe){o=Math.min(Math.max(qe.width-t,l),s),i=Math.max(0,qe.posX+t),0===i&&(o=qe.posX+qe.width);a=Math.min(Math.max(qe.height-n,d),p),r=Math.max(0,qe.posY+n),0===r&&(a=qe.posY+qe.height)}Be({width:o,height:a}),Pe({x:i,y:r})}}),[He,_e,$e,Oe,qe,Re,je,ke]),vt=()=>{Le(!1),Ye(!1),Ve(null)},kt=(e,t)=>{t.preventDefault(),t.stopPropagation(),t.currentTarget.setPointerCapture&&t.currentTarget.setPointerCapture(t.pointerId),Ye(!0),Ve(e),Xe({x:t.clientX,y:t.clientY,width:je.width,height:je.height,posX:Re.x,posY:Re.y})};t.useEffect((()=>{if(!we||ke)return;const e=()=>{if(!(window.innerWidth<768)){const e=be?350:je.width,t=be?60:je.height,n=window.innerWidth-40,o=window.innerHeight-100,a=Math.min(e,n),i=Math.min(t,o);a===je.width&&i===je.height||Be({width:a,height:i});const r=window.innerWidth-a-20,l=window.innerHeight-i-20;Pe((e=>({x:Math.min(e.x,r),y:Math.min(e.y,l)})))}};return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)}),[we,be,ke,je]),t.useEffect((()=>{if(!(D&&z&&(!W||U>0)))return;let e=!1;return j(!0),H(null),(async(e,t,n,o)=>{const a=`${e.replace(/\/$/,"")}/um/user/V1/sso/login?hospitalId=${encodeURIComponent(t)}`,i={method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({idToken:n,email:o})};return console.log("[getTokenFromSso] request",{url:a,body:{idToken:n?n.slice(0,50)+"...":null,email:o}}),fetch(a,i).then((e=>(console.log("[getTokenFromSso] response status",e.status,e.statusText),e.ok?e.json().then((e=>(console.log("[getTokenFromSso] success",{hasData:!!e,dataKeys:e?Object.keys(e):[],hasAccessToken:!!e?.data?.access_token}),e))):e.json().then((t=>{const n=t?.resultInfo?.message||"SSO login failed";return console.log("[getTokenFromSso] error body",t),{err:n,status:e.status}})).catch((()=>({err:"Something went wrong!",status:e.status})))))).catch((e=>(console.error("[getTokenFromSso] catch",e),{err:e.message||"Network error"})))})(S,b,D,z).then((t=>{if(e)return;const n=function(e){return!e||e.err?null:e.data?.access_token??e.data?.token??e.token??e.accessToken??null}(t);if(400===t.status)return H(t.err||"Invalid request. Redirecting to home..."),j(!1),void $(!0);if(t.err||!n){H(String(t.err||"Failed to get token")),M(null),A(null),R(null);try{"undefined"!=typeof localStorage&&(localStorage.removeItem(m),localStorage.removeItem(f),localStorage.removeItem(x))}catch(e){}}else{const e=function(e){if(!e?.data)return null;const t=e.data.doctor_id??e.data.doctorId??null;return console.log(t,"extractDoctorIdFromLoginResponse -> id"),null!=t?String(t):null}(t);console.log(e,"extractDoctorIdFromLoginResponse -> doctorId");const o=function(e){if(!e?.data)return null;const t=e.data.name??e.data.doctor_name??e.data.userName??null;return null!=t?String(t):null}(t);M(n),A(e),R(o),H(null),$(!1);try{"undefined"!=typeof localStorage&&(localStorage.setItem(m,n),e&&localStorage.setItem(f,e),o&&localStorage.setItem(x,o))}catch(e){}}})).catch((t=>{e||(H(t?.message||"Authentication failed. Please try again."),M(null))})).finally((()=>{e||j(!1)})),()=>{e=!0}}),[S,b,D,z,U,W]),t.useEffect((()=>{Je(1),Ne(null)}),[G,le,ot,it,Ee,xe]),t.useEffect((()=>{!P&&W&&gt()}),[gt,W,P]),t.useEffect((()=>{const e=document.createElement("link");e.href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap",e.rel="stylesheet",document.head.appendChild(e);const t=document.createElement("style");t.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    ",document.head.appendChild(t);const n=()=>{re(window.innerWidth<768)};return window.addEventListener("resize",n),()=>{document.head.removeChild(e),document.head.removeChild(t),window.removeEventListener("resize",n)}}),[]),t.useEffect((()=>{const e=e=>{!ce||e.target.closest("button")||e.target.closest('input[type="date"]')||ue(!1),me&&!e.target.closest("[data-appointment-type-picker]")&&fe(!1)};return document.addEventListener("click",e),()=>{document.removeEventListener("click",e)}}),[ce,me]);let Ct='"Nunito", serif';const It=B||!W&&(!D||!z),Dt=B||"Sign in required. Redirecting to home...";let zt;return zt=P&&D&&z?a.default.createElement("div",{className:E,[F]:"teleconsult-appointments",style:{fontFamily:Ct,background:"#F5F5F7",boxSizing:"border-box",height:"100%",minHeight:"100vh",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",padding:"24px"}},a.default.createElement("style",null,"@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }"),a.default.createElement("div",{style:{width:"40px",height:"40px",border:"3px solid #f3f3f3",borderTop:"3px solid #4C4DDC",borderRadius:"50%",animation:"spin 1s linear infinite",marginBottom:"16px"}}),a.default.createElement("p",{style:{fontSize:"14px",color:"#666",margin:0}},"Checking authorisation...")):a.default.createElement(a.default.Fragment,null,a.default.createElement("div",{className:E,[F]:"teleconsult-appointments",style:{fontFamily:Ct,background:"#F5F5F7",boxSizing:"border-box",height:"100%",minHeight:"100vh",width:"100%",display:"flex",flexDirection:"column",overflow:"hidden"}},a.default.createElement("div",{style:{background:"#FFFFFF",padding:ie?"10px 12px":"12px 24px",display:"flex",justifyContent:"space-between",alignItems:"center",borderBottom:"1px solid #E5E5E5",flexWrap:"nowrap",gap:ie?"8px":"0"}},a.default.createElement("div",{style:{position:"relative",width:ie?"calc(100% - 90px)":"480px",maxWidth:ie?"none":"480px"}},a.default.createElement("input",{type:"text",placeholder:"Search by patient name or ID",value:Ee,onChange:e=>Fe(e.target.value),style:{width:"100%",padding:ie?"8px 32px 8px 10px":"8px 36px 8px 14px",border:"1px solid #E5E5E5",borderRadius:"6px",fontSize:ie?"12px":"13px",fontFamily:Ct,background:"#FFFFFF",outline:"none",boxSizing:"border-box"}}),Ee&&a.default.createElement("button",{onClick:()=>Fe(""),style:{position:"absolute",right:"8px",top:"50%",transform:"translateY(-50%)",background:"none",border:"none",cursor:"pointer",padding:"4px",display:"flex",alignItems:"center",justifyContent:"center",color:"#999",fontSize:"16px"},title:"Clear search"},"✕")),!1),a.default.createElement("div",{style:{padding:ie?"12px":"16px 24px",flex:1,minHeight:0,overflow:"hidden",display:"flex",flexDirection:"column"}},a.default.createElement("div",{style:{marginBottom:ie?"10px":"14px"}},a.default.createElement("h1",{style:{fontSize:ie?"18px":"22px",fontWeight:700,color:"#1a1a1a",margin:"0 0 2px 0"}},"Tele Consultation"),a.default.createElement("p",{style:{fontSize:ie?"11px":"12px",color:"#999",margin:0}},"Displaying All Tele Consultation Appointments")),a.default.createElement("div",{style:{display:"flex",justifyContent:"space-between",alignItems:ie?"flex-start":"center",marginBottom:ie?"10px":"14px",flexDirection:ie?"column":"row",gap:ie?"12px":"0"}},a.default.createElement("div",{style:{display:"flex",gap:"6px",flexWrap:"wrap",width:ie?"100%":"auto"}},a.default.createElement("button",{onClick:()=>J("upcoming"),style:{background:"upcoming"===G?"#4C4DDC":"#FFFFFF",padding:ie?"8px 10px":"9px 16px",border:"upcoming"===G?"none":"1px solid #E5E5E5",borderRadius:"6px",fontSize:ie?"10px":"13px",color:"upcoming"===G?"white":"#555555",fontWeight:600,fontFamily:Ct,cursor:"pointer",flex:ie?"1 1 auto":"none",minWidth:ie?"0":"auto",transition:"all 0.3s ease",whiteSpace:"nowrap"}},"Upcoming Appointments"),a.default.createElement("button",{onClick:()=>J("completed"),style:{background:"completed"===G?"#4C4DDC":"#FFFFFF",padding:ie?"8px 10px":"9px 16px",border:"completed"===G?"none":"1px solid #E5E5E5",borderRadius:"6px",fontSize:ie?"10px":"13px",color:"completed"===G?"white":"#555555",fontWeight:600,fontFamily:Ct,cursor:"pointer",flex:ie?"1 1 auto":"none",minWidth:ie?"0":"auto",transition:"all 0.3s ease",whiteSpace:"nowrap"}},"Completed Appointments"),a.default.createElement("button",{onClick:()=>J("cancelled"),style:{background:"cancelled"===G?"#4C4DDC":"#FFFFFF",padding:ie?"8px 10px":"9px 16px",border:"cancelled"===G?"none":"1px solid #E5E5E5",borderRadius:"6px",fontSize:ie?"10px":"13px",color:"cancelled"===G?"white":"#555555",fontWeight:600,fontFamily:Ct,cursor:"pointer",flex:ie?"1 1 auto":"none",minWidth:ie?"0":"auto",transition:"all 0.3s ease",whiteSpace:"nowrap"}},"Cancelled Appointments")),a.default.createElement("div",{style:{display:"flex",gap:"8px",alignItems:"center",width:"auto",position:"relative",justifyContent:ie?"flex-start":"flex-end",flexWrap:"wrap"}},a.default.createElement("button",{onClick:()=>{ce||(dt(ot),pt(it),pe(le)),ue(!ce)},style:{padding:"8px 12px",fontFamily:Ct,fontWeight:600,border:"1px solid #E5E5E5",borderRadius:"6px",fontSize:ie?"11px":"13px",color:"#1a1a1a",background:"#FFFFFF",display:"flex",alignItems:"center",gap:ie?"4px":"6px",cursor:"pointer",flex:"none",minWidth:ie?"100px":"auto",justifyContent:"center"}},a.default.createElement("svg",{width:ie?"12":"14",height:ie?"12":"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},a.default.createElement("rect",{x:"3",y:"4",width:"18",height:"18",rx:"2",ry:"2"}),a.default.createElement("line",{x1:"16",y1:"2",x2:"16",y2:"6"}),a.default.createElement("line",{x1:"8",y1:"2",x2:"8",y2:"6"}),a.default.createElement("line",{x1:"3",y1:"10",x2:"21",y2:"10"})),a.default.createElement("span",{style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}},(()=>{switch(le){case"today":default:return"Today";case"tomorrow":return"Tomorrow";case"currentWeek":return"Current Week";case"thisMonth":return"This Month";case"currentYear":return"Current Year";case"custom":return ie?"Custom":`${ot} to ${it}`}})()),a.default.createElement("svg",{width:ie?"8":"10",height:ie?"8":"10",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},a.default.createElement("polyline",{points:"6 9 12 15 18 9"}))),ce&&a.default.createElement("div",{style:{position:"absolute",top:"100%",right:ie?"auto":0,left:ie?0:"auto",marginTop:"4px",background:"#FFFFFF",border:"1px solid #E5E5E5",borderRadius:"8px",boxShadow:"0 4px 16px rgba(0,0,0,0.15)",padding:"8px",zIndex:1e3,minWidth:ie?"280px":"240px",width:ie?"calc(100vw - 24px)":"auto",maxWidth:ie?"calc(100vw - 24px)":"280px"}},a.default.createElement("div",{style:{marginBottom:"custom"===se?"12px":"0"}},["thisMonth","today","tomorrow","currentWeek","currentYear","custom"].map((e=>a.default.createElement("button",{key:e,onClick:()=>{if(pe(e),"custom"!==e){const t=(e=>{const t=new Date;let n,o;switch(e){case"today":default:n=o=q();break;case"tomorrow":const e=new Date(t);e.setDate(e.getDate()+1),n=o=X(e);break;case"currentWeek":const a=new Date(t),i=new Date(t),r=t.getDay(),l=0===r?-6:1-r;a.setDate(t.getDate()+l),i.setDate(a.getDate()+6),n=X(a),o=X(i);break;case"thisMonth":const d=new Date(t.getFullYear(),t.getMonth(),1),s=new Date(t.getFullYear(),t.getMonth()+1,0);n=X(d),o=X(s);break;case"currentYear":n=`${t.getFullYear()}-01-01`,o=`${t.getFullYear()}-12-31`}return{from:n,to:o}})(e);de(e),at(t.from),rt(t.to),dt(t.from),pt(t.to),ue(!1)}else dt(""),pt("")},style:{width:"100%",padding:"10px 12px",background:se===e?"#E8EEF4":"#FFFFFF",border:"none",borderRadius:"4px",fontSize:"13px",fontFamily:Ct,cursor:"pointer",textAlign:"left",fontWeight:se===e?600:400,color:se===e?"#4C4DDC":"#1a1a1a",marginBottom:"4px",display:"flex",justifyContent:"space-between",alignItems:"center",transition:"all 0.2s ease"},onMouseEnter:t=>{se!==e&&(t.target.style.background="#F5F5F5")},onMouseLeave:t=>{se!==e&&(t.target.style.background="#FFFFFF")}},a.default.createElement("span",null,{thisMonth:"This Month",today:"Today",tomorrow:"Tomorrow",currentWeek:"Current Week",currentYear:"Current Year",custom:"Custom"}[e]),se===e&&a.default.createElement("span",{style:{color:"#4C4DDC",fontSize:"16px"}},"✓"))))),"custom"===se&&a.default.createElement("div",{style:{paddingTop:"8px",borderTop:"1px solid #E5E5E5"}},a.default.createElement("div",{style:{marginBottom:"8px"}},a.default.createElement("input",{type:"date",value:lt,onChange:e=>dt(e.target.value),placeholder:"Start Date",style:{width:"100%",padding:"10px 8px",border:"1px solid #E5E5E5",borderRadius:"4px",fontSize:"13px",fontFamily:Ct,boxSizing:"border-box",cursor:"pointer"}})),a.default.createElement("div",{style:{marginBottom:"12px"}},a.default.createElement("input",{type:"date",value:st,onChange:e=>pt(e.target.value),placeholder:"End Date",style:{width:"100%",padding:"10px 8px",border:"1px solid #E5E5E5",borderRadius:"4px",fontSize:"13px",fontFamily:Ct,boxSizing:"border-box",cursor:"pointer"}})),a.default.createElement("div",{style:{display:"flex",gap:"8px"}},a.default.createElement("button",{onClick:()=>{pe(le),dt(ot),pt(it),ue(!1)},style:{flex:1,padding:"10px 12px",background:"#FFFFFF",color:"#4C4DDC",border:"1px solid #4C4DDC",borderRadius:"4px",fontSize:"13px",fontFamily:Ct,fontWeight:600,cursor:"pointer"}},"Cancel"),a.default.createElement("button",{onClick:()=>{lt&&st&&(de("custom"),at(lt),rt(st),ue(!1))},style:{flex:1,padding:"10px 12px",background:"#4C4DDC",color:"#FFFFFF",border:"none",borderRadius:"4px",fontSize:"13px",fontFamily:Ct,fontWeight:600,cursor:"pointer"}},"Submit")))))),a.default.createElement("div",{style:{display:"flex",flexDirection:ie?"column":"row",gap:ie?"12px":"14px",flex:1,minHeight:0,overflow:ie?"auto":"hidden"}},a.default.createElement("div",{style:{flex:ie?"none":"1 1 65%",width:ie?"100%":"auto",display:"flex",flexDirection:"column",minHeight:ie?"400px":0}},a.default.createElement("div",{style:{background:"#FFFFFF",borderRadius:"8px",boxShadow:"0 1px 4px rgba(0,0,0,0.08)",overflow:"hidden",display:"flex",flexDirection:"column",flex:ie?"none":1,minHeight:ie?"auto":0}},a.default.createElement("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",padding:ie?"12px 14px":"14px 18px",borderBottom:"1px solid #F1F1F1"}},a.default.createElement("div",{style:{display:"flex",alignItems:"center",gap:ie?"6px":"8px"}},a.default.createElement("span",{style:{fontSize:ie?"14px":"15px",fontWeight:700,color:"#1a1a1a"}},"Appointments"),a.default.createElement("span",{style:{background:"#4C4DDC",color:"#fff",fontSize:ie?"10px":"11px",fontWeight:600,padding:ie?"2px 7px":"3px 8px",borderRadius:"12px"}},nt))),a.default.createElement("div",{className:"appointments-header-grid",style:{display:"grid",gridTemplateColumns:ie?"1.5fr 1fr 0.8fr":"2.5fr 1fr 1.5fr 0.8fr 1.2fr",gap:ie?"8px":"12px",padding:ie?"8px 12px":"10px 18px",background:"#F5F5F5",fontSize:ie?"10px":"12px",fontWeight:600,color:"#666"}},a.default.createElement("div",null,"Patients name"),!ie&&a.default.createElement("div",null,"Patient ID"),a.default.createElement("div",{onClick:xt,style:{display:"flex",alignItems:"center",gap:"3px",cursor:"pointer",userSelect:"none"}},"Date",a.default.createElement("span",{style:{opacity:.7,fontSize:"10px"}},"asc"===he?"▲":"▼")),!ie&&a.default.createElement("div",null,"Slot"),!ie&&a.default.createElement("div",null,"Doctor")),a.default.createElement("div",{style:{overflow:"auto",flex:1}},P?a.default.createElement("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",padding:"40px",color:"#888"}},a.default.createElement("div",{style:{textAlign:"center"}},a.default.createElement("div",{style:{width:"40px",height:"40px",border:"3px solid #f3f3f3",borderTop:"3px solid #4C4DDC",borderRadius:"50%",animation:"spin 1s linear infinite",margin:"0 auto 10px"}}),"Getting token...")):te?a.default.createElement("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",padding:"40px",color:"#888"}},a.default.createElement("div",{style:{textAlign:"center"}},a.default.createElement("div",{style:{width:"40px",height:"40px",border:"3px solid #f3f3f3",borderTop:"3px solid #4C4DDC",borderRadius:"50%",animation:"spin 1s linear infinite",margin:"0 auto 10px"}}),"Loading appointments...")):oe?a.default.createElement("div",{style:{padding:"40px",textAlign:"center",color:"#FF0000"}},a.default.createElement("div",{style:{fontSize:"16px",marginBottom:"8px"}},"⚠️ Error"),a.default.createElement("div",{style:{fontSize:"13px"}},oe),a.default.createElement("button",{onClick:gt,style:{marginTop:"16px",padding:"8px 16px",background:"#4C4DDC",color:"white",border:"none",borderRadius:"6px",cursor:"pointer",fontFamily:Ct}},"Retry")):0===et.length?a.default.createElement("div",{style:{padding:"40px",textAlign:"center",color:"#888"}},a.default.createElement("div",{style:{fontSize:"16px",marginBottom:"8px"}},"📋"),a.default.createElement("div",{style:{fontSize:"13px"}},Ee?`No appointments found for "${Ee}"`:"No appointments found"),Ee&&a.default.createElement("button",{onClick:()=>Fe(""),style:{marginTop:"12px",padding:"6px 12px",background:"#4C4DDC",color:"white",border:"none",borderRadius:"4px",cursor:"pointer",fontSize:"12px",fontFamily:Ct}},"Clear Search")):et.map((e=>a.default.createElement("div",{key:ct(e),role:"button",tabIndex:0,onClick:()=>ht(e),onKeyDown:t=>"Enter"===t.key&&ht(e),className:"appointments-grid",style:{display:"grid",gridTemplateColumns:ie?"1.5fr 1fr 0.8fr":"2.5fr 1fr 1.5fr 0.8fr 1.2fr",gap:ie?"8px":"12px",padding:ie?"10px 12px":"12px 18px",background:ct(Z)===ct(e)?"#E8EEF4":"#FFFFFF",borderTop:"1px solid #F1F1F1",alignItems:"center",cursor:"pointer",fontSize:ie?"11px":"13px"}},a.default.createElement("div",{style:{display:"flex",alignItems:"center",gap:ie?"8px":"10px"}},ut(e)?a.default.createElement("img",{src:e.image,alt:"",style:{width:ie?"32px":"36px",height:ie?"32px":"36px",borderRadius:"50%",objectFit:"cover"}}):a.default.createElement("div",{style:{width:ie?"32px":"36px",height:ie?"32px":"36px",borderRadius:"50%",background:ft(e.patientName),display:"flex",alignItems:"center",justifyContent:"center",color:"#FFFFFF",fontWeight:600,fontSize:ie?"14px":"16px"}},mt(e.patientName)),a.default.createElement("div",null,a.default.createElement("div",{style:{fontWeight:600,color:"#1a1a1a",fontSize:ie?"11px":"13px"}},e.patientName),a.default.createElement("div",{style:{fontSize:ie?"9px":"11px",color:"#888"}},e.email))),!ie&&a.default.createElement("div",{style:{color:"#555",fontSize:"12px"}},e.patientId),a.default.createElement("div",{style:{color:"#555",fontSize:ie?"10px":"12px"}},(()=>{const t=e.appointmentDate||"",n=t.match(/\s(\d{1,2}:\d{2}(?:\s*(?:AM|PM))?)$/i);return n?a.default.createElement(a.default.Fragment,null,a.default.createElement("div",null,t.slice(0,n.index).trim()),a.default.createElement("div",{style:{fontSize:ie?"9px":"11px",color:"#888"}},n[1].trim())):a.default.createElement("div",null,t)})()),!ie&&a.default.createElement("div",{style:{color:"#555",fontSize:"12px"}},e.appointmentTime||"-"),!ie&&a.default.createElement("div",{style:{color:"#555",fontSize:"12px"}},e.doctorName||e.doctor||"-"))))),!te&&!oe&&et.length>0&&a.default.createElement("div",{style:{padding:ie?"12px 14px":"14px 18px",borderTop:"1px solid #F1F1F1",display:"flex",justifyContent:"space-between",alignItems:"center",background:"#FFFFFF",flexWrap:ie?"wrap":"nowrap",gap:ie?"10px":"0"}},a.default.createElement("div",{style:{fontSize:ie?"11px":"12px",color:"#666"}},"Showing page ",Ge," of ",tt," (",nt," total)"),a.default.createElement("div",{style:{display:"flex",gap:"6px",alignItems:"center"}},a.default.createElement("button",{onClick:()=>Je((e=>Math.max(1,e-1))),disabled:1===Ge,style:{padding:ie?"6px 10px":"6px 12px",border:"1px solid #E5E5E5",borderRadius:"4px",background:1===Ge?"#F5F5F5":"#FFFFFF",color:1===Ge?"#999":"#1a1a1a",fontSize:ie?"11px":"12px",fontFamily:Ct,fontWeight:600,cursor:1===Ge?"not-allowed":"pointer",opacity:1===Ge?.5:1}},"Previous"),a.default.createElement("div",{style:{display:"flex",gap:"4px"}},[...Array(Math.min(5,tt))].map(((e,t)=>{let n;return n=tt<=5||Ge<=3?t+1:Ge>=tt-2?tt-4+t:Ge-2+t,a.default.createElement("button",{key:n,onClick:()=>Je(n),style:{padding:ie?"6px 10px":"6px 12px",border:Ge===n?"none":"1px solid #E5E5E5",borderRadius:"4px",background:Ge===n?"#4C4DDC":"#FFFFFF",color:Ge===n?"#FFFFFF":"#1a1a1a",fontSize:ie?"11px":"12px",fontFamily:Ct,fontWeight:600,cursor:"pointer",minWidth:ie?"32px":"36px"}},n)}))),a.default.createElement("button",{onClick:()=>Je((e=>Math.min(tt,e+1))),disabled:Ge===tt,style:{padding:ie?"6px 10px":"6px 12px",border:"1px solid #E5E5E5",borderRadius:"4px",background:Ge===tt?"#F5F5F5":"#FFFFFF",color:Ge===tt?"#999":"#1a1a1a",fontSize:ie?"11px":"12px",fontFamily:Ct,fontWeight:600,cursor:Ge===tt?"not-allowed":"pointer",opacity:Ge===tt?.5:1}},"Next"))))),a.default.createElement("div",{style:{flex:ie?"none":"1 1 35%",width:ie?"100%":"auto",display:Z||!ie?"flex":"none",flexDirection:"column",minHeight:ie?"auto":0}},a.default.createElement("div",{style:{border:"1px solid #E5E5E5",borderRadius:"8px",overflow:"hidden",background:"#FFFFFF",boxShadow:"0 1px 4px rgba(0,0,0,0.08)",display:"flex",flexDirection:"column",flex:ie?"none":1,minHeight:ie?"auto":0}},Z?a.default.createElement(a.default.Fragment,null,a.default.createElement("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",padding:ie?"12px 14px":"16px 18px",background:"#E8EEF4",borderBottom:"1px solid #E5E5E5"}},a.default.createElement("div",null,a.default.createElement("div",{style:{color:"#002668",fontSize:ie?"14px":"16px",fontWeight:"700"}},Z.patientName||"N/A"),a.default.createElement("div",{style:{color:"#002668",fontSize:ie?"11px":"13px"}},Z.patientId||Z.mrn||"N/A")),a.default.createElement("div",null,ut(Z)?a.default.createElement("img",{style:{width:ie?"36px":"44px",height:ie?"36px":"44px",borderRadius:"50%",objectFit:"cover"},src:Z.image,alt:Z.patientName}):a.default.createElement("div",{style:{width:ie?"36px":"44px",height:ie?"36px":"44px",borderRadius:"50%",background:ft(Z.patientName),display:"flex",alignItems:"center",justifyContent:"center",color:"#FFFFFF",fontWeight:700,fontSize:ie?"16px":"20px"}},mt(Z.patientName)))),a.default.createElement("div",{style:{padding:ie?"12px 14px":"14px 18px",gap:ie?"10px":"12px",display:"flex",flexDirection:"column",background:"white",overflow:"auto",flex:1,position:"relative"}},a.default.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},a.default.createElement("div",{style:{textAlign:"left"}},a.default.createElement("div",{style:{fontSize:ie?"10px":"11px",color:"#888",marginBottom:"3px"}},"Speciality"),a.default.createElement("div",{style:{fontWeight:"700",fontSize:ie?"12px":"13px"}},Z?.specialisation||Z?.speciality||"N/A")),a.default.createElement("div",{style:{textAlign:"right"}},a.default.createElement("div",{style:{fontSize:ie?"10px":"11px",color:"#888",marginBottom:"3px"}},"Appointment Type"),a.default.createElement("div",{style:{fontWeight:"700",fontSize:ie?"12px":"13px"}},Z?.type||Z?.appointmentType||"Online"))),a.default.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},a.default.createElement("div",{style:{textAlign:"left"}},a.default.createElement("div",{style:{fontSize:ie?"10px":"11px",color:"#888",marginBottom:"3px"}},"Appointment Date"),a.default.createElement("div",{style:{fontWeight:"700",fontSize:ie?"12px":"13px"}},Z?.date||Z?.appointmentDate||"N/A")),a.default.createElement("div",{style:{textAlign:"right"}},a.default.createElement("div",{style:{fontSize:ie?"10px":"11px",color:"#888",marginBottom:"3px"}},"Appointment Time"),a.default.createElement("div",{style:{fontWeight:"700",fontSize:ie?"12px":"13px"}},Z?.time||Z?.appointmentTime||"N/A"))),a.default.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},a.default.createElement("div",{style:{textAlign:"left"}},a.default.createElement("div",{style:{fontSize:ie?"10px":"11px",color:"#888",marginBottom:"3px"}},"Doctor"),a.default.createElement("div",{style:{fontWeight:"700",fontSize:ie?"12px":"13px"}},Z?.doctor||Z?.doctorName||"N/A"))),a.default.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},a.default.createElement("div",{style:{textAlign:"left"}},a.default.createElement("div",{style:{fontSize:ie?"10px":"11px",color:"#888",marginBottom:"3px"}},"Hospital"),a.default.createElement("div",{style:{fontWeight:"700",fontSize:ie?"12px":"13px"}},Z?.hospital||Z?.hospitalName||"N/A"))),a.default.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},a.default.createElement("div",{style:{textAlign:"left"}},a.default.createElement("div",{style:{fontSize:ie?"10px":"11px",color:"#888",marginBottom:"3px"}},"Reason for Appointment"),a.default.createElement("div",{style:{fontWeight:"600",fontSize:ie?"11px":"12px",lineHeight:"1.4"}},Z?.reason||Z?.reasonForAppointment||"No reason provided"))),("upcoming"===G||"completed"===G&&(e=>{const t=e?.date||e?.appointmentDate,n=e?.time||e?.appointmentTime;if(!t||!n)return!1;try{const e=String(n).trim().match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);let o,a;if(e){o=parseInt(e[1],10),a=parseInt(e[2],10);const t=e[3].toUpperCase();"AM"===t&&12===o&&(o=0),"PM"===t&&12!==o&&(o+=12)}else{const e=String(n).trim().split(":");o=parseInt(e[0],10),a=parseInt(e[1],10)}if(isNaN(o)||isNaN(a))return!1;const i=new Date(`${t} ${String(o).padStart(2,"0")}:${String(a).padStart(2,"0")}:00`);if(isNaN(i.getTime()))return!1;const r=new Date(i.getTime()+72e5);return new Date<=r}catch{return!1}})(Z))&&a.default.createElement("div",{style:{display:"flex",flexDirection:ie?"column":"row",gap:"6px",marginTop:"10px"}},a.default.createElement("button",{type:"button",onClick:Me?void 0:yt,disabled:Me,style:{flex:1,background:Me?"#99e4e8":"#1CC3CE",color:"#FFFFFF",border:"1px solid #1CC3CE",borderRadius:"6px",padding:ie?"10px 8px":"8px 6px",fontFamily:Ct,fontWeight:600,fontSize:ie?"11px":"12px",cursor:Me?"not-allowed":"pointer"}},Me?"Connecting...":"Join Call >")),("upcoming"===G||"completed"===G)&&Ae&&a.default.createElement("div",{style:{fontSize:"11px",color:"#e53935",marginTop:"6px",textAlign:"center",width:"100%"}},"⚠️ ",Ae))):a.default.createElement("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100%",padding:"40px",color:"#888",textAlign:"center"}},a.default.createElement("div",null,a.default.createElement("div",{style:{fontSize:"16px",marginBottom:"8px"}},"📋"),a.default.createElement("div",{style:{fontSize:"13px"}},"Select an appointment to view details"))))))),we&&a.default.createElement("div",{style:{position:"fixed",left:ke?"0":ie?"10px":`${Re.x}px`,top:ke?"0":ie?"70px":`${Re.y}px`,right:ke?"0":ie?"10px":"auto",bottom:ke?"0":"auto",width:ke?"100vw":ie?"calc(100vw - 20px)":be?"350px":`${je.width}px`,height:ke?"100vh":be?"auto":ie?"300px":`${je.height}px`,background:"#FFFFFF",borderRadius:ke?"0":"8px",boxShadow:"0 8px 24px rgba(0, 0, 0, 0.3)",zIndex:1e5,overflow:"hidden",display:"flex",flexDirection:"column",transition:He||_e?"none":"all 0.3s ease"}},a.default.createElement("div",{onPointerDown:ie||ke?void 0:St,onPointerMove:ie||ke?void 0:bt,onPointerUp:ie||ke?void 0:vt,onPointerCancel:ie||ke?void 0:vt,style:{background:"linear-gradient(135deg, #4C4DDC 0%, #3A3BBD 100%)",color:"#FFFFFF",padding:ie?"8px 10px":"10px 12px",display:"flex",justifyContent:"space-between",alignItems:"center",cursor:ie||ke?"default":"move",userSelect:"none"}},a.default.createElement("div",{style:{display:"flex",alignItems:"center",gap:ie?"6px":"8px",flex:1,minWidth:0}},a.default.createElement("div",{style:{width:ie?"6px":"8px",height:ie?"6px":"8px",borderRadius:"50%",background:"#FF4444",animation:"pulse 2s infinite",flexShrink:0}}),a.default.createElement("span",{style:{fontSize:ie?"11px":"13px",fontWeight:600,fontFamily:Ct,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}},"Video Call - ",Z?.patientName||"Patient")),a.default.createElement("div",{style:{display:"flex",gap:ie?"4px":"6px",alignItems:"center",flexShrink:0}},a.default.createElement("button",{onClick:Ft,style:{background:"rgba(255, 255, 255, 0.2)",border:"1px solid rgba(255, 255, 255, 0.3)",borderRadius:"6px",color:"#FFFFFF",cursor:"pointer",padding:ie?"5px 8px":"6px 10px",lineHeight:1,display:"flex",alignItems:"center",justifyContent:"center",minWidth:ie?"28px":"32px",height:ie?"28px":"32px",transition:"background 0.2s ease"},onMouseEnter:e=>e.target.style.background="rgba(255, 255, 255, 0.3)",onMouseLeave:e=>e.target.style.background="rgba(255, 255, 255, 0.2)",title:be?"Restore":"Minimize"},be?a.default.createElement("svg",{width:ie?"14":"16",height:ie?"14":"16",viewBox:"0 0 16 16",fill:"none"},a.default.createElement("rect",{x:"3",y:"3",width:"10",height:"10",stroke:"white",strokeWidth:"1.8",fill:"none"})):a.default.createElement("svg",{width:ie?"14":"16",height:ie?"14":"16",viewBox:"0 0 16 16",fill:"none"},a.default.createElement("line",{x1:"3",y1:"8",x2:"13",y2:"8",stroke:"white",strokeWidth:"1.8",strokeLinecap:"round"}))),a.default.createElement("button",{onClick:wt,style:{background:"rgba(255, 255, 255, 0.2)",border:"1px solid rgba(255, 255, 255, 0.3)",borderRadius:"6px",color:"#FFFFFF",cursor:"pointer",padding:ie?"5px 8px":"6px 10px",lineHeight:1,display:"flex",alignItems:"center",justifyContent:"center",minWidth:ie?"28px":"32px",height:ie?"28px":"32px",transition:"background 0.2s ease"},onMouseEnter:e=>e.target.style.background="rgba(255, 255, 255, 0.3)",onMouseLeave:e=>e.target.style.background="rgba(255, 255, 255, 0.2)",title:ke?"Exit Fullscreen":"Fullscreen"},ke?a.default.createElement("svg",{width:ie?"14":"16",height:ie?"14":"16",viewBox:"0 0 16 16",fill:"none"},a.default.createElement("path",{d:"M10 3H13V6M6 13H3V10M13 10V13H10M3 6V3H6",stroke:"white",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round"})):a.default.createElement("svg",{width:ie?"14":"16",height:ie?"14":"16",viewBox:"0 0 16 16",fill:"none"},a.default.createElement("path",{d:"M3 6V3H6M13 10V13H10M10 3H13V6M6 13H3V10",stroke:"white",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round"}))),a.default.createElement("button",{onClick:Et,style:{background:"rgba(255, 255, 255, 0.2)",border:"1px solid rgba(255, 255, 255, 0.3)",borderRadius:"6px",color:"#FFFFFF",cursor:"pointer",padding:ie?"5px 8px":"6px 10px",lineHeight:1,display:"flex",alignItems:"center",justifyContent:"center",minWidth:ie?"28px":"32px",height:ie?"28px":"32px",fontWeight:"bold",fontSize:ie?"18px":"22px",transition:"background 0.2s ease"},onMouseEnter:e=>e.target.style.background="rgba(255, 255, 255, 0.3)",onMouseLeave:e=>e.target.style.background="rgba(255, 255, 255, 0.2)",title:"Close"},"×"))),a.default.createElement("div",{style:{flex:1,background:"#000000",position:"relative",display:be?"none":"flex",flexDirection:"column"}},a.default.createElement("iframe",{src:(()=>{if(!Ie)return"";return`${String(Y||"").replace(/\/?$/,"/")}${Ie}`})(),style:{width:"100%",height:"100%",border:"none",flex:1},allow:"camera; microphone; display-capture; autoplay",allowFullScreen:!0,title:"Video Call"})),!ie&&!ke&&!be&&a.default.createElement(a.default.Fragment,null,a.default.createElement("div",{onPointerDown:e=>kt("top-left",e),onPointerMove:bt,onPointerUp:vt,onPointerCancel:vt,style:{position:"absolute",left:0,top:0,width:"16px",height:"16px",cursor:"nwse-resize",background:"transparent",zIndex:10001}}),a.default.createElement("div",{onPointerDown:e=>kt("top-right",e),onPointerMove:bt,onPointerUp:vt,onPointerCancel:vt,style:{position:"absolute",right:0,top:0,width:"16px",height:"16px",cursor:"nesw-resize",background:"transparent",zIndex:10001}}),a.default.createElement("div",{onPointerDown:e=>kt("bottom-left",e),onPointerMove:bt,onPointerUp:vt,onPointerCancel:vt,style:{position:"absolute",left:0,bottom:0,width:"16px",height:"16px",cursor:"nesw-resize",background:"transparent",zIndex:10001}}),a.default.createElement("div",{onPointerDown:e=>kt("bottom-right",e),onPointerMove:bt,onPointerUp:vt,onPointerCancel:vt,style:{position:"absolute",right:0,bottom:0,width:"16px",height:"16px",cursor:"nwse-resize",background:"transparent",zIndex:10001}})),a.default.createElement("style",null,"\n            @keyframes pulse {\n              0%, 100% { opacity: 1; }\n              50% { opacity: 0.5; }\n            }\n          "))),It&&a.default.createElement("div",{style:{position:"fixed",inset:0,zIndex:1e5,display:"flex",alignItems:"center",justifyContent:"center",padding:"24px",background:"rgba(0,0,0,0.4)",boxSizing:"border-box"}},a.default.createElement("div",{style:{fontFamily:Ct,maxWidth:"400px",width:"100%",padding:"32px 24px",background:"#FFFFFF",borderRadius:"12px",boxShadow:"0 8px 32px rgba(0,0,0,0.2)",textAlign:"center"}},a.default.createElement("div",{style:{fontSize:"48px",marginBottom:"16px"}},"🔒"),a.default.createElement("h2",{style:{fontSize:"20px",fontWeight:700,color:"#1a1a1a",margin:"0 0 8px 0"}},B?"Not authorised":"Sign in required"),a.default.createElement("p",{style:{fontSize:"14px",color:"#666",margin:0,lineHeight:1.5}},Dt),a.default.createElement("p",{style:{fontSize:"13px",color:"#999",marginTop:"16px",marginBottom:0}},"Redirecting to login...")))),a.default.createElement(w,null,zt)};let b=null;const v={showWidget:(e,t)=>{b||(b=document.createElement("div"),document.body.appendChild(b));const n=()=>a.default.createElement(a.default.Fragment,null,a.default.createElement(S,{config:e}));i.default.render(a.default.createElement(n,null),b)},closePopup:()=>{b&&(i.default.unmountComponentAtNode(b),b=null)}};window.BookingSDK=v,e.AppointmentPage=S,e.PIH_APPOINTMENT_WIDGET_CLASS=E,e.default=v,Object.defineProperty(e,"__esModule",{value:!0})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pih-appointment-widget",
-  "version": "0.0.29",
+  "version": "0.0.30",
   "main": "dist/App.js",
   "module": "dist/App.js",
   "exports": {

package/src/components/AppointmentPage.js

@@ -515,6 +515,41 @@ const AppointmentPage = ({ config = {} }) => {
     }
   };
 
+  // Returns true if the current time is within 2 hours after the appointment's scheduled slot time.
+  // Handles date format: "Sun, 15 Mar 2026" and time format: "12:15 PM"
+  const isWithinJoinWindow = (appointment) => {
+    const dateStr = appointment?.date || appointment?.appointmentDate;
+    const timeStr = appointment?.time || appointment?.appointmentTime;
+    if (!dateStr || !timeStr) return false;
+    try {
+      // Parse "12:15 PM" or "9:30 AM" into 24-hour h/m values
+      const ampmMatch = String(timeStr).trim().match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);
+      let h, m;
+      if (ampmMatch) {
+        h = parseInt(ampmMatch[1], 10);
+        m = parseInt(ampmMatch[2], 10);
+        const period = ampmMatch[3].toUpperCase();
+        if (period === "AM" && h === 12) h = 0;
+        if (period === "PM" && h !== 12) h += 12;
+      } else {
+        // Already 24-hour "HH:MM"
+        const parts = String(timeStr).trim().split(":");
+        h = parseInt(parts[0], 10);
+        m = parseInt(parts[1], 10);
+      }
+      if (isNaN(h) || isNaN(m)) return false;
+      // "Sun, 15 Mar 2026 12:15:00" — space-separated; JS parses RFC-like date strings correctly
+      const appointmentDate = new Date(
+        `${dateStr} ${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:00`
+      );
+      if (isNaN(appointmentDate.getTime())) return false;
+      const windowEnd = new Date(appointmentDate.getTime() + 2 * 60 * 60 * 1000);
+      return new Date() <= windowEnd;
+    } catch {
+      return false;
+    }
+  };
+
   // Handle join call — call initiate API to get LiveKit token+url, then open PiP
   const handleJoinCall = async () => {
     if (!selectedAppointment || !appToken) return;
@@ -584,22 +619,6 @@ const AppointmentPage = ({ config = {} }) => {
     fetchAppointments();
   };
 
-  // End call silently when user presses browser back button during an active call.
-  useEffect(() => {
-    if (!showPipVideo) return;
-    window.history.pushState({ pipActive: true }, "");
-    const handlePopState = () => {
-      setShowPipVideo(false);
-      setIsPipMinimized(false);
-      setIsPipFullscreen(false);
-      setCallToken(null);
-      setCallUrl(null);
-      setCallError(null);
-      window.history.back();
-    };
-    window.addEventListener("popstate", handlePopState);
-    return () => window.removeEventListener("popstate", handlePopState);
-  }, [showPipVideo]);
 
   // Handle PiP minimize
   const handleTogglePipSize = () => {
@@ -2090,36 +2109,36 @@ const AppointmentPage = ({ config = {} }) => {
                   </div>
                 </div>
               </div>
-              {/* Join Call only for upcoming appointments */}
-              {activeTab === "upcoming" && (
-              <div style={{ 
-                display: "flex", 
-                flexDirection: isMobile ? "column" : "row",
-                gap: "6px", 
-                marginTop: "10px" 
-              }}>
-                <button
-                  type="button"
-                  onClick={handleJoinCall}
-                  disabled={callLoading}
-                  style={{
-                    flex: 1,
-                    background: callLoading ? "#99e4e8" : "#1CC3CE",
-                    color: "#FFFFFF",
-                    border: "1px solid #1CC3CE",
-                    borderRadius: "6px",
-                    padding: isMobile ? "10px 8px" : "8px 6px",
-                    fontFamily: fontFamily,
-                    fontWeight: 600,
-                    fontSize: isMobile ? "11px" : "12px",
-                    cursor: callLoading ? "not-allowed" : "pointer",
-                  }}
-                >
-                  {callLoading ? "Connecting..." : "Join Call >"}
-                </button>
-              </div>
+              {/* Join Call — upcoming: always shown; completed: only shown within 2 hrs of slot time */}
+              {(activeTab === "upcoming" || (activeTab === "completed" && isWithinJoinWindow(selectedAppointment))) && (
+                <div style={{
+                  display: "flex",
+                  flexDirection: isMobile ? "column" : "row",
+                  gap: "6px",
+                  marginTop: "10px"
+                }}>
+                  <button
+                    type="button"
+                    onClick={!callLoading ? handleJoinCall : undefined}
+                    disabled={callLoading}
+                    style={{
+                      flex: 1,
+                      background: callLoading ? "#99e4e8" : "#1CC3CE",
+                      color: "#FFFFFF",
+                      border: "1px solid #1CC3CE",
+                      borderRadius: "6px",
+                      padding: isMobile ? "10px 8px" : "8px 6px",
+                      fontFamily: fontFamily,
+                      fontWeight: 600,
+                      fontSize: isMobile ? "11px" : "12px",
+                      cursor: callLoading ? "not-allowed" : "pointer",
+                    }}
+                  >
+                    {callLoading ? "Connecting..." : "Join Call >"}
+                  </button>
+                </div>
               )}
-              {activeTab === "upcoming" && callError && (
+              {(activeTab === "upcoming" || activeTab === "completed") && callError && (
                 <div style={{ fontSize: "11px", color: "#e53935", marginTop: "6px", textAlign: "center", width: "100%" }}>
                   ⚠️ {callError}
                 </div>