From bb2aaff7d30f09ea30bcb7974523e842202d1f4b Mon Sep 17 00:00:00 2001
From: SHIROKAMIQQ <migzguiang@gmail.com>
Date: Sat, 21 Mar 2026 07:26:44 +0800
Subject: [PATCH 1/2] refactor(Sigsheet): fetch members from database

---
 src/lib/shared.ts                     |  10 +++
 src/routes/+layout.svelte             |  15 +++-
 src/routes/sigsheet/MemberCard.svelte |   2 +-
 src/routes/sigsheet/MemberGrid.svelte |  47 +++++-----
 src/routes/sigsheet/Modal.svelte      |   6 +-
 src/routes/sigsheet/members.ts        | 124 --------------------------
 6 files changed, 52 insertions(+), 152 deletions(-)
 delete mode 100644 src/routes/sigsheet/members.ts

diff --git a/src/lib/shared.ts b/src/lib/shared.ts
index 4f36a26..c896843 100644
--- a/src/lib/shared.ts
+++ b/src/lib/shared.ts
@@ -22,3 +22,13 @@ export const filledSigsheet = {
 };
 
 export const applicant_names_list = writable<string[]>([]);
+
+export interface mem {
+    member_id: number;
+    member_name: string;
+    member_committee: string;
+    role: string;
+    photo: string;
+}
+
+export const members = writable<mem[]>([]);
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 8f32f0e..7fa0930 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import './app.css';
-    import { applicant_names_list, filledSigsheet, gdrive_folder_id, username, uuid } from '$lib/shared';
+    import { applicant_names_list, filledSigsheet, gdrive_folder_id, members, username, uuid } from '$lib/shared';
     import CSI_Logo from '$lib/icons/upcsi.svg';
     import HAM_MENU from '$lib/icons/ham_menu.svg';
     import NavBar from '$lib/NavBar.svelte';
@@ -39,6 +39,19 @@
         }
         console.log(applicant_names_list);
     });
