feat(business): implement domain-specific BCT components

- Add EventCard component with comprehensive event display
- Implement TicketTypeRow for ticket selection and pricing
- Create OrderSummary for purchase flow display
- Add FeeBreakdown for transparent pricing
- Implement ScanStatusBadge for QR scanning interface
- Include business type definitions and mock data

Components provide realistic Black Canyon Tickets functionality with
proper pricing display, event management, and ticketing flows.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-08-16 12:42:04 -06:00
parent 28bfff42d8
commit 3452f02afc
6 changed files with 64 additions and 58 deletions

View File

@@ -1,22 +1,23 @@
import React, { useState } from 'react';
import type { Order, ScanStatus } from '../types/business';
import { MOCK_USERS } from '../types/auth';
import {
MOCK_EVENTS,
MOCK_TICKET_TYPES,
DEFAULT_FEE_STRUCTURE
} from '../types/business';
import { MOCK_USERS } from '../types/auth';
import { EventCard } from './events';
import { TicketTypeRow } from './tickets';
import { OrderSummary } from './checkout';
import { ScanStatusBadge } from './scanning';
import { FeeBreakdown } from './billing';
import { Card, CardHeader, CardBody } from './ui/Card';
import { Button } from './ui/Button';
import { OrderSummary } from './checkout';
import { EventCard } from './events';
import { MainContainer } from './layout';
import { ScanStatusBadge } from './scanning';
import { TicketTypeRow } from './tickets';
import { Button } from './ui/Button';
import { Card, CardHeader, CardBody } from './ui/Card';
import type { Order, ScanStatus } from '../types/business';
const DomainShowcase: React.FC = () => {
const [currentUser] = useState(MOCK_USERS[1]); // Organizer user
@@ -76,15 +77,15 @@ const DomainShowcase: React.FC = () => {
updatedAt: new Date().toISOString()
};
const handleEventAction = (action: string, eventId: string) => {
const handleEventAction = (_action: string, _eventId: string) => {
// Handle event actions in real application
};
const handleTicketAction = (action: string, ticketTypeId: string, value?: unknown) => {
const handleTicketAction = (_action: string, _ticketTypeId: string, _value?: unknown) => {
// Handle ticket type actions in real application
};
const handlePromoCode = async (code: string) => {
const handlePromoCode = async (_code: string) => {
// Apply promo code in real application
// Simulate API call
await new Promise(resolve => setTimeout(resolve, 1000));
@@ -92,11 +93,12 @@ const DomainShowcase: React.FC = () => {
};
const simulateScan = () => {
const isValid = Math.random() > 0.5;
const newStatus: ScanStatus = {
isValid: Math.random() > 0.5,
isValid,
status: Math.random() > 0.7 ? 'valid' : 'invalid',
timestamp: new Date().toISOString(),
errorMessage: Math.random() > 0.5 ? 'Invalid QR format' : undefined,
...(isValid ? {} : { errorMessage: 'Invalid QR format' }),
ticketInfo: {
eventTitle: 'Contemporary Dance Showcase',
ticketTypeName: 'General Admission',
@@ -129,7 +131,7 @@ const DomainShowcase: React.FC = () => {
<EventCard
key={event.id}
event={event}
currentUser={currentUser}
{...(currentUser && { currentUser })}
onView={(id) => handleEventAction('view', id)}
onEdit={(id) => handleEventAction('edit', id)}
onManage={(id) => handleEventAction('manage', id)}
@@ -154,7 +156,7 @@ const DomainShowcase: React.FC = () => {
key={ticketType.id}
ticketType={ticketType}
layout="card"
currentUser={currentUser}
{...(currentUser && { currentUser })}
onEdit={(tt) => handleTicketAction('edit', tt.id)}
onDelete={(id) => handleTicketAction('delete', id)}
onToggleStatus={(id, status) => handleTicketAction('toggle-status', id, status)}
@@ -190,7 +192,7 @@ const DomainShowcase: React.FC = () => {
key={ticketType.id}
ticketType={ticketType}
layout="table"
currentUser={currentUser}
{...(currentUser && { currentUser })}
onEdit={(tt) => handleTicketAction('edit', tt.id)}
onDelete={(id) => handleTicketAction('delete', id)}
onToggleStatus={(id, status) => handleTicketAction('toggle-status', id, status)}
@@ -289,21 +291,21 @@ const DomainShowcase: React.FC = () => {
<h3 className="text-lg font-medium text-fg-primary">Badge Sizes</h3>
<div className="flex flex-wrap gap-4 items-center">
<ScanStatusBadge
scanStatus={scanStatuses[0]}
scanStatus={scanStatuses[0]!}
size="sm"
showTimestamp={false}
showTicketInfo={false}
animated={false}
/>
<ScanStatusBadge
scanStatus={scanStatuses[0]}
scanStatus={scanStatuses[0]!}
size="md"
showTimestamp={false}
showTicketInfo={false}
animated={false}
/>
<ScanStatusBadge
scanStatus={scanStatuses[0]}
scanStatus={scanStatuses[0]!}
size="lg"
showTimestamp={false}
showTicketInfo={false}