@licklist/design 0.78.5-dev.88 → 0.78.5-dev.9

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

@@ -1,248 +0,0 @@
-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

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

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

@@ -1,12 +0,0 @@
-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

@@ -1,140 +0,0 @@
-@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-secondary);
-  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');
-  }
-
-  &--no-icon {
-    padding: 24px;
-    min-height: auto;
-    height: auto;
-
-    .metric-card__content {
-      justify-content: flex-start;
-      gap: 4px;
-    }
-
-    .metric-card__header {
-      gap: 8px;
-    }
-  }
-}
-
-@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

@@ -1,106 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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',
-    !icon && 'metric-card--no-icon',
-    className
-  ].filter(Boolean).join(' ');
-
-  return (
-    <div className={cardClasses}>
-      {icon && (
-        <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

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

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

@@ -1,112 +0,0 @@
-@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);
-  }
-}
-