Implement Calendar Feature for Buyer Section

[KevinLatino]

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

1. CalendarPage.tsx - Main page
2. CalendarView.tsx - Calendar grid
3. CalendarEvent.tsx - Event display
4. CalendarFilters.tsx - Filters
5. 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

🏷️ Labels

• feature
• buyer
• calendar
• ui/ux

[Benjtalkshow]

Hi @KevinLatino
I can handle this task. Kindly assign. Thanks

[Tawab44]

I came across your issue in your repository, and I’m really interested in contributing to it. I’ve read through the issue and the contributing guidelines, and I believe I can help resolve it and Fix it. Can you kindly assign this task to me?

[AbiodunVlad]

I have experience with frontend development and typescript. I believe that this is a feature every business that delivers goods to buyers should have.

[Josue19-08]

Hi @KevinLatino, I’m Josué, a developer with experience building and maintaining web applications, implementing complete features, integrating APIs, and creating interfaces with React and TypeScript. I’m used to designing components from scratch, following design systems, applying solid architectural practices, and managing state efficiently. I’d like to work on this issue to deliver a scalable, well-structured solution aligned with the project’s style.

Recommended by OnlyDust for high-quality and dependable contributions.

[AlbertUmoren20]

HI @KevinLatino Please assign this task to me

[AlbertUmoren20]

@KevinLatino You are yet to assign anyone, Can you this task to me