@licklist/design 0.78.21 → 0.78.25

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

@@ -0,0 +1,248 @@
+import React from 'react';
+import { Chart, ChartProps } from '../chart';
+import { MetricCard } from '../metric-card';
+import { Select } from '../../components/Select/Select';
+import { VenueCard } from '../venue-card';
+import { Blog } from '../blog-posts';
+import { VenueClosedCard } from '../venue-closed-card';
+import { ReactComponent as TrendUpIcon } from '../../../assets/Trend-Up.svg'
+import { ReactComponent as TrendDownIcon } from '../../../assets/Trend-Down.svg'
+import './Dashboard.scss';
+
+interface MetricsData {
+  totalBookings: {
+    value: string;
+    change: string;
+    is_positive: boolean;
+    label?: string;
+  };
+  revenue: {
+    value: string;
+    change: string;
+    is_positive: boolean;
+    label?: string;
+  };
+  numberOfPeople: {
+    value: string;
+    change: string;
+    is_positive: boolean;
+    formatted_value?: string;
+    label?: string;
+  };
+  busiestTime: {
+    value: string;
+    peopleText: string;
+    bookingText: string;
+    label?: string;
+  };
+  peopleInVenue: {
+    value: string;
+    formatted_value: string;
+    description: string;
+  };
+  workHours: {
+    company_name: string;
+    is_open: boolean;
+    status: string;
+    message: string;
+    opens_at: string;
+  };
+}
+
+interface DashboardProps {
+  metrics: MetricsData;
+  bookingsChart: ChartProps;
+  revenueChart: ChartProps;
+  timeFilter: 'Today' | 'Yesterday' | 'This Week';
+  bookingTypeFilter?: 'Bookings For' | 'Bookings Made';
+  onFilterChange?: (filter: 'Today' | 'Yesterday' | 'This Week') => void;
+  onBookingTypeChange?: (bookingType: 'Bookings For' | 'Bookings Made') => void;
+  className?: string;
+  isLoading?: boolean;
+  isRefreshing?: boolean;
+}
+
+export const Dashboard: React.FC<DashboardProps> = ({
+  metrics,
+  bookingsChart,
+  revenueChart,
+  timeFilter,
+  bookingTypeFilter = 'Bookings For',
+  onFilterChange,
+  onBookingTypeChange,
+  className = '',
+  isLoading,
+  isRefreshing = false,
+}) => {
+  const handleFilterChange = React.useCallback((filter: 'Today' | 'Yesterday' | 'This Week') => {
+    onFilterChange?.(filter);
+  }, [onFilterChange]);
+
+  const showRefreshing = isRefreshing && !isLoading;
+
+  const getTimePeriodText = (filter: 'Today' | 'Yesterday' | 'This Week'): string => {
+    switch (filter) {
+      case 'Today': return 'today';
+      case 'Yesterday': return 'yesterday';
+      case 'This Week': return 'this week';
+      default: return 'today';
+    }
+  };
+
+  const getTrendIcon = (change: string, isPositive: boolean): React.ReactNode | null => {
+    if (change.toLowerCase().includes('no change')) return null;
+    if (change.toLowerCase().includes('no data')) return null;
+    return isPositive ? <TrendUpIcon /> : <TrendDownIcon />;
+  };
+
+  const VenueIcon = () => (
+  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 10L17 6.5V24H8V10Z" fill="black" fill-opacity="0.1"/>
+<path d="M7 23V9.70046C7 9.27995 7.26307 8.90437 7.65826 8.76067L17.3291 5.24398C17.5886 5.14961 17.8755 5.28349 17.9699 5.54301C17.9898 5.59778 18 5.65561 18 5.71388V10.6667L24.3162 12.7721C24.7246 12.9082 25 13.2904 25 13.7208V23H27V25H5V23H7ZM9 23H16V7.85543L9 10.4009V23ZM23 23V14.4416L18 12.7749V23H23Z" fill="#626A90"/>
+</svg>
+
+);
+
+  return (
+    <div className={`dashboard ${timeFilter !== 'Today' ? 'dashboard--charts-focus' : ''} ${className}`.trim()}>
+      <div className='dashboard__filter'>
+        <Select 
+          variant="default" 
+          size="md"
+          defaultValue={bookingTypeFilter}
+          onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
+            const newBookingType = e.target.value as 'Bookings For' | 'Bookings Made';
+            onBookingTypeChange?.(newBookingType);
+          }}
+        >
+          <option value="Bookings For">Bookings For</option>
+          <option value="Bookings Made">Bookings Made</option>
+        </Select>
+
+        <div className="dashboard__filter-container">
+          <Select 
+            variant="default" 
+            size="md"
+            defaultValue={timeFilter}
+            onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
+              const newFilter = e.target.value as 'Today' | 'Yesterday' | 'This Week';
+              handleFilterChange(newFilter);
+            }}
+            className={showRefreshing ? 'select--refreshing' : ''}
+          >
+            <option value="Today">Today</option>
+            <option value="Yesterday">Yesterday</option>
+            <option value="This Week">This Week</option>
+          </Select>
+          
+          {showRefreshing && (
+            <div className="dashboard__refresh-indicator">
+              <div className="dashboard__refresh-spinner"></div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="dashboard__metrics-grid">
+        <MetricCard
+          icon="https://api.builder.io/api/v1/image/assets/TEMP/a9080a040516a2aee8e202c1fecbbf08f0f4f7b0?placeholderIfAbsent=true"
+          title={metrics.totalBookings.label || "Total Bookings"}
+          value={metrics.totalBookings.value}
+          performance={{
+            icon: getTrendIcon(metrics.totalBookings.change, metrics.totalBookings.is_positive),
+            text: metrics.totalBookings.change,
+            color: metrics.totalBookings.change.toLowerCase().includes('no change')
+              ? "#626A90"
+              : metrics.totalBookings.is_positive ? "#2D6B18" : "#CC3C35"
+          }}
+        />
+
+        <MetricCard
+          icon="https://api.builder.io/api/v1/image/assets/TEMP/d2cc0fb13dfe9a16e4258917cb2c331c1f0e1189?placeholderIfAbsent=true"
+          title={metrics.revenue.label || "Revenue"}
+          value={metrics.revenue.value}
+          performance={{
+            icon: getTrendIcon(metrics.revenue.change, metrics.revenue.is_positive),
+            text: metrics.revenue.change,
+            color: metrics.revenue.change.toLowerCase().includes('no change')
+              ? "#626A90"
+              : metrics.revenue.is_positive ? "#2D6B18" : "#CC3C35"
+          }}
+        />
+
+        <MetricCard
+          icon="https://api.builder.io/api/v1/image/assets/TEMP/8c83d255f42836d5497be545d10a8ad9295aa968?placeholderIfAbsent=true"
+          title={metrics.numberOfPeople.label || `People booked in ${getTimePeriodText(timeFilter)}`}
+          value={metrics.numberOfPeople.formatted_value || `${metrics.numberOfPeople.value} people`}
+          performance={{
+            icon: getTrendIcon(metrics.numberOfPeople.change, metrics.numberOfPeople.is_positive),
+            text: metrics.numberOfPeople.change,
+            color: metrics.numberOfPeople.change.toLowerCase().includes('no change')
+              ? "#626A90"
+              : metrics.numberOfPeople.is_positive ? "#2D6B18" : "#CC3C35"
+          }}
+        />
+
+        <MetricCard
+          icon="https://api.builder.io/api/v1/image/assets/TEMP/265ca1f3a6e063263764400beb86070a49b952cb?placeholderIfAbsent=true"
+          title={metrics.busiestTime.label || (timeFilter === 'This Week' ? 'Busiest day' : 'Busiest time')}
+          value={metrics.busiestTime.value}
+          performance={{
+            text: `${metrics.busiestTime.peopleText} // ${metrics.busiestTime.bookingText}`,
+            color: "#121E52"
+          }}
+        />
+      </div>
+
+      <div className="dashboard__content">
+        <div className="dashboard__charts-section">
+          <Chart 
+            {...bookingsChart} 
+            period={timeFilter === 'Today' ? 'today' : timeFilter === 'Yesterday' ? 'yesterday' : timeFilter === 'This Week' ? 'week' : 'today'}
+            isFullWidth={true} 
+            className={showRefreshing ? 'chart--refreshing' : ''}
+            isLoading={isLoading}
+            isRefreshing={showRefreshing}
+          />
+          <Chart 
+            {...revenueChart} 
+            isRevenue={true}
+            period={timeFilter === 'Today' ? 'today' : timeFilter === 'Yesterday' ? 'yesterday' : timeFilter === 'This Week' ? 'week' : 'today'}
+            isFullWidth={true}
+            className={showRefreshing ? 'chart--refreshing' : ''}
+            isLoading={isLoading}
+            isRefreshing={showRefreshing}
+          />
+        </div>
+
+        {timeFilter === 'Today' && (
+          <div className="dashboard__sidebar">
+            {metrics.workHours?.is_open ? (
+              <div className="dashboard__venue-section">
+                <VenueCard
+                  icon='https://api.builder.io/api/v1/image/assets/TEMP/b44b83b1f30b882d65f942ec883e90ae34fdb2d0?placeholderIfAbsent=true'
+                  title='In venue'
+                  value={metrics.peopleInVenue.formatted_value || '0'}
+                />
+                <VenueCard
+                  icon={<VenueIcon />}
+                  title="Open until"
+                  value={metrics.workHours?.message?.replace('Open until ', '') || ''}
+                  shadowColor='#121E52'
+                />
+              </div>
+            ) : (
+              <VenueClosedCard
+                venueInfo={metrics.workHours}
+              />
+            )}
+
+            <Blog />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export type { DashboardProps };

package/src/v2/dashboard-analytics/dashboard/index.ts

@@ -0,0 +1,2 @@
+export { Dashboard } from './Dashboard';
+export type { DashboardProps } from './Dashboard';

package/src/v2/dashboard-analytics/index.ts

@@ -0,0 +1,12 @@
+export { MetricCard } from './metric-card'
+export type { MetricCardProps } from './metric-card'
+export { VenueCard } from './venue-card'
+export type { VenueCardProps } from './venue-card'
+export { VenueClosedCard } from './venue-closed-card'
+export type { VenueClosedCardProps } from './venue-closed-card'
+export { Chart } from './chart'
+export type { ChartProps } from './chart'
+export { Dashboard } from './dashboard'
+export type { DashboardProps } from './dashboard'
+export { Blog } from './blog-posts'
+export type { BlogProps, BlogPost } from './blog-posts'

package/src/v2/dashboard-analytics/metric-card/MetricCard.scss

@@ -0,0 +1,125 @@
+@import '../../design-system/typography/Typography.scss';
+
+.metric-card {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--padding-reg, 16px);
+  align-self: stretch;
+  padding: 8px;
+  background-color: var(--surface-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-reg, 8px);
+
+  &.no-border {
+    border: none;
+    border-radius: 0;
+  }
+
+  &.inline-metric {
+    flex-direction: row;
+    align-items: center;
+    height: 80px;
+  }
+
+  &.h-20 {
+    height: 80px;
+  }
+
+  &.h-16 {
+    height: 64px;
+  }
+
+  &.status-active {
+    animation: shadow-pulse 2s ease-in-out infinite;
+  }
+
+  @media (min-width: 768px) {
+    flex-direction: column;
+    min-height: 160px;
+    padding: 1rem 0.5rem 1rem 1rem;
+    gap: 1rem;
+  }
+
+  &__icon-wrapper {
+    display: flex;
+    width: 48px;
+    padding: var(--padding-md, 8px) var(--padding-md, 8px);
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+    background-color: var(--surface-secondary);
+    border-radius: 4px;
+  }
+
+  &__icon {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    aspect-ratio: 1;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    flex: 1;
+  }
+
+  &__header {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  &__title {
+    align-self: stretch;
+    color: var(--label-secondary);
+    font-family: Geist, sans-serif;
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px;
+  }
+
+  &__value {
+    @include typography('heading.h3');
+    color: var(--label-primary);
+  }
+
+  // Performance section
+  &__performance {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    @include typography('heading.h6');
+  }
+
+  &__performance-icon {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  &__performance-text {
+    @include typography('heading.h6');
+  }
+}
+
+@keyframes shadow-pulse {
+  0%, 100% {
+    box-shadow: 0 2px 12px rgba(82, 194, 43, 0.3);
+    border-color: var(--success-regular);
+  }
+  50% {
+    box-shadow: 0 2px 12px rgba(82, 194, 43, 0);
+    border-color: var(--border-primary);
+  }
+}

package/src/v2/dashboard-analytics/metric-card/MetricCard.stories.tsx

@@ -0,0 +1,106 @@
+import { Meta, Story } from '@storybook/react-vite'
+import { MetricCard, MetricCardProps } from './MetricCard'
+
+export default {
+  title: 'v2/Dashboard Analytics/Metric Card',
+  component: MetricCard,
+  argTypes: {
+    icon: {
+      description: 'Icon URL for the metric',
+      control: 'text',
+    },
+    title: {
+      description: 'Title of the metric',
+      control: 'text',
+    },
+    value: {
+      description: 'Value to display',
+      control: 'text',
+    },
+    showStatusDot: {
+      description: 'Show animated status dot',
+      control: 'boolean',
+    },
+    className: {
+      description: 'Additional CSS classes',
+      control: 'text',
+    },
+  },
+} as Meta<MetricCardProps>
+
+const placeholderIcon = 'https://api.builder.io/api/v1/image/assets/TEMP/a9080a040516a2aee8e202c1fecbbf08f0f4f7b0?placeholderIfAbsent=true'
+const currencyIcon = 'https://api.builder.io/api/v1/image/assets/TEMP/d2cc0fb13dfe9a16e4258917cb2c331c1f0e1189?placeholderIfAbsent=true'
+
+export const Default: Story<MetricCardProps> = (args:MetricCardProps) => (
+  <div className="w-10">
+    <MetricCard {...args} />
+  </div>
+)
+
+Default.args = {
+  icon: placeholderIcon,
+  title: 'Bookings made',
+  value: '0',
+  performance: {
+    text: 'No data available',
+    color: '#626A90',
+  },
+}
+
+export const WithPositiveTrend: Story<MetricCardProps> = () => (
+  <div className="w-10">
+    <MetricCard
+      icon={placeholderIcon}
+      title="Total Bookings"
+      value="24"
+      performance={{
+        text: '+8 vs yesterday',
+        color: '#2D6B18',
+      }}
+    />
+  </div>
+)
+
+export const WithNegativeTrend: Story<MetricCardProps> = () => (
+  <div className="w-10">
+    <MetricCard
+      icon={placeholderIcon}
+      title="Total Bookings"
+      value="16"
+      performance={{
+        text: '-5 vs yesterday',
+        color: '#CC3C35',
+      }}
+    />
+  </div>
+)
+
+export const Currency: Story<MetricCardProps> = (args:MetricCardProps) => (
+  <div className="w-10">
+    <MetricCard {...args} />
+  </div>
+)
+
+Currency.args = {
+  icon: currencyIcon,
+  title: 'Revenue made',
+  value: '£0.00',
+  performance: {
+    text: 'No data available',
+    color: '#626A90',
+  },
+}
+
+export const CurrencyWithTrend: Story<MetricCardProps> = () => (
+  <div className="w-10">
+    <MetricCard
+      icon={currencyIcon}
+      title="Revenue made"
+      value="£1,245.00"
+      performance={{
+        text: '+£320 vs yesterday',
+        color: '#2D6B18',
+      }}
+    />
+  </div>
+)

package/src/v2/dashboard-analytics/metric-card/MetricCard.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import './MetricCard.scss';
+
+interface MetricCardProps {
+  icon: string;
+  title: string;
+  value: string;
+  performance?: {
+    icon?: React.ReactNode;
+    text: string | React.ReactNode;
+    color: string;
+  };
+  showStatusDot?: boolean;
+  className?: string;
+}
+
+export const MetricCard: React.FC<MetricCardProps> = ({
+  icon,
+  title,
+  value,
+  performance,
+  showStatusDot = false,
+  className = ''
+}) => {
+  const cardClasses = [
+    'metric-card',
+    className?.includes('no-border') && 'no-border',
+    className?.includes('inline-metric') && 'inline-metric',
+    className?.includes('h-20') && 'h-20',
+    className?.includes('h-16') && 'h-16',
+    showStatusDot && 'status-active',
+    className
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className={cardClasses}>
+      <div className="metric-card__icon-wrapper">
+        <img
+          src={icon}
+          className="metric-card__icon"
+          alt={title}
+        />
+      </div>
+      
+      <div className="metric-card__content">
+        <div className="metric-card__header">
+          <div className="metric-card__title">
+            {title}
+          </div>
+          <div className="metric-card__value">
+            {value}
+          </div>
+        </div>
+        
+        {performance && (
+          <div className="metric-card__performance" style={{ color: performance.color }}>
+            {performance.icon && (
+              <span className="metric-card__performance-icon">
+                {performance.icon}
+              </span>
+            )}
+            <span className="metric-card__performance-text">
+              {performance.text}
+            </span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export type { MetricCardProps };

package/src/v2/dashboard-analytics/metric-card/index.ts

@@ -0,0 +1,2 @@
+export { MetricCard } from './MetricCard'
+export type { MetricCardProps } from './MetricCard'

package/src/v2/dashboard-analytics/venue-card/VenueCard.scss

@@ -0,0 +1,112 @@
+@import '../../design-system/typography/Typography.scss';
+
+.venue-card {
+  position: relative;
+  width: 154px;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  justify-content: center;
+  gap: 1rem;
+  min-height: 114px;
+  padding: 1rem 0.5rem 1rem 1rem;
+  background-color: var(--surface-primary);
+  border: 1px solid;
+  border-radius: 0.5rem;
+
+  @media (max-width: 1024px) {
+    width: 100%;
+  }
+
+  &.no-border {
+    border: none;
+    border-radius: 0;
+  }
+
+  &.inline-metric {
+    flex-direction: row;
+    align-items: center;
+    height: 80px;
+  }
+
+  &.h-20 {
+    height: 80px;
+  }
+
+  &.h-16 {
+    height: 64px;
+  }
+
+  &.status-active {
+    animation: shadow-pulse 2s ease-in-out infinite;
+  }
+
+  @media (min-width: 768px) {
+    min-height: 114px;
+  }
+
+  // Icon wrapper styles
+  &__icon-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 2px;
+    background-color: var(--surface-secondary);
+    border-radius: 0.5rem;
+    flex-shrink: 0;
+    z-index: 0;
+  }
+
+  &__icon {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    aspect-ratio: 1;
+    align-self: start;
+  }
+
+  // Content container
+  &__content {
+    width: 100%;
+    z-index: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    flex: 1;
+  }
+
+  // Header section
+  &__header {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+  }
+
+  &__title {
+    @include typography('heading.h5');
+    line-height: 1;
+    color: var(--label-secondary);
+    display: flex;
+    align-items: center;
+  }
+
+  &__value {
+    @include typography('heading.h3');
+    line-height: 1;
+    color: var(--label-primary)
+  }
+}
+
+@keyframes shadow-pulse {
+  0%, 100% {
+    box-shadow: 0 2px 12px color-mix(in srgb, var(--shadow-color, rgba(82, 194, 43, 1)) 30%, transparent);
+    border-color: var(--shadow-color, var(--success-regular));
+  }
+  50% {
+    box-shadow: 0 2px 12px transparent;
+    border-color: var(--border-primary);
+  }
+}
+