@lightworkai.official/debug-capture-react 0.6.0

package/src/components/StatusHero.tsx

@@ -0,0 +1,92 @@
+/**
+ * Where the report stands, in one banner.
+ *
+ * The status LINE is config-first: an awaiting lane's "please reply" wins, then
+ * the lane's own description (so a realm's custom lane carries its own words),
+ * then our default copy, then the bare label.
+ */
+import type { ComponentType, SVGProps } from "react";
+import type { MyTicketDetail, StatusMaps, TicketStrings } from "@lightworkai.official/debug-capture";
+import { TicketBody } from "./TicketBody";
+import { BanIcon, CheckCircleIcon, ClockIcon, InboxIcon, MessageIcon, WrenchIcon } from "./icons";
+
+interface Tone {
+  Icon: ComponentType<SVGProps<SVGSVGElement>>;
+  border: string;
+  bg: string;
+  fg: string;
+  accent: string;
+}
+
+/** Only the SYSTEM statuses get a tone; an admin-added lane falls back to OPEN. */
+const TONES: Record<string, Tone> = {
+  OPEN: { Icon: InboxIcon, border: "#bfdbfe", bg: "#eff6ff", fg: "#1e3a8a", accent: "#3b82f6" },
+  IN_PROGRESS: { Icon: ClockIcon, border: "#fde68a", bg: "#fffbeb", fg: "#78350f", accent: "#f59e0b" },
+  RESOLVED: { Icon: CheckCircleIcon, border: "#a7f3d0", bg: "#ecfdf5", fg: "#064e3b", accent: "#10b981" },
+  CLOSED: { Icon: CheckCircleIcon, border: "#e5e7eb", bg: "#f9fafb", fg: "#1f2937", accent: "#9ca3af" },
+  WONT_FIX: { Icon: BanIcon, border: "#e5e7eb", bg: "#f9fafb", fg: "#374151", accent: "#9ca3af" },
+};
+const AWAITING: Tone = { Icon: MessageIcon, border: "#fcd34d", bg: "#fffbeb", fg: "#78350f", accent: "#f59e0b" };
+
+const MESSAGES: Record<string, { th: string; en: string }> = {
+  OPEN: { th: "รับเรื่องแล้ว — รอทีมงานตรวจสอบ", en: "Received — waiting for the team to look" },
+  IN_PROGRESS: { th: "ทีมงานกำลังดำเนินการแก้ไข", en: "The team is working on it" },
+  RESOLVED: { th: "แก้ไขเรียบร้อยแล้ว", en: "Fixed" },
+  CLOSED: { th: "ปิดเรื่องแล้ว", en: "Closed" },
+  WONT_FIX: { th: "พิจารณาแล้ว — ยังไม่ได้ดำเนินการในขณะนี้", en: "Reviewed — not being worked on for now" },
+};
+
+export function StatusHero({
+  ticket, maps, locale, host,
+}: { ticket: MyTicketDetail; maps: StatusMaps; t: TicketStrings; locale: "th" | "en"; host: string }) {
+  const awaiting = maps.isAwaitingReply(ticket.status);
+  const tone = awaiting ? AWAITING : (TONES[ticket.status] ?? TONES.OPEN!);
+  const { Icon } = tone;
+
+  const headline = awaiting
+    ? locale === "en"
+      ? "The team needs more information from you"
+      : "ทีมงานขอข้อมูลเพิ่มเติม — รอการตอบกลับจากคุณ"
+    : maps.columnOf(ticket.status)?.description?.trim() ||
+      MESSAGES[ticket.status]?.[locale] ||
+      maps.labelOf(ticket.status);
+
+  /*
+   * The solution note, only when the thread does not already carry it. A
+   * resolved ticket usually has the team's answer as their last message, and
+   * printing the note here too says the same words twice on one screen. Kept as
+   * the fallback for a ticket whose note never reached the conversation.
+   */
+  const showNote =
+    !awaiting &&
+    !ticket.messages.some((m) => m.authorRole === "AGENT") &&
+    maps.isClosed(ticket.status) &&
+    Boolean(ticket.resolutionNote?.trim());
+
+  return (
+    <section className="lw-hero" style={{ borderColor: tone.border, background: tone.bg }}>
+      <Icon className="lw-hero__icon" style={{ color: tone.accent }} />
+      <div className="lw-hero__body">
+        <p className="lw-hero__kicker">
+          {awaiting
+            ? locale === "en" ? "AWAITING YOUR REPLY" : "รอการตอบกลับจากคุณ"
+            : locale === "en" ? "LATEST STATUS" : "สถานะล่าสุด"}
+        </p>
+        <p className="lw-hero__headline" style={{ color: tone.fg }}>{headline}</p>
+        {awaiting && (
+          <p className="lw-hero__nudge">
+            {locale === "en"
+              ? "Please reply to the team in the conversation below"
+              : "กรุณาตอบกลับให้ทีมงานในช่องแชทด้านล่าง"}
+          </p>
+        )}
+        {showNote && (
+          <div className="lw-hero__note">
+            <WrenchIcon className="lw-hero__wrench" />
+            <TicketBody html={ticket.resolutionNote ?? ""} host={host} />
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}

package/src/components/StatusPill.tsx

@@ -0,0 +1,14 @@
+/**
+ * A status as the realm coloured it.
+ *
+ * The tone arrives as DATA — a realm adds lanes whenever it likes — so it is an
+ * inline style rather than a class. No stylesheet could know the names ahead of
+ * time.
+ */
+export function StatusPill({ label, tone }: { label: string; tone: { fg: string; bg: string } }) {
+  return (
+    <span className="lw-status" style={{ background: tone.bg, color: tone.fg }}>
+      {label}
+    </span>
+  );
+}

package/src/components/TicketBody.tsx

@@ -0,0 +1,50 @@
+/**
+ * A message or description body, rendered safely.
+ *
+ * Deliberately NOT `dangerouslySetInnerHTML`. Bodies are HTML written by other
+ * people and shown inside the HOST application's page — markup that ran here
+ * would run with the host's origin, against the host's session. `renderBody`
+ * parses into an inert document, walks it against an allowlist and fills the
+ * node; setting innerHTML would hand the string straight to the parser.
+ */
+import { useEffect, useRef, useState } from "react";
+import { renderBody } from "@lightworkai.official/debug-capture";
+
+export function TicketBody({ html, host, className }: { html: string; host: string; className?: string }) {
+  const target = useRef<HTMLDivElement>(null);
+  /**
+   * The image being viewed full size, if any.
+   *
+   * Bodies are capped to a thumbnail so one screenshot cannot push a whole
+   * conversation off the screen — which is only reasonable if the full size is
+   * a click away.
+   */
+  const [zoomed, setZoomed] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (target.current) renderBody(target.current, html, host);
+  }, [html, host]);
+
+  return (
+    <>
+      <div
+        ref={target}
+        className={className ? `lw-body ${className}` : "lw-body"}
+        // Delegated rather than bound per image: this is sanitised HTML we
+        // inject, not elements we built, so there is nothing to attach to.
+        onClick={(event) => {
+          const node = event.target as HTMLElement;
+          if (node.tagName !== "IMG") return;
+          const src = node.getAttribute("src");
+          if (src) setZoomed(src);
+        }}
+      />
+      {zoomed && (
+        <div className="lw-zoom" role="dialog" aria-modal="true" onClick={() => setZoomed(null)}>
+          <button type="button" className="lw-zoom__close" aria-label="close">✕</button>
+          <img src={zoomed} alt="" />
+        </div>
+      )}
+    </>
+  );
+}

package/src/components/TicketConversation.tsx

@@ -0,0 +1,177 @@
+/**
+ * The thread, and the box to add to it.
+ *
+ * The composer is the same TipTap editor the team uses — the original's own
+ * reasoning, in its own words: "ผู้แจ้งอธิบายปัญหาด้วยภาพหน้าจอเป็นเรื่องปกติที่สุด".
+ */
+import { useEffect, useRef, useState } from "react";
+import { editMyMessage, formatDateTime, type MyTicketDetail, type TicketStrings } from "@lightworkai.official/debug-capture";
+import { RichReplyEditor, type RichReplyEditorHandle } from "./RichReplyEditor";
+import { TicketBody } from "./TicketBody";
+import { CheckSmallIcon, PencilIcon, SendIcon, XSmallIcon } from "./icons";
+
+export function TicketConversation({
+  ticket, t, host, timezone, locale, sending, uploadImage, onSend, onEdited, onError,
+}: {
+  ticket: MyTicketDetail;
+  t: TicketStrings;
+  host: string;
+  timezone: string;
+  locale: "th" | "en" | undefined;
+  sending?: boolean;
+  uploadImage: (file: File) => Promise<string>;
+  onSend: (body: string) => void;
+  onEdited: () => void;
+  onError: (message: string) => void;
+}) {
+  const editor = useRef<RichReplyEditorHandle>(null);
+  /**
+   * The message being rewritten, if any.
+   *
+   * Only ONE at a time: an open editor per bubble would let someone start three
+   * rewrites and lose track of which are unsaved.
+   */
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [savingEdit, setSavingEdit] = useState(false);
+  const draft = useRef<RichReplyEditorHandle>(null);
+
+  const LABELS: Record<string, string> = {
+    bold: t.bold, italic: t.italic, underline: t.underline,
+    bulletList: t.bulletList, orderedList: t.orderedList,
+    link: t.link, linkPrompt: t.linkPrompt, attachImage: t.attachImage, uploading: t.uploading,
+  };
+
+  async function saveEdit(messageId: string): Promise<void> {
+    const body = draft.current?.value() ?? "";
+    if (!body || savingEdit) return;
+    setSavingEdit(true);
+    try {
+      await editMyMessage(ticket.id, messageId, body);
+      setEditingId(null);
+      onEdited();
+    } catch (e) {
+      onError(e instanceof Error ? e.message : t.sendFailed);
+    } finally {
+      setSavingEdit(false);
+    }
+  }
+  const thread = useRef<HTMLDivElement>(null);
+  const seen = useRef(-1);
+
+  /**
+   * Open at the newest message, and stay there when one arrives.
+   *
+   * The thread is a fixed-height window (~320px), so without the first part it
+   * opens showing the OLDEST messages and the reader has to scroll to find out
+   * what has happened since. Every chat opens at the bottom.
+   *
+   * The second part matters because the thread sits above the composer: a reply
+   * pushes the composer down and out of sight, leaving the reader in the middle
+   * of the conversation with no sign their message landed.
+   */
+  useEffect(() => {
+    const box = thread.current;
+    if (!box) return;
+    const first = seen.current < 0;
+    if (first || ticket.messages.length > seen.current) {
+      box.scrollTop = box.scrollHeight;
+      // Jumped on open — that is where the conversation starts, not a
+      // transition from somewhere else, and animating it reads as a glitch.
+      if (!first) box.lastElementChild?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    }
+    seen.current = ticket.messages.length;
+  }, [ticket.id, ticket.messages.length]);
+
+  function send(): void {
+    const body = editor.current?.value() ?? "";
+    if (!body || sending) return;
+    onSend(body);
+    editor.current?.clear();
+  }
+
+  return (
+    <section className="lw-card">
+      <h3 className="lw-card__title">{t.conversation}</h3>
+
+      <div ref={thread} className="lw-thread">
+        {ticket.messages.length === 0 && <p className="lw-thread__empty">{t.noMessages}</p>}
+        {ticket.messages.map((message) => (
+          <article
+            key={message.id}
+            className={`lw-msg${message.authorRole === "REPORTER" ? " lw-msg--mine" : ""}`}
+          >
+            {/* The original's shape exactly: the meta line lives INSIDE a
+                bordered bubble, and a TEAM message shows only "ทีมงาน" — never
+                the officer's name. That is deliberate there and worth keeping:
+                the team answers as one unit, and a reporter should not see
+                which person replied. */}
+            <div className="lw-msg__bubble">
+              <p className="lw-msg__meta">
+                {message.authorRole === "AGENT" ? (
+                  <span className="lw-msg__who">{t.team}</span>
+                ) : (
+                  <>
+                    <span className="lw-msg__who">{message.authorName || t.you}</span>
+                    <span className="lw-msg__role">{t.reporterRole}</span>
+                  </>
+                )}
+                <span>· {formatDateTime(message.createdAt, timezone, locale)}</span>
+                {message.editedAt && <span className="lw-msg__edited">· {t.edited}</span>}
+                {/* Your own only. The server refuses any message the caller did
+                    not write, so this button is a convenience, not the rule. */}
+                {message.authorRole === "REPORTER" && editingId !== message.id && (
+                  <button type="button" className="lw-msg__edit" onClick={() => setEditingId(message.id)}>
+                    <PencilIcon /> {t.edit}
+                  </button>
+                )}
+              </p>
+              {editingId === message.id ? (
+                <div className="lw-msg__editing">
+                  <RichReplyEditor
+                    ref={draft}
+                    placeholder={t.replyPlaceholder}
+                    host={host}
+                    locale={locale}
+                    disabled={savingEdit}
+                    uploadImage={uploadImage}
+                    onError={onError}
+                    labels={LABELS}
+                    initial={message.body}
+                  />
+                  <div className="lw-msg__editActions">
+                    <button type="button" className="lw-btn" disabled={savingEdit} onClick={() => setEditingId(null)}>
+                      <XSmallIcon /> {t.cancel}
+                    </button>
+                    <button type="button" className="lw-send" disabled={savingEdit} onClick={() => void saveEdit(message.id)}>
+                      <CheckSmallIcon /> {t.saveEdit}
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                <TicketBody html={message.body} host={host} />
+              )}
+            </div>
+          </article>
+        ))}
+      </div>
+
+      <div className="lw-composer">
+        <RichReplyEditor
+          ref={editor}
+          placeholder={t.replyPlaceholder}
+          host={host}
+          locale={locale}
+          disabled={sending}
+          uploadImage={uploadImage}
+          onError={onError}
+          labels={LABELS}
+        />
+        <div className="lw-composer__actions">
+          <button type="button" className="lw-send" disabled={sending} onClick={send}>
+            <SendIcon /> {sending ? t.sending : t.send}
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/components/TicketDetail.tsx

@@ -0,0 +1,110 @@
+/**
+ * One report: what was filed, where it stands, what happened, and the thread.
+ * The order is the original's.
+ */
+import {
+  formatDateTime, ticketKey,
+  type MyTicketDetail, type RealmConfig, type StatusEvent, type StatusMaps, type TicketStrings,
+} from "@lightworkai.official/debug-capture";
+import { TicketBody } from "./TicketBody";
+import { StatusHero } from "./StatusHero";
+import { ReopenPanel } from "./ReopenPanel";
+import { TicketTimeline } from "./TicketTimeline";
+import { TicketConversation } from "./TicketConversation";
+import { TicketScreenshots } from "./TicketScreenshots";
+import { ArrowLeftIcon } from "./icons";
+
+export function TicketDetail(props: {
+  ticket: MyTicketDetail;
+  history: StatusEvent[];
+  config: RealmConfig;
+  maps: StatusMaps;
+  t: TicketStrings;
+  host: string;
+  locale: "th" | "en" | undefined;
+  sending?: boolean;
+  reopening?: boolean;
+  uploadImage: (file: File) => Promise<string>;
+  attachmentUrl: (id: string) => Promise<string>;
+  onBack: () => void;
+  onSend: (body: string) => void;
+  onEdited: () => void;
+  onReopen: (note: string) => void;
+  onError: (message: string) => void;
+}) {
+  const { ticket, config, maps, t, host, locale } = props;
+  const lang: "th" | "en" = locale === "en" ? "en" : "th";
+  const canReopen = maps.isClosed(ticket.status) && config.featureFlags.selfServiceReopen === true;
+  const updated = ticket.updatedAt && ticket.updatedAt !== ticket.createdAt;
+  const when = (iso: string | null) => formatDateTime(iso, config.timezone, locale);
+
+  /*
+   * Images only. The original's reporter view lists no attachments at all, and
+   * what a widget report actually carries makes the reason plain: the other
+   * file is `debug-bundle.json`, the capture payload the TEAM reads. The
+   * screenshot they drew on is theirs; the bundle is not.
+   */
+  const screenshots = ticket.attachments.filter((a) => (a.contentType ?? "").startsWith("image/"));
+
+  return (
+    <div className="lw-detail">
+      <button type="button" className="lw-back" onClick={props.onBack}>
+        <ArrowLeftIcon /> {t.back}
+      </button>
+
+      <section className="lw-card">
+        <h3 className="lw-card__heading">{ticket.title}</h3>
+        <div className="lw-facts">
+          <span className="lw-key">{ticketKey(config.realm.slug, ticket.number)}</span>
+          {ticket.category && <span className="lw-chip">{ticket.category}</span>}
+          <span>{t.colCreated} {when(ticket.createdAt)}</span>
+          {updated && <span>{t.colUpdated} {when(ticket.updatedAt)}</span>}
+        </div>
+        {ticket.description && <TicketBody className="lw-intro" html={ticket.description} host={host} />}
+        {ticket.routeUrl && (
+          <p className="lw-route">
+            {t.page}:{" "}
+            <a href={ticket.routeUrl} target="_blank" rel="noopener noreferrer">{ticket.routeUrl}</a>
+          </p>
+        )}
+      </section>
+
+      <StatusHero ticket={ticket} maps={maps} t={t} locale={lang} host={host} />
+
+      {canReopen && <ReopenPanel t={t} locale={lang} busy={props.reopening} onReopen={props.onReopen} />}
+
+      <section className="lw-card">
+        <h3 className="lw-card__title">{lang === "en" ? "Progress" : "ความคืบหน้า"}</h3>
+        <TicketTimeline
+          history={props.history}
+          status={ticket.status}
+          createdAt={ticket.createdAt}
+          maps={maps}
+          timezone={config.timezone}
+          locale={lang}
+        />
+      </section>
+
+      <TicketConversation
+        ticket={ticket}
+        t={t}
+        host={host}
+        timezone={config.timezone}
+        locale={locale}
+        sending={props.sending}
+        uploadImage={props.uploadImage}
+        onSend={props.onSend}
+        onEdited={props.onEdited}
+        onError={props.onError}
+      />
+
+      {screenshots.length > 0 && (
+        <TicketScreenshots
+          images={screenshots}
+          title={lang === "en" ? "Screenshots you sent" : "ภาพหน้าจอที่คุณแจ้ง"}
+          attachmentUrl={props.attachmentUrl}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/TicketScreenshots.tsx

@@ -0,0 +1,41 @@
+/**
+ * The pictures the reporter attached — shown, not offered as downloads.
+ *
+ * The URL is FETCHED, not constructed. These are ordinary attachments: the
+ * inline-image route answers only to the per-object tokens embedded images
+ * carry, and the admin download route wants a session this widget has not got.
+ */
+import { useEffect, useState } from "react";
+import type { TicketAttachment } from "@lightworkai.official/debug-capture";
+
+export function TicketScreenshots({
+  images, title, attachmentUrl,
+}: { images: TicketAttachment[]; title: string; attachmentUrl: (id: string) => Promise<string> }) {
+  const [urls, setUrls] = useState<Record<string, string>>({});
+
+  useEffect(() => {
+    let live = true;
+    for (const image of images) {
+      attachmentUrl(image.id).then(
+        (url) => live && setUrls((prev) => ({ ...prev, [image.id]: url })),
+        // Drop the frame rather than leave a broken-image icon where a
+        // screenshot should be.
+        () => undefined,
+      );
+    }
+    return () => {
+      live = false;
+    };
+  }, [images, attachmentUrl]);
+
+  return (
+    <section className="lw-card">
+      <h3 className="lw-card__title">{title}</h3>
+      {images.map((image) =>
+        urls[image.id] ? (
+          <img key={image.id} className="lw-shot" src={urls[image.id]} alt={image.filename ?? ""} />
+        ) : null,
+      )}
+    </section>
+  );
+}

package/src/components/TicketTable.tsx

@@ -0,0 +1,161 @@
+/**
+ * The reporter's list — the original's seven columns.
+ *
+ * Every decision here is imported: which rows survive the filter, how a column
+ * sorts, what "the team replied" means, how a date reads. That is the point of
+ * the split. This file arranges them; it decides nothing.
+ */
+import { useMemo } from "react";
+import {
+  compareBy, formatDateTime, hasSolution, hasTeamReply, matchesKeyword,
+  pageCount, pageOf, statusTone, ticketKey,
+  type MyTicketListItem, type Sort, type SortKey, type StatusMaps, type TicketStrings,
+} from "@lightworkai.official/debug-capture";
+import { StatusPill } from "./StatusPill";
+import { CheckIcon, MessageIcon } from "./icons";
+
+const COLUMNS: { key: SortKey; label: keyof TicketStrings; width?: string }[] = [
+  { key: "number", label: "colNumber", width: "120px" },
+  { key: "title", label: "colTitle" },
+  { key: "module", label: "colModule", width: "160px" },
+  { key: "status", label: "colStatus", width: "130px" },
+  { key: "response", label: "colResponse", width: "150px" },
+  { key: "createdAt", label: "colCreated", width: "170px" },
+  { key: "updatedAt", label: "colUpdated", width: "170px" },
+];
+
+export interface TicketTableProps {
+  items: MyTicketListItem[];
+  maps: StatusMaps;
+  t: TicketStrings;
+  slug: string | undefined;
+  timezone: string;
+  locale: "th" | "en" | undefined;
+  keyword: string;
+  statusFilter: string;
+  sort: Sort;
+  page: number;
+  onOpen: (id: string) => void;
+  onSort: (key: SortKey) => void;
+  onPage: (page: number) => void;
+  onCount?: (count: number) => void;
+}
+
+export function TicketTable(props: TicketTableProps) {
+  const { items, maps, t, slug, timezone, locale, keyword, statusFilter, sort, page } = props;
+
+  const visible = useMemo(
+    () =>
+      items
+        .filter((item) => (statusFilter ? item.status === statusFilter : true))
+        .filter((item) => matchesKeyword(item, keyword, slug, maps.labelOf))
+        .sort(compareBy(sort, maps, slug)),
+    [items, statusFilter, keyword, slug, maps, sort],
+  );
+
+  const pages = pageCount(visible.length);
+  // A filter can strand the reader past the end of the shorter list.
+  const current = Math.min(page, pages);
+  const rows = pageOf(visible, current);
+  props.onCount?.(visible.length);
+
+  const when = (iso: string | null) => formatDateTime(iso, timezone, locale);
+
+  return (
+    <>
+      <div className="lw-tablewrap">
+        <table className="lw-table">
+          <thead>
+            <tr>
+              {COLUMNS.map((column) => (
+                <th
+                  key={column.key}
+                  scope="col"
+                  className="lw-th"
+                  style={column.width ? { width: column.width } : undefined}
+                  aria-sort={
+                    sort.key === column.key ? (sort.direction === "asc" ? "ascending" : "descending") : undefined
+                  }
+                  onClick={() => props.onSort(column.key)}
+                >
+                  {t[column.label] as string}{" "}
+                  <span className="lw-arrow">
+                    {sort.key === column.key ? (sort.direction === "asc" ? "▲" : "▼") : "⇅"}
+                  </span>
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {rows.length === 0 ? (
+              <tr>
+                <td colSpan={COLUMNS.length} className="lw-empty">
+                  {items.length === 0 ? t.empty : t.emptyFiltered}
+                </td>
+              </tr>
+            ) : (
+              rows.map((row) => (
+                <tr
+                  key={row.id}
+                  className="lw-row"
+                  tabIndex={0}
+                  onClick={() => props.onOpen(row.id)}
+                  onKeyDown={(event) => {
+                    if (event.key === "Enter" || event.key === " ") {
+                      event.preventDefault();
+                      props.onOpen(row.id);
+                    }
+                  }}
+                >
+                  <td className="lw-num">{ticketKey(slug, row.number)}</td>
+                  <td className="lw-title">{row.title}</td>
+                  <td>
+                    {row.category ? <span className="lw-chip">{row.category}</span> : <span className="lw-dash">—</span>}
+                  </td>
+                  <td>
+                    {/* "Waiting on you" outranks the neutral status: it is the
+                        honest state and the only one the reporter can act on. */}
+                    {maps.isAwaitingReply(row.status) ? (
+                      <span className="lw-pill lw-pill--awaiting">
+                        <MessageIcon /> {t.awaitingReply}
+                      </span>
+                    ) : (
+                      <StatusPill label={maps.labelOf(row.status)} tone={statusTone(maps.columnOf(row.status)?.color)} />
+                    )}
+                  </td>
+                  <td>
+                    {hasSolution(row) ? (
+                      <span className="lw-pill lw-pill--solution">
+                        <CheckIcon /> {t.hasSolution}
+                      </span>
+                    ) : hasTeamReply(row) ? (
+                      <span className="lw-pill lw-pill--replied">
+                        <MessageIcon /> {t.hasReply}
+                      </span>
+                    ) : (
+                      <span className="lw-muted">{t.noReply}</span>
+                    )}
+                  </td>
+                  <td className="lw-dim">{when(row.createdAt)}</td>
+                  <td className="lw-dim">{when(row.updatedAt)}</td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {(visible.length > rows.length || current > 1) && (
+        <div className="lw-pager">
+          <span>{t.of(current, pages)}</span>
+          <button type="button" className="lw-btn" disabled={current <= 1} onClick={() => props.onPage(current - 1)}>
+            {t.prev}
+          </button>
+          <button type="button" className="lw-btn" disabled={current >= pages} onClick={() => props.onPage(current + 1)}>
+            {t.next}
+          </button>
+        </div>
+      )}
+    </>
+  );
+}