mautourco-components 0.2.9 → 0.2.10

package/src/components/organisms/Table/TableCell.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { TableRowData } from './Table';
+
+export type ColumnType<T = TableRowData> = {
+  header: string;
+  key: Extract<keyof T, string> | 'actions';
+  className?: string;
+  width?: number | string;
+  cell: (
+    value: T[Extract<keyof T, string>],
+    rawData: T,
+    index?: number
+  ) => React.ReactNode;
+};
+
+export interface TableCellProps<T = TableRowData> {
+  columns: ColumnType<T>[];
+  row: T;
+  rowIndex: number;
+}
+export const TableCell = <T extends TableRowData>(props: TableCellProps<T>) => {
+  const { columns, row, rowIndex } = props;
+  return (
+    <>
+      {columns.map((column, columnIndex) => (
+        <td
+          key={`cl-${rowIndex}-${columnIndex}`}
+          style={
+            column.width ? { minWidth: column.width, width: column.width } : undefined
+          }>
+          {column.key === 'actions' ? (
+            <div>{column.cell({} as T[Extract<keyof T, string>], row, rowIndex)}</div>
+          ) : (
+            column.cell(row[column.key], row, rowIndex)
+          )}
+        </td>
+      ))}
+    </>
+  );
+};

package/src/components/organisms/Table/columns/booking-columns.tsx

@@ -0,0 +1,118 @@
+import Button from '@/src/components/atoms/Button/Button';
+import Chip from '@/src/components/atoms/Chip/Chip';
+import { Text } from '@/src/components/atoms/Typography/Typography';
+import { ActionDropdown } from '@/src/components/molecules/ActionDropdown/ActionDropdown';
+import { DateDisplay } from '@/src/components/molecules/DateDisplay/DateDisplay';
+import { ActionDropdownType } from '@/src/types/table';
+import { BookingListItem } from '@/src/types/table/booking.types';
+import { ColumnType } from '../TableCell';
+import { actionDropdownData } from '../constant';
+
+export const bookingColumns: (params: {
+  onExpand: (value?: BookingListItem) => void;
+  onAction: (action: ActionDropdownType) => void;
+}) => ColumnType<BookingListItem>[] = ({ onExpand, onAction }) => [
+  {
+    header: 'Quote nb.',
+    key: 'booking_id',
+    width: 150,
+    cell: (value) => (
+      <Text variant="medium" size="sm">
+        {value as string}
+      </Text>
+    ),
+  },
+  {
+    header: 'Client name',
+    key: 'agency_name',
+    width: 150,
+    cell: (value) => (
+      <Text variant="medium" size="sm">
+        {value as string}
+      </Text>
+    ),
+  },
+  {
+    header: 'Type',
+    key: 'status',
+    width: 145,
+    cell: (value) => {
+      return (
+        <Text variant="medium" size="sm">
+          STD
+        </Text>
+      );
+    },
+  },
+  {
+    header: 'From → To',
+    key: 'date',
+    width: 260,
+    cell: (value) => {
+      const dates = value as string[];
+      return <DateDisplay date={dates} />;
+    },
+  },
+  {
+    header: 'No. of services',
+    key: 'pax_details',
+    width: 350,
+    cell: (value) => {
+      const paxDetails = value as BookingListItem['pax_details'];
+      const paxDetailsKeys = Object.keys(paxDetails);
+      if (paxDetailsKeys.length) {
+        return (
+          <div className="flex flex-wrap gap-2">
+            {paxDetailsKeys.map((key) => {
+              return (
+                <Chip
+                  label={`${key} ${paxDetails[key as keyof BookingListItem['pax_details']]}`}
+                  type={
+                    paxDetails[key as keyof BookingListItem['pax_details']] > 0
+                      ? 'filled'
+                      : 'outline'
+                  }
+                  color="accent"
+                  size="sm"
+                />
+              );
+            })}
+          </div>
+        );
+      }
+      return <></>;
+    },
+  },
+  {
+    header: 'Created by',
+    key: 'created_by',
+    width: 160,
+    cell: (value) => (
+      <Text variant="medium" size="sm">
+        {value as string}
+      </Text>
+    ),
+  },
+  {
+    header: '',
+    key: 'actions',
+    width: 232,
+    cell: (_value, raw) => {
+      return (
+        <div>
+          <div className="flex items-center gap-x-8">
+            <div className="flex items-center gap-x-3">
+              <Button variant="secondary" size="sm" className="w-[89px]">
+                Proforma
+              </Button>
+              <Button variant="outline-secondary" size="sm" className="w-[89px]">
+                Voucher
+              </Button>
+            </div>
+            <ActionDropdown data={actionDropdownData(onAction)} />
+          </div>
+        </div>
+      );
+    },
+  },
+];

