need colors finished

app.js

@@ -132,77 +132,102 @@ function Desks(inDesks)
                 }
             }
 
-            let emptyCount = 0;
-
-            /** @type {(part:TYPES.Part, index:number, array:TYPES.Part[], pass:TYPES.Pass, dirty:number[], type:"need"|"make")=>HTMLElement|null} */
-            const Iterator = (part, index, array, pass, dirty, type)=>{
-
-                const partPass = part.pass.get(pass);
-                if(partPass)
-                {
-                    const time = partPass.time;
-                    const latest = partPass.work.find(t=>t[0] == time);
-
-                    if(type == "need")
-                    {
-                        if(!latest)
-                        {
-                            emptyCount++;
-                        }
-                    }
-
-                    const attributes = {
-                        class: dirty.includes(index) ? Tag("DeskDirty") : (type == "need"&&!latest) ? Tag("PartEmpty") : ""
-                    };
-
-
-                    if(type == "make")
-                    {
-                        attributes.onclick=function(){
-                            loggedIn.rawVal && van.add(this, Input((str)=>{
-                                if(loggedIn.rawVal)
-                                {
-                                    blocking.val = true;
-                                    partPass.make(loggedIn.rawVal, str).then(()=>{
-                                        deskRender.val++;
-                                        blocking.val = false;
-                                    })
-                                }
-                                else
-                                {
-                                    return false;
-                                }
-                                
-                            }));
-                        }
-                    }
-
-                    return DOM.td(
-                        Div.Part(
-                            attributes,
-                            latest?.[1] || ""
-                        )
-                    );
-                }
-                return null;
-            }
 
             const work = [];
-            for(const [pass, dirty] of desk.pass)
+            for(const [pass, scan] of desk.pass)
             {
-                emptyCount = 0;
 
-                const need = desk.need.map((part, index, array)=>Iterator(part, index, array, pass, dirty.need, "need"));
-                if(desk.need.length == 0 || emptyCount == 0)
-                {
-
-                }
+                // at least one but not all need fields are empty
+                const caution = scan.need_empty.length>0 && scan.need_empty.length<desk.need.length;
                 
                 work.push(DOM.tr(
                     DOM.td(pass.name),
-                    need,
-                    DOM.td("->"),
-                    desk.make.map((part, index, array)=>Iterator(part, index, array, pass, dirty.make, "make"))
+                    desk.need.map((part, index, array)=>
+                    {
+                        const partPass = part.pass.get(pass);
+                        if(!partPass){ return null }
+                        const latest = partPass.work.find(t=>t[0] == partPass.time)?.[1];
+
+                        const attributes = {};
+
+                        if(latest)
+                        {
+                            attributes.class = Tag("PartGood")
+                        }
+                        else
+                        {
+                            attributes.class = caution ? Tag("PartCaution") : Tag("PartEmpty")
+                        }
+
+                        if(scan.need_dirty.includes(index))
+                        {
+                            attributes.class = Tag("PartDirty")
+                        }
+
+                        return DOM.td(
+                            Div.Part(
+                                attributes,
+                                latest
+                            )
+                        );
+                    }),
+                    DOM.td("⇉"),
+                    desk.make.map((part, index, array)=>
+                    {
+                        const partPass = part.pass.get(pass);
+                        if(!partPass){ return null }
+                        const latest = partPass.work.find(t=>t[0] == partPass.time)?.[1];
+
+                        const attributes = {
+                            onclick(){
+                                loggedIn.rawVal && van.add(this, Input((str)=>{
+                                    if(loggedIn.rawVal)
+                                    {
+                                        blocking.val = true;
+                                        partPass.make(loggedIn.rawVal, str).then(()=>{
+                                            deskRender.val++;
+                                            blocking.val = false;
+                                        })
+                                    }
+                                    else
+                                    {
+                                        return false;
+                                    }
+                                    
+                                }));
+                            }
+                        };
+                        
+
+                        if(latest)
+                        {
+                            attributes.class = Tag("PartGood")
+                        }
+                        else
+                        {
+                            attributes.class = Tag("PartEmpty")
+                        }
+
+                        if( (desk.need.length==0 && !latest) || scan.make_dirty.includes(index))
+                        {
+                            
+                            if(!latest && caution)
+                            {
+                                attributes.class = Tag("PartCaution")
+                            }
+                            else
+                            {
+                                attributes.class = Tag("PartDirty");
+                            }
+                        }   
+
+                        return DOM.td(
+                            Div.Part(
+                                attributes,
+                                latest
+                            )
+                        );
+                    }),
                 ))
             }
 
