Sort individual form responses view by time submitted, not by name

[DVidal1205]

/form/responses gets all responses from a form and displays them in alphabetical order. it should be chronological, starting with the first person.

[coderabbitai]

Coding Plan

Summary

• The fix requires two coordinated changes: backend query ordering and frontend user-group sorting
• Backend change switches from descending to ascending order on createdAt to show earliest submissions first
• Frontend change in PerUserResponsesView sorts user groups by their earliest submission timestamp instead of alphabetically by name
• No changes needed to ResponsesTable, AllResponsesView, or other display components as they render responses in the order received from the backend

Implementation Steps

Update Sorting to Chronological Order (Oldest First)

This phase addresses both the backend query sorting and the frontend user grouping sort to ensure responses appear in chronological order with the earliest submissions first.

Task 1: Update Backend API Query Sort Order

Change the database query to return responses in ascending chronological order so the first person to submit appears first.

• Modify packages/api/src/routers/forms.ts in the getResponses procedure (around line 499)
• Change .orderBy(desc(FormResponse.createdAt)) to .orderBy(asc(FormResponse.createdAt))
• Ensure asc is imported from drizzle-orm if not already present

Task 2: Update PerUserResponsesView Sorting Logic

Change the user grouping sort from alphabetical (by name) to chronological (by earliest submission time).

• Modify apps/blade/src/app/admin/forms/[slug]/responses/_components/PerUserResponsesView.tsx (lines 93-97)
• Replace the alphabetical name comparison with a comparison of submission timestamps
• Sort users by the submittedAt timestamp of their first response in the group, with earliest submissions appearing first
• Since responses within each user's group will already be sorted chronologically from the backend, use the first response's timestamp as the sort key

🤖 Prompt for AI agents

This phase updates both the backend and frontend sorting to display form
responses in chronological order with the earliest submissions first.

**Task 1: Backend Query Sort Order**
- In `packages/api/src/routers/forms.ts`, locate the `getResponses` procedure
(around line 499)
- Change the order clause from `.orderBy(desc(FormResponse.createdAt))` to
`.orderBy(asc(FormResponse.createdAt))`
- Verify that `asc` is imported from `drizzle-orm` (add the import if missing)

**Task 2: Frontend User Grouping Sort**
- In
`apps/blade/src/app/admin/forms/[slug]/responses/_components/PerUserResponsesView.tsx`,
locate the user sorting logic (lines 93-97)
- Replace the alphabetical name comparison with a timestamp-based comparison
- Sort users by the `submittedAt` timestamp of their first response in each
group
- Use ascending order so users with the earliest submissions appear first
- Since responses within each user's group are already sorted chronologically
from the backend, use the first response's timestamp as the sort key for the
user group

Research

The Knight Hacks monorepo uses a tRPC API layer (packages/api/) with Drizzle ORM for database queries, and a Next.js frontend (apps/blade/) for the admin dashboard. Form responses are fetched via the getResponses procedure in the forms router and displayed through several view components. The backend currently sorts by createdAt descending (newest first), while the PerUserResponsesView component additionally sorts users alphabetically by name—this alphabetical sorting is what the ticket identifies as the issue.

---

🚀 Next Steps

🤖 All AI agent prompts combined

This phase updates both the backend and frontend sorting to display form
responses in chronological order with the earliest submissions first.

**Task 1: Backend Query Sort Order**
- In `packages/api/src/routers/forms.ts`, locate the `getResponses` procedure
(around line 499)
- Change the order clause from `.orderBy(desc(FormResponse.createdAt))` to
`.orderBy(asc(FormResponse.createdAt))`
- Verify that `asc` is imported from `drizzle-orm` (add the import if missing)

**Task 2: Frontend User Grouping Sort**
- In
`apps/blade/src/app/admin/forms/[slug]/responses/_components/PerUserResponsesView.tsx`,
locate the user sorting logic (lines 93-97)
- Replace the alphabetical name comparison with a timestamp-based comparison
- Sort users by the `submittedAt` timestamp of their first response in each
group
- Use ascending order so users with the earliest submissions appear first
- Since responses within each user's group are already sorted chronologically
from the backend, use the first response's timestamp as the sort key for the
user group

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- `@coderabbitai` You can skip phase 3. Add a simple unit test case for phase 2.
- `@coderabbitai` For design choice 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!

[coderabbitai]

Coding Plan

Summary

• The fix targets a single file where client-side alphabetical sorting overrides the backend's chronological ordering
• The sorting logic change is minimal: replace name string comparison with timestamp comparison
• Ascending order is used to show the first submitter at the top, as specified in the ticket

Implementation Steps

Update Per User View Sorting Logic

Change the sorting behavior in the Per User responses view from alphabetical (by member name) to chronological (by submission time, oldest first).

Modify User Group Sorting to Use Submission Time

Replace the alphabetical name-based sorting with chronological sorting based on the user's earliest submission timestamp.

• Update apps/blade/src/app/admin/forms/[slug]/responses/_components/PerUserResponsesView.tsx to modify the sorting logic (currently at lines 93-97)
• Change the sort comparator from comparing firstName lastName strings via localeCompare() to comparing submittedAt timestamps
• Sort in ascending order (earliest submission first) to satisfy the requirement of "starting with the first person"
• Use the first response's submittedAt field from each user group as the comparison value, since responses are already grouped by user

🤖 Prompt for AI agents

This phase changes the sorting in the Per User responses view from alphabetical
by member name to chronological by submission time (oldest first).

**File to modify:**
-
`apps/blade/src/app/admin/forms/[slug]/responses/_components/PerUserResponsesView.tsx`
(lines 93-97)

**Changes:**
- Locate the existing sort comparator that compares `firstName lastName` strings
using `localeCompare()`
- Replace it with a comparator that compares `submittedAt` timestamps
- Use ascending order (earliest submission first) so the first submitter appears
at the top
- Use the first response's `submittedAt` field from each user group as the
comparison value (responses are already grouped by user)

Research

This is a TypeScript monorepo using tRPC for API calls and Drizzle ORM for database access. Form responses are fetched via the forms.getResponses tRPC procedure in packages/api/src/routers/forms.ts, which returns responses sorted by createdAt descending (newest first). The responses are displayed in two views: "All Responses" (no client-side sorting) and "Per User" (groups responses by user, then applies alphabetical sorting by member name). The alphabetical sorting causing the issue is located in PerUserResponsesView.tsx.

---

🚀 Next Steps

🤖 All AI agent prompts combined

This phase changes the sorting in the Per User responses view from alphabetical
by member name to chronological by submission time (oldest first).

**File to modify:**
-
`apps/blade/src/app/admin/forms/[slug]/responses/_components/PerUserResponsesView.tsx`
(lines 93-97)

**Changes:**
- Locate the existing sort comparator that compares `firstName lastName` strings
using `localeCompare()`
- Replace it with a comparator that compares `submittedAt` timestamps
- Use ascending order (earliest submission first) so the first submitter appears
at the top
- Use the first response's `submittedAt` field from each user group as the
comparison value (responses are already grouped by user)

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- `@coderabbitai` You can skip phase 3. Add a simple unit test case for phase 2.
- `@coderabbitai` For design choice 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!