@licklist/design 0.78.5-dev.33 → 0.78.5-dev.34

package/src/v2/dashboard-analytics/dashboard/Dashboard.scss

@@ -0,0 +1,254 @@
+
+.dashboard {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+  max-width: 100%;
+  padding-bottom: 24px;
+  background-color: var(--surface-primary);
+  overflow: hidden;
+  box-sizing: border-box;
+  transition: all 0.3s ease-in-out;
+
+
+
+  &__metrics-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+    padding: 0 1rem;
+
+    @media (min-width: 768px) {
+      grid-template-columns: repeat(4, 1fr);
+      padding: 0 1rem;
+    }
+  }
+
+  &__filter {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    font-size: 13px;
+    color: var(--surface-primary);
+    font-weight: 500;
+    text-align: right;
+    line-height: 1;
+    max-width: 100%;
+    padding: 1rem 1rem 0 1rem;
+    transition: all 0.3s ease-in-out;
+    @media (min-width: 768px) {
+      max-width: 100%;
+    }
+
+    .select--transitioning {
+      opacity: 0.8;
+      transition: all 0.2s ease-in-out;
+    }
+  }
+
+  &__charts {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 0 1rem;
+
+    @media (min-width: 480px) {
+      gap: 1rem;
+    }
+
+    @media (min-width: 768px) {
+      gap: 1.5rem;
+      padding: 0 1rem;
+    }
+  }
+
+  &__metric-performance-text {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--label-secondary);
+
+    &--mobile {
+      display: block;
+
+      @media (min-width: 768px) {
+        display: none;
+      }
+    }
+
+    &--desktop {
+      display: none;
+
+      @media (min-width: 768px) {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+      }
+    }
+  }
+
+  &__content {
+    display: flex;
+    gap: 0.75rem;
+    align-items: flex-start;
+    padding: 0 1rem;
+    width: 100%;
+    overflow: hidden;
+
+    @media (min-width: 480px) {
+      gap: 1rem;
+    }
+
+    @media (min-width: 768px) {
+      padding: 0 1rem;
+    }
+
+    @media (max-width: 1024px) {
+      flex-direction: column;
+    }
+
+    @media (min-width: 1200px) {
+      gap: 1.5rem;
+    }
+
+    // When only charts section (no sidebar), ensure full width usage
+    &:has(.dashboard__charts-section:only-child) {
+      padding-right: 1rem;
+      
+      @media (min-width: 768px) {
+        padding-right: 1rem;
+      }
+    }
+  }
+
+  // Charts take up remaining space
+  &__charts-section {
+    flex: 1;
+    min-width: 0;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    overflow: hidden;
+    transition: all 0.3s ease-in-out;
+    @media (min-width: 480px) {
+      gap: 1rem;
+    }
+
+    @media (min-width: 768px) {
+      gap: 1rem;
+    }
+
+    @media (min-width: 1200px) {
+      gap: 1rem;
+    }
+
+    &:only-child {
+      padding-right: 0;
+      margin-right: 0;
+    }
+
+    &--transitioning {
+      opacity: 0.8;
+      transform: translateY(2px);
+      
+      .chart {
+        transition: all 0.3s ease-in-out;
+        filter: blur(1px);
+      }
+    }
+
+    // Chart transition states
+    .chart--transitioning {
+      opacity: 0.7;
+      transform: scale(0.98);
+      transition: all 0.3s ease-in-out;
+    }
+  }
+
+  &__sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    flex-shrink: 0;
+    width: auto;
+    min-width: 280px;
+    @media (min-width: 480px) {
+      gap: 1.25rem;
+    }
+
+    @media (min-width: 768px) {
+      gap: 1.5rem;
+    }
+
+    @media (max-width: 1024px) {
+      width: 100%;
+      min-width: 0;
+    }
+
+    @media (min-width: 1440px) {
+      min-width: 320px;
+    }
+  }
+
+  &__venue-section {
+    display: flex;
+    flex-direction: row;
+    gap: 0.75rem;
+    flex-shrink: 0;
+    width: auto;
+
+    @media (min-width: 480px) {
+      gap: 1rem;
+    }
+
+    @media (max-width: 1024px) {
+      width: 100%;
+    }
+
+    @media (min-width: 1200px) {
+      gap: 1.25rem;
+    }
+  }
+  
+  &--charts-focus {
+    .dashboard__content {
+      padding: 0 1rem;
+      
+      @media (min-width: 768px) {
+        padding: 0 1rem;
+      }
+    }
+    
+    .dashboard__charts-section {
+      padding: 0;
+      .chart {
+        padding: 1rem 1rem 1rem 1rem;
+        
+        &[data-full-width="true"] {
+          .chart__container {
+            margin-left: -1rem;
+            margin-right: -1rem;
+            padding-left: 1rem;
+            width: calc(100% + 2rem);
+            
+            @media (max-width: 480px) {
+              padding-left: 0.75rem;
+            }
+          }
+        }
+        
+        @media (max-width: 480px) {
+          padding: 0.75rem 0.75rem 0.75rem 0.75rem;
+        }
+
+        @media (min-width: 768px) {
+          padding: 1.375rem 1rem 1rem 1rem;
+        }
+      }
+    }
+  }
+}

