https://servicebro.io/assets/StaffLoginPage-C4cMH-97.js

1import{m as A,u as L,r as l,j as e,Z as g,U as q,ad as j,n as U,x as D,L as T,s as N}from"./index-CUROJguC.js";import{B as V,A as F}from"./BackButton-OjtLr4H-.js";import{A as v}from"./alert-circle-PaUlRZqT.js";function Q(){const w=A(),{login:y}=L(),[o,f]=l.useState("business_code"),[x,k]=l.useState(""),[m,u]=l.useState(["","","",""]),[d,i]=l.useState(""),[h,c]=l.useState(!1),[p,S]=l.useState(""),[b,C]=l.useState(""),r=[l.useRef(null),l.useRef(null),l.useRef(null),l.useRef(null)];l.useEffect(()=>{o==="pin"&&r[0].current&&r[0].current.focus()},[o]);async function B(a){a.preventDefault(),i(""),c(!0);const s=x.toUpperCase().replace(/\s/g,""),{data:t,error:n}=await N.from("service_providers").select("id, business_name").eq("business_code",s).maybeSingle();if(c(!1),n||!t){i("Invalid business code. Please check and try again.");return}C(t.id),S(t.business_name),f("pin")}function _(a,s){var n;if(!/^\d*$/.test(s))return;const t=[...m];t[a]=s.slice(-1),u(t),s&&a<3&&((n=r[a+1].current)==null||n.focus()),t.every(R=>R!=="")&&a===3&&P(t.join(""))}function E(a,s){var t;s.key==="Backspace"&&!m[a]&&a>0&&((t=r[a-1].current)==null||t.focus())}async function P(a){var n;i(""),c(!0);const{data:s,error:t}=await N.from("staff_members").select("*").eq("provider_id",b).eq("access_pin",a).eq("is_active",!0).maybeSingle();if(t||!s){c(!1),i("Invalid PIN. Please try again."),u(["","","",""]),(n=r[0].current)==null||n.focus();return}y({staffId:s.id,providerId:b,firstName:s.first_name,lastName:s.last_name,role:s.role,businessName:p,hidePrices:s.hide_prices||!1,email:s.email}),c(!1),w("/staff")}function I(){f("business_code"),u(["","","",""]),i("")}return e.jsxs("div",{className:"min-h-[100dvh] bg-stone-100 flex",children:[e.jsxs("div",{className:"hidden lg:flex lg:w-1/2 bg-slate-900 relative overflow-hidden",children:[e.jsxs("div",{className:"absolute inset-0",children:[e.jsx("div",{className:"absolute top-0 left-0 w-96 h-96 bg-blue-500/10 blur-3xl"}),e.jsx("div",{className:"absolute bottom-0 right-0 w-96 h-96 bg-slate-700/50 blur-3xl"})]}),e.jsxs("div",{className:"relative z-10 flex flex-col justify-between p-12 w-full",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 bg-white",children:e.jsx(g,{className:"w-6 h-6 text-slate-900"})}),e.jsx("span",{className:"text-white font-black text-xl tracking-tight",children:"SERVICEBRO"})]}),e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{children:[e.jsx("p",{className:"text-blue-400 uppercase tracking-[0.3em] text-xs font-bold mb-4",children:"Team Access"}),e.jsxs("h2",{className:"text-5xl font-black text-white leading-tight tracking-tight",children:["Quick access",e.jsx("br",{}),"for your",e.jsx("br",{}),e.jsx("span",{className:"text-blue-400",children:"team."})]})]}),e.jsx("p",{className:"text-slate-400 text-lg max-w-md",children:"Enter your business code and personal PIN to access your assigned jobs and timesheets."})]}),e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx("div",{className:"w-12 h-12 bg-blue-500/20 flex items-center justify-center",children:e.jsx(q,{className:"w-6 h-6 text-blue-400"})}),e.jsx("p",{className:"text-slate-500 text-sm",children:"Staff login for team members"})]})]})]}),e.jsxs("div",{className:"flex-1 overflow-y-auto flex flex-col min-h-[100dvh] lg:min-h-0",children:[e.jsx("div",{className:"p-4 sm:p-6",children:e.jsx(V,{to:"/login"})}),e.jsx("div",{className:"flex-1 flex items-center justify-center px-6 pb-8 lg:px-12",children:e.jsxs("div",{className:"w-full max-w-md",children:[e.jsxs("div",{className:"flex items-center justify-center gap-3 mb-10 lg:hidden",children:[e.jsx("div",{className:"p-2 bg-slate-900",children:e.jsx(g,{className:"w-6 h-6 text-white"})}),e.jsx("span",{className:"text-slate-900 font-black text-xl tracking-tight",children:"SERVICEBRO"})]}),o==="business_code"&&e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"mb-8",children:[e.jsx("p",{className:"text-slate-400 uppercase tracking-[0.3em] text-[10px] font-bold mb-2",children:"Team Login"}),e.jsxs("h1",{className:"text-3xl sm:text-4xl font-black text-slate-900 tracking-tight",children:["Enter your",e.jsx("br",{}),"business code"]}),e.jsx("p",{className:"text-slate-500 mt-3",children:"Ask your employer for the 6-character business code."})]}),d&&e.jsxs("div",{className:"mb-6 p-4 bg-red-50 border-2 border-red-500 flex items-start gap-3",children:[e.jsx(v,{className:"w-5 h-5 text-red-500 flex-shrink-0 mt-0.5"}),e.jsx("p",{className:"text-red-700 font-medium text-sm",children:d})]}),e.jsxs("form",{onSubmit:B,className:"space-y-5",children:[e.jsxs("div",{children:[e.jsx("label",{className:"block text-[10px] uppercase tracking-[0.2em] text-slate-500 font-bold mb-2",children:"Business Code"}),e.jsxs("div",{className:"relative",children:[e.jsx(j,{className:"absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-300"}),e.jsx("input",{type:"text",value:x,onChange:a=>k(a.target.value.toUpperCase()),className:"w-full pl-12 pr-4 py-4 border-2 border-slate-200 font-mono font-bold text-xl tracking-[0.3em] uppercase transition-all outline-none focus:border-slate-900 focus:ring-2 focus:ring-slate-900/5 bg-white text-center",placeholder:"ABC123",maxLength:6,required:!0,autoComplete:"off"})]})]}),e.jsx(F,{loading:h,loadingText:"Verifying...",text:"Continue",disabled:x.length<6})]})]}),o==="pin"&&e.jsxs(e.Fragment,{children:[e.jsxs("button",{onClick:I,className:"flex items-center gap-2 text-slate-500 hover:text-slate-900 mb-8 transition-colors p-1 -ml-1 focus:outline-none focus:ring-2 focus:ring-slate-900/10 rounded-sm",children:[e.jsx(U,{className:"w-4 h-4"}),e.jsx("span",{className:"text-sm font-medium",children:"Back"})]}),e.jsxs("div",{className:"mb-8",children:[e.jsxs("div",{className:"inline-flex items-center gap-2 px-3 py-1.5 bg-blue-50 border border-blue-200 mb-4",children:[e.jsx(j,{className:"w-4 h-4 text-blue-600"}),e.jsx("span",{className:"text-sm font-bold text-blue-700",children:p})]}),e.jsxs("h1",{className:"text-3xl sm:text-4xl font-black text-slate-900 tracking-tight",children:["Enter your",e.jsx("br",{}),"4-digit PIN"]}),e.jsx("p",{className:"text-slate-500 mt-3",children:"Your personal access code to login."})]}),d&&e.jsxs("div",{className:"mb-6 p-4 bg-red-50 border-2 border-red-500 flex items-start gap-3",children:[e.jsx(v,{className:"w-5 h-5 text-red-500 flex-shrink-0 mt-0.5"}),e.jsx("p",{className:"text-red-700 font-medium text-sm",children:d})]}),e.jsxs("div",{className:"space-y-6",children:[e.jsx("div",{className:"flex justify-center gap-3 sm:gap-4",children:m.map((a,s)=>e.jsx("input",{ref:r[s],type:"text",inputMode:"numeric",value:a,onChange:t=>_(s,t.target.value),onKeyDown:t=>E(s,t),className:"w-14 h-16 sm:w-16 sm:h-20 text-center text-2xl sm:text-3xl font-black border-2 border-slate-200 focus:border-slate-900 focus:ring-2 focus:ring-slate-900/5 outline-none transition-colors bg-white",maxLength:1,autoComplete:"off"},s))}),h&&e.jsxs("div",{className:"flex items-center justify-center gap-3 py-4",children:[e.jsx(D,{className:"w-5 h-5 animate-spin text-slate-400"}),e.jsx("span",{className:"text-slate-500 font-medium",children:"Signing in..."})]})]})]}),e.jsx("div",{className:"mt-8 pt-8 border-t-2 border-slate-200",children:e.jsxs("p",{className:"text-center text-slate-500",children:["Are you a business owner?"," ",e.jsx(T,{to:"/login",className:"text-slate-900 font-bold hover:text-emerald-600 transition-colors",children:"Sign in here"})]})}),e.jsxs("div",{className:"mt-8 flex items-center justify-center gap-6 text-xs text-slate-400 uppercase tracking-wider",children:[e.jsx("span",{children:"Qu

1ick"}),e.jsx("span",{className:"w-1 h-1 bg-slate-300"}),e.jsx("span",{children:"Secure"}),e.jsx("span",{className:"w-1 h-1 bg-slate-300"}),e.jsx("span",{children:"Simple"})]})]})})]})]})}export{Q as default};