Inicjalna wersja systemu zarządzania rezerwacjami (RMS)

SPA zbudowane w React 19 + Vite 8 z pełnym zestawem funkcjonalności:
autentykacja z 2FA, kreator rezerwacji, panel admina, analityka,
GraphQL (Apollo Client + SchemaLink), React Query, Storybook,
testy jednostkowe (Vitest + RTL) i e2e (Playwright).

src/stories/StatusBadge.stories.jsx

@@ -0,0 +1,63 @@
+import StatusBadge from '../components/StatusBadge';
+
+export default {
+  title: 'Components/StatusBadge',
+  component: StatusBadge,
+  tags: ['autodocs'],
+  argTypes: {
+    status: {
+      description: 'Reservation status value',
+      control: { type: 'select' },
+      options: ['confirmed', 'pending', 'cancelled'],
+    },
+    size: {
+      description: 'Badge size variant',
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
+    },
+  },
+};
+
+export const Confirmed = {
+  args: { status: 'confirmed', size: 'md' },
+};
+
+export const Pending = {
+  args: { status: 'pending', size: 'md' },
+};
+
+export const Cancelled = {
+  args: { status: 'cancelled', size: 'md' },
+};
+
+export const SizeSmall = {
+  args: { status: 'confirmed', size: 'sm' },
+  name: 'Size — Small',
+};
+
+export const SizeLarge = {
+  args: { status: 'pending', size: 'lg' },
+  name: 'Size — Large',
+};
+
+export const AllStatuses = {
+  name: 'All statuses',
+  render: () => (
+    <div style={{ display: 'flex', gap: '12px', alignItems: 'center', flexWrap: 'wrap' }}>
+      <StatusBadge status="confirmed" />
+      <StatusBadge status="pending" />
+      <StatusBadge status="cancelled" />
+    </div>
+  ),
+};
+
+export const AllSizes = {
+  name: 'All sizes',
+  render: () => (
+    <div style={{ display: 'flex', gap: '12px', alignItems: 'center', flexWrap: 'wrap' }}>
+      <StatusBadge status="confirmed" size="sm" />
+      <StatusBadge status="confirmed" size="md" />
+      <StatusBadge status="confirmed" size="lg" />
+    </div>
+  ),
+};