52 lines
13 KiB
JavaScript
52 lines
13 KiB
JavaScript
import{c as D,j as e,u as _,r as n,U as L,T as c,B as M,a as z,b as H,f as O,d as V,H as q}from"./index-TNj5auBr.js";import{d as Y,U as G,P as K,H as J,A as Q}from"./dayjs.min-DXk7t_A6.js";import{B as X,P as F}from"./PageHeader-B9Ytwo9b.js";import{S as j}from"./StatCard-CeBP5QBY.js";import{S as I}from"./StatusChip-Bf11bHPP.js";import{E as v}from"./EmptyState-DGz1kDMS.js";import{t as T,a as Z,b as ee}from"./format-BZvJYrzU.js";import{p as N,a as P,T as te}from"./Table-SizHLk8D.js";import{B as se}from"./Banner-DVJsik2E.js";import{C as re}from"./Card-Cvh0wiAW.js";/**
|
|
* @license lucide-react v1.22.0 - ISC
|
|
*
|
|
* This source code is licensed under the ISC license.
|
|
* See the LICENSE file in the root directory of this source tree.
|
|
*/const ie=[["path",{d:"M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z",key:"pzmjnu"}],["path",{d:"M21.21 15.89A10 10 0 1 1 8 2.83",key:"k2fpak"}]],$=D("chart-pie",ie);/**
|
|
* @license lucide-react v1.22.0 - ISC
|
|
*
|
|
* This source code is licensed under the ISC license.
|
|
* See the LICENSE file in the root directory of this source tree.
|
|
*/const ae=[["path",{d:"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8",key:"1357e3"}],["path",{d:"M3 3v5h5",key:"1xhq8a"}],["path",{d:"M12 7v5l4 2",key:"1fdv2h"}]],oe=D("history",ae);/**
|
|
* @license lucide-react v1.22.0 - ISC
|
|
*
|
|
* This source code is licensed under the ISC license.
|
|
* See the LICENSE file in the root directory of this source tree.
|
|
*/const ne=[["path",{d:"M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z",key:"zw3jo"}],["path",{d:"M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12",key:"1wduqc"}],["path",{d:"M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17",key:"kqbvx6"}]],E=D("layers",ne);function le({data:l=[],size:i=180,thickness:p=26,centerLabel:r,centerValue:h}){const x=l.reduce((o,m)=>o+m.value,0)||1,u=(i-p)/2,f=2*Math.PI*u;let g=0;return e.jsxs("div",{style:{display:"flex",flexDirection:"row",gap:"24px",alignItems:"center",justifyContent:"center",flexWrap:"wrap",fontFamily:"system-ui, sans-serif"},children:[e.jsxs("div",{style:{position:"relative",width:`${i}px`,maxWidth:"100%",aspectRatio:"1 / 1"},children:[e.jsx("svg",{width:"100%",height:"100%",viewBox:`0 0 ${i} ${i}`,children:e.jsxs("g",{transform:`rotate(-90 ${i/2} ${i/2})`,children:[e.jsx("circle",{cx:i/2,cy:i/2,r:u,fill:"none",stroke:"#F0F0F0",strokeWidth:p}),l.map((o,m)=>{const d=o.value/x*f,b=e.jsx("circle",{cx:i/2,cy:i/2,r:u,fill:"none",stroke:o.color,strokeWidth:p,strokeDasharray:`${d} ${f-d}`,strokeDashoffset:-g,strokeLinecap:"butt"},m);return g+=d,b})]})}),e.jsxs("div",{style:{position:"absolute",inset:0,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center"},children:[e.jsx("div",{style:{fontSize:"2rem",fontWeight:700,color:"#1e293b"},children:h??x}),e.jsx("div",{style:{fontSize:"0.75rem",color:"#64748b"},children:r??"Total"})]})]}),e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:"10px"},children:l.map(o=>e.jsxs("div",{style:{display:"flex",flexDirection:"row",gap:"8px",alignItems:"center"},children:[e.jsx("div",{style:{width:"10px",height:"10px",borderRadius:"3px",backgroundColor:o.color}}),e.jsx("div",{style:{fontSize:"0.875rem",color:"#64748b",minWidth:"80px"},children:o.label}),e.jsx("div",{style:{fontSize:"0.875rem",fontWeight:600,color:"#1e293b"},children:o.value.toLocaleString("en-IN")})]},o.label))})]})}const de={newclient:"#00A2AE",contacted:"#FFBF00",onboarded:"#00A854",lost:"#F04134"},ce=l=>de[String(l||"").toLowerCase()]||"#8C8C8C",C=["#C01227","#00A2AE","#00A854","#FFBF00","#9E0E20","#8C8C8C","#D6515C"];function w({icon:l,title:i,action:p,color:r="primary",noPadding:h=!1,children:x}){return e.jsxs(re,{style:{height:"100%",display:"flex",flexDirection:"column",borderRadius:"16px",border:"1px solid rgba(5, 54, 89, 0.08)",backgroundColor:"#ffffff",overflow:"hidden",boxShadow:"0 10px 30px -5px rgba(0,0,0,0.02), 0 4px 12px -3px rgba(0,0,0,0.02)",boxSizing:"border-box"},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"row",alignItems:"center",padding:"10px 16px",borderBottom:"1px solid rgba(5, 54, 89, 0.06)",background:"linear-gradient(90deg, rgba(192, 18, 39, 0.03) 0%, rgba(255, 255, 255, 0) 100%)",gap:"10px",flexWrap:"wrap"},children:[e.jsx("div",{style:{width:"30px",height:"30px",borderRadius:"7px",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"rgba(192, 18, 39, 0.08)",color:"#C01227",flexShrink:0},children:e.jsx(l,{size:15})}),e.jsx("div",{style:{flexGrow:1,minWidth:0},children:e.jsx(q,{level:5,children:i})}),p]}),e.jsx("div",{style:{padding:h?"0":"16px",flexGrow:1,boxSizing:"border-box"},children:x})]})}function ve(){var A;const l=_(),[i,p]=n.useState(()=>Y().format("YYYY-MM-DD")),[r,h]=n.useState([]),[x,u]=n.useState([]),[f,g]=n.useState(!0),[o,m]=n.useState(null),d=n.useRef(0),b=()=>{const t=++d.current;g(!0),m(null),Promise.all([O(),V()]).then(([s,a])=>{d.current===t&&(h((s||[]).map(Z)),u((a||[]).map(ee)))}).catch(s=>{d.current===t&&m(s.message||"Failed to load dashboard data")}).finally(()=>{d.current===t&&g(!1)})};n.useEffect(()=>{b()},[]);const y=n.useMemo(()=>({total:r.length,newCount:r.filter(t=>t.status==="newClient").length,parcels:r.reduce((t,s)=>t+s.parcelVolume,0),contracts:r.reduce((t,s)=>t+s.activeContracts,0)}),[r]),B=n.useMemo(()=>{const t={};return r.forEach(s=>{t[s.status]=(t[s.status]||0)+1}),Object.entries(t).sort((s,a)=>a[1]-s[1]).map(([s,a])=>({label:T(s),value:a,color:ce(s)}))},[r]),k=n.useMemo(()=>{const t={};return r.forEach(s=>{const a=s.businessType||"other";t[a]=(t[a]||0)+1}),Object.entries(t).sort((s,a)=>a[1]-s[1])},[r]),U=((A=k[0])==null?void 0:A[1])||1,S=n.useMemo(()=>[...r].sort((t,s)=>String(s.lastUpdated).localeCompare(String(t.lastUpdated))).slice(0,6),[r]),W=n.useMemo(()=>[{key:"name",header:e.jsx("div",{style:{paddingLeft:"24px"},children:"Client"}),width:N(2),renderCell:t=>e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"12px",paddingLeft:"24px"},children:[e.jsx(L,{name:t.name,size:32}),e.jsx(c,{type:"body",weight:"semibold",children:t.name})]})},{key:"businessType",header:"Type",width:N(1),renderCell:t=>t.businessType?e.jsx(X,{variant:"neutral",label:T(t.businessType)}):e.jsx(c,{type:"supporting",color:"disabled",children:"—"})},{key:"location",header:"Location",width:N(1),renderCell:t=>e.jsx(c,{type:"body",children:`${t.city||"—"}${t.businessState?`, ${t.businessState}`:""}`})},{key:"parcelVolume",header:"Parcels",width:P(110),align:"end",renderCell:t=>e.jsx(c,{type:"body",weight:"semibold",hasTabularNumbers:!0,children:t.parcelVolume.toLocaleString("en-IN")})},{key:"status",header:"Status",width:P(140),renderCell:t=>e.jsx(I,{status:t.status})}],[]),R=e.jsx("input",{type:"date",className:"dashboard-date-picker",value:i,onChange:t=>p(t.target.value),style:{padding:"8px 12px",borderRadius:"10px",border:"1px solid rgba(5, 54, 89, 0.12)",fontSize:"0.875rem",fontWeight:500,fontFamily:"inherit",color:"#1e293b",backgroundColor:"#ffffff",outline:"none",cursor:"pointer",transition:"all 0.2s ease",boxShadow:"0 1px 2px rgba(15, 23, 42, 0.04)",width:"150px"},onFocus:t=>{t.target.style.borderColor="#C01227",t.target.style.boxShadow="0 0 0 3px rgba(192, 18, 39, 0.12)"},onBlur:t=>{t.target.style.borderColor="rgba(5, 54, 89, 0.12)",t.target.style.boxShadow="0 1px 2px rgba(15, 23, 42, 0.04)"}});return f?e.jsxs("div",{style:{fontFamily:"system-ui, sans-serif"},children:[e.jsx(F,{title:"Dashboard",action:R}),e.jsxs("div",{style:{display:"flex",justifyContent:"center",padding:"96px 0"},children:[e.jsx("div",{className:"spinner",style:{width:"40px",height:"40px",border:"4px solid #f1f5f9",borderTop:"4px solid #C01227",borderRadius:"50%",animation:"spin 1s linear infinite"}}),e.jsx("style",{children:"@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }"})]})]}):e.jsxs("div",{style:{fontFamily:"system-ui, sans-serif"},children:[e.jsx(F,{title:"Dashboard",action:R}),o&&e.jsx("div",{style:{marginBottom:"24px"},children:e.jsx(se,{status:"error",title:o,endContent:e.jsx(M,{label:"Retry",variant:"ghost",size:"sm",onClick:b})})}),e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(180px, 1fr))",gap:"12px",marginBottom:"16px"},children:[e.jsx(j,{size:"sm",title:"Total Clients",value:y.total,icon:z,color:"primary"}),e.jsx(j,{size:"sm",title:"New Clients",value:y.newCount,icon:G,color:"info"}),e.jsx(j,{size:"sm",title:"Total Parcel Volume",value:y.parcels.toLocaleString("en-IN"),icon:K,color:"success"}),e.jsx(j,{size:"sm",title:"Active Contracts",value:y.contracts,icon:J,color:"warning"})]}),e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"1fr",gap:"16px",marginBottom:"16px"},children:[e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"1fr",lg:"repeat(12, 1fr)",gap:"16px"},className:"responsive-row",children:[e.jsx("div",{style:{gridColumn:"span 8"},className:"col-span-8",children:e.jsx(w,{icon:oe,title:"Recent Clients",color:"primary",noPadding:!0,action:S.length>0&&e.jsx(M,{label:"View all",variant:"ghost",size:"sm",icon:e.jsx(Q,{size:14}),onClick:()=>l("/clients")}),children:S.length===0?e.jsx(v,{icon:z,title:"No clients yet",caption:"Add a client under the Clients menu to see it here."}):e.jsx("div",{style:{paddingTop:"8px",paddingBottom:"8px"},children:e.jsx(te,{data:S,columns:W,idKey:"id",density:"compact",dividers:"rows",hasHover:!0,isStriped:!0,textOverflow:"truncate"})})})}),e.jsx("div",{style:{gridColumn:"span 4"},className:"col-span-4",children:e.jsx(w,{icon:$,title:"Clients by Status",color:"primary",children:e.jsx("div",{style:{display:"flex",justifyContent:"center",padding:"4px 0"},children:B.length===0?e.jsx(v,{icon:$,title:"No status breakdown",caption:"No client status distribution available."}):e.jsx(le,{data:B,size:140,thickness:20,centerValue:y.total,centerLabel:"Clients"})})})})]}),e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"1fr",lg:"repeat(12, 1fr)",gap:"16px"},className:"responsive-row",children:[e.jsx("div",{style:{gridColumn:"span 8"},className:"col-span-8",children:e.jsx(w,{icon:E,title:"Clients by Business Type",color:"primary",children:k.length===0?e.jsx(v,{icon:E,title:"No business types",caption:"No business type distribution available."}):e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:"12px"},children:k.map(([t,s],a)=>e.jsxs("div",{children:[e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:"4px"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[e.jsx("div",{style:{width:"10px",height:"10px",borderRadius:"3px",backgroundColor:C[a%C.length]}}),e.jsx(c,{type:"body",weight:"semibold",children:T(t)})]}),e.jsxs(c,{type:"body",color:"secondary",hasTabularNumbers:!0,children:[s," · ",Math.round(s/r.length*100),"%"]})]}),e.jsx("div",{style:{height:"6px",borderRadius:"3px",backgroundColor:"#f1f5f9",width:"100%",overflow:"hidden"},children:e.jsx("div",{style:{height:"100%",borderRadius:"3px",backgroundColor:C[a%C.length],width:`${s/U*100}%`}})})]},t))})})}),e.jsx("div",{style:{gridColumn:"span 4"},className:"col-span-4",children:e.jsx(w,{icon:H,title:"App Users",color:"primary",children:x.length===0?e.jsx(v,{title:"No team users"}):e.jsx("div",{style:{display:"flex",flexDirection:"column"},children:x.slice(0,6).map(t=>e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"10px",padding:"8px 12px",margin:"1px -12px",borderRadius:"10px",transition:"background-color 0.2s ease",cursor:"pointer"},className:"team-row-hover",children:[e.jsx(L,{name:t.name,size:30}),e.jsxs("div",{style:{flexGrow:1,minWidth:0},children:[e.jsx(c,{type:"body",weight:"semibold",maxLines:1,children:t.name}),e.jsx(c,{type:"supporting",color:"secondary",maxLines:1,children:t.email})]}),e.jsx(I,{status:t.role})]},t.id))})})})]})]}),e.jsx("style",{children:`
|
|
@media (min-width: 1024px) {
|
|
.responsive-row {
|
|
grid-template-columns: repeat(12, 1fr) !important;
|
|
}
|
|
.col-span-8 {
|
|
grid-column: span 8 !important;
|
|
}
|
|
.col-span-4 {
|
|
grid-column: span 4 !important;
|
|
}
|
|
}
|
|
@media (max-width: 1023px) {
|
|
.responsive-row {
|
|
grid-template-columns: 1fr !important;
|
|
}
|
|
.col-span-8, .col-span-4 {
|
|
grid-column: span 1 !important;
|
|
}
|
|
}
|
|
|
|
/* Stat card hover transition effects */
|
|
.stat-card {
|
|
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
|
}
|
|
.stat-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08) !important;
|
|
border-color: rgba(192, 18, 39, 0.2) !important;
|
|
}
|
|
|
|
/* Team member row hover polish */
|
|
.team-row-hover:hover {
|
|
background-color: rgba(192, 18, 39, 0.04) !important;
|
|
}
|
|
`})]})}export{ve as default};
|