### JavaScript Module Imports

Source: https://github.com/dreiiiiim/wash-and-go-se2/blob/main/index.html

Lists the external JavaScript modules required for the Wash & Go Baliwag project, specifying their versions and CDN links for import. This includes core libraries like React and utility libraries such as Date-fns.

```json
{
  "imports": {
    "react": "https://esm.sh/react@^19.2.4",
    "react-dom/": "https://esm.sh/react-dom@^19.2.4/",
    "react/": "https://esm.sh/react@^19.2.4/",
    "lucide-react": "https://esm.sh/lucide-react@^0.564.0",
    "date-fns": "https://esm.sh/date-fns@^4.1.0"
  }
}
```

--------------------------------

### CSS Styling for Body Element

Source: https://github.com/dreiiiiim/wash-and-go-se2/blob/main/index.html

Defines the base font and background color for the Wash & Go Baliwag application. It sets the font family to 'Inter' with a fallback to sans-serif and applies a light gray background color.

```css
body {
  font-family: 'Inter', sans-serif;
  background-color: #f8f9fa;
}
```

--------------------------------

### Define Service Packages and Vehicle Sizes in TypeScript

Source: https://context7.com/dreiiiiim/wash-and-go-se2/llms.txt

This snippet defines the TypeScript enums for ServiceCategory and VehicleSize, along with an example ServicePackage object. It illustrates how service packages are structured with pricing tiers based on vehicle size and duration.

```typescript
import { ServiceCategory, ServicePackage, VehicleSize } from './types';

// Service categories
enum ServiceCategory {
  LUBE = 'LUBE',
  GROOMING = 'GROOMING',
  COATING = 'COATING'
}

// Vehicle sizes with tiered pricing
enum VehicleSize {
  SMALL = 'SMALL',       // Sedan / Hatchback
  MEDIUM = 'MEDIUM',     // Compact SUV / Crossover
  LARGE = 'LARGE',       // SUV / Pick-up / Van
  EXTRA_LARGE = 'EXTRA_LARGE'  // Full-size Van / L300
}

// Example service package definition
const fullDetailingService: ServicePackage = {
  id: 'grooming-full',
  category: ServiceCategory.GROOMING,
  name: 'Full Detailing',
  description: 'Complete interior and exterior restoration package.',
  durationHours: 6,
  prices: {
    [VehicleSize.SMALL]: 5500,
    [VehicleSize.MEDIUM]: 7300,
    [VehicleSize.LARGE]: 8800,
    [VehicleSize.EXTRA_LARGE]: 9500,
  }
};
```

--------------------------------

### Define Booking Data Structure and Status in TypeScript

Source: https://context7.com/dreiiiiim/wash-and-go-se2/llms.txt

This snippet defines the TypeScript enum for BookingStatus and provides an example of a complete Booking object. It details the structure for capturing customer information, service details, scheduling, payment, and the booking's lifecycle status.

```typescript
import { Booking, BookingStatus, VehicleSize, FuelType } from './types';

// Booking status workflow
enum BookingStatus {
  PENDING = 'PENDING',     // Awaiting payment verification
  CONFIRMED = 'CONFIRMED', // Payment verified, appointment confirmed
  CANCELLED = 'CANCELLED', // Booking rejected or cancelled
  COMPLETED = 'COMPLETED'  // Service completed
}

// Complete booking object example
const newBooking: Booking = {
  id: 'BK-170752',
  customerName: 'Juan Dela Cruz',
  customerPhone: '09170001234',
  serviceId: 'grooming-full',
  serviceName: 'Full Detailing',
  vehicleSize: VehicleSize.MEDIUM,
  fuelType: FuelType.GAS,  // Only required for LUBE services
  date: '2025-02-15',      // YYYY-MM-DD format
  timeSlot: '08:00 AM',
  totalPrice: 7300,
  downPaymentAmount: 2190, // 30% of total price
  status: BookingStatus.PENDING,
  paymentProofUrl: 'blob:http://localhost/proof.png',
  createdAt: Date.now()
};
```

