Skip to content

Implement Calendar Feature for Buyer Section #260

@KevinLatino

Description

@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
  • Use store for email and username instead of hardcoded data

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions