From 958c6a77640dd34ca33ddefa4287f1ef8fed67e4 Mon Sep 17 00:00:00 2001
From: TobbleCobble <tobble@mythosmc.com>
Date: Fri, 9 Jan 2026 09:47:13 +0000
Subject: [PATCH 1/5] added font

---
 client/src/pages/login.tsx    | 32 ++++++++++++++++----------------
 client/src/styles/globals.css |  3 +++
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/client/src/pages/login.tsx b/client/src/pages/login.tsx
index cbe633c..ce7087a 100644
--- a/client/src/pages/login.tsx
+++ b/client/src/pages/login.tsx
@@ -73,10 +73,10 @@ export default function Login() {
 
       <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
         <form onSubmit={handleSubmit} className="space-y-6">
-          <label className="block text-sm/6 font-medium text-gray-100">
-            Username
-          </label>
           <div className="mt-2">
+            <label className="block text-sm/6 font-medium text-gray-100">
+              Username
+            </label>
             <input
               id="username"
               type="text"
@@ -87,10 +87,10 @@ export default function Login() {
             />
           </div>
 
-          <label className="block text-sm/6 font-medium text-gray-100">
-            Email
-          </label>
           <div className="mt-2">
+            <label className="block text-sm/6 font-medium text-gray-100">
+              Email
+            </label>
             <input
               id="email"
               type="email"
@@ -102,17 +102,17 @@ export default function Login() {
           </div>
 
           <div>
-            <div className="flex items-center justify-between">
-              <label className="block text-sm/6 font-medium text-gray-100">
-                Password
-              </label>
-              <div className="text-sm">
-                <a className="font-semibold text-indigo-400 hover:text-indigo-300">
-                  Forgot password?
-                </a>
-              </div>
-            </div>
             <div className="mt-2">
+              <div className="flex items-center justify-between">
+                <label className="block text-sm/6 font-medium text-gray-100">
+                  Password
+                </label>
+                <div className="text-sm">
+                  <a className="font-semibold text-indigo-400 hover:text-indigo-300">
+                    Forgot password?
+                  </a>
+                </div>
+              </div>
               <input
                 id="password"
                 type="password"
diff --git a/client/src/styles/globals.css b/client/src/styles/globals.css
index 4c58820..59160ca 100644
--- a/client/src/styles/globals.css
+++ b/client/src/styles/globals.css
@@ -6,6 +6,8 @@
 
 @layer base {
   :root {
+    
+    @apply font-inter;
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
 
@@ -91,6 +93,7 @@
 
 @layer base {
   body {
+    @apply font-inter;
     @apply bg-background text-foreground;
   }
 }

From 024d35a5ccfdde7f40089cd4a2f611f6135d6ae6 Mon Sep 17 00:00:00 2001
From: TobbleCobble <tobble@mythosmc.com>
Date: Fri, 9 Jan 2026 10:15:21 +0000
Subject: [PATCH 2/5] added days to upcoming tasks

---
 .../src/components/ui/focus/taskDisplay.tsx   | 37 ++++++++++++++-----
 client/src/components/ui/focus/timer.tsx      |  2 +-
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/client/src/components/ui/focus/taskDisplay.tsx b/client/src/components/ui/focus/taskDisplay.tsx
index 5a094f1..fcd095c 100644
--- a/client/src/components/ui/focus/taskDisplay.tsx
+++ b/client/src/components/ui/focus/taskDisplay.tsx
@@ -16,21 +16,40 @@ interface Time {
 export default function TaskDisplay({
   task,
   time,
-  current
+  current,
 }: {
   task: Task;
   time: Time;
-  current: Boolean;
+  current: boolean;
 }) {
   return (
-    <div className={current ? "px-auto m-3 flex flex-auto flex-col rounded-3xl bg-indigo-500 p-4 shadow-md shadow-black/40 outline-3 outline outline-slate-50" : "px-auto m-3 flex flex-auto flex-col rounded-3xl bg-indigo-400 p-4 shadow-md shadow-black/40"}>
-      <div className="flex flex-auto flex-row gap-4 px-3">
-        <div>{task.name}:</div>
-        <div>
-          {time.start_time} - {time.end_time}
-        </div>
+    <div
+      className={
+        current
+          ? "px-auto outline-3 m-3 flex flex-auto flex-col rounded-3xl bg-indigo-500 p-4 shadow-md shadow-black/40 outline outline-slate-50"
+          : "px-auto m-3 flex flex-auto flex-col rounded-3xl bg-indigo-400 p-4 shadow-md shadow-black/40"
+      }
+    >
+      <div className="font-bold">{task.name}</div>
+      <div>
+        {time.day === 1
+          ? "Mon"
+          : time.day === 2
+            ? "Tue"
+            : time.day === 3
+              ? "Wed"
+              : time.day === 4
+                ? "Thu"
+                : time.day === 5
+                  ? "Fri"
+                  : time.day === 6
+                    ? "Sat"
+                    : time.day === 7
+                      ? "Sun"
+                      : ""}{" "}
+        - {time.start_time} - {time.end_time}
       </div>
-      <div className="px-3 italic">{task.description}</div>
+      <div className="italic">{task.description}</div>
     </div>
   );
 }
diff --git a/client/src/components/ui/focus/timer.tsx b/client/src/components/ui/focus/timer.tsx
index 353ac7a..2c3bc3a 100644
--- a/client/src/components/ui/focus/timer.tsx
+++ b/client/src/components/ui/focus/timer.tsx
@@ -24,7 +24,7 @@ const Timer = (timeRemaining: number) => {
   };
 
   return (
-    <div className="rounded-full bg-indigo-400 p-3 px-8 font-inter text-xl font-semibold">
+    <div className="w-32 rounded-full bg-indigo-400 p-3 px-8 font-inter text-xl font-semibold">
       {formatTime(timeRemaining)}
     </div>
   );

From 169c22274b4b679882f2ef37b1bed841a5a5f852 Mon Sep 17 00:00:00 2001
From: Precipicee <23813728@student.uwa.edu.au>
Date: Fri, 9 Jan 2026 19:09:34 +0800
Subject: [PATCH 3/5] fixed permissions issues

---
 client/package-lock.json            | 10 ++++++++++
 client/package.json                 |  1 +
 client/src/components/task_form.tsx |  8 ++++++++
 client/src/components/task_item.tsx |  8 +++++++-
 client/src/pages/tasks.tsx          | 12 +++++++++++-
 5 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/client/package-lock.json b/client/package-lock.json
index 46f7ac1..a81d4bf 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -20,6 +20,7 @@
         "next": "15.4.7",
         "react": "19.1.0",
         "react-dom": "19.1.0",
+        "react-icons": "^5.5.0",
         "tailwind-merge": "^3.3.1",
         "tailwindcss-animate": "^1.0.7"
       },
@@ -5750,6 +5751,15 @@
         "react": "^19.1.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/client/package.json b/client/package.json
index ce70203..8bc93bc 100644
--- a/client/package.json
+++ b/client/package.json
@@ -27,6 +27,7 @@
     "next": "15.4.7",
     "react": "19.1.0",
     "react-dom": "19.1.0",
+    "react-icons": "^5.5.0",
     "tailwind-merge": "^3.3.1",
     "tailwindcss-animate": "^1.0.7"
   },
diff --git a/client/src/components/task_form.tsx b/client/src/components/task_form.tsx
index 5034c34..96b8171 100644
--- a/client/src/components/task_form.tsx
+++ b/client/src/components/task_form.tsx
@@ -51,6 +51,13 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+
+    const token = localStorage.getItem("access");
+    if (!token) {
+      console.error("No access token");
+      return;
+    }
+
     try {
       const existing_topic_ids = topics
         .filter((t) => t.type === "existing")
@@ -63,6 +70,7 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
         },
         body: JSON.stringify({
           name: taskName,
diff --git a/client/src/components/task_item.tsx b/client/src/components/task_item.tsx
index 8cf8e84..b2d0208 100644
--- a/client/src/components/task_item.tsx
+++ b/client/src/components/task_item.tsx
@@ -78,6 +78,9 @@ export function TaskItem({
 
   async function saveEdit() {
     setSaving(true);
+
+    const token = localStorage.getItem("access");
+
     try {
       const existing_topic_ids = draftTopics
         .filter((t) => t.type === "existing")
@@ -94,7 +97,10 @@ export function TaskItem({
         `http://localhost:8000/api/planner/tasks/${item.id}/`,
         {
           method: "PUT",
-          headers: { "Content-Type": "application/json" },
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
           body: JSON.stringify({
             name: draftName,
             description: draftDescription,
diff --git a/client/src/pages/tasks.tsx b/client/src/pages/tasks.tsx
index eaca766..7c7a518 100644
--- a/client/src/pages/tasks.tsx
+++ b/client/src/pages/tasks.tsx
@@ -96,6 +96,8 @@ export default function TasksPage() {
     const task = items.find((t) => t.id === id);
     if (!task) return;
 
+    const token = localStorage.getItem("access");
+
     try {
       const response = await fetch(
         `http://localhost:8000/api/planner/tasks/${id}/toggle_complete/`,
@@ -103,6 +105,7 @@ export default function TasksPage() {
           method: "PATCH",
           headers: {
             "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
           },
           body: JSON.stringify({ completed: !task.completed }),
         },
@@ -129,10 +132,17 @@ export default function TasksPage() {
   async function handleTaskDeleted(id: number) {
     if (!window.confirm("Delete this task?")) return;
 
+    const token = localStorage.getItem("access");
+
     try {
       const response = await fetch(
         `http://localhost:8000/api/planner/tasks/${id}/`,
-        { method: "DELETE" },
+        {
+          method: "DELETE",
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        },
       );
 
       if (!response.ok) {

From bd3f1faae4d25bb557219510cb4dff9929ff5f4f Mon Sep 17 00:00:00 2001
From: TobbleCobble <tobble@mythosmc.com>
Date: Fri, 9 Jan 2026 11:30:22 +0000
Subject: [PATCH 4/5] timetable page does correct fetch, and pages now have
 correct height to account for navbar

---
 client/src/components/timetable.tsx |  2 +-
 client/src/pages/focus.tsx          |  2 +-
 client/src/pages/schedule.tsx       | 39 +++++++++++++++++++++++------
 client/src/styles/globals.css       |  1 +
 4 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/client/src/components/timetable.tsx b/client/src/components/timetable.tsx
index 27240c4..dd954ab 100644
--- a/client/src/components/timetable.tsx
+++ b/client/src/components/timetable.tsx
@@ -374,7 +374,7 @@ function Timetable({ timetable_tasks_props }: TimetableProps) {
     >
       <div
         id="timetable-content"
-        className="h-full w-full overflow-auto overscroll-none"
+        className="h-full w-full overflow-auto overscroll-none scrollbar"
         onScroll={resizeAndPositionTimetableElements}
       >
         <div
diff --git a/client/src/pages/focus.tsx b/client/src/pages/focus.tsx
index 8a44e9a..9d755cd 100644
--- a/client/src/pages/focus.tsx
+++ b/client/src/pages/focus.tsx
@@ -152,7 +152,7 @@ const CountdownTimer = () => {
   }
 
   return (
-    <div className="h-screen bg-slate-800 p-8 font-inter">
+    <div className="h-[calc(100vh-64px)] bg-slate-800 p-8 font-inter">
       <div className="flex flex-col items-center justify-start rounded-xl bg-slate-700 p-8 font-mono text-white shadow-inner shadow-slate-900">
         <p className="p-4 font-inter text-4xl font-semibold">focus</p>
         <div className="flex flex-row justify-center">
diff --git a/client/src/pages/schedule.tsx b/client/src/pages/schedule.tsx
index cbba68f..b9b5df9 100644
--- a/client/src/pages/schedule.tsx
+++ b/client/src/pages/schedule.tsx
@@ -5,6 +5,7 @@ import Timetable, {
   resizeAndPositionTimetableElements,
 } from "@/components/timetable";
 import { TimetableTaskProps } from "@/components/timetable_task";
+import { useRouter } from "next/router";
 
 /*
 Database representation of Time.
@@ -59,6 +60,8 @@ Page containing a Timetable to visually represent the times that tasks have been
 assigned.
 */
 function Schedule() {
+
+  const router = useRouter();
   const [timetableTasksProps, setTimetableTasksProps] = useState<
     TimetableTaskProps[]
   >([]);
@@ -82,13 +85,35 @@ function Schedule() {
     to be displayed. Sets the timetableTasksProps State variable once finished.
     */
     async function fetchTasks() {
-      const API_URL = "http://localhost:8000/api/planner/tasks/";
+      
       try {
-        const response = await fetch(API_URL);
-        if (!response.ok) {
-          throw new Error(`Response status: ${response.status}`);
+        const token = localStorage.getItem("access");
+        if (!token) {
+          router.push("/login"); //redirect to login if unauthorised
+          return;
+        }
+        const auth = await fetch(
+          "http://localhost:8000/api/planner/protected/",
+          {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          },
+        );
+        if (!auth.ok) {
+          router.push("/login"); //redirect to login if unauthorised
+          return;
         }
-        const data = await response.json();
+        const tasksFetch = await fetch(
+          `http://localhost:8000/api/planner/tasks/`,
+          {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          },
+        );
+
+        const data = await tasksFetch.json();
         let timetable_task_props =
           await formatTaskDataToTimetableTaskProps(data);
         timetable_task_props =
@@ -269,12 +294,12 @@ function Schedule() {
     return () => {
       removeEventListeners();
     };
-  }, []);
+  }, [router]);
   /* This should be dependent on timetableTasksProps however doing so causes it
   to run in an infinite loop. */
 
   return (
-    <div className="content-container min-w-screen min-h-screen flex w-full flex-row bg-slate-950">
+    <div className="content-container min-w-screen h-[calc(100vh-64px)] flex w-full flex-row bg-slate-950">
       <div className="timetable-container max-h-[90vh] w-full p-3">
         <Timetable timetable_tasks_props={timetableTasksProps} />
       </div>
diff --git a/client/src/styles/globals.css b/client/src/styles/globals.css
index 4c58820..910482e 100644
--- a/client/src/styles/globals.css
+++ b/client/src/styles/globals.css
@@ -92,5 +92,6 @@
 @layer base {
   body {
     @apply bg-background text-foreground;
+    @apply font-inter;
   }
 }

From d065b56da7999bfb1502f903070f268295159c23 Mon Sep 17 00:00:00 2001
From: TobbleCobble <tobble@mythosmc.com>
Date: Fri, 9 Jan 2026 11:40:59 +0000
Subject: [PATCH 5/5] fixed height of task page to account for navbar

---
 client/src/pages/tasks.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/pages/tasks.tsx b/client/src/pages/tasks.tsx
index d0ac01e..f89c9f8 100644
--- a/client/src/pages/tasks.tsx
+++ b/client/src/pages/tasks.tsx
@@ -163,7 +163,7 @@ export default function TasksPage() {
   }
 
   return (
-    <div className="content-container min-w-screen relative flex min-h-screen flex-row items-center justify-center bg-slate-500">
+    <div className="content-container min-w-screen relative flex min-h-[calc(100vh-64px)] flex-row items-center justify-center bg-slate-500">
       <div className="task-list-container h-full w-full">
         <div className="task-list-content flex h-full w-full flex-col items-center justify-center rounded-lg p-3 text-slate-200">
           <div className="task-list-top mb-3 hidden h-[10%] w-full rounded-t-lg">