--------------------------------

### BookingWizard Component for Managing 4-Step Booking Process (React)

Source: https://context7.com/dreiiiiim/wash-and-go-se2/llms.txt

The BookingWizard component orchestrates a multi-step booking process, including service selection, vehicle details, scheduling, and payment. It manages the state for each step and handles the final submission of booking data. Dependencies include React and custom type definitions.

```tsx
import React, { useState } from 'react';
import { Booking, ServicePackage, VehicleSize, FuelType } from './types';

interface BookingWizardProps {
  onSubmit: (booking: Booking) => void;
}

function BookingWizard({ onSubmit }: BookingWizardProps) {
  const [step, setStep] = useState<1 | 2 | 3 | 4>(1);
  const [selectedService, setSelectedService] = useState<ServicePackage | null>(null);
  const [vehicleSize, setVehicleSize] = useState<VehicleSize | null>(null);
  const [fuelType, setFuelType] = useState<FuelType | null>(null);
  const [date, setDate] = useState<string>('');
  const [timeSlot, setTimeSlot] = useState<string>('');

  const handleServiceSelect = (service: ServicePackage) => {
    setSelectedService(service);
    setStep(2);
  };

  const handleVehicleSelect = (size: VehicleSize, fuel?: FuelType) => {
    setVehicleSize(size);
    if (fuel) setFuelType(fuel);
    setStep(3);
  };

  const handleScheduleSelect = (dateStr: string, timeStr: string) => {
    setDate(dateStr);
    setTimeSlot(timeStr);
    setStep(4);
  };

  const handleFinalSubmit = (customerDetails: { name: string; phone: string; proof: string }) => {
    if (!selectedService || !vehicleSize) return;

    const price = selectedService.prices[vehicleSize];
    const newBooking: Booking = {
      id: `BK-${Math.floor(Math.random() * 1000000)}`,
      customerName: customerDetails.name,
      customerPhone: customerDetails.phone,
      serviceId: selectedService.id,
      serviceName: selectedService.name,
      vehicleSize: vehicleSize,
      fuelType: fuelType || undefined,
      date: date,
      timeSlot: timeSlot,
      totalPrice: price,
      downPaymentAmount: price * 0.30,
      status: 'PENDING' as any,
      paymentProofUrl: customerDetails.proof,
      createdAt: Date.now()
    };

    onSubmit(newBooking);
  };

  return (
    // Render step components based on current step
    // Step 1: ServiceSelection, Step 2: VehicleSelection
    // Step 3: ScheduleSelection, Step 4: PaymentForm
  );
}

```

--------------------------------

### React App Component for State Management

Source: https://context7.com/dreiiiiim/wash-and-go-se2/llms.txt

This React component serves as the main entry point for the Wash & Go application. It manages the application's state, including the current view (client, admin, etc.) and a list of bookings. It defines functions to handle new bookings and update booking statuses, and renders different components based on the current view. Dependencies include React and a local 'Booking' type definition.

```tsx
import React, { useState } from 'react';
import { Booking } from './types';

// Initial mock data
const INITIAL_BOOKINGS: Booking[] = [
  {
    id: 'BK-170752',
    customerName: 'Juan Dela Cruz',
    customerPhone: '09170001234',
    serviceId: 'grooming-full',
    serviceName: 'Full Detailing',
    vehicleSize: 'MEDIUM' as any,
    date: '2025-02-15',
    timeSlot: '08:00 AM',
    totalPrice: 7300,
    downPaymentAmount: 2190,
    status: 'CONFIRMED' as any,
    createdAt: Date.now()
  }
];

function App() {
  const [view, setView] = useState<'CLIENT' | 'ADMIN' | 'SERVICES' | 'STATUS'>('CLIENT');
  const [bookings, setBookings] = useState<Booking[]>(INITIAL_BOOKINGS);

  const handleNewBooking = (booking: Booking) => {
    setBookings(prev => [booking, ...prev]);
    alert("Booking Submitted Successfully! Please wait for confirmation.");
    setView('CLIENT');
  };

  const handleUpdateStatus = (id: string, status: any) => {
    setBookings(prev => prev.map(b => b.id === id ? { ...b, status } : b));
  };

  return (
    <div>
      <Navbar currentView={view} onViewChange={setView} />

      {view === 'CLIENT' && <BookingWizard onSubmit={handleNewBooking} />}
      {view === 'SERVICES' && <ServicesAndRates />}
      {view === 'STATUS' && <CheckStatus bookings={bookings} />}
      {view === 'ADMIN' && <AdminDashboard bookings={bookings} onUpdateStatus={handleUpdateStatus} />}
    </div>
  );
}

```

