@e-llm-studio/instant-learning 1.3.1 → 1.3.3

package/dist/cjs/features/LearningManagement/components/StationOnboarding/StationOnboardModal.js

@@ -1,2 +1,995 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),r=require("react/jsx-runtime"),n=require("react"),o=require("@mui/material"),i=require("lucide-react"),t=require("primereact/toast"),s=require("uuid"),a=require("../../apis/scopeApis.js"),l=require("./StationAutocomplete.js"),u=require("../CardSkeleton.js"),d=require("./OnboardingLoader.js"),c=require("./TemplateCard.js"),p=require("../../styles/StationOnboardModal.module.css.js"),g=require("./InputField.js"),x=require("../../store/useAuthStore.js"),f=require("../../store/useConfigStore.js"),h=require("../../store/useLearningTemplateStore.js"),_=require("../../config.js"),m=require("../../store/useAppSecRolesStore.js"),y=require("../../store/useEnvStore.js"),v=require("../../RuleContent/AddScopeApprovalSearchComponent.js"),S=require("../../../IL-marketplace/marketplaceTheme.js"),b=require("./DayToggleSelector.js"),j=[{label:"6am to 7pm",value:"06:00 AM - 7:00 PM"},{label:"5am to 7pm",value:"05:00 AM - 7:00 PM"}],w=[{label:"Low Sellout",value:"Low Sellout"},{label:"High Sellout",value:"High Sellout"},{label:"None",value:""}],C=[{label:"None",value:"None"},{label:"Distribute spots evenly across all breaks in the hour",value:"Distribute spots evenly across all breaks in the hour"}],T=[{label:"Mon",value:"monday"},{label:"Tue",value:"tuesday"},{label:"Wed",value:"wednesday"},{label:"Thu",value:"thursday"},{label:"Fri",value:"friday"},{label:"Sat",value:"saturday"},{label:"Sun",value:"sunday"}];exports.default=function(B){var F,k=B.isOpen,E=B.onClose,D=B.onBoardStation,q=B.app_integration_id,A=B.token,O=S.useILMarketplaceThemeStyles(),I=n.useState(null),L=I[0],R=I[1],z=n.useState([]),M=z[0],N=z[1],W=n.useState(0),P=W[0],G=W[1],K=n.useState(!0),U=K[0],H=K[1],V=n.useState(!1),Y=V[0],X=V[1],J=n.useState([]),Q=J[0],Z=J[1],$=n.useState(""),ee=$[0],re=$[1],ne=n.useState(""),oe=ne[0],ie=ne[1],te=n.useState(!1),se=te[0],ae=te[1],le=n.useState(!1),ue=le[0],de=le[1],ce=n.useState(null),pe=ce[0],ge=ce[1],xe=n.useState(null);xe[0],xe[1];var fe=n.useState(!1),he=fe[0],_e=fe[1],me=n.useState(0),ye=me[0],ve=me[1],Se=n.useState(""),be=Se[0],je=Se[1],we=x.default().user,Ce=n.useRef(null),Te=n.useRef(null),Be=n.useRef(null),Fe=n.useRef(null);f.useConfigStore().configuration;var ke=n.useRef(null),Ee=m.useAppSecRolesStore(function(e){return e.roles}),De=y.default(function(e){return e.rbacConfig}),qe=n.useState("approval_required"),Ae=qe[0],Oe=qe[1],Ie=n.useState([]),Le=Ie[0],Re=Ie[1],ze=n.useState([]),Me=ze[0],Ne=ze[1],We=n.useState(""),Pe=We[0],Ge=We[1],Ke=h.useLearningTemplateStore(function(e){return e.stationNameParam}),Ue=n.useState({region:"",primeTime:["06:00 AM - 7:00 PM"],genre:"Music",type:"",lowSelloutConfig:"",source_days:["wednesday","thursday","friday","saturday"],target_days:["monday","tuesday","wednesday"]}),He=Ue[0],Ve=Ue[1],Ye=function(e,r){return e.find(function(e){return e.value===r})||null},Xe=n.useMemo(function(){return M.map(function(e){return{label:e.scope_name,value:e.scope_name}})},[M]),Je=n.useMemo(function(){var e,r,n;if(!He.genre)return null;var o=M.find(function(e){return e.scope_name===He.genre});return o?{id:o.id,title:o.scope_name||"Unnamed Template",description:(null===(e=o.description)||void 0===e?void 0:e.trim())||"No description available.",inheritedText:(null===(r=o.inheritance)||void 0===r?void 0:r[0])||void 0,rulesCount:o.rules_count||0,tiersCount:o.tier_count||0,isCopy:null!==(n=o.is_copy)&&void 0!==n&&n}:null},[He.genre,M]);n.useEffect(function(){return function(){Be.current&&clearTimeout(Be.current)}},[]);var Qe=function(r){return e.__awaiter(void 0,void 0,void 0,function(){var n,o,i;return e.__generator(this,function(t){switch(t.label){case 0:if(Y)return[2];X(!0),t.label=1;case 1:return t.trys.push([1,3,4,5]),[4,a.retrieveGenreScopes({limit:"20",offset:String(r)})];case 2:return"success"===(null==(n=t.sent())?void 0:n.status)&&Array.isArray(null==n?void 0:n.data)?(o=n.data,N(function(n){if(0===r)return o;var i=new Set(n.map(function(e){return e.id})),t=o.filter(function(e){return!i.has(e.id)});return e.__spreadArray(e.__spreadArray([],n,!0),t,!0)}),o.length<20?H(!1):H(!0),G(r+20)):H(!1),[3,5];case 3:return i=t.sent(),console.error("[StationOnboard] Failed to fetch genre scopes:",i),H(!1),[3,5];case 4:return X(!1),[7];case 5:return[2]}})})};n.useEffect(function(){if(k&&(N([]),G(0),H(!0),Qe(0),Ke)){je(Ke);e.__awaiter(void 0,void 0,void 0,function(){var r,n,o;return e.__generator(this,function(e){switch(e.label){case 0:return e.trys.push([0,2,,3]),[4,a.fetchStationsByKeyword(Ke,!0)];case 1:return!0===(null==(r=e.sent())?void 0:r.success)&&Array.isArray(null==r?void 0:r.data)&&(n=r.data.find(function(e){var r;return(null===(r=e.station_name)||void 0===r?void 0:r.toLowerCase())===Ke.toLowerCase()&&!e.ruleset_id}),n&&R(n)),[3,3];case 2:return o=e.sent(),console.error("[StationOnboard] Error auto-selecting station:",o),[3,3];case 3:return[2]}})})}},[k,Ke]);n.useEffect(function(){Ve(L?function(r){var n;return e.__assign(e.__assign({},r),{region:null!==(n=L.market)&&void 0!==n?n:""})}:{region:"",primeTime:["06:00 AM - 7:00 PM"],genre:"Music",type:"",lowSelloutConfig:"",source_days:["wednesday","thursday","friday","saturday"],target_days:["monday","tuesday","wednesday"]})},[L]),n.useEffect(function(){var e=setTimeout(function(){ie(ee)},500);return function(){return clearTimeout(e)}},[ee]),n.useEffect(function(){e.__awaiter(void 0,void 0,void 0,function(){var r,n,o,i;return e.__generator(this,function(e){switch(e.label){case 0:if(!oe.trim())return Z([]),[2];ae(!0),e.label=1;case 1:return e.trys.push([1,3,4,5]),[4,a.searchScopes({search_string:oe.trim()})];case 2:return"success"===(null==(r=e.sent())?void 0:r.status)&&Array.isArray(null==r?void 0:r.data)?(n=r.data.filter(function(e){var r,n=null!==(r=e.inheritance)&&void 0!==r?r:[],o=n.indexOf(e.scope_name);return!(o<=0)&&n[o-1]===He.genre}),o=n.map(function(e){var r,n,o;return{id:e.id,title:e.scope_name||"Unnamed Template",description:(null===(r=e.description)||void 0===r?void 0:r.trim())||"No description available.",inheritedText:(null===(n=e.inheritance)||void 0===n?void 0:n[0])||void 0,rulesCount:e.rules_count||0,tiersCount:e.tier_count||0,isCopy:null!==(o=e.is_copy)&&void 0!==o&&o}}),Z(o)):Z([]),[3,5];case 3:return i=e.sent(),console.error("[StationOnboard] Error searching scopes:",i),Z([]),[3,5];case 4:return ae(!1),[7];case 5:return[2]}})})},[oe,He.genre]),n.useEffect(function(){!oe.trim()&&Je&&ge(Je.id)},[oe,Je]);var Ze=function(){setTimeout(function(){Fe.current&&Fe.current.scrollTo({top:Fe.current.scrollHeight,behavior:"smooth"})},100)},$e=function(){je(""),R(null),Ve({region:"",primeTime:["06:00 AM - 7:00 PM"],genre:"Music",type:"",lowSelloutConfig:"",source_days:["wednesday","thursday","friday","saturday"],target_days:["monday","tuesday","wednesday"]}),Z([]),re(""),ge(null),Oe("approval_required"),Re([]),Ne([]),Ge(""),E()},er=function(r,n){var o;if("primeTime"!==r)if("source_days"!==r&&"target_days"!==r){var i=null!==(o=null==n?void 0:n.value)&&void 0!==o?o:"";Ve(function(n){var o;return e.__assign(e.__assign({},n),((o={})[r]=String(i),o))}),"genre"===r&&(de(!0),Be.current&&clearTimeout(Be.current),Be.current=setTimeout(function(){var e=M.find(function(e){return e.scope_name===i});ge(e?e.id:null),de(!1)},800))}else Ve(function(o){var i;return e.__assign(e.__assign({},o),((i={})[r]=n,i))});else{var t=(null==n?void 0:n.value)?String(n.value):"";Ve(function(r){return e.__assign(e.__assign({},r),{primeTime:t?[t]:[]})})}},rr=Boolean(L&&He.region&&He.primeTime.length>0&&He.genre);return r.jsxs(o.Dialog,e.__assign({open:k,onClose:$e,maxWidth:!1,disableEscapeKeyDown:!0,PaperProps:{style:O,sx:{width:"90vw",height:"90vh",borderRadius:"12px",display:"flex",flexDirection:"column",overflow:"hidden",fontFamily:"sans-serif"}}},{children:[r.jsx(t.Toast,{ref:Ce}),r.jsxs(o.Box,e.__assign({sx:{p:"20px 20px 20px 27px",borderBottom:"1px solid #F0F2F5",display:"flex",justifyContent:"space-between",alignItems:"center",bgcolor:"#fff"}},{children:[r.jsxs(o.Box,e.__assign({sx:{display:"flex",flexDirection:"column",gap:.5}},{children:[r.jsx(o.Typography,e.__assign({sx:{fontSize:"18px",fontWeight:600,color:"#19213D"}},{children:"Onboard a Station"})),r.jsx(o.Typography,e.__assign({sx:{fontSize:"16px",fontWeight:400,color:"#666F8D"}},{children:"Onboard a station to start configuring learnings."}))]})),r.jsx(o.IconButton,e.__assign({onClick:$e,disabled:he,sx:{color:"#19213D"}},{children:r.jsx(i.X,{size:24})}))]})),r.jsxs(o.DialogContent,e.__assign({sx:{p:0,bgcolor:"#F8FAFC",display:"flex",flexDirection:"row",overflow:"hidden",position:"relative"}},{children:[r.jsx(d.default,{isLoading:he,currentStep:ye,onComplete:function(){_e(!1);var e=Te.current;$e(),D(e||void 0),Te.current=null}}),r.jsx(o.Box,e.__assign({sx:{display:"flex",flex:1,flexDirection:"column",paddingY:"14px",paddingX:"20px",gap:2,overflowY:"auto"}},{children:r.jsxs(o.Box,e.__assign({sx:{display:"flex",gap:3}},{children:[r.jsxs(o.Box,e.__assign({ref:Fe,sx:{flex:1,bgcolor:"#fff",p:3,borderRadius:"16px",border:"1px solid #F0F2F5"}},{children:[r.jsx(o.Typography,e.__assign({sx:{fontSize:"1rem",fontWeight:600,mb:.5,color:"#19213D"}},{children:"Basic Details"})),r.jsx(o.Typography,e.__assign({sx:{fontSize:"0.75rem",color:"#00000080",mb:"20px"}},{children:"Set up basic station details to unlock AI recommended scopes."})),r.jsxs(o.Box,e.__assign({sx:{display:"flex",flexDirection:"column",gap:"16px"}},{children:[r.jsxs(o.Box,e.__assign({className:p.default.formGroup},{children:[r.jsxs("label",e.__assign({className:p.default.label},{children:[r.jsx("span",e.__assign({className:p.default.asterisk},{children:"*"})),"Station Name/Call Letters"]})),r.jsx(l.default,{value:be,onChange:je,onStationSelect:function(e){return R(e)}})]})),r.jsx(g.default,{required:!0,disabled:!0,label:"Region",placeholder:"Select Region",value:He.region||void 0,isSearchable:!1}),r.jsx(g.default,{required:!0,label:"Prime Time Window",placeholder:"Select Prime Time",options:j,value:Ye(j,(null===(F=He.primeTime)||void 0===F?void 0:F[0])||""),onOptionChange:function(e){return er("primeTime",e)},isSearchable:!1}),r.jsx(o.Box,e.__assign({onClick:Ze,sx:{width:"100%"}},{children:r.jsx(g.default,{label:"Station Sellout Type",placeholder:"None",options:w,value:Ye(w,He.type),onOptionChange:function(r){er("type",r),"Low Sellout"!==(null==r?void 0:r.value)&&Ve(function(r){return e.__assign(e.__assign({},r),{lowSelloutConfig:""})})},isSearchable:!1})})),"Low Sellout"===He.type&&r.jsx(o.Box,e.__assign({onClick:Ze,sx:{width:"100%"}},{children:r.jsx(g.default,{label:"Low Sell Out Configurations",placeholder:"Select Configuration",options:C,value:Ye(C,He.lowSelloutConfig),onOptionChange:function(e){return er("lowSelloutConfig",e)},isSearchable:!1})})),r.jsxs(o.Box,e.__assign({onClick:Ze,sx:{width:"100%",display:"flex",flexDirection:"column",gap:"20px"}},{children:[r.jsx(o.Typography,e.__assign({sx:{fontSize:"1rem",fontWeight:600,color:"#19213D"}},{children:"Front-Loading Configuration"})),r.jsx(b.default,{label:"Source Days",subText:"Days from which spots can be front loaded.",options:T,selectedValues:He.source_days,onChange:function(e){return er("source_days",e)}}),r.jsx(b.default,{label:"Target Days",subText:"Days where front loaded spots can be placed.",options:T,selectedValues:He.target_days,onChange:function(e){return er("target_days",e)}})]})),h.useLearningTemplateStore.getState().backwardCompatibility&&r.jsxs("div",e.__assign({ref:ke,style:{display:"flex",flexDirection:"column",marginTop:"12px"}},{children:[r.jsx(o.Typography,e.__assign({sx:{fontSize:"1rem",fontWeight:600,mb:.5,color:"#19213D"}},{children:"Approval Settings"})),r.jsx(o.Typography,e.__assign({sx:{fontSize:"0.75rem",color:"#00000080",mb:"20px"}},{children:"Configure who can approve learnings before they get published."})),r.jsxs("div",e.__assign({style:{marginBottom:"12px",fontSize:"12px",color:"#8F2C23",gap:"16px"}},{children:[r.jsxs("div",e.__assign({style:{marginBottom:"12px",fontSize:"12px",color:"#8F2C23",gap:"12px"}},{children:[r.jsxs("div",e.__assign({role:"radio","aria-checked":"approval_required"===Ae,tabIndex:0,style:{cursor:"pointer",display:"flex",flexDirection:"column",gap:"4px",marginBottom:"8px"},onClick:function(){return Oe("approval_required")},onKeyDown:function(e){"Enter"!==e.key&&" "!==e.key||Oe("approval_required")}},{children:[r.jsxs("div",e.__assign({style:{display:"flex",alignItems:"center",gap:"8px"}},{children:[r.jsx("div",e.__assign({style:{display:"flex",height:"16px",width:"16px",flexShrink:0,alignItems:"center",justifyContent:"center",borderRadius:"50%",border:"2px solid ".concat("approval_required"===Ae?"#2563EB":"#CBD5E1")}},{children:"approval_required"===Ae&&r.jsx("div",{style:{height:"8px",width:"8px",borderRadius:"50%",backgroundColor:"#2563EB"}})})),r.jsx("span",e.__assign({style:{fontSize:"14px",fontWeight:500,color:"#19213D"}},{children:"Approval Required Before Publishing"}))]})),r.jsx("p",e.__assign({style:{margin:0,marginLeft:"24px",fontSize:"12px",color:"#666F8D"}},{children:"Learnings require approval before publishing."}))]})),r.jsxs("div",e.__assign({style:{gap:"16px"}},{children:["approval_required"===Ae&&r.jsx(v.default,{selectedApprovers:Le,selectedGroupOfApprovers:Me,onApproversChange:function(e){Re(e),Ge("")},onGroupsChange:function(e){Ne(e),Ge("")}}),Pe&&r.jsx("p",e.__assign({style:{margin:0,marginLeft:"24px",fontSize:"12px",color:"#8F2C23"}},{children:Pe}))]}))]})),r.jsxs("div",e.__assign({role:"radio","aria-checked":"publish_without"===Ae,tabIndex:0,style:{cursor:"pointer",display:"flex",flexDirection:"column",gap:"4px"},onClick:function(){Oe("publish_without"),Ge("")},onKeyDown:function(e){"Enter"!==e.key&&" "!==e.key||(Oe("publish_without"),Ge(""))}},{children:[r.jsxs("div",e.__assign({style:{display:"flex",alignItems:"center",gap:"8px"}},{children:[r.jsx("div",e.__assign({style:{display:"flex",height:"16px",width:"16px",flexShrink:0,alignItems:"center",justifyContent:"center",borderRadius:"50%",border:"2px solid ".concat("publish_without"===Ae?"#2563EB":"#CBD5E1")}},{children:"publish_without"===Ae&&r.jsx("div",{style:{height:"8px",width:"8px",borderRadius:"50%",backgroundColor:"#2563EB"}})})),r.jsx("span",e.__assign({style:{fontSize:"14px",fontWeight:500,color:"#19213D"}},{children:"Publish Without Approval"}))]})),r.jsx("p",e.__assign({style:{margin:0,marginLeft:"24px",fontSize:"12px",color:"#666F8D"}},{children:"Learnings can be published directly."}))]}))]}))]}))]}))]})),r.jsxs(o.Box,e.__assign({sx:{flex:1,bgcolor:"#fff",p:3,borderRadius:"12px",border:"1px solid #F0F2F5",display:"flex",flexDirection:"column"}},{children:[r.jsxs(o.Typography,e.__assign({sx:{fontSize:"1rem",fontWeight:600,mb:.5,color:"#19213D"}},{children:[r.jsx("span",e.__assign({style:{color:"#E53E3E",marginRight:"2px"}},{children:"*"})),"Select a scope for your station"]})),r.jsx(o.Typography,e.__assign({sx:{fontSize:"0.75rem",color:"#64748B",mb:"16px"}},{children:"Your station will inherit the rules from the selected scope."})),r.jsx(o.Box,e.__assign({sx:{mb:2}},{children:r.jsx(g.default,{required:!0,label:"",placeholder:"Select Genre",options:Xe,value:Ye(Xe,He.genre),onOptionChange:function(e){return er("genre",e)},isSearchable:!1,onMenuScrollToBottom:function(){!Y&&U&&Qe(P)},isLoadingOptions:Y,hasMoreOptions:U})})),r.jsx(o.Box,e.__assign({sx:{mb:3}},{children:ue?r.jsx(u.default,{}):Je?r.jsxs(o.Box,e.__assign({sx:{border:"1.5px solid #2563EB",borderRadius:"10px",p:"14px 16px",bgcolor:"#EFF6FF",display:"flex",alignItems:"flex-start",gap:"12px"}},{children:[r.jsx(o.Box,e.__assign({sx:{width:36,height:36,borderRadius:"8px",bgcolor:"#DBEAFE",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}},{children:r.jsxs("svg",e.__assign({width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"#2563EB",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},{children:[r.jsx("circle",{cx:"12",cy:"12",r:"2"}),r.jsx("path",{d:"M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"})]}))})),r.jsxs(o.Box,e.__assign({sx:{flex:1,minWidth:0}},{children:[r.jsx(o.Typography,e.__assign({sx:{fontSize:"0.875rem",fontWeight:600,color:"#1E3A5F",mb:"2px"}},{children:Je.title})),r.jsx(o.Typography,e.__assign({sx:{fontSize:"0.75rem",color:"#2563EB",mb:"8px"}},{children:Je.description})),r.jsxs(o.Box,e.__assign({sx:{display:"flex",alignItems:"center",gap:"8px",flexWrap:"wrap"}},{children:[Je.inheritedText&&r.jsxs(o.Box,e.__assign({component:"span",sx:{fontSize:"0.7rem",color:"#475569",bgcolor:"#F1F5F9",border:"1px solid #E2E8F0",borderRadius:"4px",px:"6px",py:"2px",display:"inline-flex",alignItems:"center",gap:"4px"}},{children:[r.jsxs("svg",e.__assign({width:"11",height:"11",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},{children:[r.jsx("polyline",{points:"15 3 21 3 21 9"}),r.jsx("path",{d:"M21 3L9 15"}),r.jsx("path",{d:"M3 21l6-6"})]})),Je.inheritedText]})),r.jsxs(o.Box,e.__assign({component:"span",sx:{fontSize:"0.7rem",color:"#475569",bgcolor:"#F1F5F9",border:"1px solid #E2E8F0",borderRadius:"4px",px:"6px",py:"2px"}},{children:[Je.rulesCount," rules"]})),r.jsxs(o.Box,e.__assign({component:"span",sx:{fontSize:"0.7rem",color:"#475569",bgcolor:"#F1F5F9",border:"1px solid #E2E8F0",borderRadius:"4px",px:"6px",py:"2px"}},{children:[Je.tiersCount," Tiers"]}))]}))]}))]})):He.genre?null:r.jsx(o.Box,e.__assign({sx:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",opacity:.4,py:6,gap:1}},{children:r.jsx(o.Typography,e.__assign({sx:{fontSize:"0.75rem",color:"#94A3B8"}},{children:"Select a genre to load the matching scope"}))}))})),He.genre&&r.jsxs(r.Fragment,{children:[r.jsxs(o.Typography,e.__assign({sx:{fontSize:"1rem",fontWeight:600,mb:.5,color:"#19213D"}},{children:["Select an Existing Station from the “",He.genre,"” Scope"," ",r.jsx(o.Typography,e.__assign({component:"span",sx:{fontSize:"1rem",fontWeight:400,color:"#64748B"}},{children:"(Optional)"}))]})),r.jsxs(o.Typography,e.__assign({sx:{fontSize:"0.75rem",color:"#64748B",mb:"12px"}},{children:["Please select an existing station under the “",He.genre,"” category to copy its learnings."]})),r.jsxs("div",e.__assign({className:p.default.searchWrapper,style:{marginBottom:"12px"}},{children:[r.jsx("input",{type:"text",value:ee,onChange:function(e){return re(e.target.value)},placeholder:"Search for station...",className:p.default.searchInput}),r.jsx(i.Search,{className:p.default.searchIcon,size:16})]})),r.jsxs(o.Box,e.__assign({sx:{display:"flex",flexDirection:"column",gap:2}},{children:[se&&r.jsx(u.default,{}),!se&&0===Q.length&&oe.trim()&&r.jsxs(o.Typography,e.__assign({sx:{fontSize:"0.875rem",color:"#64748B",textAlign:"center",py:4}},{children:['No scopes found matching "',oe,'".']})),!se&&Q.map(function(n){return r.jsx(c.default,e.__assign({},n,{isSelected:pe===n.id,onSelect:function(e){var r;ge(pe===e?null!==(r=null==Je?void 0:Je.id)&&void 0!==r?r:null:e)}}),n.id)})]}))]})]}))]}))}))]})),r.jsxs(o.Box,e.__assign({sx:{p:"12px 20px",borderTop:"1px solid #F0F2F5",display:"flex",justifyContent:"flex-end",gap:2,bgcolor:"#fff"}},{children:[r.jsx("button",e.__assign({onClick:$e,disabled:he,style:{padding:"7px 10px",borderRadius:"6px",color:"#64748B",border:"1px solid #E2E8F0",backgroundColor:"#fff",cursor:"pointer",fontSize:"14px",fontWeight:500}},{children:"Cancel"})),r.jsx("button",e.__assign({onClick:function(){return e.__awaiter(void 0,void 0,void 0,function(){var r,n,o,i,t,l,u,d,c,p,g,x,f,m,y,v,S,b,j;return e.__generator(this,function(w){switch(w.label){case 0:if(!L||!pe)return console.error("[StationOnboard] Missing required data for onboarding"),[2];if(h.useLearningTemplateStore.getState().backwardCompatibility&&"approval_required"===Ae&&0===Le.length&&0===Me.length)return Ge("Please select at least one approver or approver group."),setTimeout(function(){var e;null===(e=ke.current)||void 0===e||e.scrollIntoView({behavior:"smooth",block:"center"})},50),[2];Ge(""),r=Je?e.__spreadArray([Je],Q,!0):Q,n=r.find(function(e){return e.id===pe}),null==n?void 0:n.isCopy,_e(!0),ve(0),o=null,w.label=1;case 1:return w.trys.push([1,3,,4]),i=h.useLearningTemplateStore.getState().backwardCompatibility,t=i?{topic:"customRuleSet",customScopeGroupName:_.IL_CONFIG_CONSTANTS.CUSTOM_SCOPE_GROUP_NAME,scopeDescription:L.station_name||"New Station",parentScopeId:null!==(g=null==Je?void 0:Je.id)&&void 0!==g?g:null,customScopeName:L.station_name||"New Station",customScopeId:s.v4(),createByName:(null==we?void 0:we.firstname)||"System",createdBy:(null==we?void 0:we.email)||"system@audacy.com",scopeType:"Station",approvalRequired:"approval_required"===Ae,audacyStationMetadata:{genre:He.genre,low_sellout_configurations:"Low Sellout"===He.type?He.lowSelloutConfig:null,market:L.market,primetime_windows:He.primeTime,region:L.region,station_guid:L.station_guid,station_type:""===He.type?null:He.type,source_days:He.source_days,target_days:He.target_days},appsecData:{application:null==De?void 0:De.applicationId,module:null==De?void 0:De.moduleId,roles:e.__spreadArray(e.__spreadArray([],"approval_required"===Ae?[{users:Le.map(function(e){return e.email}),groups:Me.map(function(e){return e._id}),role:null!==(f=null===(x=Ee.find(function(e){return"Learning Manager"===e.name}))||void 0===x?void 0:x._id)&&void 0!==f?f:""}]:[],!0),[{users:[null==we?void 0:we.email],groups:[],role:null!==(y=null===(m=Ee.find(function(e){return"Instant Learning Admin"===e.name}))||void 0===m?void 0:m._id)&&void 0!==y?y:""}],!1)}}:{topic:"customRuleSet",scope_reference_id:null,scopeDescription:"demo",parentScopeId:null,scopeName:L.station_name||"New Station",scopeReferenceMetadata:{},applicationMappingId:q},console.log("[StationOnboard] Step 1: Creating rule set with payload:",t),[4,a.createRuleSet(t,A)];case 2:if(l=w.sent(),!(o=null===(v=null==l?void 0:l.data)||void 0===v?void 0:v.scopeId))throw new Error("Failed to create scope - no scopeId returned");return console.log("[StationOnboard] Step 1 Complete: Created scope with ID:",o),ve(1),[3,4];case 3:return u=w.sent(),console.error("[StationOnboard] Error creating rule set:",u),null===(S=Ce.current)||void 0===S||S.show({severity:"error",life:3e3,summary:"Error",detail:"Failed to create rule set. Please try again."}),_e(!1),ve(0),[2];case 4:return w.trys.push([4,6,,7]),d=null!==pe&&pe!==(null==Je?void 0:Je.id),c={source_scope_id:d?pe:null!==(b=null==Je?void 0:Je.id)&&void 0!==b?b:pe,target_scope_id:o,is_copy_parent_variant_id:d},console.log("[StationOnboard] Step 3: Inheriting scope with payload:",c),[4,a.inheritScopeBackwardCompatible(c)];case 5:return w.sent(),console.log("[StationOnboard] Step 3 Complete: Scope inherited"),ve(3),[3,7];case 6:return p=w.sent(),console.error("[StationOnboard] Error inheriting scope (no rollback):",p),null===(j=Ce.current)||void 0===j||j.show({severity:"error",life:3e3,summary:"Error",detail:"Failed to apply rule template. Please try again."}),_e(!1),ve(0),[2];case 7:return Te.current=o,console.log("[StationOnboard] Onboarding completed successfully!"),[2]}})})},disabled:!rr||he,style:{padding:"7px 10px",borderRadius:"6px",border:"none",backgroundColor:rr?"#2563EB":"#BFDBFE",color:"#fff",cursor:rr&&!he?"pointer":"not-allowed",fontSize:"14px",fontWeight:500,display:"flex",alignItems:"center",gap:"7px"}},{children:he?r.jsxs(r.Fragment,{children:[r.jsx(o.CircularProgress,{size:16,color:"inherit"}),r.jsx("span",{children:"Onboarding..."})]}):r.jsxs(r.Fragment,{children:[r.jsx("span",{children:"Onboard Station"}),r.jsx(i.ArrowRight,{size:16})]})}))]}))]}))};
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var material = require('@mui/material');
+var lucideReact = require('lucide-react');
+var toast = require('primereact/toast');
+var uuid = require('uuid');
+var scopeApis = require('../../apis/scopeApis.js');
+var StationAutocomplete = require('./StationAutocomplete.js');
+var CardSkeleton = require('../CardSkeleton.js');
+var OnboardingLoader = require('./OnboardingLoader.js');
+var TemplateCard = require('./TemplateCard.js');
+var StationOnboardModal_module = require('../../styles/StationOnboardModal.module.css.js');
+var InputField = require('./InputField.js');
+var useAuthStore = require('../../store/useAuthStore.js');
+var useConfigStore = require('../../store/useConfigStore.js');
+var useLearningTemplateStore = require('../../store/useLearningTemplateStore.js');
+var config = require('../../config.js');
+var useAppSecRolesStore = require('../../store/useAppSecRolesStore.js');
+var useEnvStore = require('../../store/useEnvStore.js');
+var AddScopeApprovalSearchComponent = require('../../RuleContent/AddScopeApprovalSearchComponent.js');
+var marketplaceTheme = require('../../../IL-marketplace/marketplaceTheme.js');
+var DayToggleSelector = require('./DayToggleSelector.js');
+
+const DAY_PART_OPTIONS = [
+  { label: "6am to 7pm", value: "06:00 AM - 7:00 PM" },
+  { label: "5am to 7pm", value: "05:00 AM - 7:00 PM" }
+];
+const STATION_TYPE_OPTIONS = [
+  { label: "Low Sellout", value: "Low Sellout" },
+  { label: "High Sellout", value: "High Sellout" },
+  { label: "None", value: "" }
+];
+const LOW_SELLOUT_CONFIG_OPTIONS = [
+  { label: "None", value: "None" },
+  { label: "Distribute spots evenly across all breaks in the hour", value: "Distribute spots evenly across all breaks in the hour" }
+];
+const DaysOptions = [
+  { label: "Mon", value: "monday" },
+  { label: "Tue", value: "tuesday" },
+  { label: "Wed", value: "wednesday" },
+  { label: "Thu", value: "thursday" },
+  { label: "Fri", value: "friday" },
+  { label: "Sat", value: "saturday" },
+  { label: "Sun", value: "sunday" }
+];
+const StationOnboardModal = ({
+  isOpen,
+  onClose,
+  onBoardStation,
+  app_integration_id,
+  token
+}) => {
+  var _a;
+  const themeStyles = marketplaceTheme.useILMarketplaceThemeStyles();
+  const [selectedStation, setSelectedStation] = React.useState(null);
+  const [genreScopeOptions, setGenreScopeOptions] = React.useState([]);
+  const [genreOffset, setGenreOffset] = React.useState(0);
+  const [hasMoreGenres, setHasMoreGenres] = React.useState(true);
+  const [isFetchingGenres, setIsFetchingGenres] = React.useState(false);
+  const [otherScopes, setOtherScopes] = React.useState([]);
+  const [scopeSearchText, setScopeSearchText] = React.useState("");
+  const [debouncedScopeSearchText, setDebouncedScopeSearchText] = React.useState("");
+  const [isSearchingScopes, setIsSearchingScopes] = React.useState(false);
+  const [isSimulatingTopScopeLoad, setIsSimulatingTopScopeLoad] = React.useState(false);
+  const [selectedTemplateId, setSelectedTemplateId] = React.useState(null);
+  React.useState(null);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [onboardingStep, setOnboardingStep] = React.useState(0);
+  const [stationSearchText, setStationSearchText] = React.useState("");
+  const { user } = useAuthStore["default"]();
+  const toast$1 = React.useRef(null);
+  const newScopeIdRef = React.useRef(null);
+  const topScopeTimerRef = React.useRef(null);
+  const leftPanelRef = React.useRef(null);
+  useConfigStore.useConfigStore();
+  const approvalPanelRef = React.useRef(null);
+  const roles = useAppSecRolesStore.useAppSecRolesStore((state) => state.roles);
+  const rbacConfig = useEnvStore["default"]((state) => state.rbacConfig);
+  const [approvalSetting, setApprovalSetting] = React.useState("approval_required");
+  const [selectedApprovers, setSelectedApprovers] = React.useState([]);
+  const [selectedGroupOfApprovers, setSelectedGroupOfApprovers] = React.useState([]);
+  const [approvalError, setApprovalError] = React.useState("");
+  const stationNameParam = useLearningTemplateStore.useLearningTemplateStore((state) => state.stationNameParam);
+  const [details, setDetails] = React.useState({
+    region: "",
+    // timezone: '',
+    primeTime: ["06:00 AM - 7:00 PM"],
+    genre: "Music",
+    type: "",
+    // description: '',
+    lowSelloutConfig: "",
+    source_days: ["wednesday", "thursday", "friday", "saturday"],
+    target_days: ["monday", "tuesday", "wednesday"]
+  });
+  const getOptionFromValue = (options, value) => options.find((opt) => opt.value === value) || null;
+  const genreSelectOptions = React.useMemo(() => {
+    return genreScopeOptions.map((scope) => ({
+      label: scope.scope_name,
+      value: scope.scope_name
+    }));
+  }, [genreScopeOptions]);
+  const mappedTopScope = React.useMemo(() => {
+    var _a2, _b, _c;
+    if (!details.genre) return null;
+    const selectedScope = genreScopeOptions.find((s) => s.scope_name === details.genre);
+    if (!selectedScope) return null;
+    return {
+      id: selectedScope.id,
+      title: selectedScope.scope_name || "Unnamed Template",
+      // badge: selectedScope.recommendation_type || 'AI Recommendation',
+      description: ((_a2 = selectedScope.description) == null ? void 0 : _a2.trim()) || "No description available.",
+      inheritedText: ((_b = selectedScope.inheritance) == null ? void 0 : _b[0]) || void 0,
+      rulesCount: selectedScope.rules_count || 0,
+      tiersCount: selectedScope.tier_count || 0,
+      isCopy: (_c = selectedScope.is_copy) != null ? _c : false
+    };
+  }, [details.genre, genreScopeOptions]);
+  React.useEffect(() => {
+    return () => {
+      if (topScopeTimerRef.current) {
+        clearTimeout(topScopeTimerRef.current);
+      }
+    };
+  }, []);
+  const fetchGenres = async (offsetToFetch) => {
+    if (isFetchingGenres) return;
+    setIsFetchingGenres(true);
+    try {
+      const response = await scopeApis.retrieveGenreScopes({ limit: "20", offset: String(offsetToFetch) });
+      if ((response == null ? void 0 : response.status) === "success" && Array.isArray(response == null ? void 0 : response.data)) {
+        const newData = response.data;
+        setGenreScopeOptions((prev) => {
+          if (offsetToFetch === 0) return newData;
+          const existingIds = new Set(prev.map((p) => p.id));
+          const uniqueNew = newData.filter((n) => !existingIds.has(n.id));
+          return [...prev, ...uniqueNew];
+        });
+        if (newData.length < 20) {
+          setHasMoreGenres(false);
+        } else {
+          setHasMoreGenres(true);
+        }
+        setGenreOffset(offsetToFetch + 20);
+      } else {
+        setHasMoreGenres(false);
+      }
+    } catch (error) {
+      console.error("[StationOnboard] Failed to fetch genre scopes:", error);
+      setHasMoreGenres(false);
+    } finally {
+      setIsFetchingGenres(false);
+    }
+  };
+  React.useEffect(() => {
+    if (isOpen) {
+      setGenreScopeOptions([]);
+      setGenreOffset(0);
+      setHasMoreGenres(true);
+      fetchGenres(0);
+      if (stationNameParam) {
+        setStationSearchText(stationNameParam);
+        const autoSelectStation = async () => {
+          try {
+            const response = await scopeApis.fetchStationsByKeyword(stationNameParam, true);
+            if ((response == null ? void 0 : response.success) === true && Array.isArray(response == null ? void 0 : response.data)) {
+              const match = response.data.find(
+                (station) => {
+                  var _a2;
+                  return ((_a2 = station.station_name) == null ? void 0 : _a2.toLowerCase()) === stationNameParam.toLowerCase() && !station.ruleset_id;
+                }
+              );
+              if (match) {
+                setSelectedStation(match);
+              }
+            }
+          } catch (error) {
+            console.error("[StationOnboard] Error auto-selecting station:", error);
+          }
+        };
+        autoSelectStation();
+      }
+    }
+  }, [isOpen, stationNameParam]);
+  const loadMoreGenres = () => {
+    if (!isFetchingGenres && hasMoreGenres) {
+      fetchGenres(genreOffset);
+    }
+  };
+  React.useEffect(() => {
+    if (selectedStation) {
+      setDetails((prev) => {
+        var _a2;
+        return {
+          ...prev,
+          region: (_a2 = selectedStation.market) != null ? _a2 : ""
+        };
+      });
+    } else {
+      setDetails({ region: "", primeTime: ["06:00 AM - 7:00 PM"], genre: "Music", type: "", lowSelloutConfig: "", source_days: ["wednesday", "thursday", "friday", "saturday"], target_days: ["monday", "tuesday", "wednesday"] });
+    }
+  }, [selectedStation]);
+  React.useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedScopeSearchText(scopeSearchText);
+    }, 500);
+    return () => clearTimeout(handler);
+  }, [scopeSearchText]);
+  React.useEffect(() => {
+    const fetchSearchedScopes = async () => {
+      if (!debouncedScopeSearchText.trim()) {
+        setOtherScopes([]);
+        return;
+      }
+      setIsSearchingScopes(true);
+      try {
+        const response = await scopeApis.searchScopes({ search_string: debouncedScopeSearchText.trim() });
+        if ((response == null ? void 0 : response.status) === "success" && Array.isArray(response == null ? void 0 : response.data)) {
+          const filteredData = response.data.filter((item) => {
+            var _a2;
+            const inheritance = (_a2 = item.inheritance) != null ? _a2 : [];
+            const scopeNameIndex = inheritance.indexOf(item.scope_name);
+            if (scopeNameIndex <= 0) return false;
+            return inheritance[scopeNameIndex - 1] === details.genre;
+          });
+          const mappedScopes = filteredData.map((item) => {
+            var _a2, _b, _c;
+            return {
+              id: item.id,
+              title: item.scope_name || "Unnamed Template",
+              description: ((_a2 = item.description) == null ? void 0 : _a2.trim()) || "No description available.",
+              inheritedText: ((_b = item.inheritance) == null ? void 0 : _b[0]) || void 0,
+              rulesCount: item.rules_count || 0,
+              tiersCount: item.tier_count || 0,
+              isCopy: (_c = item.is_copy) != null ? _c : false
+            };
+          });
+          setOtherScopes(mappedScopes);
+        } else {
+          setOtherScopes([]);
+        }
+      } catch (error) {
+        console.error("[StationOnboard] Error searching scopes:", error);
+        setOtherScopes([]);
+      } finally {
+        setIsSearchingScopes(false);
+      }
+    };
+    fetchSearchedScopes();
+  }, [debouncedScopeSearchText, details.genre]);
+  React.useEffect(() => {
+    if (!debouncedScopeSearchText.trim() && mappedTopScope) {
+      setSelectedTemplateId(mappedTopScope.id);
+    }
+  }, [debouncedScopeSearchText, mappedTopScope]);
+  const handleScrollToBottom = () => {
+    setTimeout(() => {
+      if (leftPanelRef.current) {
+        leftPanelRef.current.scrollTo({
+          top: leftPanelRef.current.scrollHeight,
+          behavior: "smooth"
+        });
+      }
+    }, 100);
+  };
+  const handleClose = () => {
+    setStationSearchText("");
+    setSelectedStation(null);
+    setDetails({
+      region: "",
+      // timezone: '',
+      primeTime: ["06:00 AM - 7:00 PM"],
+      genre: "Music",
+      type: "",
+      // description: '',
+      lowSelloutConfig: "",
+      source_days: ["wednesday", "thursday", "friday", "saturday"],
+      target_days: ["monday", "tuesday", "wednesday"]
+    });
+    setOtherScopes([]);
+    setScopeSearchText("");
+    setSelectedTemplateId(null);
+    setApprovalSetting("approval_required");
+    setSelectedApprovers([]);
+    setSelectedGroupOfApprovers([]);
+    setApprovalError("");
+    onClose();
+  };
+  const handleOnboard = async () => {
+    var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    if (!selectedStation || !selectedTemplateId) {
+      console.error("[StationOnboard] Missing required data for onboarding");
+      return;
+    }
+    const backwardCompatibilityCheck = useLearningTemplateStore.useLearningTemplateStore.getState().backwardCompatibility;
+    if (backwardCompatibilityCheck && approvalSetting === "approval_required" && selectedApprovers.length === 0 && selectedGroupOfApprovers.length === 0) {
+      setApprovalError("Please select at least one approver or approver group.");
+      setTimeout(() => {
+        var _a3;
+        (_a3 = approvalPanelRef.current) == null ? void 0 : _a3.scrollIntoView({ behavior: "smooth", block: "center" });
+      }, 50);
+      return;
+    }
+    setApprovalError("");
+    const availableScopes = mappedTopScope ? [mappedTopScope, ...otherScopes] : otherScopes;
+    const selectedScopeObj = availableScopes.find((s) => s.id === selectedTemplateId);
+    (_a2 = selectedScopeObj == null ? void 0 : selectedScopeObj.isCopy) != null ? _a2 : false;
+    setIsLoading(true);
+    setOnboardingStep(0);
+    let newScopeId = null;
+    try {
+      const backwardCompatibility = useLearningTemplateStore.useLearningTemplateStore.getState().backwardCompatibility;
+      const createRuleSetPayload = backwardCompatibility ? {
+        // Legacy Payload
+        topic: "customRuleSet",
+        customScopeGroupName: config.IL_CONFIG_CONSTANTS.CUSTOM_SCOPE_GROUP_NAME,
+        scopeDescription: selectedStation.station_name || "New Station",
+        parentScopeId: (_b = mappedTopScope == null ? void 0 : mappedTopScope.id) != null ? _b : null,
+        customScopeName: selectedStation.station_name || "New Station",
+        customScopeId: uuid.v4(),
+        createByName: (user == null ? void 0 : user.firstname) || "System",
+        createdBy: (user == null ? void 0 : user.email) || "system@audacy.com",
+        scopeType: "Station",
+        approvalRequired: approvalSetting === "approval_required",
+        audacyStationMetadata: {
+          genre: details.genre,
+          low_sellout_configurations: details.type === "Low Sellout" ? details.lowSelloutConfig : null,
+          market: selectedStation.market,
+          primetime_windows: details.primeTime,
+          region: selectedStation.region,
+          station_guid: selectedStation.station_guid,
+          station_type: details.type === "" ? null : details.type,
+          source_days: details.source_days,
+          target_days: details.target_days
+        },
+        appsecData: {
+          application: rbacConfig == null ? void 0 : rbacConfig.applicationId,
+          module: rbacConfig == null ? void 0 : rbacConfig.moduleId,
+          roles: [
+            ...approvalSetting === "approval_required" ? [{
+              users: selectedApprovers.map((a) => a.email),
+              groups: selectedGroupOfApprovers.map((g) => g._id),
+              role: (_d = (_c = roles.find((r) => r.name === "Learning Manager")) == null ? void 0 : _c._id) != null ? _d : ""
+            }] : [],
+            {
+              users: [user == null ? void 0 : user.email],
+              groups: [],
+              role: (_f = (_e = roles.find((r) => r.name === "Instant Learning Admin")) == null ? void 0 : _e._id) != null ? _f : ""
+            }
+          ]
+        }
+      } : {
+        topic: "customRuleSet",
+        scope_reference_id: null,
+        scopeDescription: "demo",
+        parentScopeId: null,
+        scopeName: selectedStation.station_name || "New Station",
+        scopeReferenceMetadata: {},
+        applicationMappingId: app_integration_id
+      };
+      console.log("[StationOnboard] Step 1: Creating rule set with payload:", createRuleSetPayload);
+      const createResponse = await scopeApis.createRuleSet(createRuleSetPayload, token);
+      newScopeId = (_g = createResponse == null ? void 0 : createResponse.data) == null ? void 0 : _g.scopeId;
+      if (!newScopeId) {
+        throw new Error("Failed to create scope - no scopeId returned");
+      }
+      console.log("[StationOnboard] Step 1 Complete: Created scope with ID:", newScopeId);
+      setOnboardingStep(1);
+    } catch (error) {
+      console.error("[StationOnboard] Error creating rule set:", error);
+      (_h = toast$1.current) == null ? void 0 : _h.show({
+        severity: "error",
+        life: 3e3,
+        summary: "Error",
+        detail: "Failed to create rule set. Please try again."
+      });
+      setIsLoading(false);
+      setOnboardingStep(0);
+      return;
+    }
+    try {
+      const existingStationSelected = selectedTemplateId !== null && selectedTemplateId !== (mappedTopScope == null ? void 0 : mappedTopScope.id);
+      const inheritScopePayload = {
+        source_scope_id: existingStationSelected ? selectedTemplateId : (_i = mappedTopScope == null ? void 0 : mappedTopScope.id) != null ? _i : selectedTemplateId,
+        target_scope_id: newScopeId,
+        is_copy_parent_variant_id: existingStationSelected
+      };
+      console.log("[StationOnboard] Step 3: Inheriting scope with payload:", inheritScopePayload);
+      await scopeApis.inheritScopeBackwardCompatible(inheritScopePayload);
+      console.log("[StationOnboard] Step 3 Complete: Scope inherited");
+      setOnboardingStep(3);
+    } catch (error) {
+      console.error("[StationOnboard] Error inheriting scope (no rollback):", error);
+      (_j = toast$1.current) == null ? void 0 : _j.show({
+        severity: "error",
+        life: 3e3,
+        summary: "Error",
+        detail: "Failed to apply rule template. Please try again."
+      });
+      setIsLoading(false);
+      setOnboardingStep(0);
+      return;
+    }
+    newScopeIdRef.current = newScopeId;
+    console.log("[StationOnboard] Onboarding completed successfully!");
+  };
+  const handleLoaderComplete = () => {
+    setIsLoading(false);
+    const scopeId = newScopeIdRef.current;
+    handleClose();
+    onBoardStation(scopeId || void 0);
+    newScopeIdRef.current = null;
+  };
+  const updateDetail = (field, val) => {
+    var _a2;
+    if (field === "primeTime") {
+      const stringVal = (val == null ? void 0 : val.value) ? String(val.value) : "";
+      setDetails((prev) => ({ ...prev, primeTime: stringVal ? [stringVal] : [] }));
+      return;
+    }
+    if (field === "source_days" || field === "target_days") {
+      setDetails((prev) => ({ ...prev, [field]: val }));
+      return;
+    }
+    const value = (_a2 = val == null ? void 0 : val.value) != null ? _a2 : "";
+    setDetails((prev) => ({ ...prev, [field]: String(value) }));
+    if (field === "genre") {
+      setIsSimulatingTopScopeLoad(true);
+      if (topScopeTimerRef.current) {
+        clearTimeout(topScopeTimerRef.current);
+      }
+      topScopeTimerRef.current = setTimeout(() => {
+        const selectedScope = genreScopeOptions.find((s) => s.scope_name === value);
+        if (selectedScope) {
+          setSelectedTemplateId(selectedScope.id);
+        } else {
+          setSelectedTemplateId(null);
+        }
+        setIsSimulatingTopScopeLoad(false);
+      }, 800);
+    }
+  };
+  const isFormValid = Boolean(
+    selectedStation && details.region && // details.timezone &&
+    details.primeTime.length > 0 && details.genre
+    // details.description?.trim().length > 0,
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Dialog,
+    {
+      open: isOpen,
+      onClose: handleClose,
+      maxWidth: false,
+      disableEscapeKeyDown: true,
+      PaperProps: {
+        style: themeStyles,
+        sx: {
+          width: "90vw",
+          height: "90vh",
+          borderRadius: "12px",
+          display: "flex",
+          flexDirection: "column",
+          overflow: "hidden",
+          fontFamily: "sans-serif"
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(toast.Toast, { ref: toast$1 }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          material.Box,
+          {
+            sx: {
+              p: "20px 20px 20px 27px",
+              borderBottom: "1px solid #F0F2F5",
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              bgcolor: "#fff"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", flexDirection: "column", gap: 0.5 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { fontSize: "18px", fontWeight: 600, color: "#19213D" }, children: "Onboard a Station" }),
+                /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { fontSize: "16px", fontWeight: 400, color: "#666F8D" }, children: "Onboard a station to start configuring learnings." })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { onClick: handleClose, disabled: isLoading, sx: { color: "#19213D" }, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 24 }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          material.DialogContent,
+          {
+            sx: {
+              p: 0,
+              bgcolor: "#F8FAFC",
+              display: "flex",
+              flexDirection: "row",
+              overflow: "hidden",
+              position: "relative"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                OnboardingLoader["default"],
+                {
+                  isLoading,
+                  currentStep: onboardingStep,
+                  onComplete: handleLoaderComplete
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                material.Box,
+                {
+                  sx: {
+                    display: "flex",
+                    flex: 1,
+                    flexDirection: "column",
+                    paddingY: "14px",
+                    paddingX: "20px",
+                    gap: 2,
+                    overflowY: "auto"
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", gap: 3 }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      material.Box,
+                      {
+                        ref: leftPanelRef,
+                        sx: {
+                          flex: 1,
+                          bgcolor: "#fff",
+                          p: 3,
+                          borderRadius: "16px",
+                          border: "1px solid #F0F2F5"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { fontSize: "1rem", fontWeight: 600, mb: 0.5, color: "#19213D" }, children: "Basic Details" }),
+                          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { fontSize: "0.75rem", color: "#00000080", mb: "20px" }, children: "Set up basic station details to unlock AI recommended scopes." }),
+                          /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+                            /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { className: StationOnboardModal_module["default"].formGroup, children: [
+                              /* @__PURE__ */ jsxRuntime.jsxs("label", { className: StationOnboardModal_module["default"].label, children: [
+                                /* @__PURE__ */ jsxRuntime.jsx("span", { className: StationOnboardModal_module["default"].asterisk, children: "*" }),
+                                "Station Name/Call Letters"
+                              ] }),
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                StationAutocomplete["default"],
+                                {
+                                  value: stationSearchText,
+                                  onChange: setStationSearchText,
+                                  onStationSelect: (station) => setSelectedStation(station)
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              InputField["default"],
+                              {
+                                required: true,
+                                disabled: true,
+                                label: "Region",
+                                placeholder: "Select Region",
+                                value: details.region || void 0,
+                                isSearchable: false
+                              }
+                            ),
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              InputField["default"],
+                              {
+                                required: true,
+                                label: "Prime Time Window",
+                                placeholder: "Select Prime Time",
+                                options: DAY_PART_OPTIONS,
+                                value: getOptionFromValue(DAY_PART_OPTIONS, ((_a = details.primeTime) == null ? void 0 : _a[0]) || ""),
+                                onOptionChange: (val) => updateDetail("primeTime", val),
+                                isSearchable: false
+                              }
+                            ),
+                            /* @__PURE__ */ jsxRuntime.jsx(material.Box, { onClick: handleScrollToBottom, sx: { width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                              InputField["default"],
+                              {
+                                label: "Station Sellout Type",
+                                placeholder: "None",
+                                options: STATION_TYPE_OPTIONS,
+                                value: getOptionFromValue(STATION_TYPE_OPTIONS, details.type),
+                                onOptionChange: (val) => {
+                                  updateDetail("type", val);
+                                  if ((val == null ? void 0 : val.value) !== "Low Sellout") {
+                                    setDetails((prev) => ({ ...prev, lowSelloutConfig: "" }));
+                                  }
+                                },
+                                isSearchable: false
+                              }
+                            ) }),
+                            details.type === "Low Sellout" && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { onClick: handleScrollToBottom, sx: { width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                              InputField["default"],
+                              {
+                                label: "Low Sell Out Configurations",
+                                placeholder: "Select Configuration",
+                                options: LOW_SELLOUT_CONFIG_OPTIONS,
+                                value: getOptionFromValue(LOW_SELLOUT_CONFIG_OPTIONS, details.lowSelloutConfig),
+                                onOptionChange: (val) => updateDetail("lowSelloutConfig", val),
+                                isSearchable: false
+                              }
+                            ) }),
+                            /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { onClick: handleScrollToBottom, sx: { width: "100%", display: "flex", flexDirection: "column", gap: "20px" }, children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { fontSize: "1rem", fontWeight: 600, color: "#19213D" }, children: "Front-Loading Configuration" }),
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                DayToggleSelector["default"],
+                                {
+                                  label: "Source Days",
+                                  subText: "Days from which spots can be front loaded.",
+                                  options: DaysOptions,
+                                  selectedValues: details.source_days,
+                                  onChange: (updatedValues) => updateDetail("source_days", updatedValues)
+                                }
+                              ),
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                DayToggleSelector["default"],
+                                {
+                                  label: "Target Days",
+                                  subText: "Days where front loaded spots can be placed.",
+                                  options: DaysOptions,
+                                  selectedValues: details.target_days,
+                                  onChange: (updatedValues) => updateDetail("target_days", updatedValues)
+                                }
+                              )
+                            ] }),
+                            useLearningTemplateStore.useLearningTemplateStore.getState().backwardCompatibility && /* @__PURE__ */ jsxRuntime.jsxs(
+                              "div",
+                              {
+                                ref: approvalPanelRef,
+                                style: { display: "flex", flexDirection: "column", marginTop: "12px" },
+                                children: [
+                                  /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { fontSize: "1rem", fontWeight: 600, mb: 0.5, color: "#19213D" }, children: "Approval Settings" }),
+                                  /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { fontSize: "0.75rem", color: "#00000080", mb: "20px" }, children: "Configure who can approve learnings before they get published." }),
+                                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "12px", fontSize: "12px", color: "#8F2C23", gap: "16px" }, children: [
+                                    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "12px", fontSize: "12px", color: "#8F2C23", gap: "12px" }, children: [
+                                      /* @__PURE__ */ jsxRuntime.jsxs(
+                                        "div",
+                                        {
+                                          role: "radio",
+                                          "aria-checked": approvalSetting === "approval_required",
+                                          tabIndex: 0,
+                                          style: { cursor: "pointer", display: "flex", flexDirection: "column", gap: "4px", marginBottom: "8px" },
+                                          onClick: () => setApprovalSetting("approval_required"),
+                                          onKeyDown: (e) => {
+                                            if (e.key === "Enter" || e.key === " ") setApprovalSetting("approval_required");
+                                          },
+                                          children: [
+                                            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                                              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", height: "16px", width: "16px", flexShrink: 0, alignItems: "center", justifyContent: "center", borderRadius: "50%", border: `2px solid ${approvalSetting === "approval_required" ? "#2563EB" : "#CBD5E1"}` }, children: approvalSetting === "approval_required" && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: "8px", width: "8px", borderRadius: "50%", backgroundColor: "#2563EB" } }) }),
+                                              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "14px", fontWeight: 500, color: "#19213D" }, children: "Approval Required Before Publishing" })
+                                            ] }),
+                                            /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, marginLeft: "24px", fontSize: "12px", color: "#666F8D" }, children: "Learnings require approval before publishing." })
+                                          ]
+                                        }
+                                      ),
+                                      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { gap: "16px" }, children: [
+                                        approvalSetting === "approval_required" && /* @__PURE__ */ jsxRuntime.jsx(
+                                          AddScopeApprovalSearchComponent["default"],
+                                          {
+                                            selectedApprovers,
+                                            selectedGroupOfApprovers,
+                                            onApproversChange: (v) => {
+                                              setSelectedApprovers(v);
+                                              setApprovalError("");
+                                            },
+                                            onGroupsChange: (v) => {
+                                              setSelectedGroupOfApprovers(v);
+                                              setApprovalError("");
+                                            }
+                                          }
+                                        ),
+                                        approvalError && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, marginLeft: "24px", fontSize: "12px", color: "#8F2C23" }, children: approvalError })
+                                      ] })
+                                    ] }),
+                                    /* @__PURE__ */ jsxRuntime.jsxs(
+                                      "div",
+                                      {
+                                        role: "radio",
+                                        "aria-checked": approvalSetting === "publish_without",
+                                        tabIndex: 0,
+                                        style: { cursor: "pointer", display: "flex", flexDirection: "column", gap: "4px" },
+                                        onClick: () => {
+                                          setApprovalSetting("publish_without");
+                                          setApprovalError("");
+                                        },
+                                        onKeyDown: (e) => {
+                                          if (e.key === "Enter" || e.key === " ") {
+                                            setApprovalSetting("publish_without");
+                                            setApprovalError("");
+                                          }
+                                        },
+                                        children: [
+                                          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                                            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", height: "16px", width: "16px", flexShrink: 0, alignItems: "center", justifyContent: "center", borderRadius: "50%", border: `2px solid ${approvalSetting === "publish_without" ? "#2563EB" : "#CBD5E1"}` }, children: approvalSetting === "publish_without" && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: "8px", width: "8px", borderRadius: "50%", backgroundColor: "#2563EB" } }) }),
+                                            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "14px", fontWeight: 500, color: "#19213D" }, children: "Publish Without Approval" })
+                                          ] }),
+                                          /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, marginLeft: "24px", fontSize: "12px", color: "#666F8D" }, children: "Learnings can be published directly." })
+                                        ]
+                                      }
+                                    )
+                                  ] })
+                                ]
+                              }
+                            )
+                          ] })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      material.Box,
+                      {
+                        sx: {
+                          flex: 1,
+                          bgcolor: "#fff",
+                          p: 3,
+                          borderRadius: "12px",
+                          border: "1px solid #F0F2F5",
+                          display: "flex",
+                          flexDirection: "column"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { sx: { fontSize: "1rem", fontWeight: 600, mb: 0.5, color: "#19213D" }, children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#E53E3E", marginRight: "2px" }, children: "*" }),
+                            "Select a scope for your station"
+                          ] }),
+                          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { fontSize: "0.75rem", color: "#64748B", mb: "16px" }, children: "Your station will inherit the rules from the selected scope." }),
+                          /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mb: 2 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                            InputField["default"],
+                            {
+                              required: true,
+                              label: "",
+                              placeholder: "Select Genre",
+                              options: genreSelectOptions,
+                              value: getOptionFromValue(genreSelectOptions, details.genre),
+                              onOptionChange: (val) => updateDetail("genre", val),
+                              isSearchable: false,
+                              onMenuScrollToBottom: loadMoreGenres,
+                              isLoadingOptions: isFetchingGenres,
+                              hasMoreOptions: hasMoreGenres
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mb: 3 }, children: isSimulatingTopScopeLoad ? /* @__PURE__ */ jsxRuntime.jsx(CardSkeleton["default"], {}) : mappedTopScope ? (
+                            /* Selected scope displayed as a detail card — no radio/select interaction */
+                            /* @__PURE__ */ jsxRuntime.jsxs(
+                              material.Box,
+                              {
+                                sx: {
+                                  border: "1.5px solid #2563EB",
+                                  borderRadius: "10px",
+                                  p: "14px 16px",
+                                  bgcolor: "#EFF6FF",
+                                  display: "flex",
+                                  alignItems: "flex-start",
+                                  gap: "12px"
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsxRuntime.jsx(
+                                    material.Box,
+                                    {
+                                      sx: {
+                                        width: 36,
+                                        height: 36,
+                                        borderRadius: "8px",
+                                        bgcolor: "#DBEAFE",
+                                        display: "flex",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        flexShrink: 0
+                                      },
+                                      children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "#2563EB", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                                        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "2" }),
+                                        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14" })
+                                      ] })
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { flex: 1, minWidth: 0 }, children: [
+                                    /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { fontSize: "0.875rem", fontWeight: 600, color: "#1E3A5F", mb: "2px" }, children: mappedTopScope.title }),
+                                    /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { fontSize: "0.75rem", color: "#2563EB", mb: "8px" }, children: mappedTopScope.description }),
+                                    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: "8px", flexWrap: "wrap" }, children: [
+                                      mappedTopScope.inheritedText && /* @__PURE__ */ jsxRuntime.jsxs(
+                                        material.Box,
+                                        {
+                                          component: "span",
+                                          sx: {
+                                            fontSize: "0.7rem",
+                                            color: "#475569",
+                                            bgcolor: "#F1F5F9",
+                                            border: "1px solid #E2E8F0",
+                                            borderRadius: "4px",
+                                            px: "6px",
+                                            py: "2px",
+                                            display: "inline-flex",
+                                            alignItems: "center",
+                                            gap: "4px"
+                                          },
+                                          children: [
+                                            /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                                              /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "15 3 21 3 21 9" }),
+                                              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 3L9 15" }),
+                                              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 21l6-6" })
+                                            ] }),
+                                            mappedTopScope.inheritedText
+                                          ]
+                                        }
+                                      ),
+                                      /* @__PURE__ */ jsxRuntime.jsxs(
+                                        material.Box,
+                                        {
+                                          component: "span",
+                                          sx: {
+                                            fontSize: "0.7rem",
+                                            color: "#475569",
+                                            bgcolor: "#F1F5F9",
+                                            border: "1px solid #E2E8F0",
+                                            borderRadius: "4px",
+                                            px: "6px",
+                                            py: "2px"
+                                          },
+                                          children: [
+                                            mappedTopScope.rulesCount,
+                                            " rules"
+                                          ]
+                                        }
+                                      ),
+                                      /* @__PURE__ */ jsxRuntime.jsxs(
+                                        material.Box,
+                                        {
+                                          component: "span",
+                                          sx: {
+                                            fontSize: "0.7rem",
+                                            color: "#475569",
+                                            bgcolor: "#F1F5F9",
+                                            border: "1px solid #E2E8F0",
+                                            borderRadius: "4px",
+                                            px: "6px",
+                                            py: "2px"
+                                          },
+                                          children: [
+                                            mappedTopScope.tiersCount,
+                                            " Tiers"
+                                          ]
+                                        }
+                                      )
+                                    ] })
+                                  ] })
+                                ]
+                              }
+                            )
+                          ) : !details.genre ? (
+                            /* Empty state when no genre is selected */
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              material.Box,
+                              {
+                                sx: {
+                                  display: "flex",
+                                  flexDirection: "column",
+                                  alignItems: "center",
+                                  justifyContent: "center",
+                                  opacity: 0.4,
+                                  py: 6,
+                                  gap: 1
+                                },
+                                children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { fontSize: "0.75rem", color: "#94A3B8" }, children: "Select a genre to load the matching scope" })
+                              }
+                            )
+                          ) : null }),
+                          details.genre && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                            /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { sx: { fontSize: "1rem", fontWeight: 600, mb: 0.5, color: "#19213D" }, children: [
+                              "Select an Existing Station from the \u201C",
+                              details.genre,
+                              "\u201D Scope",
+                              " ",
+                              /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { component: "span", sx: { fontSize: "1rem", fontWeight: 400, color: "#64748B" }, children: "(Optional)" })
+                            ] }),
+                            /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { sx: { fontSize: "0.75rem", color: "#64748B", mb: "12px" }, children: [
+                              "Please select an existing station under the \u201C",
+                              details.genre,
+                              "\u201D category to copy its learnings."
+                            ] }),
+                            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: StationOnboardModal_module["default"].searchWrapper, style: { marginBottom: "12px" }, children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                "input",
+                                {
+                                  type: "text",
+                                  value: scopeSearchText,
+                                  onChange: (e) => setScopeSearchText(e.target.value),
+                                  placeholder: "Search for station...",
+                                  className: StationOnboardModal_module["default"].searchInput
+                                }
+                              ),
+                              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: StationOnboardModal_module["default"].searchIcon, size: 16 })
+                            ] }),
+                            /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+                              isSearchingScopes && /* @__PURE__ */ jsxRuntime.jsx(CardSkeleton["default"], {}),
+                              !isSearchingScopes && otherScopes.length === 0 && debouncedScopeSearchText.trim() && /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { sx: { fontSize: "0.875rem", color: "#64748B", textAlign: "center", py: 4 }, children: [
+                                'No scopes found matching "',
+                                debouncedScopeSearchText,
+                                '".'
+                              ] }),
+                              !isSearchingScopes && otherScopes.map((temp) => /* @__PURE__ */ jsxRuntime.jsx(
+                                TemplateCard["default"],
+                                {
+                                  ...temp,
+                                  isSelected: selectedTemplateId === temp.id,
+                                  onSelect: (id) => {
+                                    var _a2;
+                                    if (selectedTemplateId === id) {
+                                      setSelectedTemplateId((_a2 = mappedTopScope == null ? void 0 : mappedTopScope.id) != null ? _a2 : null);
+                                    } else {
+                                      setSelectedTemplateId(id);
+                                    }
+                                  }
+                                },
+                                temp.id
+                              ))
+                            ] })
+                          ] })
+                        ]
+                      }
+                    )
+                  ] })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          material.Box,
+          {
+            sx: {
+              p: "12px 20px",
+              borderTop: "1px solid #F0F2F5",
+              display: "flex",
+              justifyContent: "flex-end",
+              gap: 2,
+              bgcolor: "#fff"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: handleClose,
+                  disabled: isLoading,
+                  style: {
+                    padding: "7px 10px",
+                    borderRadius: "6px",
+                    color: "#64748B",
+                    border: "1px solid #E2E8F0",
+                    backgroundColor: "#fff",
+                    cursor: "pointer",
+                    fontSize: "14px",
+                    fontWeight: 500
+                  },
+                  children: "Cancel"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: handleOnboard,
+                  disabled: !isFormValid || isLoading,
+                  style: {
+                    padding: "7px 10px",
+                    borderRadius: "6px",
+                    border: "none",
+                    backgroundColor: isFormValid ? "#2563EB" : "#BFDBFE",
+                    color: "#fff",
+                    cursor: isFormValid && !isLoading ? "pointer" : "not-allowed",
+                    fontSize: "14px",
+                    fontWeight: 500,
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "7px"
+                  },
+                  children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 16, color: "inherit" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Onboarding..." })
+                  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Onboard Station" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { size: 16 })
+                  ] })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var StationOnboardModal$1 = StationOnboardModal;
+
+exports["default"] = StationOnboardModal$1;
 //# sourceMappingURL=StationOnboardModal.js.map