// ============================================================
// checkin.jsx — เชคอิน/เชคเอาต์ ด้วย GPS (geofence 1 กม.) + แดชบอร์ด ผจก.
// ============================================================
const { useState:uSC } = React;

const CHECKIN_RADIUS = 1000; // เมตร — ต้องอยู่ในระยะนี้จึงจะเชคอินได้

// ---- helpers ----
function getPosition(){
  return new Promise((resolve,reject)=>{
    if(!navigator.geolocation){ reject({code:0}); return; }
    navigator.geolocation.getCurrentPosition(
      p=>resolve({lat:p.coords.latitude,lng:p.coords.longitude,acc:p.coords.accuracy}),
      err=>reject(err),
      { enableHighAccuracy:true, timeout:12000, maximumAge:0 }
    );
  });
}
function geoErrText(e){
  switch(e&&e.code){
    case 1: return 'ไม่ได้รับอนุญาตให้เข้าถึงตำแหน่ง — กรุณาเปิดสิทธิ์ Location';
    case 2: return 'ไม่พบสัญญาณ GPS กรุณาลองใหม่';
    case 3: return 'หมดเวลารอ GPS กรุณาลองใหม่';
    default: return 'อุปกรณ์นี้ไม่รองรับ GPS';
  }
}
function fmtDist(m){ return m>=1000 ? `${(m/1000).toFixed(2)} กม.` : `${Math.round(m)} ม.`; }
function fmtClock(ts){ const d=new Date(ts); return `${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`; }

// หาสาขาที่ใกล้ที่สุดที่ตั้งพิกัดไว้ (รองรับกรณีย้ายสาขา — อยู่สาขาไหนก็เชคอินสาขานั้น)
function nearestBranch(branchLoc, geo){
  let best=null;
  ['b1','b2'].forEach(k=>{
    const l=branchLoc&&branchLoc[k]; if(!l) return;
    const d=Math.round(haversine(geo.lat,geo.lng,l.lat,l.lng));
    if(!best || d<best.d) best={ k, d };
  });
  return best; // {k,d} หรือ null ถ้ายังไม่ตั้งสาขาไหนเลย
}

// สถานะมา/สาย — สายเมื่อเชคอินช้ากว่าเวลาเริ่มกะเกิน LATE_GRACE_MIN นาที
const LATE_GRACE_MIN = 5;
function shiftStartMin(str){ const m=/(\d{1,2}):(\d{2})/.exec(str||''); return m ? (+m[1]*60 + +m[2]) : null; }
function checkinStatus(rec, shift, customTime){
  if(!rec || !rec.in) return { on:true, late:0 };
  const timeStr = shift.id==='c' ? (customTime||shift.time) : shift.time;
  const start = shiftStartMin((timeStr||'').split(/[–-]/)[0].trim());
  if(start==null) return { on:true, late:0 };
  const dt=new Date(rec.in.at), mins=dt.getHours()*60+dt.getMinutes();
  const late = mins - (start + LATE_GRACE_MIN);
  return late>0 ? { on:false, late } : { on:true, late:0 };
}

