src/lib/components/OpeningTimes.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    import type { Table } from "$lib";
+    import { formatTime } from "$lib";
+
+    interface Props {
+        hours: Table<"study_space_hours">[];
+    }
+
+    // Destructure hours with a safe default to avoid undefined
+    const { hours }: Props = $props();
+
+    // Determine today's index (0 = Sunday, 6 = Saturday)
+    const todayIndex = new Date().getDay();
+
+    // Find the hours entry matching today
+    const todayHours = hours.find((h) => h.day_of_week === todayIndex);
+
+    // Compute the display string for opening times
+    let openingDisplay = $state("");
+    if (todayHours) {
+        openingDisplay = todayHours.is_24_7
+            ? "Open 24/7"
+            : `${formatTime(todayHours.opens_at)} - ${formatTime(todayHours.closes_at)}`;
+    } else {
+        openingDisplay = "Closed";
+    }
+</script>
+
+<div class="opening-times">
+    <strong>Today's Opening Times:</strong>
+    {openingDisplay}
+</div>
+
+<style>
+    .opening-times {
+        margin-top: 0.5rem;
+        font-size: 0.9rem;
+        color: #eaffeb;
+    }
+</style>

src/lib/components/SpaceCard.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
     import CompulsoryTags from "./CompulsoryTags.svelte";
+    import OpeningTimes from "./OpeningTimes.svelte";
     import type { Table } from "$lib";
 
     interface Props {
         space: Table<"study_spaces">;
+        hours: Table<"study_space_hours">[];
         alt: string;
         imgSrc: string;
         href?: string;
     }
 
-    const { space, alt, imgSrc, href }: Props = $props();
+    const { space, hours, alt, imgSrc, href }: Props = $props();
 </script>
 
 <a class="card" {href}>
@@ -24,6 +26,7 @@
                 {/each}
             </div>
         {/if}
+        <div class="openingTimesContainer"><OpeningTimes {hours} /></div>
     </div>
 </a>
 

src/lib/database.d.ts

@@ -161,6 +161,47 @@ export type Database = {
         }
         Relationships: []
       }
