feat: WIP for employee portal, styling of dashboard

apps/app/src/actions/people/create-employee-action.ts

@@ -1,9 +1,9 @@
 "use server";
 
 import { db } from "@bubba/db";
+import { PrismaClientKnownRequestError } from "@prisma/client/runtime/library";
 import { authActionClient } from "../safe-action";
 import { createEmployeeSchema } from "../schema";
-import { PrismaClientKnownRequestError } from "@prisma/client/runtime/library";
 import type { ActionResponse } from "../types";
 
 const DEFAULT_TASKS = [
@@ -58,6 +58,23 @@ export const createEmployeeAction = authActionClient
         },
       });
 
+      const portalUser = await db.portalUser.create({
+        data: {
+          id: employee.id,
+          name,
+          email,
+          organizationId: user.organizationId,
+          emailVerified: false,
+          createdAt: new Date(),
+          updatedAt: new Date(),
+          employees: {
+            connect: {
+              id: employee.id,
+            },
+          },
+        },
+      });
+
       // Create or get the required task definitions first and store their IDs
       const requiredTasks = await Promise.all(
         DEFAULT_TASKS.map(async (task) => {

apps/app/src/components/magic-link.tsx

@@ -110,7 +110,7 @@ export function MagicLinkSignIn({ className }: Props) {
 
           <Button
             type="submit"
-            className="flex h-[40px] w-full space-x-2 bg-primary px-6 py-4 font-medium text-secondary active:scale-[0.98]"
+            className="flex h-[40px] w-full space-x-2 px-6 py-4 font-medium active:scale-[0.98]"
           >
             {isLoading ? (
               <Loader2 className="h-4 w-4 animate-spin" />

apps/portal/src/app/[locale]/(app)/(home)/layout.tsx

@@ -0,0 +1,18 @@
+import { getI18n } from "@/app/locales/server";
+import { SecondaryMenu } from "@bubba/ui/secondary-menu";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const t = await getI18n();
+
+  return (
+    <div className="max-w-[1200px]">
+      <SecondaryMenu items={[{ path: "/", label: t("sidebar.dashboard") }]} />
+
+      <main className="mt-8">{children}</main>
+    </div>
+  );
+}

apps/portal/src/app/[locale]/(app)/(home)/page.tsx

@@ -0,0 +1,32 @@
+import { getI18n } from "@/app/locales/server";
+import type { Metadata } from "next";
+import { setStaticParamsLocale } from "next-international/server";
+
+export default async function Portal({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  setStaticParamsLocale(locale);
+
+  return (
+    <div>
+      <h1>Employee Portal</h1>
+    </div>
+  );
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}): Promise<Metadata> {
+  const { locale } = await params;
+  setStaticParamsLocale(locale);
+  const t = await getI18n();
+
+  return {
+    title: t("sidebar.dashboard"),
+  };
+}

apps/portal/src/app/[locale]/(app)/layout.tsx

@@ -0,0 +1,19 @@
+import { Header } from "@/app/components/header";
+import { Sidebar } from "@/app/components/sidebar";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="relative">
+      <Sidebar />
+
+      <div className="mx-4 md:ml-[95px] md:mr-10 pb-8">
+        <Header />
+        <main>{children}</main>
+      </div>
+    </div>
+  );
+}

apps/portal/src/app/[locale]/(app)/unauthorized/page.tsx

@@ -0,0 +1,17 @@
+import { auth } from "@/app/lib/auth";
+import { headers } from "next/headers";
+
+export default async function Unauthorized() {
+  const session = await auth.api.getSession({
+    headers: await headers(),
+  });
+
+  return (
+    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
+        We couldn't find an organization for you. Please contact your
+        administrator.
+      </main>
+    </div>
+  );
+}

apps/portal/src/app/[locale]/(public)/auth/page.tsx

@@ -1,5 +1,7 @@
 import { OtpSignIn } from "@/app/components/otp";
 import { getI18n } from "@/app/locales/server";
+import { Button } from "@bubba/ui/button";
+import { ArrowRight } from "lucide-react";
 import type { Metadata } from "next";
 import Link from "next/link";
 
@@ -35,10 +37,29 @@ export default async function Page() {
               </div>
             </div>
 
-            <div className="pointer-events-auto mb-6 flex flex-col">
+            <div className="pointer-events-auto flex flex-col">
               {defaultSignInOptions}
             </div>
           </div>
+
+          <div className="mt-8 rounded-md bg-gradient-to-r from-primary/10 via-primary/5 to-primary/5 p-4">
+            <h3 className="text-sm font-medium">{t("powered_by.title")}</h3>
+            <p className="mt-1 text-xs text-muted-foreground">
+              {t("powered_by.description")}
+            </p>
+            <Button variant="link" className="p-0 mt-2" asChild>
+              <Link
+                href="https://trycomp.ai"
+                target="_blank"
+                className="hover:underline hover:underline-offset-2"
+              >
+                <span className="mt-2 inline-flex items-center text-xs font-medium text-primary gap-2">
+                  {t("powered_by.learn_more")}
+                  <ArrowRight className="h-3 w-3" />
+                </span>
+              </Link>
+            </Button>
+          </div>
         </div>
       </div>
     </>

apps/portal/src/app/actions/logout.ts

@@ -0,0 +1,11 @@
+"use server";
+
+import { createSafeActionClient } from "next-safe-action";
+import { headers } from "next/headers";
+import { auth } from "../lib/auth";
+
+export const logout = createSafeActionClient().action(async () => {
+  await auth.api.signOut({
+    headers: await headers(),
+  });
+});

apps/portal/src/app/components/header.tsx

@@ -0,0 +1,31 @@
+import { UserMenu } from "@/app/components/user-menu";
+import { getI18n } from "@/app/locales/server";
+import { Skeleton } from "@bubba/ui/skeleton";
+import { headers } from "next/headers";
+import { Suspense } from "react";
+import { auth } from "../lib/auth";
+import { MobileMenu } from "./mobile-menu";
+
+export async function Header() {
+  const session = await auth.api.getSession({
+    headers: await headers(),
+  });
+
+  const t = await getI18n();
+
+  return (
+    <header className="-ml-4 -mr-4 md:m-0 z-10 px-4 md:px-0 md:border-b-[1px] flex justify-between pt-4 pb-2 md:pb-4 items-center todesktop:sticky todesktop:top-0 todesktop:bg-background todesktop:border-none sticky md:static top-0 backdrop-filter backdrop-blur-xl md:backdrop-filter md:backdrop-blur-none bg-opacity-70">
+      <MobileMenu />
+
+      <div className="flex space-x-2 ml-auto">
+        <div className="flex gap-2">Employee Portal</div>
+      </div>
+
+      <div className="flex space-x-2 ml-auto">
+        <Suspense fallback={<Skeleton className="h-8 w-8 rounded-full" />}>
+          <UserMenu session={session} />
+        </Suspense>
+      </div>
+    </header>
+  );
+}

apps/portal/src/app/components/logout.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useI18n } from "@/app/locales/client";
+import { DropdownMenuItem } from "@bubba/ui/dropdown-menu";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { authClient } from "../lib/auth-client";
+
+export function Logout() {
+  const t = useI18n();
+  const [isLoading, setLoading] = useState(false);
+  const router = useRouter();
+
+  const handleLogout = async () => {
+    setLoading(true);
+    await authClient.signOut({
+      fetchOptions: {
+        onSuccess: () => {
+          router.push("/login"); // redirect to login page
+        },
+      },
+    });
+    setLoading(false);
+  };
+
+  return (
+    <DropdownMenuItem onClick={handleLogout}>
+      {isLoading ? "Loading..." : t("user_menu.sign_out")}
+    </DropdownMenuItem>
+  );
+}