-
Notifications
You must be signed in to change notification settings - Fork 115
Open
Labels
Description
Issue: Implement Calendar Feature for Buyer Section
📋 Description
Create a calendar feature for buyers to track orders, deliveries, and important dates. Accessible from buyer profile and orders sections.
🎯 Objective
- Visual calendar interface for shopping activities
- Track order statuses and delivery dates
- Integrate with existing order and profile systems
📍 File locations
src/features/buyer/calendar/
src/app/buyer/calendar/
🔄 Required features
- Monthly/Weekly calendar view
- Event markers for orders and deliveries
- Click to view order details
- Filter by order status
- Search by date range
🔧 Components to create
- CalendarPage.tsx - Main page
- CalendarView.tsx - Calendar grid
- CalendarEvent.tsx - Event display
- CalendarFilters.tsx - Filters
- EventDetails.tsx - Event modal
📁 File structure
src/features/buyer/calendar/
├── components/
│ ├── CalendarView.tsx
│ ├── CalendarEvent.tsx
│ ├── CalendarFilters.tsx
│ ├── EventDetails.tsx
│ └── CalendarHeader.tsx
├── hooks/
│ └── useCalendar.ts
├── types/
│ └── calendar.ts
└── index.ts
🎨 Design requirements
- NO EXISTING DESIGN - CREATE FROM SCRATCH
- Transparent backgrounds with white borders
- Consistent with StarShop design system
- Responsive design
- Color-coded event types
✅ Acceptance criteria
- Calendar displays current month
- Events properly marked
- Clicking events shows details
- Filters work correctly
- TypeScript implementation
- Responsive design
🛠️ Technical considerations
- Date manipulation library (date-fns or dayjs)
- State management (Zustand)
- API integration for order data
- Accessibility compliance
📝 Additional notes
- IMPORTANT: No existing design - create from scratch
- Design: Transparent backgrounds with white borders
- Follow app's design pattern
- Use existing UI components
- Use store for email and username instead of hardcoded data