Timed Reminder Work

src/app/create/page.js

@@ -0,0 +1,12 @@
+import Image from "next/image";
+
+import styles from "./page.module.css";
+
+export default function Create() {
+	return (
+		<main className={styles.main}>
+			<a href="/todo">Daily Info</a>
+			<a href="/create">+</a>
+		</main>
+	);
+}

src/app/create/page.module.css

@@ -0,0 +1,3 @@
+body {
+	background: #000;
+}

src/app/page.js

@@ -6,6 +6,7 @@ export default function Home() {
 	return (
 		<main className={styles.main}>
 			<a href="/todo">Daily Info</a>
+			<a href="/create">+</a>
 		</main>
 	);
 }

src/app/page.module.css

@@ -18,5 +18,10 @@
 		text-decoration: none;
 		color: rgba(255, 255, 255, 0.85);
 		border: 1px solid rgba(200, 200, 200, 0.4);
+
+		&:last-child {
+			width: 7%;
+			margin-left: 10px;
+		}
 	}
 }

src/app/todo/daily.json

@@ -0,0 +1,40 @@
+{
+	"List": [
+		{
+			"title": "Opening Checklist",
+			"desc": "Complete the opening checklist to ensure all equipment is operational and ready for the day.",
+			"type": "3",
+			"timeStart": "07",
+			"timeEnd": "09",
+			"textStart": "7 AM",
+			"textEnd": "9 AM"
+		},
+		{
+			"title": "Daily Maintenance Checklist",
+			"desc": "Perform daily maintenance tasks to keep equipment running smoothly.",
+			"type": "3",
+			"timeStart": "07",
+			"timeEnd": "19",
+			"textStart": "7 AM",
+			"textEnd": "7 PM"
+		},
+		{
+			"title": "Site Inspection Checklist",
+			"desc": "Conduct a thorough inspection of the site to identify any potential issues.",
+			"type": "4",
+			"timeStart": "10",
+			"timeEnd": "12",
+			"textStart": "10 AM",
+			"textEnd": "12 PM"
+		},
+		{
+			"title": "Closing Checklist",
+			"desc": "Complete the closing checklist to ensure all equipment is properly shut down for the day and ready for tomorrow.",
+			"type": "3",
+			"timeStart": "18",
+			"timeEnd": "20",
+			"textStart": "6 PM",
+			"textEnd": "8 PM"
+		}
+	]
+}

src/app/todo/page.js

@@ -3,6 +3,7 @@
 import { getWeatherIcon } from "@/utils/weather.js";
 import Image from "next/image";
 import { useEffect, useState } from "react";
+import List from "./daily.json";
 import styles from "./todo.module.css";
 
 const version = require("../../../package.json").version;
@@ -89,6 +90,42 @@ export default function WeatherPage() {
 		return () => clearInterval(interval);
 	}, [weather]);
 
+	const [dailyItems, setDailyItems] = useState([]);
+
+	useEffect(() => {
+		const updateDailyItems = () => {
+			const now = new Date();
+			const currentHour = now.getHours();
+
+			const filteredItems =
+				List?.List?.filter((item) => {
+					const timeStart = parseInt(item.timeStart);
+					const timeEnd = parseInt(item.timeEnd);
+
+					return currentHour >= timeStart && currentHour < timeEnd;
+				}) || [];
+
+			setDailyItems(
+				filteredItems.length > 0
+					? filteredItems
+					: [
+							{
+								title: "N/A",
+								desc: "No reminders",
+							},
+						],
+			);
+		};
+
+		// Initial check
+		updateDailyItems();
+
+		// Check every second
+		const interval = setInterval(updateDailyItems, 1000);
+
+		return () => clearInterval(interval);
+	}, [List]);
+
 	const weatherAlerts = weather?.alerts || [];
 
 	const futureForecasts = weather?.daily?.data.slice(1, 4) || [];