package/src/components/organisms/Table/columns/detail-resume-columns.tsx

@@ -0,0 +1,226 @@
+import Chip from '@/src/components/atoms/Chip/Chip';
+import { Text } from '@/src/components/atoms/Typography/Typography';
+import { DateDisplay } from '@/src/components/molecules/DateDisplay/DateDisplay';
+import {
+  DetailResumeAccommodation,
+  DetailResumeExcursion,
+  DetailResumeItem,
+  DetailResumeOtherService,
+  DetailResumeTransfer,
+  ServiceType,
+} from '@/src/types/table';
+import { RowAccommodation } from '../../../molecules/TableServiceItem/RowAccommodation';
+import { RowExcursion } from '../../../molecules/TableServiceItem/RowExcursion';
+import { RowOtherServices } from '../../../molecules/TableServiceItem/RowOtherServices';
+import { RowTransfer } from '../../../molecules/TableServiceItem/RowTransfer';
+import { ColumnType } from '../TableCell';
+
+export const detailResumeColumns: () => ColumnType<DetailResumeItem>[] = () => {
+  return [
+    {
+      header: 'Item',
+      key: 'Type',
+      width: 268,
+      cell: (value, raw) => {
+        if (value === ServiceType.ACCOMMODATION) {
+          const accom = raw as DetailResumeAccommodation;
+          console.log(accom);
+          return (
+            <RowAccommodation.FirstCol
+              serviceName={accom.HotelName as string}
+              offers={accom.Offers}
+              status={accom.RoomStatus}
+            />
+          );
+        }
+        if (value === ServiceType.EXCURSION) {
+          const excursion = raw as DetailResumeExcursion;
+          return (
+            <RowExcursion.FirstCol serviceName={excursion.ExcursionName as string} />
+          );
+        }
+        if (value === ServiceType.TRANSFER) {
+          const transfer = raw as DetailResumeTransfer;
+          return (
+            <RowTransfer.FirstCol
+              serviceName={transfer.VehicleTypeName as string}
+              transferType={transfer.TransferType}
+              from={transfer.LocationFromName}
+              to={transfer.LocationToName}
+            />
+          );
+        }
+
+        if (value === ServiceType.OTHER_SERVICE) {
+          return <RowOtherServices.FirstCol />;
+        }
+        return <></>;
+      },
+    },
+    {
+      header: 'Details',
+      key: 'Type',
+      width: 400,
+      cell: (value, raw, index) => {
+        if (value === ServiceType.ACCOMMODATION) {
+          const accom = raw as DetailResumeAccommodation;
+          return (
+            <RowAccommodation.DetailsCol
+              data={{
+                RoomName: accom.RoomName,
+                Dates: accom.Dates,
+                ClientCategory: accom.ClientCategory,
+                MealPlan: accom.MealPlan,
+              }}
+              index={(index || 0) + 1}
+            />
+          );
+        }
+        if (value === ServiceType.EXCURSION) {
+          const excursion = raw as DetailResumeExcursion;
+          return (
+            <RowExcursion.DetailsCol
+              data={{
+                languages: excursion.AvailableLanguages,
+                duration: excursion.Duration,
+                accessibility: excursion.Accessibility,
+                transferType: excursion.TransferType,
+              }}
+            />
+          );
+        }
+        if (value === ServiceType.TRANSFER) {
+          const transfer = raw as DetailResumeTransfer;
+          return (
+            <RowTransfer.DetailsCol
+              data={{
+                carType: transfer.VehicleTypeName,
+                clientType: 'STD',
+              }}
+            />
+          );
+        }
+        if (value === ServiceType.OTHER_SERVICE) {
+          return <RowOtherServices.DetailsCol />;
+        }
+        return <></>;
+      },
+    },
+    {
+      header: 'Date',
+      key: 'Type',
+      width: 307,
+      cell: (value, raw) => {
+        let date: string[] = [];
+        switch (value) {
+          case ServiceType.ACCOMMODATION:
+            const accom = raw as DetailResumeAccommodation;
+            date = accom.Dates as string[];
+            break;
+          case ServiceType.EXCURSION:
+            const excursion = raw as DetailResumeExcursion;
+            date = [excursion.ServiceDate];
+            break;
+          case ServiceType.TRANSFER:
+            const transfer = raw as DetailResumeTransfer;
+            date = [transfer.TransferDate];
+            break;
+          case ServiceType.OTHER_SERVICE:
+            const otherService = raw as DetailResumeOtherService;
+            date = [otherService.service_date];
+            break;
+        }
+        return <DateDisplay date={date} />;
+      },
+    },
+    {
+      header: 'No. of pax',
+      key: 'Type',
+      width: 396,
+      cell: (value, raw) => {
+        const pax: Record<'Adult' | 'Teen' | 'Infant' | 'Child', number | undefined> = {
+          Adult: 0,
+          Teen: 0,
+          Infant: 0,
+          Child: 0,
+        };
+
+        switch (value) {
+          case ServiceType.ACCOMMODATION:
+          case ServiceType.EXCURSION:
+          case ServiceType.TRANSFER:
+            const item = raw as
+              | DetailResumeAccommodation
+              | DetailResumeExcursion
+              | DetailResumeTransfer;
+            pax.Adult = item.AdultCount;
+            pax.Teen = item.TeenCount;
+            pax.Infant = item.InfantCount;
+            pax.Child = item.ChildCount;
+            break;
+          case ServiceType.OTHER_SERVICE:
+            const otherService = raw as DetailResumeOtherService;
+            pax.Adult = otherService.adult_pax;
+            pax.Teen = otherService.teen_pax;
+            pax.Infant = otherService.infant_pax;
+            pax.Child = otherService.child_pax;
+            break;
+        }
+        return (
+          <div className="flex items-center gap-x-3">
+            {Object.keys(pax).map((k, index) => {
+              const count = pax[k as keyof typeof pax] ?? 0;
+              const type = count > 0 ? 'filled' : 'outline';
+              return (
+                <Chip
+                  key={`pax-${index}`}
+                  label={`${k} ${count}`}
+                  size="sm"
+                  color="accent"
+                  type={type}
+                  className="!px-3"
+                />
+              );
+            })}
+          </div>
+        );
+      },
+    },
+    {
+      header: 'Price',
+      key: 'Type',
+      width: 299,
+      cell: (value, raw) => {
+        let total: Record<'currency' | 'total', string | undefined> = {
+          currency: undefined,
+          total: undefined,
+        };
+
+        switch (value) {
+          case ServiceType.ACCOMMODATION:
+            const accom = raw as DetailResumeAccommodation;
+            total.currency = accom.Currency;
+            total.total = accom.Total;
+            break;
+          case ServiceType.EXCURSION:
+          case ServiceType.TRANSFER:
+            const item = raw as DetailResumeExcursion | DetailResumeTransfer;
+            total.currency = item.Currency;
+            total.total = item.TotalPrice;
+            break;
+          case ServiceType.OTHER_SERVICE:
+            const otherService = raw as DetailResumeOtherService;
+            total.currency = otherService.currency;
+            total.total = otherService.total_price;
+            break;
+        }
+
+        return (
+          <Text size="sm" variant="bold">
+            {total.currency} {total.total}
+          </Text>
+        );
+      },
+    },
+  ];
+};