--------------------------------

### Admin Dashboard for Booking Management (React)

Source: https://context7.com/dreiiiiim/wash-and-go-se2/llms.txt

The AdminDashboard component allows staff to view, filter, and update the status of bookings. It displays booking details in a table and provides buttons for status changes. Dependencies include React and custom types for Booking and BookingStatus.

```tsx
import React, { useState } from 'react';
import { Booking, BookingStatus } from './types';

interface AdminDashboardProps {
  bookings: Booking[];
  onUpdateStatus: (id: string, status: BookingStatus) => void;
}

function AdminDashboard({ bookings, onUpdateStatus }: AdminDashboardProps) {
  const [filter, setFilter] = useState<BookingStatus | 'ALL'>('ALL');
  const filteredBookings = bookings.filter(b => filter === 'ALL' || b.status === filter);

  const getStatusColor = (status: BookingStatus) => {
    switch (status) {
      case BookingStatus.PENDING: return 'bg-yellow-100 text-yellow-800';
      case BookingStatus.CONFIRMED: return 'bg-green-100 text-green-800';
      case BookingStatus.CANCELLED: return 'bg-red-100 text-red-800';
      case BookingStatus.COMPLETED: return 'bg-gray-100 text-gray-800';
    }
  };

  return (
    <div>
      {/* Filter buttons */}
      {['ALL', 'PENDING', 'CONFIRMED', 'CANCELLED'].map((s) => (
        <button key={s} onClick={() => setFilter(s as any)}>{s}</button>
      ))}

      {/* Bookings table */}
      <table>
        <thead>
          <tr>
            <th>Booking ID</th>
            <th>Customer</th>
            <th>Service Info</th>
            <th>Schedule</th>
            <th>Payment</th>
            <th>Status</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {filteredBookings.map((b) => (
            <tr key={b.id}>
              <td>{b.id}</td>
              <td>{b.customerName}<br />{b.customerPhone}</td>
              <td>{b.vehicleSize} - {b.serviceName}</td>
              <td>{b.date}<br />{b.timeSlot}</td>
              <td>
                DP: ₱{b.downPaymentAmount.toLocaleString()}<br />
                Total: ₱{b.totalPrice.toLocaleString()}
                {b.paymentProofUrl && <a href={b.paymentProofUrl}>View Proof</a>}
              </td>
              <td><span className={getStatusColor(b.status)}>{b.status}</span></td>
              <td>
                {b.status === BookingStatus.PENDING && (
                  <>
                    <button onClick={() => onUpdateStatus(b.id, BookingStatus.CONFIRMED)}>Confirm</button>
                    <button onClick={() => onUpdateStatus(b.id, BookingStatus.CANCELLED)}>Reject</button>
                  </>
                )}
                {b.status === BookingStatus.CONFIRMED && (
                  <button onClick={() => onUpdateStatus(b.id, BookingStatus.COMPLETED)}>Mark Done</button>
                )}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

```

--------------------------------

### Schedule Selection Component (React/TypeScript)

Source: https://context7.com/dreiiiiim/wash-and-go-se2/llms.txt

Allows users to select a date and time slot for a service, with a mock availability check. It uses 'date-fns' for date formatting and manipulation. The component calls an 'onSelect' callback with the chosen date and time.

