mautourco-components 0.2.13 → 0.2.15

package/src/components/organisms/QuoteHeader/QuoteHeader.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import Button from '../../atoms/Button/Button';
+import DropdownInput from '../../atoms/Inputs/DropdownInput/DropdownInput';
+import Input from '../../atoms/Inputs/Input/Input';
+import { Heading } from '../../atoms/Typography/Typography';
+import {
+  SORT_BY__FILE_STATUS_OPTIONS,
+  SORT_BY_CLIENT_TYPE_OPTIONS,
+  SORT_BY_DATE_OPTIONS,
+} from './constant';
+import './QuoteHeader.css';
+
+export interface QuoteHeaderProps {
+  /** Current tab */
+  current: 'quotation' | 'booking';
+
+  /** Callback to navigate to a different tab */
+  onNavigate: (tab: 'quotation' | 'booking') => void;
+
+  /** Callback to create a new quote */
+  onNewQuote: () => void;
+
+  onFilterChange: (filter: 'date' | 'clientType' | 'fileStatus', value: string) => void;
+}
+
+const filterConfig = {
+  date: {
+    options: SORT_BY_DATE_OPTIONS,
+    placeholder: 'Sort by date',
+  },
+  clientType: {
+    options: SORT_BY_CLIENT_TYPE_OPTIONS,
+    placeholder: 'Client type',
+  },
+  fileStatus: {
+    options: SORT_BY__FILE_STATUS_OPTIONS,
+    placeholder: 'File status',
+  },
+};
+
+export const QuoteHeader: React.FC<QuoteHeaderProps> = (props) => {
+  const { current = 'quotation', onNavigate, onNewQuote, onFilterChange } = props;
+
+  return (
+    <div className="quote-header">
+      <Heading level={4} as="h1" className="quote-header__title" color="accent">
+        Quotation & Booking
+      </Heading>
+      <div className="flex gap-4">
+        <Button
+          variant={current === 'quotation' ? 'primary' : 'outline-primary'}
+          className="quote-header__button"
+          onClick={() => onNavigate('quotation')}>
+          Quotation
+        </Button>
+        <Button
+          variant={current === 'booking' ? 'primary' : 'outline-primary'}
+          className="quote-header__button"
+          onClick={() => onNavigate('booking')}>
+          Booking
+        </Button>
+      </div>
+      <div className="quote-header__search-container">
+        <Input
+          placeholder="Search"
+          icon="search"
+          iconPosition="leading"
+          className="quote-header__search"
+        />
+        <Button
+          variant="primary"
+          leadingIcon="plus-circle"
+          iconSize="md"
+          size="sm"
+          onClick={onNewQuote}>
+          New quote
+        </Button>
+      </div>
+      <div className="quote-header__filters">
+        {Object.entries(filterConfig).map(([key, value]) => (
+          <DropdownInput
+            key={key}
+            placeholder={value.placeholder}
+            options={value.options}
+            onSelect={(value) =>
+              onFilterChange(key as 'date' | 'clientType' | 'fileStatus', value)
+            }
+          />
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/components/organisms/QuoteHeader/constant.ts

@@ -0,0 +1,8 @@
+export const SORT_BY_DATE_OPTIONS = ['Newest to oldest', 'Last week', 'Oldest to newest'];
+export const SORT_BY_CLIENT_TYPE_OPTIONS = ['All', 'Standard', 'Honeymoon', 'Wedding'];
+export const SORT_BY__FILE_STATUS_OPTIONS = [
+  'All',
+  'Free sales',
+  'On request',
+  'Pay to book',
+];

package/src/styles/components/dropdown.css

@@ -12,8 +12,8 @@
   width: 100%;
   min-height: 40px;
   padding: 8px 12px;
-  border: 1px solid var(--color-slate-500, #6B7280);
-  border-radius: 0.375rem;
+  border: 1px solid var(--color-slate-500, #6b7280);
+  border-radius: var(--input-border-radius-default);
   background-color: var(--color-white, #ffffff);
   cursor: pointer;
   transition: all 0.2s ease-in-out;
@@ -83,7 +83,7 @@
 
 .dropdown-input--disabled {
   background-color: var(--color-slate-100);
-  border-color: var(--color-slate-300, #D1D5DB);
+  border-color: var(--color-slate-300, #d1d5db);
   cursor: not-allowed;
 }
 
@@ -104,10 +104,11 @@
   z-index: 1000;
   width: 100%;
   background-color: var(--color-white);
-border: 1px solid var(--color-neutral-400);
-  border-top: 1px solid var(--color-neutral-400);
+  border: 1px solid var(--color-border-subtle);
   border-radius: var(--multiselect-border-radius, 0.75rem);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
   max-height: var(--multiselect-size-menu-max-height, 17.25rem);
   overflow-y: auto;
   padding: var(--spacing-padding-px-0);

package/src/styles/components/forms.css

@@ -1,10 +1,10 @@
 /* Styles Input centralisés: consomment uniquement des variables CSS issues de Style Dictionary */
 
 .input-field {
-  font-family: var(--typography-font-family-sans, Inter,system-ui,sans-serif);
+  font-family: var(--typography-font-family-sans, Inter, system-ui, sans-serif);
   font-size: var(--input-font-size-default, 1rem);
   line-height: var(--input-line-height-default, 1.5rem);
-  border-radius: 0.375rem;
+  border-radius: var(--input-border-radius-default);
   border-width: 1px;
   border-style: solid;
   padding: var(--input-padding-vertical, 0.5rem) var(--input-padding-horizontal, 0.75rem);
@@ -18,6 +18,7 @@
 .input-wrapper {
   position: relative;
   width: 100%;
+  height: 42px;
 }
 
 .input-icon {
@@ -29,15 +30,23 @@
   height: var(--input-search-iconSize, 1rem);
 }
 
-.input-icon--leading { left: var(--input-padding-horizontal, 0.75rem); }
-.input-icon--trailing { right: var(--input-padding-horizontal, 0.75rem); }
+.input-icon--leading {
+  left: var(--input-padding-horizontal, 0.75rem);
+}
+.input-icon--trailing {
+  right: var(--input-padding-horizontal, 0.75rem);
+}
 
 .input-field--with-icon.input-field--icon-leading {
-  padding-left: calc(var(--input-padding-horizontal, 0.75rem) + var(--input-search-iconSize, 1rem) + 0.5rem);
+  padding-left: calc(
+    var(--input-padding-horizontal, 0.75rem) + var(--input-search-iconSize, 1rem) + 0.5rem
+  );
 }
 
 .input-field--with-icon.input-field--icon-trailing {
-  padding-right: calc(var(--input-padding-horizontal, 0.75rem) + var(--input-search-iconSize, 1rem) + 0.5rem);
+  padding-right: calc(
+    var(--input-padding-horizontal, 0.75rem) + var(--input-search-iconSize, 1rem) + 0.5rem
+  );
 }
 
 .input-field:focus {
@@ -47,7 +56,7 @@
 /* État par défaut */
 .input-field--default {
   background-color: var(--color-white);
-  border-color: var(--color-slate-300);
+  border-color: var(--color-tuna-500);
   color: var(--color-slate-900);
 }
 
@@ -110,7 +119,7 @@
 }
 
 .input-showcase h1 {
-  font-family: var(--typography-font-family-sans, Inter,system-ui,sans-serif);
+  font-family: var(--typography-font-family-sans, Inter, system-ui, sans-serif);
   font-size: var(--typography-font-size-2xl, 1.5re);
   font-weight: var(--font-weight-font-bold);
   color: var(--color-slate-900);
@@ -118,7 +127,7 @@
 }
 
 .input-showcase h2 {
-  font-family: var(--typography-font-family-sans, Inter,system-ui,sans-serif);
+  font-family: var(--typography-font-family-sans, Inter, system-ui, sans-serif);
   font-size: var(--typography-font-size-lg, 1.125rem);
   font-weight: var(--font-weight-font-medium);
   color: var(--color-slate-700);
@@ -143,5 +152,3 @@
   width: 100%;
   max-width: 300px;
 }
-
-

package/src/styles/components/organism/multiple-quotation-docket.css

@@ -0,0 +1,222 @@
+/* Multiple Quotation Docket Component */
+.multiple-quotation-docket {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-6);
+  width: 100%;
+}
+
+/* Header */
+.multiple-quotation-docket__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.multiple-quotation-docket__title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-gap-2);
+}
+
+.multiple-quotation-docket__title-text {
+  color: var(--color-text-default, #262626);
+  font-family: var(--font-font-family-heading, Satoshi);
+  font-size: var(--font-size-text-xl, 20px);
+  font-style: normal;
+  font-weight: var(--font-weight-font-bold, 700);
+  line-height: var(--font-leading-leading-lg, 28px);
+  letter-spacing: var(--font-tracking-tracking-normal, 0);
+}
+
+.multiple-quotation-docket__more-options {
+  cursor: pointer;
+}
+
+/* Services List */
+.multiple-quotation-docket__services {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-6);
+  width: 100%;
+}
+
+.multiple-quotation-docket__service {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-4);
+  width: 100%;
+}
+
+.multiple-quotation-docket__service-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.multiple-quotation-docket__service-title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-gap-2);
+}
+
+.multiple-quotation-docket__section-bar {
+  width: 3px;
+  height: 20px;
+  background-color: var(--color-elevation-brand-subtle);
+  flex-shrink: 0;
+}
+
+/* Details */
+.multiple-quotation-docket__details {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-3);
+  padding-left: var(--spacing-gap-gap-3);
+  width: 100%;
+}
+
+.multiple-quotation-docket__error {
+  width: 100%;
+}
+
+.multiple-quotation-docket__service-name {
+  width: 100%;
+}
+
+.multiple-quotation-docket__date-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-1);
+  width: 100%;
+}
+
+.multiple-quotation-docket__date-range {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-gap-2);
+}
+
+.multiple-quotation-docket__client-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-1);
+  width: 100%;
+}
+
+.multiple-quotation-docket__client-type {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-gap-0-5);
+}
+
+.multiple-quotation-docket__guests {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-1);
+}
+
+.multiple-quotation-docket__children {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-gap-2);
+}
+
+.multiple-quotation-docket__child {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-gap-2);
+}
+
+.multiple-quotation-docket__child-age {
+  color: var(--color-text-subtle);
+  opacity: 0.7;
+}
+
+.multiple-quotation-docket__room-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-2);
+  width: 100%;
+}
+
+.multiple-quotation-docket__meal-plan {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-gap-2);
+}
+
+.multiple-quotation-docket__additional-details {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-1);
+}
+
+.multiple-quotation-docket__divider {
+  width: 0;
+  height: 14px;
+  border-left: 0.5px solid var(--color-border-medium);
+}
+
+/* Total Section */
+.multiple-quotation-docket__total {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-2);
+  background-color: var(--color-elevation-level-2);
+  padding: var(--spacing-padding-py-0) var(--spacing-padding-px-0);
+  width: 100%;
+}
+
+.multiple-quotation-docket__total-line {
+  height: 0;
+  border-top: 0.5px solid var(--color-border-medium);
+  width: 100%;
+}
+
+.multiple-quotation-docket__total-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-padding-px-0) var(--spacing-padding-px-2);
+  width: 100%;
+}
+
+.multiple-quotation-docket__total-prices {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--spacing-gap-gap-1);
+}
+
+/* Actions */
+.multiple-quotation-docket__actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-4);
+  width: 100%;
+}
+
+.multiple-quotation-docket__action-group {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  gap: var(--spacing-gap-gap-2);
+  width: 100%;
+}
+
+.multiple-quotation-docket__action-button {
+  width: 100%;
+}
+
+.multiple-quotation-docket__action-button--flex {
+  flex: 1;
+  min-width: 0;
+}
+
+.multiple-quotation-docket__action-button--book {
+  width: 162px;
+  flex-shrink: 0;
+}