signalk-maintenance-tracker 1.0.0

package/public/app/pages/TaskDetailPage.js

@@ -0,0 +1,294 @@
+/**
+ * Task detail (§7.4): description, tags, intervals, runtime/time progress,
+ * status, per-task log with edit/delete, and the complete/edit/delete modals.
+ */
+import { html } from '../lib/html.js';
+import { useState } from '../../vendor/preact-hooks.js';
+import { useTask, useTaskLogs, deleteTask, deleteLog } from '../api/hooks.js';
+import { useAuth } from '../auth/auth.js';
+import {
+  formatDate,
+  formatHours,
+  formatRemainingHours,
+  formatRemainingTime,
+} from '../lib/format.js';
+import { navigate } from '../lib/router.js';
+import { toast } from '../lib/toasts.js';
+import { Table } from '../components/Table.js';
+import { StatusBadge } from '../components/StatusBadge.js';
+import { ProgressBar } from '../components/ProgressBar.js';
+import { MarkdownView } from '../components/MarkdownView.js';
+import { TaskFormModal } from '../components/TaskFormModal.js';
+import { LogEntryModal } from '../components/LogEntryModal.js';
+import { ConfirmModal } from '../components/ConfirmModal.js';
+
+/** @typedef {import('../types.js').TaskDTO} TaskDTO */
+/** @typedef {import('../types.js').LogDTO} LogDTO */
+
+/** @param {{ slug: string }} props */
+export function TaskDetailPage(props) {
+  const auth = useAuth();
+  const taskRes = useTask(props.slug);
+  const logsRes = useTaskLogs(props.slug);
+
+  const [editing, setEditing] = useState(false);
+  const [completing, setCompleting] = useState(false);
+  const [deletingTask, setDeletingTask] = useState(false);
+  const [editingEntry, setEditingEntry] = useState(
+    /** @type {LogDTO|null} */ (null),
+  );
+  const [deletingEntry, setDeletingEntry] = useState(
+    /** @type {LogDTO|null} */ (null),
+  );
+
+  const task = taskRes.data;
+
+  if (taskRes.error && !task) {
+    return html`<div class="error-box">
+      Failed to load task: ${taskRes.error.message}
+    </div>`;
+  }
+  if (!task) {
+    return html`<div class="table-loading">Loading…</div>`;
+  }
+
+  /** @type {import('../components/Table.js').Column[]} */
+  const logColumns = [
+    {
+      key: 'maintenance_date',
+      label: 'Date',
+      className: 'num',
+      render: (/** @type {LogDTO} */ e) => formatDate(e.maintenance_date),
+    },
+    {
+      key: 'runtime_hours',
+      label: 'Runtime',
+      className: 'num',
+      render: (/** @type {LogDTO} */ e) => formatHours(e.runtime_hours),
+    },
+    {
+      key: 'logged_by',
+      label: 'By',
+      render: (/** @type {LogDTO} */ e) =>
+        e.logged_by || html`<span class="muted">—</span>`,
+    },
+  ];
+  if (auth.isLoggedIn) {
+    logColumns.push({
+      key: 'actions',
+      label: '',
+      className: 'actions',
+      render: (/** @type {LogDTO} */ e) => html`
+        <button
+          type="button"
+          class="btn-icon primary"
+          aria-label="Edit log entry"
+          title="Edit"
+          onClick=${() => setEditingEntry(e)}
+        >
+          <i class="bi bi-pencil" />
+        </button>
+        <button
+          type="button"
+          class="btn-icon danger"
+          aria-label="Delete log entry"
+          title="Delete"
+          onClick=${() => setDeletingEntry(e)}
+        >
+          <i class="bi bi-trash" />
+        </button>
+      `,
+    });
+  }
+
+  const runtimeConfigured = task.runtime_interval !== null;
+  const timeConfigured = task.time_interval !== null;
+
+  return html`
+    <div>
+      <div class="page-header">
+        <h1 class="page-title">
+          ${task.name} <${StatusBadge} status=${task.status} />
+        </h1>
+        ${
+          auth.isLoggedIn
+            ? html`
+                <span class="page-actions">
+                  <button
+                    type="button"
+                    class="btn btn-success"
+                    onClick=${() => setCompleting(true)}
+                  >
+                    <i class="bi bi-check2-circle" />Mark complete
+                  </button>
+                  <button
+                    type="button"
+                    class="btn btn-primary"
+                    onClick=${() => setEditing(true)}
+                  >
+                    <i class="bi bi-pencil" />Edit
+                  </button>
+                  <button
+                    type="button"
+                    class="btn btn-danger"
+                    onClick=${() => setDeletingTask(true)}
+                  >
+                    <i class="bi bi-trash" />Delete
+                  </button>
+                </span>
+              `
+            : null
+        }
+      </div>
+
+      <div class="detail-grid">
+        <div class="card">
+          <h3>Description</h3>
+          ${
+            task.description
+              ? html`<${MarkdownView} markdown=${task.description} />`
+              : html`<p class="muted" style="margin:0">No description.</p>`
+          }
+          ${
+            task.tags.length
+              ? html`<div class="chips" style="margin-top:12px">
+                  ${task.tags.map((tag) => html`<span key=${tag} class="tag">${tag}</span>`)}
+                </div>`
+              : null
+          }
+        </div>
+
+        <div class="card">
+          <h3>Schedule</h3>
+          ${
+            !runtimeConfigured && !timeConfigured
+              ? html`<p class="muted" style="margin:0">
+                  Informational task — no intervals configured.
+                </p>`
+              : null
+          }
+          ${
+            runtimeConfigured
+              ? html`
+                  <div class="stat-row">
+                    <div class="stat-label">
+                      <span
+                        >Runtime — every
+                        ${formatHours(task.runtime_interval)}</span
+                      >
+                      <span class="stat-value"
+                        >${formatRemainingHours(task.remaining_runtime)}${task.remaining_runtime !== null && task.remaining_runtime >= 0 ? ' left' : ''}</span
+                      >
+                    </div>
+                    <${ProgressBar}
+                      fraction=${task.runtime_fraction}
+                      status=${task.runtime_status}
+                    />
+                    <div class="field-hint">
+                      Current ${formatHours(task.current_runtime)} · last done
+                      at ${formatHours(task.last_runtime)} · due at
+                      ${formatHours(task.due_runtime_at)}
+                    </div>
+                  </div>
+                `
+              : null
+          }
+          ${
+            timeConfigured
+              ? html`
+                  <div class="stat-row">
+                    <div class="stat-label">
+                      <span
+                        >Time — every ${task.time_interval}
+                        ${task.time_interval_unit}</span
+                      >
+                      <span class="stat-value"
+                        >${formatRemainingTime(task.remaining_time_ms)}${task.remaining_time_ms !== null && task.remaining_time_ms >= 0 ? ' left' : ''}</span
+                      >
+                    </div>
+                    <${ProgressBar}
+                      fraction=${task.time_fraction}
+                      status=${task.time_status}
+                    />
+                    <div class="field-hint">
+                      Last done ${formatDate(task.last_maintenance)} · next due
+                      ${formatDate(task.due_date)}
+                    </div>
+                  </div>
+                `
+              : null
+          }
+          ${
+            task.runtime_path
+              ? html`<div class="field-hint">
+                  Runtime source: <code>${task.runtime_path}</code>
+                </div>`
+              : null
+          }
+        </div>
+      </div>
+
+      <div class="page-header" style="margin-top:24px">
+        <h2 class="page-title" style="font-size:17px">Maintenance log</h2>
+      </div>
+      <${Table}
+        columns=${logColumns}
+        rows=${logsRes.data ? logsRes.data.data : []}
+        renderDetail=${(/** @type {LogDTO} */ e) =>
+          e.notes
+            ? html`<div class="log-notes">
+                <strong class="log-notes-label">Notes:</strong>
+                <div class="log-notes-body">
+                  <${MarkdownView} markdown=${e.notes} />
+                </div>
+              </div>`
+            : null}
+        loading=${logsRes.loading}
+        emptyMessage="No maintenance logged yet."
+      />
+
+      ${
+        editing
+          ? html`<${TaskFormModal}
+              task=${task}
+              onClose=${() => setEditing(false)}
+              onSaved=${(/** @type {TaskDTO} */ saved) => {
+                if (saved.slug !== props.slug)
+                  navigate('/tasks/' + encodeURIComponent(saved.slug));
+              }}
+            />`
+          : null
+      }
+      ${completing ? html`<${LogEntryModal} task=${task} onClose=${() => setCompleting(false)} />` : null}
+      ${editingEntry ? html`<${LogEntryModal} entry=${editingEntry} onClose=${() => setEditingEntry(null)} />` : null}
+      ${
+        deletingTask
+          ? html`<${ConfirmModal}
+              title="Delete task"
+              message=${'Delete "' + task.name + '" and its entire maintenance log? This cannot be undone.'}
+              onConfirm=${async () => {
+                await deleteTask(task.slug);
+                toast('Task deleted.', 'success');
+                navigate('/');
+              }}
+              onClose=${() => setDeletingTask(false)}
+            />`
+          : null
+      }
+      ${
+        deletingEntry
+          ? html`<${ConfirmModal}
+              title="Delete log entry"
+              message="Delete this log entry? The task's last-maintenance data will be recomputed."
+              onConfirm=${async () => {
+                await deleteLog(deletingEntry.id, task.slug);
+                toast('Log entry deleted.', 'success');
+                setDeletingEntry(null);
+              }}
+              onClose=${() => setDeletingEntry(null)}
+            />`
+          : null
+      }
+    </div>
+  `;
+}

