Setup docker for production and development

Change ./init.sh to be an executable then run it.

The default inner container ports are as followed:
- Postgres: 5432:5432
- Backend: 3001:3000
- Frontend: 3000:3000

- Frontend dev: 8000

The backend image needs to be built:

docker compose up -d --build

frontend/components/team-switcher.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import * as React from "react";
+import { ChevronsUpDown, Plus } from "lucide-react";
+
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+	SidebarMenu,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	useSidebar,
+} from "@/components/ui/sidebar";
+
+export function TeamSwitcher({
+	teams,
+}: {
+	teams: {
+		name: string;
+		logo: React.ElementType;
+		plan: string;
+	}[];
+}) {
+	const { isMobile } = useSidebar();
+	const [activeTeam, setActiveTeam] = React.useState(teams[0]);
+
+	return (
+		<SidebarMenu>
+			<SidebarMenuItem>
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<SidebarMenuButton
+							size="lg"
+							className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+						>
+							<div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+								<activeTeam.logo className="size-4" />
+							</div>
+							<div className="grid flex-1 text-left text-sm leading-tight">
+								<span className="truncate font-semibold">
+									{activeTeam.name}
+								</span>
+								<span className="truncate text-xs">
+									{activeTeam.plan}
+								</span>
+							</div>
+							<ChevronsUpDown className="ml-auto" />
+						</SidebarMenuButton>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent
+						className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+						align="start"
+						side={isMobile ? "bottom" : "right"}
+						sideOffset={4}
+					>
+						<DropdownMenuLabel className="text-xs text-muted-foreground">
+							Teams
+						</DropdownMenuLabel>
+						{teams.map((team, index) => (
+							<DropdownMenuItem
+								key={team.name}
+								onClick={() => setActiveTeam(team)}
+								className="gap-2 p-2"
+							>
+								<div className="flex size-6 items-center justify-center rounded-sm border">
+									<team.logo className="size-4 shrink-0" />
+								</div>
+								{team.name}
+								<DropdownMenuShortcut>
+									⌘{index + 1}
+								</DropdownMenuShortcut>
+							</DropdownMenuItem>
+						))}
+						{/*<DropdownMenuSeparator />*/}
+						{/*<DropdownMenuItem className="gap-2 p-2">
+							<div className="flex size-6 items-center justify-center rounded-md border bg-background">
+								<Plus className="size-4" />
+							</div>
+							<div className="font-medium text-muted-foreground">
+								Add team
+							</div>
+						</DropdownMenuItem> */}
+					</DropdownMenuContent>
+				</DropdownMenu>
+			</SidebarMenuItem>
+		</SidebarMenu>
+	);
+}