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>

reactrebuild0825/src/components/DomainShowcase.tsx

@@ -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 { OrderSummary } from './checkout';
-import { Button } from './ui/Button';
+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}

reactrebuild0825/src/components/billing/FeeBreakdown.tsx

@@ -1,8 +1,11 @@
 import React, { useState } from 'react';
-import { FeeStructure, Order, DEFAULT_FEE_STRUCTURE } from '../../types/business';
+
-import { Card, CardHeader, CardBody } from '../ui/Card';
+import { DEFAULT_FEE_STRUCTURE } from '../../types/business';
-import { Button } from '../ui/Button';
 import { Badge } from '../ui/Badge';
+import { Button } from '../ui/Button';
+import { Card, CardHeader, CardBody } from '../ui/Card';
+
+import type { FeeStructure, Order} from '../../types/business';
 
 export interface FeeBreakdownProps {
   order: Order;
@@ -37,7 +40,7 @@ const Tooltip: React.FC<TooltipProps> = ({ content, children }) => {
       {isVisible && (
         <div className="absolute z-10 bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 bg-bg-primary border border-border-subtle rounded-lg shadow-lg text-sm text-fg-secondary max-w-xs">
           {content}
-          <div className="absolute top-full left-1/2 transform -translate-x-1/2 border-4 border-transparent border-t-bg-primary"></div>
+          <div className="absolute top-full left-1/2 transform -translate-x-1/2 border-4 border-transparent border-t-bg-primary" />
         </div>
       )}
     </div>
@@ -56,21 +59,17 @@ const FeeBreakdown: React.FC<FeeBreakdownProps> = ({
   const [isExpanded, setIsExpanded] = useState(layout === 'detailed');
 
   // Format currency helper
-  const formatCurrency = (amountInCents: number) => {
+  const formatCurrency = (amountInCents: number) => new Intl.NumberFormat('en-US', {
-    return new Intl.NumberFormat('en-US', {
       style: 'currency',
       currency: 'USD'
     }).format(amountInCents / 100);
-  };
 
   // Format percentage helper
-  const formatPercentage = (rate: number) => {
+  const formatPercentage = (rate: number) => `${(rate * 100).toFixed(2)}%`;
-    return `${(rate * 100).toFixed(2)}%`;
-  };
 
   // Calculate fee breakdown details
   const calculateFeeDetails = () => {
-    const subtotal = order.subtotal;
+    const {subtotal} = order;
     
     // Platform fee breakdown
     const platformFeeVariable = Math.round(subtotal * feeStructure.platformFeeRate);
@@ -115,13 +114,11 @@ const FeeBreakdown: React.FC<FeeBreakdownProps> = ({
   const feeDetails = calculateFeeDetails();
 
   // Compliance information
-  const getComplianceInfo = () => {
+  const getComplianceInfo = () => ({
-    return {
       platformFee: "Service fee for platform usage, event management tools, and customer support.",
       processingFee: "Credit card processing fee charged by payment processor for secure transaction handling.",
       tax: "Local sales tax as required by applicable tax authorities. Tax-exempt organizations may qualify for reduced rates."
-    };
+    });
-  };
 
   const compliance = getComplianceInfo();
 
@@ -275,12 +272,12 @@ const FeeBreakdown: React.FC<FeeBreakdownProps> = ({
               <td className="border border-border-subtle px-4 py-2 font-semibold text-fg-primary">
                 Total Fees & Taxes
               </td>
-              <td className="border border-border-subtle px-4 py-2"></td>
+              <td className="border border-border-subtle px-4 py-2" />
               <td className="border border-border-subtle px-4 py-2 text-right font-bold text-accent-primary">
                 {formatCurrency(order.platformFee + order.processingFee + order.tax)}
               </td>
               {showCalculations && (
-                <td className="border border-border-subtle px-4 py-2"></td>
+                <td className="border border-border-subtle px-4 py-2" />
               )}
             </tr>
           </tbody>

reactrebuild0825/src/components/checkout/OrderSummary.tsx

@@ -1,10 +1,13 @@
 import React, { useState } from 'react';
-import { Order, FeeStructure, PromoCode, DEFAULT_FEE_STRUCTURE } from '../../types/business';
+
-import { Card, CardHeader, CardBody, CardFooter } from '../ui/Card';
+import { DEFAULT_FEE_STRUCTURE } from '../../types/business';
-import { Button } from '../ui/Button';
-import { Input } from '../ui/Input';
-import { Badge } from '../ui/Badge';
 import { Alert } from '../ui/Alert';
+import { Badge } from '../ui/Badge';
+import { Button } from '../ui/Button';
+import { Card, CardHeader, CardBody, CardFooter } from '../ui/Card';
+import { Input } from '../ui/Input';
+
+import type { Order, FeeStructure, PromoCode} from '../../types/business';
 
 export interface OrderSummaryProps {
   order: Order;
@@ -31,16 +34,14 @@ const OrderSummary: React.FC<OrderSummaryProps> = ({
   const [showFeeBreakdown, setShowFeeBreakdown] = useState(false);
 
   // Format currency helper
-  const formatCurrency = (amountInCents: number) => {
+  const formatCurrency = (amountInCents: number) => new Intl.NumberFormat('en-US', {
-    return new Intl.NumberFormat('en-US', {
       style: 'currency',
       currency: 'USD'
     }).format(amountInCents / 100);
-  };
 
   // Handle promo code application
   const handleApplyPromo = async () => {
-    if (!promoCodeInput.trim() || !onPromoCodeApply) return;
+    if (!promoCodeInput.trim() || !onPromoCodeApply) {return;}
 
     setIsApplyingPromo(true);
     setPromoError(null);

reactrebuild0825/src/components/events/EventCard.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
-import { Event, EventStats } from '../../types/business';
+
-import { User } from '../../types/auth';
-import { Card, CardBody, CardFooter } from '../ui/Card';
-import { Button } from '../ui/Button';
 import { Badge } from '../ui/Badge';
+import { Button } from '../ui/Button';
+import { Card, CardBody, CardFooter } from '../ui/Card';
+
+import type { User } from '../../types/auth';
+import type { Event, EventStats } from '../../types/business';
 
 export interface EventCardProps {
   event: Event;

reactrebuild0825/src/components/scanning/ScanStatusBadge.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { ScanStatus } from '../../types/business';
+
+import type { ScanStatus } from '../../types/business';
 
 export interface ScanStatusBadgeProps {
   scanStatus: ScanStatus;
@@ -30,6 +31,7 @@ const ScanStatusBadge: React.FC<ScanStatusBadgeProps> = ({
       const timer = setTimeout(() => setIsAnimating(false), 600);
       return () => clearTimeout(timer);
     }
+    return undefined;
   }, [scanStatus, animated]);
 
   // Handle accessibility announcements
@@ -57,7 +59,7 @@ const ScanStatusBadge: React.FC<ScanStatusBadgeProps> = ({
 
   // Format timestamp
   const formatTimestamp = (timestamp?: string) => {
-    if (!timestamp) return null;
+    if (!timestamp) {return null;}
     
     const date = new Date(timestamp);
     const now = new Date();
@@ -66,10 +68,10 @@ const ScanStatusBadge: React.FC<ScanStatusBadgeProps> = ({
     const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
     const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
 
-    if (diffMins < 1) return 'Just now';
+    if (diffMins < 1) {return 'Just now';}
-    if (diffMins < 60) return `${diffMins}m ago`;
+    if (diffMins < 60) {return `${diffMins}m ago`;}
-    if (diffHours < 24) return `${diffHours}h ago`;
+    if (diffHours < 24) {return `${diffHours}h ago`;}
-    if (diffDays < 7) return `${diffDays}d ago`;
+    if (diffDays < 7) {return `${diffDays}d ago`;}
     
     return date.toLocaleDateString('en-US', {
       month: 'short',

reactrebuild0825/src/components/tickets/TicketTypeRow.tsx

@@ -1,10 +1,12 @@
 import React, { useState } from 'react';
-import { TicketType, TicketTypeStats } from '../../types/business';
+
-import { User } from '../../types/auth';
-import { Button } from '../ui/Button';
 import { Badge } from '../ui/Badge';
+import { Button } from '../ui/Button';
 import { Input } from '../ui/Input';
 
+import type { User } from '../../types/auth';
+import type { TicketType, TicketTypeStats } from '../../types/business';
+
 export interface TicketTypeRowProps {
   ticketType: TicketType;
   stats?: TicketTypeStats;