@licklist/design 0.78.5-dev.54 → 0.78.5-dev.56

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

@@ -107,8 +107,7 @@
     }
 
     .search-input-wrapper {
-      max-width: 800px;
-      width: 100%;
+      width: 70%;
     }
 
     .search-helper-text {
@@ -140,28 +139,38 @@
     }
 
     .action-btn {
-      display: inline-flex;
-      align-items: center;
-      gap: 8px;
-      background: none;
-      border: none;
-      font-size: 14px;
-      font-weight: 500;
-      color: #121E52;
-      cursor: pointer;
-      padding: 8px 12px;
-      border-radius: 4px;
-      transition: background-color 0.2s ease;
-      font-family: var(--font-family-sans, 'Geist', sans-serif);
+      padding: 0 16px;
+      border: 1px solid var(--border-primary, #E8E9EF);
+      background: #FFFFFF;
+      transition: all 0.2s ease;
+      height: 44px;
+      border-radius: 8px;
+
+      &--secondary-soft {
+        background: var(--surface-action-soft, #EFE6FD);
+        border: none;
+      }
+
+      &--tertiary-soft {
+        background: #FFFFFF;
+        border: 1px solid var(--border-primary, #E8E9EF);
+      }
 
       &:hover {
-        background-color: #F8F8FA;
+        background-color: var(--surface-tertiary, #F0F0F5);
+        border-color: var(--border-primary, #E8E9EF);
       }
 
+      .new-button__text {
+        font-family: var(--font-family-sans, 'Geist', sans-serif);
+        font-size: 14px;
+        font-weight: 500;
+        color: #121E52;
+      }
 
       svg {
-        width: 20px;
-        height: 20px;
+        width: 32px;
+        height: 32px;
         flex-shrink: 0;
       }
     }
@@ -257,9 +266,8 @@
 
   &__pagination {
     margin-top: 16px;
-    padding-top: 16px;
+    padding-top: 32px;
     border-top: 1px solid #E8E9EF;
-    display: flex;
     align-items: center;
     justify-content: center;
     gap: 12px;
@@ -318,6 +326,39 @@
     background-color: #FFFFFF;
     border-radius: 8px;
     overflow: hidden;
+    position: relative;
+
+    &--loading {
+      opacity: 0.7;
+      pointer-events: none;
+    }
+  }
+
+  .table-loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.3);
+    z-index: 10;
+  }
+
+  .table-loading-spinner {
+    width: 32px;
+    height: 32px;
+    border: 3px solid #E8E9EF;
+    border-top: 3px solid #121E52;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
   }
 
   .no-results-content {
@@ -430,8 +471,18 @@
     .filter-section {
       gap: 16px;
 
+      .search-row {
+        max-width: 100%;
+        width: 100%;
+      }
+
       .search-input-wrapper {
         max-width: 100%;
+        width: 100%;
+
+        .new-form-input__input-with-icon {
+          width: 100%;
+        }
       }
 
       .search-helper-text {
@@ -445,26 +496,77 @@
         align-items: stretch;
       }
 
-      .quick-filters-wrapper {
-        width: 100%;
+    .quick-filters-wrapper {
+      width: 100%;
+
+      .quick-filter {
+        flex-direction: row;
+        align-items: center;
+        gap: 8px;
+
+        &__label {
+          font-size: 11px;
+        }
+
+        &__options {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 6px;
+        }
+
+        &__option {
+          padding: 2px 8px;
+          font-size: 11px;
+        }
       }
+    }
 
       .action-buttons {
-        flex-wrap: wrap;
-        justify-content: flex-start;
+        display: flex;
+        justify-content: space-between;
         gap: 8px;
+        width: 100%;
+        flex-wrap: wrap;
       }
 
       .action-btn {
-        font-size: 12px;
-        padding: 6px 10px;
-        flex: 1;
-        min-width: fit-content;
+        flex: 1 0 calc(50% - 4px);
+        min-width: 0;
         justify-content: center;
+        border: 1px solid #E8E9EF;
+        background: #FFFFFF;
+        height: 44px;
+        padding: 0 4px;
+        border-radius: 8px;
+        gap: 4px;
+
+        &--secondary-soft {
+          background: var(--surface-action-soft, #EFE6FD);
+          border: none;
+        }
+
+        &--tertiary-soft {
+          background: #FFFFFF;
+          border: 1px solid #E8E9EF;
+        }
+
+        &:hover {
+          background-color: var(--surface-tertiary, #F0F0F5);
+        }
+
+        .new-button__text {
+          font-family: var(--font-family-sans, 'Geist', sans-serif);
+          font-size: 11px;
+          font-weight: 600;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
 
         svg {
-          width: 16px;
-          height: 16px;
+          width: 32px;
+          height: 32px;
+          flex-shrink: 0;
         }
       }
     }
@@ -473,7 +575,7 @@
       flex-direction: column;
       gap: 12px;
       margin-top: 12px;
-      padding-top: 12px;
+      padding-top: 24px;
 
       .pagination__nav {
         padding: 6px 10px;
@@ -495,18 +597,183 @@
     }
 
     .table-section {
-      overflow-x: auto;
-      -webkit-overflow-scrolling: touch;
+      overflow-x: visible;
+      overflow: visible;
+
+      .new-table {
+        display: block;
+        min-width: unset;
+
+        &__head {
+          display: none;
+        }
+
+        &__body {
+          display: block;
+        }
+
+        &__row {
+          display: grid;
+          grid-template-areas:
+            "customer age"
+            "divider divider"
+            "next last"
+            "actions actions";
+          grid-template-columns: 1fr auto;
+          border: 1px solid var(--border-primary, #E8E9EF);
+          border-radius: 12px;
+          margin-bottom: 16px;
+          padding: 16px;
+          gap: 12px;
+          background: #FFFFFF;
+          position: relative;
+          overflow: visible;
+
+          &::after {
+            content: "";
+            grid-area: divider;
+            height: 1px;
+            background-color: #E8E9EF;
+            margin: 4px 0;
+          }
+        }
+
+        &__cell {
+          display: block;
+          padding: 0;
+          border: none;
+          min-width: 0;
+          overflow: visible;
+
+          &.tw-text-right {
+            grid-area: actions;
+            text-align: right;
+            padding-top: 12px;
+            border-top: 1px solid var(--border-primary, #E8E9EF);
+            margin-top: 4px;
+            display: flex;
+            justify-content: flex-end;
+          }
+
+          &:first-child {
+            grid-area: customer;
+          }
+
+          &.age-col {
+            grid-area: age;
+            text-align: right;
+          }
+
+          &.next-booking-col {
+            grid-area: next;
+          }
+
+          &.last-booking-col {
+            grid-area: last;
+          }
+
+          &.no-of-bookings-col {
+            display: none;
+          }
+
+          &.waiver-col {
+            grid-area: last; // Reuse 'last' area for waiver in waiver list
+            text-align: right;
+          }
+        }
+      }
+    }
+
+    .age-cell {
+      text-align: right;
+      min-width: 0;
+      overflow: hidden;
+      &__label {
+        font-size: 13px;
+        color: #626A90;
+        font-weight: 500;
+        margin-bottom: 2px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      &__value {
+        font-size: 14px;
+        color: #121E52;
+        font-weight: 600;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .booking-cell {
+      min-width: 0;
+      overflow: hidden;
+      &__label {
+        font-size: 13px;
+        color: #626A90;
+        font-weight: 500;
+        margin-bottom: 4px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      &__value {
+        font-size: 14px;
+        color: #121E52;
+        font-weight: 400;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .waiver-cell {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      min-width: 0;
+      overflow: hidden;
+
+      &__label {
+        font-size: 13px;
+        color: #626A90;
+        font-weight: 500;
+        margin-bottom: 4px;
+        text-align: right;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 100%;
+      }
+
+      .v2-badge {
+        display: inline-flex;
+        margin-left: auto;
+      }
     }
 
     .customer-cell {
+      min-width: 0;
+      overflow: hidden;
+
       &__name {
-        font-size: 14px;
+        font-size: 16px;
+        font-weight: 700;
+        margin-bottom: 2px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       &__email,
       &__id {
-        font-size: 12px;
+        font-size: 14px;
+        color: #626A90;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
     }
 
@@ -566,13 +833,18 @@
 
     .filter-section {
       .action-buttons {
-        flex-direction: column;
+        flex-direction: row;
         width: 100%;
       }
 
       .action-btn {
         width: 100%;
         justify-content: center;
+
+        .v2-button__content {
+          width: 100%;
+          justify-content: center;
+        }
       }
     }
 

package/src/v2/components/NewPageHeader/NewPageHeader.tsx

@@ -8,15 +8,17 @@ export interface NewPageHeaderProps {
     onCancel?: () => void;
     renderRight?: () => React.ReactNode;
     className?: string;
+    showDivider?: boolean;
 }
 
-export const NewPageHeader: React.FC<NewPageHeaderProps> = ({
+export const NewPageHeader = ({
     title,
     cancelLabel = 'Cancel',
     onCancel,
     renderRight,
-    className = ''
-}) => {
+    className = '',
+    showDivider = true
+}: NewPageHeaderProps) => {
     return (
         <div className={`new-page-header-container ${className}`}>
             <div className="new-page-header">
@@ -34,7 +36,7 @@ export const NewPageHeader: React.FC<NewPageHeaderProps> = ({
                     )}
                 </div>
             </div>
-            <hr className="new-page-header__divider" />
+            {showDivider && <hr className="new-page-header__divider" />}
         </div>
     );
 };

package/src/v2/components/NewTable/NewTable.tsx

@@ -6,6 +6,7 @@ export interface NewTableColumn<T> {
   accessor: keyof T | ((row: T) => React.ReactNode)
   className?: string
   width?: string | number
+  disableRowClick?: boolean
 }
 
 export interface NewTableProps<T> {
@@ -61,6 +62,11 @@ export function NewTable<T extends { id?: string | number }>({
                       <td
                         key={colIndex}
                         className={`new-table__cell ${column.className || ''}`}
+                        onClick={(e) => {
+                          if (column.disableRowClick) {
+                            e.stopPropagation()
+                          }
+                        }}
                       >
                         {content}
                       </td>

package/src/v2/components/Pagination/Pagination.scss

@@ -1,20 +1,20 @@
 .v2-pagination {
   display: flex;
   align-items: center;
-  gap: 24px;
+  gap: 16px;
   font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
 
   &__controls {
     display: flex;
-    gap: 12px;
+    gap: 8px;
   }
 
   &__button {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 64px;
-    height: 64px;
+    width: 40px;
+    height: 40px;
     border-radius: 50%;
     border: none;
     cursor: pointer;
@@ -43,8 +43,8 @@
     }
 
     svg {
-      width: 32px;
-      height: 32px;
+      width: 20px;
+      height: 20px;
       flex-shrink: 0; // Prevent SVG from shrinking
     }
   }
@@ -52,17 +52,17 @@
   &__info {
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    gap: 2px;
   }
 
   &__page-number {
-    font-size: 24px;
+    font-size: 14px;
     font-weight: 600;
     color: #14215a; // Main fill primary
   }
 
   &__showing {
-    font-size: 18px;
+    font-size: 12px;
     font-weight: 500;
     color: #626a90; // Secondary text color
   }
@@ -71,19 +71,19 @@
 // Mobile styles
 @media (max-width: 768px) {
   .v2-pagination {
-    gap: 16px;
+    gap: 12px;
 
     &__controls {
-      gap: 8px;
+      gap: 6px;
     }
 
     &__button {
-      width: 48px;
-      height: 48px;
+      width: 36px;
+      height: 36px;
 
       svg {
-        width: 24px;
-        height: 24px;
+        width: 18px;
+        height: 18px;
       }
     }
 
@@ -92,11 +92,11 @@
     }
 
     &__page-number {
-      font-size: 18px;
+      font-size: 13px;
     }
 
     &__showing {
-      font-size: 14px;
+      font-size: 11px;
     }
   }
 }
@@ -104,7 +104,7 @@
 @media (max-width: 480px) {
   .v2-pagination {
     flex-direction: column;
-    gap: 12px;
+    gap: 10px;
     align-items: flex-start;
 
     &__controls {
@@ -114,12 +114,12 @@
     }
 
     &__button {
-      width: 44px;
-      height: 44px;
+      width: 32px;
+      height: 32px;
 
       svg {
-        width: 20px;
-        height: 20px;
+        width: 16px;
+        height: 16px;
       }
     }
 
@@ -131,11 +131,11 @@
     }
 
     &__page-number {
-      font-size: 16px;
+      font-size: 12px;
     }
 
     &__showing {
-      font-size: 13px;
+      font-size: 10px;
     }
   }
 }

package/src/v2/components/index.ts

@@ -7,15 +7,6 @@ export type { QuickFilterProps, QuickFilterOption } from './QuickFilter'
 export { NewTable } from './NewTable'
 export type { NewTableProps, NewTableColumn } from './NewTable'
 
-export { CustomersList } from './Customer'
-export type { CustomersListProps } from './Customer'
-
-export { CustomerDetail } from './Customer'
-export type { CustomerDetailProps } from './Customer'
-
-export * from './Customer/CustomerForm'
-export * from './Customer/CustomerEdit'
-export * from './Customer/CustomerCreate'
 
 export { ActionMenu } from './ActionMenu'
 export type { ActionMenuProps, ActionMenuItem } from './ActionMenu'
@@ -46,9 +37,6 @@ export type { SectionHeaderProps } from './SectionHeader'
 export { Button, ButtonText } from './Button'
 export type { ButtonProps, ButtonTextProps } from './Button'
 
-export { GhostButton } from './Button/GhostButton'
-export type { GhostButtonProps } from './Button/GhostButton'
-
 export { Select } from './Select'
 
 export { Tooltip } from './Tooltip'
@@ -64,5 +52,23 @@ export { Alert } from './Alert'
 
 export { NPSScore } from './NPSScore'
 
+export { Pagination } from './Pagination'
+export type { PaginationProps } from './Pagination'
+
 // Icons
-export { InfoIcon } from '../icons'
+export {
+  InfoIcon,
+  ArrowUpIcon,
+  ArrowDownIcon,
+  EditIcon,
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  SearchIcon,
+  RefreshIcon,
+  SendIcon,
+  ExternalLinkIcon,
+  ExportIcon,
+  ClearIcon,
+  CloseIcon
+} from '../icons'
+