Feature/backend data integration

cms/package.json

@@ -27,6 +27,7 @@
     "graphql": "^16.8.1",
     "next": "15.4.11",
     "payload": "3.79.0",
+    "payload-plugin-import-export": "^3.0.20",
     "react": "19.2.1",
     "react-dom": "19.2.1",
     "sharp": "0.34.2",

cms/src/app/(payload)/admin/importMap.js

@@ -1,5 +1,7 @@
+import { ViewWrapper as ViewWrapper_023789d862ecf764c682ca49ec4d5e56 } from 'payload-plugin-import-export/client'
 import { CollectionCards as CollectionCards_f9c02e79a4aed9a3924487c0cd4cafb1 } from '@payloadcms/next/rsc'
 
 export const importMap = {
-  '@payloadcms/next/rsc#CollectionCards': CollectionCards_f9c02e79a4aed9a3924487c0cd4cafb1,
+  "payload-plugin-import-export/client#ViewWrapper": ViewWrapper_023789d862ecf764c682ca49ec4d5e56,
+  "@payloadcms/next/rsc#CollectionCards": CollectionCards_f9c02e79a4aed9a3924487c0cd4cafb1
 }

cms/src/payload-types.ts

@@ -220,6 +220,7 @@ export interface Event {
   date: string
   description?: string | null
   coverImage?: (number | null) | Media
+  category?: ('games' | 'community' | 'food' | 'agm' | 'all') | null
   isUpcoming?: boolean | null
   images?:
     | {
@@ -473,6 +474,7 @@ export interface EventsSelect<T extends boolean = true> {
   date?: T
   description?: T
   coverImage?: T
+  category?: T
   isUpcoming?: T
   images?:
     | T

cms/src/payload.config.ts

@@ -1,5 +1,6 @@
 import { postgresAdapter } from '@payloadcms/db-postgres'
 import { lexicalEditor } from '@payloadcms/richtext-lexical'
+import importExportPlugin from 'payload-plugin-import-export'
 import path from 'path'
 import { buildConfig } from 'payload'
 import { fileURLToPath } from 'url'
@@ -34,5 +35,15 @@ export default buildConfig({
     },
   }),
   sharp,
-  plugins: [],
+  plugins: [
+    importExportPlugin({
+      enabled: true,
+      excludeCollections: [Users.slug, Members.slug],
+      canImport: (user) => {
+        if (!user || typeof user !== 'object') return false
+
+        return (user as { role?: string | null }).role === 'admin'
+      },
+    }),
+  ],
 })

web/next.config.ts

@@ -1,7 +1,33 @@
 import type { NextConfig } from 'next'
 
+function getCmsImageRemotePattern() {
+  const cmsUrl = process.env.NEXT_PUBLIC_CMS_URL
+  if (!cmsUrl) return undefined
+
+  try {
+    const url = new URL(cmsUrl)
+    return {
+      protocol: url.protocol.replace(':', '') as 'http' | 'https',
+      hostname: url.hostname,
+      port: url.port,
+      pathname: '/api/media/file/**',
+    }
+  } catch {
+    return undefined
+  }
+}
+
+const cmsImageRemotePattern = getCmsImageRemotePattern()
+const allowLocalCmsImages =
+  cmsImageRemotePattern?.hostname === 'localhost' ||
+  cmsImageRemotePattern?.hostname === '127.0.0.1'
+
 const nextConfig: NextConfig = {
   output: 'standalone',
+  images: {
+    dangerouslyAllowLocalIP: allowLocalCmsImages,
+    remotePatterns: cmsImageRemotePattern ? [cmsImageRemotePattern] : [],
+  },
 }
 
 export default nextConfig

web/package.json

@@ -10,11 +10,12 @@
     "format:check": "prettier --check ."
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.100.10",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^9.0.1",
     "@mui/material": "^9.0.1",
+    "@supabase/supabase-js": "^2.107.0",
+    "@tanstack/react-query": "^5.100.10",
     "next": "16.1.6",
     "react": "19.2.3",
     "react-dom": "19.2.3",

web/src/app/about/_components/ExecGrid.tsx

@@ -1,21 +1,53 @@
-import { execMembers } from './execData'
+'use client'
+
+import { useExecs } from '@/hooks/useExecs'
+import { getCmsMediaUrl } from '@/lib/media'
+
+const SKELETON_KEYS = [
+  'sk-1',
+  'sk-2',
+  'sk-3',
+  'sk-4',
+  'sk-5',
+  'sk-6',
+  'sk-7',
+  'sk-8',
+]
 import ExecCard from './ExecCard'
 
 export default function ExecGrid() {
+  const { data: execs, isLoading, isError } = useExecs()
+
   return (
     <section className="px-8 sm:px-14 md:px-20 lg:px-[6.5rem] py-8 sm:py-10 md:py-12">
       <h2 className="font-averia font-bold text-ssa-red text-3xl sm:text-4xl md:text-5xl mb-10 sm:mb-12">
         Meet the SSA Team
       </h2>
+
+      {isError && (
+        <p className="text-ssa-black/50">
+          Failed to load the team. Please try again later.
+        </p>
+      )}
+
+      {/* Show empty card placeholders while loading */}
       <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-6 sm:gap-8 md:gap-10">
-        {execMembers.map((exec) => (
-          <ExecCard
-            key={exec.id}
-            name={exec.name}
-            role={exec.role}
-            photo={exec.photo}
-          />
-        ))}
+        {isLoading
+          ? SKELETON_KEYS.map((key) => (
+              <div
+                key={key}
+                className="aspect-square w-full rounded-xl bg-gray-200 animate-pulse"
+              />
+            ))
+          : (execs ?? []).map((exec) => (
+              <ExecCard
+                key={exec.id}
+                name={exec.name}
+                role={exec.role}
+                // Fall back to the mascot if no photo has been uploaded yet
+                photo={getCmsMediaUrl(exec.photo?.url) ?? '/mascot.png'}
+              />
+            ))}
       </div>
     </section>
   )