React Seating Arrangement

A powerful React library for creating and managing library seat layouts with smooth, interactive design tools. Built with D3.js, Interact.js, and Redux Toolkit.

Features

Designer Mode (Admin)

• Seat Placement: Click to place seats (circular or square)
• Drag & Drop: Smooth dragging of seats with D3.js
• Zoom & Pan: Mouse wheel zoom, pan with drag
• Export Layout: Save layouts as JSON
• Toolbar: Quick access to tools (Select, Seat, Pen, Pan)
• Keyboard Shortcuts: V (Select), S (Seat), P (Pen), H (Pan)

User Mode (Public)

• Seat Selection: Click available seats to select
• Visual Feedback: Color-coded seat status
• Interactive Workspace: Zoom and pan support
• Event Callbacks: Handle seat clicks and selections

Installation

npm install

Usage

Basic Example

import LibrarySeatToolkit from './components'

function App() {
  return (
    <LibrarySeatToolkit
      mode="designer"
      events={{
        onSeatClick: (seat) => {
          console.log("Seat clicked:", seat)
        },
        onExport: (data) => {
          console.log("Layout data:", data)
        }
      }}
    />
  )
}

Designer Mode

<LibrarySeatToolkit
  mode="designer"
  events={{
    onExport: async (data) => {
      // Save to backend or download
      await fetch('/api/layouts', {
        method: 'POST',
        body: JSON.stringify(data)
      })
    }
  }}
  options={{
    exportButtonText: "Save Layout"
  }}
/>

User Mode

<LibrarySeatToolkit
  mode="user"
  data={layoutData}
  events={{
    onSeatClick: (seat) => {
      // Handle seat booking
      bookSeat(seat.id)
    },
    onSeatSelectionChange: (seats) => {
      // Handle multiple seat selection
      console.log("Selected seats:", seats)
    }
  }}
  options={{
    maxSeatSelectionCount: 5
  }}
/>

Seat Status

• Available: Green - Seat is available for booking
• Occupied: Red - Seat is currently in use
• Reserved: Yellow - Seat is reserved
• Maintenance: Gray - Seat is under maintenance
• Locked: Dark Gray - Seat is locked/unavailable

Keyboard Shortcuts (Designer Mode)

• V - Select tool
• S - Seat tool
• P - Pen tool
• H - Pan tool
• Escape - Clear selection

Technologies

• React 19 - UI framework
• TypeScript - Type safety
• D3.js - Drag, zoom, and pan interactions
• Interact.js - Resizing capabilities
• Redux Toolkit - State management
• Tailwind CSS - Styling
• Vite - Build tool

Project Structure

src/
├── components/
│   ├── designer.tsx       # Designer mode component
│   ├── user.tsx           # User mode component
│   ├── workspace/          # Workspace and seat components
│   ├── toolbar/            # Designer toolbar
│   └── operations/         # Export/import operations
├── store/                   # Redux store and reducers
├── hooks/                   # Custom React hooks
├── types/                   # TypeScript type definitions
├── utils/                   # Utility functions (D3, workspace)
└── constants/               # App constants

Development

# Start dev server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

License

MIT