```tsx
import React, { useState } from 'react';
import { TIME_SLOTS } from './constants';
import { format, addDays, startOfToday } from 'date-fns';

// Available time slots
const TIME_SLOTS = [
  "08:00 AM", "09:00 AM", "10:00 AM", "11:00 AM",
  "01:00 PM", "02:00 PM", "03:00 PM", "04:00 PM", "05:00 PM"
];

interface ScheduleSelectionProps {
  onSelect: (date: string, time: string) => void;
  onBack: () => void;
  serviceDuration: number;
}

function ScheduleSelection({ onSelect, onBack, serviceDuration }: ScheduleSelectionProps) {
  const today = startOfToday();
  const [selectedDate, setSelectedDate] = useState<string>(format(addDays(today, 1), 'yyyy-MM-dd'));
  const [selectedTime, setSelectedTime] = useState<string>('');

  // Mock availability check (would be backend call in production)
  const getSlotAvailability = (time: string): boolean => {
    const hash = (selectedDate + time).split('').reduce((a, b) => a + b.charCodeAt(0), 0);
    return hash % 5 !== 0; // 80% availability simulation
  };

  const handleContinue = () => {
    if (selectedDate && selectedTime) {
      onSelect(selectedDate, selectedTime);
    }
  };

  return (
    <div>
      <input
        type="date"
        min={format(today, 'yyyy-MM-dd')}
        value={selectedDate}
        onChange={(e) => {
          setSelectedDate(e.target.value);
          setSelectedTime(''); // Reset time when date changes
        }}
      />

      <div className="grid grid-cols-3 gap-3">
        {TIME_SLOTS.map((time) => {
          const isAvailable = getSlotAvailability(time);
          return (
            <button
              key={time}
              disabled={!isAvailable}
              onClick={() => setSelectedTime(time)}
            >
              {time}
              {!isAvailable && <span>Fully Booked</span>}
            </button>
          );
        })}
      </div>

      <p>Service duration: approx {serviceDuration} hours</p>
      <button onClick={onBack}>BACK</button>
      <button onClick={handleContinue} disabled={!selectedDate || !selectedTime}>PROCEED</button>
    </div>
  );
}

```

--------------------------------

### React PaymentForm Component for Booking and Payment

Source: https://context7.com/dreiiiiim/wash-and-go-se2/llms.txt

This React component, written in TypeScript, manages the user interface for collecting customer details, displaying booking summaries including down payment calculations, and handling payment proof uploads. It utilizes React's useState hook for managing form state and props for receiving service details and callback functions. Dependencies include React and custom type definitions for service packages and vehicle sizes.

