Feature/84 admin form tab by Berny-ft · Pull Request #92 · hack4impact/mcld-project

Berny-ft · 2026-06-03T19:55:36Z

Closes #84

Overview

Adds an admin Forms tab so admins can create and manage reusable form templates (name + ordered questions) for kid services.

Done in this PR:

DB schema: forms table, extra_questions linked by form_id, services.form_id FK
Admin CRUD at /forms (list, create, edit, delete)
Question types: text, multiple choice, checkboxes, user agreement
Drag-and-drop question reordering; nested dialog for editing questions
Delete blocked when a form is attached to a service
Create/update wrapped in DB transactions
Sidebar nav link; table layout matches Users/Services pattern

Testing

manual testing

Screenshots / Screencasts

{Screenshots or screen recording of your changes if this issue involves any frontend components or affects any frontend functionality.}

Checklist

Code is neat, readable, and works
Code is commented where appropriate and well-documented
Commit messages follow our guidelines
Issue number is linked
Branch is linked
Reviewers are assigned (one of your tech leads)

Tip: You can make the issue and then check them after the fact or replace [ ] with [x] to check it!

Notes

{Any issues/suggestions relating to the ticket, repo, assignments, TL duties; please mention here!}

Introduce forms management for admins: list, create, edit, and delete reusable question templates attachable to kid services. Adds forms schema (forms table, form-owned extra_questions, services.form_id), server actions, and UI with drag-to-reorder questions and per-question edit modals. Blocks deleting forms still attached to services.

Refactor the listForms function to enhance performance by using SQL joins for counting related extra questions and services. This change reduces the number of database calls and simplifies the data retrieval process, while also improving code readability.

…ion handling Refactor the insertQuestions function to accept a database client parameter, allowing for transaction management during form creation and updates. Implement transaction handling in createForm and updateForm functions to ensure atomic operations, enhancing error handling and maintaining data integrity.

Add functionality to handle pending new questions in the FormDialog component. Introduce state management for pending questions, allowing users to add, edit, and delete questions more intuitively. Update the question dialog handling to accommodate new question creation and improve overall user experience.

…nent Add a new FormsLayout component to manage the layout of forms, ensuring proper pagination and responsiveness. Update the FormsTable and FormsDataTable components to improve their structure and styling, allowing for better handling of form data and actions. Adjust the main page layout for improved user experience.

Update the FormDialog component to ensure proper handling of the edit state by introducing a new variable, editOpen. This change refines the useEffect dependency array and improves the logic for determining when to execute the effect, enhancing the component's responsiveness to prop changes.

Copilot

Pull request overview

Adds an admin-only “Forms” section to the authenticated app, introducing a new forms data model and UI to create/edit/delete reusable forms composed of extra questions, with service attachment counts surfaced in the admin table.

Changes:

Introduces a new forms table and links services + extra_questions to forms (with ordering via sort_order).
Adds /forms admin route with server actions/queries to list, create, update, and delete forms.
Adds client UI for managing forms and questions (dialogs, table, drag-and-drop reordering) and a new sidebar nav item.

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
lib/db/schema.ts	Adds `forms` table + new FKs (`services.form_id`, `extra_questions.form_id`) and question ordering.
components/app-sidebar.tsx	Adds a new “FORMS” nav item in the admin sidebar.
app/(authenticated)/forms/schema.ts	Adds Zod validation schemas for create/update/delete form flows.
app/(authenticated)/forms/queries.ts	Adds cached queries to list forms and fetch a single form with questions + usage count.
app/(authenticated)/forms/page.tsx	Adds the admin-only forms page (Suspense + table view).
app/(authenticated)/forms/layout.tsx	Adds bounded-height layout to support table scrolling/pagination.
app/(authenticated)/forms/actions.ts	Adds server actions for create/update/delete and cache busting.
app/(authenticated)/forms/_components/question-edit-dialog.tsx	UI dialog for editing a single question and its options.
app/(authenticated)/forms/_components/forms-table.tsx	Wrapper composing table + add/edit dialogs.
app/(authenticated)/forms/_components/forms-data-table.tsx	Data table columns for forms list, including actions column.
app/(authenticated)/forms/_components/form-questions-list.tsx	UI list with drag-and-drop reordering and edit/remove controls.
app/(authenticated)/forms/_components/form-question-shared.ts	Shared question helpers/types (labels, reorder, submit shaping).
app/(authenticated)/forms/_components/form-dialog.tsx	Create/edit form dialog, including question management flow.
app/(authenticated)/forms/_components/form-actions-cell.tsx	Row actions (edit/delete) with confirmation dialog + toasts.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

   CreditCard,
   MonitorSmartphone,
   Settings,
