diff --git a/apps/web/src/app/(marketing)/onboarding/company-onboarding-form.tsx b/apps/web/src/app/(marketing)/onboarding/company-onboarding-form.tsx
new file mode 100644
index 0000000..0bfac09
--- /dev/null
+++ b/apps/web/src/app/(marketing)/onboarding/company-onboarding-form.tsx
@@ -0,0 +1,150 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { type FormEvent, useEffect, useState } from 'react';
+
+import { Button } from '../../../components/ui/button';
+import { authClient } from '../../../lib/auth-client';
+import { createCompanySlug } from '../../../lib/company-slug';
+
+type CompanyOnboardingFormProperties = Readonly<{
+ email: string;
+ userName: string;
+}>;
+
+export function CompanyOnboardingForm({
+ email,
+ userName,
+}: CompanyOnboardingFormProperties) {
+ const router = useRouter();
+ const [companyName, setCompanyName] = useState('');
+ const [error, setError] = useState
();
+ const [isChecking, setIsChecking] = useState(true);
+ const [isPending, setIsPending] = useState(false);
+
+ useEffect(() => {
+ let isCurrent = true;
+
+ async function selectExistingCompany() {
+ const organizations = await authClient.organization.list();
+
+ if (!isCurrent) {
+ return;
+ }
+
+ const firstOrganization = organizations.data?.[0];
+
+ if (firstOrganization !== undefined) {
+ await authClient.organization.setActive({
+ organizationId: firstOrganization.id,
+ });
+ router.replace('/invoices');
+ router.refresh();
+ return;
+ }
+
+ if (organizations.error !== null) {
+ setError(
+ organizations.error.message ??
+ 'Your company workspaces could not be loaded.',
+ );
+ }
+
+ setIsChecking(false);
+ }
+
+ void selectExistingCompany();
+
+ return () => {
+ isCurrent = false;
+ };
+ }, [router]);
+
+ async function createCompany(event: FormEvent) {
+ event.preventDefault();
+ const name = companyName.trim();
+
+ if (name.length < 2) {
+ setError('Enter the legal or trading name of your company.');
+ return;
+ }
+
+ setError(undefined);
+ setIsPending(true);
+
+ const created = await authClient.organization.create({
+ name,
+ slug: createCompanySlug(name, crypto.randomUUID()),
+ });
+
+ if (created.error !== null || created.data === null) {
+ setError(
+ created.error?.message ??
+ 'Your company workspace could not be created.',
+ );
+ setIsPending(false);
+ return;
+ }
+
+ const activated = await authClient.organization.setActive({
+ organizationId: created.data.id,
+ });
+
+ if (activated.error !== null) {
+ setError(
+ activated.error.message ??
+ 'The company was created but could not be selected.',
+ );
+ setIsPending(false);
+ return;
+ }
+
+ router.replace('/invoices');
+ router.refresh();
+ }
+
+ if (isChecking) {
+ return (
+
+ Checking your company workspace…
+
+ );
+ }
+
+ return (
+
+ );
+}
diff --git a/apps/web/src/app/(marketing)/onboarding/page.tsx b/apps/web/src/app/(marketing)/onboarding/page.tsx
new file mode 100644
index 0000000..37fc3fa
--- /dev/null
+++ b/apps/web/src/app/(marketing)/onboarding/page.tsx
@@ -0,0 +1,42 @@
+import { headers } from 'next/headers';
+import { redirect } from 'next/navigation';
+
+import {
+ Card,
+ CardContent,
+ CardHeader,
+ CardTitle,
+} from '../../../components/ui/card';
+import { getAuth } from '../../../lib/auth.server';
+import { CompanyOnboardingForm } from './company-onboarding-form';
+
+export const dynamic = 'force-dynamic';
+
+export default async function OnboardingPage() {
+ const session = await getAuth().api.getSession({ headers: await headers() });
+
+ if (session === null) {
+ redirect('/sign-in');
+ }
+
+ return (
+
+
+
+ One last step
+ Create your company workspace
+
+ This keeps invoices, suppliers, policies, and audit evidence scoped
+ to the correct company.
+
+
+
+
+
+
+
+
+ {error === undefined ? null : (
+
+ {error}
+
+ )}
+
+
+
+ Company workspace
+ Sign in to InvoiceGuard
+
+ Use your work Google account. Payment approval remains a separate,
+ explicit authority check.
+
+
+
+
+
+ Signing in identifies you to this application. It does not grant
+ permission to approve or settle supplier payments.
+
+
+
+
+
+
+ {initials(organizationName) || 'IG'}
+
+
+
+
+ {organizationName}
+
+
+ {session.data.user.email}
+
+
+
+
+ );
+}
+
export function Sidebar() {
const pathname = usePathname();
const [isExpanded, setIsExpanded] = useState(false);
@@ -102,26 +180,7 @@ export function Sidebar() {
})}
-
-
-
- PP
-
-
-
-
- Padel Peru, Lda
-
-
- synthetic scenario
-
-
-
+