@lateralus-ai/shipping-ui 1.4.16 → 2.0.0-dev.0

package/src/domain/Report/TaskRow.tsx

@@ -0,0 +1,57 @@
+import { cn } from "../../utils/cn";
+import { CheckboxIcon } from "../../icons/generated";
+import { PlusIcon } from "../../icons/generated";
+
+export type TaskRowVariant = "task" | "add-more";
+export type TaskRowHover = "on" | "off";
+export type TaskRowStrikethrough = "on" | "off";
+
+export type TaskRowProps = {
+  label?: string;
+  variant?: TaskRowVariant;
+  hover?: TaskRowHover;
+  strikethrough?: TaskRowStrikethrough;
+  className?: string;
+};
+
+const hoverStyles: Record<TaskRowHover, string> = {
+  off: "bg-transparent",
+  on: "bg-background-secondary",
+};
+
+export const TaskRow = ({
+  label = "Complete safety inspection checklist",
+  variant = "task",
+  hover = "off",
+  strikethrough = "off",
+  className,
+}: TaskRowProps) => {
+  const isAddMore = variant === "add-more";
+  const displayLabel = isAddMore ? "Add more" : label;
+
+  return (
+    <div
+      className={cn(
+        "flex w-full items-center gap-2 rounded-control px-2 py-1 transition-colors",
+        hoverStyles[hover],
+        hover === "off" && "hover:bg-background-secondary",
+        className,
+      )}
+    >
+      {isAddMore ? (
+        <PlusIcon size="small" className="text-display-on-light-tertiary" />
+      ) : (
+        <CheckboxIcon size="small" className="text-display-on-light-tertiary" />
+      )}
+      <span
+        className={cn(
+          "text-caption-1 text-display-on-light-primary",
+          strikethrough === "on" && "text-display-on-light-quaternary line-through",
+          isAddMore && hover === "on" && "text-action-tertiary-on-idle",
+        )}
+      >
+        {displayLabel}
+      </span>
+    </div>
+  );
+};

package/src/domain/Report/index.ts

@@ -0,0 +1,5 @@
+export { SectionHeader, type SectionHeaderCollapsed, type SectionHeaderProps } from "./SectionHeader";
+export { TaskRow, type TaskRowHover, type TaskRowProps, type TaskRowStrikethrough, type TaskRowVariant } from "./TaskRow";
+export { InfoRow, type InfoRowColumn, type InfoRowProps } from "./InfoRow";
+export { InfoHeading, type InfoHeadingEmphasis, type InfoHeadingProps } from "./InfoHeading";
+export { Report, type ReportProps } from "./Report";

package/src/domain/Settings/EquipmentRow.tsx

@@ -0,0 +1,39 @@
+import { cn } from "../../utils/cn";
+import { PenIcon } from "../../icons/generated";
+
+export type EquipmentRowEditable = "on" | "off";
+
+export type EquipmentRowProps = {
+  name?: string;
+  type?: string;
+  editable?: EquipmentRowEditable;
+  className?: string;
+};
+
+export const EquipmentRow = ({
+  name = "Main engine",
+  type = "MAN B&W 6S50ME-C",
+  editable = "on",
+  className,
+}: EquipmentRowProps) => (
+  <div
+    className={cn(
+      "flex w-full items-center justify-between gap-4 rounded-control border border-divider-primary bg-background-primary px-4 py-3",
+      className,
+    )}
+  >
+    <div className="min-w-0">
+      <p className="text-body-em text-display-on-light-primary">{name}</p>
+      <p className="text-caption-2 text-display-on-light-tertiary">{type}</p>
+    </div>
+    {editable === "on" && (
+      <button
+        type="button"
+        aria-label="Edit equipment"
+        className="shrink-0 rounded-control p-1 text-display-on-light-tertiary hover:bg-background-secondary hover:text-display-on-light-primary"
+      >
+        <PenIcon size="small" />
+      </button>
+    )}
+  </div>
+);

package/src/domain/Settings/MemberRow.tsx