package/src/components/organisms/Table/columns/index.ts

@@ -0,0 +1,11 @@
+import { bookingColumns } from './booking-columns';
+import { detailResumeColumns } from './detail-resume-columns';
+import { quotationColumns } from './quotation-columns';
+
+const columns = {
+  quotation: quotationColumns,
+  detailResume: detailResumeColumns,
+  booking: bookingColumns,
+};
+
+export { columns };

package/src/components/organisms/Table/columns/quotation-columns.tsx

@@ -0,0 +1,150 @@
+import Button from '@/src/components/atoms/Button/Button';
+import Chip from '@/src/components/atoms/Chip/Chip';
+import { Text } from '@/src/components/atoms/Typography/Typography';
+import { ActionDropdown } from '@/src/components/molecules/ActionDropdown/ActionDropdown';
+import { DateDisplay } from '@/src/components/molecules/DateDisplay/DateDisplay';
+import { cn } from '@/src/lib/utils';
+import { ActionDropdownType } from '@/src/types/table/action-dropdown-type.types';
+import { QuotationListItem } from '@/src/types/table/quotation.types';
+import { ColumnType } from '../TableCell';
+import { actionDropdownData, chipVariant, clientTypeMap } from '../constant';
+
+export const quotationColumns: (params: {
+  onExpand: (value?: QuotationListItem) => void;
+  onAction: (action: ActionDropdownType) => void;
+}) => ColumnType<QuotationListItem>[] = ({ onExpand, onAction }) => [
+  {
+    header: 'Quote nb.',
+    key: 'file_nb',
+    width: 150,
+    cell: (value) => (
+      <Text variant="medium" size="sm">
+        {value as string}
+      </Text>
+    ),
+  },
+  {
+    header: 'Client name',
+    key: 'agency_name',
+    width: 150,
+    cell: (value) => (
+      <Text variant="medium" size="sm">
+        {value as string}
+      </Text>
+    ),
+  },
+  {
+    header: 'File status',
+    key: 'status',
+    width: 160,
+    cell: (value, raw) => {
+      const isMultiple = raw.children && raw.children.length > 0;
+      return (
+        <Chip
+          color={isMultiple ? 'blue' : chipVariant[(value as string).toLowerCase()]}
+          size="sm">
+          {isMultiple ? 'Multiple' : (value as string)}
+        </Chip>
+      );
+    },
+  },
+  {
+    header: 'Type',
+    key: 'client_type',
+    width: 145,
+    cell: (value) => {
+      const clientType = clientTypeMap[value as string];
+      return (
+        <Text variant="medium" size="sm">
+          {clientType ?? value}
+        </Text>
+      );
+    },
+  },
+  {
+    header: 'From → To',
+    key: 'date',
+    width: 260,
+    cell: (value) => {
+      const dates = value as string[];
+      return <DateDisplay date={dates} />;
+    },
+  },
+  {
+    header: 'No. of services',
+    key: 'service_count',
+    width: 350,
+    cell: (value) => {
+      const { accom_count, transfer_count, tours_count } =
+        value as QuotationListItem['service_count'];
+      return (
+        <div className="flex flex-wrap gap-2">
+          <Chip
+            label={`Accomodation ${accom_count}`}
+            type={accom_count > 0 ? 'filled' : 'outline'}
+            color="accent"
+            size="sm"
+          />
+          <Chip
+            label={`Transfer ${transfer_count}`}
+            type={transfer_count > 0 ? 'filled' : 'outline'}
+            color="accent"
+            size="sm"
+          />
+          <Chip
+            label={`Excursion ${tours_count}`}
+            type={tours_count > 0 ? 'filled' : 'outline'}
+            color="accent"
+            size="sm"
+          />
+        </div>
+      );
+    },
+  },
+  {
+    header: 'Created by',
+    key: 'created_by',
+    width: 160,
+    cell: (value) => (
+      <Text variant="medium" size="sm">
+        {value as string}
+      </Text>
+    ),
+  },
+  {
+    header: '',
+    key: 'actions',
+    width: 232,
+    cell: (_value, raw) => {
+      const hasChildren = raw.children && raw.children.length > 0;
+      const isExpanded = raw.children?.some((child) => child.visible);
+      const buttonLabel = isExpanded ? 'See less' : 'See more';
+      const isOnRequest = raw.status.toLowerCase() === 'on request';
+
+      return (
+        <div>
+          {hasChildren ? (
+            <Button
+              variant="outline-primary"
+              size="sm"
+              trailingIcon="chevron-down"
+              className={cn('table__button', isExpanded && 'table__button-expanded')}
+              onClick={() => onExpand(raw)}>
+              {buttonLabel}
+            </Button>
+          ) : (
+            <div className="flex itemes-center gap-x-8">
+              <Button
+                variant={isOnRequest ? 'outline-secondary' : 'secondary'}
+                size="sm"
+                className="table__button">
+                {isOnRequest ? 'Request to book' : 'Book now'}
+              </Button>
+              <ActionDropdown data={actionDropdownData(onAction)} />
+            </div>
+          )}
+        </div>
+      );
+    },
+  },
+];

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

