Implement Notification Center

[JosueBrenes]

Description

Create a Notification Center page following the Figma design. Should display notification metrics and a list of recent notifications with filtering capabilities.

Mock Data

Metrics Data

// Metrics data
const metricsData = {
  allNotifications: {
    total: 28,
    unread: 12
  },
  contractUpdates: {
    total: 15,
    requireAction: 5
  },
  depositEvents: {
    total: 8,
    pending: 3
  },
  disputes: {
    total: 5,
    critical: 2
  }
};


// Notifications list
const notifications = [
  {
    id: 1,
    type: "success",
    title: "Contract #SC-2401 Signed",
    message: "The security deposit contract has been successfully signed by all parties.",
    time: "2 minutes ago"
  },
  {
    id: 2,
    type: "warning",
    title: "Pending Deposit Verification",
    message: "Contract #SC-2400 is awaiting deposit verification. Please review the transaction.",
    priority: "High Priority",
    time: "15 minutes ago"
  },
  {
    id: 3,
    type: "error",
    title: "Dispute Filed",
    message: "A dispute has been filed for Contract #SC-2399. Immediate attention required.",
    priority: "High Priority",
    time: "1 hour ago"
  },
  {
    id: 4,
    type: "info",
    title: "Contract Update",
    message: "Terms have been updated for Contract #SC-2398. Review the changes.",
    time: "2 hours ago"
  }
];

Requirements

UI Components Needed:

• Metrics cards (4)
• Notification list
• Filter tabs (All, Unread, Important)
• Filter dropdown and Mark all as read button

Features:

• Display notification metrics
• Show notifications list with different status icons
• Filter notifications
• Mark notifications as read

Use shadcn Components:

• Card
• Tabs
• Badge (for priority)
• Button

Design Notes:

• Use dark theme
• Make it responsive
• Follow Figma layout

Make sure to follow the Git Guidelines for Atomic Commits and read Contributing Guide

The Pull request needs to have the format mentioned below in the Git Guideline

• Contributing Guide
• Git Guidelines

[pragmaticAweds]

May I take care of this?

[Supa-mega]

I'd love to work on this!

[Jemiiah]

Hello, I'm Jeremiah, a frontend web3 developer I have contributed in previous OD hacks. i have made over 90+ contribution in past OD Hacks here's my OD Hack profile: https://app.onlydust.com/Jemiiah I intend to solve this issue with an ETA of 24 hours . I worked on this repository last OD Hack doing this task will be easy for me to execute and finish with timline i have given

[ekumamatthew]

Mind if I try this one?

[zintarh]

Is it okay if I take this?

[Oshioke-Salaki]

Please can i take this up i am a well experienced frontend devloper in next js and react. eta of 8hours. I will do a pixel perfect implementation and test across all screen sizes.

[JayWebtech]

Hi, I'm Jethro and I'll like to work on this issue.

Here are some of my works in nextjs and react:

https://ecohotels.com/
https://jaykosai.vercel.app/
http://t.me/sapacoin_app_bot/start
https://gaskiya-baptist-church.com.ng/

[derianrddev]

I’m Derian Rodríguez, a member of the Dojo Coding community ⛩️💻. I’d like to work on this.

[sebas11042]

Hi! a member of the DOJO Coding community, with experience in creating responsive and user-friendly interfaces using modern frameworks. I’ve worked extensively with shadcn components and mock data integration in previous projects, ensuring seamless functionality and adherence to design specifications. I’m confident my expertise aligns with the requirements of this issue.

To implement the Notification Center page, I will create a responsive layout using shadcn components (Card, Tabs, Badge, Button) to display notification metrics and a dynamic list of notifications from the mock data. I’ll integrate filtering functionality via tabs (All, Unread, Important) and a dropdown, along with a "Mark all as read" button for bulk actions. Styling will follow the provided Figma design, ensuring a cohesive dark theme and responsiveness across devices. The implementation will include testing to validate metrics, filtering, and actions, guaranteeing functionality and user-friendliness.

