@licklist/design 0.78.5-dev.62 → 0.78.5-dev.64

package/src/v2/components/Customer/CustomersList.scss

@@ -54,6 +54,7 @@
       width: 30px;
       height: 30px;
       flex-shrink: 0;
+      fill: var(--shade-lighter);
     }
   }
 
@@ -111,6 +112,10 @@
 
     .search-input-wrapper {
       width: 70%;
+
+      .new-form-input__icon {
+        color: var(--shade-lighter);
+      }
     }
 
     .search-helper-text {
@@ -125,13 +130,21 @@
 
     .filters-actions-row {
       display: flex;
-      justify-content: space-between;
-      align-items: center;
-      gap: 24px;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 16px;
       width: 100%;
+
+      @media (min-width: 1024px) {
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        gap: 24px;
+      }
     }
 
     .quick-filters-wrapper {
+      width: 100%;
       flex: 1;
     }
 
@@ -139,6 +152,12 @@
       display: flex;
       gap: 12px;
       align-items: center;
+
+      .ghost-button {
+        &__icon svg {
+          fill: var(--shade-lighter);
+        }
+      }
     }
 
     &__row {
@@ -165,19 +184,46 @@
     &__sub {
       font-size: 13px;
       color: #9399B3;
+      display: block !important;
     }
     &__id {
       font-size: 13px;
       color: #9399B3;
-      display: none;
+      display: none !important;
     }
 
     &:hover {
       .entity-cell__id {
-        display: block;
+        display: block !important;
       }
       .entity-cell__sub {
-        display: none;
+        display: none !important;
+      }
+    }
+
+    // Ensure hover state on the row also triggers the same behavior
+    // This addresses potential flickering when moving between cells
+    :is(.new-table__row:hover) & {
+      .entity-cell__id {
+        display: block !important;
+      }
+      .entity-cell__sub {
+        display: none !important;
+      }
+    }
+
+    // When entity-cell__sub is missing (like in template list),
+    // showing entity-cell__id on hover causes height jump.
+    // We only want to swap if both exist, or ensure height is stable.
+    &:not(:has(.entity-cell__sub)) {
+      .entity-cell__id {
+        display: block !important;
+      }
+    }
+
+    :is(.new-table__row:hover) &:not(:has(.entity-cell__sub)) {
+      .entity-cell__id {
+        display: block !important;
       }
     }
   }
@@ -542,6 +588,7 @@
             "customer bookings"
             "divider divider"
             "next last"
+            "status status"
             "actions actions";
           grid-template-columns: 1fr auto;
           border: 1px solid var(--border-primary, #E8E9EF);
@@ -604,6 +651,10 @@
             grid-area: last; // Reuse 'last' area for waiver in waiver list
             text-align: right;
           }
+          &.waiver-col-mb {
+            grid-area: status;
+            text-align: left;
+          }
         }
       }
     }
@@ -679,7 +730,7 @@
     .waiver-cell {
       display: flex;
       flex-direction: column;
-      align-items: flex-end;
+      align-items: flex-start;
       min-width: 0;
       overflow: hidden;
 
@@ -688,7 +739,7 @@
         color: #626A90;
         font-weight: 500;
         margin-bottom: 4px;
-        text-align: right;
+        text-align: left;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -697,7 +748,7 @@
 
       .v2-badge {
         display: inline-flex;
-        margin-left: auto;
+        margin-right: auto;
       }
     }
 

package/src/v2/components/FormField/FormField.scss

@@ -33,7 +33,7 @@
     padding: 8px 10px;
     height: 40px;
     font-family: var(--font-family-sans, 'Geist', sans-serif);