+      study_space_hours: {
+        Row: {
+          id: string
+          study_space_id: string
+          day_of_week: number
+          opens_at: string
+          closes_at: string
+          is_24_7: boolean
+          created_at: string | null
+          updated_at: string | null
+        }
+        Insert: {
+          id?: string
+          study_space_id: string
+          day_of_week: number
+          opens_at: string
+          closes_at: string
+          is_24_7: boolean
+          created_at?: string | null
+          updated_at?: string | null
+        }
+        Update: {
+          id?: string
+          study_space_id?: string
+          day_of_week?: number
+          opens_at?: string
+          closes_at?: string
+          is_24_7?: boolean
+          created_at?: string | null
+          updated_at?: string | null
+        }
+        Relationships: [
+          {
+            foreignKeyName: "study_space_hours_study_space_id_fkey"
+            columns: ["study_space_id"]
+            isOneToOne: false
+            referencedRelation: "study_spaces"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
     }
     Views: {
       [_ in never]: never

src/lib/index.ts

@@ -8,7 +8,6 @@ export type Enum<T extends keyof Database["public"]["Enums"]> = Database["public
 export const availableStudySpaceTags = [
     "Crowded",
     "Group study",
-    "24/7",
     "Food allowed",
     "No food allowed",
     "Well lit",
@@ -43,3 +42,20 @@ export async function gmapsLoader() {
         libraries: ["places"]
     });
 }
+
+export function formatTime(time: string) {
+    const [h, m] = time.split(":").map(Number);
+    const date = new Date();
+    date.setHours(h, m);
+    return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+}
+
+export const daysOfWeek = [
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday"
+];

src/routes/+page.server.ts

@@ -5,7 +5,7 @@ export const load: PageServerLoad = async ({ depends, locals: { supabase } }) =>
     depends("db:study_spaces");
     const { data: studySpaces, error: err } = await supabase
         .from("study_spaces")
-        .select("*, study_space_images(*)");
+        .select("*, study_space_images(*), study_space_hours(*)");
     if (err) error(500, "Failed to load study spaces");
 
     return {

src/routes/+page.svelte

@@ -11,6 +11,8 @@
 
     let selectedTags = $state<string[]>([]);
     let tagFilter = $state("");
+    let openingFilter = $state("");
+    let closingFilter = $state("");
     let tagFilterElem = $state<HTMLInputElement>();
 
     function categorySelected(category: string[]) {
@@ -33,19 +35,60 @@
             })
     );
 
-    let filteredStudySpaces = $derived(
-        selectedTags.length === 0
-            ? studySpaces
-            : studySpaces.filter((space) => {
-                  const allTags = [
-                      ...(space.tags || []),
-                      space.volume,
-                      space.wifi,
-                      space.power
-                  ].filter(Boolean);
+    // Convert "HH:MM" or "HH:MM:SS" to minutes since midnight
+    function toMinutes(timeStr: string): number {
+        const [h, m] = timeStr.slice(0, 5).split(":").map(Number);
+        return h * 60 + m;
+    }
 
-                  return selectedTags.every((tag) => allTags.includes(tag));
-              })
+    // Combine tag and time filtering
+    let filteredStudySpaces = $derived(
+        studySpaces
+            // tag filtering
+            .filter((space) => {
+                if (selectedTags.length === 0) return true;
+                const allTags = [
+                    ...(space.tags || []),
+                    space.volume,
+                    space.wifi,
+                    space.power
+                ].filter(Boolean);
+                return selectedTags.every((tag) => allTags.includes(tag));
+            })
+            // opening time filter
+            .filter((space) => {
+                if (!openingFilter) return true;
+                const entry = space.study_space_hours?.find(
+                    (h) => h.day_of_week === new Date().getDay()
+                );
+                if (!entry) return false;
+                if (entry.is_24_7) return true;
+                const openMin = toMinutes(entry.opens_at);
+                let closeMin = toMinutes(entry.closes_at);
+                // Treat midnight as end of day and handle overnight spans
+                if (closeMin === 0) closeMin = 24 * 60;
+                if (closeMin <= openMin) closeMin += 24 * 60;
+                const filterMin = toMinutes(openingFilter);
+                // Include spaces open at the filter time
+                return filterMin >= openMin && filterMin < closeMin;
+            })
+            // closing time filter
+            .filter((space) => {
+                if (!closingFilter) return true;
+                const entry = space.study_space_hours?.find(
+                    (h) => h.day_of_week === new Date().getDay()
+                );
+                if (!entry) return false;
+                if (entry.is_24_7) return true;
+                const openMin = toMinutes(entry.opens_at);
+                let closeMin = toMinutes(entry.closes_at);
+                if (closeMin === 0) closeMin = 24 * 60;
+                if (closeMin <= openMin) closeMin += 24 * 60;
+                const filterMin =
+                    toMinutes(closingFilter) === 0 ? 24 * 60 : toMinutes(closingFilter);
+                // Include spaces still open at the filter time
+                return filterMin > openMin && filterMin <= closeMin;
+            })
     );
 
     let dropdownVisible = $state(false);
@@ -80,6 +123,16 @@
             <Button href="/space/reports" type="link" style="red">Check Reports</Button>
         </div>
     {/if}
+    <div class="time-filter-container">
+        <label>
+            Open from:
+            <input type="time" bind:value={openingFilter} />
+        </label>
+        <label>
+            Open until:
+            <input type="time" bind:value={closingFilter} />
+        </label>
+    </div>
     <div class="tag-filter-container">
         <form>
             <div class="tagDisplay">
@@ -144,6 +197,7 @@
             href="/space/{studySpace.id}"
             imgSrc={imgUrl}
             space={studySpace}
+            hours={studySpace.study_space_hours}
         />
     {/each}
 </main>
@@ -185,7 +239,29 @@
         grid-column: 1 / -1;
         display: flex;
         justify-content: center;
-        padding: 0.5rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .time-filter-container {
+        grid-column: 1 / -1;
+        display: flex;
+        gap: 1rem;
+        justify-content: center;
+        margin-bottom: 0.5rem;
+    }
+    .time-filter-container label {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 1rem;
+        color: #eaffeb;
+    }
+    .time-filter-container input[type="time"] {
+        background: none;
+        border: 2px solid #eaffeb;
+        border-radius: 0.5rem;
+        padding: 0.25rem 0.5rem;
+        color: #eaffeb;
     }
 
     form {

src/routes/space/[id]/+page.server.ts

@@ -5,7 +5,7 @@ export const load: PageServerLoad = async ({ depends, params, locals: { supabase
     depends("db:study_spaces");
     const { data: space, error: err } = await supabase
         .from("study_spaces")
-        .select("*, study_space_images(*)")
+        .select("*, study_space_images(*), study_space_hours(*)")
         .eq("id", params.id)
         .single();
     if (err) error(500, "Failed to load study space");

src/routes/space/[id]/+page.svelte

@@ -7,7 +7,7 @@
     import Report from "$lib/components/Report.svelte";
     import Feedback from "$lib/components/Feedback.svelte";
     import { onMount } from "svelte";
-    import { gmapsLoader } from "$lib";
+    import { gmapsLoader, daysOfWeek, formatTime } from "$lib";
     import Button from "$lib/components/Button.svelte";
 
     const { data } = $props();
@@ -50,6 +50,13 @@
             map
         });
     });
+
+    const hoursByDay = $derived(new Map(space.study_space_hours.map((h) => [h.day_of_week, h])));
+
+    const openingEntries = daysOfWeek.map((day, idx) => ({
+        day,
+        entry: hoursByDay.get(idx)
+    }));
 </script>
 
 <Navbar>
@@ -92,6 +99,22 @@
         </div>
     {/if}
     <hr />
+    <div class="subtitle">Opening Times:</div>
+    {#each openingEntries as { day, entry } (entry)}
+        <div class="opening-entry">
+            <span class="day">{day}:</span>
+            <span class="times">
+                {#if entry}
+                    {entry.is_24_7
+                        ? "Open All Day"
+                        : `${formatTime(entry.opens_at)} – ${formatTime(entry.closes_at)}`}
+                {:else}
+                    Closed
+                {/if}
+            </span>
+        </div>
+    {/each}
+
     <div class="subtitle">Where it is:</div>
     <p class="addrContainer">
         {#if place.name}
@@ -235,4 +258,24 @@
         flex-direction: column;
         padding-top: 1rem;
     }
+
+    .opening-entry {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        gap: 0.75rem;
+        padding: 0.5rem 1.4rem;
+        align-items: center;
+    }
+    .opening-entry .day {
+        font-weight: bold;
+        color: #ffffff;
+        white-space: nowrap;
+    }
+    .opening-entry .times {
+        font-family: monospace;
+        background-color: rgba(255, 255, 255, 0.1);
+        padding: 0.25rem 0.5rem;
+        border-radius: 0.25rem;
+        color: #eaffeb;
+    }
 </style>

src/routes/space/[id]/edit/+page.server.ts

@@ -8,6 +8,12 @@ type StudySpaceData = Omit<
 > & {
     id?: string;
     building_location?: google.maps.places.PlaceResult;
+    opening_times?: {
+        day_of_week: number;
+        opens_at: string;
+        closes_at: string;
+        is_24_7: boolean;
+    }[];
 };
 
 export const load: PageServerLoad = async ({ params, locals: { supabase } }) => {
@@ -34,6 +40,13 @@ export const load: PageServerLoad = async ({ params, locals: { supabase } }) =>
     const studySpaceData = space as StudySpaceData & Partial<typeof space>;
 
     const images = studySpaceData.study_space_images || [];
+    const { data: hours, error: hoursErr } = await supabase
+        .from("study_space_hours")
+        .select("day_of_week, opens_at, closes_at, is_24_7")
+        .eq("study_space_id", params.id)
+        .order("day_of_week", { ascending: true });
+    if (hoursErr) error(500, "Failed to load opening times");
+    studySpaceData.opening_times = hours;
 
     delete studySpaceData.created_at;
     delete studySpaceData.updated_at;

src/routes/space/[id]/edit/+page.svelte

@@ -11,7 +11,8 @@
         wifiTags,
         powerOutletTags,
         volumeTags,
-        gmapsLoader
+        gmapsLoader,
+        daysOfWeek
     } from "$lib";
     import { onMount } from "svelte";
     import type { Json } from "$lib/database.js";
@@ -20,10 +21,25 @@
     const { supabase } = $derived(data);
 
     const { space, images } = $derived(data);
-    const studySpaceData = $derived({
+    const studySpaceData = $state({
+        opening_times: daysOfWeek.map((_, index) => ({
+            day_of_week: index,
+            opens_at: "",
+            closes_at: "",
+            is_24_7: false
+        })),
         ...space
     });
 
+    $effect(() => {
+        if (!space) return;
+        const { opening_times, ...rest } = space;
+        Object.assign(studySpaceData, rest);
+        if (opening_times) {
+            studySpaceData.opening_times = opening_times;
+        }
+    });
+
     let scrollPosition = $state(0);
     const existingImages = $derived(
         Promise.all(
@@ -46,11 +62,13 @@
         if (!spaceImgs || spaceImgs.length < 1) return alert("Please select an image file.");
         if (!studySpaceData.building_location) return alert("Please select a building location.");
 
+        const { opening_times, ...spacePayload } = studySpaceData;
+
         const { data: studySpaceInsert, error: studySpaceError } = await supabase
             .from("study_spaces")
             .upsert(
                 {
-                    ...studySpaceData,
+                    ...spacePayload,
                     building_location: studySpaceData.building_location as Json
                 },
                 {
@@ -102,6 +120,23 @@
             .select();
         if (imageInsertError) return alert(`Error creating image: ${imageInsertError.message}`);
 
+        const { error: deleteErr } = await supabase
+            .from("study_space_hours")
+            .delete()
+            .eq("study_space_id", studySpaceInsert.id);
+        if (deleteErr) return alert(`Error clearing old hours: ${deleteErr.message}`);
+
+        const { error: hoursErr } = await supabase.from("study_space_hours").insert(
+            opening_times.map((h) => ({
+                study_space_id: studySpaceInsert.id,
+                day_of_week: h.day_of_week,
+                opens_at: h.opens_at,
+                closes_at: h.closes_at,
+                is_24_7: h.is_24_7
+            }))
+        );
+        if (hoursErr) return alert(`Error saving opening times: ${hoursErr.message}`);
+
         alert("Thank you for your contribution!");
         // Redirect to the new study space page
         await goto(`/space/${studySpaceInsert.id}`, {
@@ -161,6 +196,20 @@
         });
         spaceImgs = dt.files;
     });
+
+    // --- Helper functions for opening times ---
+    function toggle247(index: number) {
+        const ot = studySpaceData.opening_times[index];
+        if (ot.is_24_7) {
+            ot.opens_at = "00:00";
+            ot.closes_at = "00:00";
+        }
+    }
+
+    function updateTimes(index: number) {
+        const ot = studySpaceData.opening_times[index];
+        ot.is_24_7 = ot.opens_at === "00:00" && ot.closes_at === "00:00";
+    }
 </script>
 
 <Navbar>
@@ -254,6 +303,39 @@
         </div>
     </div>
 
+    <label for="opening-times-label">Opening Times:</label>
+    <div class="opening-times">
+        {#each daysOfWeek as day, index (index)}
+            <div class="opening-time-item">
+                <label for={"opens-" + index}>{day}</label>
+                <input
+                    id={"opens-" + index}
+                    type="time"
+                    bind:value={studySpaceData.opening_times[index].opens_at}
+                    required
+                    onchange={() => updateTimes(index)}
+                />
+                <span>to</span>
+                <input
+                    id={"closes-" + index}
+                    type="time"
+                    bind:value={studySpaceData.opening_times[index].closes_at}
+                    required
+                    onchange={() => updateTimes(index)}
+                />
+                <label for={"is247-" + index}>
+                    <input
+                        id={"is247-" + index}
+                        type="checkbox"
+                        bind:checked={studySpaceData.opening_times[index].is_24_7}
+                        onchange={() => toggle247(index)}
+                    />
+                    All day
+                </label>
+            </div>
+        {/each}
+    </div>
+
     <label for="tags">Additional tags:</label>
     <div class="tagDisplay">
         {#each studySpaceData.tags as tagName (tagName)}
@@ -488,4 +570,36 @@
     .additionalImages input {
         display: none;
     }
+
+    /* Opening times layout and inputs styling */
+    .opening-times {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .opening-time-item {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .opening-time-item label {
+        margin-top: 0;
+        width: 6rem;
+    }
+
+    .opening-time-item input[type="time"] {
+        padding: 0.5rem;
+        height: 2.5rem;
+        border-radius: 0.5rem;
+        border: 2px solid #eaffeb;
+        background: none;
+        color: #eaffeb;
+    }
+
+    .opening-time-item span {
+        margin: 0 0.5rem;
+        color: #eaffeb;
+    }
 </style>

supabase/migrations/20250612032104_study_space_hours_table.sql

@@ -0,0 +1,14 @@
+CREATE TABLE study_space_hours (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    study_space_id UUID REFERENCES study_spaces(id) ON DELETE CASCADE,
+    day_of_week INT CHECK (day_of_week BETWEEN 0 AND 6),  -- 0 = Sunday, 6 = Saturday
+    opens_at TIME NOT NULL,
+    closes_at TIME NOT NULL,
+    is_24_7 BOOLEAN DEFAULT FALSE,
+    created_at timestamp with time zone DEFAULT now(),
+    updated_at timestamp with time zone DEFAULT now()
+);
+
+CREATE TRIGGER study_space_hours_updated_at
+AFTER UPDATE ON study_space_hours
+FOR EACH ROW EXECUTE FUNCTION handle_updated_at();

supabase/schemas/0001_study_spaces.sql

@@ -18,6 +18,7 @@ CREATE TABLE study_spaces (
     volume text NOT NULL,
     wifi text NOT NULL,
     power text NOT NULL,
+     
     created_at timestamp with time zone DEFAULT now(),
     updated_at timestamp with time zone DEFAULT now()
 );
@@ -39,6 +40,17 @@ CREATE TABLE reports (
     content text
 );
 
+CREATE TABLE study_space_hours (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    study_space_id UUID REFERENCES study_spaces(id) ON DELETE CASCADE,
+    day_of_week INT CHECK (day_of_week BETWEEN 0 AND 6),  -- 0 = Sunday, 6 = Saturday
+    opens_at TIME NOT NULL,
+    closes_at TIME NOT NULL,
+    is_24_7 BOOLEAN DEFAULT FALSE,
+    created_at timestamp with time zone DEFAULT now(),
+    updated_at timestamp with time zone DEFAULT now()
+);
+
 -- Triggers
 CREATE TRIGGER study_spaces_updated_at
 AFTER UPDATE ON study_spaces
@@ -51,3 +63,7 @@ FOR EACH ROW EXECUTE FUNCTION handle_updated_at();
 CREATE TRIGGER reports_updated_at
 AFTER UPDATE ON reports
 FOR EACH ROW EXECUTE FUNCTION handle_updated_at();
+
+CREATE TRIGGER study_space_hours_updated_at
+AFTER UPDATE ON study_space_hours
+FOR EACH ROW EXECUTE FUNCTION handle_updated_at();