mautourco-components 0.2.15 → 0.2.17

package/dist/components/organisms/TabCancellationPolicy/TabCancellationPolicyLayout/TabCancellationPolicyLayout.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { IconName } from '../../../atoms/Icon/Icon';
+import './TabCancellationPolicyLayout.css';
+interface TabCancellationPolicyLayoutProps {
+    title: string;
+    icon: IconName;
+    isOnRequest: boolean;
+    children: React.ReactNode;
+    image: string;
+    header: React.ReactNode;
+}
+export default function TabCancellationPolicyLayout(props: TabCancellationPolicyLayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/organisms/TabCancellationPolicy/TabCancellationPolicyLayout/TabCancellationPolicyLayout.js

@@ -0,0 +1,19 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Chip from '../../../atoms/Chip/Chip';
+import TextWithIcon from '../../../molecules/TextWithIcon/TextWithIcon';
+import './TabCancellationPolicyLayout.css';
+export default function TabCancellationPolicyLayout(props) {
+    var title = props.title, icon = props.icon, isOnRequest = props.isOnRequest, children = props.children, image = props.image, header = props.header;
+    return (_jsxs("div", __assign({ className: "details-cancellation-policy__layout" }, { children: [_jsxs(TextWithIcon, __assign({ icon: icon, color: isOnRequest ? 'yellow' : 'accent', textVariant: "bold" }, { children: [title, isOnRequest && _jsx(Chip, __assign({ color: "yellow" }, { children: "On request" }))] })), _jsxs("div", __assign({ className: "details-cancellation-policy__layout-flex" }, { children: [_jsx("figure", { children: _jsx("img", { src: image, alt: title, width: 400, height: 400 }) }), _jsxs("div", __assign({ className: "details-cancellation-policy__layout-content" }, { children: [_jsx("div", __assign({ className: "details-cancellation-policy__layout-content-header" }, { children: header })), _jsx("div", __assign({ className: "details-cancellation-policy__layout-content-body" }, { children: children }))] }))] }))] })));
+}

package/dist/components/organisms/TabCancellationPolicy/index.d.ts

@@ -0,0 +1,6 @@
+export * from './CancellationBody';
+export * from './CancellationHeader';
+export * from './TabCancellationPolicy';
+export type { CancellationAccomProps } from './CancellationAccom';
+export type { CancellationExcursionProps } from './CancellationExcursion';
+export type { CancellationTransferProps } from './CancellationTransfer';

package/dist/components/organisms/TabCancellationPolicy/index.js

@@ -0,0 +1,3 @@
+export * from './CancellationBody';
+export * from './CancellationHeader';
+export * from './TabCancellationPolicy';

package/dist/components/organisms/Table/columns/booking-columns.js

@@ -45,7 +45,7 @@ export var bookingColumns = function (_a) {
             width: 260,
             cell: function (value) {
                 var dates = value;
-                return _jsx(DateDisplay, { date: dates });
+                return _jsx(DateDisplay, { dates: dates });
             },
         },
         {

package/dist/components/organisms/Table/columns/detail-resume-columns.js

@@ -104,7 +104,7 @@ export var detailResumeColumns = function () {
                         date = [otherService.service_date];
                         break;
                 }
-                return _jsx(DateDisplay, { date: date });
+                return _jsx(DateDisplay, { dates: date });
             },
         },
         {

package/dist/components/organisms/Table/columns/quotation-columns.js

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Button from '@/src/components/atoms/Button/Button';
 import Chip from '@/src/components/atoms/Chip/Chip';
 import { Text } from '@/src/components/atoms/Typography/Typography';
@@ -56,7 +56,7 @@ export var quotationColumns = function (_a) {
             width: 260,
             cell: function (value) {
                 var dates = value;
-                return _jsx(DateDisplay, { date: dates });
+                return _jsx(DateDisplay, { dates: dates });
             },
         },
         {
@@ -72,7 +72,7 @@ export var quotationColumns = function (_a) {
             header: 'Created by',
             key: 'created_by',
             width: 160,
-            cell: function (value) { return (_jsx(Text, __assign({ variant: "medium", size: "sm" }, { children: value }))); },
+            cell: function (value, raw) { return (_jsxs(_Fragment, { children: [_jsxs(Text, __assign({ variant: "medium", size: "sm", leading: "4" }, { children: [raw.file_name, ","] })), _jsx(Text, __assign({ variant: "bold", size: "sm", leading: "4" }, { children: value }))] })); },
         },
         {
             header: '',

package/dist/components/organisms/Timeline/Timeline.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ServiceAccommodationProps } from '../../molecules/TimelineItem/ServiceAccommodation';
+import { ServiceExcursionProps } from '../../molecules/TimelineItem/ServiceExcursion';
+import { ServiceTransferProps } from '../../molecules/TimelineItem/ServiceTransfer';
+export interface TimelineServices {
+    type: 'transfer' | 'accommodation' | 'excursion';
+    data: ServiceTransferProps | ServiceAccommodationProps | ServiceExcursionProps;
+}
+export interface TimelineProps {
+    arrival: string;
+    departure: string;
+    services: TimelineServices[];
+    className?: string;
+}
+export declare const Timeline: React.FC<TimelineProps>;

package/dist/components/organisms/Timeline/Timeline.js

@@ -0,0 +1,20 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '@/src/lib/utils';
+import { Text } from '../../atoms/Typography/Typography';
+import TextWithIcon from '../../molecules/TextWithIcon/TextWithIcon';
+import TimelineItem from '../../molecules/TimelineItem/TimelineItem';
+export var Timeline = function (props) {
+    var arrival = props.arrival, departure = props.departure, services = props.services, className = props.className;
+    return (_jsxs("div", __assign({ className: cn('space-y-10', className) }, { children: [_jsxs(TextWithIcon, __assign({ icon: "arrival", color: "accent", iconSize: "lg" }, { children: ["Arrival :", ' ', _jsx(Text, __assign({ variant: "regular", size: "lg", leading: "5", color: "default", as: "span" }, { children: arrival }))] })), _jsx("div", __assign({ className: "overflow-x-auto" }, { children: _jsx("div", __assign({ className: "flex gap-x-3 pb-8 2xl:pb-0" }, { children: services.map(function (service, index) { return (_jsxs(TimelineItem, { children: [service.type === 'transfer' && (_jsx(TimelineItem.Transfer, __assign({}, service.data))), service.type === 'accommodation' && (_jsx(TimelineItem.Accommodation, __assign({}, service.data))), service.type === 'excursion' && (_jsx(TimelineItem.Excursion, __assign({}, service.data)))] }, "tm-".concat(index))); }) })) })), _jsxs(TextWithIcon, __assign({ icon: "departure", color: "accent", iconSize: "lg" }, { children: ["Departure :", ' ', _jsx(Text, __assign({ variant: "regular", size: "lg", leading: "5", color: "default", as: "span" }, { children: departure }))] }))] })));
+};

package/dist/index.d.ts

@@ -14,8 +14,10 @@ export { default as Spinner } from './components/atoms/Spinner/Spinner';
 export { Heading, Text } from './components/atoms/Typography/Typography';
 export { ActionDropdown, type ActionDropdownItem, } from './components/molecules/ActionDropdown/ActionDropdown';
 export { DateDisplay } from './components/molecules/DateDisplay/DateDisplay';
+export { Breadcrumbs } from './components/molecules/Breadcrumbs/Breadcrumbs';
 export { default as CalendarInput } from './components/molecules/Calendar/CalendarInput';
 export { default as TimePicker } from './components/molecules/Calendar/TimePicker';
+export * from './components/molecules/DetailsInfo';
 export { default as FeatureRow } from './components/molecules/FeatureRow/FeatureRow';
 export { default as FromTo } from './components/molecules/FromTo/FromTo';
 export { default as LocationDropdown } from './components/molecules/LocationDropdown/LocationDropdown';
@@ -26,6 +28,7 @@ export { default as SectionTitle } from './components/molecules/SectionTitle/Sec
 export { default as ServiceSelector } from './components/molecules/ServiceSelector/ServiceSelector';
 export { default as Stepper } from './components/molecules/Stepper/Stepper';
 export { default as TextWithIcon } from './components/molecules/TextWithIcon/TextWithIcon';
+export { default as TimelineItem } from './components/molecules/TimelineItem/TimelineItem';
 export { Illustration } from './components/atoms/Illustration/Illustration';
 export { default as TableServiceItem } from './components/molecules/TableServiceItem';
 export { default as CarBookingCard } from './components/organisms/CarBookingCard/CarBookingCard';
@@ -38,7 +41,9 @@ export { default as PaxSelector } from './components/organisms/PaxSelector/PaxSe
 export { QuoteHeader } from './components/organisms/QuoteHeader/QuoteHeader';
 export { default as RoundTrip } from './components/organisms/RoundTrip/RoundTrip';
 export { default as SearchBarTransfer } from './components/organisms/SearchBarTransfer/SearchBarTransfer';
+export * from './components/organisms/TabCancellationPolicy';
 export * from './components/organisms/Table';
+export { Timeline } from './components/organisms/Timeline/Timeline';
 export { TopNavigation } from './components/organisms/TopNavigation/TopNavigation';
 export { default as TransferLine } from './components/organisms/TransferLine/TransferLine';
 export { default as ButtonSpinner } from './components/atoms/Spinner/variants/ButtonSpinner';
@@ -68,8 +73,14 @@ export type { RoundTripData, RoundTripProps, RoundTripTransfer, } from './compon
 export type { SearchBarTransferData, SearchBarTransferProps, TransferMode, } from './components/organisms/SearchBarTransfer/SearchBarTransfer';
 export type { TopNavigationProps } from './components/organisms/TopNavigation/TopNavigation';
 export type { TransferLineData, TransferLineProps, TransferType, } from './components/organisms/TransferLine/TransferLine';
+export type { BreadcrumbsItem, BreadcrumbsProps, } from './components/molecules/Breadcrumbs/Breadcrumbs';
 export type { FromToProps } from './components/molecules/FromTo/FromTo';
 export type { SectionTitleProps } from './components/molecules/SectionTitle/SectionTitle';
 export type { DetailsColProps, ItemColProps, RowAccommodationProps, RowExcursionProps, RowTransferProps, } from './components/molecules/TableServiceItem';
+export type { ServiceAccommodationProps } from './components/molecules/TimelineItem/ServiceAccommodation';
+export type { ServiceExcursionProps } from './components/molecules/TimelineItem/ServiceExcursion';
+export type { ServiceTransferProps } from './components/molecules/TimelineItem/ServiceTransfer';
+export type { TimelineHeaderProps } from './components/molecules/TimelineItem/TimelineHeader';
 export type { QuoteHeaderProps } from './components/organisms/QuoteHeader/QuoteHeader';
+export type { TimelineProps, TimelineServices, } from './components/organisms/Timeline/Timeline';
 export * from './types/table';

package/dist/index.js

@@ -16,8 +16,10 @@ export { Heading, Text } from './components/atoms/Typography/Typography';
 export { ActionDropdown, } from './components/molecules/ActionDropdown/ActionDropdown';
 export { DateDisplay } from './components/molecules/DateDisplay/DateDisplay';
 // Molecules - Composed components
+export { Breadcrumbs } from './components/molecules/Breadcrumbs/Breadcrumbs';
 export { default as CalendarInput } from './components/molecules/Calendar/CalendarInput';
 export { default as TimePicker } from './components/molecules/Calendar/TimePicker';
+export * from './components/molecules/DetailsInfo';
 export { default as FeatureRow } from './components/molecules/FeatureRow/FeatureRow';
 export { default as FromTo } from './components/molecules/FromTo/FromTo';
 export { default as LocationDropdown } from './components/molecules/LocationDropdown/LocationDropdown';
@@ -28,6 +30,7 @@ export { default as SectionTitle } from './components/molecules/SectionTitle/Sec
 export { default as ServiceSelector } from './components/molecules/ServiceSelector/ServiceSelector';
 export { default as Stepper } from './components/molecules/Stepper/Stepper';
 export { default as TextWithIcon } from './components/molecules/TextWithIcon/TextWithIcon';
+export { default as TimelineItem } from './components/molecules/TimelineItem/TimelineItem';
 // Organisms - Complex components
 export { Illustration } from './components/atoms/Illustration/Illustration';
 export { default as TableServiceItem } from './components/molecules/TableServiceItem';
@@ -41,7 +44,9 @@ export { default as PaxSelector } from './components/organisms/PaxSelector/PaxSe
 export { QuoteHeader } from './components/organisms/QuoteHeader/QuoteHeader';
 export { default as RoundTrip } from './components/organisms/RoundTrip/RoundTrip';
 export { default as SearchBarTransfer } from './components/organisms/SearchBarTransfer/SearchBarTransfer';
+export * from './components/organisms/TabCancellationPolicy';
 export * from './components/organisms/Table';
+export { Timeline } from './components/organisms/Timeline/Timeline';
 export { TopNavigation } from './components/organisms/TopNavigation/TopNavigation';
 export { default as TransferLine } from './components/organisms/TransferLine/TransferLine';
 // Spinner Variants

package/dist/types/table/action-dropdown-type.types.d.ts

@@ -1,5 +1,6 @@
 export declare enum ActionDropdownType {
     ADD_ITEM = "add_item",
     SEND_VIA_MAIL = "send_via_mail",
+    CANCEL_SERVICES = "cancel_services",
     DELETE_QUOTE = "delete_quote"
 }

package/dist/types/table/action-dropdown-type.types.js

@@ -2,5 +2,6 @@ export var ActionDropdownType;
 (function (ActionDropdownType) {
     ActionDropdownType["ADD_ITEM"] = "add_item";
     ActionDropdownType["SEND_VIA_MAIL"] = "send_via_mail";
+    ActionDropdownType["CANCEL_SERVICES"] = "cancel_services";
     ActionDropdownType["DELETE_QUOTE"] = "delete_quote";
 })(ActionDropdownType || (ActionDropdownType = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mautourco-components",
-  "version": "0.2.15",
+  "version": "0.2.17",
   "private": false,
   "description": "Bibliothèque de composants Motorco pour le redesign",
   "main": "dist/index.js",

package/src/components/atoms/Icon/icons/BusIcon.tsx

@@ -33,11 +33,15 @@ const BusIcon: React.FC<BusIconProps> = ({ size = 'md', className = '', color })
   const classes = `${sizeClasses} ${colorClass} ${className}`;
 
   return (
-    <svg className={classes} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      className={classes}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
       <g clip-path="url(#clip0_7033_40084)">
         <path
           d="M12.5821 8.08301H3.41512V11.333C3.41512 11.6552 3.67694 11.917 3.99911 11.917H11.9991C12.3211 11.9168 12.5821 11.6551 12.5821 11.333V8.08301ZM5.33895 9.25L5.41512 9.25391C5.79348 9.29216 6.08895 9.61156 6.08895 10C6.08895 10.3884 5.79348 10.7078 5.41512 10.7461L5.33895 10.75H5.33211C4.9179 10.75 4.58211 10.4142 4.58211 10C4.58211 9.58579 4.9179 9.25 5.33211 9.25H5.33895ZM10.672 9.25C11.0862 9.25 11.422 9.58579 11.422 10C11.422 10.4142 11.0862 10.75 10.672 10.75H10.6651C10.2511 10.7498 9.91512 10.4141 9.91512 10C9.91512 9.5859 10.2511 9.25018 10.6651 9.25H10.672ZM3.99911 2.75C3.67705 2.75 3.4153 3.01099 3.41512 3.33301V6.58301H12.5821V3.33301C12.5819 3.0111 12.321 2.75018 11.9991 2.75H3.99911ZM9.33211 3.25C9.74633 3.25 10.0821 3.58579 10.0821 4C10.0821 4.41421 9.74633 4.75 9.33211 4.75H6.66512C6.25106 4.74982 5.91512 4.41411 5.91512 4C5.91512 3.58589 6.25106 3.25018 6.66512 3.25H9.33211ZM14.0821 11.333C14.0821 12.2187 13.5284 12.973 12.7491 13.2744V14C12.7491 14.4141 12.4132 14.7498 11.9991 14.75C11.5849 14.75 11.2491 14.4142 11.2491 14V13.417H4.74911V14C4.74911 14.4141 4.41317 14.7498 3.99911 14.75C3.58489 14.75 3.24911 14.4142 3.24911 14V13.2754C2.46934 12.9742 1.91512 12.219 1.91512 11.333V5.21387L1.66708 5.33789C1.29669 5.52273 0.846371 5.37226 0.661216 5.00195C0.476074 4.63149 0.626713 4.18131 0.997153 3.99609L1.91512 3.53613V3.33301C1.9153 2.18256 2.84862 1.25 3.99911 1.25H11.9991C13.1494 1.25018 14.0819 2.18267 14.0821 3.33301V3.53613L15.0011 3.99609C15.3714 4.18142 15.5212 4.63156 15.336 5.00195C15.1508 5.37235 14.7006 5.52293 14.3302 5.33789L14.0821 5.21289V11.333Z"
-          fill="#303642"
+          fill="currentColor"
         />
       </g>
       <defs>

package/src/components/atoms/Tab/Tab.css

@@ -16,7 +16,8 @@
   border: none;
   border-radius: calc(var(--tab-border-radius-default, 0) / 16);
   border-bottom-style: solid;
-  border-bottom-width: calc(var(--tab-border-width-default, 4rem) / 16);
+  /* border-bottom-width: calc(var(--tab-border-width-default, 4rem) / 16); */
+  border-bottom-width: 4px;
   border-bottom-color: var(--tab-color-normal-default-border, #e5e5e5);
   background-color: var(--tab-color-normal-default-background, #ffffff);
   color: var(--color-text-state-default, #737373);
@@ -32,8 +33,7 @@
 
 .tab:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 calc(2rem / 16)
-    var(--tab-color-normal-focused-border, #e5e5e5);
+  box-shadow: 0 0 0 calc(2rem / 16) var(--tab-color-normal-focused-border, #e5e5e5);
   background-color: var(--tab-color-normal-focused-background, #ffffff);
 }
 
@@ -67,8 +67,7 @@
 }
 
 .tab--active:focus-visible {
-  box-shadow: 0 0 0 calc(2rem / 16)
-    var(--tab-color-active-focused-border, #042c2f);
+  box-shadow: 0 0 0 calc(2rem / 16) var(--tab-color-active-focused-border, #042c2f);
   background-color: var(--tab-color-active-focused-background, #ffffff);
 }
 
@@ -141,7 +140,6 @@
   --tab-width: var(--tab-outline-sm-focus-width, 121rem);
   --tab-height: var(--tab-outline-sm-focus-height, 59rem);
   border-radius: calc(var(--border-radius-rounded-sm, 4rem) / 16);
-  border-top: calc(var(--border-border, 1rem) / 16)
-    solid var(--color-atoll-green-800, #0f7173);
+  border-top: calc(var(--border-border, 1rem) / 16) solid
+    var(--color-atoll-green-800, #0f7173);
 }
-

package/src/components/atoms/Typography/Typography.tsx

@@ -37,7 +37,7 @@ interface HeadingProps extends BaseProps {
   as?: keyof React.JSX.IntrinsicElements;
 }
 
-interface TextProps extends BaseProps {
+export interface TextProps extends BaseProps {
   size?: BodySizeInput;
   as?: keyof React.JSX.IntrinsicElements;
 }
@@ -92,11 +92,18 @@ const mapLeadingToToken = (
   return `leading-${leading}` as 'leading-4' | 'leading-5' | 'leading-6' | 'leading-7';
 };
 
-const getBodyClass = (size: BodyTokenSize, leading?: Leading): { className: string; lineHeightHandled: boolean } => {
+const getBodyClass = (
+  size: BodyTokenSize,
+  leading?: Leading
+): { className: string; lineHeightHandled: boolean } => {
   const availableLeadings = tokenBodyLeadings[size];
-  const desiredLeading = leading ? mapLeadingToToken(leading) : mapLeadingToToken(defaultBodyLeading[size]);
+  const desiredLeading = leading
+    ? mapLeadingToToken(leading)
+    : mapLeadingToToken(defaultBodyLeading[size]);
 
-  const resolvedLeading = availableLeadings.includes(desiredLeading) ? desiredLeading : availableLeadings[0];
+  const resolvedLeading = availableLeadings.includes(desiredLeading)
+    ? desiredLeading
+    : availableLeadings[0];
 
   return {
     className: `body-${size}-${resolvedLeading}`,
@@ -130,7 +137,12 @@ export const Heading: React.FC<HeadingProps> = ({
   const baseClass = headingTokenClass[level] ?? headingTokenClass[2];
   const variantClass = buildVariantClass(baseClass, variant);
 
-  const classes = [baseClass, variantClass, leading ? leadingFallback[leading] : '', className]
+  const classes = [
+    baseClass,
+    variantClass,
+    leading ? leadingFallback[leading] : '',
+    className,
+  ]
     .filter(Boolean)
     .join(' ');
 
@@ -155,10 +167,18 @@ export const Text: React.FC<TextProps> = ({
 }) => {
   const Tag = as || 'p';
   const normalizedSize = bodySizeAlias[size];
-  const { className: baseClass, lineHeightHandled } = getBodyClass(normalizedSize, leading);
+  const { className: baseClass, lineHeightHandled } = getBodyClass(
+    normalizedSize,
+    leading
+  );
   const variantClass = buildVariantClass(baseClass, variant);
 
-  const classes = [baseClass, variantClass, leading && !lineHeightHandled ? leadingFallback[leading] : '', className]
+  const classes = [
+    baseClass,
+    variantClass,
+    leading && !lineHeightHandled ? leadingFallback[leading] : '',
+    className,
+  ]
     .filter(Boolean)
     .join(' ');
 

package/src/components/molecules/ActionDropdown/ActionDropdown.tsx

@@ -7,6 +7,9 @@ import './ActionDropdown.css';
 export interface ActionDropdownItem {
   /** Label for the action dropdown item */
   label: string;
+  /** Disable the action dropdown item */
+  disabled?: boolean;
+
   /** Callback function to be called when the action dropdown item is clicked */
   onClick?: () => void;
 }
@@ -14,6 +17,8 @@ export interface ActionDropdownItem {
 export interface ActionDropdownProps {
   /** Data for the action dropdown */
   data: ActionDropdownItem[];
+  /** Trigger element */
+  children?: React.ReactNode;
 }
 
 /**
@@ -24,17 +29,23 @@ export interface ActionDropdownProps {
  * @param ActionDropdownProps
  * @returns
  */
-export const ActionDropdown: React.FC<ActionDropdownProps> = ({ data }) => {
+export const ActionDropdown: React.FC<ActionDropdownProps> = ({ data, children }) => {
   const [open, setOpen] = useState(false);
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger>
-        <button className="action-dropdown-trigger">
-          <Icon name="more-vertical" />
-        </button>
+        {children ?? (
+          <button className="action-dropdown-trigger">
+            <Icon name="more-vertical" />
+          </button>
+        )}
       </PopoverTrigger>
-      <PopoverContent className="action-dropdown" align="end">
+      <PopoverContent
+        className="action-dropdown"
+        align="end"
+        side="bottom"
+        avoidCollisions={false}>
         {data.map((item, index) => (
           <button
             key={`ad-${index}`}

package/src/components/molecules/Breadcrumbs/Breadcrumbs.css

@@ -0,0 +1,10 @@
+.breadcrumbs {
+  @apply flex items-center gap-x-2;
+  li {
+    @apply flex items-center gap-x-2;
+  }
+  li:not(:first-child) {
+    @apply pl-2;
+    border-left: solid 1px var(--divider-color-default);
+  }
+}

package/src/components/molecules/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,47 @@
+import { cn } from '@/src/lib/utils';
+import React from 'react';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+import './Breadcrumbs.css';
+
+export interface BreadcrumbsItem {
+  label: string;
+  onClick: () => void;
+}
+
+export interface BreadcrumbsProps {
+  items: BreadcrumbsItem[];
+  onBack?: () => void;
+}
+
+export const Breadcrumbs: React.FC<BreadcrumbsProps> = (props) => {
+  const { items, onBack } = props;
+
+  return (
+    <ol className="breadcrumbs">
+      <Text
+        variant="medium"
+        size="sm"
+        leading="4"
+        as="li"
+        className="cursor-pointer"
+        onClick={onBack}>
+        <Icon name="chevron-left" size="sm" />
+        Back
+      </Text>
+      {items.map((item, index) => (
+        <Text
+          key={`bc-${index}`}
+          as="li"
+          variant="medium"
+          size="sm"
+          onClick={item.onClick}
+          color={index === items.length - 1 ? 'accent' : 'default'}
+          leading="4"
+          className={cn(index < items.length - 1 && 'cursor-pointer')}>
+          {item.label}
+        </Text>
+      ))}
+    </ol>
+  );
+};

package/src/components/molecules/DateDisplay/DateDisplay.tsx

@@ -1,24 +1,38 @@
 import { format, isValid } from 'date-fns';
 import React, { Fragment, useMemo } from 'react';
 import Icon from '../../atoms/Icon/Icon';
-import { Text } from '../../atoms/Typography/Typography';
+import { Text, TextProps } from '../../atoms/Typography/Typography';
 
 export interface DateDisplayProps {
   /** Dates to display */
-  date: string[] | Date[];
+  dates: string[] | Date[];
+
+  /** Size of the arrow icon */
+  arrowSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+  /** Size of the calendar icon */
+  calendarSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+  /** Size of the text */
+  textSize?: TextProps['size'];
 }
 
 /**
  * A component for displaying a list of dates in a readable format.
  *
  * @example
- * <DateDisplay date={['2025-01-01', '2025-01-02']} />
+ * <DateDisplay dates={['2025-01-01', '2025-01-02']} />
  * @param DateDisplayProps
  * @returns
  */
-export const DateDisplay: React.FC<DateDisplayProps> = ({ date }) => {
+export const DateDisplay: React.FC<DateDisplayProps> = ({
+  dates,
+  arrowSize = 'sm',
+  calendarSize = 'sm',
+  textSize = 'sm',
+}) => {
   const formattedDate = useMemo(() => {
-    return date.map((d) => {
+    return dates.map((d) => {
       const dateObj = new Date(d);
       // Check if the date is valid then format it to dd/MM/yyyy format
       if (isValid(dateObj)) {
@@ -27,19 +41,21 @@ export const DateDisplay: React.FC<DateDisplayProps> = ({ date }) => {
       // If the date is not valid, return the original date
       return d;
     }) as string[];
-  }, [date]);
+  }, [dates]);
 
   return (
     <div className="flex items-center gap-x-3">
       {formattedDate.map((date, index) => (
         <Fragment key={`dd-${index}`}>
           <span className="flex items-center gap-x-2">
-            <Icon name="calendar2" size="sm" />
-            <Text variant="medium" size="sm">
+            <Icon name="calendar2" size={calendarSize} />
+            <Text variant="medium" size={textSize}>
               {date}
             </Text>
           </span>
-          {formattedDate.length > 1 && index === 0 && <Icon name="arrow-right-outline" size="sm" />}
+          {formattedDate.length > 1 && index === 0 && (
+            <Icon name="arrow-right-outline" size={arrowSize} />
+          )}
         </Fragment>
       ))}
     </div>

package/src/components/molecules/DetailsInfo/DetailsAction.tsx

@@ -0,0 +1,55 @@
+import { ActionDropdownType } from '@/src/types/table';
+import React from 'react';
+import Button from '../../atoms/Button/Button';
+import { ActionDropdown, ActionDropdownItem } from '../ActionDropdown/ActionDropdown';
+
+export interface DetailsActionProps {
+  /** Data for the action dropdown */
+  data?: ActionDropdownItem[];
+  onAction?: (action: ActionDropdownType) => void;
+}
+
+export const DetailsAction: React.FC<DetailsActionProps> = (props) => {
+  const { data = [], onAction } = props;
+  return (
+    <ActionDropdown
+      data={
+        data.length > 0
+          ? data
+          : [
+              {
+                label: 'Add item',
+                onClick: () => {
+                  onAction?.(ActionDropdownType.ADD_ITEM);
+                },
+              },
+              {
+                label: 'Cancel services',
+                onClick: () => {
+                  onAction?.(ActionDropdownType.CANCEL_SERVICES);
+                },
+              },
+              {
+                label: 'Send via mail',
+                onClick: () => {
+                  onAction?.(ActionDropdownType.SEND_VIA_MAIL);
+                },
+              },
+              {
+                label: 'Delete quote',
+                onClick: () => {
+                  onAction?.(ActionDropdownType.DELETE_QUOTE);
+                },
+              },
+            ]
+      }>
+      <Button
+        variant="outline-secondary"
+        trailingIcon="chevron-down"
+        size="sm"
+        className="w-[144px] !justify-between !px-[14px]">
+        More options
+      </Button>
+    </ActionDropdown>
+  );
+};

package/src/components/molecules/DetailsInfo/DetailsAgency.css

@@ -0,0 +1,21 @@
+.details-agency {
+  @apply grid gap-y-4;
+
+  width: 290px;
+  background-color: var(--card-color-background-default);
+  border-radius: var(--card-border-radius-default);
+  padding: var(--card-spacing-chill-padding-y) var(--card-spacing-chill-padding-x);
+  border: solid 1px var(--card-color-border-default);
+}
+
+.details-agency__content {
+  @apply grid gap-y-2;
+}
+
+.details-agency__content-item {
+  @apply flex items-center;
+}
+
+.details-agency__content-item-name {
+  flex: 0 0 150px;
+}