@wilow_app/design-system 0.1.9 → 0.2.0

package/dist/index.d.ts

@@ -57,6 +57,25 @@ export declare interface PathOrder {
         code: string;
         name: string;
     };
+    service?: {
+        id: number;
+        name: string;
+        service_unit: string;
+        type: {
+            code: string;
+            name: string;
+        };
+    };
+    plan_details?: {
+        id: number;
+        bags_count: number;
+        bag_size: string;
+        plan_type?: {
+            id: number;
+            name: string;
+            orders_count: number;
+        };
+    };
 }
 
 export declare interface PathStop {

package/dist/index.es.js

@@ -6389,7 +6389,7 @@ const ur = {
     });
   }), t;
 }, Ad = ({ order: e, pathPeriod: t, isFirst: n, isDone: r, renderOrderExtraData: o }) => {
-  var a, d, p, l, u, f;
+  var a, d, p, l, u, f, h, b, m;
   const [i, s] = me(!1), c = (d = (a = e.customer) == null ? void 0 : a.address) != null && d.lat && ((l = (p = e.customer) == null ? void 0 : p.address) != null && l.long) ? `https://maps.google.com/?q=${e.customer.address.lat},${e.customer.address.long}` : "#";
   return /* @__PURE__ */ A(
     "div",
@@ -6438,6 +6438,15 @@ const ur = {
               )
             ] })
           ] }),