package/src/v2/dashboard-analytics/dashboard/Dashboard.stories.tsx

@@ -0,0 +1,264 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Dashboard } from './Dashboard';
+
+type TimeFilter = 'Today' | 'Yesterday' | 'This Week';
+type DatasetType = 'Bookings For' | 'Bookings Made';
+
+const meta = {
+  title: 'v2/Dashboard Analytics/Dashboard',
+  component: Dashboard,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: [],
+  decorators: [
+    (Story) => (
+      <div style={{ minHeight: '100vh', backgroundColor: '#fff' }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Dashboard>;
+
+export default meta;
+
+const mockMetrics = {
+  totalBookings: {
+    value: '24',
+    change: '+8 vs yesterday',
+    is_positive: true,
+  },
+  revenue: {
+    value: '£1,240.50',
+    change: '+£450 vs yesterday',
+    is_positive: true,
+  },
+  numberOfPeople: {
+    value: '89',
+    change: '+12 vs yesterday',
+    is_positive: true,
+  },
+  busiestTime: {
+    value: '14:00 - 15:00',
+    peopleText: '18 people',
+    bookingText: '6 bookings',
+  },
+  workHours: {
+    company_name: 'Sharksys Soft Play',
+    is_open: true,
+    status: 'Open',
+    message: 'Open until 18:00',
+    opens_at: '09:00'
+  },
+  peopleInVenue: {
+    value: '30',
+    formatted_value: '30',
+    description: 'people currently in venue'
+  }
+};
+
+const mockBookingsData = [
+  { time: '00:00', value: 2, participants: 4 },
+  { time: '01:00', value: 1, participants: 2 },
+  { time: '02:00', value: 0, participants: 0 },
+  { time: '03:00', value: 1, participants: 2 },
+  { time: '04:00', value: 2, participants: 4 },
+  { time: '05:00', value: 3, participants: 6 },
+  { time: '06:00', value: 4, participants: 8 },
+  { time: '07:00', value: 5, participants: 10 },
+  { time: '08:00', value: 6, participants: 12 },
+  { time: '09:00', value: 8, participants: 16 },
+  { time: '10:00', value: 6, participants: 12 },
+  { time: '11:00', value: 7, participants: 14 },
+  { time: '12:00', value: 8, participants: 16 },
+  { time: '13:00', value: 9, participants: 18 },
+  { time: '14:00', value: 6, participants: 12 },
+  { time: '15:00', value: 5, participants: 10 },
+];
+
+const mockRevenueData = [
+  { time: '00:00', value: 25.50 },
+  { time: '01:00', value: 15.75 },
+  { time: '02:00', value: 0 },
+  { time: '03:00', value: 18.25 },
+  { time: '04:00', value: 35.00 },
+  { time: '05:00', value: 42.50 },
+  { time: '06:00', value: 58.75 },
+  { time: '07:00', value: 75.25 },
+  { time: '08:00', value: 92.50 },
+  { time: '09:00', value: 125.75 },
+  { time: '10:00', value: 95.50 },
+  { time: '11:00', value: 110.25 },
+  { time: '12:00', value: 128.00 },
+  { time: '13:00', value: 145.75 },
+  { time: '14:00', value: 98.50 },
+  { time: '15:00', value: 85.25 },
+];
+
+export const Interactive = () => {
+  const [timeFilter, setTimeFilter] = useState<TimeFilter>('Today');
+  const [dataset, setDataset] = useState<DatasetType>('Bookings For');
+
+  const getDataForFilter = (filter: TimeFilter) => {
+    switch (filter) {
+      case 'Today':
+        return {
+          metrics: mockMetrics,
+          bookingsChart: {
+            title: 'Bookings',
+            subtitle: 'Today',
+            data: mockBookingsData,
+            isRevenue: false,
+          },
+          revenueChart: {
+            title: 'Revenue',
+            subtitle: 'Today',
+            data: mockRevenueData,
+            isRevenue: true,
+          },
+        };
+      case 'Yesterday':
+        return {
+          metrics: {
+            totalBookings: { value: '18', change: '-6 vs day before', is_positive: false },
+            revenue: { value: '£980.25', change: '-£260 vs day before', is_positive: false },
+            numberOfPeople: { value: '72', change: '-17 vs day before', is_positive: false },
+            busiestTime: { value: '13:00 - 14:00', peopleText: '15 people', bookingText: '5 bookings' },
+            peopleInVenue: { value: '25', formatted_value: '25', description: 'people currently in venue' },
+            workHours: { company_name: 'Sharksys Soft Play', is_open: true, status: 'Open', message: 'Open until 18:00', opens_at: '09:00' }
+          },
+          bookingsChart: {
+            title: 'Bookings',
+            subtitle: 'Yesterday',
+            data: mockBookingsData.map(d => ({ ...d, value: d.value - 1 })),
+            isRevenue: false,
+          },
+          revenueChart: {
+            title: 'Revenue',
+            subtitle: 'Yesterday',
+            data: mockRevenueData.map(d => ({ ...d, value: d.value * 0.8 })),
+            isRevenue: true,
+          },
+        };
+      case 'This Week':
+        return {
+          metrics: {
+            totalBookings: { value: '156', change: '+42 vs last week', is_positive: true },
+            revenue: { value: '£8,540.25', change: '+£2,100 vs last week', is_positive: true },
+            numberOfPeople: { value: '612', change: '+89 vs last week', is_positive: true },
+            busiestTime: { value: 'Saturday', peopleText: '125 people', bookingText: '32 bookings' },
+            peopleInVenue: { value: '45', formatted_value: '45', description: 'people currently in venue' },
+            workHours: { company_name: 'Sharksys Soft Play', is_open: true, status: 'Open', message: 'Open until 18:00', opens_at: '09:00' }
+          },
+          bookingsChart: {
+            title: 'Bookings',
+            subtitle: 'Mon 1st - Sun 7th Nov',
+            data: [
+              { time: 'Mon', value: 18, participants: 36 },
+              { time: 'Tue', value: 22, participants: 44 },
+              { time: 'Wed', value: 20, participants: 40 },
+              { time: 'Thu', value: 25, participants: 50 },
+              { time: 'Fri', value: 28, participants: 56 },
+              { time: 'Sat', value: 32, participants: 64 },
+              { time: 'Sun', value: 11, participants: 22 },
+            ],
+            isRevenue: false,
+          },
+          revenueChart: {
+            title: 'Revenue',
+            subtitle: 'Mon 1st - Sun 7th Nov',
+            data: [
+              { time: 'Mon', value: 1200 },
+              { time: 'Tue', value: 1450 },
+              { time: 'Wed', value: 1320 },
+              { time: 'Thu', value: 1650 },
+              { time: 'Fri', value: 1850 },
+              { time: 'Sat', value: 2100 },
+              { time: 'Sun', value: 750 },
+            ],
+            isRevenue: true,
+          },
+        };
+      default:
+        return getDataForFilter('Today');
+    }
+  };
+
+  const currentData = getDataForFilter(timeFilter);
+
+  return (
+    <Dashboard
+      timeFilter={timeFilter}
+      metrics={currentData.metrics}
+      bookingsChart={currentData.bookingsChart}
+      revenueChart={currentData.revenueChart}
+      onFilterChange={setTimeFilter}
+    />
+  );
+};
+
+export const Today = () => {
+  return (
+    <Dashboard
+      timeFilter="Today"
+      metrics={mockMetrics}
+      bookingsChart={{
+        title: 'Bookings',
+        subtitle: 'Today',
+        data: mockBookingsData,
+        isRevenue: false,
+      }}
+      revenueChart={{
+        title: 'Revenue',
+        subtitle: 'Today',
+        data: mockRevenueData,
+        isRevenue: true,
+      }}
+    />
+  );
+};
+
+export const ThisWeek = () => {
+  return (
+    <Dashboard
+      timeFilter="This Week"
+      metrics={{
+        totalBookings: { value: '156', change: '+42 vs last week', is_positive: true },
+        revenue: { value: '£8,540.25', change: '+£2,100 vs last week', is_positive: true },
+        numberOfPeople: { value: '612', change: '+89 vs last week', is_positive: true },
+        busiestTime: { value: 'Saturday', peopleText: '125 people', bookingText: '32 bookings' },
+        peopleInVenue: { value: '45', formatted_value: '45', description: 'people currently in venue' },
+        workHours: { company_name: 'Sharksys Soft Play', is_open: true, status: 'Open', message: 'Open until 18:00', opens_at: '09:00' }
+      }}
+      bookingsChart={{
+        title: 'Bookings',
+        subtitle: 'Mon 1st - Sun 7th Nov',
+        data: [
+          { time: 'Mon', value: 18, participants: 36 },
+          { time: 'Tue', value: 22, participants: 44 },
+          { time: 'Wed', value: 20, participants: 40 },
+          { time: 'Thu', value: 25, participants: 50 },
+          { time: 'Fri', value: 28, participants: 56 },
+          { time: 'Sat', value: 32, participants: 64 },
+          { time: 'Sun', value: 11, participants: 22 },
+        ],
+        isRevenue: false,
+      }}
+      revenueChart={{
+        title: 'Revenue',
+        subtitle: 'Mon 1st - Sun 7th Nov',
+        data: [
+          { time: 'Mon', value: 1200 },
+          { time: 'Tue', value: 1450 },
+          { time: 'Wed', value: 1320 },
+          { time: 'Thu', value: 1650 },
+          { time: 'Fri', value: 1850 },
+          { time: 'Sat', value: 2100 },
+          { time: 'Sun', value: 750 },
+        ],
+        isRevenue: true,
+      }}
+    />
+  );
+};