@@ -0,0 +1,31 @@
+import { ActionDropdownType } from '@/src/types/table';
+import { ChipProps } from '../../atoms/Chip/Chip';
+import { ActionDropdownItem } from '../../molecules/ActionDropdown/ActionDropdown';
+
+export const actionDropdownData: (
+  onAction: (action: ActionDropdownType) => void
+) => ActionDropdownItem[] = (onAction) => [
+  {
+    label: 'Add item',
+    onClick: () => onAction(ActionDropdownType.ADD_ITEM),
+  },
+  {
+    label: 'Send via mail',
+    onClick: () => onAction(ActionDropdownType.SEND_VIA_MAIL),
+  },
+  {
+    label: 'Delete quote',
+    onClick: () => onAction(ActionDropdownType.DELETE_QUOTE),
+  },
+];
+
+export const chipVariant: Record<string, ChipProps['color']> = {
+  'free sales': 'accent',
+  'on request': 'yellow',
+};
+
+export const clientTypeMap: Record<string, string> = {
+  'standard-client': 'STD',
+  honeymooners: 'HMN',
+  vip: 'VIP',
+};

package/src/components/organisms/Table/index.ts

@@ -0,0 +1,2 @@
+export * from './columns';
+export * from './Table';

package/src/components/ui/popover.tsx

@@ -1,23 +1,23 @@
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as React from 'react';
 
-import { cn } from "../../lib/utils"
+import { cn } from '../../lib/utils';
 
 function Popover({
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
 }
 
 function PopoverTrigger({
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
 }
 
 function PopoverContent({
   className,
-  align = "center",
+  align = 'center',
   sideOffset = 4,
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Content>) {
@@ -28,19 +28,19 @@ function PopoverContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden border-[var(--color-elevation-state-hover-subtle)]',
           className
         )}
         {...props}
       />
     </PopoverPrimitive.Portal>
-  )
+  );
 }
 
 function PopoverAnchor({
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
 }
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,45 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as React from 'react';
+
+import { cn } from '@/src/lib/utils';
+
+function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />;
+}
+
+function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-foreground bg-[var(--tooltip-color-background-default)] text-white animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+          className
+        )}
+        {...props}>
+        {children}
+        <TooltipPrimitive.Arrow className="bg-[var(--tooltip-color-background-default)] fill-[var(--tooltip-color-background-default)] z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };