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

package/src/domain/Filters/FiltersBar.tsx

@@ -0,0 +1,76 @@
+import { cn } from "../../utils/cn";
+import { FiltersIcon } from "../../icons/generated";
+import { SearchIcon } from "../../icons/generated";
+
+export type FiltersBarTabs = "on" | "off";
+export type FiltersBarFilters = "on" | "off";
+
+export type FiltersBarProps = {
+  tabs?: FiltersBarTabs;
+  filters?: FiltersBarFilters;
+  tabLabels?: string[];
+  activeTab?: string;
+  searchPlaceholder?: string;
+  filterChips?: string[];
+  className?: string;
+};
+
+const defaultTabs = ["All", "Reports", "Chats", "Issues", "Forms", "Workflows"];
+
+export const FiltersBar = ({
+  tabs = "on",
+  filters = "off",
+  tabLabels = defaultTabs,
+  activeTab = "All",
+  searchPlaceholder = "Search",
+  filterChips = ["Status", "Date", "Chief"],
+  className,
+}: FiltersBarProps) => (
+  <div className={cn("flex w-full flex-col gap-3", className)}>
+    <div className="flex items-center justify-between gap-4">
+      {tabs === "on" && (
+        <div className="flex flex-wrap gap-2">
+          {tabLabels.map((tab) => (
+            <button
+              key={tab}
+              type="button"
+              className={cn(
+                "rounded-full px-3 py-1.5 text-caption-2-em transition-colors",
+                tab === activeTab
+                  ? "bg-background-selected text-display-on-dark-primary"
+                  : "bg-background-secondary text-display-on-light-tertiary hover:text-display-on-light-primary",
+              )}
+            >
+              {tab}
+            </button>
+          ))}
+        </div>
+      )}
+      <div className="flex shrink-0 items-center gap-4">
+        <button
+          type="button"
+          aria-label="Open filters"
+          className="flex size-9 items-center justify-center rounded-full bg-background-secondary text-display-on-light-secondary hover:text-display-on-light-primary"
+        >
+          <FiltersIcon size="small" />
+        </button>
+        <div className="flex w-[250px] items-center gap-2 rounded-md border border-divider-primary px-3 py-2">
+          <span className="flex-1 text-body text-display-on-light-secondary">{searchPlaceholder}</span>
+          <SearchIcon size="small" className="text-display-on-light-tertiary" />
+        </div>
+      </div>
+    </div>
+    {filters === "on" && (
+      <div className="flex flex-wrap gap-2">
+        {filterChips.map((chip) => (
+          <span
+            key={chip}
+            className="rounded-full bg-background-secondary px-3 py-1.5 text-caption-2-em text-display-on-light-tertiary"
+          >
+            {chip}
+          </span>
+        ))}
+      </div>
+    )}
+  </div>
+);

package/src/domain/Filters/index.ts

@@ -0,0 +1,3 @@
+export { FiltersBar, type FiltersBarFilters, type FiltersBarProps, type FiltersBarTabs } from "./FiltersBar";
+export { FilteredPill, type FilteredPillProps, type FilteredPillState } from "./FilteredPill";
+export { FilterPill, type FilterPillIndicator, type FilterPillProps } from "./FilterPill";

package/src/domain/Forms/FormCard.tsx

@@ -0,0 +1,61 @@
+import { type ReactNode } from "react";
+import { cn } from "../../utils/cn";
+import { Badge } from "../../primitives/Badge";
+import { IconButton } from "../../primitives/IconButton";
+import { FormsIcon } from "../../icons/generated";
+import { PlusIcon } from "../../icons/generated";
+
+export type FormCardState = "idle" | "hover";
+
+export type FormCardProps = {
+  name?: string;
+  description?: string;
+  formCount?: number;
+  pendingCount?: number;
+  state?: FormCardState;
+  icon?: ReactNode;
+  className?: string;
+};
+
+const stateStyles: Record<FormCardState, string> = {
+  idle: "bg-background-primary",
+  hover: "bg-background-secondary",
+};
+
+export const FormCard = ({
+  name = "Name",
+  description = "Description",
+  formCount = 4,
+  pendingCount = 7,
+  state = "idle",
+  icon,
+  className,
+}: FormCardProps) => (
+  <div
+    className={cn(
+      "flex w-full max-w-[560px] flex-col overflow-hidden rounded-2xl border border-divider-primary transition-colors",
+      stateStyles[state],
+      state === "idle" && "hover:bg-background-secondary",
+      className,
+    )}
+  >
+    <div className="flex items-center gap-4 p-4">
+      <span className="flex size-[46px] shrink-0 items-center justify-center rounded-control bg-background-secondary">
+        {icon ?? <FormsIcon size="large" />}
+      </span>
+      <div className="min-w-0 flex-1">
+        <p className="text-body-em text-display-on-light-primary">{name}</p>
+        <p className="text-caption-2 text-display-on-light-secondary">{description}</p>
+      </div>
+    </div>
+    <div className="flex items-center justify-between border-t border-divider-primary px-4 py-4">
+      <div className="flex flex-wrap gap-2">
+        <Badge color="grey">{formCount} Forms</Badge>
+        {pendingCount > 0 && <Badge color="orange">{pendingCount} Pending</Badge>}
+      </div>
+      <IconButton hierarchy="tertiary" size="small" aria-label="Add form">
+        <PlusIcon size="small" />
+      </IconButton>
+    </div>
+  </div>
+);

