Nora
b793cd6955
Mirrors the water-log Smartsheet pattern (migration 0093 + src/services/smartsheet-sync.ts). End-to-end wiring is in place; the brand fills in sheet ID + token + column mapping whenever ready. DB: - 0095_time_tracking_smartsheet_sync.sql — config + sync_queue + sync_log tables with brand-scoped RLS. Unique constraint on (brand_id, log_id) keeps the queue idempotent against retries. Code: - db/schema/time-tracking.ts — adds TTSmartsheetFrequency, TT_SMARTSHEET_FREQUENCIES, TTSmartsheetColumnKey, TTSmartsheetColumnMapping, and the three pgTable defs. - src/services/time-tracking-smartsheet-sync.ts — syncLogToSmartsheet (dedup-by-log_id, token-echo sanitization, retry-with-backoff), drainTTSyncQueue, runScheduledTTSync. - src/actions/time-tracking/smartsheet.ts — full admin CRUD (getTTSmartsheetConfig, saveTTSmartsheetConfig, testTTSmartsheetConnection, getTTSmartsheetRecent, getTTSmartsheetQueueSummary, disableTTSmartsheet). - src/actions/time-tracking/field.ts — clockOutWorker calls the new enqueueClockOutForSync helper in its OWN transaction (so a queue- insert failure can never poison the clock-out commit; reviewer caught this in cycle 2's same-style bug pattern). - src/components/admin/time-tracking/TimeTrackingSmartsheetCard.tsx — slim, focused card: sheet ID + token + frequency + enable + Test Connection → column-mapping dropdowns + Recent Activity table. - src/app/admin/water-log/settings/page.tsx — §06 section renders the new card as a sibling of the existing water-log smartsheet card. Permission gate uses can_manage_settings + platform_admin (not can_manage_water_log) — feature is a brand-level integration setting, not water-log-specific. Out of scope / deferred: - /api/time-tracking/smartsheet-sync cron route. The trigger is optional: realtime mode syncs inline; 15-min/hourly modes need the cron. Add in a follow-up cycle when the cron infrastructure is revisited. - drag-and-drop column-mapping UX (current card uses plain dropdowns). - backfill flow (no equivalent of the water-log "backfill past N days" feature yet). - can_manage_time_tracking permission flag (uses can_manage_settings as the proxy; revisit once the admin_users schema gets a time-tracking-specific permission column).
553 lines
18 KiB
TypeScript
553 lines
18 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* TimeTrackingSmartsheetCard — admin `/admin/water-log/settings`
|
|
* card for the Time Tracking → Smartsheet integration (Cycle 5).
|
|
*
|
|
* Slimmer than the water-log SmartsheetIntegrationCard because the
|
|
* user explicitly wants this config-deferred — they have no sheet
|
|
* ID yet. When they drop one in, they'll get the full column-
|
|
* mapping form (Test Connection gates it). Until then, only Sheet
|
|
* ID / token / frequency / sync-enabled controls are visible.
|
|
*
|
|
* Self-contained client component. Takes `brandId` as a prop per
|
|
* the brand-isolation convention.
|
|
*/
|
|
|
|
import { useCallback, useEffect, useReducer, useState } from "react";
|
|
import {
|
|
getTTSmartsheetConfig,
|
|
saveTTSmartsheetConfig,
|
|
testTTSmartsheetConnection,
|
|
getTTSmartsheetRecent,
|
|
disableTTSmartsheet,
|
|
getTTSmartsheetQueueSummary,
|
|
type TTSmartsheetConfigResponse,
|
|
type TTSmartsheetRecentEntry,
|
|
type TTSmartsheetQueueSummary,
|
|
} from "@/actions/time-tracking/smartsheet";
|
|
import { TT_SMARTSHEET_FREQUENCIES } from "@/db/schema/time-tracking";
|
|
import type {
|
|
TTSmartsheetColumnMapping,
|
|
TTSmartsheetColumnKey,
|
|
TTSmartsheetFrequency,
|
|
} from "@/db/schema/time-tracking";
|
|
import { formatDateTime } from "@/lib/format-date";
|
|
|
|
type Props = {
|
|
brandId: string;
|
|
};
|
|
|
|
type Status =
|
|
| { kind: "idle" }
|
|
| { kind: "saved-at"; iso: string }
|
|
| { kind: "error"; message: string };
|
|
|
|
type State = {
|
|
config: TTSmartsheetConfigResponse | null;
|
|
sheetIdInput: string;
|
|
tokenInput: string;
|
|
showTokenInput: boolean;
|
|
frequency: TTSmartsheetFrequency;
|
|
syncEnabled: boolean;
|
|
columns: TTColumnOption[];
|
|
columnMapping: TTSmartsheetColumnMapping;
|
|
recent: TTSmartsheetRecentEntry[];
|
|
queue: TTSmartsheetQueueSummary;
|
|
loading: boolean;
|
|
testing: boolean;
|
|
saving: boolean;
|
|
status: Status;
|
|
};
|
|
|
|
type TTColumnOption = {
|
|
id: string;
|
|
title: string;
|
|
type: string;
|
|
};
|
|
|
|
type Action =
|
|
| { type: "SET_CONFIG"; config: TTSmartsheetConfigResponse }
|
|
| { type: "SET_SHEET_ID"; value: string }
|
|
| { type: "SET_TOKEN"; value: string }
|
|
| { type: "SET_SHOW_TOKEN"; value: boolean }
|
|
| { type: "SET_FREQUENCY"; value: TTSmartsheetFrequency }
|
|
| { type: "SET_SYNC_ENABLED"; value: boolean }
|
|
| { type: "SET_COLUMNS"; columns: NonNullable<State["columns"]> }
|
|
| { type: "SET_COL_MAPPING_VALUE"; key: TTSmartsheetColumnKey; columnId: string | null }
|
|
| { type: "SET_RECENT"; entries: TTSmartsheetRecentEntry[] }
|
|
| { type: "SET_QUEUE"; queue: TTSmartsheetQueueSummary }
|
|
| { type: "SET_LOADING"; loading: boolean }
|
|
| { type: "SET_TESTING"; value: boolean }
|
|
| { type: "SET_SAVING"; value: boolean }
|
|
| { type: "SET_STATUS"; value: Status };
|
|
|
|
const EMPTY_MAPPING: TTSmartsheetColumnMapping = {
|
|
log_id: "",
|
|
clock_in: "",
|
|
clock_out: null,
|
|
worker: null,
|
|
task: null,
|
|
hours: null,
|
|
lunch_minutes: null,
|
|
notes: null,
|
|
};
|
|
|
|
function reducer(state: State, action: Action): State {
|
|
switch (action.type) {
|
|
case "SET_CONFIG": {
|
|
const cfg = action.config;
|
|
return {
|
|
...state,
|
|
config: cfg,
|
|
sheetIdInput: cfg.sheetId ?? "",
|
|
frequency: cfg.syncFrequency,
|
|
syncEnabled: cfg.syncEnabled,
|
|
showTokenInput: !cfg.hasToken,
|
|
columnMapping: cfg.columnMapping ?? { ...EMPTY_MAPPING },
|
|
loading: false,
|
|
};
|
|
}
|
|
case "SET_SHEET_ID":
|
|
return { ...state, sheetIdInput: action.value };
|
|
case "SET_TOKEN":
|
|
return { ...state, tokenInput: action.value };
|
|
case "SET_SHOW_TOKEN":
|
|
return { ...state, showTokenInput: action.value };
|
|
case "SET_FREQUENCY":
|
|
return { ...state, frequency: action.value };
|
|
case "SET_SYNC_ENABLED":
|
|
return { ...state, syncEnabled: action.value };
|
|
case "SET_COLUMNS":
|
|
return { ...state, columns: action.columns };
|
|
case "SET_COL_MAPPING_VALUE":
|
|
return {
|
|
...state,
|
|
columnMapping: {
|
|
...state.columnMapping,
|
|
[action.key]: action.columnId,
|
|
},
|
|
};
|
|
case "SET_RECENT":
|
|
return { ...state, recent: action.entries };
|
|
case "SET_QUEUE":
|
|
return { ...state, queue: action.queue };
|
|
case "SET_LOADING":
|
|
return { ...state, loading: action.loading };
|
|
case "SET_TESTING":
|
|
return { ...state, testing: action.value };
|
|
case "SET_SAVING":
|
|
return { ...state, saving: action.value };
|
|
case "SET_STATUS":
|
|
return { ...state, status: action.value };
|
|
}
|
|
}
|
|
|
|
function initialState(): State {
|
|
return {
|
|
config: null,
|
|
sheetIdInput: "",
|
|
tokenInput: "",
|
|
showTokenInput: true,
|
|
frequency: "hourly",
|
|
syncEnabled: false,
|
|
columns: [],
|
|
columnMapping: { ...EMPTY_MAPPING },
|
|
recent: [],
|
|
queue: { pending: 0, syncing: 0, synced: 0, failed: 0 },
|
|
loading: true,
|
|
testing: false,
|
|
saving: false,
|
|
status: { kind: "idle" },
|
|
};
|
|
}
|
|
|
|
export function TimeTrackingSmartsheetCard({ brandId }: Props) {
|
|
const [state, dispatch] = useReducer(reducer, undefined, initialState);
|
|
const [, force] = useState({}); // for non-react subscribed re-renders
|
|
|
|
const refresh = useCallback(async () => {
|
|
const [cfg, recent, queue] = await Promise.all([
|
|
getTTSmartsheetConfig(brandId),
|
|
getTTSmartsheetRecent(brandId, 10),
|
|
getTTSmartsheetQueueSummary(brandId),
|
|
]);
|
|
dispatch({ type: "SET_CONFIG", config: cfg });
|
|
dispatch({ type: "SET_RECENT", entries: recent });
|
|
dispatch({ type: "SET_QUEUE", queue });
|
|
}, [brandId]);
|
|
|
|
useEffect(() => {
|
|
void refresh();
|
|
}, [refresh]);
|
|
|
|
const onTestConnection = useCallback(async () => {
|
|
dispatch({ type: "SET_TESTING", value: true });
|
|
dispatch({ type: "SET_STATUS", value: { kind: "idle" } });
|
|
const result = await testTTSmartsheetConnection(brandId, {
|
|
sheetId: state.sheetIdInput,
|
|
token: state.tokenInput || undefined,
|
|
});
|
|
if (!result.success) {
|
|
dispatch({
|
|
type: "SET_STATUS",
|
|
value: { kind: "error", message: result.error },
|
|
});
|
|
dispatch({ type: "SET_TESTING", value: false });
|
|
return;
|
|
}
|
|
dispatch({ type: "SET_COLUMNS", columns: result.columns });
|
|
dispatch({ type: "SET_STATUS", value: { kind: "idle" } });
|
|
dispatch({ type: "SET_TESTING", value: false });
|
|
force({});
|
|
}, [brandId, state.sheetIdInput, state.tokenInput]);
|
|
|
|
const onSave = useCallback(async () => {
|
|
dispatch({ type: "SET_SAVING", value: true });
|
|
dispatch({ type: "SET_STATUS", value: { kind: "idle" } });
|
|
const result = await saveTTSmartsheetConfig(brandId, {
|
|
sheetId: state.sheetIdInput,
|
|
token: state.tokenInput,
|
|
syncEnabled: state.syncEnabled,
|
|
syncFrequency: state.frequency,
|
|
columnMapping: state.columnMapping,
|
|
});
|
|
if (!result.success) {
|
|
dispatch({
|
|
type: "SET_STATUS",
|
|
value: { kind: "error", message: result.error },
|
|
});
|
|
dispatch({ type: "SET_SAVING", value: false });
|
|
return;
|
|
}
|
|
dispatch({
|
|
type: "SET_CONFIG",
|
|
config: result.config,
|
|
});
|
|
dispatch({
|
|
type: "SET_STATUS",
|
|
value: { kind: "saved-at", iso: new Date().toISOString() },
|
|
});
|
|
dispatch({ type: "SET_SAVING", value: false });
|
|
}, [brandId, state]);
|
|
|
|
const onDisable = useCallback(async () => {
|
|
dispatch({ type: "SET_SAVING", value: true });
|
|
await disableTTSmartsheet(brandId);
|
|
await refresh();
|
|
dispatch({ type: "SET_SAVING", value: false });
|
|
dispatch({
|
|
type: "SET_STATUS",
|
|
value: { kind: "saved-at", iso: new Date().toISOString() },
|
|
});
|
|
}, [brandId, refresh]);
|
|
|
|
if (state.loading) {
|
|
return (
|
|
<div className="rounded-2xl border border-[#e6dfd1] bg-white p-6">
|
|
<div className="h-5 w-40 bg-[#fdfaf2] animate-pulse rounded" />
|
|
<div className="mt-3 h-4 w-72 bg-[#fdfaf2] animate-pulse rounded" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="rounded-2xl border border-[#e6dfd1] bg-white p-6 shadow-sm"
|
|
data-test="tt-smartsheet-card"
|
|
>
|
|
<div className="mb-4 flex items-start justify-between">
|
|
<div>
|
|
<h2 className="text-xl font-bold text-[#1a4d2e]">
|
|
Smartsheet (Time Tracking)
|
|
</h2>
|
|
<p className="mt-1 text-sm text-[rgba(60,60,67,0.65)]">
|
|
Push every closed clock-out to a configured Smartsheet sheet.
|
|
Same encryption + retry policy as the Water Log smartsheet
|
|
integration.
|
|
</p>
|
|
</div>
|
|
<label className="flex cursor-pointer items-center gap-2 text-sm font-medium text-[#1a4d2e]">
|
|
<input
|
|
type="checkbox"
|
|
className="h-4 w-4 rounded border-[#1a4d2e] accent-[#1a4d2e]"
|
|
checked={state.syncEnabled}
|
|
onChange={(e) =>
|
|
dispatch({
|
|
type: "SET_SYNC_ENABLED",
|
|
value: e.target.checked,
|
|
})
|
|
}
|
|
data-test="tt-smartsheet-enabled"
|
|
/>
|
|
Enabled
|
|
</label>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<div>
|
|
<label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-[rgba(60,60,67,0.65)]">
|
|
Sheet ID or URL
|
|
</label>
|
|
<input
|
|
type="text"
|
|
placeholder="e.g. 8309876543210123"
|
|
value={state.sheetIdInput}
|
|
onChange={(e) =>
|
|
dispatch({ type: "SET_SHEET_ID", value: e.target.value })
|
|
}
|
|
className="w-full rounded-md border border-[#e6dfd1] bg-[#fdfaf2] px-3 py-2 text-sm"
|
|
data-test="tt-smartsheet-sheet-id"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-[rgba(60,60,67,0.65)]">
|
|
API token
|
|
</label>
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type={state.showTokenInput ? "text" : "password"}
|
|
placeholder={
|
|
state.config?.hasToken && !state.showTokenInput
|
|
? state.config.maskedToken ?? "••••••••"
|
|
: "paste new token here"
|
|
}
|
|
value={state.tokenInput}
|
|
onChange={(e) =>
|
|
dispatch({ type: "SET_TOKEN", value: e.target.value })
|
|
}
|
|
className="w-full rounded-md border border-[#e6dfd1] bg-[#fdfaf2] px-3 py-2 text-sm"
|
|
data-test="tt-smartsheet-token"
|
|
/>
|
|
<button
|
|
type="button"
|
|
className="rounded-md border border-[#e6dfd1] bg-white px-2 py-1 text-xs font-semibold text-[rgba(60,60,67,0.65)] hover:bg-[#fdfaf2]"
|
|
onClick={() =>
|
|
dispatch({
|
|
type: "SET_SHOW_TOKEN",
|
|
value: !state.showTokenInput,
|
|
})
|
|
}
|
|
>
|
|
{state.showTokenInput ? "Hide" : "Show"}
|
|
</button>
|
|
</div>
|
|
{state.config?.hasToken && !state.tokenInput && (
|
|
<p className="mt-1 text-xs text-[rgba(60,60,67,0.55)]">
|
|
A token is saved. Leave blank to keep it.
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-[rgba(60,60,67,0.65)]">
|
|
Frequency
|
|
</label>
|
|
<select
|
|
value={state.frequency}
|
|
onChange={(e) =>
|
|
dispatch({
|
|
type: "SET_FREQUENCY",
|
|
value: e.target.value as TTSmartsheetFrequency,
|
|
})
|
|
}
|
|
className="w-full rounded-md border border-[#e6dfd1] bg-[#fdfaf2] px-3 py-2 text-sm"
|
|
data-test="tt-smartsheet-frequency"
|
|
>
|
|
{TT_SMARTSHEET_FREQUENCIES.map((f) => (
|
|
<option key={f} value={f}>
|
|
{f.replace(/_/g, " ")}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4 flex flex-wrap items-center gap-2">
|
|
<button
|
|
type="button"
|
|
disabled={state.testing || !state.sheetIdInput}
|
|
onClick={onTestConnection}
|
|
className="rounded-md border border-[#1a4d2e] bg-white px-3 py-1.5 text-sm font-semibold text-[#1a4d2e] hover:bg-[#fdfaf2] disabled:cursor-not-allowed disabled:opacity-50"
|
|
data-test="tt-smartsheet-test"
|
|
>
|
|
{state.testing ? "Testing…" : "Test Connection"}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
disabled={state.saving}
|
|
onClick={onSave}
|
|
className="rounded-md bg-[#1a4d2e] px-3 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-[#14432a] disabled:cursor-not-allowed disabled:opacity-50"
|
|
data-test="tt-smartsheet-save"
|
|
>
|
|
{state.saving ? "Saving…" : "Save"}
|
|
</button>
|
|
{state.config?.configured && state.syncEnabled && (
|
|
<button
|
|
type="button"
|
|
disabled={state.saving}
|
|
onClick={onDisable}
|
|
className="rounded-md border border-[#a4452b] bg-white px-3 py-1.5 text-sm font-semibold text-[#a4452b] hover:bg-[#fdfaf2] disabled:cursor-not-allowed disabled:opacity-50"
|
|
>
|
|
Disable
|
|
</button>
|
|
)}
|
|
<span className="ml-2 text-xs text-[rgba(60,60,67,0.55)]">
|
|
{state.status.kind === "saved-at"
|
|
? `Saved at ${formatDateTime(new Date(state.status.iso))}`
|
|
: state.status.kind === "error"
|
|
? state.status.message
|
|
: state.config?.lastSyncAt
|
|
? `Last sync ${formatDateTime(new Date(state.config.lastSyncAt))}`
|
|
: "Never synced"}
|
|
</span>
|
|
</div>
|
|
|
|
{state.columns.length > 0 && (
|
|
<ColumnMappingPanel
|
|
columns={state.columns}
|
|
mapping={state.columnMapping}
|
|
onChange={(key, columnId) =>
|
|
dispatch({
|
|
type: "SET_COL_MAPPING_VALUE",
|
|
key,
|
|
columnId,
|
|
})
|
|
}
|
|
/>
|
|
)}
|
|
|
|
<RecentActivity recent={state.recent} queue={state.queue} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ColumnMappingPanel({
|
|
columns,
|
|
mapping,
|
|
onChange,
|
|
}: {
|
|
columns: NonNullable<State["columns"]>;
|
|
mapping: TTSmartsheetColumnMapping;
|
|
onChange: (key: TTSmartsheetColumnKey, columnId: string | null) => void;
|
|
}) {
|
|
return (
|
|
<div className="mt-6 rounded-xl border border-[#e6dfd1] bg-[#fdfaf2] p-4">
|
|
<h3 className="text-sm font-semibold text-[#1a4d2e]">Column mapping</h3>
|
|
<p className="mt-1 text-xs text-[rgba(60,60,67,0.65)]">
|
|
Required: <span className="font-mono">log_id</span>,{" "}
|
|
<span className="font-mono">clock_in</span>. Others optional.
|
|
</p>
|
|
<div className="mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2">
|
|
{(
|
|
[
|
|
["log_id", "Log ID (UUID, for dedup)", true],
|
|
["clock_in", "Clock-in (timestamp)", true],
|
|
["clock_out", "Clock-out (timestamp)", false],
|
|
["worker", "Worker name", false],
|
|
["task", "Task name", false],
|
|
["hours", "Hours (decimal)", false],
|
|
["lunch_minutes", "Lunch minutes", false],
|
|
["notes", "Notes", false],
|
|
] as Array<[TTSmartsheetColumnKey, string, boolean]>
|
|
).map(([key, label, required]) => (
|
|
<label key={key} className="block">
|
|
<span className="block text-xs font-medium text-[rgba(60,60,67,0.65)]">
|
|
{label}
|
|
{required && (
|
|
<span className="ml-1 text-[#a4452b]">*</span>
|
|
)}
|
|
</span>
|
|
<select
|
|
value={mapping[key] ?? ""}
|
|
onChange={(e) =>
|
|
onChange(
|
|
key,
|
|
e.target.value === "" ? null : e.target.value,
|
|
)
|
|
}
|
|
className="mt-1 w-full rounded-md border border-[#e6dfd1] bg-white px-2 py-1.5 text-sm"
|
|
>
|
|
<option value="">— not mapped —</option>
|
|
{columns.map((c) => (
|
|
<option key={c.id} value={c.id}>
|
|
{c.title || `Column ${c.id}`}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function RecentActivity({
|
|
recent,
|
|
queue,
|
|
}: {
|
|
recent: TTSmartsheetRecentEntry[];
|
|
queue: TTSmartsheetQueueSummary;
|
|
}) {
|
|
return (
|
|
<div className="mt-6">
|
|
<h3 className="text-sm font-semibold text-[#1a4d2e]">
|
|
Recent activity
|
|
</h3>
|
|
<div className="mt-2 flex gap-3 text-xs text-[rgba(60,60,67,0.65)]">
|
|
<span>Pending: {queue.pending}</span>
|
|
<span>Syncing: {queue.syncing}</span>
|
|
<span>Synced: {queue.synced}</span>
|
|
<span>Failed: {queue.failed}</span>
|
|
</div>
|
|
<div className="mt-3 overflow-x-auto rounded-xl border border-[#e6dfd1]">
|
|
<table className="w-full text-left text-sm">
|
|
<thead className="bg-[#fdfaf2] text-xs uppercase tracking-wide text-[rgba(60,60,67,0.55)]">
|
|
<tr>
|
|
<th className="px-3 py-2">When</th>
|
|
<th className="px-3 py-2">Action</th>
|
|
<th className="px-3 py-2">Result</th>
|
|
<th className="px-3 py-2">Error</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{recent.length === 0 && (
|
|
<tr>
|
|
<td
|
|
className="px-3 py-3 text-center text-[rgba(60,60,67,0.55)]"
|
|
colSpan={4}
|
|
>
|
|
No sync attempts yet.
|
|
</td>
|
|
</tr>
|
|
)}
|
|
{recent.map((r) => (
|
|
<tr key={r.id} className="border-t border-[#f0e9d8]">
|
|
<td className="px-3 py-2 text-xs">
|
|
{formatDateTime(new Date(r.createdAt))}
|
|
</td>
|
|
<td className="px-3 py-2 text-xs">{r.action}</td>
|
|
<td className="px-3 py-2 text-xs">
|
|
<span
|
|
className={
|
|
r.success
|
|
? "inline-block rounded-full bg-[#1a4d2e]/10 px-2 py-0.5 text-[#1a4d2e]"
|
|
: "inline-block rounded-full bg-[#a4452b]/10 px-2 py-0.5 text-[#a4452b]"
|
|
}
|
|
>
|
|
{r.success ? "OK" : "FAIL"}
|
|
</span>
|
|
</td>
|
|
<td className="px-3 py-2 text-xs">
|
|
{r.error ?? "—"}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default TimeTrackingSmartsheetCard;
|