@@ -214,7 +239,7 @@ function Desks(inDesks)
                         DOM.tr(
                             DOM.th(),
                             desk.need.map((part, index)=>DOM.th(part.name)),
-                            DOM.th(),
+                            DOM.th("→"),
                             desk.make.map((part, index)=>DOM.th(part.name))
                         )
                     ),

graph/graph.js

@@ -219,6 +219,9 @@ const Scan =(desk, pass)=>
     const dirtyNeed = [];
     const dirtyMake = [];
 
+    const emptyNeed = [];
+    const emptyMake = [];
+
     let makeMin = Infinity;
     let needMax = -Infinity;
 
@@ -228,6 +231,7 @@ const Scan =(desk, pass)=>
         const part = desk.need[i];
         const partPassTime = part.pass.get(pass)?.time || 0;
         if(partPassTime > needMax) needMax = partPassTime;
+        if(!partPassTime) emptyNeed.push(i)
     }
 
     // update makeMin AND dirty check makes
@@ -236,10 +240,8 @@ const Scan =(desk, pass)=>
         const part = desk.make[i];
         const partPassTime = part.pass.get(pass)?.time || 0;
         if(partPassTime < makeMin) makeMin = partPassTime;
-        if(partPassTime < needMax)
-        {
-            dirtyMake.push(i);
-        } 
+        if(partPassTime < needMax) dirtyMake.push(i);
+        if(!partPassTime) emptyMake.push(i)
     }
 
     // dirty check needs
@@ -247,11 +249,8 @@ const Scan =(desk, pass)=>
     {
         const part = desk.need[i];
         const partPassTime = part.pass.get(pass)?.time || 0;
-        if(partPassTime > makeMin)
-        {
-            dirtyNeed.push(i);
-        }
+        if(partPassTime > makeMin) dirtyNeed.push(i);
     }
     
-    desk.pass.set(pass, {need:dirtyNeed, make:dirtyMake})
+    desk.pass.set(pass, {need_dirty:dirtyNeed, make_dirty:dirtyMake, need_empty:emptyNeed, make_empty:emptyMake})
 };

graph/types.ts

@@ -1,10 +1,10 @@
 export type User = {name:string, id:string, desk:Set<Desk>};
 export type Role = {name:string, id:string, user:User[]};
-export type Desk = {name:string, id:string, need:Part[], time:number[], make:Part[], pass:Map<Pass, Flag>, mode:string, role:Role[]};
+export type Desk = {name:string, id:string, need:Part[], time:number[], make:Part[], pass:Map<Pass, Scan>, mode:string, role:Role[]};
 export type Pass = {name:string, id:string, path:string, live:boolean, load:()=>Promise<void>, dump:()=>void};
 export type Part = {name:string, id:string, pass:Map<Pass, {time:number, work:Work[], make:(user:User, data:string)=>Promise<void>}>, need:Desk[], make:Desk[]};
 export type Work = [time:number, data:string, user:User];
-export type Flag = {need:number[], make:number[]}
+export type Scan = {need_dirty:number[], make_dirty:number[], need_empty:number[], make_empty:number[]}
 
 export type GraphBuilder=
 <

mock-user-folder/graph/room.js