package/src/domain/Forms/FormHeader.tsx

@@ -0,0 +1,34 @@
+import { cn } from "../../utils/cn";
+import { Badge } from "../../primitives/Badge";
+
+export type FormHeaderProps = {
+  title?: string;
+  subtitle?: string;
+  status?: string;
+  dueDate?: string;
+  className?: string;
+};
+
+export const FormHeader = ({
+  title = "Safety Management System Review",
+  subtitle = "MV Atlantic Star · Chief Technical",
+  status = "In progress",
+  dueDate = "Due 21 Jul 2026",
+  className,
+}: FormHeaderProps) => (
+  <header
+    className={cn(
+      "w-full rounded-2xl border border-divider-primary bg-background-primary p-6",
+      className,
+    )}
+  >
+    <div className="flex flex-wrap items-start justify-between gap-4">
+      <div className="min-w-0 flex-1">
+        <h2 className="text-subheader-em text-display-on-light-primary">{title}</h2>
+        <p className="mt-1 text-caption-2 text-display-on-light-tertiary">{subtitle}</p>
+      </div>
+      <Badge color="blue">{status}</Badge>
+    </div>
+    <p className="mt-4 text-caption-2-em text-display-on-light-secondary">{dueDate}</p>
+  </header>
+);

package/src/domain/Forms/ListRow.tsx

@@ -0,0 +1,40 @@
+import { cn } from "../../utils/cn";
+import { FormIcon } from "../../icons/generated";
+
+export type ListRowState = "idle" | "hover";
+
+export type ListRowProps = {
+  name?: string;
+  subtitle?: string;
+  state?: ListRowState;
+  className?: string;
+};
+
+const stateStyles: Record<ListRowState, string> = {
+  idle: "bg-transparent",
+  hover: "bg-background-secondary",
+};
+
+export const ListRow = ({
+  name = "ISM Code checklist",
+  subtitle = "Last updated 3 days ago",
+  state = "idle",
+  className,
+}: ListRowProps) => (
+  <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,
+    )}
+  >
+    <span className="flex size-8 shrink-0 items-center justify-center rounded-control bg-background-secondary">
+      <FormIcon size="small" />
+    </span>
+    <div className="min-w-0 flex-1">
+      <p className="truncate text-caption-1-em text-display-on-light-primary">{name}</p>
+      <p className="truncate text-caption-2 text-display-on-light-tertiary">{subtitle}</p>
+    </div>
+  </div>
+);

package/src/domain/Forms/RiskMeter.tsx

@@ -0,0 +1,50 @@
+import { cn } from "../../utils/cn";
+
+export type RiskMeterLevel = "high" | "medium" | "low";
+
+export type RiskMeterProps = {
+  level?: RiskMeterLevel;
+  label?: string;
+  score?: number;
+  className?: string;
+};
+
+const levelConfig: Record<
+  RiskMeterLevel,
+  { label: string; score: number; bar: string; text: string }
+> = {
+  high: { label: "High risk", score: 85, bar: "bg-red-500", text: "text-red-600" },
+  medium: { label: "Medium risk", score: 52, bar: "bg-orange-700", text: "text-orange-700" },
+  low: { label: "Low risk", score: 18, bar: "bg-meta-green", text: "text-green-700" },
+};
+
+export const RiskMeter = ({
+  level = "high",
+  label,
+  score,
+  className,
+}: RiskMeterProps) => {
+  const config = levelConfig[level];
+  const displayLabel = label ?? config.label;
+  const displayScore = score ?? config.score;
+
+  return (
+    <div
+      className={cn(
+        "w-full max-w-[480px] rounded-control border border-divider-primary bg-background-primary p-4",
+        className,
+      )}
+    >
+      <div className="flex items-center justify-between gap-4">
+        <span className={cn("text-body-em", config.text)}>{displayLabel}</span>
+        <span className="text-caption-1-em text-display-on-light-primary">{displayScore}%</span>
+      </div>
+      <div className="mt-3 h-2 overflow-hidden rounded-full bg-grey-200">
+        <div
+          className={cn("h-full rounded-full", config.bar)}
+          style={{ width: `${displayScore}%` }}
+        />
+      </div>
+    </div>
+  );
+};