@@ -0,0 +1,53 @@
+import { cn } from "../../utils/cn";
+import { Avatar } from "../../primitives/Avatar";
+import { Button } from "../../primitives/Button";
+
+export type MemberRowState = "idle" | "hover";
+export type MemberRowAction = "label" | "button";
+
+export type MemberRowProps = {
+  name?: string;
+  role?: string;
+  state?: MemberRowState;
+  action?: MemberRowAction;
+  actionLabel?: string;
+  className?: string;
+};
+
+const stateStyles: Record<MemberRowState, string> = {
+  idle: "bg-transparent",
+  hover: "bg-background-secondary",
+};
+
+export const MemberRow = ({
+  name = "Jane Doe",
+  role = "Chief Engineer",
+  state = "idle",
+  action = "label",
+  actionLabel = "Admin",
+  className,
+}: MemberRowProps) => (
+  <div
+    className={cn(
+      "flex w-full items-center justify-between gap-4 rounded-control px-3 py-3 transition-colors",
+      stateStyles[state],
+      state === "idle" && "hover:bg-background-secondary",
+      className,
+    )}
+  >
+    <div className="flex min-w-0 items-center gap-3">
+      <Avatar chief="initials" size={32} initials={name} />
+      <div className="min-w-0">
+        <p className="truncate text-body-em text-display-on-light-primary">{name}</p>
+        <p className="truncate text-caption-2 text-display-on-light-tertiary">{role}</p>
+      </div>
+    </div>
+    {action === "label" ? (
+      <span className="shrink-0 text-caption-2-em text-display-on-light-tertiary">{actionLabel}</span>
+    ) : (
+      <Button hierarchy="tertiary" className="min-h-8 shrink-0 px-3 py-1 text-caption-2">
+        Remove
+      </Button>
+    )}
+  </div>
+);

package/src/domain/Settings/SettingRow.tsx

@@ -0,0 +1,66 @@
+import { cn } from "../../utils/cn";
+import { Avatar } from "../../primitives/Avatar";
+import { ShipIcon } from "../../icons/generated";
+
+export type SettingRowState = "idle" | "hover" | "selected";
+export type SettingRowVariant = "ship" | "user";
+
+export type SettingRowProps = {
+  label?: string;
+  subtitle?: string;
+  state?: SettingRowState;
+  variant?: SettingRowVariant;
+  className?: string;
+};
+
+const stateStyles: Record<SettingRowState, string> = {
+  idle: "bg-transparent text-display-on-light-primary",
+  hover: "bg-background-secondary text-display-on-light-primary",
+  selected: "bg-background-selected text-display-on-dark-primary",
+};
+
+export const SettingRow = ({
+  label = "MV Atlantic Star",
+  subtitle = "Active vessel",
+  state = "idle",
+  variant = "ship",
+  className,
+}: SettingRowProps) => (
+  <div
+    className={cn(
+      "flex w-full items-center gap-3 rounded-control px-3 py-2 transition-colors",
+      stateStyles[state],
+      state === "idle" && "hover:bg-background-secondary",
+      className,
+    )}
+  >
+    {variant === "ship" ? (
+      <span
+        className={cn(
+          "flex size-6 shrink-0 items-center justify-center rounded-full",
+          state === "selected" ? "bg-white/20 text-white" : "bg-grey-100 text-display-on-light-secondary",
+        )}
+      >
+        <ShipIcon size="small" />
+      </span>
+    ) : (
+      <Avatar
+        chief="initials"
+        size={24}
+        initials="JD"
+        className={state === "selected" ? "bg-white/20 text-white" : undefined}
+      />
+    )}
+    <div className="min-w-0 flex-1">
+      <p className="truncate text-caption-1-em">{label}</p>
+      <p
+        className={cn(
+          "truncate text-caption-2",
+          state === "selected" ? "text-display-on-dark-secondary" : "text-display-on-light-tertiary",
+        )}
+      >
+        {subtitle}
+      </p>
+    </div>
+  </div>
+);

package/src/domain/Settings/index.ts

@@ -0,0 +1,3 @@
+export { EquipmentRow, type EquipmentRowEditable, type EquipmentRowProps } from "./EquipmentRow";
+export { SettingRow, type SettingRowProps, type SettingRowState, type SettingRowVariant } from "./SettingRow";
+export { MemberRow, type MemberRowAction, type MemberRowProps, type MemberRowState } from "./MemberRow";

package/src/domain/Ships/ShipRow.tsx