// ============================================================
// CheckInCard — การ์ดเชคอินด้านบน (อิงวัน "วันนี้" เสมอ)
// ============================================================
function CheckInCard({ currentUserId, store, checkIn, checkOut }){
  const me = STAFF_BY_ID[currentUserId];
  const inRotation = STAFF.some(s=>s.id===currentUserId);
  const a = inRotation ? assignmentsForDate(TODAY, store.overrides, store.leaves)[currentUserId] : null;
  const working = a && a!=='off';
  const branch = working ? a.b : null;          // สาขาตามตาราง (ใช้แสดงป้าย)
  const b = branch ? BRANCHES[branch] : null;
  const branchLoc = store.branchLoc||{};
  const rec = (store.checkins||{})[dayKey(TODAY,currentUserId)];

  const [busy,setBusy] = uSC(false);
  const [dist,setDist] = uSC(rec?.in?.dist ?? null);
  const [msg,setMsg]   = uSC(null); // {ok:bool, text}
  const mob = useMobile();

  const dateLabel = `${TODAY.getDate()} ${MONTHS_TH[TODAY.getMonth()]} ${thaiYear(TODAY.getFullYear())}`;

  // ---- การ์ดแบบย่อ: วันหยุด / ไม่มีเวร ----
  if(!working){
    return (
      <div style={shell}>
        <div style={{display:'flex',alignItems:'center',gap:12}}>
          <div style={{width:44,height:44,borderRadius:12,background:'#eef0f4',display:'flex',alignItems:'center',justifyContent:'center',fontSize:22,flex:'0 0 auto'}}>🌴</div>
          <div>
            <div style={{fontSize:12,color:'#9aa1b0',fontWeight:600}}>วันนี้ · {dateLabel}</div>
            <div style={{fontSize:15,fontWeight:700,color:'#5b6170',fontFamily:'Anuphan'}}>
              {inRotation ? 'วันนี้คุณหยุด — ไม่ต้องเชคอิน' : 'บัญชีนี้ไม่อยู่ในระบบเวร'}
            </div>
          </div>
        </div>
      </div>
    );
  }

  const checkedIn  = !!rec?.in;
  const checkedOut = !!rec?.out;

  const act = async (kind)=>{
    setBusy(true); setMsg(null);
    try{
      const geo = await getPosition();
      const nb = nearestBranch(branchLoc, geo);   // เลือกสาขาที่ใกล้ที่สุด (รองรับการย้ายสาขา)
      if(!nb){ setMsg({ok:false,text:'ผู้จัดการยังไม่ได้ตั้งตำแหน่งสาขา'}); setBusy(false); return; }
      setDist(nb.d);
      const nbName = BRANCHES[nb.k].name;
      if(kind!=='check' && nb.d>CHECKIN_RADIUS){
        setMsg({ok:false,text:`คุณอยู่ห่างจาก${nbName} ${fmtDist(nb.d)} (เกิน 1 กม.) จึง${kind==='in'?'เชคอิน':'เชคเอาต์'}ไม่ได้`});
        setBusy(false); return;
      }
      if(kind==='in'){ checkIn(currentUserId, nb.k, {lat:geo.lat,lng:geo.lng,dist:nb.d}); setMsg({ok:true,text:`เชคอินสำเร็จ · ${nbName} · ${fmtDist(nb.d)}`}); }
      else if(kind==='out'){ checkOut(currentUserId, {lat:geo.lat,lng:geo.lng,dist:nb.d}); setMsg({ok:true,text:`เชคเอาต์สำเร็จ · ${fmtClock(Date.now())}`}); }
      else { setMsg({ok:nb.d<=CHECKIN_RADIUS, text:`ใกล้สุด: ${nbName} · ${fmtDist(nb.d)}${nb.d<=CHECKIN_RADIUS?' (อยู่ในระยะ)':' (เกิน 1 กม.)'}`}); }
    }catch(e){ setMsg({ok:false,text:geoErrText(e)}); }
    setBusy(false);
  };

  const statusText = checkedOut ? 'เลิกงานแล้ว' : checkedIn ? 'กำลังทำงาน' : 'ยังไม่เชคอิน';
  const statusBg   = checkedOut ? '#eef0f4' : checkedIn ? '#e6f5f2' : '#f0f1f5';
  const statusCol  = checkedOut ? '#69707e' : checkedIn ? '#0e6b60' : '#8a91a0';

  const bigBtn = (active,fill)=>({
    flex:'1 1 0', minWidth:0, border:'none', cursor:active&&!busy?'pointer':'default',
    borderRadius:14, padding:mob?'12px 8px':'14px 10px', fontFamily:'inherit',
    display:'flex', flexDirection:'column', alignItems:'center', gap:3,
    background: active ? fill : '#f3f4f8', color: active ? '#fff' : '#bcc2cd',
    opacity: busy ? .7 : 1, transition:'all .15s',
  });

  return (
    <div style={shell}>
      {/* header */}
      <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:14}}>
        <div style={{fontSize:13.5,fontWeight:700,color:'#2b2f3a',fontFamily:'Anuphan'}}>
          <span style={{color:'#b8901f'}}>วันนี้</span> · {dateLabel}
        </div>
        <span style={{display:'inline-flex',alignItems:'center',gap:6,background:b.tint,color:b.text,borderRadius:999,padding:'4px 11px',fontSize:11.5,fontWeight:700}}>
          <span style={{width:9,height:9,borderRadius:'50%',background:b.solid}}/>{b.name} · {SHIFTS[a.s].label}
        </span>
      </div>

      {/* buttons + status */}
      <div style={{display:'flex',gap:12,alignItems:'stretch',flexWrap:mob?'wrap':'nowrap'}}>
        <button onClick={()=>!checkedIn&&!busy&&act('in')} disabled={checkedIn||busy} style={bigBtn(!checkedIn,'linear-gradient(135deg,#1f9e8f,#15897a)')}>
          <span style={{fontSize:20}}>📥</span>
          <span style={{fontSize:14.5,fontWeight:800,fontFamily:'Anuphan'}}>เชคอิน</span>
          <span style={{fontSize:10.5,opacity:.85}}>{checkedIn?`เข้า ${fmtClock(rec.in.at)}`:'เริ่มงาน'}</span>
        </button>
        <button onClick={()=>checkedIn&&!checkedOut&&!busy&&act('out')} disabled={!checkedIn||checkedOut||busy} style={bigBtn(checkedIn&&!checkedOut,'linear-gradient(135deg,#e8745a,#d65f44)')}>
          <span style={{fontSize:20}}>📤</span>
          <span style={{fontSize:14.5,fontWeight:800,fontFamily:'Anuphan'}}>เชคเอาต์</span>
          <span style={{fontSize:10.5,opacity:.85}}>{checkedOut?`ออก ${fmtClock(rec.out.at)}`:'เลิกงาน'}</span>
        </button>
        <div style={{flex:mob?'1 1 100%':'1 1 0',minWidth:mob?'100%':120,display:'flex',flexDirection:'column',justifyContent:'center',gap:7,paddingLeft:mob?0:4}}>
          <div>
            <div style={{fontSize:10.5,color:'#9aa1b0',fontWeight:600,marginBottom:3}}>สถานะวันนี้</div>
            <span style={{display:'inline-block',background:statusBg,color:statusCol,borderRadius:999,padding:'4px 12px',fontSize:12.5,fontWeight:700}}>{statusText}</span>
          </div>
          <div>
            <div style={{fontSize:10.5,color:'#9aa1b0',fontWeight:600,marginBottom:3}}>ระยะห่างจากสาขา</div>
            <div style={{display:'flex',alignItems:'center',gap:5,fontSize:13.5,fontWeight:700,color:'#2b2f3a'}}>
              <span>📍</span>{dist==null?'—':fmtDist(dist)}
            </div>
          </div>
        </div>
      </div>

      {/* hint / message bar */}
      <div style={{marginTop:12,borderRadius:10,padding:'9px 13px',display:'flex',alignItems:'center',gap:8,fontSize:12,fontWeight:600,
        background: msg ? (msg.ok?'#e9f7f2':'#fdece7') : '#eef7f3',
        color: msg ? (msg.ok?'#0e6b60':'#b94a32') : '#3a7d6e' }}>
        <span style={{flex:'0 0 auto'}}>{msg ? (msg.ok?'✅':'⚠️') : '📍'}</span>
        <span style={{flex:1,minWidth:0}}>{msg ? msg.text : 'ต้องอยู่ในระยะไม่เกิน 1 กม. จากสาขา จึงจะเชคอินได้'}</span>
        <button onClick={()=>!busy&&act('check')} disabled={busy}
          style={{flex:'0 0 auto',border:'none',background:'transparent',color:'#1f7a6c',fontWeight:700,fontSize:12,cursor:busy?'default':'pointer',fontFamily:'inherit',textDecoration:'underline',whiteSpace:'nowrap'}}>
          {busy?'กำลังตรวจ…':'ตรวจสอบระยะทาง'}
        </button>
      </div>
    </div>
  );
}
const shell={ background:'#fff', border:'1px solid #ebedf2', borderRadius:16, padding:'16px 18px', boxShadow:'0 2px 10px -6px rgba(20,20,50,.18)' };