[kimcascante]

Hello! I'm Kim Cascante, a member of Dojo Coding! ⛩️
I’m passionate about design and frontend development, with experience in React, Typescript, Java, SQL, Javascript, and small scripts for automation. I’m also diving into Web3, blockchain, and exploring the world of open-source contributions.
For this project, my approach will be:
1️⃣ Start by reviewing the current code and figma design
2️⃣ Implement new changes to make consistent with figma
3️⃣ Test the changes to follow the design specifications
4️⃣ Prepare a well-documented PR for review.
Excited to apply what I know and learn from this experience to grow as a developer. Let’s build something amazing together! 💻✨

[Wendyalbert]

Is this issue still available?

[CoderPrime99]

Hello there! My name is Carlos Correa, better known as CoderPrime99, I am a student of Software Engineering at UNED, Costa Rica, with over two years of experience, focusing on Fullstack development with JavaScript and learning about WEB3 technologies at Dojo Coding.

My approach to this issue would be:

1. Understand Requirements
   Carefully analyze the Figma design for layout, style, and responsiveness.
   Identify key components: metrics cards, notification list, filter tabs, and dropdowns.
   Ensure compatibility with the shadcn components (Card, Tabs, Badge, Button).

2. Plan Component Structure
   Metrics Cards Component: Display totals and unread/critical counts using the mock metricsData.
   Notification List Component: Display each notification with status icons and priority badges.
   Filter Component: Implement tabs (All, Unread, Important) and a dropdown for additional filters.
   Action Buttons: Add "Mark All as Read" functionality.

3. Data Handling
   State Management: Use state to manage notifications, read/unread status, and active filters.
   Mock Data Integration: Start with the provided mock data for development and testing.
   Filtering: Implement filtering logic for tabs and dropdown.

4. UI Development
   Use shadcn components to build the UI while adhering to the Figma design.
   Implement the dark theme using global styles or shadcn theming options.
   Ensure the layout is responsive for all screen sizes.

5. Features Implementation
   Mark as Read: Add functionality to update notification status.
   Filter Logic: Implement tab-based and dropdown filters for notifications.

6. Testing & Optimization
   Responsiveness: Test on various devices and screen sizes.
   Dark Theme: Ensure proper contrast and alignment with the design.
   Functionality: Verify filtering and mark-as-read features.

7. Commit and PR Guidelines
   Follow Git Atomic Commit standards, e.g.:
   feat(metrics): create metrics cards for notification center
   fix(filters): resolve dropdown alignment issues
   Adhere to the Contributing Guide and format the PR as per guidelines.
   Tools & Best Practices
   Test with dummy and edge-case data for robustness.
   Review the implementation against Figma and iterate as needed.

This step-by-step approach ensures the feature is built efficiently, aligns with design expectations, and meets project standards.

[Benjtalkshow]

I am a Full Stack Developer specializing in Next.js, TypeScript, Node.js, Cairo and Rust . With over 50 contributions across projects in the OnlyDust ecosystem, I’ve developed strong proficiency in delivering high-quality solutions and resolving complex issues within tight deadlines. My experience spans frontend, backend, smart contracts, and the optimization and maintenance of scalable codebases.
I can handle this task. Kindly assign.

[Michaelkingsdev]

May I take care of this?

[mimisavage]

Can I start working on this?

[therealemino]

Hi, I've over 4 years professional experience working on frontend applications (React, Vue, Next, Nuxt, TS). I've gone through the repository and design. I would love to contribute to this project and I believe this is an excellent issue for me to take on. My draft PR should be ready within 24 hrs.
Can take on this task?

[Pvsaint]

I'd love to give this a go.
I'm Victor Peter, I’ll like to contribute to this project, I’m a frontend and smart contract developer proficient in type script, react.js, next.js, solidity and cairo languages respectively.
I'm a first time contributor on this project
ETA 48hrs.

