web: added the base for the web project

apps/web/src/components/navbar/NavbarCreate.tsx

@@ -0,0 +1,36 @@
+import { LineChart } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useOrganizationParams } from "@/hooks/useOrganizationParams";
+import Link from "next/link";
+
+export function NavbarCreate() {
+  const params = useOrganizationParams();
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button size="sm">Create</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56" align="end">
+        <DropdownMenuLabel>Actions</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem asChild>
+            <Link href={`/${params.organization}/reports`}>
+              <LineChart className="mr-2 h-4 w-4" />
+              <span>Create a report</span>
+            </Link>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

apps/web/src/components/navbar/NavbarMenu.tsx

@@ -0,0 +1,13 @@
+import { useOrganizationParams } from "@/hooks/useOrganizationParams";
+import Link from "next/link";
+import { NavbarCreate } from "./NavbarCreate";
+
+export function NavbarMenu() {
+  const params = useOrganizationParams()
+  return (
+    <div className="flex gap-6 items-center">
+      <Link href={`/${params.organization}`}>Home</Link>
+      <NavbarCreate />
+    </div>
+  );
+}

apps/web/src/components/navbar/NavbarUserDropdown.tsx

@@ -0,0 +1,67 @@
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useOrganizationParams } from "@/hooks/useOrganizationParams";
+import { User } from "lucide-react";
+import { signOut } from "next-auth/react";
+import Link from "next/link";
+
+export function NavbarUserDropdown() {
+  const params = useOrganizationParams();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button>
+          <Avatar>
+            <AvatarFallback>CL</AvatarFallback>
+          </Avatar>
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[200px]">
+        <DropdownMenuGroup>
+          <DropdownMenuItem asChild className="cursor-pointer">
+            <Link href={`/${params.organization}/settings/organization`}>
+              <User className="mr-2 h-4 w-4" />
+              Organization
+            </Link>
+          </DropdownMenuItem>
+          <DropdownMenuItem asChild className="cursor-pointer">
+            <Link href={`/${params.organization}/settings/projects`}>
+              <User className="mr-2 h-4 w-4" />
+              Projects
+            </Link>
+          </DropdownMenuItem>
+          <DropdownMenuItem asChild className="cursor-pointer">
+            <Link href={`/${params.organization}/settings/clients`}>
+              <User className="mr-2 h-4 w-4" />
+              Clients
+            </Link>
+          </DropdownMenuItem>
+          <DropdownMenuItem asChild className="cursor-pointer">
+            <Link href={`/${params.organization}/settings/profile`}>
+              <User className="mr-2 h-4 w-4" />
+              Profile
+            </Link>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            className="text-red-600 cursor-pointer"
+            onClick={() => {
+              signOut().catch(console.error);
+            }}
+          >
+            <User className="mr-2 h-4 w-4" />
+            Logout
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}