// ============================================================
// CheckInDashboard — แดชบอร์ด ผจก.: ตั้งตำแหน่งสาขา + ภาพรวมเชคอินทั้งเดือน (ดูสาย/ตรงเวลา)
// ============================================================
function CheckInDashboard({ store, setBranchLoc }){
  const [month,setMonth] = uSC(()=>new Date(TODAY.getFullYear(),TODAY.getMonth(),1));
  const year=month.getFullYear(), mon=month.getMonth();
  const days = daysOfMonth(year,mon);
  const branchLoc = store.branchLoc||{};
  const checkins = store.checkins||{};
  const todayMid = new Date(TODAY.getFullYear(),TODAY.getMonth(),TODAY.getDate());
  const nameW=104;

  // คำนวณสถานะแต่ละช่อง + สรุปต่อคน
  const rows = STAFF.map(s=>{
    let lateCnt=0, inCnt=0, workCnt=0;
    const cells = days.map(d=>{
      const a = assignmentsForDate(d, store.overrides, store.leaves)[s.id];
      const working = a && a!=='off';
      const rec = checkins[dayKey(d,s.id)];
      let st='off', late=0;
      if(working){
        workCnt++;
        if(rec && rec.in){
          inCnt++;
          const cs = checkinStatus(rec, SHIFTS[a.s], a.customTime);
          st = cs.on?'ontime':'late'; late=cs.late;
          if(!cs.on) lateCnt++;
        } else {
          st = d<todayMid ? 'missed' : (isSameDay(d,TODAY)?'pending':'future');
        }
      }
      const branch = rec&&rec.in ? rec.branch : (working?a.b:null);
      return { d, st, late, rec, branch, shift: working?a.s:null };
    });
    return { s, cells, lateCnt, inCnt, workCnt };
  });
  const totLate = rows.reduce((a,r)=>a+r.lateCnt,0);

  const cellStyle = (st)=>{
    const m = {
      ontime:{bg:'#e6f5f2',col:'#0e6b60'},
      late:  {bg:'#fdecea',col:'#c0392b'},
      missed:{bg:'#f5f6fa',col:'#cdd2da'},
      pending:{bg:'#fff7e6',col:'#c9a227'},
      off:   {bg:'transparent',col:'#dfe3ea'},
      future:{bg:'transparent',col:'#dfe3ea'},
    }[st];
    return { display:'inline-flex',alignItems:'center',justifyContent:'center',width:26,height:22,borderRadius:5,
      fontSize:10,fontWeight:800,fontFamily:'Anuphan',background:m.bg,color:m.col };
  };

  return (
    <div>
      {/* ตั้งตำแหน่งสาขา */}
      <div style={{fontSize:12,fontWeight:700,color:'#9aa1b0',marginBottom:8}}>📍 ตำแหน่งสาขา (สำหรับเชคอิน · รัศมี 1 กม.)</div>
      <div style={{display:'flex',flexDirection:'column',gap:8,marginBottom:18}}>
        {['b1','b2'].map(k=> <BranchLocRow key={k} branch={k} loc={branchLoc[k]} onSet={loc=>setBranchLoc(k,loc)}/> )}
      </div>

      {/* ตัวเลือกเดือน + สรุปสาย */}
      <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:12}}>
        <button onClick={()=>setMonth(d=>new Date(d.getFullYear(),d.getMonth()-1,1))} style={dnav}>‹</button>
        <span style={{flex:1,textAlign:'center',fontWeight:700,fontSize:13.5,fontFamily:'Anuphan'}}>
          ภาพรวมเชคอิน · {MONTHS_TH[mon]} {thaiYear(year)}
        </span>
        <button onClick={()=>setMonth(d=>new Date(d.getFullYear(),d.getMonth()+1,1))} style={dnav}>›</button>
      </div>
      <div style={{display:'flex',gap:8,marginBottom:12}}>
        <DashPill label="มาสายรวม (ครั้ง)" n={totLate} bg={totLate>0?'#fdecea':'#e6f5f2'} col={totLate>0?'#c0392b':'#0e6b60'}/>
        <DashPill label="เชคอินรวม (วัน)" n={rows.reduce((a,r)=>a+r.inCnt,0)} bg="#eef0f8" col="#46449e"/>
      </div>

      {/* ตารางภาพรวมทั้งเดือน */}
      <div style={{border:'1px solid #ebedf2',borderRadius:12,overflow:'hidden'}}>
        <div style={{overflowX:'auto'}}>
          <table style={{borderCollapse:'separate',borderSpacing:0,fontFamily:'IBM Plex Sans Thai,sans-serif'}}>
            <thead>
              <tr>
                <th style={{...dmH,position:'sticky',left:0,zIndex:2,background:'#fafbfc',textAlign:'left',width:nameW,minWidth:nameW,paddingLeft:12}}>พนักงาน</th>
                {days.map(d=>{
                  const tod=isSameDay(d,TODAY);
                  return <th key={d.getDate()} style={{...dmH,background:tod?'#fbf4e2':'#fafbfc',minWidth:28}}>
                    <div style={{fontSize:8.5,color:DOW_COLORS[d.getDay()],fontWeight:700}}>{WEEKDAYS_SHORT[d.getDay()]}</div>
                    <div style={{fontSize:11,fontWeight:700,color:tod?'#b8901f':'#5b6170',fontFamily:'Anuphan'}}>{d.getDate()}</div>
                  </th>;
                })}
              </tr>
            </thead>
            <tbody>
              {rows.map(({s,cells,lateCnt,inCnt})=>(
                <tr key={s.id}>
                  <td style={{position:'sticky',left:0,zIndex:1,background:'#fff',width:nameW,minWidth:nameW,padding:'6px 10px',borderTop:'1px solid #f1f2f6'}}>
                    <div style={{display:'flex',alignItems:'center',gap:7}}>
                      <Avatar staff={s} size={22}/>
                      <div style={{minWidth:0}}>
                        <div style={{fontSize:12.5,fontWeight:600,lineHeight:1.1}}>{s.nick}</div>
                        <div style={{fontSize:9.5,fontWeight:700,color:lateCnt>0?'#c0392b':'#9aa1b0'}}>{lateCnt>0?`สาย ${lateCnt}`:`ตรงเวลา`}</div>
                      </div>
                    </div>
                  </td>
                  {cells.map((c,i)=>{
                    const tod=isSameDay(c.d,TODAY);
                    const label = (c.st==='ontime'||c.st==='late') && c.branch ? `${BRANCHES[c.branch].num}${SHIFTS[c.shift]?.char||''}`
                      : c.st==='missed' ? '–' : c.st==='pending' ? '·' : '';
                    const title = c.rec&&c.rec.in
                      ? `${c.d.getDate()} ${MONTHS_TH[mon]} · ${BRANCHES[c.branch]?.name} · เข้า ${fmtClock(c.rec.in.at)}${c.rec.out?` · ออก ${fmtClock(c.rec.out.at)}`:''}${c.late>0?` · สาย ${c.late} นาที`:' · ตรงเวลา'}`
                      : '';
                    return <td key={i} style={{textAlign:'center',padding:2,borderTop:'1px solid #f1f2f6',background:tod?'#fdfaf2':'#fff'}}>
                      <span title={title} style={cellStyle(c.st)}>{label}</span>
                    </td>;
                  })}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div style={{padding:'8px 12px',borderTop:'1px solid #f1f2f6',display:'flex',gap:14,flexWrap:'wrap',fontSize:10.5,color:'#7b8194'}}>
          <Lg bg="#e6f5f2" col="#0e6b60" t="ตรงเวลา"/>
          <Lg bg="#fdecea" col="#c0392b" t="มาสาย (เกิน 5 นาที)"/>
          <Lg bg="#f5f6fa" col="#cdd2da" t="– ไม่ได้เชคอิน"/>
          <Lg bg="#fff7e6" col="#c9a227" t="· รอวันนี้"/>
          <span style={{color:'#aeb4c2'}}>เลข = สาขา (1=ฟาร์ม่าวัน 2=น้ำริดเภสัช) · ตัวอักษร = กะ · ช่องว่าง = วันหยุด</span>
        </div>
      </div>
      <div style={{fontSize:11,color:'#aeb4c2',marginTop:8}}>เลขในช่องคือสาขาที่เชคอินจริง — ถ้าย้ายสาขาจะเห็นเลขสาขาเปลี่ยน · ประวัติเวลาละเอียดดูที่แท็บ "บันทึก"</div>
    </div>
  );
}
function Lg({bg,col,t}){ return <span style={{display:'inline-flex',alignItems:'center',gap:5}}>
  <span style={{width:14,height:14,borderRadius:4,background:bg,border:`1px solid ${col}33`}}/>{t}</span>; }
const dmH={padding:'5px 3px',textAlign:'center',borderBottom:'1px solid #ebedf2',position:'sticky',top:0,zIndex:1};

function BranchLocRow({ branch, loc, onSet }){
  const b = BRANCHES[branch];
  const [busy,setBusy] = uSC(false);
  const [err,setErr]   = uSC(null);
  const [manual,setManual] = uSC(false);
  const [lat,setLat] = uSC(loc?loc.lat:''), [lng,setLng] = uSC(loc?loc.lng:'');

  const useGPS = async ()=>{
    setBusy(true); setErr(null);
    try{ const g=await getPosition(); onSet({lat:g.lat,lng:g.lng}); setLat(g.lat); setLng(g.lng); }
    catch(e){ setErr(geoErrText(e)); }
    setBusy(false);
  };
  const saveManual = ()=>{
    const la=parseFloat(lat), ln=parseFloat(lng);
    if(isNaN(la)||isNaN(ln)){ setErr('พิกัดไม่ถูกต้อง'); return; }
    onSet({lat:la,lng:ln}); setManual(false); setErr(null);
  };

  return (
    <div style={{border:'1px solid #ebedf2',borderRadius:12,padding:'10px 13px',background:'#fafbfc'}}>
      <div style={{display:'flex',alignItems:'center',gap:8,flexWrap:'wrap'}}>
        <span style={{width:11,height:11,borderRadius:4,background:b.solid,flex:'0 0 auto'}}/>
        <span style={{fontWeight:700,fontSize:13.5}}>{b.name}</span>
        <span style={{fontSize:11.5,color:loc?'#0e6b60':'#c0863a',fontWeight:600}}>
          {loc?`✓ ${Number(loc.lat).toFixed(5)}, ${Number(loc.lng).toFixed(5)}`:'⚠ ยังไม่ตั้งตำแหน่ง'}
        </span>
        <div style={{marginLeft:'auto',display:'flex',gap:6}}>
          <button onClick={useGPS} disabled={busy} style={{...locBtn,background:'#fef5e0',color:'#9a6a12'}}>{busy?'…':'📍 ใช้ตำแหน่งปัจจุบัน'}</button>
          <button onClick={()=>setManual(m=>!m)} style={{...locBtn,background:'#f0f1f5',color:'#6b7282'}}>พิกัดเอง</button>
        </div>
      </div>
      {manual && (
        <div style={{display:'flex',gap:6,marginTop:9,flexWrap:'wrap',alignItems:'center'}}>
          <input value={lat} onChange={e=>setLat(e.target.value)} placeholder="lat เช่น 17.6200"
            style={locInp}/>
          <input value={lng} onChange={e=>setLng(e.target.value)} placeholder="lng เช่น 100.0990"
            style={locInp}/>
          <button onClick={saveManual} style={{...locBtn,background:'linear-gradient(100deg,#9a7616,#c19a2a)',color:'#fff'}}>บันทึก</button>
        </div>
      )}
      {err && <div style={{fontSize:11.5,color:'#b94040',marginTop:6}}>{err}</div>}
    </div>
  );
}

function DashPill({ label, n, bg, col }){
  return <div style={{flex:'1 1 0',background:bg,borderRadius:10,padding:'8px 10px',textAlign:'center'}}>
    <div style={{fontSize:18,fontWeight:800,fontFamily:'Anuphan',color:col,lineHeight:1}}>{n}</div>
    <div style={{fontSize:10.5,color:col,marginTop:3,fontWeight:600,opacity:.85}}>{label}</div>
  </div>;
}

const dnav={border:'none',background:'#f3f4f8',borderRadius:8,width:30,height:30,cursor:'pointer',fontSize:17,color:'#6b7282',fontFamily:'inherit'};
const dth={padding:'8px 12px',fontSize:11,fontWeight:700,color:'#9aa1b0',background:'#fafbfc',borderBottom:'1px solid #f0f1f6',whiteSpace:'nowrap'};
const dtd={padding:'8px 12px',borderBottom:'1px solid #f5f6f9',fontSize:13,verticalAlign:'middle'};
const locBtn={border:'none',cursor:'pointer',borderRadius:8,padding:'5px 10px',fontSize:11.5,fontWeight:700,fontFamily:'inherit'};
const locInp={border:'1px solid #e3e6ee',borderRadius:8,padding:'6px 9px',fontSize:12.5,fontFamily:'inherit',width:130,flex:'1 1 120px'};

Object.assign(window,{ CheckInCard, CheckInDashboard, getPosition, CHECKIN_RADIUS });