"use strict";(self.webpackChunkunifiNetworkUi=self.webpackChunkunifiNetworkUi||[]).push([[67933],{426259(e,t,n){n.d(t,{J:()=>c});var i=n(54013),r=n(158402),o=n(827528),a=n(302318);const c=()=>e=>{e((0,a.kS)(o.C)),e((0,r.Ug)({[i.iy.CLIENTS_STATUS]:[]}))}},635496(e,t,n){var i;n.d(t,{M:()=>i}),function(e){e.MAIN="main",e.DHCP="dhcp",e.HOTSPOT="hotspot"}(i||(i={}))},535322(e,t,n){n.d(t,{A:()=>I,I:()=>i});var i,r=n(274934),o=n(814557),a=n(158885),c=n(247816),s=n(565527),d=n(309130),l=n(100978),_=n(291508);!function(e){e.ACCORDION="accordion",e.BUTTON_LIST="buttonList"}(i||(i={}));const A=(0,c.A)(l.A,(0,_.A)("marginBottom","isButtonList","margin","flex","width","padding","nested","background"))`
  background-color: ${({background:e,nested:t,theme:{themeName:n}})=>e||o.Ay[n===s.S.DARK?`desktop-color-neutral-${t?"00":"01"}-${s.S.DARK}`:`desktop-color-neutral-${t?"01":"00"}-${s.S.LIGHT}`]};
  padding: ${({isButtonList:e,padding:t})=>t||(e?`0 ${d.Ln}`:d.Ln)};
  margin-bottom: ${({marginBottom:e})=>e||d.Ln};
  ${({margin:e})=>e?`margin: ${e};`:""}
  border-radius: 8px;
  flex-direction: column;
  width: ${({width:e="100%"})=>e};
  flex: ${({flex:e=0})=>e};
  > :last-child {
    margin-bottom: 0;
  }
  thead {
    tr {
      height: 32px !important;
    }
    th {
      text-transform: none;
    }
  }
  ${({isButtonList:e})=>e?`\n    > div {\n      display: flex;\n      height: 48px;\n      border-bottom: ${({theme:{themeName:e}})=>o.Ay[`desktop-border-divider-${e}`]};\n      &:last-child {\n        border-bottom: none;\n      }\n    }\n  `:""}
`,u=(0,c.A)(a.A,(0,_.A)("marginBottom","margin","flex","padding","nested","background"))`
  background-color: ${({background:e,nested:t,theme:{themeName:n}})=>e||o.Ay[n===s.S.DARK?`desktop-color-neutral-${t?"00":"01"}-${s.S.DARK}`:`desktop-color-neutral-${t?"01":"00"}-${s.S.LIGHT}`]};
  margin-bottom: ${({theme:e,marginBottom:t})=>t||e.spacing["spacing-l"]};
  ${({margin:e})=>e?`margin: ${e};`:""}
  ${({padding:e})=>e?`padding: ${e};`:""}
  border-radius: 8px;
  flex-direction: column;
  flex: ${({flex:e=0})=>e};
  > :last-child {
    margin-bottom: 0;
  }
  thead {
    tr {
      height: 32px !important;
    }
    th {
      text-transform: none;
    }
  }
  > li {
    > div:first-child {
      background: ${({background:e,theme:{themeName:t}})=>e||o.Ay[t===s.S.DARK?`desktop-color-neutral-01-${s.S.DARK}`:`desktop-color-neutral-00-${s.S.LIGHT}`]};
      height: 48px;
      padding: 0 ${d.Ln};
    }
    > div:nth-child(2) {
      margin-bottom: 0;
      padding: 0;
      > div {
        padding: 0 ${d.Ln} ${d.Ln};
      }
    }
  }
`,I=({type:e,marginBottom:t,margin:n,padding:o,flex:a,width:c,nested:s,...d})=>"items"in d?(0,r.jsx)(u,{marginBottom:t,margin:n,padding:o,flex:a,nested:s,...d}):(0,r.jsx)(A,{nested:s,width:c,marginBottom:t,margin:n,padding:o,flex:a,isButtonList:e===i.BUTTON_LIST,...d,children:d.children})},664092(e,t,n){n.d(t,{A:()=>d});var i=n(274934),r=n(247816),o=n(309130),a=n(100978),c=n(291508);const s=(0,r.A)(a.A,(0,c.A)("valueMaxWidth","keyMinWidth","compact"))`
  &:not(:last-child) {
    ${({compact:e})=>e?"":`margin-bottom: ${o.kc};`}
  }
  & > {
    &:nth-child(1) {
      min-width: ${({keyMinWidth:e})=>e}px;
    }
    &:nth-child(2) {
      max-width: ${({valueMaxWidth:e})=>e}px;
    }
  }
`,d=({children:e,valueMaxWidth:t=215,keyMinWidth:n=0,flexProps:r={},compact:a=!1})=>(0,i.jsx)(s,{width:"100%",justifyContent:"space-between",gap:o.kc,height:a?void 0:24,valueMaxWidth:t,keyMinWidth:n,compact:a,...r,children:e})},67933(e,t,n){n.r(t),n.d(t,{default:()=>G});var i=n(274934),r=n(602086),o=n(977872),a=n(954702),c=n(237725),s=n(535322),d=n(470070),l=n(656705),_=n(635496),A=n(104997),u=n(101134),I=n(302318),C=n(382519),m=n(426259),N=n(158402),h=n(54013),O=n(205521),R=n(449339),E=n(578425),g=n(247816),p=n(100978);const D="VPN_SERVER_CLIENTS_HEADER_CLASSNAME",x=(0,g.A)(p.A)`
  flex-direction: column;
  position: relative;
  height: 100%;
  > div:first-child {
    max-height: calc(100vh - 200px);
  }
  .${D} {
    background: transparent;
  }
`;var M,L=n(664092);!function(e){e.CLIENT="client",e.IPV4_ADDRESS="ipv4Address",e.IPV6_ADDRESS="ipv6Address"}(M||(M={}));var S=n(513458),T=n(421314),k=n(831433),b=n(996121),f=n(309130);const P=(0,g.A)(p.A)`
  align-items: center;
  img {
    margin: 0 ${f.YC} 0 ${f.kc};
    width: ${f.Er} !important;
    height: ${f.Er} !important;
  }
`;var v=n(316628);var W=n(853777),$=n(688684),w=n(669439);const B=(0,g.A)(p.A)`
  flex-direction: column;
  gap: ${f.YC};
`,j={[M.CLIENT]:"COMMON_CLIENT",[M.IPV4_ADDRESS]:"COMMON_IPV4_ADDRESS",[M.IPV6_ADDRESS]:"COMMON_IPV6_ADDRESS"},y={[M.CLIENT]:({display_name:e,name:t})=>(0,i.jsxs)(P,{children:[(0,i.jsx)(S.A,{status:"positive"}),(0,i.jsx)(b.A,{type:"vpn"}),(0,i.jsx)(T.A,{size:"medium",color:"text-2",children:(0,k.tn)({name:t,display_name:e})})]}),[M.IPV4_ADDRESS]:({ip:e})=>{const t=(0,v.A)(),n=(0,r.useCallback)(()=>{t(e)},[t,e]);return(0,i.jsx)(T.A,{size:"medium",color:"text-2",onClick:n,children:e||(0,i.jsx)(d.sA,{id:"COMMON_FALLBACK"})})},[M.IPV6_ADDRESS]:({ipv6:e=[]})=>{const t=(0,v.A)(),n=(0,r.useCallback)(e=>()=>{t(e)},[t]);return(0,i.jsx)(T.A,{size:"medium",color:"text-2",children:e.length?1===e.length?(0,i.jsx)(T.A,{color:"inherit",size:"inherit",onClick:n(e[0]),children:e[0]}):(0,i.jsx)(w.A,{description:(0,i.jsx)(B,{children:e.map(e=>(0,i.jsxs)(p.A,{alignItems:"center",gap:f.YC,children:[e,(0,i.jsx)($.A,{size:"medium",actionable:!0,onClick:n(e)})]},e))}),children:(0,i.jsx)("span",{children:(0,i.jsx)(W.A,{isActive:!0,size:"original"})})}):(0,i.jsx)(d.sA,{id:"COMMON_FALLBACK"})})}},K=e=>e,U=({header:{id:e}})=>(0,i.jsx)(d.sA,{id:j[e]}),X=({column:{id:e},getValue:t,...n})=>y[e](t()),Y=Object.values(M).map(e=>({id:e,accessorFn:K,header:U,enableResizing:!1,enableSorting:!1,size:100,cell:X})),G=({activeItem:{networkId:e,vpnClients:t}})=>{const n=(0,c.W6)(),g=(0,o.wA)(),p=(0,u.A)(`${A.VO.CLIENTS}/${_.M.MAIN}`),M=(0,r.useCallback)(()=>{(0,o.vA)(()=>{g((0,m.J)()),g((0,N.Ug)({[h.iy.CLIENTS_STATUS]:[C.Z4.ONLINE]})).then(()=>{g((0,I.$b)([C.VD.VPN])),g((0,I.Zg)([e]))})}),setTimeout(()=>{n.push(p)},0)},[g,n,p,e]),S=(0,r.useCallback)(({id:e})=>{g((0,m.J)()),setTimeout(()=>{n.push(p,{[E.Gd.SEARCH_INITIAL_TAGS]:[e]}),setTimeout(()=>{g((0,O.XP)({type:R.H.CLIENT,id:e}))},250)},250)},[g,p,n]);return(0,i.jsxs)(x,{children:[(0,i.jsx)(s.A,{children:(0,i.jsx)(l.A,{data:t,columns:Y,headerClassName:D,onRowClick:S})}),(0,i.jsx)(s.A,{children:(0,i.jsx)(L.A,{flexProps:{alignItems:"center"},children:(0,i.jsx)(a.A,{type:"button",fontSize:"medium",onClick:M,children:(0,i.jsx)(d.sA,{id:"COMMON_VIEW_IN_CLIENTS"})})})})]})}},521376(e,t,n){var i;n.d(t,{U:()=>i}),function(e){e.ARROW_LEFT="ArrowLeft",e.ARROW_RIGHT="ArrowRight",e.ARROW_DOWN="ArrowDown",e.ARROW_UP="ArrowUp",e.ENTER="Enter",e.ESCAPE="Escape",e.BACKSPACE="Backspace",e.DELETE="Delete",e.TAB="Tab"}(i||(i={}))},316628(e,t,n){n.d(t,{A:()=>c});var i=n(602086),r=n(977872),o=n(700444),a=n(159469);const c=()=>{const e=(0,r.wA)();return(0,i.useCallback)(t=>null!=t?navigator.clipboard.writeText(t.toString()).then(()=>{e((0,o.ox)({icon:a.C.success,message:"COMMON_COPIED_TO_CLIPBOARD",duration:1e3}))}):Promise.resolve(),[e])}},656705(e,t,n){n.d(t,{A:()=>N});var i,r,o,a,c,s=n(274934),d=n(602086);!function(e){e.TABLE="table"}(i||(i={})),function(e){e.ROW_ID_MAP_BY_INDEX="rowIdMapByIndex",e.INDEX_MAP_BY_ROW_ID="indexMapByRowId"}(r||(r={})),function(e){e.ON_KEY_DOWN="onKeyDown",e.INCOMING_ROW_PROPS="incomingRowProps",e.HAS_ON_ROW_CLICK="hasOnRowClick"}(o||(o={})),function(e){e.INCOMING_ON_ROW_CLICK="incomingOnRowClick",e.LOCAL_CURRENT_INDEX="localCurrentIndex"}(a||(a={})),function(e){e.DATA_MAP_REFERENCE="dataMapReference",e.ROW_ID_MAP_BY_INDEX="rowIdMapByIndex",e.INDEX_MAP_BY_ROW_ID="indexMapByRowId",e.INCOMING_ON_ROW_CLICK="incomingOnRowClick",e.LOCAL_CURRENT_INDEX="localCurrentIndex",e.MULTI_SELECT_MODE="multiSelectMode"}(c||(c={}));const l="data-row-id";var _=n(202730),A=n(147045);var u=n(521376);const I=e=>e?.children?.[1]?.children;var C=n(587389);const m=(0,n(247816).A)(C.A)`
  tr {
    outline: none;
  }
`,N=({data:e=[],rowProps:t,onRowClick:n,...C})=>{const N=(0,d.useRef)(null),h=(0,d.useRef)(null),{[r.ROW_ID_MAP_BY_INDEX]:O,[r.INDEX_MAP_BY_ROW_ID]:R}=(({[i.TABLE]:e})=>{const[t,n]=(0,d.useState)(()=>e?I(e):void 0);(0,d.useEffect)(()=>{e&&n(I(e))},[e]);const{[r.ROW_ID_MAP_BY_INDEX]:o,[r.INDEX_MAP_BY_ROW_ID]:a}=(0,d.useMemo)(()=>{const e=new Map,n=new Map,i=t?.length;if(t&&i)for(let r=0;r<i;r+=1){const i=t[r].getAttribute(l);i&&(e.set(i,r),n.set(r,i))}return{[r.ROW_ID_MAP_BY_INDEX]:e,[r.INDEX_MAP_BY_ROW_ID]:n}},[t]);return{[r.ROW_ID_MAP_BY_INDEX]:o,[r.INDEX_MAP_BY_ROW_ID]:a}})({[i.TABLE]:N.current}),E=(e=>{const t=(0,d.useRef)(new Map),n=(0,d.useRef)(void 0);if(n.current!==e){n.current=e,t.current.clear();const i=e.length;for(let n=0;n<i;n+=1)t.current.set(e[n].id,e[n])}return t})(e),g=(({[c.DATA_MAP_REFERENCE]:e,[c.ROW_ID_MAP_BY_INDEX]:t,[c.INDEX_MAP_BY_ROW_ID]:n,[c.INCOMING_ON_ROW_CLICK]:i,[c.LOCAL_CURRENT_INDEX]:r,[c.MULTI_SELECT_MODE]:o})=>{const a=(0,d.useCallback)(e=>{e.preventDefault()},[]),s=(0,d.useCallback)(()=>{const t=e.current.get(n.get(r.current+1));t&&(i?.(t),r.current+=1)},[n,r,i,e]),l=(0,d.useCallback)(()=>{const t=e.current.get(n.get(r.current-1));t&&(i?.(t),r.current-=1)},[n,r,i,e]);return(0,d.useCallback)((e,{id:n})=>e=>{if(!o&&i){const i=t.get(n);if(Number.isFinite(i))switch(null===r.current&&(r.current=i),e.key){case u.U.ARROW_DOWN:a(e),s();break;case u.U.ARROW_UP:a(e),l()}}},[i,r,o,a,t,s,l])})({[c.DATA_MAP_REFERENCE]:E,[c.ROW_ID_MAP_BY_INDEX]:O,[c.INDEX_MAP_BY_ROW_ID]:R,[c.INCOMING_ON_ROW_CLICK]:n,[c.LOCAL_CURRENT_INDEX]:h,[c.MULTI_SELECT_MODE]:C.multiSelectMode}),p=(({[o.INCOMING_ROW_PROPS]:e,[o.ON_KEY_DOWN]:t,[o.HAS_ON_ROW_CLICK]:n})=>(0,d.useCallback)((i,r)=>({...n?{[A.L]:_.b.SIDE_PANEL_TRIGGER}:{},...e?.(i,r),[l]:i.id,tabIndex:0,onKeyDown:t(i,r)}),[e,t,n]))({[o.INCOMING_ROW_PROPS]:t,[o.ON_KEY_DOWN]:g,[o.HAS_ON_ROW_CLICK]:Boolean(n)}),D=(({[a.INCOMING_ON_ROW_CLICK]:e,[a.LOCAL_CURRENT_INDEX]:t})=>{const n=(0,d.useCallback)(n=>{t.current=null,e?.(n)},[e,t]);return e?n:void 0})({[a.INCOMING_ON_ROW_CLICK]:n,[a.LOCAL_CURRENT_INDEX]:h});return(0,s.jsx)(m,{ref:N,data:e,rowProps:p,onRowClick:D,tableHeight:e.length?"100%":void 0,virtualize:!0,virtualizeColumn:!0,overscan:6,overscanColumn:1,stickyHeader:!0,...C})}}}]);