@inorain_development/hotel-smarters-chat-ui 1.2.2 → 1.3.1

package/src/features/chat/components/reservation/reservation.native.tsx

@@ -0,0 +1,160 @@
+import { Fragment } from 'react';
+import { Image, Pressable, Text, View } from 'react-native';
+import { getThemeClasses } from '../../../../utils/theme.utils';
+import { getReservationStatusStyle } from '../../../../utils/reservation.utils';
+import { resolveText } from '../../../../utils/i18n.utils';
+import { useExpandableList } from '../../../../utils/use-expandable-list';
+import { Collapsible } from '../common/collapsible.native';
+import { CalendarIcon } from '../common/calendar-icon.native';
+import { ChevronIcon } from '../common/chevron-icon.native';
+import { ItemAction, Theme } from '../../model/chat.model';
+import type { ChatComponentProps } from '../../model/chat.model';
+import type { ReservationListItem, ReservationRow } from './reservation.model';
+
+export function Reservation({
+  data,
+  theme = Theme.Dark,
+  language,
+  actionLabel,
+  onAction,
+  onSelect,
+}: ChatComponentProps<ReservationListItem>) {
+  const c = getThemeClasses(theme);
+  const list = Array.isArray(data) ? data[0] : data;
+  const reservations = list?.reservations ?? [];
+  const { head, rest, expanded, hasMore, toggle } = useExpandableList(reservations);
+
+  if (!list) return null;
+
+  const onSelectRow = onSelect as ((row: ReservationRow) => void) | undefined;
+  const title = resolveText(list.title, language);
+  const subtitle = list.subtitle ? resolveText(list.subtitle, language) : undefined;
+  const totalLabel = list.totalLabel ? resolveText(list.totalLabel, language) : undefined;
+  const action = list.actionLabel
+    ? resolveText(list.actionLabel, language)
+    : typeof actionLabel === 'function'
+      ? actionLabel(list)
+      : actionLabel;
+  const headerStyle = getReservationStatusStyle(list.status, theme);
+  const headerStatusLabel = list.statusLabel ? resolveText(list.statusLabel, language) : headerStyle.label;
+
+  const renderRow = (row: ReservationRow) => {
+    const s = getReservationStatusStyle(row.status, theme);
+    const statusLabel = row.statusLabel ? resolveText(row.statusLabel, language) : s.label;
+    const name = resolveText(row.name, language);
+
+    return (
+      <Pressable className="flex-row items-center gap-3 py-2.5" onPress={() => onSelectRow?.(row)}>
+        {row.image ? (
+          <Image accessibilityLabel={name} source={{ uri: row.image }} className={`h-11 w-11 rounded-xl ${c.mutedIconBg}`} />
+        ) : (
+          <View className={`h-11 w-11 items-center justify-center rounded-xl ${c.mutedIconBg}`}>
+            <CalendarIcon size={18} color={c.mutedIconColor} />
+          </View>
+        )}
+
+        <View className="flex-1 gap-1">
+          <View className="flex-row items-center justify-between gap-2">
+            <Text className={`flex-1 text-sm font-semibold ${c.title}`} numberOfLines={1}>
+              {name}
+            </Text>
+            <Text className={`text-sm font-bold ${c.price}`}>{row.price}</Text>
+          </View>
+          <View className="flex-row items-center justify-between gap-2">
+            <Text className={`flex-1 text-xs ${c.subtitle}`} numberOfLines={1}>
+              {row.date} · {row.time}
+              {row.duration ? ` · ${row.duration}` : ''}
+            </Text>
+            <View className={`rounded-full px-2 py-0.5 ${s.badgeBg}`}>
+              <Text className={`text-[11px] font-semibold ${s.badgeText}`}>{statusLabel}</Text>
+            </View>
+          </View>
+        </View>
+      </Pressable>
+    );
+  };
+
+  return (
+    <View className={`rounded-2xl border p-3.5 ${c.surface} ${c.border}`}>
+      <View className="flex-row items-center gap-3">
+        <View className={`h-11 w-11 items-center justify-center rounded-xl ${c.iconBg}`}>
+          <CalendarIcon size={20} color={c.iconColor} />
+        </View>
+
+        <View className="flex-1">
+          <Text className={`text-base font-bold ${c.title}`} numberOfLines={1}>
+            {title}
+          </Text>
+          {subtitle ? (
+            <Text className={`text-xs ${c.subtitle}`} numberOfLines={1}>
+              {subtitle}
+            </Text>
+          ) : null}
+        </View>
+
+        <View className={`rounded-full px-2.5 py-1 ${headerStyle.badgeBg}`}>
+          <Text className={`text-xs font-semibold ${headerStyle.badgeText}`}>{headerStatusLabel}</Text>
+        </View>
+      </View>
+
+      <View className={`my-3 h-px ${c.divider}`} />
+
+      {head.map((row, index) => (
+        <Fragment key={row.id}>
+          {index > 0 ? <View className={`h-px ${c.divider}`} /> : null}
+          {renderRow(row)}
+        </Fragment>
+      ))}
+
+      {hasMore ? (
+        <Collapsible expanded={expanded}>
+          {rest.map((row) => (
+            <Fragment key={row.id}>
+              <View className={`h-px ${c.divider}`} />
+              {renderRow(row)}
+            </Fragment>
+          ))}
+        </Collapsible>
+      ) : null}
+
+      {hasMore ? (
+        <Pressable onPress={toggle} className="mt-1 flex-row items-center justify-between gap-2 py-2">
+          <View className="flex-row items-center gap-2">
+            <Text className={`text-sm ${c.subtitle}`}>
+              {expanded
+                ? `Showing all ${reservations.length} requests`
+                : `Showing ${head.length} of ${reservations.length} requests`}
+            </Text>
+          </View>
+          <View className="flex-row items-center gap-1">
+            <Text className={`text-sm font-semibold ${c.iconText}`}>{expanded ? 'Show less' : 'View all'}</Text>
+            <View className={expanded ? 'rotate-180' : undefined}>
+              <ChevronIcon size={14} color={c.iconColor} />
+            </View>
+          </View>
+        </Pressable>
+      ) : null}
+
+      {list.total || action ? (
+        <>
+          <View className={`my-3 h-px ${c.divider}`} />
+          <View className="flex-row items-center justify-between gap-3">
+            <View>
+              {totalLabel ? <Text className={`text-xs ${c.subtitle}`}>{totalLabel}</Text> : null}
+              {list.total ? <Text className={`text-lg font-bold ${c.title}`}>{list.total}</Text> : null}
+            </View>
+
+            {action ? (
+              <Pressable
+                onPress={() => onAction?.(list, ItemAction.Manage)}
+                className="rounded-xl bg-indigo-500 px-4 py-2"
+              >
+                <Text className="text-sm font-semibold text-white">{action}</Text>
+              </Pressable>
+            ) : null}
+          </View>
+        </>
+      ) : null}
+    </View>
+  );
+}

