From d37dbc4f62a7fc91c9f216ab2f94989e932a397a Mon Sep 17 00:00:00 2001
From: Arif Hasanic <arif@hasanic.com>
Date: Thu, 28 Aug 2025 22:22:14 +0200
Subject: [PATCH] sort chores using due date, color tasks according to due
 level

---
 .github/workflows/ci.yml                  |  2 +-
 src/components/Flatastic/Flatastic.tsx    | 43 +++++++++++++++++------
 src/components/Flatastic/style.module.css | 12 +++++++
 src/store/flatastic.ts                    |  2 --
 src/store/kvv.ts                          |  5 ---
 5 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 21a483d..9041556 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -16,7 +16,7 @@ jobs:
       - uses: actions/checkout@v4
       - name: Install Biome
         run: bun install -g biome
-      - name: Biome Check
+      - name: Biome CI
         run: biome ci
 
   build:
diff --git a/src/components/Flatastic/Flatastic.tsx b/src/components/Flatastic/Flatastic.tsx
index 3492714..968f05b 100644
--- a/src/components/Flatastic/Flatastic.tsx
+++ b/src/components/Flatastic/Flatastic.tsx
@@ -8,7 +8,11 @@ import style from "./style.module.css";
 export default function Flatastic() {
     const fetchFlatasticData = useFlatasticStore((state) => state.fetch);
     const flatasticData = useFlatasticStore((state) => state.flatasticData);
-    const chores = flatasticData?.chores;
+    const chores = (flatasticData?.chores as FlatasticChore[]) || [];
+    chores.sort(
+        (a, b) =>
+            a.timeLeftNext - b.timeLeftNext && b.rotationTime - a.rotationTime,
+    );
     const users = flatasticData?.users;
     const idToNameMap: Record<number, string> = {};
     users.forEach((user: FlatasticUser) => {
@@ -23,19 +27,36 @@ export default function Flatastic() {
         return () => clearInterval(interval);
     }, [fetchFlatasticData]);
 
+    const choresRender = chores.map((chore) => {
+        let className = "";
+        let timeLeftInDays = null;
+
+        if (chore.rotationTime === -1) {
+            className = "irregular";
+        } else {
+            className = chore.timeLeftNext <= 0 ? "due" : "notDue";
+            timeLeftInDays = Math.abs(
+                Math.floor(chore.timeLeftNext / (60 * 60 * 24)),
+            );
+        }
+
+        return (
+            <li
+                key={chore.id}
+                className={[style.chore, style[className]].join(" ")}
+            >
+                <span className={style.userName}>
+                    {`${idToNameMap[chore.currentUser]}`}
+                </span>
+                : {chore.title} {timeLeftInDays} {"🪙".repeat(chore.points)}
+            </li>
+        );
+    });
+
     return (
         <div>
             <h1>Chores</h1>
-            <ul className={style.choreList}>
-                {chores.map((chore: FlatasticChore) => (
-                    <li key={chore.id} className={style.chore}>
-                        <span className={style.userName}>
-                            {idToNameMap[chore.currentUser]}
-                        </span>
-                        : {chore.title} - {"🪙".repeat(chore.points)}
-                    </li>
-                ))}
-            </ul>
+            <ul className={style.choreList}>{choresRender}</ul>
         </div>
     );
 }
diff --git a/src/components/Flatastic/style.module.css b/src/components/Flatastic/style.module.css
index 6a87b5c..8a3ea11 100644
--- a/src/components/Flatastic/style.module.css
+++ b/src/components/Flatastic/style.module.css
@@ -20,3 +20,15 @@
 .userName {
     font-weight: bold;
 }
+
+.irregular {
+    background-color: #aaaaaa;
+}
+
+.due {
+    background-color: #e4877e;
+}
+
+.notDue {
+    background-color: #ccffcc;
+}
diff --git a/src/store/flatastic.ts b/src/store/flatastic.ts
index 31ddcca..464cd8e 100644
--- a/src/store/flatastic.ts
+++ b/src/store/flatastic.ts
@@ -28,8 +28,6 @@ const useFlatasticStore = create(
                 const data = await flatastic.getTaskList();
                 const dataB = await flatastic.getInformation();
 
-                console.log("Flatastic chores fetched:", data);
-                console.log("Flatastic information fetched:", dataB);
                 set({
                     flatasticData: {
                         chores: data as FlatasticChore[],
diff --git a/src/store/kvv.ts b/src/store/kvv.ts
index db9e87a..31a867d 100644
--- a/src/store/kvv.ts
+++ b/src/store/kvv.ts
@@ -16,11 +16,6 @@ const useKVVStore = create(
                 const hStreetJson = await hStreetData.json();
                 const pStreetJson = await pStreetData.json();
 
-                console.log("KVV departures fetched:", {
-                    hStreet: hStreetJson,
-                    pStreet: pStreetJson,
-                });
-
                 set({
                     hStreet: hStreetJson as DepartureType[],
                     pStreet: pStreetJson as DepartureType[],