package/src/domain/Forms/index.ts

@@ -0,0 +1,4 @@
+export { FormCard, type FormCardProps, type FormCardState } from "./FormCard";
+export { ListRow, type ListRowProps, type ListRowState } from "./ListRow";
+export { FormHeader, type FormHeaderProps } from "./FormHeader";
+export { RiskMeter, type RiskMeterLevel, type RiskMeterProps } from "./RiskMeter";

package/src/domain/Library/File.tsx

@@ -0,0 +1,59 @@
+import { cn } from "../../utils/cn";
+import { FileIcon } from "../../icons/generated";
+import { SpinnerIcon } from "../../icons/generated";
+
+export type FileState = "idle" | "uploaded" | "uploading" | "waiting" | "huge";
+
+export type FileProps = {
+  name?: string;
+  meta?: string;
+  state?: FileState;
+  className?: string;
+};
+
+const stateMeta: Record<FileState, string> = {
+  idle: "PDF · 2.4 MB",
+  uploaded: "Uploaded just now",
+  uploading: "Uploading… 64%",
+  waiting: "Waiting for upload",
+  huge: "PDF · 18.6 MB",
+};
+
+export const File = ({
+  name = "Safety certificate.pdf",
+  meta,
+  state = "idle",
+  className,
+}: FileProps) => {
+  const displayMeta = meta ?? stateMeta[state];
+  const isHuge = state === "huge";
+
+  return (
+    <div
+      className={cn(
+        "flex w-full items-center gap-3 rounded-control px-3 transition-colors",
+        isHuge ? "py-3" : "py-2",
+        state === "uploading" && "bg-blue-50",
+        state === "waiting" && "bg-orange-50",
+        className,
+      )}
+    >
+      {state === "uploading" ? (
+        <SpinnerIcon size="small" className="text-blue-600" />
+      ) : (
+        <FileIcon size={isHuge ? "large" : "small"} className="text-display-on-light-secondary" />
+      )}
+      <div className="min-w-0 flex-1">
+        <p
+          className={cn(
+            "truncate text-display-on-light-primary",
+            isHuge ? "text-body-em" : "text-caption-1",
+          )}
+        >
+          {name}
+        </p>
+        <p className="truncate text-caption-2 text-display-on-light-tertiary">{displayMeta}</p>
+      </div>
+    </div>
+  );
+};

package/src/domain/Library/Folder.tsx

@@ -0,0 +1,55 @@
+import { cn } from "../../utils/cn";
+import { ChevronIcon } from "../../icons/ChevronIcon";
+import { FolderIcon } from "../../icons/generated";
+
+export type FolderState = "idle" | "hover" | "selected";
+
+export type FolderProps = {
+  name?: string;
+  fileCount?: number;
+  state?: FolderState;
+  className?: string;
+};
+
+const stateStyles: Record<FolderState, 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 Folder = ({
+  name = "Certificates",
+  fileCount = 24,
+  state = "idle",
+  className,
+}: FolderProps) => (
+  <div
+    className={cn(
+      "flex w-full items-center gap-3 rounded-control px-3 py-3 transition-colors",
+      stateStyles[state],
+      state === "idle" && "hover:bg-background-secondary",
+      className,
+    )}
+  >
+    <FolderIcon
+      size="small"
+      className={state === "selected" ? "text-white" : "text-display-on-light-secondary"}
+    />
+    <div className="min-w-0 flex-1">
+      <p className="truncate text-caption-1-em">{name}</p>
+      <p
+        className={cn(
+          "text-caption-2",
+          state === "selected" ? "text-display-on-dark-secondary" : "text-display-on-light-tertiary",
+        )}
+      >
+        {fileCount} files
+      </p>
+    </div>
+    <ChevronIcon
+      size="small"
+      direction="right"
+      className={state === "selected" ? "text-display-on-dark-tertiary" : "text-display-on-light-quaternary"}
+    />
+  </div>
+);

package/src/domain/Library/Folders.tsx