```tsx
import React, { useState } from 'react';
import { ServicePackage, VehicleSize, FuelType } from './types';
import { DOWN_PAYMENT_PERCENTAGE, PAYMENT_METHODS } from './constants';

const DOWN_PAYMENT_PERCENTAGE = 0.30; // 30%

const PAYMENT_METHODS = [
  { id: 'gcash', name: 'GCash', number: '0917-123-4567', accountName: 'Wash & Go Baliwag' },
  { id: 'bdo', name: 'BDO Bank Transfer', number: '0012-3456-7890', accountName: 'Wash & Go Services Inc.' }
];

interface PaymentFormProps {
  service: ServicePackage;
  vehicleSize: VehicleSize;
  fuelType: FuelType | null;
  date: string;
  timeSlot: string;
  onBack: () => void;
  onSubmit: (details: { name: string; phone: string; proof: string }) => void;
}

function PaymentForm({ service, vehicleSize, fuelType, date, timeSlot, onBack, onSubmit }: PaymentFormProps) {
  const [name, setName] = useState('');
  const [phone, setPhone] = useState('');
  const [method, setMethod] = useState(PAYMENT_METHODS[0].id);
  const [proofFile, setProofFile] = useState<File | null>(null);

  const totalPrice = service.prices[vehicleSize];
  const downPayment = totalPrice * DOWN_PAYMENT_PERCENTAGE;
  const selectedMethodDetails = PAYMENT_METHODS.find(m => m.id === method);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!name || !phone || !proofFile) return;
    const fakeUrl = URL.createObjectURL(proofFile);
    onSubmit({ name, phone, proof: fakeUrl });
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* Booking Summary */}
      <div>
        <p>Service: {service.name}</p>
        <p>Vehicle: {vehicleSize} {fuelType ? `(${fuelType})` : ''}</p>
        <p>Schedule: {date} {timeSlot}</p>
        <p>Total Price: ₱{totalPrice.toLocaleString()}</p>
        <p>Required Down Payment (30%): ₱{downPayment.toLocaleString()}</p>
      </div>

      {/* Customer Details */}
      <input type="text" placeholder="Full Name" value={name} onChange={e => setName(e.target.value)} required />
      <input type="tel" placeholder="Phone Number" value={phone} onChange={e => setPhone(e.target.value)} required />

      {/* Payment Method Selection */}
      {PAYMENT_METHODS.map(m => (
        <button type="button" key={m.id} onClick={() => setMethod(m.id)}>{m.name}</button>
      ))}

      {selectedMethodDetails && (
        <div>
          <p>Send ₱{downPayment.toLocaleString()} to:</p>
          <p>{selectedMethodDetails.number}</p>
          <p>{selectedMethodDetails.accountName}</p>
        </div>
      )}

      {/* Payment Proof Upload */}
      <input type="file" accept="image/*" onChange={(e) => setProofFile(e.target.files?.[0] || null)} />

      <button type="button" onClick={onBack}>BACK</button>
      <button type="submit" disabled={!name || !phone || !proofFile}>COMPLETE BOOKING</button>
    </form>
  );
}

```

--------------------------------

### ServiceSelection Component for Displaying and Selecting Services (React)

Source: https://context7.com/dreiiiiim/wash-and-go-se2/llms.txt

The ServiceSelection component presents service categories and allows users to navigate through them to view and select specific service packages. It manages the active category state and filters services based on the selected category. Dependencies include React and constants/types defined elsewhere.

```tsx
import React, { useState } from 'react';
import { SERVICES, SERVICE_ICONS } from './constants';
import { ServicePackage, ServiceCategory } from './types';

interface ServiceSelectionProps {
  onSelect: (service: ServicePackage) => void;
}

function ServiceSelection({ onSelect }: ServiceSelectionProps) {
  const [activeCategory, setActiveCategory] = useState<ServiceCategory | null>(null);

  // Show main categories: LUBE, GROOMING, COATING
  if (!activeCategory) {
    return (
      <div className="grid grid-cols-3 gap-6">
        {[ServiceCategory.LUBE, ServiceCategory.GROOMING, ServiceCategory.COATING].map((cat) => (
          <button key={cat} onClick={() => setActiveCategory(cat)}>
            {cat === 'LUBE' ? 'LUBE & GO' : cat === 'GROOMING' ? 'AUTO GROOMING' : 'CERAMIC COATING'}
          </button>
        ))}
      </div>
    );
  }

  // Show sub-services for selected category
  const subServices = SERVICES.filter(s => s.category === activeCategory);
  return (
    <div className="grid grid-cols-3 gap-6">
      {subServices.map((service) => (
        <div key={service.id}>
          <h3>{service.name}</h3>
          <p>{service.description}</p>
          <p>Est. Duration: {service.durationHours} hrs</p>
          <p>Starts at ₱{Object.values(service.prices)[0].toLocaleString()}</p>
          <button onClick={() => onSelect(service)}>SELECT PACKAGE</button>
        </div>
      ))}
    </div>
  );
}

```

--------------------------------

### Vehicle Selection Component (React/TypeScript)

Source: https://context7.com/dreiiiiim/wash-and-go-se2/llms.txt

Handles user selection of vehicle size and, for LUBE services, fuel type. It manages local state for selections and calls an 'onSelect' callback with the chosen options. Dependencies include React and local type definitions.

