feat(portal): add form visibility toggles and improve form layout

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: carhartlewis

apps/app/src/actions/organization/update-organization-access-request-form-action.ts

@@ -0,0 +1,46 @@
+'use server';
+
+import { db } from '@db';
+import { revalidatePath, revalidateTag } from 'next/cache';
+import { headers } from 'next/headers';
+import { authActionClient } from '../safe-action';
+import { organizationAccessRequestFormSchema } from '../schema';
+
+export const updateOrganizationAccessRequestFormAction = authActionClient
+  .inputSchema(organizationAccessRequestFormSchema)
+  .metadata({
+    name: 'update-organization-access-request-form',
+    track: {
+      event: 'update-organization-access-request-form',
+      channel: 'server',
+    },
+  })
+  .action(async ({ parsedInput, ctx }) => {
+    const { accessRequestFormEnabled } = parsedInput;
+    const { activeOrganizationId } = ctx.session;
+
+    if (!activeOrganizationId) {
+      throw new Error('No active organization');
+    }
+
+    try {
+      await db.organization.update({
+        where: { id: activeOrganizationId },
+        data: { accessRequestFormEnabled },
+      });
+
+      const headersList = await headers();
+      let path = headersList.get('x-pathname') || headersList.get('referer') || '';
+      path = path.replace(/\/[a-z]{2}\//, '/');
+
+      revalidatePath(path);
+      revalidateTag(`organization_${activeOrganizationId}`, 'max');
+
+      return {
+        success: true,
+      };
+    } catch (error) {
+      console.error(error);
+      throw new Error('Failed to update access request form setting');
+    }
+  });

apps/app/src/actions/organization/update-organization-whistleblower-report-action.ts

@@ -0,0 +1,46 @@
+'use server';
+
+import { db } from '@db';
+import { revalidatePath, revalidateTag } from 'next/cache';
+import { headers } from 'next/headers';
+import { authActionClient } from '../safe-action';
+import { organizationWhistleblowerReportSchema } from '../schema';
+
+export const updateOrganizationWhistleblowerReportAction = authActionClient
+  .inputSchema(organizationWhistleblowerReportSchema)
+  .metadata({
+    name: 'update-organization-whistleblower-report',
+    track: {
+      event: 'update-organization-whistleblower-report',
+      channel: 'server',
+    },
+  })
+  .action(async ({ parsedInput, ctx }) => {
+    const { whistleblowerReportEnabled } = parsedInput;
+    const { activeOrganizationId } = ctx.session;
+
+    if (!activeOrganizationId) {
+      throw new Error('No active organization');
+    }
+
+    try {
+      await db.organization.update({
+        where: { id: activeOrganizationId },
+        data: { whistleblowerReportEnabled },
+      });
+
+      const headersList = await headers();
+      let path = headersList.get('x-pathname') || headersList.get('referer') || '';
+      path = path.replace(/\/[a-z]{2}\//, '/');
+
+      revalidatePath(path);
+      revalidateTag(`organization_${activeOrganizationId}`, 'max');
+
+      return {
+        success: true,
+      };
+    } catch (error) {
+      console.error(error);
+      throw new Error('Failed to update whistleblower report setting');
+    }
+  });

apps/app/src/actions/schema.ts

@@ -77,6 +77,14 @@ export const organizationSecurityTrainingStepSchema = z.object({
   securityTrainingStepEnabled: z.boolean(),
 });
 
+export const organizationWhistleblowerReportSchema = z.object({
+  whistleblowerReportEnabled: z.boolean(),
+});
+
+export const organizationAccessRequestFormSchema = z.object({
+  accessRequestFormEnabled: z.boolean(),
+});
+
 // Risks
 export const createRiskSchema = z.object({
   title: z

apps/app/src/app/(app)/[orgId]/settings/portal/page.tsx

@@ -14,13 +14,17 @@ export default async function PortalSettingsPage({
     select: {
       deviceAgentStepEnabled: true,
       securityTrainingStepEnabled: true,
+      whistleblowerReportEnabled: true,
+      accessRequestFormEnabled: true,
     },
   });
 
   return (
     <PortalSettings
       deviceAgentStepEnabled={organization?.deviceAgentStepEnabled ?? true}
       securityTrainingStepEnabled={organization?.securityTrainingStepEnabled ?? true}
+      whistleblowerReportEnabled={organization?.whistleblowerReportEnabled ?? true}
+      accessRequestFormEnabled={organization?.accessRequestFormEnabled ?? true}
     />
   );
 }

apps/app/src/app/(app)/[orgId]/settings/portal/portal-settings.tsx

@@ -2,18 +2,24 @@
 
 import { updateOrganizationDeviceAgentStepAction } from '@/actions/organization/update-organization-device-agent-step-action';
 import { updateOrganizationSecurityTrainingStepAction } from '@/actions/organization/update-organization-security-training-step-action';
+import { updateOrganizationWhistleblowerReportAction } from '@/actions/organization/update-organization-whistleblower-report-action';
+import { updateOrganizationAccessRequestFormAction } from '@/actions/organization/update-organization-access-request-form-action';
 import { SettingGroup, SettingRow, Switch } from '@trycompai/design-system';
 import { useAction } from 'next-safe-action/hooks';
 import { toast } from 'sonner';
 
 interface PortalSettingsProps {
   deviceAgentStepEnabled: boolean;
   securityTrainingStepEnabled: boolean;
+  whistleblowerReportEnabled: boolean;
+  accessRequestFormEnabled: boolean;
 }
 
 export function PortalSettings({
   deviceAgentStepEnabled,
   securityTrainingStepEnabled,
+  whistleblowerReportEnabled,
+  accessRequestFormEnabled,
 }: PortalSettingsProps) {
   const updateDeviceAgentStep = useAction(updateOrganizationDeviceAgentStepAction, {
     onSuccess: () => toast.success('Device agent step setting updated'),
@@ -25,6 +31,16 @@ export function PortalSettings({
     onError: () => toast.error('Error updating security training step setting'),
   });
 
+  const updateWhistleblowerReport = useAction(updateOrganizationWhistleblowerReportAction, {
+    onSuccess: () => toast.success('Whistleblower report visibility updated'),
+    onError: () => toast.error('Error updating whistleblower report visibility'),
+  });
+
+  const updateAccessRequestForm = useAction(updateOrganizationAccessRequestFormAction, {
+    onSuccess: () => toast.success('Access request visibility updated'),
+    onError: () => toast.error('Error updating access request visibility'),
+  });
+
   return (
     <SettingGroup>
       <SettingRow
@@ -53,6 +69,32 @@ export function PortalSettings({
           disabled={updateSecurityTrainingStep.status === 'executing'}
         />
       </SettingRow>
+      <SettingRow
+        size="lg"
+        label="Show Whistleblower Report Form"
+        description="Employees can submit whistleblower reports from the employee portal."
+      >
+        <Switch
+          checked={whistleblowerReportEnabled}
+          onCheckedChange={(checked) => {
+            updateWhistleblowerReport.execute({ whistleblowerReportEnabled: checked });
+          }}
+          disabled={updateWhistleblowerReport.status === 'executing'}
+        />
+      </SettingRow>
+      <SettingRow
+        size="lg"
+        label="Show Access Request Form"
+        description="Employees can submit access requests from the employee portal."
+      >
+        <Switch
+          checked={accessRequestFormEnabled}
+          onCheckedChange={(checked) => {
+            updateAccessRequestForm.execute({ accessRequestFormEnabled: checked });
+          }}
+          disabled={updateAccessRequestForm.status === 'executing'}
+        />
+      </SettingRow>
     </SettingGroup>
   );
 }

apps/portal/src/app/(app)/(home)/[orgId]/components/EmployeeTasksList.tsx

@@ -29,6 +29,8 @@ interface EmployeeTasksListProps {
   host: Host | null;
   deviceAgentStepEnabled: boolean;
   securityTrainingStepEnabled: boolean;
+  whistleblowerReportEnabled: boolean;
+  accessRequestFormEnabled: boolean;
 }
 
 export const EmployeeTasksList = ({
@@ -40,6 +42,8 @@ export const EmployeeTasksList = ({
   host,
   deviceAgentStepEnabled,
   securityTrainingStepEnabled,
+  whistleblowerReportEnabled,
+  accessRequestFormEnabled,
 }: EmployeeTasksListProps) => {
   const {
     data: response,
@@ -126,6 +130,11 @@ export const EmployeeTasksList = ({
         ]
       : []),
   ];
+  const visiblePortalForms = portalForms.filter((form) => {
+    if (form.type === 'whistleblower-report') return whistleblowerReportEnabled;
+    if (form.type === 'access-request') return accessRequestFormEnabled;
+    return true;
+  });
 
   const allCompleted = completedCount === accordionItems.length;
 
@@ -167,12 +176,12 @@ export const EmployeeTasksList = ({
       </Accordion>
 
       {/* Company forms */}
-      {portalForms.length > 0 && (
+      {visiblePortalForms.length > 0 && (
         <div className="space-y-2">
           <div className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
             Company Forms
           </div>
-          {portalForms.map((form) => (
+          {visiblePortalForms.map((form) => (
             <div
               key={form.type}
               className="flex items-center justify-between rounded-md border border-border p-3"

apps/portal/src/app/(app)/(home)/[orgId]/components/OrganizationDashboard.tsx

@@ -87,6 +87,8 @@ export async function OrganizationDashboard({
       host={host}
       deviceAgentStepEnabled={org.deviceAgentStepEnabled}
       securityTrainingStepEnabled={org.securityTrainingStepEnabled}
+      whistleblowerReportEnabled={org.whistleblowerReportEnabled}
+      accessRequestFormEnabled={org.accessRequestFormEnabled}
     />
   );
 }

apps/portal/src/app/(app)/(home)/[orgId]/documents/[formType]/PortalFormClient.tsx

@@ -19,6 +19,7 @@ import {
 } from '@trycompai/design-system';
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
+import { useState } from 'react';
 
 type FieldDef = {
   key: string;
@@ -49,6 +50,7 @@ export function PortalFormClient({
   errorMessage,
 }: PortalFormClientProps) {
   const params = useParams<{ orgId: string }>();
+  const [selectedFiles, setSelectedFiles] = useState<Record<string, string>>({});
 
   const isCompact = (f: FieldDef) => f.type === 'text' || f.type === 'date' || f.type === 'select';
 
@@ -149,6 +151,12 @@ export function PortalFormClient({
                       <Textarea
                         id={field.key}
                         name={field.key}
+                        style={{
+                          width: '100%',
+                          maxWidth: 'none',
+                          maxHeight: '350px',
+                          minHeight: '350px',
+                        }}
                         required={field.required}
                         placeholder={field.placeholder}
                         rows={12}
@@ -161,15 +169,36 @@ export function PortalFormClient({
 
                   {field.type === 'file' && (
                     <div className="space-y-2">
-                      <div className="rounded-md border border-border p-4">
-                        <Input
-                          id={field.key}
-                          name={field.key}
-                          type="file"
-                          required={field.required}
-                          accept={field.accept}
-                        />
-                      </div>
+                      <label htmlFor={field.key} className="block cursor-pointer">
+                        <div className="rounded-md border-2 border-dashed border-border bg-muted/20 p-6 text-center transition hover:bg-muted/40">
+                          <p className="text-sm font-medium text-foreground">
+                            Drop file here or click to upload
+                          </p>
+                          <p className="mt-1 text-xs text-muted-foreground">
+                            Maximum file size: 100 MB
+                          </p>
+                        </div>
+                      </label>
+                      <input
+                        id={field.key}
+                        name={field.key}
+                        type="file"
+                        required={field.required}
+                        accept={field.accept}
+                        className="sr-only"
+                        onChange={(event) => {
+                          const selectedFile = event.target.files?.[0];
+                          setSelectedFiles((current) => ({
+                            ...current,
+                            [field.key]: selectedFile?.name ?? '',
+                          }));
+                        }}
+                      />
+                      {selectedFiles[field.key] && (
+                        <Text size="sm" variant="muted">
+                          Selected: {selectedFiles[field.key]}
+                        </Text>
+                      )}
                       <Text size="sm" variant="muted">
                         Accepted: {field.accept ?? 'all file types'}
                       </Text>

apps/portal/src/app/(app)/(home)/[orgId]/documents/[formType]/page.tsx

@@ -1,5 +1,6 @@
 import { auth } from '@/app/lib/auth';
 import { env } from '@/env.mjs';
+import { db } from '@db';
 import { Breadcrumb, PageLayout } from '@trycompai/design-system';
 import { isRedirectError } from 'next/dist/client/components/redirect-error';
 import { headers as getHeaders } from 'next/headers';
@@ -50,6 +51,23 @@ export default async function PortalCompanyFormPage({
   if (!form.portalAccessible) {
     notFound();
   }
+
+  const organization = await db.organization.findUnique({
+    where: { id: orgId },
+    select: {
+      whistleblowerReportEnabled: true,
+      accessRequestFormEnabled: true,
+    },
+  });
+  if (!organization) {
+    notFound();
+  }
+  if (formTypeValue === 'whistleblower-report' && !organization.whistleblowerReportEnabled) {
+    notFound();
+  }
+  if (formTypeValue === 'access-request' && !organization.accessRequestFormEnabled) {
+    notFound();
+  }
   const visibleFields = form.fields;
   const basePath = `/${orgId}/documents/${formTypeValue}`;
   const state = await searchParams;

apps/portal/src/app/(app)/(home)/[orgId]/documents/[formType]/submissions/page.tsx

@@ -1,5 +1,6 @@
 import { auth } from '@/app/lib/auth';
 import { env } from '@/env.mjs';
+import { db } from '@db';
 import { Breadcrumb, PageLayout } from '@trycompai/design-system';
 import { headers as getHeaders } from 'next/headers';
 import Link from 'next/link';
@@ -60,6 +61,23 @@ export default async function PortalSubmissionsPage({
     notFound();
   }
 
+  const organization = await db.organization.findUnique({
+    where: { id: orgId },
+    select: {
+      whistleblowerReportEnabled: true,
+      accessRequestFormEnabled: true,
+    },
+  });
+  if (!organization) {
+    notFound();
+  }
+  if (formTypeValue === 'whistleblower-report' && !organization.whistleblowerReportEnabled) {
+    notFound();
+  }
+  if (formTypeValue === 'access-request' && !organization.accessRequestFormEnabled) {
+    notFound();
+  }
+
   const reqHeaders = await getHeaders();
   const session = await auth.api.getSession({ headers: reqHeaders });