https://datahub360.vervantis.com/static/js/2512.c14b5962.chunk.js

1"use strict";(self.webpackChunkdatahub360_react=self.webpackChunkdatahub360_react||[]).push([[2512],{42512:(t,e,a)=>{a.r(e),a.d(e,{default:()=>F});var i=a(9950),r=a(24937),o=a(16335),n=a(81095),s=a(72528),l=a(93245),d=a(85706),c=a(60158),p=a(44813),x=a(80294),h=a(29246),g=a(25788),u=a(99526),m=a(63370),f=a(3980),b=a(38208),y=a(44414);const j=r.Ay.div`
2  display: grid;
3  grid-template-columns: 1fr 1fr;
4  gap: 16px;
5  margin-bottom: 20px;
6`,k=r.Ay.div`
7  text-align: center;
8  padding: 12px;
9  background: ${t=>t.theme.colors.backgroundTertiary||"#F3F4F6"};
10  border-radius: 6px;
11  border: 1px solid ${t=>t.theme.colors.borderLight||"#E5E7EB"};
12`,E=r.Ay.div`
13  font-size: 24px;
14  font-weight: 600;
15  color: ${t=>t.theme.colors.text||"#1F2937"};
16  margin-bottom: 4px;
17`,v=r.Ay.div`
18  font-size: 12px;
19  color: ${t=>t.theme.colors.textSecondary||"#6B7280"};
20  text-transform: uppercase;
21  letter-spacing: 0.05em;
22`,A=r.i7`
23  from {
24    opacity: 0;
25    transform: translateY(10px);
26  }
27  to {
28    opacity: 1;
29    transform: translateY(0);
30  }
31`,$=r.Ay.div`
32  width: 100%;
33  flex: 1;
34  min-height: 0;
35  margin-top: 8px;
36  animation: ${A} 0.6s ease-out;
37  
38  /* Hover effect on bars */
39  .recharts-rectangle {
40    transition: opacity 0.2s ease, fill 0.2s ease;
41    cursor: pointer;
42    
43    &:hover {
44      opacity: 0.9;
45    }
46  }
47`,w=r.Ay.div`
48  background: rgba(255, 255, 255, 0.98);
49  backdrop-filter: blur(12px);
50  border: 1px solid rgba(229, 231, 235, 0.8);
51  border-radius: 12px;
52  padding: 16px;
53  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 
54              0 6px 12px rgba(0, 0, 0, 0.08),
55              0 0 0 1px rgba(0, 0, 0, 0.02);
56  min-width: 200px;
57`,B=r.Ay.div`
58  font-size: 14px;
59  font-weight: 600;
60  color: #111827;
61  margin-bottom: 12px;
62  padding-bottom: 10px;
63  border-bottom: 1px solid #E5E7EB;
64  letter-spacing: -0.025em;
65`,S=r.Ay.div`
66  display: flex;
67  align-items: center;
68  gap: 12px;
69  margin-bottom: 8px;
70  padding: 4px 0;
71  font-size: 13px;
72  transition: all 0.2s ease;
73  
74  &:last-child {
75    margin-bottom: 0;
76  }
77  
78  &:hover {
79    background: ${t=>t.theme.colors.backgroundTertiary||"#F3F4F6"};
80    margin-left: -8px;
81    margin-right: -8px;
82    padding-left: 8px;
83    padding-right: 8px;
84    border-radius: 6px;
85  }
86`,L=r.Ay.div`
87  width: 10px;
88  height: 10px;
89  border-radius: 50%;
90  background: ${t=>t.$color};
91  box-shadow: 0 0 0 3px ${t=>t.$color}22;
92  flex-shrink: 0;
93`,C=r.Ay.span`
94  color: #6B7280;
95  flex: 1;
96  font-weight: 500;
97  letter-spacing: -0.01em;
98`,D=r.Ay.span`
99  font-weight: 600;
100  color: #111827;
101  font-variant-numeric: tabular-nums;
102  letter-spacing: -0.025em;
103`,F=()=>{const{selectedCompanyId:t}=(0,f.P)(),[e,a]=(0,i.useState)(new Date),[r,A]=(0,i.useState)([]),[F,z]=(0,i.useState)(!0),[M,T]=(0,i.useState)(!1);(0,i.useEffect)(()=>{W()},[t]),(0,i.useEffect)(()=>{T(!1);const t=setTimeout(()=>{T(!0)},100);return()=>clearTimeout(t)},[r]);const W=async()=>{if(!t)return A([]),void z(!1);try{const e=await h.A.get((0,b.e9)(`/api/dashboard/electricity?company_id=${t}`));if(e.data.data&&e.data.data.length>0){const t=e.data.data.map(t=>({...t,period:t.period.split(" ")[0]}));A(t)}else A([])}catch(e){console.error("Error fetching electricity data:",e),A([])}finally{z(!1)}},_=r.reduce((t,e)=>t+e.usage,0),K=r.reduce((t,e)=>t+e.cost,0),U=r.length>0?_/r.length:0,Y=r.length>0?K/r.length:0,H=t=>{let{active:e,payload:a,label:i}=t;return e&&a&&a.length?(0,y.jsxs)(w,{children:[(0,y.jsxs)(B,{children:[i," 2024"]}),(0,y.jsxs)(S,{children:[(0,y.jsx)(L,{$color:"#9B85D4"}),(0,y.jsx)(C,{children:"Usage"}),(0,y.jsxs)(D,{children:[a[0].value.toLocaleString()," kWh"]})]}),(0,y.jsxs)(S,{children:[(0,y.jsx)(L,{$color:"#7C3AED"}),(0,y.jsx)(C,{children:"Cost"}),(0,y.jsxs)(D,{children:["$",a[0].payload.cost.toLocaleString()]})]})]}):null};return(0,y.jsxs)(u.s,{title:"Electricity Usage",subtitle:"Monthly consumption and costs",icon:(0,y.jsx)(g.A,{}),padding:!0,actions:(0,y.jsx)(m.S,{value:e,onChange:a,format:"month-year"}),children:[(0,y.jsxs)(j,{children:[(0,y.jsxs)(k,{children:[(0,y.jsx)(E,{children:Math.round(U).toLocaleString()}),(0,y.jsx)(v,{children:"Avg kWh/Month"})]}),(0,y.jsxs)(k,{children:[(0,y.jsxs)(E,{children:["$",Math.round(Y).toLocaleStr

103ing()]}),(0,y.jsx)(v,{children:"Avg Cost/Month"})]})]}),(0,y.jsx)($,{children:(0,y.jsx)(n.u,{width:"100%",height:"100%",children:(0,y.jsxs)(x.E,{data:r,margin:{top:5,right:5,bottom:5,left:5},children:[(0,y.jsx)(l.d,{strokeDasharray:"0",stroke:"#E5E7EB",vertical:!1}),(0,y.jsx)(c.W,{dataKey:"period",tick:{fontSize:12,fill:"#6B7280"},axisLine:{stroke:"#E5E7EB"},tickLine:!1}),(0,y.jsx)(p.h,{tick:{fontSize:12,fill:"#6B7280"},axisLine:{stroke:"#E5E7EB"},tickLine:!1,width:60}),(0,y.jsx)(o.m,{content:(0,y.jsx)(H,{}),cursor:{stroke:"rgba(99, 102, 241, 0.1)",strokeWidth:2,fill:"rgba(99, 102, 241, 0.03)"},animationDuration:200,animationEasing:"ease-out"}),(0,y.jsx)(d.y,{dataKey:"usage",radius:[8,8,0,0],isAnimationActive:M,animationBegin:0,animationDuration:1200,animationEasing:"ease-out",children:r.map((t,e)=>(0,y.jsx)(s.f,{fill:"#9B85D4",style:{filter:`opacity(${M?1:0})`,transition:`filter ${100+40*e}ms ease-out`}},`cell-${e}`))})]})})})]})}}}]);