feat : project page

[JayWebtech]

🏗 Project page Implementation

Overview

Implemented complete project page with multiple views and components for handling project creation, listing, and detailed views.

🎯 Key Components

1. Project Dashboard (/dashboard/project/page.tsx)

• Main container component managing different views
• Tab-based navigation between Records and Add New Project
• Transaction summary with download functionality
• Integrated state management for view switching

2. Project List Component (ProjectList.tsx)

• Tabular view of all projects with key information
• Features:
  • Filtering capabilities (Date Added, Name, Status)
  • Project status indicators (Active/On-Hold)
  • Amount display in multiple currencies (STRK/USD)
  • Interactive row actions
  • Add new project button
• Sample data implementation with mock projects

3. Project Details Component (ProjectDetails.tsx)

• Detailed view of individual projects
• Features:
  • Project progress visualization (circular progress)
  • Project statistics:
    • Publishing readiness
    • Transaction counts
    • Appeals tracking
    • Timeline information
  • Outcome statistics with visual bars for:
    • STRK distribution (75%)
    • USDC distribution (33%)
    • FIAT distribution (16%)
  • Transaction history table

4. Add Project Component (AddProject.tsx)

• Form for creating new projects
• Fields:
  • Date (fixed: 19/02/2027)
  • Time (fixed: 8:00 PM UTC)
  • Project name
  • Total amount with currency selection (USDC, STRK, FIAT)
  • Description/Notes
• Clean two-column layout
• Form validation and controls

5. Document Management (/dashboard/document)

• Project documentation interface
• Features:
  • Project completion tracking
  • Team information display
  • Project timeline visualization
  • Document upload/preview functionality
  • Download records capability

🎨 UI/UX Features

• Consistent dark theme implementation
• Responsive grid layouts
• Interactive elements with hover states
• Progress visualizations
• Clean typography hierarchy
• Modern form controls
• Accessible navigation

🛠 Technical Implementation

• TypeScript/React components with proper interfaces
• Tailwind CSS for styling
• State management using React hooks
• Reusable form components
• Modular component architecture
• Type-safe props and event handlers

🧪 Testing Checklist

• View switching functionality
• Data display in tables
• Filter and sort operations
• Progress calculations
• Currency handling
• Navigation flow
• State persistence

📱 Component Dependencies

• Button
• Input
• TextArea
• Select
• Icons (Lucide React)
• Progress indicators
• Table components

🔄 Data Flow

1. Main dashboard view (page.tsx)
2. Tab-based navigation
3. List/Details/Add views
4. Document management
5. Transaction tracking

📝 Notes

• Implements TypeScript interfaces for type safety
• Uses mock data for demonstration
• Follows project's component structure
• Maintains consistent styling across views
• Implements proper error handling
• Follows accessibility guidelines

Closes #23