Create "Verification Center" Page

[JosueBrenes]

Description

Create a comprehensive verification center page that includes document management, identity verification, business validation, and service provider verification functionalities.

Requirements

Document Upload Section

• Create drag-and-drop upload interface
• Implement file type validation (PDF, JPG, PNG)
• Add file size limit checks (10MB)
• Build document preview functionality
• Add progress indicator for uploads

Identity Verification

• Add fields for Name and Last Name
• Add address verification input
• Include phone number verification field
• Add email verification input
• Display verification status (e.g., "Pending," "Verified")
• Allow users to upload documents for manual review

Business Verification

• Add a section for uploading business documents
• Include a field for Tax ID input
• Add a field for Business License upload
• Display Corporate Structure details
• Add a section for Ownership details
• Include a field for Business Address verification
• Show Business Status (e.g., "Pending," "Verified")

Service Provider Validation

• Add a section for uploading Credentials
• Include a field for License upload
• Add a section for Insurance details
• Display Reference Checks status
• Show Service History timeline
• Include a Quality Metrics summary
• Add a section for Compliance checks

---

Technical Specifications

• Frontend: React.js with TypeScript
• Mobile-responsive design

---

---

Acceptance Criteria

• Users can upload multiple document types
• All verification processes have clear status indicators
• System provides real-time feedback on verification status
• Admin panel for manual review processes
• Secure document storage and handling
• Mobile-responsive interface
• Clear error messaging system

---

Design Assets Required

• UI mockups
• Icon set

Follo

---

Additional Requirements

1. Responsive Design: The page should be fully responsive and work seamlessly on all devices (desktop, tablet, mobile).
2. Dark Mode Support: The page should include a dark mode option for better user experience in low-light environments.
3. Shadows and Modern UI: Use subtle shadows and a modern UI design to enhance the visual appeal.

Follow this figma

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]

Could I take over this issue?

[Supa-mega]

Is it okay if I take this?

[Jemiiah]

Hello @JosueBrenes, 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 take this issue?

[austineblaise]

I’m a frontend blockchain developer skilled in JavaScript, TypeScript, React, Next.js, and Vue.js. I can handle this issue by designing and building a secure, responsive, and user-friendly verification center page. I will ensure it meets your platform’s needs and provides a smooth experience for users.

I look forward to contributing to this project.

[JayWebtech]

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

I estimate this will take 1 day to complete.

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/

[respp]

Hello @JosueBrenes! I am Renzo Barcos a Dojo Coding member⛩️ and am excited about the opportunity to make my first contributions to SafeTrust.

I’d be happy to take on creating the Analytics page. As a full-stack developer with strong technical programming skills, I specialize in creating clean, efficient, and scalable solutions.

For more: my website: www.renzobarcos.site

Steps to Resolve:

1) Understand the Requirements

• Review the project specifications thoroughly to understand the layout and required sections (Document Management, Identity Verification, Business Validation, Service Provider Verification).
• Familiarize yourself with the design assets (UI mockups, icon set) to align your implementation with the visual style.

2) Plan the UI/UX Design

• Create a responsive layout, ensuring compatibility across mobile, tablet, and desktop devices.
• Integrate a dark mode option for improved user experience in low-light environments.
• Design the drag-and-drop upload functionality, fields for identity and business verifications, and status indicators for verification processes (e.g., "Pending," "Verified").
• Review the design with the team for feedback before proceeding with development.

3) Implement Document Management Section

• Build a drag-and-drop document upload interface.
• Implement file type validation (PDF, JPG, PNG) and enforce a file size limit (10MB).
• Add document preview functionality and a progress indicator for uploads.
• Ensure that documents are stored securely and provide clear visual feedback during the upload process.

4) Develop the Identity Verification Section

• Create input fields for Name, Last Name, Address, Phone Number, and Email.
• Display the verification status for each field (e.g., "Pending," "Verified").
• Allow users to upload documents for manual review as part of the verification process.

5) Build Business Verification Section

• Implement fields for uploading business documents (e.g., Tax ID, Business License).
• Add sections for Corporate Structure and Ownership details.
• Include Business Address verification and Business Status indicators (e.g., "Pending," "Verified").

6) Implement Service Provider Validation Section

• Create sections for uploading Credentials, License, and Insurance details.
• Display Reference Checks status, Service History timeline, Quality Metrics summary, and Compliance checks.

7) Ensure Responsiveness and Secure Data Handling

• Use Tailwind CSS or other utilities to make the page responsive and optimized for different devices.
• Ensure secure storage of documents and proper handling of user data.
• Provide real-time feedback and error messages for any issues that arise during the verification process.

8) Testing and Validation

• Test the page to ensure that document uploads, identity fields, and status indicators work as expected.
• Validate that the page is mobile-responsive and functions across all device types.
• Ensure that all components interact as intended and that the UI elements are consistent with the design.

9) Submit Pull Request and Finalize

• Commit all changes according to Git Guidelines for Atomic Commits.
• Open a pull request with a detailed description of the implementation and any known issues or considerations.
• Ensure the pull request is formatted according to the Git Guidelines and includes references to any relevant issues or documentation.

By following these steps, the verification center page will be fully functional, responsive, secure, and visually aligned with the project requirements.

[sanieni6]

man, this sounds challenging i'd love to tackle this. I have experience working with next.js and tailwind and responsive design, please let me know if i can help. cheers

[Verifieddanny]

Can I try solving this issue?

[Emeka000]