+   Form,


+   { title: "FORMS" , href: "/forms", icon: Form}
 ];


+   formId: uuid("form_id")
+      .references(() => forms.id, { onDelete: "set null" }),


+   name: text("name").notNull(),
+   createdAt: timestamp("created_at").defaultNow().notNull(),
+   updatedAt: timestamp("updated_at").defaultNow().notNull(),
+})


+   const attachedCount = serviceRow?.count ?? 0;
+   if (attachedCount > 0) {


+         await tx
+            .delete(extraQuestions)
+            .where(eq(extraQuestions.formId, form_id));
+         await insertQuestions(form_id, questions, tx);


+      attachedServiceCount: serviceRow?.count ?? 0,
+      createdAt: form.createdAt,


martin0024

really good job!

martin0024 · 2026-06-04T13:46:46Z

+      return () => {
+         cancelled = true;
+      };
+   }, [isEdit, form?.id, isEdit ? props.open : false]);


bad practice.

const open = isEdit ? props.open : false const onOpenChange = isEdit ? props.onOpenChange : undefined;

Suggested change

}, [isEdit, form?.id, isEdit ? props.open : false]);

}, [isEdit, form?.id, open]);

martin0024 · 2026-06-04T13:54:42Z

currently drag and drop using html 5 is mouse-only.
I recommend using dnd-kit for a correct full implementation.
btw: when using <button />please use <Button /> instead

RenaudBernier

Thanks for running me through your works. It respects our reqs so I'm approving. Address Mattia's review and you're gtg

Add @dnd-kit for sortable question reordering, use shadcn Button in the question list, and fix Add form trigger hover clipping in the toolbar.

Berny-ft added 6 commits June 3, 2026 12:43

Copilot AI review requested due to automatic review settings June 3, 2026 19:55

Copilot started reviewing on behalf of Berny-ft June 3, 2026 19:55 View session

Copilot AI reviewed Jun 3, 2026

View reviewed changes

Berny-ft requested review from RenaudBernier and martin0024 June 4, 2026 03:00

martin0024 requested changes Jun 4, 2026

View reviewed changes

RenaudBernier reviewed Jun 4, 2026

View reviewed changes

RenaudBernier approved these changes Jun 4, 2026

View reviewed changes

fix(forms): replace HTML5 reorder with dnd-kit and polish list UI

d52c71b

Add @dnd-kit for sortable question reordering, use shadcn Button in the question list, and fix Add form trigger hover clipping in the toolbar.

Berny-ft requested a review from martin0024 June 4, 2026 17:59

Berny-ft merged commit 2dde404 into develop Jun 5, 2026
1 check passed

Berny-ft deleted the feature/84-admin-form-tab branch June 13, 2026 18:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Feature/84 admin form tab#92

Feature/84 admin form tab#92
Berny-ft merged 7 commits into
developfrom
feature/84-admin-form-tab

Berny-ft commented Jun 3, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

martin0024 left a comment

Uh oh!

martin0024 Jun 4, 2026

Uh oh!

martin0024 Jun 4, 2026

Uh oh!

RenaudBernier left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

		formId: uuid("form_id")
		.references(() => forms.id, { onDelete: "set null" }),

		const attachedCount = serviceRow?.count ?? 0;
		if (attachedCount > 0) {

		attachedServiceCount: serviceRow?.count ?? 0,
		createdAt: form.createdAt,

	}, [isEdit, form?.id, isEdit ? props.open : false]);
	}, [isEdit, form?.id, open]);

Uh oh!

Conversation

Berny-ft commented Jun 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

Testing

Screenshots / Screencasts

Checklist

Notes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

martin0024 left a comment

Choose a reason for hiding this comment

Uh oh!

martin0024 Jun 4, 2026

Choose a reason for hiding this comment

Uh oh!

martin0024 Jun 4, 2026

Choose a reason for hiding this comment

Uh oh!

RenaudBernier left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Berny-ft commented Jun 3, 2026 •

edited

Loading