-    font-size: var(--text-regular-size, 15px);
+    font-size: var(--text-regular-size, 16px);
     line-height: var(--text-regular-line, 20px);
     color: var(--label-primary, #121e52);
     background-color: var(--surface-secondary, #f8f8fa);

package/src/v2/components/NewPageHeader/NewPageHeader.scss

@@ -7,13 +7,9 @@
     padding: 32px 32px 0px 32px;
 
     @media (max-width: 768px) {
-        padding: 16px 16px 0px 16px;
+        padding: 16px 0 0 0;
         gap: 0;
     }
-
-    @media (max-width: 480px) {
-        padding: 16px 12px 0px 12px;
-    }
 }
 
 .new-page-header {

package/src/v2/components/QuickFilter/QuickFilter.scss

@@ -12,11 +12,21 @@
 
   &__options {
     display: flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
+    overflow-x: auto;
     gap: 8px;
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+    padding-bottom: 2px; /* Prevent button shadows/borders from being cut off during scroll if any */
+
+    &::-webkit-scrollbar {
+      display: none; /* Chrome, Safari and Opera */
+    }
 
     .ghost-button {
       border-radius: 100px;
+      font-family: var(--font-family-mono, 'Geist Mono', monospace);
+      flex-shrink: 0;
     }
   }
 }
@@ -26,7 +36,7 @@
   .quick-filter {
     display: flex;
     flex-direction: row;
-    align-items: flex-start;
+    align-items: center;
     gap: 12px;
     width: 100%;
 
@@ -37,7 +47,8 @@
     &__options {
       flex: 1;
       display: flex;
-      flex-wrap: wrap;
+      flex-wrap: nowrap;
+      overflow-x: auto;
       gap: 6px;
       padding: 0;
       margin: 0;

package/src/v2/components/TableSortIcon/TableSortIcon.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ArrowUpIcon, ArrowDownIcon } from '../../icons'
+import { TableHeaderArrowUpIcon, TableHeaderArrowDownIcon} from '../../icons'
 
 export type SortDirection = 'asc' | 'desc' | null
 
@@ -10,11 +10,9 @@ export interface TableSortIconProps {
 }
 
 export const TableSortIcon: React.FC<TableSortIconProps> = ({ active = false, direction, className = '' }) => {
-  if (!active || !direction) return null
-
   return (
-    <span className={className}>
-      {direction === 'asc' ? <ArrowUpIcon /> : <ArrowDownIcon />}
+    <span className={className} style={{ visibility: active && direction ? 'visible' : 'hidden' }}>
+      {direction === 'asc' ? <TableHeaderArrowUpIcon /> : <TableHeaderArrowDownIcon />}
     </span>
   )
 }

package/src/v2/components/ZoneCard/ResourceRow.tsx

@@ -1,57 +1,104 @@
 import React from 'react'
 import { ActionMenu, ActionMenuItem } from '../ActionMenu'
-import { GripVerticalIcon } from '../../icons'
+import { GripVerticalIcon, ArrowUpIcon, ArrowDownIcon } from '../../icons'
 import { DragHandleProps } from './ZoneContainer'
 import './ZoneCard.scss'
 
+export interface ResourceRowLabels {
+  quantity?: string
+  capacity?: string
+  total?: string
+}
+
 export interface ResourceRowProps {
   name: string
   quantity: number
   capacity: number
+  labels?: ResourceRowLabels
   menuItems?: ActionMenuItem[]
   draggable?: boolean
   dragHandleProps?: DragHandleProps
   onClick?: () => void
   className?: string
   style?: React.CSSProperties
+  isMobile?: boolean
+  isFirst?: boolean
+  isLast?: boolean
+  onMoveUp?: () => void
+  onMoveDown?: () => void
 }
 
 export const ResourceRow = React.forwardRef<HTMLDivElement, ResourceRowProps>(({
   name,
   quantity,
   capacity,
+  labels = {},
   menuItems = [],
   draggable = true,
   dragHandleProps,
   onClick,
   className = '',
   style,
+  isMobile = false,
+  isFirst = false,
+  isLast = false,
+  onMoveUp,
+  onMoveDown,
 }, ref) => {
+  const qtyLabel = labels.quantity ?? 'Qty'
+  const capLabel = labels.capacity ?? 'Cap'
+  const totalLabel = labels.total ?? 'Total'
   const classes = [
     'zone-card__resource',
     onClick ? 'zone-card__resource--clickable' : '',
+    isMobile ? 'zone-card__resource--mobile' : '',
     className,
   ].filter(Boolean).join(' ')
 
   return (
     <div ref={ref} className={classes} style={style} onClick={onClick}>
-      {draggable && (
+      {draggable && !isMobile && (
         <div
           className="zone-card__drag-handle zone-card__drag-handle--resource"
           {...dragHandleProps}
           onClick={(e) => e.stopPropagation()}
         >
-          {GripVerticalIcon({ width: 14, height: 14 })}
+          {GripVerticalIcon({ width: 16, height: 16 })}
+        </div>
+      )}
+      {draggable && isMobile && (
+        <div className="zone-card__reorder-arrows zone-card__reorder-arrows--resource" onClick={(e) => e.stopPropagation()}>
+          <button
+            className="zone-card__arrow-btn"
+            disabled={isFirst}
+            onClick={(e) => { e.stopPropagation(); onMoveUp?.() }}
+          >
+            <ArrowUpIcon />
+          </button>
+          <button
+            className="zone-card__arrow-btn"
+            disabled={isLast}
+            onClick={(e) => { e.stopPropagation(); onMoveDown?.() }}
+          >
+            <ArrowDownIcon />
+          </button>
         </div>
       )}
       <span className="zone-card__resource-name">{name}</span>
-      <div className="zone-card__resource-stats">
-        <span className="zone-card__resource-stat">Qty: {quantity}</span>
-        <span className="zone-card__resource-stat">Cap: {capacity}</span>
-        <span className="zone-card__resource-stat zone-card__resource-stat--total">
-          Total: {quantity * capacity}
+      {!isMobile && (
+        <div className="zone-card__resource-stats">
+          <span className="zone-card__resource-stat">{qtyLabel}: {quantity}</span>
+          <span className="zone-card__resource-stat">{capLabel}: {capacity}</span>
+          <span className="zone-card__resource-stat zone-card__resource-stat--total">
+            {totalLabel}: {quantity * capacity}
+          </span>
+        </div>
+      )}
+      {isMobile && (
+        <span className="zone-card__resource-stats-mobile">
+          {qtyLabel}: {quantity} &middot; {capLabel}: {capacity} &middot; {totalLabel}: {quantity * capacity}
         </span>
-      </div>
+      )}
       {menuItems.length > 0 && (
         <div className="zone-card__resource-actions" onClick={(e) => e.stopPropagation()}>
           <ActionMenu items={menuItems} />

package/src/v2/components/ZoneCard/ZoneCard.scss

@@ -7,7 +7,7 @@
   &__header {
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: 16px;
     padding: 12px 16px;
     background: var(--surface-secondary);
   }
@@ -15,14 +15,15 @@
   &__drag-handle {
     display: flex;
     align-items: center;
-    padding: 4px;
-    border-radius: 4px;
+    padding: 6px;
+    border-radius: 6px;
     cursor: grab;
-    color: var(--label-secondary);
+    color: var(--label-tertiary, var(--label-secondary));
     transition: all 0.2s ease;
+    flex-shrink: 0;
 
     &:hover {
-      color: var(--label-primary);
+      color: var(--label-secondary);
       background: var(--surface-primary);
     }
 
@@ -31,7 +32,44 @@
     }
 
     &--resource {
+      color: var(--label-tertiary, var(--label-secondary));
+    }
+  }
+
+  // Mobile reorder arrows (replaces drag handles)
+  &__reorder-arrows {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex-shrink: 0;
+
+    &--resource {
+      margin-right: 0;
+    }
+  }
+
+  &__arrow-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: var(--label-tertiary, var(--label-secondary));
+    cursor: pointer;
+    transition: all 0.2s ease;
+    padding: 0;
+
+    &:hover:not(:disabled) {
       color: var(--label-secondary);
+      background: var(--surface-primary);
+    }
+
+    &:disabled {
+      opacity: 0.25;
+      pointer-events: none;
     }
   }
 
@@ -48,7 +86,7 @@
   &__header-right {
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: 16px;
     flex-shrink: 0;
   }
 
@@ -59,13 +97,15 @@
     line-height: 16px;
     color: var(--label-secondary);
     white-space: nowrap;
+    min-width: 72px;
+    text-align: right;
   }
 
   // Resource rows
   &__resource {
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: 16px;
     padding: 10px 16px 10px 32px;
     border-top: 1px solid var(--border-primary);
     transition: background 0.2s ease;
@@ -77,6 +117,11 @@
         background: var(--surface-secondary);
       }
     }
+
+    &--mobile {
+      flex-wrap: wrap;
+      padding-left: 16px;
+    }
   }
 
   &__resource-name {
@@ -103,14 +148,24 @@
     line-height: 16px;
     color: var(--label-secondary);
     white-space: nowrap;
-    min-width: 56px;
+    min-width: 72px;
 
     &--total {
-      min-width: 56px;
+      min-width: 72px;
       text-align: right;
     }
   }
 
+  // Mobile-only compact stats line
+  &__resource-stats-mobile {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 16px;
+    color: var(--label-secondary);
+    white-space: nowrap;
+  }
+
   &__resource-actions {
     flex-shrink: 0;
     width: 32px;
@@ -127,8 +182,13 @@
 
 @media (max-width: 768px) {
   .zone-card {
+    &__header {
+      padding: 10px 12px;
+    }
+
     &__resource {
-      padding-left: 16px;
+      padding: 10px 12px 10px 12px;
+      gap: 12px;
     }
 
     &__resource-stats {
@@ -138,5 +198,9 @@
     &__resource-stat {
       min-width: auto;
     }
+
+    &__add-resource-wrapper {
+      padding: 10px 12px;
+    }
   }
 }

package/src/v2/components/ZoneCard/ZoneCard.stories.tsx

@@ -30,7 +30,7 @@ const resourceMenuItems = [
 export const Default: Story = {
   args: {
     name: 'Bowling',
-    status: 'active',
+
     totalCapacity: 2,
     menuItems: zoneMenuItems,
     onAddResource: () => alert('Add Resource'),
@@ -41,10 +41,9 @@ export const Default: Story = {
   },
 }
 
-export const DisabledZone: Story = {
+export const EmptyZone: Story = {
   args: {
     name: 'VIP Lounge',
-    status: 'disabled',
     totalCapacity: 0,
     menuItems: zoneMenuItems,
     onAddResource: () => alert('Add Resource'),
@@ -58,7 +57,6 @@ export const ComposedManually: Story = {
     <ZoneContainer>
       <ZoneHeader
         name="Bowling"
-        status="active"
         totalCapacity={2}
         menuItems={zoneMenuItems}
       />
@@ -87,7 +85,6 @@ export const StandaloneHeader: Story = {
     <ZoneContainer>
       <ZoneHeader
         name="Main Floor"
-        status="active"
         totalCapacity={50}
         menuItems={zoneMenuItems}
       />

package/src/v2/components/ZoneCard/ZoneCard.tsx

@@ -17,7 +17,6 @@ export interface ZoneResource {
 
 export interface ZoneCardProps {
   name: string
-  status?: 'active' | 'disabled'
   totalCapacity: number
   resources?: ZoneResource[]
   menuItems?: ActionMenuItem[]
@@ -31,7 +30,6 @@ export interface ZoneCardProps {
 
 export const ZoneCard = React.forwardRef<HTMLDivElement, ZoneCardProps>(({
   name,
-  status = 'active',
   totalCapacity,
   resources = [],
   menuItems = [],
@@ -46,7 +44,6 @@ export const ZoneCard = React.forwardRef<HTMLDivElement, ZoneCardProps>(({
     <ZoneContainer ref={ref} className={className} style={style}>
       <ZoneHeader
         name={name}
-        status={status}
         totalCapacity={totalCapacity}
         menuItems={menuItems}
         draggable={draggable}

package/src/v2/components/ZoneCard/ZoneHeader.tsx

@@ -1,43 +1,66 @@
 import React from 'react'
-import { Badge } from '../Badge'
 import { ActionMenu, ActionMenuItem } from '../ActionMenu'
-import { GripVerticalIcon } from '../../icons'
+import { GripVerticalIcon, ArrowUpIcon, ArrowDownIcon } from '../../icons'
 import { DragHandleProps } from './ZoneContainer'
 import './ZoneCard.scss'
 
 export interface ZoneHeaderProps {
   name: string
-  status?: 'active' | 'disabled'
   totalCapacity: number
+  totalLabel?: string
   menuItems?: ActionMenuItem[]
   draggable?: boolean
   dragHandleProps?: DragHandleProps
   className?: string
+  isMobile?: boolean
+  isFirst?: boolean
+  isLast?: boolean
+  onMoveUp?: () => void
+  onMoveDown?: () => void
 }
 
 export const ZoneHeader: React.FC<ZoneHeaderProps> = ({
   name,
-  status = 'active',
   totalCapacity,
+  totalLabel = 'Total',
   menuItems = [],
   draggable = true,
   dragHandleProps,
   className = '',
+  isMobile = false,
+  isFirst = false,
+  isLast = false,
+  onMoveUp,
+  onMoveDown,
 }) => {
-  const statusVariant = status === 'active' ? 'success' : 'neutral'
-  const statusLabel = status.charAt(0).toUpperCase() + status.slice(1)
-
   return (
     <div className={`zone-card__header ${className}`}>
-      {draggable && (
+      {draggable && !isMobile && (
         <div className="zone-card__drag-handle" {...dragHandleProps}>
-          {GripVerticalIcon({ width: 16, height: 16 })}
+          {GripVerticalIcon({ width: 20, height: 20 })}
+        </div>
+      )}
+      {draggable && isMobile && (
+        <div className="zone-card__reorder-arrows">
+          <button
+            className="zone-card__arrow-btn"
+            disabled={isFirst}
+            onClick={(e) => { e.stopPropagation(); onMoveUp?.() }}
+          >
+            <ArrowUpIcon />
+          </button>
+          <button
+            className="zone-card__arrow-btn"
+            disabled={isLast}
+            onClick={(e) => { e.stopPropagation(); onMoveDown?.() }}
+          >
+            <ArrowDownIcon />
+          </button>
         </div>
       )}
       <span className="zone-card__name">{name}</span>
       <div className="zone-card__header-right">
-        <Badge variant={statusVariant}>{statusLabel}</Badge>
-        <span className="zone-card__total">Total: {totalCapacity}</span>
+        <span className="zone-card__total">{totalLabel}: {totalCapacity}</span>
         {menuItems.length > 0 && <ActionMenu items={menuItems} />}
       </div>
     </div>

package/src/v2/components/ZoneCard/index.ts

@@ -8,7 +8,7 @@ export { ZoneHeader } from './ZoneHeader'
 export type { ZoneHeaderProps } from './ZoneHeader'
 
 export { ResourceRow } from './ResourceRow'
-export type { ResourceRowProps } from './ResourceRow'
+export type { ResourceRowProps, ResourceRowLabels } from './ResourceRow'
 
 export { AddResourceButton } from './AddResourceButton'
 export type { AddResourceButtonProps } from './AddResourceButton'

package/src/v2/components/index.ts

@@ -67,6 +67,8 @@ export type { ZoneCardProps, ZoneResource, ZoneContainerProps, DragHandleProps,
 // Icons
 export {
   InfoIcon,
+  TableHeaderArrowUpIcon,
+  TableHeaderArrowDownIcon,
   ArrowUpIcon,
   ArrowDownIcon,
   EditIcon,