@@ -0,0 +1,49 @@
+import { cn } from "../../utils/cn";
+import { Count } from "../../primitives/Count";
+
+export type ShipRowState = "idle" | "hover";
+
+export type ShipRowProps = {
+  name?: string;
+  chatCount?: number;
+  issueCount?: number;
+  unreadCount?: number;
+  state?: ShipRowState;
+  className?: string;
+};
+
+const stateStyles: Record<ShipRowState, string> = {
+  idle: "bg-transparent",
+  hover: "bg-background-secondary",
+};
+
+export const ShipRow = ({
+  name = "Ship name",
+  chatCount = 17,
+  issueCount = 12,
+  unreadCount = 8,
+  state = "idle",
+  className,
+}: ShipRowProps) => (
+  <div
+    className={cn(
+      "flex w-full flex-col rounded-control p-2 transition-colors",
+      stateStyles[state],
+      state === "idle" && "hover:bg-background-secondary",
+      className,
+    )}
+  >
+    <div className="flex items-center justify-between gap-2">
+      <p className="min-w-0 flex-1 truncate text-body-em text-display-on-light-primary">{name}</p>
+      {unreadCount > 0 && <Count value={unreadCount} className="bg-red-600" />}
+    </div>
+    <div className="mt-1 flex gap-4 text-caption-2 text-display-on-light-secondary">
+      <span>
+        <span className="text-caption-2-em">{chatCount}</span> Chats
+      </span>
+      <span>
+        <span className="text-caption-2-em">{issueCount}</span> Issues
+      </span>
+    </div>
+  </div>
+);

package/src/domain/Ships/index.ts

@@ -0,0 +1 @@
+export { ShipRow, type ShipRowProps, type ShipRowState } from "./ShipRow";

package/src/domain/Workflows/GroupHeader.tsx

@@ -0,0 +1,48 @@
+import { cn } from "../../utils/cn";
+import { BulbIcon } from "../../icons/generated";
+import { QualityIcon } from "../../icons/generated";
+import { TickIcon } from "../../icons/generated";
+
+export type GroupHeaderGroup = "validation-checks" | "quality-flags" | "ai-insights";
+
+export type GroupHeaderProps = {
+  group?: GroupHeaderGroup;
+  title?: string;
+  count?: number;
+  className?: string;
+};
+
+const groupConfig: Record<
+  GroupHeaderGroup,
+  { title: string; icon: typeof TickIcon }
+> = {
+  "validation-checks": { title: "Validation Checks", icon: TickIcon },
+  "quality-flags": { title: "Quality Flags", icon: QualityIcon },
+  "ai-insights": { title: "AI Insights", icon: BulbIcon },
+};
+
+export const GroupHeader = ({
+  group = "validation-checks",
+  title,
+  count = 4,
+  className,
+}: GroupHeaderProps) => {
+  const config = groupConfig[group];
+  const Icon = config.icon;
+  const displayTitle = title ?? config.title;
+
+  return (
+    <div
+      className={cn(
+        "flex w-full items-center justify-between gap-4 rounded-control bg-background-secondary px-4 py-3",
+        className,
+      )}
+    >
+      <div className="flex items-center gap-2">
+        <Icon size="small" className="text-display-on-light-secondary" />
+        <span className="text-caption-1-em text-display-on-light-primary">{displayTitle}</span>
+      </div>
+      <span className="text-caption-2 text-display-on-light-tertiary">{count} items</span>
+    </div>
+  );
+};

package/src/domain/Workflows/Importance.tsx

@@ -0,0 +1,48 @@
+import { cn } from "../../utils/cn";
+import { CriticalIcon } from "../../icons/generated";
+import { DoneIcon } from "../../icons/generated";
+import { StatusIcon } from "../../icons/generated";
+
+export type ImportanceLevel = "critical" | "normal" | "low" | "pending";
+export type ImportanceStatus = "uncompleted" | "approved" | "reviewed";
+
+export type ImportanceProps = {
+  importance?: ImportanceLevel;
+  status?: ImportanceStatus;
+  className?: string;
+};
+
+const levelStyles: Record<ImportanceLevel, string> = {
+  critical: "bg-red-100 text-red-600",
+  normal: "bg-blue-100 text-blue-700",
+  low: "bg-grey-100 text-display-on-light-secondary",
+  pending: "bg-orange-50 text-orange-700",
+};
+
+export const Importance = ({
+  importance = "critical",
+  status = "uncompleted",
+  className,
+}: ImportanceProps) => {
+  const isApproved = status === "approved";
+  const isReviewed = status === "reviewed";
+
+  return (
+    <span
+      className={cn(
+        "inline-flex size-6 shrink-0 items-center justify-center rounded-full",
+        isApproved || isReviewed ? "bg-meta-green text-meta-on-green" : levelStyles[importance],
+        className,
+      )}
+      aria-label={`${importance} importance, ${status}`}
+    >
+      {isApproved || isReviewed ? (
+        <DoneIcon size="small" />
+      ) : importance === "critical" ? (
+        <CriticalIcon size="small" />
+      ) : (
+        <StatusIcon size="small" />
+      )}
+    </span>
+  );
+};

package/src/domain/Workflows/Progress.tsx

