fix: update forms pages to use proper page layout

- Remove EntityView wrapper, use standard space-y-6 pattern
- Full page width instead of container max-w
- Consistent with experiments/participants pages
This commit is contained in:
2026-03-22 18:09:01 -04:00
parent 0827a791c6
commit bfd1924897
3 changed files with 20 additions and 46 deletions

View File

@@ -180,7 +180,7 @@ export default function FormViewPage({ params }: FormViewPageProps) {
};
return (
<div className="container mx-auto max-w-4xl space-y-6 py-6">
<div className="space-y-6">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<Button variant="ghost" size="sm" asChild>

View File

@@ -154,7 +154,7 @@ export default function NewFormPage() {
};
return (
<div className="container mx-auto max-w-4xl space-y-6 py-6">
<div className="space-y-6">
<div className="flex items-center gap-4">
<Button variant="ghost" size="sm" asChild>
<Link href={`/studies/${studyId}/forms`}>

View File

@@ -16,16 +16,8 @@ import {
Pencil,
Trash2,
Eye,
Copy,
CheckCircle,
XCircle,
Clock,
} from "lucide-react";
import {
EntityView,
EntityViewSection,
EmptyState,
} from "~/components/ui/entity-view";
import { useBreadcrumbsEffect } from "~/components/ui/breadcrumb-provider";
import { Button } from "~/components/ui/button";
import { Badge } from "~/components/ui/badge";
@@ -53,24 +45,6 @@ const formTypeColors = {
questionnaire: "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400",
};
const statusConfig = {
active: {
label: "Active",
variant: "default" as const,
icon: CheckCircle,
},
draft: {
label: "Draft",
variant: "secondary" as const,
icon: Clock,
},
deprecated: {
label: "Deprecated",
variant: "destructive" as const,
icon: XCircle,
},
};
interface StudyFormsPageProps {
params: Promise<{
id: string;
@@ -141,7 +115,7 @@ export default function StudyFormsPage({ params }: StudyFormsPageProps) {
const forms = formsData?.forms ?? [];
return (
<EntityView>
<div className="space-y-6">
<PageHeader
title="Forms"
description="Manage consent forms, surveys, and questionnaires for this study"
@@ -159,23 +133,23 @@ export default function StudyFormsPage({ params }: StudyFormsPageProps) {
/>
{forms.length === 0 && !isLoading ? (
<EmptyState
icon="FileText"
title="No Forms Yet"
description="Create consent forms, surveys, or questionnaires to collect data from participants"
action={
canManage ? (
<div className="flex flex-col items-center justify-center py-12 text-center">
<FileText className="h-12 w-12 text-muted-foreground mb-4" />
<h3 className="text-lg font-semibold mb-2">No Forms Yet</h3>
<p className="text-muted-foreground mb-4">
Create consent forms, surveys, or questionnaires to collect data from participants
</p>
{canManage && (
<Button asChild>
<Link href={`/studies/${resolvedParams?.id}/forms/new`}>
<Plus className="mr-2 h-4 w-4" />
Create Your First Form
</Link>
</Button>
) : null
}
/>
)}
</div>
) : (
<div className="space-y-6">
<div className="space-y-4">
<div className="flex items-center gap-4">
<div className="relative flex-1 max-w-sm">
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
@@ -277,6 +251,6 @@ export default function StudyFormsPage({ params }: StudyFormsPageProps) {
</div>
</div>
)}
</EntityView>
</div>
);
}