+
+    // Get members list
+    onMount(async () => {
+        console.log('Fetching members list.');
+        const {data: members_data, error: members_error} = await supabase
+            .from('members')
+            .select('member_id, member_name, member_committee, role, photo');
+        if (members_error) {
+            console.error('Error fetching members: ', members_error);
+        } else if (members_data) {
+            members.set(members_data);
+        }
+    });
 </script>
 
 {#if !data.session}
diff --git a/src/routes/sigsheet/MemberCard.svelte b/src/routes/sigsheet/MemberCard.svelte
index a5f3029..12b0466 100644
--- a/src/routes/sigsheet/MemberCard.svelte
+++ b/src/routes/sigsheet/MemberCard.svelte
@@ -22,7 +22,7 @@
     </div>
 
     <div>
-        <h2 class="text-csi-white text-left text-lg font-bold">{member.name}</h2>
+        <h2 class="text-csi-white text-left text-lg font-bold">{member.member_name}</h2>
         <h3 class="text-csi-white text-left text-sm">{member.role}</h3>
     </div>
 </main>
diff --git a/src/routes/sigsheet/MemberGrid.svelte b/src/routes/sigsheet/MemberGrid.svelte
index d44b228..2882bce 100644
--- a/src/routes/sigsheet/MemberGrid.svelte
+++ b/src/routes/sigsheet/MemberGrid.svelte
@@ -1,40 +1,41 @@
 <script lang="ts">
     import { fade } from 'svelte/transition';
 
-    import { type mem, members } from './members';
+    import { type mem } from '$lib/shared';
 
     import MemberCard from './MemberCard.svelte';
     import Modal from './Modal.svelte';
-    import { filledSigsheet } from '$lib/shared';
+    import { filledSigsheet, members } from '$lib/shared';
 
     console.log('FILLED SIGSHEET: ', $filledSigsheet);
+    // console.log('MEMBERS', $members);
 
-    const categories = ['Exec', 'M&I', 'Service', 'Innov', 'Engg', 'Exte', 'B&C'];
+    const categories = ['Executive', 'Membership & Internals', 'Service', 'Innovation', 'Engineering', 'External Relations', 'Branding & Creatives'];
 
     const categoryColors: Record<string, string> = {
-        Exec: 'var(--color-csi-blue)',
-        'M&I': 'var(--color-mni-pink)',
+        Executive: 'var(--color-csi-blue)',
+        'Membership & Internals': 'var(--color-mni-pink)',
         Service: 'var(--color-service-yellow)',
-        Innov: 'var(--color-innov-orange)',
-        Engg: 'var(--color-engg-blue)',
-        Exte: 'var(--color-exte-blue)',
-        'B&C': 'var(--color-bnc-green)',
+        Innovation: 'var(--color-innov-orange)',
+        Engineering: 'var(--color-engg-blue)',
+        'External Relations': 'var(--color-exte-blue)',
+        'Branding & Creatives': 'var(--color-bnc-green)',
         CoApp: 'var(--color-csi-white)',
     };
 
     const categoryHeaders: Record<string, string> = {
-        Exec: 'Executive Committee',
-        'M&I': 'Membership & Internals Committee',
+        Executive: 'Executive Committee',
+        'Membership & Internals': 'Membership & Internals Committee',
         Service: 'Service Committee',
-        Innov: 'Innovation Committee',
-        Engg: 'Engineering Committee',
-        Exte: 'External Relations Committee',
-        'B&C': 'Branding & Creatives Committee',
+        Innovation: 'Innovation Committee',
+        Engineering: 'Engineering Committee',
+        'External Relations': 'External Relations Committee',
+        'Branding & Creatives': 'Branding & Creatives Committee',
         CoApp: 'Co-Applicant',
     };
 
-    let activeCategory = $state('Exec');
-    let selectedMember = $state(members[0]);
+    let activeCategory = $state('Executive');
+    let selectedMember = $state($members[0]);
     let showModal = $state(false);
 
     function openModal(member: mem) {
@@ -44,10 +45,10 @@
 
     const coApp_obj = {
         member_id: 0,
-        name: '',
+        member_name: '',
+        member_committee: 'CoApp',
         role: '',
-        category: 'CoApp',
-        photo: '',
+        photo: ''
     };
 
     function openCoAppModal() {
@@ -58,7 +59,7 @@
     function closeModal() {
         showModal = false;
         if (activeCategory === 'CoApp') {
-            activeCategory = 'Exec';
+            activeCategory = 'Executive';
         }
     }
 </script>
@@ -78,7 +79,7 @@
             <div
                 class="grid w-full grid-cols-2 gap-1.5 min-[375px]:gap-3 min-[390px]:gap-4 min-[480px]:grid-cols-4 min-[834px]:flex-1 min-[834px]:grid-cols-4 min-[834px]:gap-4 min-[1280px]:grid-cols-4"
             >
-                {#each members.filter(member => member.category === activeCategory) as member (member.name)}
+                {#each $members.filter(member => member.member_committee === activeCategory) as member (member.member_name)}
                     <div in:fade={{ duration: 1300 }}>
                         <button onclick={() => openModal(member)} class="w-full cursor-pointer">
                             <MemberCard filled={$filledSigsheet.has(member.member_id)} {member} />
@@ -130,7 +131,7 @@
         <div class="flex-center fixed inset-0 justify-center bg-black/50">
             <Modal
                 member_id={selectedMember?.member_id}
-                name={selectedMember?.name}
+                member_name={selectedMember?.member_name}
                 role={selectedMember?.role}
                 {closeModal}
                 {activeCategory}
diff --git a/src/routes/sigsheet/Modal.svelte b/src/routes/sigsheet/Modal.svelte
index 3c974ed..987190a 100644
--- a/src/routes/sigsheet/Modal.svelte
+++ b/src/routes/sigsheet/Modal.svelte
@@ -2,7 +2,7 @@
     import { applicant_names_list, filledSigsheet, gdrive_folder_id, username, uuid } from '$lib/shared';
     import { writable } from 'svelte/store';
 
-    const { member_id, name, role, closeModal, activeCategory } = $props();
+    const { member_id, member_name, role, closeModal, activeCategory } = $props();
     // Implement color of name
 
     const categoryColors: Record<string, string> = {
@@ -108,11 +108,11 @@
             <div class="mx-2">
                 {#if activeCategory !== 'CoApp'}
                     <h2 class="pb-1 text-2xl font-bold md:text-4xl" style="color:{categoryColors[activeCategory]}">
-                        {name}
+                        {member_name}
                     </h2>
                     <h3 class="text-csi-white text-sm">{role}</h3>
                     <input type="text" name="member_id" value={member_id} hidden required />
-                    <input type="text" name="member_name" value={name} hidden required />
+                    <input type="text" name="member_name" value={member_name} hidden required />
                 {:else}
                     <div class="relative w-full">
                         <!-- Dropdown button -->
diff --git a/src/routes/sigsheet/members.ts b/src/routes/sigsheet/members.ts
deleted file mode 100644
index aca2e13..0000000
--- a/src/routes/sigsheet/members.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-export interface mem {
-    member_id: number;
-    name: string;
-    role: string;
-    category: string;
-    photo: string;
-}
-
-export const members: mem[] = [
-    {
-        member_id: 5,
-        name: 'Benj Lazaro',
-        role: 'President',
-        category: 'Exec',
-        photo: 'BenjLazaro',
-    },
-    {
-        member_id: 16,
-        name: 'Nate Zuñiga',
-        role: 'Director for Membership and Internals',
-        category: 'Exec',
-        photo: 'NateZuñiga',
-    },
-    {
-        member_id: 4,
-        name: 'Bryan Uy',
-        role: 'Vice President for Service',
-        category: 'Exec',
-        photo: 'BryanUy',
-    },
-    {
-        member_id: 36,
-        name: 'Sidney Fernando',
-        role: 'Co-Vice President for Innovation',
-        category: 'Exec',
-        photo: 'SidneyFernando',
-    },
-    {
-        member_id: 48,
-        name: 'Mikel Arcardo',
-        role: 'Co-Vice President for Innovation',
-        category: 'Exec',
-        photo: 'MikelArcardo',
-    },
-    {
-        member_id: 40,
-        name: 'Ehren Castillo',
-        role: 'Director for Engineering',
-        category: 'Exec',
-        photo: 'EhrenCastillo',
-    },
-    {
-        member_id: 52,
-        name: 'Cessa Gonzales',
-        role: 'Director for External Relations',
-        category: 'Exec',
-        photo: 'CessaGonzales',
-    },
-    {
-        member_id: 66,
-        name: 'Karin Consebido',
-        role: 'Director for Branding and Creatives',
-        category: 'Exec',
-        photo: 'KarinConsebido',
-    },
-
-    { member_id: 7, name: 'Isay Bucu', role: '', category: 'B&C', photo: 'IsayBucu' },
-    { member_id: 61, name: 'Eko Delflin', role: '', category: 'B&C', photo: 'EkoDelflin' },
-    { member_id: 62, name: 'Fibi Moraca', role: '', category: 'B&C', photo: 'FibiMoraca' },
-    { member_id: 67, name: 'Karlo Domingo', role: '', category: 'B&C', photo: 'KarloDomingo' },
-    { member_id: 68, name: 'Paula Domingo', role: '', category: 'B&C', photo: 'PaulaDomingo' },
-    { member_id: 71, name: 'Yuwen Saavedra', role: '', category: 'B&C', photo: 'YuwenSaavedra' },
-    { member_id: 72, name: 'Char Sim', role: '', category: 'B&C', photo: 'CharSim' },
-
-    { member_id: 11, name: 'Cedric Legara', role: '', category: 'Engg', photo: 'CedricLegara' },
-    { member_id: 21, name: 'Elijah Mejilla', role: '', category: 'Engg', photo: 'ElijahMejilla' },
-    { member_id: 43, name: 'Lily Celestino', role: '', category: 'Engg', photo: 'LilyCelestino' },
-    { member_id: 44, name: 'Louie Torres', role: '', category: 'Engg', photo: 'LouieTorres' },
-    { member_id: 45, name: 'Lucas Agcaoili', role: '', category: 'Engg', photo: 'LucasAgcaoili' },
-    { member_id: 46, name: 'Marcus Pascual', role: '', category: 'Engg', photo: 'MarcusPascual' },
-    { member_id: 47, name: 'Michael Real', role: '', category: 'Engg', photo: 'MichaelReal' },
-    { member_id: 50, name: 'Yenyen Galinato', role: '', category: 'Engg', photo: 'YenyenGalinato' },
-    { member_id: 59, name: 'Jacky Abucay', role: '', category: 'Engg', photo: 'JackyAbucay' },
-    { member_id: 73, name: 'Marius Barcenas', role: '', category: 'Engg', photo: 'MariusBarcenas' },
-
-    { member_id: 51, name: 'Alyssa Añonuevo', role: '', category: 'Exte', photo: 'AlyssaAñonuevo' },
-    { member_id: 6, name: 'Sean Tolentino', role: '', category: 'Exte', photo: 'SeanKenjiTolentino' },
-    { member_id: 53, name: 'Dash Ceñido', role: '', category: 'Exte', photo: 'DashCeñido' },
-    { member_id: 57, name: 'GV Vitug', role: '', category: 'Exte', photo: 'GVVitug' },
-    { member_id: 58, name: 'Inigo De Guzman', role: '', category: 'Exte', photo: 'InigoDeGuzman' },
-    { member_id: 60, name: 'Rafa Jimenez', role: '', category: 'Exte', photo: 'RafaJimenez' },
-    { member_id: 23, name: 'Jerome Estrella', role: '', category: 'Exte', photo: 'JeromeEstrella' },
-    { member_id: 74, name: 'Julian Dolojan', role: '', category: 'Exte', photo: 'LinoPlaceholder' },
-
-    { member_id: 29, name: 'Alec Lopez', role: '', category: 'Innov', photo: 'AlecLopez' },
-    { member_id: 30, name: 'CJ Salces', role: '', category: 'Innov', photo: 'CJSalces' },
-    { member_id: 32, name: 'Hanz Vicencio', role: '', category: 'Innov', photo: 'HanzVicencio' },
-    { member_id: 33, name: 'KC Abriol', role: '', category: 'Innov', photo: 'KCAbriol' },
-    { member_id: 34, name: 'Kurt Lanting', role: '', category: 'Innov', photo: 'KurtLanting' },
-    { member_id: 35, name: 'Migz Guiang', role: '', category: 'Innov', photo: 'MigzGuiang' },
-    { member_id: 38, name: 'Ysaac Villamil', role: '', category: 'Innov', photo: 'YsaacVillamil' },
-    { member_id: 20, name: 'Dale Flores', role: '', category: 'Innov', photo: 'DaleFlores' },
-    { member_id: 75, name: 'Ellie Lim', role: '', category: 'Innov', photo: 'EllieLim' },
-
-    { member_id: 8, name: 'Abe Sahi', role: '', category: 'M&I', photo: 'AbeSahi' },
-    { member_id: 9, name: 'Aisha Go', role: '', category: 'M&I', photo: 'AishaGo' },
-    { member_id: 2, name: 'BMae Amurao', role: '', category: 'M&I', photo: 'BmaeAmurao' },
-    { member_id: 17, name: 'Paolo Lapira', role: '', category: 'M&I', photo: 'PaoloLapira' },
-    { member_id: 18, name: 'Trish Obzunar', role: '', category: 'M&I', photo: 'TrishObzunar' },
-    { member_id: 42, name: 'Kenneth Co', role: '', category: 'M&I', photo: 'KennethCo' },
-    { member_id: 63, name: 'Gabby Sacramento', role: '', category: 'M&I', photo: 'GabbySacramento' },
-    { member_id: 76, name: 'Azul Eusebio', role: '', category: 'M&I', photo: 'AzulEusebio' },
-
-    { member_id: 3, name: 'Don Chavez', role: '', category: 'Service', photo: 'DonSebastienChavez' },
-    { member_id: 22, name: 'Ethan Filio', role: '', category: 'Service', photo: 'EthanFilio' },
-    { member_id: 25, name: 'Leanne Austria', role: '', category: 'Service', photo: 'LeanneAustria' },
-    { member_id: 27, name: 'Shereena Villafania', role: '', category: 'Service', photo: 'ShereenaVillafania' },
-    { member_id: 28, name: 'Shey Manzala', role: '', category: 'Service', photo: 'SheyManzala' },
-    { member_id: 41, name: 'Emman Amante', role: '', category: 'Service', photo: 'EmmanAmante' },
-    { member_id: 69, name: 'Sam Siy', role: '', category: 'Service', photo: 'SamSiy' },
-    { member_id: 77, name: 'Andri Crisostomo', role: '', category: 'Service', photo: 'AndriCrisostomo' },
-];
-
-export default members;

From c4240210010ac827a03a394e2cd9bcf4354dc91c Mon Sep 17 00:00:00 2001
From: SHIROKAMIQQ <migzguiang@gmail.com>
Date: Sat, 21 Mar 2026 07:43:02 +0800
Subject: [PATCH 2/2] chore: run linters

---
 src/routes/+layout.svelte             |  2 +-
 src/routes/sigsheet/MemberGrid.svelte | 16 +++++++++++-----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 7fa0930..0b64ca2 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -43,7 +43,7 @@
     // Get members list
     onMount(async () => {
         console.log('Fetching members list.');
-        const {data: members_data, error: members_error} = await supabase
+        const { data: members_data, error: members_error } = await supabase
             .from('members')
             .select('member_id, member_name, member_committee, role, photo');
         if (members_error) {
diff --git a/src/routes/sigsheet/MemberGrid.svelte b/src/routes/sigsheet/MemberGrid.svelte
index 2882bce..085c36a 100644
--- a/src/routes/sigsheet/MemberGrid.svelte
+++ b/src/routes/sigsheet/MemberGrid.svelte
@@ -1,16 +1,22 @@
 <script lang="ts">
+    import { filledSigsheet, type mem, members } from '$lib/shared';
     import { fade } from 'svelte/transition';
 
-    import { type mem } from '$lib/shared';
-
     import MemberCard from './MemberCard.svelte';
     import Modal from './Modal.svelte';
-    import { filledSigsheet, members } from '$lib/shared';
 
     console.log('FILLED SIGSHEET: ', $filledSigsheet);
     // console.log('MEMBERS', $members);
 
-    const categories = ['Executive', 'Membership & Internals', 'Service', 'Innovation', 'Engineering', 'External Relations', 'Branding & Creatives'];
+    const categories = [
+        'Executive',
+        'Membership & Internals',
+        'Service',
+        'Innovation',
+        'Engineering',
+        'External Relations',
+        'Branding & Creatives',
+    ];
 
     const categoryColors: Record<string, string> = {
         Executive: 'var(--color-csi-blue)',
@@ -48,7 +54,7 @@
         member_name: '',
         member_committee: 'CoApp',
         role: '',
-        photo: ''
+        photo: '',
     };
 
     function openCoAppModal() {