package/public/app/pages/TaskListPage.js

@@ -0,0 +1,279 @@
+/**
+ * Task list — the main page (§7.4). Server-side search/filter/sort/paging;
+ * write affordances render only when logged in (§7.7).
+ */
+import { html } from '../lib/html.js';
+import { useState, useEffect } from '../../vendor/preact-hooks.js';
+import { useTasks, useTags, deleteTask } from '../api/hooks.js';
+import { useAuth } from '../auth/auth.js';
+import { useListParams } from '../lib/useListParams.js';
+import {
+  formatDate,
+  formatRemainingHours,
+  formatRemainingTime,
+} from '../lib/format.js';
+import { toast } from '../lib/toasts.js';
+import { Table } from '../components/Table.js';
+import { Pagination } from '../components/Pagination.js';
+import { StatusBadge } from '../components/StatusBadge.js';
+import { TaskFormModal } from '../components/TaskFormModal.js';
+import { LogEntryModal } from '../components/LogEntryModal.js';
+import { ConfirmModal } from '../components/ConfirmModal.js';
+
+/** @typedef {import('../types.js').TaskDTO} TaskDTO */
+
+const PAGE_SIZE = 20;
+
+export function TaskListPage() {
+  const { params, update } = useListParams();
+  const auth = useAuth();
+
+  const page = parseInt(params.page || '1', 10) || 1;
+  const search = params.search || '';
+  const tagsCsv = params.tags || '';
+  const sort = params.sort || '';
+  const order = params.order || '';
+
+  // Debounce typed search into the URL (and thus the query key).
+  const [searchText, setSearchText] = useState(search);
+  useEffect(() => {
+    setSearchText(search);
+  }, [search]);
+  useEffect(() => {
+    if (searchText === search) return undefined;
+    const timer = setTimeout(
+      () => update({ search: searchText, page: undefined }),
+      300,
+    );
+    return () => clearTimeout(timer);
+  }, [searchText]);
+
+  const tasksRes = useTasks({
+    search: search || undefined,
+    tags: tagsCsv || undefined,
+    sort: sort || undefined,
+    order: order || undefined,
+    page: page,
+    pageSize: PAGE_SIZE,
+  });
+  const tagsRes = useTags();
+
+  /** @type {[TaskDTO|null|undefined, any]} editor: undefined=closed, null=create, TaskDTO=edit */
+  const [editorTask, setEditorTask] = useState(
+    /** @type {TaskDTO|null|undefined} */ (undefined),
+  );
+  const [completing, setCompleting] = useState(
+    /** @type {TaskDTO|null} */ (null),
+  );
+  const [deleting, setDeleting] = useState(/** @type {TaskDTO|null} */ (null));
+
+  const selectedTags = tagsCsv ? tagsCsv.split(',').filter(Boolean) : [];
+  /** @param {string} tag */
+  const toggleTag = (tag) => {
+    const next =
+      selectedTags.indexOf(tag) === -1
+        ? selectedTags.concat([tag])
+        : selectedTags.filter((t) => t !== tag);
+    update({ tags: next.join(',') || undefined, page: undefined });
+  };
+
+  /** @param {string} key */
+  const onSort = (key) => {
+    if (sort === key) update({ order: order === 'asc' ? 'desc' : 'asc' });
+    else update({ sort: key, order: 'asc' });
+  };
+
+  /** @type {import('../components/Table.js').Column[]} */
+  const columns = [
+    {
+      key: 'status',
+      label: 'Status',
+      sortable: true,
+      render: (/** @type {TaskDTO} */ t) =>
+        html`<${StatusBadge} status=${t.status} />`,
+    },
+    {
+      key: 'name',
+      label: 'Name',
+      sortable: true,
+      render: (/** @type {TaskDTO} */ t) =>
+        html`<a href=${'#/tasks/' + encodeURIComponent(t.slug)}>${t.name}</a>`,
+    },
+    {
+      key: 'tags',
+      label: 'Tags',
+      className: 'hide-sm',
+      render: (/** @type {TaskDTO} */ t) =>
+        html`<span class="chips"
+          >${t.tags.map((tag) => html`<span key=${tag} class="tag">${tag}</span>`)}</span
+        >`,
+    },
+    {
+      key: 'remaining_runtime',
+      label: 'Runtime left',
+      sortable: true,
+      className: 'num hide-sm',
+      render: (/** @type {TaskDTO} */ t) =>
+        html`<span class=${'remaining ' + (t.runtime_status || '')}
+          >${formatRemainingHours(t.remaining_runtime)}</span
+        >`,
+    },
+    {
+      key: 'remaining_time',
+      label: 'Time left',
+      sortable: true,
+      className: 'num hide-sm',
+      render: (/** @type {TaskDTO} */ t) =>
+        html`<span class=${'remaining ' + (t.time_status || '')}
+          >${formatRemainingTime(t.remaining_time_ms)}</span
+        >`,
+    },
+    {
+      key: 'due_date',
+      label: 'Next due',
+      className: 'num hide-sm',
+      render: (/** @type {TaskDTO} */ t) => formatDate(t.due_date),
+    },
+    {
+      key: 'actions',
+      label: '',
+      className: 'actions',
+      render: (/** @type {TaskDTO} */ t) => html`
+        ${
+          auth.isLoggedIn
+            ? html`
+                <button
+                  type="button"
+                  class="btn-icon success"
+                  aria-label=${'Complete ' + t.name}
+                  title="Mark complete"
+                  onClick=${() => setCompleting(t)}
+                >
+                  <i class="bi bi-check2-circle" />
+                </button>
+                <button
+                  type="button"
+                  class="btn-icon primary"
+                  aria-label=${'Edit ' + t.name}
+                  title="Edit"
+                  onClick=${() => setEditorTask(t)}
+                >
+                  <i class="bi bi-pencil" />
+                </button>
+                <button
+                  type="button"
+                  class="btn-icon danger"
+                  aria-label=${'Delete ' + t.name}
+                  title="Delete"
+                  onClick=${() => setDeleting(t)}
+                >
+                  <i class="bi bi-trash" />
+                </button>
+              `
+            : null
+        }
+      `,
+    },
+  ];
+
+  const pageData = tasksRes.data;
+
+  return html`
+    <div>
+      <div class="page-header">
+        <h1 class="page-title">Maintenance Tasks</h1>
+        ${
+          auth.isLoggedIn
+            ? html`
+                <button
+                  type="button"
+                  class="btn btn-primary"
+                  onClick=${() => setEditorTask(null)}
+                >
+                  <i class="bi bi-plus-lg" />New task
+                </button>
+              `
+            : null
+        }
+      </div>
+
+      <div class="toolbar">
+        <div class="search-box">
+          <i class="bi bi-search" />
+          <input
+            class="input"
+            placeholder="Search tasks…"
+            aria-label="Search tasks"
+            value=${searchText}
+            onInput=${(/** @type {any} */ e) => setSearchText(e.currentTarget.value)}
+          />
+        </div>
+        <div class="chips">
+          ${(tagsRes.data ? tagsRes.data.data : []).map(
+            (tag) => html`
+              <button
+                type="button"
+                key=${tag.name}
+                class=${'chip' + (selectedTags.indexOf(tag.name) !== -1 ? ' selected' : '')}
+                onClick=${() => toggleTag(tag.name)}
+              >
+                ${tag.name}<span class="chip-count">${tag.count}</span>
+              </button>
+            `,
+          )}
+        </div>
+      </div>
+
+      ${
+        tasksRes.error && !pageData
+          ? html`<div class="error-box">
+              Failed to load tasks: ${tasksRes.error.message}
+            </div>`
+          : html`
+              <${Table}
+                columns=${columns}
+                rows=${pageData ? pageData.data : []}
+                sort=${sort}
+                order=${order}
+                onSort=${onSort}
+                loading=${tasksRes.loading}
+                emptyMessage=${search || tagsCsv ? 'No tasks match your filters.' : 'No maintenance tasks yet.'}
+              />
+              ${
+                pageData
+                  ? html`<${Pagination}
+                      page=${pageData.page}
+                      pageSize=${pageData.pageSize}
+                      total=${pageData.total}
+                      onPage=${(/** @type {number} */ p) => update({ page: p })}
+                    />`
+                  : null
+              }
+            `
+      }
+      ${
+        editorTask !== undefined
+          ? html`<${TaskFormModal}
+              task=${editorTask}
+              onClose=${() => setEditorTask(undefined)}
+            />`
+          : null
+      }
+      ${completing ? html`<${LogEntryModal} task=${completing} onClose=${() => setCompleting(null)} />` : null}
+      ${
+        deleting
+          ? html`<${ConfirmModal}
+              title="Delete task"
+              message=${'Delete "' + deleting.name + '" and its entire maintenance log? This cannot be undone.'}
+              onConfirm=${async () => {
+                await deleteTask(deleting.slug);
+                toast('Task deleted.', 'success');
+                setDeleting(null);
+              }}
+              onClose=${() => setDeleting(null)}
+            />`
+          : null
+      }
+    </div>
+  `;
+}

