👙🧌 ↝ [SSM-30 SSM-31]: Working on global view of community stations

app/tests/page.tsx

@@ -5,7 +5,7 @@ import StarnetLayout from "@/components/Layout/Starnet";
 import { ExoplanetTransitHunter } from "@/components/Projects/Telescopes/ExoplanetC23";
 import MissionPathway from "@/components/Missions/Pathway";
 import ProfileCardModal from "@/components/profile/form";
-import { CommunityScienceStation } from "@/components/Structures/Community/Modal";
+import { CommunityScienceStation } from "@/components/Structures/Community/StationModal";
 import { CreateCommunityStation } from "@/components/Structures/Build/MakeCommunityStation";
 
 export default function TestPage() {

components/Inventory/fetchId.tsx

@@ -12,7 +12,8 @@ interface InventoryIdFetcherProps {
 
 export const InventoryIdFetcher: React.FC<InventoryIdFetcherProps> = ({ structureId, onInventoryIdFetched }) => {
   const supabase = useSupabaseClient();
-  const session = useSession();
+    const session = useSession();
+
   const { activePlanet } = useActivePlanet();
 
   useEffect(() => {

components/Projects/Telescopes/DiskDetector.tsx

@@ -230,7 +230,8 @@ export const DiskDetectorTutorial: React.FC<TelescopeProps> = ({
 
 export function TelescopeDiskDetector() {
   const supabase = useSupabaseClient();
-  const session = useSession();
+    const session = useSession();
+
   const { activePlanet } = useActivePlanet();
 
   const [anomaly, setAnomaly] = useState<Anomaly | null>(null);

components/Structures/Auto/ActiveAutomaton.tsx

@@ -21,7 +21,8 @@ export function ActiveAutomatonForMining({
   deposit,
 }: ActiveAutomatonForMiningProps) {
   const supabase = useSupabaseClient();
-  const session = useSession();
+    const session = useSession();
+
   const { activePlanet } = useActivePlanet();
 
   const [userAutomaton, setUserAutomaton] = useState<Automaton | null>(null);
@@ -416,7 +417,8 @@ export function ActiveAutomatonForMining({
 
 export function AutomatonUpgrader() {
   const supabase = useSupabaseClient();
-  const session = useSession();
+    const session = useSession();
+
   const { activePlanet } = useActivePlanet();
 
   const [automatons, setAutomatons] = useState<Automaton[]>([]);

components/Structures/Auto/deployAndReturn.tsx

@@ -19,7 +19,8 @@ interface RoverData {
 
 export default function DeployRooversInitial() {
   const supabase = useSupabaseClient();
-  const session = useSession();
+    const session = useSession();
+
   const { activePlanet } = useActivePlanet(); 
 
   const newRoverToInventoryData = {

components/Structures/Community/IndividualStation.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from "react";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Building2 } from "lucide-react";
+
+export interface IndividualStationProps {
+    name: string;
+    projects: Project[];
+    onClose?: () => void;
+    // Will add more from `StationModal.tsx` script later
+    // For now, the focus is on integrating projects
+};
+
+type Project = {
+    id: string;
+    name: string;
+    identifier: string;
+    isUnlocked: boolean;
+    level: number;
+};
+
+const IndividualCommunityStation: React.FC<IndividualStationProps> = ({
+    name,
+    projects,
+    onClose,
+}) => {
+    const [activeSection, setActiveSection] = useState<string | null>(null);
+    const [selectedItem, setSelectedItem] = useState<Project | null>(null);
+    const [isExpanded, setExpanded] = useState(false);
+
+    const [isDarkMode, setIsDarkMode] = useState(false);
+    const toggleDarkMode = () => setIsDarkMode(!isDarkMode);
+    const baseColors = isDarkMode
+      ? { bg: "#303F51", text: "#F7F5E9", accent1: "#85DDA2", accent2: "#5FCBC3" }
+      : {
+          bg: "#F7F5E9",
+          text: "#303F51",
+          accent1: "#FFD580",
+          accent2: "#5FCBC3",
+        };
+
+    const handleItemClick = (item: any) => {
+      setSelectedItem(item);
+    };
+
+    const handleBack = () => {
+      setSelectedItem(null);
+      setActiveSection(null);
+    };
+
+    const handleClose = () => {
+        setExpanded(false);
+        if (onClose) {
+          onClose();
+        };
+    };
+
+    return (
+        <Dialog defaultOpen>
+            <div
+                className={`flex flex-col items-center p-6 rounded-lg shadow-lg w-full max-w-md mx-auto transition-colors duration-300 ease-in-out overflow-hidden`}
+                style={{ backgroundColor: baseColors.bg, color: baseColors.text }}
+            >
+                <div className="flex justify-between items-center w-full mb-6">
+                    <Building2
+                        className="w-10 h-10"
+                        style={{ color: baseColors.accent2}}
+                    />
+                    <h2 className="text-2xl font-bold">
+                        {name}
+                    </h2>
+                </div>
+            </div>
+        </Dialog>
+    );
+};
+
+export default IndividualCommunityStation;

components/Structures/Community/ViewAllStations.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import React, { useCallback, useEffect, useState } from "react";
+import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
+import { useActivePlanet } from "@/context/ActivePlanet";
+import IndividualCommunityStation, { IndividualStationProps } from "./IndividualStation";
+import { InventoryStructureItem, StructureItemDetail } from "@/types/Items";
+
+import "../../styles/Anims/StarterStructureAnimations.css";
+import { CreateCommunityStation } from "../Build/MakeCommunityStation";
+
+export default function StationsOnPlanet() {
+    const supabase = useSupabaseClient();
+    const session = useSession();
+
+    const { activePlanet } = useActivePlanet();
+
+    const [stationsOnPlanet, setStationsOnPlanet] = useState<IndividualStationProps[]>([]);
+    const [itemDetails, setItemDetails] = useState<Map<number, StructureItemDetail>>(new Map());
+    const [selectedStation, setSelectedStation] = useState<IndividualStationProps | null>(null);
+
+    const [loading, setLoading] = useState(true);
+
+    const fetchStructures = useCallback(async () => {
+        if (!session || !activePlanet) {
+            setLoading(false);
+            return;
+        };
+
+        try {
+            const response = await fetch('/api/gameplay/inventory');
+            const itemData: StructureItemDetail[] = await response.json();
+            const itemMap = new Map<number, StructureItemDetail>();
+            itemData.forEach(item => {
+                if (item.ItemCategory === "CommunityStation") {
+                    itemMap.set(item.id, item);
+                }
+            });
+
+            setItemDetails(itemMap);
+            const { data: inventoryData, error: inventoryError } = await supabase
+                .from('inventory')
+                .select("*")
+                .eq('anomaly', activePlanet.id);
+
+            if (inventoryError) {
+                throw inventoryError;
+            };
+
+            const stations = new Map<number, InventoryStructureItem>();
+            inventoryData.forEach(structure => {
+                const itemDetail = itemMap.get(structure.item);
+                if (itemDetail && itemDetail.locationType === 'Surface' && !stations.has(structure.item)) {
+                    stations.set(structure.item, structure);
+                };
+            });
+
+            const uniqueStations = Array.from(stations.values());
+            // setStationsOnPlanet(uniqueStations || []);
+        } catch (error: any) {
+            console.error("Error fetching structures", error);
+        } finally {
+            setLoading(false);
+        };
+    }, [session, activePlanet, supabase, itemDetails]);
+
+    return (
+        <></>
+    );
+};

components/Structures/Config/RepairStructure.tsx

@@ -18,7 +18,8 @@ const StructureRepair: React.FC<StructureRepairProps> = ({
   inventoryId,
 }) => {
   const supabase = useSupabaseClient();
-  const session = useSession();
+    const session = useSession();
+
   const { activePlanet } = useActivePlanet();
 
   const [structureDurability, setStructureDurability] = useState<number>(0);