Implement Asset Detail View with History Timeline

[yusuftomilola]

Description

Create a detailed asset view page that displays comprehensive asset information, ownership history, maintenance records, and a visual timeline of all asset events.

Requirements

Asset Overview Section:

• Asset image/photo gallery (with lightbox for full view)
• All asset details in organized sections (Basic Info, Financial, Assignment, Technical Specs)
• QR code for asset (downloadable/printable)
• Edit button (navigates to edit form)
• Status change dropdown with confirmation

Tabs:

1. Overview - All basic information
2. History - Timeline of all asset events
3. Documents - Uploaded files (invoices, manuals, warranties)
4. Maintenance - Maintenance schedule and records
5. Notes - Internal notes and comments

History Timeline:

• Visual timeline showing all asset lifecycle events
• Events: Created, Assigned, Transferred, Status Changed, Updated, Maintenance Performed
• Display date, time, user who performed action, and details
• Filter by event type
• Search within history

Action Buttons:

• Transfer Asset
• Schedule Maintenance
• Upload Document
• Add Note
• Print Label
• Delete Asset (with confirmation)

Technical Specifications

• Use dynamic routing: /assets/[id]
• Implement breadcrumb navigation
• Use React Query for data fetching with proper cache invalidation
• Add image zoom functionality (react-medium-image-zoom)
• Generate QR code using qrcode.react
• Implement PDF generation for asset labels (react-pdf)
• Add real-time updates for collaborative viewing

Acceptance Criteria

• Page loads asset data correctly
• All tabs display relevant information
• Timeline shows events in reverse chronological order
• QR code is scannable and links to asset detail page
• All action buttons work correctly
• Image gallery supports multiple images
• Page is responsive on all devices
• 404 page shows for non-existent assets

API Endpoints

• GET /api/assets/:id - Get asset details
• GET /api/assets/:id/history - Get asset history
• GET /api/assets/:id/documents - Get asset documents
• PUT /api/assets/:id/status - Update asset status

[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.

🤠 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

[Iwueseiter]

@Iwueseiter has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hello Maintainer,

My name is Iwueseiter, and I am a frontend developer with solid experience in React, Next.js, TypeScript, JavaScript, and frontend integrations.

Beyond implementing the required features, I place strong emphasis on clean, maintainable code and ensuring the final output aligns closely with the provided design while remaining visually appealing and user-friendly.

I can complete this task within an estimated timeline of 2 days.
Thank you for your consideration.

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

[Kaylahray]

@Kaylahray has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hi maintainer, I would love to work on this issue to implement the asset detail view and history timeline

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

[Josue19-08]

@Josue19-08 has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hello maintainers 👋

I’m Josué, an experienced open-source contributor with a strong background in blockchain-oriented systems and full-stack development. I’ve worked on multiple projects involving Stellar and Soroban smart contracts, backend APIs, and frontend applications built with React, always paying close attention to code organization, performance, and user experience.

I’m used to contributing in collaborative open-source environments and understand the importance of clear scope definition, clean implementations, and maintainable solutions. From initial analysis to final pull request, I follow a structured approach that ensures reliability and long-term value for the project.

This issue is well aligned with my experience, and I’m confident I can provide a high-quality solution efficiently. Feel free to check my GitHub profile to review my previous contributions and technical work across different repositories.

I’m excited about the opportunity to contribute, collaborate with the maintainers, and help push this task to completion with a professional and results-driven mindset.

Best regards.

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

[drips-wave]

Congratulations, @Josue19-08! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on January 31, 2026.

🧑‍💻 @Josue19-08: 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.

⚠️ Important: When opening a PR, please link it to this issue to ensure it gets tracked accurately.

🤠 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 🌊

[Josue19-08]

Hey @yusuftomilola, thanks for assign me, I'll open PR soon.

[drips-wave]

This issue has been completed by @Josue19-08 as part of the Stellar Wave Program's 1st Wave 🥳

😎 @Josue19-08: 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.

🧑‍💻 Repo maintainers: How'd the contributor do? If you like, you can reward them with additional points by making a compliment within seven days after the Wave Program's current wave ends.