Can I try solving this issue?

[Wendyalbert]

Can I attempt this issue?

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

[ussyalfaks]

Can I try solving this issue to Create "Verification Center" Page

[Pvsaint]

Could I take over this issue?
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.

[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 take care of this issue?

[Jemiiah]

Hello @JosueBrenes, 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/u/Jemiiah I intend to solve this issue with an ETA of 24-48 hours . I worked on this repository last OD Hack doing this task will be easy for me to execute and finish with the timline have given

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

[Josue19-08]

About Me

I am a full-stack developer with experience working on frontend and backend, using technologies such as React, .NET, C#, C++, Java, Python, Docker, and SQL, among others. As an active member of the Dojo Coding community, I am committed to building intuitive, secure, and responsive user interfaces for diverse applications.

Proposal

I will create a comprehensive Verification Center page that meets all specified requirements, ensuring a seamless and efficient user experience. The implementation will include:

• Document Upload Section: Develop a drag-and-drop interface for document uploads with file type and size validation, preview functionality, and a progress indicator for uploads.
• Identity Verification: Add fields for user details (Name, Last Name, Address, Phone Number, Email), upload options for manual review, and display status indicators for each verification step.
• Business Verification: Implement fields for uploading business documents, Tax ID input, Business License upload, Corporate Structure details, Ownership details, and Business Address verification with status indicators.
• Service Provider Validation: Add sections for uploading credentials, license and insurance details, reference checks, service history, quality metrics, and compliance checks.
• Technical Implementation:
  • Build using React.js with TypeScript for robust and type-safe development.
  • Ensure mobile responsiveness across all devices.
  • Add dark mode support for better usability in low-light environments.
  • Follow modern UI practices with subtle shadows and clean layouts.
• Admin Features: Provide secure document storage, an admin panel for manual reviews, and a real-time feedback system for users on verification progress.
• Testing and Deployment: Validate all functionality to ensure real-time status updates, clear error messages, and seamless user experience.

The final solution will align with Git Guidelines for atomic commits and the Contributing Guide, ensuring clear code management and collaboration.

ETA: 1 to 2 days

[drakkomaximo]

[FE]: Create "Verification Center" Page

Hi @JosueBrenes and everyone!, I'm a Dojo Coding member⛩️

I’d be happy to participate in this issue. With over 5 years of experience in frontend development, I’ve worked on similar projects and can ensure a clean, user-friendly, and well-structured implementation.

Steps to Resolve:

1) Setup and Initial Configuration

• Create a React.js project with TypeScript.
• Set up a file structure for components, services, and styles.
• Configure a UI library (e.g., Material-UI or Tailwind CSS) for modern and responsive design, including dark mode support.
• Implement basic routing and layout components for a responsive interface.

2) Document Upload Section

• Create a drag-and-drop file upload component.
• Add validation for file types (PDF, JPG, PNG) and size limits (10MB).
• Include real-time progress indicators and document preview functionality.

3) Identity Verification

• Build a form with fields for name, last name, address, phone number, and email verification.
• Display verification statuses dynamically (e.g., "Pending," "Verified").
• Add functionality for users to upload supporting documents for manual review.

4) Business Verification

• Create a section for uploading business-related documents (e.g., Tax ID, Business License).
• Include fields for Corporate Structure and Ownership details.
• Implement business status tracking and validation features.

5) Service Provider Validation

• Develop sections for uploading Credentials, Licenses, and Insurance details.
• Add a timeline for Service History and a summary for Quality Metrics.
• Include compliance check functionality with clear status indicators.

6) Enhancements and Finalization

• Ensure mobile responsiveness and dark mode support for the entire interface.
• Implement secure document storage and real-time feedback on verification status.
• Add an admin panel for manual review and management.
• Conduct end-to-end testing to ensure functionality, performance, and error handling.

---

Estimated Time: 2-3 days

Let me know if I can start working on this!

[ShantelPeters]

Let me try this one!

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

[mimisavage]

Is it okay if I take this?

[B-uchi]

I'd be happy to do this.

[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 Verification Center Page, I can deliver the following:

Document Management: Implement a drag-and-drop upload feature with file validation (PDF, JPG, PNG), file size limits (10MB), progress indicators, and preview functionality.
Identity Verification: Add fields for user data (Name, Last Name, Address, Phone, Email) with verification status displays and document upload for manual review.
Business Verification: Create sections for uploading business documents, Tax ID, Business License, and Ownership details, with clear status indicators for each process.
Service Provider Validation: Build sections for credential uploads, license uploads, insurance details, and compliance checks, with reference check statuses and service history timelines.
Technical Details: Ensure a mobile-responsive, dark-mode-compatible design using React.js with TypeScript, following modern UI principles with shadows and visual hierarchy.
Admin Features: Provide functionality for manual review processes in an admin panel and secure handling of sensitive data.
This project aligns perfectly with my skills, and I’m excited about the opportunity to create a robust and user-friendly Verification Center. Looking forward to contributing! 😊

[davedumto]

Hi, my name is David, and I am a frontend developer skilled in React.js, Next.js, JavaScript, TypeScript, Tailwind CSS, and Shadcn.

For this task, I will:

Develop a verification center page with document upload, identity verification, business verification, and service provider validation.
Implement drag-and-drop upload with file validation, progress indicators, and real-time status updates.
Ensure mobile responsiveness, dark mode support, and modern UI design with subtle shadows.
Use React components to display verification statuses and enable admin manual review.
ETA: 1 day