@@ -0,0 +1,43 @@
+import { cn } from "../../utils/cn";
+import { Folder } from "./Folder";
+
+export type FoldersLayout = "collapsed" | "expanded";
+
+export type FoldersProps = {
+  layout?: FoldersLayout;
+  folders?: { name: string; fileCount: number; selected?: boolean }[];
+  className?: string;
+};
+
+const defaultFolders = [
+  { name: "Certificates", fileCount: 24, selected: true },
+  { name: "Crew documents", fileCount: 12 },
+  { name: "Inspection reports", fileCount: 8 },
+  { name: "Maintenance logs", fileCount: 31 },
+];
+
+export const Folders = ({
+  layout = "expanded",
+  folders = defaultFolders,
+  className,
+}: FoldersProps) => {
+  const visibleFolders = layout === "collapsed" ? folders.slice(0, 1) : folders;
+
+  return (
+    <div
+      className={cn(
+        "w-full rounded-2xl border border-divider-primary bg-background-primary p-2",
+        className,
+      )}
+    >
+      {visibleFolders.map((folder) => (
+        <Folder
+          key={folder.name}
+          name={folder.name}
+          fileCount={folder.fileCount}
+          state={folder.selected ? "selected" : "idle"}
+        />
+      ))}
+    </div>
+  );
+};

package/src/domain/Library/ListRow.tsx

@@ -0,0 +1,40 @@
+import { cn } from "../../utils/cn";
+import { DocumentIcon } from "../../icons/generated";
+
+export type ListRowState = "idle" | "hover";
+
+export type ListRowProps = {
+  name?: string;
+  updatedAt?: string;
+  state?: ListRowState;
+  className?: string;
+};
+
+const stateStyles: Record<ListRowState, string> = {
+  idle: "bg-transparent",
+  hover: "bg-background-secondary",
+};
+
+export const ListRow = ({
+  name = "ISM annual review.pdf",
+  updatedAt = "Updated yesterday",
+  state = "idle",
+  className,
+}: ListRowProps) => (
+  <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,
+    )}
+  >
+    <span className="flex size-8 shrink-0 items-center justify-center rounded-control bg-background-secondary">
+      <DocumentIcon size="small" />
+    </span>
+    <div className="min-w-0 flex-1">
+      <p className="truncate text-caption-1-em text-display-on-light-primary">{name}</p>
+      <p className="truncate text-caption-2 text-display-on-light-tertiary">{updatedAt}</p>
+    </div>
+  </div>
+);

package/src/domain/Library/Navigation.tsx

@@ -0,0 +1,31 @@
+import { cn } from "../../utils/cn";
+import { ChevronIcon } from "../../icons/ChevronIcon";
+
+export type NavigationNested = "on" | "off";
+
+export type NavigationProps = {
+  label?: string;
+  nested?: NavigationNested;
+  className?: string;
+};
+
+export const Navigation = ({
+  label = "Library",
+  nested = "off",
+  className,
+}: NavigationProps) => (
+  <nav
+    className={cn(
+      "flex items-center gap-1 text-caption-2",
+      nested === "on" && "pl-4",
+      className,
+    )}
+    aria-label="Library navigation"
+  >
+    <button type="button" className="text-display-on-light-tertiary hover:text-display-on-light-primary">
+      Documents
+    </button>
+    <ChevronIcon size="small" direction="right" className="text-display-on-light-quaternary" />
+    <span className="text-caption-2-em text-display-on-light-primary">{label}</span>
+  </nav>
+);

package/src/domain/Library/index.ts

@@ -0,0 +1,5 @@
+export { Folder, type FolderProps, type FolderState } from "./Folder";
+export { File, type FileProps, type FileState } from "./File";
+export { Navigation, type NavigationNested, type NavigationProps } from "./Navigation";
+export { Folders, type FoldersLayout, type FoldersProps } from "./Folders";
+export { ListRow, type ListRowProps, type ListRowState } from "./ListRow";

package/src/domain/Report/InfoHeading.tsx

@@ -0,0 +1,25 @@
+import { cn } from "../../utils/cn";
+
+export type InfoHeadingEmphasis = "on" | "off";
+
+export type InfoHeadingProps = {
+  title?: string;
+  emphasis?: InfoHeadingEmphasis;
+  className?: string;
+};
+
+export const InfoHeading = ({
+  title = "Inspection details",
+  emphasis = "on",
+  className,
+}: InfoHeadingProps) => (
+  <p
+    className={cn(
+      "w-full text-display-on-light-primary",
+      emphasis === "on" ? "text-body-em" : "text-caption-1",
+      className,
+    )}
+  >
+    {title}
+  </p>
+);

