feat: reports page

src/routes/+page.svelte

@@ -57,6 +57,7 @@
 </Navbar>
 
 <main>
+    <a href="/space/reports" class="checkReports">Check Reports</a>
     <div class="tag-filter-container">
         <form>
             <div class="tagDisplay">
@@ -234,6 +235,17 @@
     .avaliableTag:last-child {
         padding-bottom: 0.6rem;
     }
+    .checkReports {
+        grid-column: 1 / -1;
+        display: block;
+        text-align: center;
+        color: #ffeaea;
+        font-size: 1.2rem;
+        text-decoration: none;
+        padding: 0.5rem;
+        background-color: #bd4949;
+        border-radius: 0.5rem;
+    }
 
     @media (max-width: 20rem) {
         main {

src/routes/space/reports/+page.server.ts

@@ -0,0 +1,14 @@
+import { error } from "@sveltejs/kit";
+import type { PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = async ({ depends, locals: { supabase } }) => {
+    depends("db:reports");
+    const { data: reports, error: err } = await supabase
+        .from("reports")
+        .select("*, study_spaces(location)");
+    if (err) error(500, "Failed to load reports");
+
+    return {
+        reports
+    };
+};

src/routes/space/reports/+page.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+    import Navbar from "$lib/components/Navbar.svelte";
+    import crossUrl from "$lib/assets/cross.svg";
+    import type { Table } from "$lib";
+    const { data } = $props();
+    const { reports, supabase } = $derived(data);
+    import { invalidate } from "$app/navigation";
+
+    let deleting = $state(false);
+
+    async function deleteReport(report: Table<"reports">) {
+        const { error: reportDeleteError } = await supabase
+            .from("reports")
+            .delete()
+            .eq("id", report.id);
+
+        if (reportDeleteError)
+            return alert(`Error submitting report: ${reportDeleteError.message}`);
+        else alert("Report deleted successfully!");
+    }
+</script>
+
+<Navbar>
+    <a href="/">
+        <img src={crossUrl} alt="close" />
+    </a>
+</Navbar>
+
+<main>
+    {#each reports as report (report.id)}
+        <div class="reportContainer">
+            <button
+                type="button"
+                class="deleteReport"
+                aria-label="delete"
+                onclick={async (event) => {
+                    deleting = true;
+                    await deleteReport(report);
+                    await invalidate("db:reports");
+                    deleting = false;
+                }}><img src={crossUrl} alt="delete" /></button
+            >
+            <h1 class="submitHeader">
+                {report.study_spaces?.location ?? "Study space doesn't exist"}
+            </h1>
+            <span class="tag">
+                {report.type}
+            </span>
+            <p class="content">{report.content}</p>
+
+            <a href="/space/{report.study_space_id}" class="viewPage">View Space</a>
+        </div>
+    {/each}
+</main>
+
+<style>
+    main {
+        display: flex;
+        gap: 1rem;
+        align-items: center;
+        flex-wrap: wrap;
+        flex-direction: column;
+        padding: 5rem 0 1rem 0;
+        max-width: 100%;
+        margin: 0 auto;
+        height: 200vh;
+    }
+
+    .tag {
+        display: flex;
+        align-items: center;
+        border-radius: 0.25rem;
+        background-color: #2e4653;
+        color: #eaffeb;
+        font-size: 1.1rem;
+        cursor: pointer;
+        padding: 0.2rem 0.6rem;
+        width: fit-content;
+    }
+
+    .reportContainer {
+        display: flex;
+        flex-direction: column;
+        width: 90%;
+        gap: 0.5rem;
+        padding: 1rem;
+        background-color: #182125;
+        border-radius: 0.5rem;
+        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
+        color: #eaffeb;
+        position: relative;
+        translate: 0 -3.5rem;
+        border: 2px solid #eaffeb;
+    }
+
+    .viewPage {
+        width: 100%;
+        padding: 0.5rem;
+        border-radius: 0.5rem;
+        border: none;
+        background-color: #49bd85;
+        color: #ffffff;
+        font-size: 1rem;
+        cursor: pointer;
+        margin-top: 1rem;
+        text-align: center;
+        text-decoration: none;
+    }
+
+    .deleteReport {
+        position: absolute;
+        top: 0.1rem;
+        right: 0.1rem;
+        background: none;
+        border: none;
+        cursor: pointer;
+    }
+</style>