@@ -0,0 +1,55 @@
+import { cn } from "../../utils/cn";
+
+export type ProgressState = "0%" | "40%" | "54%" | "89%" | "all-done";
+
+export type ProgressProps = {
+  state?: ProgressState;
+  label?: string;
+  className?: string;
+};
+
+const progressValues: Record<ProgressState, number> = {
+  "0%": 0,
+  "40%": 40,
+  "54%": 54,
+  "89%": 89,
+  "all-done": 100,
+};
+
+const defaultLabels: Record<ProgressState, string> = {
+  "0%": "0% complete",
+  "40%": "40% complete",
+  "54%": "54% complete",
+  "89%": "89% complete",
+  "all-done": "All done!",
+};
+
+export const Progress = ({
+  state = "0%",
+  label,
+  className,
+}: ProgressProps) => {
+  const value = progressValues[state];
+  const displayLabel = label ?? defaultLabels[state];
+  const isComplete = state === "all-done";
+
+  return (
+    <div className={cn("flex min-w-[212px] flex-col gap-2", className)}>
+      <div className="flex items-center justify-between gap-2">
+        <span className="text-caption-2-em text-display-on-light-primary">{displayLabel}</span>
+        {!isComplete && (
+          <span className="text-caption-2 text-display-on-light-tertiary">{value}%</span>
+        )}
+      </div>
+      <div className="h-2 overflow-hidden rounded-full bg-grey-200">
+        <div
+          className={cn(
+            "h-full rounded-full transition-all",
+            isComplete ? "bg-meta-green" : "bg-blue-600",
+          )}
+          style={{ width: `${value}%` }}
+        />
+      </div>
+    </div>
+  );
+};

package/src/domain/Workflows/Question.tsx

@@ -0,0 +1,42 @@
+import { cn } from "../../utils/cn";
+import { ChevronIcon } from "../../icons/ChevronIcon";
+import { Importance } from "./Importance";
+
+export type QuestionState = "idle" | "hover";
+export type QuestionExpanded = "on" | "off";
+
+export type QuestionProps = {
+  label?: string;
+  state?: QuestionState;
+  expanded?: QuestionExpanded;
+  className?: string;
+};
+
+const stateStyles: Record<QuestionState, string> = {
+  idle: "bg-transparent",
+  hover: "bg-background-secondary",
+};
+
+export const Question = ({
+  label = "Are all fire dampers operational and tested within the last 12 months?",
+  state = "idle",
+  expanded = "on",
+  className,
+}: QuestionProps) => (
+  <div
+    className={cn(
+      "flex w-full items-center gap-3 rounded-control px-3 py-2 transition-colors",
+      stateStyles[state],
+      state === "idle" && "hover:bg-background-secondary",
+      className,
+    )}
+  >
+    <Importance importance="normal" status="uncompleted" />
+    <p className="min-w-0 flex-1 text-caption-1 text-display-on-light-primary">{label}</p>
+    <ChevronIcon
+      size="small"
+      direction={expanded === "on" ? "down" : "right"}
+      className="shrink-0 text-display-on-light-tertiary"
+    />
+  </div>
+);

package/src/domain/Workflows/StatusPopover.tsx

@@ -0,0 +1,53 @@
+import { cn } from "../../utils/cn";
+import { CriticalIcon } from "../../icons/generated";
+import { DoneIcon } from "../../icons/generated";
+import { MenuItem } from "../../primitives/MenuItem";
+
+export type StatusPopoverState = "critical-done" | "critical-pending";
+
+export type StatusPopoverProps = {
+  state?: StatusPopoverState;
+  title?: string;
+  className?: string;
+};
+
+export const StatusPopover = ({
+  state = "critical-pending",
+  title = "Critical items",
+  className,
+}: StatusPopoverProps) => {
+  const isDone = state === "critical-done";
+
+  return (
+    <div
+      className={cn(
+        "w-full max-w-[268px] overflow-hidden rounded-control border border-divider-primary bg-background-primary shadow-raise2",
+        className,
+      )}
+    >
+      <div className="flex items-center gap-2 border-b border-divider-primary px-3 py-2">
+        <CriticalIcon size="small" className="text-red-500" />
+        <span className="text-caption-1-em text-display-on-light-primary">{title}</span>
+      </div>
+      <div className="p-1">
+        <MenuItem>
+          <DoneIcon size="small" className={isDone ? "text-meta-green" : "text-display-on-light-quaternary"} />
+          Fire pump inspection
+        </MenuItem>
+        <MenuItem>
+          <DoneIcon size="small" className={isDone ? "text-meta-green" : "text-display-on-light-quaternary"} />
+          Emergency generator test
+        </MenuItem>
+        <MenuItem>
+          <DoneIcon size="small" className="text-display-on-light-quaternary" />
+          Liferaft servicing
+        </MenuItem>
+      </div>
+      {isDone && (
+        <p className="border-t border-divider-primary px-3 py-2 text-caption-2 text-meta-green">
+          Critical done!
+        </p>
+      )}
+    </div>
+  );
+};

