As a backend developer, I want to implement REST API endpoints for menu management so that admins can create, read, update, and delete menu items and categories, and guests/users can browse the full menu. Endpoints: GET /api/menu/categories, GET /api/menu/items, GET /api/menu/items/{id}, POST /api/menu/items (admin), PUT /api/menu/items/{id} (admin), DELETE /api/menu/items/{id} (admin). Include price, description, dietary tags, availability status, and image URL fields. Currency in USD.
As a backend developer, I want to implement REST API endpoints for the online reservation system so that registered users can book, view, update, and cancel table reservations, and admins can manage all reservations. Endpoints: POST /api/reservations, GET /api/reservations (admin), GET /api/reservations/{id}, PUT /api/reservations/{id}, DELETE /api/reservations/{id}. Include date/time (Palestine Standard Time GMT+2), party size, special requests, and status fields.
As a frontend developer, I want to implement the global theme, color tokens, and ocean-inspired design system for Sonic-Restaurant so that all pages share a consistent visual identity. Set up CSS custom properties for Deep Blue (#003366), Coral (#FF7F50), Gold (#FFD700), and White (#FFFFFF). Implement the animated deep ocean gradient background (#001a33 to #000d1a), bioluminescent particle effects, caustic light ray overlays, coral reef silhouettes, and glassmorphism surface patterns. Remove any scaffold pages not needed (e.g. welcome page, generic dashboard sub-pages not matching the design). This task must be completed before all page implementation tasks.
As a backend developer, I want to implement REST API endpoints for staff management so that admins can manage staff profiles, schedules, salaries, and view performance data. Endpoints: GET/POST/PUT/DELETE /api/staff, GET/POST/PUT/DELETE /api/staff/schedules, GET /api/staff/salaries, POST /api/staff/payroll/run, GET /api/staff/performance. Include roles (Chef, Waiter, Host, Manager), shift types (Morning/Evening/Night), base salary in USD, hours worked, and attendance rate.
As a frontend developer, I want to implement the About page based on the existing v2 JSX design so that guests can explore the restaurant's concept, story, marine theme, and unique selling points. Page is accessible from the Home page and includes restaurant background, team highlights, and ocean-themed visuals.
As a frontend developer, I want to implement the Signup page based on the existing v2 JSX design so that guests can create a registered account. Includes Full Name, Email, Phone (Palestine +970 pre-filled), Password, Confirm Password fields, show/hide toggles, Terms & Privacy checkbox, coral 'Create My Account' CTA with ripple effect, inline validation with animated error states, BenefitsHighlight section (Online Reservations, Real-Time Order Tracking, Exclusive Member Offers), and SocialProofStrip. On success, redirect to /login.
As a frontend developer, I want to implement the Home page based on the existing v2 JSX design so that guests and registered users can explore the restaurant concept, animated ocean scene, interactive elements (crab/lobster menu highlights, treasure chest offers), and navigate to Menu, About, Login, or Signup. Implement all sections: NavBar, HeroSection, interactive ocean animations, featured dishes, and CTAs linking to /menu, /about, /login, /signup.
As a backend developer, I want to implement REST API endpoints for order placement and management so that registered users can place delivery or pickup orders and track their status, and admins can review and update all orders. Endpoints: POST /api/orders, GET /api/orders (admin), GET /api/orders/{id}, PUT /api/orders/{id}/status, GET /api/orders/user/{user_id}. Include order items, quantities, delivery address, order type (delivery/pickup), status, estimated prep time, total amount in USD, and timestamps in PST.
As a frontend developer, I want to implement the Login page based on the existing v2 JSX design so that registered users and admins can sign in. Page includes glassmorphism form card, email/password fields with gold focus rings, show/hide password toggle, 'Sign In' coral CTA, and links to Signup. On success, redirect registered users to /menu and admins to /dashboard. Integrates with existing authentication backend.
As a frontend developer, I want to implement the Reservation page based on the existing v2 JSX design so that registered users can book a table online. Includes date/time picker, party size selector, special requests textarea, table layout preview, confirmation summary card, coral 'Confirm Reservation' CTA, and inline validation. Accessible from the Home page and main navigation. On success, shows booking confirmation with reference number.
As a backend developer, I want to implement real-time order status updates using WebSockets or Server-Sent Events so that registered users receive live order status changes (Order Placed → Being Prepared → Ready → Out for Delivery → Delivered) without page refresh. Integrate with the order management API and emit status change events to connected clients.
As a frontend developer, I want to implement the Menu page based on the existing v2 JSX design so that guests and registered users can browse the full interactive digital menu. Includes MenuCategoryTabs (Starters, Signature Catches, Grilled Seafood, Sushi & Rolls, Sides, Desserts, Beverages), MenuItemsGrid with dish cards (photo, name, description, price in gold, dietary tags, coral Add button, water-ripple hover animation), ItemDetailModal with full dish details, portion selector, quantity stepper, special instructions, and allergen info. Guests can view; registered users can add to order.
As a backend developer, I want to integrate secure local payment gateway(s) supporting USD and local Palestinian currency so that registered users can complete order payments securely. Implement payment initiation, callback handling, refund endpoints, and encryption. Ensure GDPR-compliant data handling and PCI-DSS compliance for card data. Endpoints: POST /api/payments/initiate, POST /api/payments/callback, POST /api/payments/refund.
As a frontend developer, I want to implement the Admin Dashboard page based on the existing v2 JSX design so that admins can view analytics, sales reports, and customer feedback summaries. Includes KPI stat cards (Total Revenue, Orders Today, Active Reservations, Customer Satisfaction), revenue charts, recent orders list, feedback overview, and quick-action links to /orders, /reservations, /staff, /menu management. Accessible only to admin role after login.
As a backend developer, I want to implement REST API endpoints for the customer feedback system so that registered users can submit ratings and reviews, and admins can view feedback analytics. Endpoints: POST /api/feedback, GET /api/feedback (admin), GET /api/feedback/order/{order_id}, GET /api/feedback/summary. Include star ratings (1–5) for Food Quality, Service, Ambiance, Value, written review, and optional photo URL.
As a frontend developer, I want to connect the Reservation page to the live reservation API so that users can book, view, and cancel reservations with real backend persistence. Include availability checking, confirmation emails trigger, and error handling for fully-booked slots.
As a backend developer, I want to implement REST API endpoints for admin analytics and reporting so that admins can view sales reports, order statistics, customer feedback summaries, and staff performance data. Endpoints: GET /api/analytics/sales, GET /api/analytics/orders, GET /api/analytics/feedback, GET /api/analytics/staff. Support date range filters and return data in USD currency with PST timestamps.
As a frontend developer, I want to implement the Staff admin page based on the existing v2 JSX design so that admins can manage staff schedules, salaries, and performance. Includes StaffTopBar (sticky admin nav with live PST clock, notification bell, avatar dropdown), StaffSidebar, StaffOverviewBanner, StaffStatsCards (Total Staff, On Duty, Scheduled This Week, Pending Approvals), StaffRosterTable (sortable, filterable, with role/shift/status columns), StaffScheduleCalendar (weekly drag-and-drop shift grid), StaffSalaryPanel (payroll table + donut chart), and StaffPerformanceChart (grouped bar chart + top performer spotlight). Accessible only to admin role.
As a frontend developer, I want to implement the Order page based on the existing v2 JSX design so that registered users can place delivery or pickup orders. Includes OrderNavBar, OrderHeroBanner with Delivery/Pickup toggle and address input, MenuCategoryTabs, MenuItemsGrid, ItemDetailModal, OrderSummaryPanel (sticky sidebar with item list, quantity steppers, promo code, estimated prep time), UpsellRecommendations horizontal scroll strip (Garlic Bread, Seafood Soup, Mango Sorbet etc.), and CheckoutBar sticky bottom CTA. Navigates to /tracking on order placement.
As a frontend developer, I want to implement the Orders admin page based on the existing v2 JSX design so that admins can review, manage, and update all customer orders. Includes orders table with status filters (Pending, In Progress, Ready, Delivered, Cancelled), order detail drawer with items list and customer info, status update controls, search and date-range filter, and pagination. Accessible from the admin dashboard.
As a frontend developer, I want to implement the Tracking page based on the existing v2 JSX design so that registered users can track their order status in real-time from kitchen to table/delivery. Includes animated order status timeline (Order Placed, Being Prepared, Ready, Out for Delivery, Delivered), estimated arrival countdown, order summary panel, and live updates. Navigates from /order on placement and links to /feedback on completion.
As a frontend developer, I want to connect the Menu and Order pages to the live menu management API so that dish listings, categories, prices, dietary tags, and availability are dynamically loaded from the backend instead of static data. Implement loading states, error handling, and empty states.
As a frontend developer, I want to connect the Staff Management and Dashboard admin pages to the live staff, analytics, and payroll APIs so that all KPI cards, roster tables, schedule calendars, salary panels, and performance charts display real data. Implement data fetching, loading skeletons, and error states.
As a frontend developer, I want to implement the Feedback page based on the existing v2 JSX design so that registered users can rate their dining experience after order completion. Includes star rating component (1–5 gold stars), category ratings (Food Quality, Service, Ambiance, Value), written review textarea, photo upload option, and coral 'Submit Feedback' CTA. Navigates from /tracking on order completion.
As a frontend developer, I want to connect the Order and Tracking pages to the live order management and real-time tracking APIs so that users can place real orders and see live status updates. Implement WebSocket or SSE connection on the Tracking page, order submission flow with payment gateway redirect, and order history fetching.
No comments yet. Be the first!