```tsx
import React, { useState } from 'react';
import { VehicleSize, FuelType, ServiceCategory } from './types';

interface VehicleSelectionProps {
  serviceCategory: ServiceCategory;
  onSelect: (size: VehicleSize, fuel?: FuelType) => void;
  onBack: () => void;
}

function VehicleSelection({ serviceCategory, onSelect, onBack }: VehicleSelectionProps) {
  const [selectedSize, setSelectedSize] = useState<VehicleSize | null>(null);
  const [selectedFuel, setSelectedFuel] = useState<FuelType | null>(null);

  const sizes = [
    { id: VehicleSize.SMALL, label: 'SMALL', desc: 'Sedan / Hatchback' },
    { id: VehicleSize.MEDIUM, label: 'MEDIUM', desc: 'Compact SUV / Crossover' },
    { id: VehicleSize.LARGE, label: 'LARGE', desc: 'SUV / Pick-up / Van' },
    { id: VehicleSize.EXTRA_LARGE, label: 'EXTRA LARGE', desc: 'Full-size Van / L300' },
  ];

  const handleContinue = () => {
    if (!selectedSize) return;
    // Fuel type required only for LUBE services
    if (serviceCategory === ServiceCategory.LUBE && !selectedFuel) {
      alert("Please select a fuel type.");
      return;
    }
    onSelect(selectedSize, selectedFuel || undefined);
  };

  return (
    <div>
      {sizes.map((s) => (
        <button key={s.id} onClick={() => setSelectedSize(s.id)}>
          {s.label} - {s.desc}
        </button>
      ))}

      {/* Show fuel type selection for Lube services */}
      {serviceCategory === ServiceCategory.LUBE && (
        <div>
          <button onClick={() => setSelectedFuel(FuelType.GAS)}>GAS</button>
          <button onClick={() => setSelectedFuel(FuelType.DIESEL)}>DIESEL</button>
        </div>
      )}

      <button onClick={onBack}>BACK</button>
      <button onClick={handleContinue} disabled={!selectedSize}>PROCEED</button>
    </div>
  );
}

```

--------------------------------

### Customer Booking Status Checker (React)

Source: https://context7.com/dreiiiiim/wash-and-go-se2/llms.txt

The CheckStatus component enables customers to track their booking status by entering a reference ID. It searches through a list of bookings and displays the relevant information or a 'not found' message. It requires React and booking data.

```tsx
import React, { useState } from 'react';
import { Booking, BookingStatus } from './types';

interface CheckStatusProps {
  bookings: Booking[];
}

function CheckStatus({ bookings }: CheckStatusProps) {
  const [searchId, setSearchId] = useState('');
  const [result, setResult] = useState<Booking | null>(null);
  const [hasSearched, setHasSearched] = useState(false);

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    if (!searchId.trim()) return;

    const found = bookings.find(b => b.id.toLowerCase() === searchId.trim().toLowerCase());
    setResult(found || null);
    setHasSearched(true);
  };

  return (
    <div>
      <form onSubmit={handleSearch}>
        <input
          type="text"
          placeholder="e.g. BK-170752"
          value={searchId}
          onChange={(e) => setSearchId(e.target.value)}
        />
        <button type="submit">CHECK STATUS</button>
      </form>

      {hasSearched && !result && (
        <div>Booking Not Found. Please check the Reference ID.</div>
      )}

      {result && (
        <div>
          <p>Reference ID: {result.id}</p>
          <p>Status: {result.status}</p>
          <p>Service: {result.serviceName}</p>
          <p>Vehicle: {result.vehicleSize} {result.fuelType ? `• ${result.fuelType}` : ''}</p>
          <p>Schedule: {result.date} {result.timeSlot}</p>
          <p>Customer: {result.customerName} ({result.customerPhone})</p>
          <p>Booked on: {new Date(result.createdAt).toLocaleDateString()}</p>
        </div>
      )}
    </div>
  );
}

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.