package/src/domain/Workflows/Task.tsx

@@ -0,0 +1,46 @@
+import { cn } from "../../utils/cn";
+import { Importance } from "./Importance";
+
+export type TaskState = "idle" | "hover";
+export type TaskStatus = "uncompleted" | "completed";
+
+export type TaskProps = {
+  label?: string;
+  state?: TaskState;
+  status?: TaskStatus;
+  className?: string;
+};
+
+const stateStyles: Record<TaskState, string> = {
+  idle: "bg-transparent",
+  hover: "bg-background-secondary",
+};
+
+export const Task = ({
+  label = "Verify fire pump maintenance records",
+  state = "idle",
+  status = "uncompleted",
+  className,
+}: TaskProps) => (
+  <div
+    className={cn(
+      "flex w-full items-center gap-3 rounded-control px-3 py-2 transition-colors",
+      stateStyles[state],
+      state === "idle" && "hover:bg-background-secondary",
+      className,
+    )}
+  >
+    <Importance
+      importance={status === "completed" ? "normal" : "critical"}
+      status={status === "completed" ? "approved" : "uncompleted"}
+    />
+    <span
+      className={cn(
+        "text-caption-1 text-display-on-light-primary",
+        status === "completed" && "text-display-on-light-quaternary line-through",
+      )}
+    >
+      {label}
+    </span>
+  </div>
+);

package/src/domain/Workflows/TaskHeader.tsx

@@ -0,0 +1,51 @@
+import { cn } from "../../utils/cn";
+import { Badge } from "../../primitives/Badge";
+import { Button } from "../../primitives/Button";
+import { Progress } from "./Progress";
+
+export type TaskHeaderProperty = "pending" | "in-review";
+
+export type TaskHeaderProps = {
+  property?: TaskHeaderProperty;
+  title?: string;
+  subtitle?: string;
+  progressState?: "40%" | "54%" | "89%";
+  className?: string;
+};
+
+export const TaskHeader = ({
+  property = "pending",
+  title = "Fire safety inspection",
+  subtitle = "Assigned to Chief Technical · 3 forms remaining",
+  progressState = "54%",
+  className,
+}: TaskHeaderProps) => {
+  const isInReview = property === "in-review";
+
+  return (
+    <div
+      className={cn(
+        "w-full rounded-2xl border border-divider-primary bg-background-primary p-4",
+        className,
+      )}
+    >
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-2">
+            <h3 className="text-subheader-em text-display-on-light-primary">{title}</h3>
+            <Badge color={isInReview ? "blue" : "orange"}>
+              {isInReview ? "In review" : "Pending"}
+            </Badge>
+          </div>
+          <p className="mt-1 text-caption-2 text-display-on-light-tertiary">{subtitle}</p>
+        </div>
+        <Button hierarchy="secondary" className="shrink-0">
+          View details
+        </Button>
+      </div>
+      <div className="mt-4">
+        <Progress state={progressState} />
+      </div>
+    </div>
+  );
+};

package/src/domain/Workflows/WorkflowFilters.tsx

@@ -0,0 +1,40 @@
+import { cn } from "../../utils/cn";
+import { FiltersIcon } from "../../icons/generated";
+
+export type WorkflowFiltersProps = {
+  filters?: string[];
+  activeFilter?: string;
+  className?: string;
+};
+
+const defaultFilters = ["All", "Pending", "In review", "Completed"];
+
+export const WorkflowFilters = ({
+  filters = defaultFilters,
+  activeFilter = "All",
+  className,
+}: WorkflowFiltersProps) => (
+  <div className={cn("flex flex-wrap items-center gap-2", className)}>
+    <span className="mr-1 flex size-9 items-center justify-center rounded-full bg-background-secondary text-display-on-light-secondary">
+      <FiltersIcon size="small" />
+    </span>
+    {filters.map((filter) => {
+      const isActive = filter === activeFilter;
+
+      return (
+        <button
+          key={filter}
+          type="button"
+          className={cn(
+            "rounded-full px-3 py-1.5 text-caption-2-em transition-colors",
+            isActive
+              ? "bg-background-selected text-display-on-dark-primary"
+              : "bg-background-secondary text-display-on-light-tertiary hover:text-display-on-light-primary",
+          )}
+        >
+          {filter}
+        </button>
+      );
+    })}
+  </div>
+);