@@ -110,8 +147,44 @@ export default function WeatherPage() {
 			</div>
 			<span className={styles.container}>
 				<span className={styles.listContainer}>
-					<span className={styles.lists}>Daily ToDo Rotation</span>
+					<span className={styles.lists}>
-					<span className={styles.lists}>Manual ToDo List</span>
+						<span className={styles.listHeader}>
+							Daily Reminders
+						</span>
+						{dailyItems?.map((item, index) => (
+							<span key={index} className={styles.dailyListItem}>
+								<span className={styles.listItemTitle}>
+									{item.title}
+								</span>
+								<span className={styles.listItemDesc}>
+									{item.desc}
+								</span>
+								<span className={styles.listItemTime}>
+									{item.textStart && item.textEnd ? (
+										<>
+											{item.textStart} - {item.textEnd}
+										</>
+									) : (
+										<>
+											{item.timeStart}:00 - {item.timeEnd}
+											:00
+										</>
+									)}
+								</span>
+							</span>
+						)) || "Test"}
+					</span>
+					<span className={styles.lists}>
+						<span className={styles.listHeader}>
+							Important Reminders
+						</span>
+						<span className={styles.dailyListItem}>
+							<span className={styles.listItemTitle}>N/A</span>
+							<span className={styles.listItemDesc}>
+								No Reminders
+							</span>
+						</span>
+					</span>
 				</span>
 
 				<span className={styles.weatherContainer}>

src/app/todo/todo.module.css

@@ -77,12 +77,64 @@
 	flex-direction: row;
 
 	.lists {
-		padding: 10px;
+		flex: 1 1 100%;
-		display: flex;
-		flex: 1 1 auto;
 		border-radius: 10px;
 		background: #17171b;
 		border: 1px solid rgba(200, 200, 200, 0.2);
+
+		.listHeader {
+			margin: 5px;
+			font-size: 14pt;
+			font-weight: bold;
+			display: inline-block;
+			width: calc(100% - 24px);
+			padding: 6px 6px 4px 6px;
+			border-radius: 5px 5px 2px 2px;
+			background: rgba(255, 255, 255, 0.1);
+			border: 1px solid rgba(200, 200, 200, 0.2);
+		}
+
+		.dailyListItem {
+			padding: 5px;
+			display: block;
+			margin: 0 5px 5px 5px;
+			border-radius: 2px 2px 2px 2px;
+			background: rgba(255, 255, 255, 0.05);
+			border: 1px solid rgba(200, 200, 200, 0.1);
+
+			.listItemTitle {
+				width: 100%;
+				display: block;
+				font-size: 16pt;
+				font-weight: bold;
+				margin: 0 0 5px 0;
+				color: rgba(255, 255, 255, 0.95);
+				border-bottom: 1px solid rgba(200, 200, 200, 0.2);
+			}
+
+			.listItemDesc {
+				padding: 5px;
+				display: block;
+				font-size: 10pt;
+				margin-bottom: 5px;
+				width: calc(100% - 10px);
+				color: rgba(255, 255, 255, 0.75);
+			}
+
+			.listItemTime {
+				width: 100%;
+				font-size: 8pt;
+				display: block;
+				text-align: right;
+				padding: 5px 0 0 0;
+				color: rgba(255, 255, 255, 0.8);
+				border-top: 1px solid rgba(200, 200, 200, 0.075);
+			}
+
+			&:last-child {
+				border-radius: 2px 2px 5px 5px;
+			}
+		}
 	}
 }
 
@@ -104,8 +156,8 @@
 			width: calc(100% - 24px);
 			padding: 6px 6px 4px 6px;
 			border-radius: 5px 5px 2px 2px;
-			border: 1px solid rgba(200, 200, 200, 0.2);
 			background: rgba(255, 255, 255, 0.1);
+			border: 1px solid rgba(200, 200, 200, 0.2);
 		}
 
 		.weatherAlerts {