@@ -8,13 +8,13 @@ const user = {
     u6:"Matt Y",
     u7:"Seth F",
     u8:"Brittany F"
-}
+};
 
 export default CreateAllRooms({
     room_01:Room({
         user,
         role:{
-            dev:["Development", "u1"],
+              dev:["Development", "u1"],
             write:["Writing", "u5"],
             admin:["Admin", "u4"]
         },
@@ -22,15 +22,20 @@ export default CreateAllRooms({
             p1:"Page title",
             p2:"Page slug",
             p3:"Page preview",
+            p4:"Page Project",
         },
         desk:{
             d1:["Write page metas",   ["admin", "write"], "all", {},           "p1", "p2"],
-            d2:["Build Page preview", ["admin", "dev"],   "all", {p1:1, p2:1}, "p3"      ]
+            d2:["Build Page preview", ["admin", "dev"],   "all", {p1:1, p2:1}, "p3", "p4"]
         },
         pass:{
             pass_01:["January"],
             pass_02:["February"],
             pass_03:["March"],
+            pass_04:["April"],
+            pass_05:["May"],
+            pass_06:["June"],
+            pass_07:["July"],
         }
     })
 });

mock-user-folder/store/room_01/pass_01/u1.json

@@ -1,9 +0,0 @@
-{
-    "p1":
-    [
-        [123, "data"],
-        [456, "more data"],
-        [789, "even more data"],
-        [101112, "even more data"]
-    ]
-}

mock-user-folder/store/room_01/pass_01/u2.json

@@ -1,8 +0,0 @@
-{
-    "p2":
-    [
-        [123, "data"],
-        [456, "more data"],
-        [789, "even more data"]
-    ]
-}

mock-user-folder/store/room_01/pass_01/u4.json

@@ -0,0 +1,14 @@
+{
+  "p1": [
+    [
+      1762196165935,
+      "normal title"
+    ]
+  ],
+  "p2": [
+    [
+      1762196173135,
+      "normal slug"
+    ]
+  ]
+}

mock-user-folder/store/room_01/pass_02/u1.json

@@ -0,0 +1,8 @@
+{
+  "p4": [
+    [
+      1762193485093,
+      "Make made Late"
+    ]
+  ]
+}

mock-user-folder/store/room_01/pass_02/u5.json

@@ -0,0 +1,8 @@
+{
+  "p1": [
+    [
+      1762186057868,
+      "Need made Early"
+    ]
+  ]
+}

mock-user-folder/store/room_01/pass_03/u4.json

@@ -0,0 +1,14 @@
+{
+  "p4": [
+    [
+      1762196034794,
+      "Make made Early"
+    ]
+  ],
+  "p1": [
+    [
+      1762196047017,
+      "Need made Late"
+    ]
+  ]
+}

mock-user-folder/store/room_01/pass_04/u1.json

@@ -0,0 +1,14 @@
+{
+  "p3": [
+    [
+      1762196236384,
+      "complete 3"
+    ]
+  ],
+  "p4": [
+    [
+      1762196245327,
+      "complete 4"
+    ]
+  ]
+}

mock-user-folder/store/room_01/pass_04/u5.json

@@ -0,0 +1,14 @@
+{
+  "p1": [
+    [
+      1762196209704,
+      "complete 1"
+    ]
+  ],
+  "p2": [
+    [
+      1762196217319,
+      "complete 2"
+    ]
+  ]
+}

mock-user-folder/store/room_01/pass_05/u1.json

@@ -0,0 +1,18 @@
+{
+  "p3": [
+    [
+      1762196341950,
+      "complete 3"
+    ]
+  ],
+  "p4": [
+    [
+      1762196348950,
+      "complete 4"
+    ],
+    [
+      1762196393702,
+      "complete Later"
+    ]
+  ]
+}

mock-user-folder/store/room_01/pass_05/u5.json

@@ -0,0 +1,18 @@
+{
+  "p1": [
+    [
+      1762196328127,
+      "complete 1"
+    ]
+  ],
+  "p2": [
+    [
+      1762196335342,
+      "complete 2"
+    ],
+    [
+      1762196363079,
+      "complete Late"
+    ]
+  ]
+}

mock-user-folder/store/room_01/pass_07/u5.json

@@ -0,0 +1,8 @@
+{
+  "p1": [
+    [
+      1762201681431,
+      "underway"
+    ]
+  ]
+}

styles.js

@@ -12,11 +12,25 @@ export default Gale({
     Part:{
         border: `1px solid black`,
         borderRadius: `5px`,
-        padding: `1rem`
+        padding: `1rem`,
+    },
+    PartGood:{
+        background:"#009b2e",
+        color:"white",
+        fontWeight: "bolder",
     },
     PartEmpty:{
         background:"gray"
     },
+    PartDirty:{
+        background:"tomato",
+        color:"black",
+        fontWeight:"bolder"
+    },
+    PartCaution:{
+        background:"yellow",
+        color:"black",
+    },
     BlockScreen:{
         position: "fixed",
         zIndex: "9999",
@@ -31,10 +45,6 @@ export default Gale({
         borderRadius: `5px`,
         padding: `1rem`
     },
-    DeskDirty:{
-        background:"tomato",
-        color:"white",
-    },
     GapHorizontal:{
         borderCollapse:"separate",
         borderSpacing:"0 2rem",