"use strict";(self.webpackChunkunifiNetworkUi=self.webpackChunkunifiNetworkUi||[]).push([[20031],{535322(e,t,n){n.d(t,{A:()=>u,I:()=>i});var i,o=n(274934),d=n(814557),r=n(158885),a=n(247816),m=n(565527),s=n(309130),l=n(100978),c=n(291508);!function(e){e.ACCORDION="accordion",e.BUTTON_LIST="buttonList"}(i||(i={}));const g=(0,a.A)(l.A,(0,c.A)("marginBottom","isButtonList","margin","flex","width","padding","nested","background"))`
  background-color: ${({background:e,nested:t,theme:{themeName:n}})=>e||d.Ay[n===m.S.DARK?`desktop-color-neutral-${t?"00":"01"}-${m.S.DARK}`:`desktop-color-neutral-${t?"01":"00"}-${m.S.LIGHT}`]};
  padding: ${({isButtonList:e,padding:t})=>t||(e?`0 ${s.Ln}`:s.Ln)};
  margin-bottom: ${({marginBottom:e})=>e||s.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}})=>d.Ay[`desktop-border-divider-${e}`]};\n      &:last-child {\n        border-bottom: none;\n      }\n    }\n  `:""}
`,h=(0,a.A)(r.A,(0,c.A)("marginBottom","margin","flex","padding","nested","background"))`
  background-color: ${({background:e,nested:t,theme:{themeName:n}})=>e||d.Ay[n===m.S.DARK?`desktop-color-neutral-${t?"00":"01"}-${m.S.DARK}`:`desktop-color-neutral-${t?"01":"00"}-${m.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||d.Ay[t===m.S.DARK?`desktop-color-neutral-01-${m.S.DARK}`:`desktop-color-neutral-00-${m.S.LIGHT}`]};
      height: 48px;
      padding: 0 ${s.Ln};
    }
    > div:nth-child(2) {
      margin-bottom: 0;
      padding: 0;
      > div {
        padding: 0 ${s.Ln} ${s.Ln};
      }
    }
  }
`,u=({type:e,marginBottom:t,margin:n,padding:d,flex:r,width:a,nested:m,...s})=>"items"in s?(0,o.jsx)(h,{marginBottom:t,margin:n,padding:d,flex:r,nested:m,...s}):(0,o.jsx)(g,{nested:m,width:a,marginBottom:t,margin:n,padding:d,flex:r,isButtonList:e===i.BUTTON_LIST,...s,children:s.children})},720031(e,t,n){n.r(t),n.d(t,{default:()=>S});var i=n(274934),o=n(977872),d=n(602086),r=n(938984),a=n(95032),m=n(442175),s=n(100978),l=n(535322),c=n(470070),g=n(222102),h=n(656466),u=n(401042),p=n(290454);const $="clientTrafficInsights",x=`${p.w}/client/:mac:/traffic-insights`,f="mac";var A=n(29472),b=n(412160),L=n(113592),k=n(320018);const I={},T=[b.dl.CLIENT],S=({activeItem:{mac:e,model:t}})=>{const n=(0,o.wA)(),p=(0,o.d4)((0,d.useMemo)(()=>(e=>(0,g.Mz)((e=>(0,g.Mz)((e=>({models:t})=>(0,h.JC)($,t,{queryParams:{mac:e}},{idField:f}))(e),e=>(0,u.kh)(e)[0]))(e),e=>e?.traffic_overview))(e),[e]));return(0,d.useEffect)(()=>{(!I[e]||Date.now()-I[e]>=3e5)&&n(((e,t={},n={})=>(0,A.An)([{model:$,payload:t=>[{...t,[f]:e}]}],x.replace(":mac:",e),{queryParams:{mac:e},...t},{idField:f,...n}))(e)).then(()=>{I[e]=Date.now()})},[n,e]),(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(l.A,{children:(0,i.jsxs)(s.A,{justifyContent:"space-between",children:[(0,i.jsx)(r.A,{color:"text-2",size:"medium",children:(0,i.jsx)(c.sA,{id:"CLIENTS_INSIGHTS_LOCAL_NET_DAILY_ACTIVITY"})}),(0,i.jsx)(a.A,{color:"text-3",size:"medium",isTruncated:!0,children:(0,m.FI)(p?.["24hr_bytes"]||0)})]})}),(0,i.jsx)(k.A,{mac:e,model:t,logType:L.F.CLIENT,label:"CLIENTS_INSIGHTS_CL",ignoreActionableValues:T})]})}}}]);