added OrganisationSelect and overview of selected org

packages/frontend/src/Organisations.tsx

@@ -1,9 +1,97 @@
+import type { OrganisationResponse, UserRecord } from "@issue/shared";
+import { useCallback, useEffect, useState } from "react";
+import { OrganisationSelect } from "@/components/organisation-select";
 import { SettingsPageLayout } from "@/components/settings-page-layout";
+import { getAuthHeaders } from "@/lib/utils";
+
+const SERVER_URL = import.meta.env.VITE_SERVER_URL?.trim() || "http://localhost:3000";
 
 function Organisations() {
+    const user = JSON.parse(localStorage.getItem("user") || "{}") as UserRecord;
+
+    const [organisations, setOrganisations] = useState<OrganisationResponse[]>([]);
+    const [selectedOrganisation, setSelectedOrganisation] = useState<OrganisationResponse | null>(null);
+
+    const refetchOrganisations = useCallback(
+        async (options?: { selectOrganisationId?: number }) => {
+            try {
+                const res = await fetch(`${SERVER_URL}/organisation/by-user?userId=${user.id}`, {
+                    headers: getAuthHeaders(),
+                });
+
+                if (!res.ok) {
+                    console.error(await res.text());
+                    setOrganisations([]);
+                    setSelectedOrganisation(null);
+                    return;
+                }
+
+                const data = (await res.json()) as Array<OrganisationResponse>;
+                setOrganisations(data);
+
+                if (options?.selectOrganisationId) {
+                    const created = data.find((o) => o.Organisation.id === options.selectOrganisationId);
+                    if (created) {
+                        setSelectedOrganisation(created);
+                        return;
+                    }
+                }
+
+                setSelectedOrganisation((prev) => {
+                    if (!prev) return data[0] || null;
+                    const stillExists = data.find((o) => o.Organisation.id === prev.Organisation.id);
+                    return stillExists || data[0] || null;
+                });
+            } catch (err) {
+                console.error("error fetching organisations:", err);
+                setOrganisations([]);
+                setSelectedOrganisation(null);
+            }
+        },
+        [user.id],
+    );
+
+    useEffect(() => {
+        void refetchOrganisations();
+    }, [refetchOrganisations]);
+
+    useEffect(() => {
+        setSelectedOrganisation((prev) => prev || organisations[0] || null);
+    }, [organisations]);
+
     return (
         <SettingsPageLayout title="Organisations">
-            <p className="font-400">Organisations page here</p>
+            <div className="flex flex-col gap-4">
+                <div className="flex gap-2 items-center">
+                    <OrganisationSelect
+                        organisations={organisations}
+                        selectedOrganisation={selectedOrganisation}
+                        onSelectedOrganisationChange={setSelectedOrganisation}
+                        onCreateOrganisation={async (organisationId) => {
+                            await refetchOrganisations({ selectOrganisationId: organisationId });
+                        }}
+                    />
+                </div>
+
+                {selectedOrganisation ? (
+                    <div className="flex flex-col gap-1">
+                        <h2 className="text-xl font-600">{selectedOrganisation.Organisation.name}</h2>
+                        <p className="text-sm text-muted-foreground">
+                            Slug: {selectedOrganisation.Organisation.slug}
+                        </p>
+                        <p className="text-sm text-muted-foreground">
+                            Role: {selectedOrganisation.OrganisationMember.role}
+                        </p>
+                        {selectedOrganisation.Organisation.description ? (
+                            <p className="text-sm">{selectedOrganisation.Organisation.description}</p>
+                        ) : (
+                            <p className="text-sm text-muted-foreground">No description</p>
+                        )}
+                    </div>
+                ) : (
+                    <p className="text-sm text-muted-foreground">No organisations yet.</p>
+                )}
+            </div>
         </SettingsPageLayout>
     );
 }