package/public/app/types.js

@@ -0,0 +1,90 @@
+/**
+ * Shared JSDoc typedefs mirroring the backend DTOs (src/types.ts, §8).
+ * This module has no runtime exports; other modules reference these types
+ * with `import('../types.js').TaskDTO`-style JSDoc imports.
+ */
+
+/** @typedef {'days'|'weeks'|'months'|'years'} TimeUnit */
+/** @typedef {'overdue'|'due_soon'|'ok'|'unknown'} Status */
+
+/**
+ * @typedef {Object} TaskDTO
+ * @property {number} id
+ * @property {string} slug
+ * @property {string} name
+ * @property {string|null} description
+ * @property {string[]} tags
+ * @property {number|null} runtime_interval
+ * @property {number|null} time_interval
+ * @property {TimeUnit|null} time_interval_unit
+ * @property {string|null} runtime_path
+ * @property {string|null} last_maintenance
+ * @property {number|null} last_runtime
+ * @property {number|null} current_runtime
+ * @property {number|null} elapsed_runtime
+ * @property {number|null} remaining_runtime
+ * @property {number|null} due_runtime_at
+ * @property {number|null} runtime_fraction
+ * @property {string|null} due_date
+ * @property {number|null} remaining_time_ms
+ * @property {number|null} time_fraction
+ * @property {Status|null} runtime_status
+ * @property {Status|null} time_status
+ * @property {Status} status
+ * @property {number} status_rank
+ * @property {number} urgency
+ * @property {string} created_at
+ * @property {string} updated_at
+ */
+
+/**
+ * @typedef {Object} LogDTO
+ * @property {number} id
+ * @property {number} task_id
+ * @property {string} maintenance_date
+ * @property {number|null} runtime_hours
+ * @property {string|null} notes
+ * @property {string|null} logged_by
+ * @property {string} created_at
+ * @property {string} task_slug
+ * @property {string} task_name
+ */
+
+/**
+ * @typedef {Object} TagDTO
+ * @property {number} id
+ * @property {string} name
+ * @property {number} count
+ */
+
+/**
+ * @template T
+ * @typedef {Object} Page
+ * @property {T[]} data
+ * @property {number} total
+ * @property {number} page
+ * @property {number} pageSize
+ */
+
+/**
+ * @typedef {Object} TaskInput
+ * @property {string} [name]
+ * @property {string} [slug]
+ * @property {string|null} [description]
+ * @property {number|null} [runtime_interval]
+ * @property {number|null} [time_interval]
+ * @property {TimeUnit|null} [time_interval_unit]
+ * @property {string|null} [runtime_path]
+ * @property {string[]} [tags]
+ * @property {string|null} [last_maintenance]
+ * @property {number|null} [last_runtime]
+ */
+
+/**
+ * @typedef {Object} LogInput
+ * @property {string} [maintenance_date]
+ * @property {number|null} [runtime_hours]
+ * @property {string|null} [notes]
+ */
+
+export {};