package/src/features/chat/components/reservation/reservation.tsx

@@ -0,0 +1,162 @@
+import { Fragment } from 'react';
+import { getThemeClasses } from '../../../../utils/theme.utils';
+import { getReservationStatusStyle } from '../../../../utils/reservation.utils';
+import { resolveText } from '../../../../utils/i18n.utils';
+import { useExpandableList } from '../../../../utils/use-expandable-list';
+import { Collapsible } from '../common/collapsible';
+import { CalendarIcon } from '../common/calendar-icon';
+import { ChevronIcon } from '../common/chevron-icon';
+import { ItemAction, Theme } from '../../model/chat.model';
+import type { ChatComponentProps } from '../../model/chat.model';
+import type { ReservationListItem, ReservationRow } from './reservation.model';
+
+export function Reservation({
+  data,
+  theme = Theme.Dark,
+  language,
+  actionLabel,
+  onAction,
+  onSelect,
+}: ChatComponentProps<ReservationListItem>) {
+  const c = getThemeClasses(theme);
+  const list = Array.isArray(data) ? data[0] : data;
+  const reservations = list?.reservations ?? [];
+  const { head, rest, expanded, hasMore, toggle } = useExpandableList(reservations);
+
+  if (!list) return null;
+
+  const onSelectRow = onSelect as ((row: ReservationRow) => void) | undefined;
+  const title = resolveText(list.title, language);
+  const subtitle = list.subtitle ? resolveText(list.subtitle, language) : undefined;
+  const totalLabel = list.totalLabel ? resolveText(list.totalLabel, language) : undefined;
+  const action = list.actionLabel
+    ? resolveText(list.actionLabel, language)
+    : typeof actionLabel === 'function'
+      ? actionLabel(list)
+      : actionLabel;
+  const headerStyle = getReservationStatusStyle(list.status, theme);
+  const headerStatusLabel = list.statusLabel ? resolveText(list.statusLabel, language) : headerStyle.label;
+
+  const renderRow = (row: ReservationRow) => {
+    const s = getReservationStatusStyle(row.status, theme);
+    const statusLabel = row.statusLabel ? resolveText(row.statusLabel, language) : s.label;
+    const name = resolveText(row.name, language);
+
+    return (
+      <button
+        type="button"
+        className="flex w-full items-center gap-3 py-2.5 text-left"
+        onClick={() => onSelectRow?.(row)}
+      >
+        {row.image ? (
+          <img src={row.image} alt={name} className={`h-11 w-11 shrink-0 rounded-xl object-cover ${c.mutedIconBg}`} />
+        ) : (
+          <div className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-xl ${c.mutedIconBg}`}>
+            <CalendarIcon size={18} color={c.mutedIconColor} />
+          </div>
+        )}
+
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <div className="flex items-center justify-between gap-2">
+            <span className={`truncate text-sm font-semibold ${c.title}`}>{name}</span>
+            <span className={`shrink-0 text-sm font-bold ${c.price}`}>{row.price}</span>
+          </div>
+          <div className="flex items-center justify-between gap-2">
+            <span className={`truncate text-xs ${c.subtitle}`}>
+              {row.date} · {row.time}
+              {row.duration ? ` · ${row.duration}` : ''}
+            </span>
+            <span className={`shrink-0 rounded-full px-2 py-0.5 text-[11px] font-semibold ${s.badgeBg} ${s.badgeText}`}>
+              {statusLabel}
+            </span>
+          </div>
+        </div>
+      </button>
+    );
+  };
+
+  return (
+    <div className={`rounded-2xl border p-3.5 ${c.surface} ${c.border}`}>
+      <div className="flex items-center gap-3">
+        <div className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-xl ${c.iconBg}`}>
+          <CalendarIcon size={20} color={c.iconColor} />
+        </div>
+
+        <div className="flex min-w-0 flex-1 flex-col">
+          <span className={`truncate text-base font-bold ${c.title}`}>{title}</span>
+          {subtitle ? <span className={`truncate text-xs ${c.subtitle}`}>{subtitle}</span> : null}
+        </div>
+
+        <span
+          className={`shrink-0 rounded-full px-2.5 py-1 text-xs font-semibold ${headerStyle.badgeBg} ${headerStyle.badgeText}`}
+        >
+          {headerStatusLabel}
+        </span>
+      </div>
+
+      <div className={`my-3 h-px ${c.divider}`} />
+
+      {head.map((row, index) => (
+        <Fragment key={row.id}>
+          {index > 0 ? <div className={`h-px ${c.divider}`} /> : null}
+          {renderRow(row)}
+        </Fragment>
+      ))}
+
+      {hasMore ? (
+        <Collapsible expanded={expanded}>
+          {rest.map((row) => (
+            <Fragment key={row.id}>
+              <div className={`h-px ${c.divider}`} />
+              {renderRow(row)}
+            </Fragment>
+          ))}
+        </Collapsible>
+      ) : null}
+
+      {hasMore ? (
+        <button
+          type="button"
+          onClick={toggle}
+          className={`mt-1 flex w-full items-center justify-between gap-2 rounded-xl py-2`}
+        >
+          <div className="flex items-center gap-2">
+            <span className={`text-sm ${c.subtitle}`}>
+              {expanded
+                ? `Showing all ${reservations.length} requests`
+                : `Showing ${head.length} of ${reservations.length} requests`}
+            </span>
+          </div>
+          <span className={`flex shrink-0 items-center gap-1 text-sm font-semibold ${c.iconText}`}>
+            {expanded ? 'Show less' : 'View all'}
+            <span className={`transition-transform ${expanded ? 'rotate-180' : ''}`}>
+              <ChevronIcon size={14} color="currentColor" />
+            </span>
+          </span>
+        </button>
+      ) : null}
+
+      {list.total || action ? (
+        <>
+          <div className={`my-3 h-px ${c.divider}`} />
+          <div className="flex items-center justify-between gap-3">
+            <div className="flex flex-col">
+              {totalLabel ? <span className={`text-xs ${c.subtitle}`}>{totalLabel}</span> : null}
+              {list.total ? <span className={`text-lg font-bold ${c.title}`}>{list.total}</span> : null}
+            </div>
+
+            {action ? (
+              <button
+                type="button"
+                onClick={() => onAction?.(list, ItemAction.Manage)}
+                className="rounded-xl bg-indigo-500 px-4 py-2 text-sm font-semibold text-white"
+              >
+                {action}
+              </button>
+            ) : null}
+          </div>
+        </>
+      ) : null}
+    </div>
+  );
+}

package/src/features/chat/model/chat.model.ts

@@ -14,10 +14,26 @@ export enum ComponentType {
   Event = 'event',
   EventList = 'eventList',
   Info = 'info',
+  Flight = 'flight',
+  FlightList = 'flightList',
+  FlightBoard = 'flightBoard',
+  Order = 'order',
+  Reservation = 'reservation',
+  ReservationList = 'reservationList',
 }
 
 export enum ItemAction {
   Add = 'add',
+  Manage = 'manage',
+  Track = 'track',
+}
+
+export enum FlightStatus {
+  OnTime = 'onTime',
+  Delayed = 'delayed',
+  Boarding = 'boarding',
+  Landed = 'landed',
+  Cancelled = 'cancelled',
 }
 
 export type ActionHandler<TItem = unknown> = (item: TItem, action?: ItemAction) => void;

package/src/features/chat/renderer/renderer.native.tsx

@@ -2,15 +2,31 @@ import { Product } from '../components/product/product.native';
 import { Service } from '../components/service/service.native';
 import { Event } from '../components/event/event.native';
 import { Info } from '../components/info/info.native';
+import { Flight } from '../components/flight/flight.native';
+import { FlightBoard } from '../components/flight-board/flight-board.native';
+import { Order } from '../components/order/order.native';
+import { Reservation } from '../components/reservation/reservation.native';
 import type { ProductItem } from '../components/product/product.model';
 import type { ServiceItem } from '../components/service/service.model';
 import type { EventItem } from '../components/event/event.model';
 import type { InfoItem } from '../components/info/info.model';
+import type { FlightItem } from '../components/flight/flight.model';
+import type { FlightBoardItem } from '../components/flight-board/flight-board.model';
+import type { OrderListItem } from '../components/order/order.model';
+import type { ReservationListItem } from '../components/reservation/reservation.model';
 import { ComponentType } from '../model/chat.model';
 import type { ChatComponentProps } from '../model/chat.model';
 
 export function ChatComponentRenderer<
-  TItem extends ProductItem | ServiceItem | EventItem | InfoItem,
+  TItem extends
+    | ProductItem
+    | ServiceItem
+    | EventItem
+    | InfoItem
+    | FlightItem
+    | FlightBoardItem
+    | OrderListItem
+    | ReservationListItem,
 >({ type, ...rest }: ChatComponentProps<TItem>) {
   switch (type) {
     case ComponentType.Product:
@@ -24,6 +40,18 @@ export function ChatComponentRenderer<
       return <Event type={type} {...(rest as unknown as Omit<ChatComponentProps<EventItem>, 'type'>)} />;
     case ComponentType.Info:
       return <Info type={type} {...(rest as unknown as Omit<ChatComponentProps<InfoItem>, 'type'>)} />;
+    case ComponentType.Flight:
+    case ComponentType.FlightList:
+      return <Flight type={type} {...(rest as unknown as Omit<ChatComponentProps<FlightItem>, 'type'>)} />;
+    case ComponentType.FlightBoard:
+      return <FlightBoard type={type} {...(rest as unknown as Omit<ChatComponentProps<FlightBoardItem>, 'type'>)} />;
+    case ComponentType.Order:
+      return <Order type={type} {...(rest as unknown as Omit<ChatComponentProps<OrderListItem>, 'type'>)} />;
+    case ComponentType.Reservation:
+    case ComponentType.ReservationList:
+      return (
+        <Reservation type={type} {...(rest as unknown as Omit<ChatComponentProps<ReservationListItem>, 'type'>)} />
+      );
     default:
       return null;
   }

package/src/features/chat/renderer/renderer.tsx

@@ -2,15 +2,31 @@ import { Product } from '../components/product/product';
 import { Service } from '../components/service/service';
 import { Event } from '../components/event/event';
 import { Info } from '../components/info/info';
+import { Flight } from '../components/flight/flight';
+import { FlightBoard } from '../components/flight-board/flight-board';
+import { Order } from '../components/order/order';
+import { Reservation } from '../components/reservation/reservation';
 import type { ProductItem } from '../components/product/product.model';
 import type { ServiceItem } from '../components/service/service.model';
 import type { EventItem } from '../components/event/event.model';
 import type { InfoItem } from '../components/info/info.model';
+import type { FlightItem } from '../components/flight/flight.model';
+import type { FlightBoardItem } from '../components/flight-board/flight-board.model';
+import type { OrderListItem } from '../components/order/order.model';
+import type { ReservationListItem } from '../components/reservation/reservation.model';
 import { ComponentType } from '../model/chat.model';
 import type { ChatComponentProps } from '../model/chat.model';
 
 export function ChatComponentRenderer<
-  TItem extends ProductItem | ServiceItem | EventItem | InfoItem,
+  TItem extends
+    | ProductItem
+    | ServiceItem
+    | EventItem
+    | InfoItem
+    | FlightItem
+    | FlightBoardItem
+    | OrderListItem
+    | ReservationListItem,
 >({ type, ...rest }: ChatComponentProps<TItem>) {
   switch (type) {
     case ComponentType.Product:
@@ -24,6 +40,18 @@ export function ChatComponentRenderer<
       return <Event type={type} {...(rest as unknown as Omit<ChatComponentProps<EventItem>, 'type'>)} />;
     case ComponentType.Info:
       return <Info type={type} {...(rest as unknown as Omit<ChatComponentProps<InfoItem>, 'type'>)} />;
+    case ComponentType.Flight:
+    case ComponentType.FlightList:
+      return <Flight type={type} {...(rest as unknown as Omit<ChatComponentProps<FlightItem>, 'type'>)} />;
+    case ComponentType.FlightBoard:
+      return <FlightBoard type={type} {...(rest as unknown as Omit<ChatComponentProps<FlightBoardItem>, 'type'>)} />;
+    case ComponentType.Order:
+      return <Order type={type} {...(rest as unknown as Omit<ChatComponentProps<OrderListItem>, 'type'>)} />;
+    case ComponentType.Reservation:
+    case ComponentType.ReservationList:
+      return (
+        <Reservation type={type} {...(rest as unknown as Omit<ChatComponentProps<ReservationListItem>, 'type'>)} />
+      );
     default:
       return null;
   }

package/src/native.ts

@@ -2,14 +2,24 @@ export { Product } from './features/chat/components/product/product.native';
 export { Service } from './features/chat/components/service/service.native';
 export { Event } from './features/chat/components/event/event.native';
 export { Info } from './features/chat/components/info/info.native';
+export { Flight } from './features/chat/components/flight/flight.native';
+export { FlightBoard } from './features/chat/components/flight-board/flight-board.native';
+export { Order } from './features/chat/components/order/order.native';
+export { Reservation } from './features/chat/components/reservation/reservation.native';
 export { ChatComponentRenderer } from './features/chat/renderer/renderer.native';
 export { ChatMessageRenderer } from './features/chat/message/message.native';
 export { parseMessage } from './features/chat/message/message.logic';
-export { ComponentType, ItemAction, Theme } from './features/chat/model/chat.model';
+export { ComponentType, ItemAction, Theme, FlightStatus } from './features/chat/model/chat.model';
+export { OrderStatus } from './features/chat/components/order/order.model';
+export { ReservationStatus } from './features/chat/components/reservation/reservation.model';
 export type { ProductItem } from './features/chat/components/product/product.model';
 export type { ServiceItem } from './features/chat/components/service/service.model';
 export type { EventItem } from './features/chat/components/event/event.model';
 export type { InfoItem } from './features/chat/components/info/info.model';
+export type { FlightItem, Airport } from './features/chat/components/flight/flight.model';
+export type { FlightBoardItem, FlightRow } from './features/chat/components/flight-board/flight-board.model';
+export type { OrderListItem, OrderRow } from './features/chat/components/order/order.model';
+export type { ReservationListItem, ReservationRow } from './features/chat/components/reservation/reservation.model';
 export type {
   ChatMessage,
   ChatMessageProps,

package/src/utils/flight.utils.ts

@@ -0,0 +1,35 @@
+import { FlightStatus, Theme } from '../features/chat/model/chat.model';
+
+export interface FlightStatusStyle {
+  dot: string;
+  badgeBg: string;
+  badgeText: string;
+  showDot: boolean;
+  label: string;
+}
+
+type StatusMap = Record<FlightStatus, FlightStatusStyle>;
+
+const DARK: StatusMap = {
+  [FlightStatus.OnTime]: { dot: 'bg-emerald-400', badgeBg: 'bg-emerald-500/15', badgeText: 'text-emerald-400', showDot: true, label: 'On time' },
+  [FlightStatus.Delayed]: { dot: 'bg-amber-400', badgeBg: 'bg-amber-500/15', badgeText: 'text-amber-400', showDot: false, label: 'Delayed' },
+  [FlightStatus.Boarding]: { dot: 'bg-indigo-300', badgeBg: 'bg-indigo-500/25', badgeText: 'text-indigo-300', showDot: false, label: 'Boarding' },
+  [FlightStatus.Landed]: { dot: 'bg-sky-400', badgeBg: 'bg-sky-500/15', badgeText: 'text-sky-400', showDot: true, label: 'Landed' },
+  [FlightStatus.Cancelled]: { dot: 'bg-red-400', badgeBg: 'bg-red-500/15', badgeText: 'text-red-400', showDot: false, label: 'Cancelled' },
+};
+
+const LIGHT: StatusMap = {
+  [FlightStatus.OnTime]: { dot: 'bg-emerald-500', badgeBg: 'bg-emerald-500/15', badgeText: 'text-emerald-600', showDot: true, label: 'On time' },
+  [FlightStatus.Delayed]: { dot: 'bg-amber-500', badgeBg: 'bg-amber-500/20', badgeText: 'text-amber-600', showDot: false, label: 'Delayed' },
+  [FlightStatus.Boarding]: { dot: 'bg-indigo-500', badgeBg: 'bg-indigo-500/15', badgeText: 'text-indigo-600', showDot: false, label: 'Boarding' },
+  [FlightStatus.Landed]: { dot: 'bg-sky-500', badgeBg: 'bg-sky-500/15', badgeText: 'text-sky-600', showDot: true, label: 'Landed' },
+  [FlightStatus.Cancelled]: { dot: 'bg-red-500', badgeBg: 'bg-red-500/15', badgeText: 'text-red-600', showDot: false, label: 'Cancelled' },
+};
+
+export function getFlightStatusStyle(
+  status: FlightStatus = FlightStatus.OnTime,
+  theme: Theme = Theme.Dark,
+): FlightStatusStyle {
+  const map = theme === Theme.Light ? LIGHT : DARK;
+  return map[status] ?? map[FlightStatus.OnTime];
+}

package/src/utils/order.utils.ts

@@ -0,0 +1,28 @@
+import { Theme } from '../features/chat/model/chat.model';
+import { OrderStatus } from '../features/chat/components/order/order.model';
+import { getStatusBadgeStyle, StatusTone } from './status-badge.utils';
+import type { StatusBadgeStyle } from './status-badge.utils';
+
+const LABEL: Record<OrderStatus, string> = {
+  [OrderStatus.Pending]: 'Pending',
+  [OrderStatus.Preparing]: 'Preparing',
+  [OrderStatus.Accepted]: 'Accepted',
+  [OrderStatus.Rejected]: 'Rejected',
+  [OrderStatus.Delivered]: 'Delivered',
+};
+
+export function getOrderStatusStyle(
+  status: OrderStatus = OrderStatus.Pending,
+  theme: Theme = Theme.Dark,
+): StatusBadgeStyle & { label: string } {
+  const tone =
+    status === OrderStatus.Accepted || status === OrderStatus.Delivered
+      ? StatusTone.Success
+      : status === OrderStatus.Rejected
+        ? StatusTone.Danger
+        : status === OrderStatus.Preparing
+          ? StatusTone.Info
+          : StatusTone.Pending;
+
+  return { ...getStatusBadgeStyle(tone, theme), label: LABEL[status] ?? LABEL[OrderStatus.Pending] };
+}

package/src/utils/reservation.utils.ts

@@ -0,0 +1,23 @@
+import { Theme } from '../features/chat/model/chat.model';
+import { ReservationStatus } from '../features/chat/components/reservation/reservation.model';
+import { getStatusBadgeStyle, StatusTone } from './status-badge.utils';
+import type { StatusBadgeStyle } from './status-badge.utils';
+
+const LABEL: Record<ReservationStatus, string> = {
+  [ReservationStatus.Pending]: 'Pending',
+  [ReservationStatus.Confirmed]: 'Confirmed',
+  [ReservationStatus.Cancelled]: 'Cancelled',
+};
+
+export function getReservationStatusStyle(
+  status: ReservationStatus = ReservationStatus.Pending,
+  theme: Theme = Theme.Dark,
+): StatusBadgeStyle & { label: string } {
+  const tone = status === ReservationStatus.Confirmed
+    ? StatusTone.Success
+    : status === ReservationStatus.Cancelled
+      ? StatusTone.Danger
+      : StatusTone.Pending;
+
+  return { ...getStatusBadgeStyle(tone, theme), label: LABEL[status] ?? LABEL[ReservationStatus.Pending] };
+}

package/src/utils/status-badge.utils.ts

@@ -0,0 +1,36 @@
+import { Theme } from '../features/chat/model/chat.model';
+
+export enum StatusTone {
+  Pending = 'pending',
+  Success = 'success',
+  Danger = 'danger',
+  Info = 'info',
+  Neutral = 'neutral',
+}
+
+export interface StatusBadgeStyle {
+  badgeBg: string;
+  badgeText: string;
+  dot: string;
+}
+
+const DARK: Record<StatusTone, StatusBadgeStyle> = {
+  [StatusTone.Pending]: { badgeBg: 'bg-amber-500/15', badgeText: 'text-amber-400', dot: 'bg-amber-400' },
+  [StatusTone.Success]: { badgeBg: 'bg-emerald-500/15', badgeText: 'text-emerald-400', dot: 'bg-emerald-400' },
+  [StatusTone.Danger]: { badgeBg: 'bg-red-500/15', badgeText: 'text-red-400', dot: 'bg-red-400' },
+  [StatusTone.Info]: { badgeBg: 'bg-indigo-500/25', badgeText: 'text-indigo-300', dot: 'bg-indigo-300' },
+  [StatusTone.Neutral]: { badgeBg: 'bg-white/10', badgeText: 'text-neutral-300', dot: 'bg-neutral-400' },
+};
+
+const LIGHT: Record<StatusTone, StatusBadgeStyle> = {
+  [StatusTone.Pending]: { badgeBg: 'bg-amber-500/20', badgeText: 'text-amber-600', dot: 'bg-amber-500' },
+  [StatusTone.Success]: { badgeBg: 'bg-emerald-500/15', badgeText: 'text-emerald-600', dot: 'bg-emerald-500' },
+  [StatusTone.Danger]: { badgeBg: 'bg-red-500/15', badgeText: 'text-red-600', dot: 'bg-red-500' },
+  [StatusTone.Info]: { badgeBg: 'bg-indigo-500/15', badgeText: 'text-indigo-600', dot: 'bg-indigo-500' },
+  [StatusTone.Neutral]: { badgeBg: 'bg-slate-200', badgeText: 'text-neutral-600', dot: 'bg-slate-400' },
+};
+
+export function getStatusBadgeStyle(tone: StatusTone, theme: Theme = Theme.Dark): StatusBadgeStyle {
+  const map = theme === Theme.Light ? LIGHT : DARK;
+  return map[tone] ?? map[StatusTone.Neutral];
+}

package/src/utils/theme.utils.ts

@@ -13,6 +13,9 @@ export interface ThemeClasses {
   iconBg: string;
   iconText: string;
   iconColor: string;
+  mutedIconBg: string;
+  mutedIconColor: string;
+  dashLine: string;
 }
 
 const DARK: ThemeClasses = {
@@ -28,6 +31,9 @@ const DARK: ThemeClasses = {
   iconBg: 'bg-indigo-500/20',
   iconText: 'text-indigo-300',
   iconColor: '#a5b4fc',
+  mutedIconBg: 'bg-white/5',
+  mutedIconColor: '#82849a',
+  dashLine: 'border-neutral-700',
 };
 
 const LIGHT: ThemeClasses = {
@@ -43,6 +49,9 @@ const LIGHT: ThemeClasses = {
   iconBg: 'bg-indigo-500/15',
   iconText: 'text-indigo-500',
   iconColor: '#6366f1',
+  mutedIconBg: 'bg-slate-200',
+  mutedIconColor: '#64748b',
+  dashLine: 'border-slate-300',
 };
 
 export function getThemeClasses(theme: Theme = Theme.Dark): ThemeClasses {