[Frontend] Add Asset Documents UI to Asset Detail Page

[yusuftomilola]

Extend the Asset Detail Page with a "Documents" tab so users can attach and manage document links.

Requirements

New "Documents" tab:

• List of attached documents: name, MIME type icon, file size (formatted), "Open" link button (opens URL in new tab)
• Delete button per document with ConfirmDialog
• "Attach Document" form: name (required), URL (required), type, size

API integration:

• GET /api/assets/:id/documents
• POST /api/assets/:id/documents
• DELETE /api/assets/:id/documents/:documentId

Acceptance Criteria

• "Open" link opens the document URL in a new tab
• File size formatted as KB / MB
• MIME type displayed as human-readable label (e.g. "PDF" for application/pdf)

[drips-wave]

This issue has been added to the Stellar Wave Program and is worth 200 Points.

🧑‍💻 Interested in contributing? Apply to work on this issue on Drips Wave, earn points, and receive rewards.

Warning

Only applications submitted via the apply link above will be considered. Please do not apply by commenting on the issue or opening a PR directly.

🤠 Repo maintainers: You can manage this issue's Points and Complexity on your Maintainer Dashboard here. Please keep an eye on applications and respond quickly 💙

ℹ️ Learn more about Drips Wave

[Bug-Hunter-X]

@Bug-Hunter-X has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

I’m excited to extend the Asset Detail Page in AssetsUp (#457) with a dedicated "Documents" tab for attaching, listing, viewing, and deleting document links, enhancing asset management with easy access to supporting files like PDFs, contracts, or images. With experience in Next.js + Tailwind/Shadcn UI (tabs, forms, API hooks via TanStack Query, ConfirmDialog integration), I’ve built similar document management sections before. My approach: add a "Documents" tab using Tabs component, fetch list via GET /api/assets/:id/documents (useQuery), render a clean table/list with columns for name (required), human-readable MIME type label (e.g., "PDF" for application/pdf via a simple mapping object from common types like application/pdf → PDF, image/jpeg → JPEG, application/msword → Word), formatted file size (KB/MB using a formatBytes function like bytes < 1024 ? bytes + ' B' : (bytes / 1024).toFixed(1) + ' KB' etc.), and "Open" button (Open); include per-document Delete button triggering ConfirmDialog → onConfirm DELETE /api/assets/:id/documents/:documentId → invalidate queries; add "Attach Document" form (shadcn Form with name, URL inputs required, optional type/size) → POST to same endpoint on submit → optimistic update or refetch; handle loading/error states, ensure URLs open in new tab securely, and match acceptance criteria (formatted sizes, human-readable types like "PDF", reliable external links). This will deliver a polished, secure, and intuitive documents UI—I can submit a clean, well-typed PR quickly with good structure and tests.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Bug-Hunter-X to this issue.

[shamoo53]

@shamoo53 has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

i would like to work on this issue
kindly assign

ℹ️ Repo Maintainers: To accept this application, review their application or assign @shamoo53 to this issue.

[drips-wave]

Congratulations, @shamoo53! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on February 26, 2026.

🧑‍💻 @shamoo53: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are issued when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[drips-wave]

This issue has been completed by @shamoo53 as part of the Stellar Wave Program's 2nd Wave 🥳

😎 @shamoo53: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.