[0xdevcollins]

Can I contribute to this one?
I am a Full Stack Blockchain Developer with proficiency in Solidity/Rust, Next.js, TypeScript, React, and Node.js. I've demonstrated my ability to adjust to a variety of requirements, perform well under pressure, and reliably produce user-centric blockchain solutions with 66 significant contributions spread over 20 OnlyDust projects.

[martinvibes]

Holla i'm Martin, I'm a fullstack developer who enjoys building smooth applications to pixel perfect and engaging websites using JavaScript, typescript and frameworks(React, nextjs, tailwindcss etc.) and i have contributed to other projects that have been merged.
Am also experienced in working and writing smart contracts.
Kindly assign :)

[Jagadeeshftw]

Proposal to Work on the Issue

I am eager to contribute to this issue and believe I am well-suited for the task, given my extensive experience in Cairo programming and building decentralized applications on StarkNet. My expertise spans across multiple domains crucial for this implementation:

• Smart Contracts & Blockchain Development: Proven expertise in StarkNet, Stellar, and Rust, with hands-on experience in developing secure and efficient smart contracts, blockchain integrations, and high-performance backend systems.
• Backend Engineering: Strong background in designing and managing scalable APIs, handling server-side operations, and ensuring robust backend performance for blockchain applications.
• Frontend Development: Proficient in building intuitive and responsive frontend interfaces using React and Next.js, ensuring seamless interaction between users and blockchain-based applications.

Why Assign This to Me?

I have a track record of delivering high-quality solutions efficiently, with a deep understanding of smart contract security, decentralized architectures, and full-stack development. My ability to bridge frontend, backend, and blockchain components ensures a well-rounded, optimized solution.

Estimated Timeline

I anticipate delivering a fully functional solution within 3 days. Please let me know if I can proceed.

I am excited about the opportunity to contribute and look forward to collaborating!

Best regards,
Jagadeesh B

[chiscookeke11]

Can I contribute to this one?

[1nonlypiece]

Application for Contribution

I am excited about the opportunity to contribute to this issue and am confident that my expertise aligns well with the requirements. With a strong background in Cairo programming and decentralized application development on StarkNet, I bring a well-rounded skill set to deliver an effective solution.

ETA

I expect to have a working solution ready within 48 hours. Please let me know if I can proceed with the implementation.

[ShantelPeters]

Let me handle this issue!

[B-uchi]

Can I tackle this one?

[Villarley]

Hi @JosueBrenes 🚀,

I’m Santiago Villarreal Arley, a proactive and communicative developer with a strong background in both front-end and back-end Web3 development. As a proud Diamond Contributor and member of Dojo Coding, I have collaborated on various impactful projects built on StarkNet and Stellar, focusing on creating scalable and efficient blockchain-based solutions.

Notably, I won the Buildathon Web3 Hackathon for my work on BuildMyEvent, an open-source blockchain project designed to solve real-world challenges by integrating innovative and user-centric features. I am committed to adding my expertise in front-end and back-end development to deliver high-quality results. My development process emphasizes verified commits, ensuring traceability and maintaining best practices in secure and transparent code contributions.

For the Generate Unique Payment ID for URLs task, I can:

Implement a utility function using a library like nanoid for generating short, secure, and collision-resistant IDs (10–12 characters).
Add a paymentId column to the Payment entity with uniqueness constraints in the database schema.
Enhance the PaymentService to generate and assign unique paymentId values during payment creation, ensuring collision handling.
Update the payment creation endpoint to include the generated payment link in the response, dynamically configured using a base URL from .env.
Write comprehensive unit tests to validate the ID generation logic, database integration, and endpoint response structure.
This feature will ensure secure, user-friendly payment links while maintaining high performance and scalability. I’d love to contribute to this project—it’s a great fit for my skills and experience! 😊

[Elite-tch]

Can I handle this task?