Implementation of "Submissions" Page

[Benjtalkshow]

Implementation of "Submissions" Page (app/me/hackathons/submissions)

Objective

Deliver a detail-rich, visually polished dashboard that gives users complete visibility into the full lifecycle of every hackathon submission they have made. This page serves as the definitive tracking surface for submission status — from initial draft through ranking — and should feel like a professional-grade status console. All data is sourced directly from the existing session, keeping the page fast and free of redundant network requests.

---

UI Description

Aesthetics & Visual Identity

The submissions page should communicate clarity and precision. Users need to immediately understand the state of every submission without hunting for information. The design should balance density with readability — structured enough to present complex lifecycle data, but clean enough to avoid overwhelming the user.

Visual Layout

• Implement a sortable table view as the primary layout, allowing users to sort submissions by status, date, hackathon name, or other relevant fields
• The table should feel lightweight and modern — not a heavy data grid, but a refined, well-spaced list that gives each row room to breathe
• Each row should be scannable at a glance, with the most critical information (submission title, hackathon, status badge) immediately visible without any interaction

Status Badges

Use glowing status badges to visually communicate submission state at a glance. Each status must have a distinct color with a soft outer glow/shadow for depth:

Status	Color	Style
Ranked	Emerald	Glowing badge with soft emerald outer shadow
Under Review	Amber	Glowing badge with soft amber outer shadow
Draft	Zinc	Muted badge with soft zinc outer shadow

• Badges should be consistent in size and typography across all rows
• The glow effect should be subtle — enough to draw the eye without feeling garish
• Consider adding additional statuses (e.g., Submitted, Disqualified) with appropriate color mappings if they exist in the data schema

Drawer Interaction

• Clicking any submission row should open a full metadata panel via BoundlessSheet from @/components/sheet/
• The drawer must present the complete submission detail — all fields available in the submission object — in a well-structured, readable layout
• The drawer should open with a smooth slide-in animation consistent with the rest of the app's motion language
• Include a clear close affordance and ensure the drawer is fully accessible (focus trapping, keyboard dismissal)

---

Technical Details

Logic & Data Path

Data Source

• Pull all submission data from user.profile.hackathonSubmissionsAsParticipant via the existing session — no additional API calls should be introduced

Reusable Components

• Reuse the existing submissionCard and submissionTab components as building blocks
• Extend or wrap them as needed to support the table layout and badge system without modifying their core contracts

Drawer Integration

• Import and use BoundlessSheet from @/components/sheet/ to handle the full submission metadata view on row click
• Pass the selected submission object as props into the sheet — the sheet should be stateless and driven entirely by the data passed to it
• Manage open/close state locally within the page component using useState

---

⚠️ Caution

This is a production environment — not a sandbox.

• Code must be performant, accessible, and clean
• No dummy data — all data must be sourced strictly from user.profile.hackathonSubmissionsAsParticipant in the session; no additional API calls should be introduced
• AI-generated code will be scrutinized; poorly structured or "hallucinated" code will result in immediate issue closure
• Follow the existing design system: shadcn/ui, Tailwind, Framer Motion

---

Testing & Verification

Automated Tests

npm run lint    # Ensure code quality
npm run build   # Verify no breaking changes in routing or types

Manual Verification

• Confirm that no additional API calls are made on page load — all data must come from user.profile.hackathonSubmissionsAsParticipant in the existing session
• Verify the table is sortable and that sorting behaves correctly across all supported fields
• Confirm status badges render with the correct color and glow for each status (Ranked = Emerald, Under Review = Amber, Draft = Zinc)
• Test row click interaction — confirm BoundlessSheet opens with the correct full submission metadata
• Verify the drawer opens and closes smoothly with correct animation, focus trapping, and keyboard dismissal (Escape key)
• Confirm submissionCard and submissionTab components are reused correctly without modifying their core contracts
• Test the page at multiple breakpoints to confirm responsive layout integrity
• Verify accessibility — table headers, badge labels, and drawer are properly announced by screen readers
• Provide video evidence

[linear]

BOU-106

[Anuoluwapo25]

Hi maintainer, I'd like to take on this issue as i'll fully implement what is requested as i'm a fullstack developer with experiences.

[Anuoluwapo25]

Hi maintainer, I'd like to take on this issue as i'll fully implement what is requested as i'm a fullstack developer with experiences.

[JoyLight00]

Hi team 👋 I’d like to take on the “Submissions” page implementation.

I’ll deliver a polished, sortable submissions table powered strictly by user.profile.hackathonSubmissionsAsParticipant from the existing session — no additional API calls. The layout will prioritize clarity and scannability, with glowing status badges (Emerald / Amber / Zinc) implemented cleanly within the current design system (shadcn/ui + Tailwind + Framer Motion).

For interaction:

Row click → opens BoundlessSheet with full submission metadata

Sheet will be fully accessible (focus trap, ESC close, proper aria attributes)

Local state only for open/close + selected submission

No contract changes to submissionCard or submissionTab — only extension/wrapping

I’ll ensure:

Proper sorting across supported fields

No performance regressions

Clean, structured code (production-ready)

npm run lint and npm run build passing

Responsive + accessibility verification

Video proof included in PR

[Oluwatos94]

Hi Benjtalkshow, I’m Tosin a full-stack developer.

I’ve reviewed this issue and I understand the expected behavior. I’d be happy to work on it and submit a clean, quality PR.

I would like to implement this issue.

[Michaelkingsdev]

I am Michael Kings, a seasoned full-stack developer with extensive experience in blockchain technology. I have a passion for building responsive and interactive user interfaces, and my backend logic is top-notch. With 4 years of experience, I am confident that I can tackle this issue.
Please assign it to me.