sort chores using due date, color tasks according to due level

.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:

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}>
+            <ul className={style.choreList}>{choresRender}</ul>
-                {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>
         </div>
     );
 }

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;
+}

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[],

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[],