package/src/domain/Report/InfoRow.tsx

@@ -0,0 +1,35 @@
+import { cn } from "../../utils/cn";
+
+export type InfoRowColumn = "on" | "off";
+
+export type InfoRowProps = {
+  label?: string;
+  value?: string;
+  column?: InfoRowColumn;
+  className?: string;
+};
+
+export const InfoRow = ({
+  label = "Vessel",
+  value = "MV Atlantic Star",
+  column = "off",
+  className,
+}: InfoRowProps) => (
+  <div
+    className={cn(
+      "w-full rounded-control border border-divider-primary bg-background-primary p-4",
+      column === "on" ? "flex flex-col gap-1" : "flex items-start justify-between gap-6",
+      className,
+    )}
+  >
+    <span className="text-caption-2 text-display-on-light-tertiary">{label}</span>
+    <span
+      className={cn(
+        "text-body text-display-on-light-primary",
+        column === "off" && "text-right",
+      )}
+    >
+      {value}
+    </span>
+  </div>
+);

package/src/domain/Report/Report.tsx

@@ -0,0 +1,53 @@
+import { type ReactNode } from "react";
+import { cn } from "../../utils/cn";
+import { InfoHeading } from "./InfoHeading";
+import { InfoRow } from "./InfoRow";
+import { SectionHeader } from "./SectionHeader";
+import { TaskRow } from "./TaskRow";
+
+export type ReportProps = {
+  title?: string;
+  className?: string;
+  children?: ReactNode;
+};
+
+export const Report = ({
+  title = "Port State Control Report",
+  className,
+  children,
+}: ReportProps) => (
+  <article
+    className={cn(
+      "w-full rounded-lg border border-divider-primary bg-background-primary p-6",
+      className,
+    )}
+  >
+    <header className="border-b border-divider-primary pb-4">
+      <h2 className="font-heading text-heading text-display-on-light-primary">{title}</h2>
+      <p className="mt-1 text-caption-2 text-display-on-light-tertiary">
+        Generated on 7 Jul 2026 · Chief Technical
+      </p>
+    </header>
+
+    <div className="mt-6 space-y-6">
+      {children ?? (
+        <>
+          <InfoHeading title="Vessel information" />
+          <div className="space-y-3">
+            <InfoRow label="Vessel" value="MV Atlantic Star" />
+            <InfoRow label="IMO" value="9876543" column="on" />
+            <InfoRow label="Flag" value="Marshall Islands" />
+          </div>
+
+          <SectionHeader title="Outstanding actions" subtitle="2 tasks remaining">
+            <div className="space-y-1">
+              <TaskRow label="Review fire safety documentation" />
+              <TaskRow label="Confirm crew certification records" strikethrough="on" />
+              <TaskRow variant="add-more" />
+            </div>
+          </SectionHeader>
+        </>
+      )}
+    </div>
+  </article>
+);

package/src/domain/Report/SectionHeader.tsx

@@ -0,0 +1,43 @@
+import { type ReactNode } from "react";
+import { cn } from "../../utils/cn";
+import { ChevronIcon } from "../../icons/ChevronIcon";
+
+export type SectionHeaderCollapsed = "on" | "off";
+
+export type SectionHeaderProps = {
+  title?: string;
+  subtitle?: string;
+  collapsed?: SectionHeaderCollapsed;
+  className?: string;
+  children?: ReactNode;
+};
+
+export const SectionHeader = ({
+  title = "Section title",
+  subtitle = "3 tasks remaining",
+  collapsed = "off",
+  className,
+  children,
+}: SectionHeaderProps) => (
+  <div
+    className={cn(
+      "flex w-full items-start justify-between gap-4 rounded-control border border-divider-primary bg-background-primary p-4",
+      className,
+    )}
+  >
+    <div className="min-w-0 flex-1">
+      <div className="flex items-center gap-2">
+        <ChevronIcon
+          size="small"
+          direction={collapsed === "on" ? "right" : "down"}
+          className="text-display-on-light-tertiary"
+        />
+        <p className="text-body-em text-display-on-light-primary">{title}</p>
+      </div>
+      {collapsed === "off" && (
+        <p className="mt-1 pl-6 text-caption-2 text-display-on-light-tertiary">{subtitle}</p>
+      )}
+      {collapsed === "off" && children && <div className="mt-3 pl-6">{children}</div>}
+    </div>
+  </div>
+);