+          /* @__PURE__ */ A("div", { style: w.gridItem, children: [
+            /* @__PURE__ */ C("div", { style: w.gridLabel, children: "SERVICE / PLAN" }),
+            /* @__PURE__ */ A("div", { style: w.gridValue, children: [
+              (h = e == null ? void 0 : e.service) == null ? void 0 : h.name,
+              " - ",
+              " ",
+              (m = (b = e == null ? void 0 : e.plan_details) == null ? void 0 : b.plan_type) == null ? void 0 : m.name
+            ] })
+          ] }),
           /* @__PURE__ */ A("div", { style: w.gridItem, children: [
             /* @__PURE__ */ C("div", { style: w.gridLabel, children: "PERIOD" }),
             /* @__PURE__ */ C("div", { style: w.gridValue, children: t })

package/dist/index.umd.js

@@ -181,4 +181,4 @@ ${mn.current.stack}
 
       Please be sure to add the {provided.placeholder} React Node as a child of your Droppable.
       More information: https://github.com/hello-pangea/dnd/blob/main/docs/api/droppable.md
-    `)}],sd=[function({props:t}){t.renderClone||(process.env.NODE_ENV!=="production"?f(!1,"Must provide a clone render function (renderClone) for virtual lists"):f())},function({getPlaceholderRef:t}){t()&&(process.env.NODE_ENV!=="production"?f(!1,"Expected virtual list to not have a placeholder"):f())}];function cd(e){Te(()=>{an(e,od),e.props.mode==="standard"&&an(e,id),e.props.mode==="virtual"&&an(e,sd)})}class ad extends D.PureComponent{constructor(...t){super(...t),this.state={isVisible:!!this.props.on,data:this.props.on,animate:this.props.shouldAnimate&&this.props.on?"open":"none"},this.onClose=()=>{this.state.animate==="close"&&this.setState({isVisible:!1})}}static getDerivedStateFromProps(t,n){return t.shouldAnimate?t.on?{isVisible:!0,data:t.on,animate:"open"}:n.isVisible?{isVisible:!0,data:n.data,animate:"close"}:{isVisible:!1,animate:"close",data:null}:{isVisible:!!t.on,data:t.on,animate:"none"}}render(){if(!this.state.isVisible)return null;const t={onClose:this.onClose,data:this.state.data,animate:this.state.animate};return this.props.children(t)}}const ld=e=>{const t=D.useContext(Ke);t||(process.env.NODE_ENV!=="production"?f(!1,"Could not find app context"):f());const{contextId:n,isMovementAllowed:r}=t,o=D.useRef(null),i=D.useRef(null),{children:s,droppableId:c,type:a,mode:d,direction:p,ignoreContainerClipping:l,isDropDisabled:u,isCombineEnabled:g,snapshot:h,useClone:b,updateViewportMaxScroll:m,getContainerForClone:E}=e,y=x(()=>o.current,[]),S=x((L=null)=>{o.current=L},[]),I=x(()=>i.current,[]),N=x((L=null)=>{i.current=L},[]);cd({props:e,getDroppableRef:y,getPlaceholderRef:I});const C=x(()=>{r()&&m({maxScroll:Fr()})},[r,m]);Ql({droppableId:c,type:a,mode:d,direction:p,isDropDisabled:u,isCombineEnabled:g,ignoreContainerClipping:l,getDroppableRef:y});const A=w(()=>D.createElement(ad,{on:e.placeholder,shouldAnimate:e.shouldAnimatePlaceholder},({onClose:L,data:J,animate:fe})=>D.createElement(rd,{placeholder:J,onClose:L,innerRef:N,animate:fe,contextId:n,onTransitionEnd:C})),[n,C,e.placeholder,e.shouldAnimatePlaceholder,N]),T=w(()=>({innerRef:S,placeholder:A,droppableProps:{"data-rfd-droppable-id":c,"data-rfd-droppable-context-id":n}}),[n,c,A,S]),H=b?b.dragging.draggableId:null,V=w(()=>({droppableId:c,type:a,isUsingCloneFor:H}),[c,H,a]);function z(){if(!b)return null;const{dragging:L,render:J}=b,fe=D.createElement(ho,{draggableId:L.draggableId,index:L.source.index,isClone:!0,isEnabled:!0,shouldRespectForcePress:!1,canDragInteractiveElements:!0},(Z,nt)=>J(Z,nt,L));return ot.createPortal(fe,E())}return D.createElement(tn.Provider,{value:V},s(T,h),z())};function dd(){return document.body||(process.env.NODE_ENV!=="production"?f(!1,"document.body is not ready"):f()),document.body}const No={mode:"standard",type:"DEFAULT",direction:"vertical",isDropDisabled:!1,isCombineEnabled:!1,ignoreContainerClipping:!1,renderClone:null,getContainerForClone:dd},xo=e=>{let t={...e},n;for(n in No)e[n]===void 0&&(t={...t,[n]:No[n]});return t},ln=(e,t)=>e===t.droppable.type,Io=(e,t)=>t.draggables[e.draggable.id],ud=zn(()=>{const e={placeholder:null,shouldAnimatePlaceholder:!0,snapshot:{isDraggingOver:!1,draggingOverWith:null,draggingFromThisWith:null,isUsingPlaceholder:!1},useClone:null},t={...e,shouldAnimatePlaceholder:!1},n=M(i=>({draggableId:i.id,type:i.type,source:{index:i.index,droppableId:i.droppableId}})),r=M((i,s,c,a,d,p)=>{const l=d.descriptor.id;if(d.descriptor.droppableId===i){const h=p?{render:p,dragging:n(d.descriptor)}:null,b={isDraggingOver:c,draggingOverWith:c?l:null,draggingFromThisWith:l,isUsingPlaceholder:!0};return{placeholder:d.placeholder,shouldAnimatePlaceholder:!1,snapshot:b,useClone:h}}if(!s)return t;if(!a)return e;const g={isDraggingOver:c,draggingOverWith:l,draggingFromThisWith:null,isUsingPlaceholder:!0};return{placeholder:d.placeholder,shouldAnimatePlaceholder:!0,snapshot:g,useClone:null}});return(i,s)=>{const c=xo(s),a=c.droppableId,d=c.type,p=!c.isDropDisabled,l=c.renderClone;if(Be(i)){const u=i.critical;if(!ln(d,u))return t;const g=Io(u,i.dimensions),h=W(i.impact)===a;return r(a,p,h,h,g,l)}if(i.phase==="DROP_ANIMATING"){const u=i.completed;if(!ln(d,u.critical))return t;const g=Io(u.critical,i.dimensions);return r(a,p,go(u.result)===a,W(u.impact)===a,g,l)}if(i.phase==="IDLE"&&i.completed&&!i.shouldFlush){const u=i.completed;if(!ln(d,u.critical))return t;const g=W(u.impact)===a,h=!!(u.impact.at&&u.impact.at.type==="COMBINE"),b=u.critical.droppable.id===a;return g?h?e:t:b?e:t}return t}},{updateViewportMaxScroll:ac},(e,t,n)=>({...xo(n),...e,...t}),{context:Yt,areStatePropsEqual:fo})(ld),pd=()=>v.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",style:{flexShrink:0},children:[v.jsx("path",{d:"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"}),v.jsx("circle",{cx:"12",cy:"10",r:"3"})]}),Co=()=>v.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",style:{flexShrink:0},children:[v.jsx("circle",{cx:"12",cy:"12",r:"10"}),v.jsx("polyline",{points:"12 6 12 12 16 14"})]}),fd=()=>v.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"#9ca3af",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",style:{cursor:"grab"},children:[v.jsx("line",{x1:"3",y1:"12",x2:"21",y2:"12"}),v.jsx("line",{x1:"3",y1:"6",x2:"21",y2:"6"}),v.jsx("line",{x1:"3",y1:"18",x2:"21",y2:"18"})]}),gd=()=>v.jsx("svg",{width:"25",height:"25",viewBox:"0 0 90 90",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:v.jsxs("g",{children:[v.jsx("polygon",{points:"37.95,64.44 23.78,50.27 30.85,43.2 37.95,50.3 59.15,29.1 66.22,36.17",fill:"#009E04"}),v.jsx("path",{d:"M45 90C20.187 90 0 69.813 0 45C0 20.187 20.187 0 45 0C69.813 0 90 20.187 90 45C90 69.813 69.813 90 45 90ZM45 10C25.701 10 10 25.701 10 45C10 64.299 25.701 80 45 80C64.299 80 80 64.299 80 45C80 25.701 64.299 10 45 10Z",fill:"#009E04",strokeLinecap:"round"})]})}),md=()=>v.jsxs("svg",{width:"25",height:"25",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[v.jsx("polyline",{points:"15 3 21 3 21 9"}),v.jsx("polyline",{points:"9 21 3 21 3 15"}),v.jsx("line",{x1:"21",y1:"3",x2:"14",y2:"10"}),v.jsx("line",{x1:"3",y1:"21",x2:"10",y2:"14"})]}),hd=()=>v.jsxs("svg",{width:"25",height:"25",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[v.jsx("polyline",{points:"4 14 10 14 10 20"}),v.jsx("polyline",{points:"20 10 14 10 14 4"}),v.jsx("line",{x1:"14",y1:"10",x2:"21",y2:"3"}),v.jsx("line",{x1:"3",y1:"21",x2:"10",y2:"14"})]}),So=e=>{if(!e)return"--:--";const t=new Date(e),n=t.getHours(),r=t.getMinutes(),o=n>=12?"PM":"AM";return`${n%12||12}:${r.toString().padStart(2,"0")} ${o}`},Oo=e=>{if(!e)return"--:--";const t=e.split("T")[1],[n,r]=t.split(":"),o=Number(n),i=o>=12?"PM":"AM";return`${o%12||12}:${r} ${i}`},dn=e=>typeof e=="object"&&(e!=null&&e.name)?e.name:e,tt=e=>{var t;return e?typeof e=="string"?e.toLowerCase()==="completed":((t=e==null?void 0:e.code)==null?void 0:t.toLowerCase())==="completed":!1},bd=e=>{const t=[];return[...e].sort((r,o)=>r.sequence_rank-o.sequence_rank).forEach(r=>{const o=t[t.length-1];o&&o.stop_id===r.stop_id?o.orders.push(r):t.push({stop_id:r.stop_id,sequence_rank:r.sequence_rank,orders:[r]})}),t},vd=({order:e,pathPeriod:t,isFirst:n,isDone:r,renderOrderExtraData:o})=>{var a,d,p,l,u,g;const[i,s]=D.useState(!1),c=(d=(a=e.customer)==null?void 0:a.address)!=null&&d.lat&&((l=(p=e.customer)==null?void 0:p.address)!=null&&l.long)?`https://maps.google.com/?q=${e.customer.address.lat},${e.customer.address.long}`:"#";return v.jsxs("div",{style:{...O.orderBlock,borderTop:n?"none":"1px solid #f3f4f6",backgroundColor:r?"#fafafa":"transparent"},children:[v.jsxs("div",{style:O.orderHeader,children:[v.jsxs("div",{style:O.gridItem,children:[v.jsxs("div",{style:O.gridLabel,children:["ORDER"," ",r&&v.jsx("span",{style:{color:"#16a34a",marginLeft:"4px"},children:"✓ DONE"})]}),v.jsxs("div",{style:O.gridValue,children:["#",e.order_id]})]}),o&&v.jsx("button",{onClick:()=>s(!i),style:O.expandButton,children:i?v.jsx(hd,{}):v.jsx(md,{})})]}),v.jsxs("div",{style:O.detailsGrid,children:[v.jsxs("div",{style:O.gridItem,children:[v.jsx("div",{style:O.gridLabel,children:"LOCATION"}),v.jsxs("div",{style:O.gridValueWithIcon,children:[v.jsx(pd,{}),v.jsx("a",{href:c,target:"_blank",rel:"noopener noreferrer",style:O.addressLink,children:((g=(u=e.customer)==null?void 0:u.address)==null?void 0:g.street_area)||"N/A"})]})]}),v.jsxs("div",{style:O.gridItem,children:[v.jsx("div",{style:O.gridLabel,children:"PERIOD"}),v.jsx("div",{style:O.gridValue,children:t})]}),v.jsxs("div",{style:O.gridItem,children:[v.jsx("div",{style:O.gridLabel,children:"TIME WINDOW"}),v.jsxs("div",{style:O.gridValueWithIcon,children:[v.jsx(Co,{})," ",v.jsxs("span",{style:O.direction,children:[Oo(e.eta_start)," - ",Oo(e.eta_end)]})]})]}),e.completed_at&&v.jsxs("div",{style:O.gridItem,children:[v.jsx("div",{style:O.gridLabel,children:"COMPLETED AT"}),v.jsxs("div",{style:O.gridValueWithIcon,children:[v.jsx(Co,{})," ",v.jsx("span",{style:O.direction,children:So(e.completed_at)})]})]})]}),i&&o&&v.jsx("div",{style:O.extraDataContainer,children:o(e)})]})},yd=({stopGroup:e,index:t,pathType:n,pathPeriod:r,canEditPath:o,isPathCompleted:i,renderStopActions:s,renderOrderExtraData:c})=>{const a=e.status?tt(e.status):e.orders.every(g=>tt(g.status)),[d,p]=D.useState(c?!a:!0),l=e.status?dn(e.status):a?"Completed":"Pending",u=!o||i||a;return v.jsx(kl,{draggableId:e.stop_id.toString(),index:t,isDragDisabled:u,children:g=>{var h,b;return v.jsxs("div",{ref:g.innerRef,...g.draggableProps,style:{...O.timelineItem,...g.draggableProps.style},children:[v.jsx("div",{style:{...O.bubble,...a?O.bubbleCompleted:O.bubblePending},children:t+1}),v.jsxs("div",{style:O.card,children:[v.jsxs("div",{style:O.cardHeader,children:[v.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[v.jsxs("span",{style:O.title,children:[n," #",e.sequence_rank]}),v.jsx("span",{style:a?O.badgeCompleted:O.badgePending,children:l}),e.completed_at&&v.jsxs("span",{style:{fontSize:"12px",color:"#6b7280"},children:["(",So(e.completed_at),")"]})]}),v.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"12px"},children:[v.jsx("button",{onClick:()=>{a&&c&&p(m=>!m)},children:a&&v.jsx(gd,{})}),!u&&v.jsx("div",{...g.dragHandleProps,children:v.jsx(fd,{})})]})]}),d&&v.jsxs(v.Fragment,{children:[v.jsxs("div",{style:O.customerName,children:["Customer: ",(b=(h=e.orders[0])==null?void 0:h.customer)==null?void 0:b.name]}),v.jsx("div",{style:O.ordersList,children:e.orders.map((m,E)=>v.jsx(vd,{order:m,pathPeriod:r,isFirst:E===0,isDone:tt(m.status),renderOrderExtraData:c},m.id))}),s&&v.jsx("div",{style:O.actionsSlot,children:s(e)})]})]})]})}})},Ed=({path:e,onReorder:t,renderStopActions:n,renderOrderExtraData:r,canEditPath:o=!0})=>{const[i,s]=D.useState([]);D.useEffect(()=>{if(e)if(e.stops&&e.stops.length>0){const d=e.stops.map(p=>({stop_id:p.id,sequence_rank:p.sequence_rank,status:p.status,completed_at:p.completed_at,orders:(e.path_orders||[]).filter(l=>l.stop_id===p.id).sort((l,u)=>l.sequence_rank-u.sequence_rank)})).sort((p,l)=>p.sequence_rank-l.sequence_rank);s(d)}else e.path_orders&&s(bd(e.path_orders))},[e]);const c=d=>{if(!d.destination)return;const p=Array.from(i),[l]=p.splice(d.source.index,1);p.splice(d.destination.index,0,l),s(p),t&&t(e.id,p.map(u=>u.stop_id))};if(!e||!i.length)return v.jsx("div",{children:"No Path Data"});const a=tt(e.status);return v.jsx("div",{style:O.container,children:v.jsx(Dl,{onDragEnd:c,children:v.jsx(ud,{droppableId:"path-list",children:d=>v.jsxs("div",{ref:d.innerRef,...d.droppableProps,style:O.timelineWrapper,children:[v.jsx("div",{style:O.verticalLine}),v.jsx("div",{style:{display:"flex",flexDirection:"column",gap:"24px"},children:i.map((p,l)=>v.jsx(yd,{stopGroup:p,index:l,pathType:dn(e.type),pathPeriod:dn(e.period),canEditPath:o,isPathCompleted:a,renderStopActions:n,renderOrderExtraData:r},p.stop_id))}),d.placeholder]})})})})},O={container:{fontFamily:"sans-serif",maxWidth:"800px",margin:"0 auto"},timelineWrapper:{position:"relative",padding:"20px 0"},verticalLine:{position:"absolute",right:"19px",top:"40px",bottom:"40px",width:"2px",backgroundColor:"#f3f4f6"},direction:{direction:"ltr"},timelineItem:{display:"flex",gap:"16px",marginBottom:"24px",position:"relative",zIndex:1},bubble:{width:"40px",height:"40px",borderRadius:"50%",display:"flex",alignItems:"center",justifyContent:"center",fontWeight:"bold",backgroundColor:"#fff",border:"2px solid",flexShrink:0},bubblePending:{borderColor:"#f3f4f6",color:"#9ca3af"},bubbleCompleted:{borderColor:"#dcfce7",color:"#16a34a",backgroundColor:"#f0fdf4"},card:{flex:1,backgroundColor:"#fff",border:"1px solid #f3f4f6",borderRadius:"12px",padding:"16px",boxShadow:"0 1px 3px rgba(0,0,0,0.1)",position:"relative"},cardHeader:{display:"flex",justifyContent:"space-between",marginBottom:"8px",alignItems:"center"},title:{fontSize:"16px",fontWeight:"bold"},badgePending:{fontSize:"11px",padding:"2px 8px",borderRadius:"12px",backgroundColor:"#f3f4f6",color:"#4b5563",fontWeight:"600"},badgeCompleted:{fontSize:"11px",padding:"2px 8px",borderRadius:"12px",backgroundColor:"#dcfce7",color:"#16a34a",fontWeight:"600"},customerName:{fontSize:"14px",color:"#6b7280",marginBottom:"12px"},ordersList:{backgroundColor:"#f9fafb",borderRadius:"8px",overflow:"hidden"},orderBlock:{padding:"12px",transition:"background-color 0.2s"},orderHeader:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",marginBottom:"8px"},detailsGrid:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:"12px"},gridItem:{display:"flex",flexDirection:"column"},gridLabel:{fontSize:"10px",color:"#9ca3af",fontWeight:"bold"},gridValue:{fontSize:"13px",fontWeight:"600"},gridValueWithIcon:{fontSize:"13px",display:"flex",alignItems:"flex-start",gap:"4px",color:"#374151"},addressLink:{color:"#3b82f6",textDecoration:"underline",wordBreak:"break-word",lineHeight:"1.4"},expandButton:{color:"#fff",border:"none",cursor:"pointer",backgroundColor:"#d1d1d1",borderRadius:"5px",padding:"4px",display:"flex",alignItems:"center",justifyContent:"center"},extraDataContainer:{marginTop:"12px",padding:"12px",borderTop:"1px dashed #e5e7eb",backgroundColor:"#fff",borderRadius:"4px"},actionsSlot:{marginTop:"16px"}};Q.LogisticsDashboard=Ed,Object.defineProperty(Q,Symbol.toStringTag,{value:"Module"})});
+    `)}],sd=[function({props:t}){t.renderClone||(process.env.NODE_ENV!=="production"?f(!1,"Must provide a clone render function (renderClone) for virtual lists"):f())},function({getPlaceholderRef:t}){t()&&(process.env.NODE_ENV!=="production"?f(!1,"Expected virtual list to not have a placeholder"):f())}];function cd(e){Te(()=>{an(e,od),e.props.mode==="standard"&&an(e,id),e.props.mode==="virtual"&&an(e,sd)})}class ad extends D.PureComponent{constructor(...t){super(...t),this.state={isVisible:!!this.props.on,data:this.props.on,animate:this.props.shouldAnimate&&this.props.on?"open":"none"},this.onClose=()=>{this.state.animate==="close"&&this.setState({isVisible:!1})}}static getDerivedStateFromProps(t,n){return t.shouldAnimate?t.on?{isVisible:!0,data:t.on,animate:"open"}:n.isVisible?{isVisible:!0,data:n.data,animate:"close"}:{isVisible:!1,animate:"close",data:null}:{isVisible:!!t.on,data:t.on,animate:"none"}}render(){if(!this.state.isVisible)return null;const t={onClose:this.onClose,data:this.state.data,animate:this.state.animate};return this.props.children(t)}}const ld=e=>{const t=D.useContext(Ke);t||(process.env.NODE_ENV!=="production"?f(!1,"Could not find app context"):f());const{contextId:n,isMovementAllowed:r}=t,o=D.useRef(null),i=D.useRef(null),{children:s,droppableId:c,type:a,mode:d,direction:p,ignoreContainerClipping:l,isDropDisabled:u,isCombineEnabled:g,snapshot:h,useClone:b,updateViewportMaxScroll:m,getContainerForClone:E}=e,y=x(()=>o.current,[]),S=x((L=null)=>{o.current=L},[]),I=x(()=>i.current,[]),N=x((L=null)=>{i.current=L},[]);cd({props:e,getDroppableRef:y,getPlaceholderRef:I});const C=x(()=>{r()&&m({maxScroll:Fr()})},[r,m]);Ql({droppableId:c,type:a,mode:d,direction:p,isDropDisabled:u,isCombineEnabled:g,ignoreContainerClipping:l,getDroppableRef:y});const A=w(()=>D.createElement(ad,{on:e.placeholder,shouldAnimate:e.shouldAnimatePlaceholder},({onClose:L,data:J,animate:fe})=>D.createElement(rd,{placeholder:J,onClose:L,innerRef:N,animate:fe,contextId:n,onTransitionEnd:C})),[n,C,e.placeholder,e.shouldAnimatePlaceholder,N]),T=w(()=>({innerRef:S,placeholder:A,droppableProps:{"data-rfd-droppable-id":c,"data-rfd-droppable-context-id":n}}),[n,c,A,S]),H=b?b.dragging.draggableId:null,V=w(()=>({droppableId:c,type:a,isUsingCloneFor:H}),[c,H,a]);function z(){if(!b)return null;const{dragging:L,render:J}=b,fe=D.createElement(ho,{draggableId:L.draggableId,index:L.source.index,isClone:!0,isEnabled:!0,shouldRespectForcePress:!1,canDragInteractiveElements:!0},(Z,nt)=>J(Z,nt,L));return ot.createPortal(fe,E())}return D.createElement(tn.Provider,{value:V},s(T,h),z())};function dd(){return document.body||(process.env.NODE_ENV!=="production"?f(!1,"document.body is not ready"):f()),document.body}const No={mode:"standard",type:"DEFAULT",direction:"vertical",isDropDisabled:!1,isCombineEnabled:!1,ignoreContainerClipping:!1,renderClone:null,getContainerForClone:dd},xo=e=>{let t={...e},n;for(n in No)e[n]===void 0&&(t={...t,[n]:No[n]});return t},ln=(e,t)=>e===t.droppable.type,Io=(e,t)=>t.draggables[e.draggable.id],ud=zn(()=>{const e={placeholder:null,shouldAnimatePlaceholder:!0,snapshot:{isDraggingOver:!1,draggingOverWith:null,draggingFromThisWith:null,isUsingPlaceholder:!1},useClone:null},t={...e,shouldAnimatePlaceholder:!1},n=M(i=>({draggableId:i.id,type:i.type,source:{index:i.index,droppableId:i.droppableId}})),r=M((i,s,c,a,d,p)=>{const l=d.descriptor.id;if(d.descriptor.droppableId===i){const h=p?{render:p,dragging:n(d.descriptor)}:null,b={isDraggingOver:c,draggingOverWith:c?l:null,draggingFromThisWith:l,isUsingPlaceholder:!0};return{placeholder:d.placeholder,shouldAnimatePlaceholder:!1,snapshot:b,useClone:h}}if(!s)return t;if(!a)return e;const g={isDraggingOver:c,draggingOverWith:l,draggingFromThisWith:null,isUsingPlaceholder:!0};return{placeholder:d.placeholder,shouldAnimatePlaceholder:!0,snapshot:g,useClone:null}});return(i,s)=>{const c=xo(s),a=c.droppableId,d=c.type,p=!c.isDropDisabled,l=c.renderClone;if(Be(i)){const u=i.critical;if(!ln(d,u))return t;const g=Io(u,i.dimensions),h=W(i.impact)===a;return r(a,p,h,h,g,l)}if(i.phase==="DROP_ANIMATING"){const u=i.completed;if(!ln(d,u.critical))return t;const g=Io(u.critical,i.dimensions);return r(a,p,go(u.result)===a,W(u.impact)===a,g,l)}if(i.phase==="IDLE"&&i.completed&&!i.shouldFlush){const u=i.completed;if(!ln(d,u.critical))return t;const g=W(u.impact)===a,h=!!(u.impact.at&&u.impact.at.type==="COMBINE"),b=u.critical.droppable.id===a;return g?h?e:t:b?e:t}return t}},{updateViewportMaxScroll:ac},(e,t,n)=>({...xo(n),...e,...t}),{context:Yt,areStatePropsEqual:fo})(ld),pd=()=>v.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",style:{flexShrink:0},children:[v.jsx("path",{d:"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"}),v.jsx("circle",{cx:"12",cy:"10",r:"3"})]}),Co=()=>v.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",style:{flexShrink:0},children:[v.jsx("circle",{cx:"12",cy:"12",r:"10"}),v.jsx("polyline",{points:"12 6 12 12 16 14"})]}),fd=()=>v.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"#9ca3af",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",style:{cursor:"grab"},children:[v.jsx("line",{x1:"3",y1:"12",x2:"21",y2:"12"}),v.jsx("line",{x1:"3",y1:"6",x2:"21",y2:"6"}),v.jsx("line",{x1:"3",y1:"18",x2:"21",y2:"18"})]}),gd=()=>v.jsx("svg",{width:"25",height:"25",viewBox:"0 0 90 90",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:v.jsxs("g",{children:[v.jsx("polygon",{points:"37.95,64.44 23.78,50.27 30.85,43.2 37.95,50.3 59.15,29.1 66.22,36.17",fill:"#009E04"}),v.jsx("path",{d:"M45 90C20.187 90 0 69.813 0 45C0 20.187 20.187 0 45 0C69.813 0 90 20.187 90 45C90 69.813 69.813 90 45 90ZM45 10C25.701 10 10 25.701 10 45C10 64.299 25.701 80 45 80C64.299 80 80 64.299 80 45C80 25.701 64.299 10 45 10Z",fill:"#009E04",strokeLinecap:"round"})]})}),md=()=>v.jsxs("svg",{width:"25",height:"25",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[v.jsx("polyline",{points:"15 3 21 3 21 9"}),v.jsx("polyline",{points:"9 21 3 21 3 15"}),v.jsx("line",{x1:"21",y1:"3",x2:"14",y2:"10"}),v.jsx("line",{x1:"3",y1:"21",x2:"10",y2:"14"})]}),hd=()=>v.jsxs("svg",{width:"25",height:"25",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[v.jsx("polyline",{points:"4 14 10 14 10 20"}),v.jsx("polyline",{points:"20 10 14 10 14 4"}),v.jsx("line",{x1:"14",y1:"10",x2:"21",y2:"3"}),v.jsx("line",{x1:"3",y1:"21",x2:"10",y2:"14"})]}),So=e=>{if(!e)return"--:--";const t=new Date(e),n=t.getHours(),r=t.getMinutes(),o=n>=12?"PM":"AM";return`${n%12||12}:${r.toString().padStart(2,"0")} ${o}`},Oo=e=>{if(!e)return"--:--";const t=e.split("T")[1],[n,r]=t.split(":"),o=Number(n),i=o>=12?"PM":"AM";return`${o%12||12}:${r} ${i}`},dn=e=>typeof e=="object"&&(e!=null&&e.name)?e.name:e,tt=e=>{var t;return e?typeof e=="string"?e.toLowerCase()==="completed":((t=e==null?void 0:e.code)==null?void 0:t.toLowerCase())==="completed":!1},bd=e=>{const t=[];return[...e].sort((r,o)=>r.sequence_rank-o.sequence_rank).forEach(r=>{const o=t[t.length-1];o&&o.stop_id===r.stop_id?o.orders.push(r):t.push({stop_id:r.stop_id,sequence_rank:r.sequence_rank,orders:[r]})}),t},vd=({order:e,pathPeriod:t,isFirst:n,isDone:r,renderOrderExtraData:o})=>{var a,d,p,l,u,g,h,b,m;const[i,s]=D.useState(!1),c=(d=(a=e.customer)==null?void 0:a.address)!=null&&d.lat&&((l=(p=e.customer)==null?void 0:p.address)!=null&&l.long)?`https://maps.google.com/?q=${e.customer.address.lat},${e.customer.address.long}`:"#";return v.jsxs("div",{style:{...O.orderBlock,borderTop:n?"none":"1px solid #f3f4f6",backgroundColor:r?"#fafafa":"transparent"},children:[v.jsxs("div",{style:O.orderHeader,children:[v.jsxs("div",{style:O.gridItem,children:[v.jsxs("div",{style:O.gridLabel,children:["ORDER"," ",r&&v.jsx("span",{style:{color:"#16a34a",marginLeft:"4px"},children:"✓ DONE"})]}),v.jsxs("div",{style:O.gridValue,children:["#",e.order_id]})]}),o&&v.jsx("button",{onClick:()=>s(!i),style:O.expandButton,children:i?v.jsx(hd,{}):v.jsx(md,{})})]}),v.jsxs("div",{style:O.detailsGrid,children:[v.jsxs("div",{style:O.gridItem,children:[v.jsx("div",{style:O.gridLabel,children:"LOCATION"}),v.jsxs("div",{style:O.gridValueWithIcon,children:[v.jsx(pd,{}),v.jsx("a",{href:c,target:"_blank",rel:"noopener noreferrer",style:O.addressLink,children:((g=(u=e.customer)==null?void 0:u.address)==null?void 0:g.street_area)||"N/A"})]})]}),v.jsxs("div",{style:O.gridItem,children:[v.jsx("div",{style:O.gridLabel,children:"SERVICE / PLAN"}),v.jsxs("div",{style:O.gridValue,children:[(h=e==null?void 0:e.service)==null?void 0:h.name," - "," ",(m=(b=e==null?void 0:e.plan_details)==null?void 0:b.plan_type)==null?void 0:m.name]})]}),v.jsxs("div",{style:O.gridItem,children:[v.jsx("div",{style:O.gridLabel,children:"PERIOD"}),v.jsx("div",{style:O.gridValue,children:t})]}),v.jsxs("div",{style:O.gridItem,children:[v.jsx("div",{style:O.gridLabel,children:"TIME WINDOW"}),v.jsxs("div",{style:O.gridValueWithIcon,children:[v.jsx(Co,{})," ",v.jsxs("span",{style:O.direction,children:[Oo(e.eta_start)," - ",Oo(e.eta_end)]})]})]}),e.completed_at&&v.jsxs("div",{style:O.gridItem,children:[v.jsx("div",{style:O.gridLabel,children:"COMPLETED AT"}),v.jsxs("div",{style:O.gridValueWithIcon,children:[v.jsx(Co,{})," ",v.jsx("span",{style:O.direction,children:So(e.completed_at)})]})]})]}),i&&o&&v.jsx("div",{style:O.extraDataContainer,children:o(e)})]})},yd=({stopGroup:e,index:t,pathType:n,pathPeriod:r,canEditPath:o,isPathCompleted:i,renderStopActions:s,renderOrderExtraData:c})=>{const a=e.status?tt(e.status):e.orders.every(g=>tt(g.status)),[d,p]=D.useState(c?!a:!0),l=e.status?dn(e.status):a?"Completed":"Pending",u=!o||i||a;return v.jsx(kl,{draggableId:e.stop_id.toString(),index:t,isDragDisabled:u,children:g=>{var h,b;return v.jsxs("div",{ref:g.innerRef,...g.draggableProps,style:{...O.timelineItem,...g.draggableProps.style},children:[v.jsx("div",{style:{...O.bubble,...a?O.bubbleCompleted:O.bubblePending},children:t+1}),v.jsxs("div",{style:O.card,children:[v.jsxs("div",{style:O.cardHeader,children:[v.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[v.jsxs("span",{style:O.title,children:[n," #",e.sequence_rank]}),v.jsx("span",{style:a?O.badgeCompleted:O.badgePending,children:l}),e.completed_at&&v.jsxs("span",{style:{fontSize:"12px",color:"#6b7280"},children:["(",So(e.completed_at),")"]})]}),v.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"12px"},children:[v.jsx("button",{onClick:()=>{a&&c&&p(m=>!m)},children:a&&v.jsx(gd,{})}),!u&&v.jsx("div",{...g.dragHandleProps,children:v.jsx(fd,{})})]})]}),d&&v.jsxs(v.Fragment,{children:[v.jsxs("div",{style:O.customerName,children:["Customer: ",(b=(h=e.orders[0])==null?void 0:h.customer)==null?void 0:b.name]}),v.jsx("div",{style:O.ordersList,children:e.orders.map((m,E)=>v.jsx(vd,{order:m,pathPeriod:r,isFirst:E===0,isDone:tt(m.status),renderOrderExtraData:c},m.id))}),s&&v.jsx("div",{style:O.actionsSlot,children:s(e)})]})]})]})}})},Ed=({path:e,onReorder:t,renderStopActions:n,renderOrderExtraData:r,canEditPath:o=!0})=>{const[i,s]=D.useState([]);D.useEffect(()=>{if(e)if(e.stops&&e.stops.length>0){const d=e.stops.map(p=>({stop_id:p.id,sequence_rank:p.sequence_rank,status:p.status,completed_at:p.completed_at,orders:(e.path_orders||[]).filter(l=>l.stop_id===p.id).sort((l,u)=>l.sequence_rank-u.sequence_rank)})).sort((p,l)=>p.sequence_rank-l.sequence_rank);s(d)}else e.path_orders&&s(bd(e.path_orders))},[e]);const c=d=>{if(!d.destination)return;const p=Array.from(i),[l]=p.splice(d.source.index,1);p.splice(d.destination.index,0,l),s(p),t&&t(e.id,p.map(u=>u.stop_id))};if(!e||!i.length)return v.jsx("div",{children:"No Path Data"});const a=tt(e.status);return v.jsx("div",{style:O.container,children:v.jsx(Dl,{onDragEnd:c,children:v.jsx(ud,{droppableId:"path-list",children:d=>v.jsxs("div",{ref:d.innerRef,...d.droppableProps,style:O.timelineWrapper,children:[v.jsx("div",{style:O.verticalLine}),v.jsx("div",{style:{display:"flex",flexDirection:"column",gap:"24px"},children:i.map((p,l)=>v.jsx(yd,{stopGroup:p,index:l,pathType:dn(e.type),pathPeriod:dn(e.period),canEditPath:o,isPathCompleted:a,renderStopActions:n,renderOrderExtraData:r},p.stop_id))}),d.placeholder]})})})})},O={container:{fontFamily:"sans-serif",maxWidth:"800px",margin:"0 auto"},timelineWrapper:{position:"relative",padding:"20px 0"},verticalLine:{position:"absolute",right:"19px",top:"40px",bottom:"40px",width:"2px",backgroundColor:"#f3f4f6"},direction:{direction:"ltr"},timelineItem:{display:"flex",gap:"16px",marginBottom:"24px",position:"relative",zIndex:1},bubble:{width:"40px",height:"40px",borderRadius:"50%",display:"flex",alignItems:"center",justifyContent:"center",fontWeight:"bold",backgroundColor:"#fff",border:"2px solid",flexShrink:0},bubblePending:{borderColor:"#f3f4f6",color:"#9ca3af"},bubbleCompleted:{borderColor:"#dcfce7",color:"#16a34a",backgroundColor:"#f0fdf4"},card:{flex:1,backgroundColor:"#fff",border:"1px solid #f3f4f6",borderRadius:"12px",padding:"16px",boxShadow:"0 1px 3px rgba(0,0,0,0.1)",position:"relative"},cardHeader:{display:"flex",justifyContent:"space-between",marginBottom:"8px",alignItems:"center"},title:{fontSize:"16px",fontWeight:"bold"},badgePending:{fontSize:"11px",padding:"2px 8px",borderRadius:"12px",backgroundColor:"#f3f4f6",color:"#4b5563",fontWeight:"600"},badgeCompleted:{fontSize:"11px",padding:"2px 8px",borderRadius:"12px",backgroundColor:"#dcfce7",color:"#16a34a",fontWeight:"600"},customerName:{fontSize:"14px",color:"#6b7280",marginBottom:"12px"},ordersList:{backgroundColor:"#f9fafb",borderRadius:"8px",overflow:"hidden"},orderBlock:{padding:"12px",transition:"background-color 0.2s"},orderHeader:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",marginBottom:"8px"},detailsGrid:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:"12px"},gridItem:{display:"flex",flexDirection:"column"},gridLabel:{fontSize:"10px",color:"#9ca3af",fontWeight:"bold"},gridValue:{fontSize:"13px",fontWeight:"600"},gridValueWithIcon:{fontSize:"13px",display:"flex",alignItems:"flex-start",gap:"4px",color:"#374151"},addressLink:{color:"#3b82f6",textDecoration:"underline",wordBreak:"break-word",lineHeight:"1.4"},expandButton:{color:"#fff",border:"none",cursor:"pointer",backgroundColor:"#d1d1d1",borderRadius:"5px",padding:"4px",display:"flex",alignItems:"center",justifyContent:"center"},extraDataContainer:{marginTop:"12px",padding:"12px",borderTop:"1px dashed #e5e7eb",backgroundColor:"#fff",borderRadius:"4px"},actionsSlot:{marginTop:"16px"}};Q.LogisticsDashboard=Ed,Object.defineProperty(Q,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,38 +1,39 @@
-{
-  "name": "@wilow_app/design-system",
-  "version": "0.1.9",
-  "type": "module",
-  "files": [
-    "dist"
-  ],
-  "main": "./dist/index.umd.js",
-  "module": "./dist/index.es.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js"
-    }
-  },
-  "scripts": {
-    "build": "npx tsc && npx vite build"
-  },
-  "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18"
-  },
-  "devDependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "@vitejs/plugin-react": "^4.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "typescript": "^5.0.0",
-    "vite": "^5.4.21",
-    "vite-plugin-dts": "^3.0.0"
-  },
-  "dependencies": {
-    "@hello-pangea/dnd": "^18.0.1"
-  }
-}
+{
+  "name": "@wilow_app/design-system",
+  "version": "0.2.0",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
+    }
+  },
+  "scripts": {
+    "build": "npx tsc && npx vite build"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/node": "^26.1.1",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.4.21",
+    "vite-plugin-dts": "^3.0.0"
+  },
+  "dependencies": {
+    "@hello-pangea/dnd": "^18.0.1"
+  }
+}