From d982bf550eafb8c2855432f3285e39d754c60b79 Mon Sep 17 00:00:00 2001
From: Barf-Vader <47476490+Barf-Vader@users.noreply.github.com>
Date: Tue, 10 Jun 2025 18:25:42 +0100
Subject: [PATCH 1/3] feat: reports

---
 src/lib/components/Report.svelte              | 128 ++++++++++++++++++
 src/lib/database.d.ts                         |  35 +++++
 src/lib/index.ts                              |   6 +
 src/routes/space/[id]/+page.svelte            |  27 ++++
 .../20250609142130_add-compulsory-tags.sql    |   4 +-
 .../20250610163930_add_report_table.sql       |  12 ++
 supabase/schemas/0001_study_spaces.sql        |  12 ++
 7 files changed, 222 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/components/Report.svelte
 create mode 100644 supabase/migrations/20250610163930_add_report_table.sql

diff --git a/src/lib/components/Report.svelte b/src/lib/components/Report.svelte
new file mode 100644
index 0000000..38e3ced
--- /dev/null
+++ b/src/lib/components/Report.svelte
@@ -0,0 +1,128 @@
+<script lang="ts">
+    import { reportTypes } from "$lib";
+    import crossUrl from "$lib/assets/cross.svg";
+    import Textarea from "./inputs/Textarea.svelte";
+    import type { Table } from "$lib";
+
+    const { data, studySpaceId, hideFunc } = $props();
+    const { supabase } = $derived(data);
+
+    let uploading = $state(false);
+    let reportData = $state<Omit<Table<"reports">, "id" | "created_at" | "updated_at">>({
+        study_space_id: studySpaceId,
+        type: "",
+        content: ""
+    });
+
+    async function uploadReport() {
+        const { data: studySpaceInsert, error: reportUploadError } = await supabase
+            .from("reports")
+            .insert(reportData)
+            .select()
+            .single();
+
+        if (reportUploadError)
+            return alert(`Error submitting report: ${reportUploadError.message}`);
+        else alert("Report submitted successfully!");
+    }
+</script>
+
+<div class="overlay">
+    <form
+        onsubmit={async (event) => {
+            event.preventDefault();
+            uploading = true;
+            await uploadReport();
+            uploading = false;
+            hideFunc();
+        }}
+        class="reportContainer"
+    >
+        <h1>Submit a Report</h1>
+        <p>What's the reason?</p>
+        <select name="reportType" class="reportType" required bind:value={reportData.type}>
+            <option value="" disabled selected>Report type</option>
+            {#each reportTypes as reportType (reportType)}
+                <option value={reportType}>{reportType}</option>
+            {/each}
+        </select>
+        <label for="description">Briefly describe the problem:</label>
+        <Textarea
+            name="description"
+            placeholder="Image is inappropriate..."
+            rows={2}
+            bind:value={reportData.content}
+        />
+        <button disabled={!reportData.type || reportData.content?.length === 0} class="submit"
+            >Submit</button
+        >
+        <button type="button" class="exit" aria-label="exit" onclick={hideFunc}
+            ><img src={crossUrl} alt="exit" /></button
+        >
+    </form>
+</div>
+
+<style>
+    .overlay {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        position: fixed;
+        justify-content: center;
+        align-items: center;
+        background-color: rgba(8, 15, 18, 0.9);
+        z-index: 100;
+    }
+
+    .reportContainer {
+        display: flex;
+        flex-direction: column;
+        width: 80%;
+        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: absolute;
+        translate: 0 -3.5rem;
+        border: 2px solid #eaffeb;
+    }
+
+    .reportType {
+        width: 100%;
+        height: 100%;
+        padding: 0.5rem;
+        border-radius: 0.5rem;
+        border: 2px solid #eaffeb;
+        background: none;
+        color: #eaffeb;
+        font-size: 0.9rem;
+        text-align: left;
+    }
+
+    .reportType option {
+        background-color: #2e4653;
+        color: #eaffeb;
+    }
+
+    .submit {
+        width: 100%;
+        padding: 0.5rem;
+        border-radius: 0.5rem;
+        border: none;
+        background-color: #49bd85;
+        color: #ffffff;
+        font-size: 1rem;
+        cursor: pointer;
+    }
+
+    .exit {
+        position: absolute;
+        top: 0.1rem;
+        right: 0.1rem;
+        background: none;
+        border: none;
+        cursor: pointer;
+    }
+</style>
diff --git a/src/lib/database.d.ts b/src/lib/database.d.ts
index 3a3aedd..ed24360 100644
--- a/src/lib/database.d.ts
+++ b/src/lib/database.d.ts
@@ -34,6 +34,41 @@ export type Database = {
   }
   public: {
     Tables: {
+      reports: {
+        Row: {
+          content: string | null
+          created_at: string | null
+          id: string
+          study_space_id: string | null
+          type: string
+          updated_at: string | null
+        }
+        Insert: {
+          content?: string | null
+          created_at?: string | null
+          id?: string
+          study_space_id?: string | null
+          type: string
+          updated_at?: string | null
+        }
+        Update: {
+          content?: string | null
+          created_at?: string | null
+          id?: string
+          study_space_id?: string | null
+          type?: string
+          updated_at?: string | null
+        }
+        Relationships: [
+          {
+            foreignKeyName: "reports_study_space_id_fkey"
+            columns: ["study_space_id"]
+            isOneToOne: false
+            referencedRelation: "study_spaces"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
       study_space_images: {
         Row: {
           created_at: string | null
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 2e36564..b8a5385 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -24,3 +24,9 @@ export const availableStudySpaceTags = [
 export const volumeTags = ["Silent", "Quiet", "Some Noise", "Loud"];
 export const wifiTags = ["Good WiFi", "Moderate WiFi", "Bad WiFi", "No WiFi"];
 export const powerOutletTags = ["Many Outlets", "Some Outlets", "No Outlets"];
+export const reportTypes = [
+    "Inappropriate content",
+    "Duplicate content",
+    "Incorrect content",
+    "Other"
+];
diff --git a/src/routes/space/[id]/+page.svelte b/src/routes/space/[id]/+page.svelte
index cf793a5..f062312 100644
--- a/src/routes/space/[id]/+page.svelte
+++ b/src/routes/space/[id]/+page.svelte
@@ -4,6 +4,7 @@
     import placeholder from "$lib/assets/study_space.png";
     import Carousel from "$lib/components/Carousel.svelte";
     import CompulsoryTags from "$lib/components/CompulsoryTags.svelte";
+    import Report from "$lib/components/Report.svelte";
 
     const { data } = $props();
     const { space, supabase } = $derived(data);
@@ -17,6 +18,11 @@
                           .publicUrl
               )
     );
+
+    let isReportVisible = $state(false);
+    function hideFunc() {
+        isReportVisible = false;
+    }
 </script>
 
 <Navbar>
@@ -25,6 +31,8 @@
     </a>
 </Navbar>
 
+{#if isReportVisible}<Report {data} studySpaceId={space.id} {hideFunc} />
+{/if}
 <main>
     <Carousel urls={imgUrls} />
     <div class="nameContainer">
@@ -51,6 +59,14 @@
     <p class="addrContainer">
         {space.building_location}
     </p>
+
+    <button
+        type="button"
+        class="reportButton"
+        onclick={() => {
+            isReportVisible = true;
+        }}>Report</button
+    >
 </main>
 
 <style>
@@ -141,4 +157,15 @@
         font-size: 1.3rem;
         padding-bottom: 0;
     }
+    .reportButton {
+        width: 100%;
+        padding: 0.4rem;
+        border-radius: 0.5rem;
+        border: none;
+        background-color: #bd4949;
+        color: #ffffff;
+        font-size: 1rem;
+        cursor: pointer;
+        margin-top: 1rem;
+    }
 </style>
diff --git a/supabase/migrations/20250609142130_add-compulsory-tags.sql b/supabase/migrations/20250609142130_add-compulsory-tags.sql
index 5355520..485144c 100644
--- a/supabase/migrations/20250609142130_add-compulsory-tags.sql
+++ b/supabase/migrations/20250609142130_add-compulsory-tags.sql
@@ -2,9 +2,9 @@ alter table "public"."study_spaces" add column "power" text;
 alter table "public"."study_spaces" add column "volume" text;
 alter table "public"."study_spaces" add column "wifi" text;
 
-update "public"."study_spaces" set "power" = 'Many' where "power" is null;
+update "public"."study_spaces" set "power" = 'Many Outlets' where "power" is null;
 update "public"."study_spaces" set "volume" = 'Quiet' where "volume" is null;
-update "public"."study_spaces" set "wifi" = 'Good' where "wifi" is null;
+update "public"."study_spaces" set "wifi" = 'Good WiFi' where "wifi" is null;
 
 alter table "public"."study_spaces" alter column "power" set not null;
 alter table "public"."study_spaces" alter column "volume" set not null;
diff --git a/supabase/migrations/20250610163930_add_report_table.sql b/supabase/migrations/20250610163930_add_report_table.sql
new file mode 100644
index 0000000..0ac16d0
--- /dev/null
+++ b/supabase/migrations/20250610163930_add_report_table.sql
@@ -0,0 +1,12 @@
+CREATE TABLE reports (
+    id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+    study_space_id uuid REFERENCES study_spaces(id) ON DELETE CASCADE,
+    created_at timestamp with time zone DEFAULT now(),
+    updated_at timestamp with time zone DEFAULT now(),
+    type text NOT NULL,
+    content text
+);
+
+CREATE TRIGGER reports_updated_at
+AFTER UPDATE ON reports
+FOR EACH ROW EXECUTE FUNCTION handle_updated_at();
diff --git a/supabase/schemas/0001_study_spaces.sql b/supabase/schemas/0001_study_spaces.sql
index 9d97101..5269ceb 100644
--- a/supabase/schemas/0001_study_spaces.sql
+++ b/supabase/schemas/0001_study_spaces.sql
@@ -28,6 +28,14 @@ CREATE TABLE study_space_images (
     PRIMARY KEY (study_space_id, image_path)
 );
 
+CREATE TABLE reports (
+    id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+    study_space_id uuid REFERENCES study_spaces(id) ON DELETE CASCADE,
+    created_at timestamp with time zone DEFAULT now(),
+    updated_at timestamp with time zone DEFAULT now(),
+    type text NOT NULL,
+    content text
+);
 
 -- Triggers
 CREATE TRIGGER study_spaces_updated_at
@@ -37,3 +45,7 @@ FOR EACH ROW EXECUTE FUNCTION handle_updated_at();
 CREATE TRIGGER study_space_images_updated_at
 AFTER UPDATE ON study_space_images
 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();

From 4d8cffc72605c4c4c88aef366cf900d6a785b725 Mon Sep 17 00:00:00 2001
From: Barf-Vader <47476490+Barf-Vader@users.noreply.github.com>
Date: Tue, 10 Jun 2025 18:30:09 +0100
Subject: [PATCH 2/3] fix: cant submit report while uploading

---
 src/lib/components/Report.svelte | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/Report.svelte b/src/lib/components/Report.svelte
index 38e3ced..a2cf295 100644
--- a/src/lib/components/Report.svelte
+++ b/src/lib/components/Report.svelte
@@ -15,7 +15,7 @@
     });
 
     async function uploadReport() {
-        const { data: studySpaceInsert, error: reportUploadError } = await supabase
+        const { error: reportUploadError } = await supabase
             .from("reports")
             .insert(reportData)
             .select()
@@ -53,8 +53,9 @@
             rows={2}
             bind:value={reportData.content}
         />
-        <button disabled={!reportData.type || reportData.content?.length === 0} class="submit"
-            >Submit</button
+        <button
+            disabled={!reportData.type || reportData.content?.length === 0 || uploading}
+            class="submit">Submit</button
         >
         <button type="button" class="exit" aria-label="exit" onclick={hideFunc}
             ><img src={crossUrl} alt="exit" /></button

From bdda39c7fe68c5cabcf2d3abd2a20271d9280dec Mon Sep 17 00:00:00 2001
From: Barf-Vader <47476490+Barf-Vader@users.noreply.github.com>
Date: Wed, 11 Jun 2025 00:03:29 +0100
Subject: [PATCH 3/3] refactor: added typing for props, fixed overflow

---
 src/lib/components/CompulsoryTags.svelte |  6 +++---
 src/lib/components/Report.svelte         | 10 +++++++++-
 src/lib/components/SpaceCard.svelte      |  4 ++--
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/CompulsoryTags.svelte b/src/lib/components/CompulsoryTags.svelte
index e6a1228..ba5a23b 100644
--- a/src/lib/components/CompulsoryTags.svelte
+++ b/src/lib/components/CompulsoryTags.svelte
@@ -33,7 +33,7 @@
         background-color: #eaffeb;
         color: #2e4653;
         cursor: pointer;
-        padding: 0.2rem 0.6rem;
+        padding: 0.2rem 0.2rem;
     }
     .compulsoryTagYellow {
         display: flex;
@@ -45,7 +45,7 @@
         background-color: #ffffd4;
         color: #534b2e;
         cursor: pointer;
-        padding: 0.2rem 0.6rem;
+        padding: 0.2rem 0.2rem;
     }
     .compulsoryTagRed {
         display: flex;
@@ -57,6 +57,6 @@
         background-color: #ffcece;
         color: #532e2e;
         cursor: pointer;
-        padding: 0.2rem 0.6rem;
+        padding: 0.2rem 0.2rem;
     }
 </style>
diff --git a/src/lib/components/Report.svelte b/src/lib/components/Report.svelte
index a2cf295..ff2b498 100644
--- a/src/lib/components/Report.svelte
+++ b/src/lib/components/Report.svelte
@@ -3,8 +3,16 @@
     import crossUrl from "$lib/assets/cross.svg";
     import Textarea from "./inputs/Textarea.svelte";
     import type { Table } from "$lib";
+    import type { SupabaseClient } from "@supabase/supabase-js";
+    import type { Database } from "$lib/database.d.ts";
 
-    const { data, studySpaceId, hideFunc } = $props();
+    interface Props {
+        data: { supabase: SupabaseClient<Database> };
+        studySpaceId: string;
+        hideFunc: () => void;
+    }
+
+    const { data, studySpaceId, hideFunc }: Props = $props();
     const { supabase } = $derived(data);
 
     let uploading = $state(false);
diff --git a/src/lib/components/SpaceCard.svelte b/src/lib/components/SpaceCard.svelte
index e845299..3f09963 100644
--- a/src/lib/components/SpaceCard.svelte
+++ b/src/lib/components/SpaceCard.svelte
@@ -78,7 +78,7 @@
     .compulsoryContainer {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
-        gap: 0.5rem;
-        font-size: 0.875rem;
+        gap: 0.4rem;
+        font-size: 0.8rem;
     }
 </style>