@onahhas/hello-dev 1.0.0 → 1.0.1

package/frontend/src/pages/TasksPage.tsx

@@ -0,0 +1,135 @@
+import { useEffect, useMemo, useState } from 'react';
+import { api, toQuery } from '../api/http';
+import { EditRequestsPanel } from '../components/EditRequestsPanel';
+import { PageHeader } from '../components/PageHeader';
+import { TaskCard } from '../components/TaskCard';
+import { TaskDetailsModal } from '../components/TaskDetailsModal';
+import { TaskFilters, type TaskFiltersValue } from '../components/TaskFilters';
+import { TaskModal } from '../components/TaskModal';
+import { TaskTable } from '../components/TaskTable';
+import type { TaskItem, User } from '../types';
+
+const defaultFilters: TaskFiltersValue = {
+  q: '',
+  status: '',
+  priority: '',
+  visibility: ''
+};
+
+export function TasksPage() {
+  const [tasks, setTasks] = useState<TaskItem[]>([]);
+  const [users, setUsers] = useState<User[]>([]);
+  const [filters, setFilters] = useState(defaultFilters);
+  const [editingTask, setEditingTask] = useState<TaskItem | null>(null);
+  const [viewingTask, setViewingTask] = useState<TaskItem | null>(null);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [viewMode, setViewMode] = useState<'table' | 'cards'>('table');
+  const [refreshKey, setRefreshKey] = useState(0);
+  const [error, setError] = useState('');
+
+  const query = useMemo(() => toQuery(filters), [filters]);
+
+  useEffect(() => {
+    void loadTasks();
+  }, [query]);
+
+  useEffect(() => {
+    void loadUsers();
+  }, []);
+
+  async function loadTasks() {
+    try {
+      setTasks(await api<TaskItem[]>(`/api/tasks/my${query}`));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Could not load tasks.');
+    }
+  }
+
+  async function loadUsers() {
+    try {
+      setUsers(await api<User[]>('/api/lookup/users'));
+    } catch {
+      setUsers([]);
+    }
+  }
+
+  async function deleteTask(task: TaskItem) {
+    if (!confirm(`Delete task #${task.id}: ${task.title}?`)) return;
+
+    try {
+      await api<void>(`/api/tasks/${task.id}`, { method: 'DELETE' });
+      await loadTasks();
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Could not delete task.');
+    }
+  }
+
+  function openCreate() {
+    setEditingTask(null);
+    setModalOpen(true);
+  }
+
+  function openEdit(task: TaskItem) {
+    setEditingTask(task);
+    setModalOpen(true);
+  }
+
+  async function reloadEverything() {
+    await loadTasks();
+    setRefreshKey((value) => value + 1);
+  }
+
+  return (
+    <section>
+      <PageHeader
+        eyebrow="Tasks"
+        title="My Tasks"
+        description="Table-first task management with optional card view and edit request approval."
+        actions={(
+          <div className="buttonGroup">
+            <button className="ghostBtn" type="button" onClick={() => setViewMode(viewMode === 'table' ? 'cards' : 'table')}>
+              {viewMode === 'table' ? 'Card view' : 'Table view'}
+            </button>
+            <button className="primaryBtn" type="button" onClick={openCreate}>Add task</button>
+          </div>
+        )}
+      />
+
+      <EditRequestsPanel refreshKey={refreshKey} onChanged={reloadEverything} />
+
+      <TaskFilters value={filters} onChange={setFilters} />
+      {error && <div className="errorBox">{error}</div>}
+
+      {viewMode === 'table' ? (
+        <>
+          <TaskTable tasks={tasks} onView={setViewingTask} onEdit={openEdit} onDelete={deleteTask} />
+          {tasks.length === 0 && <div className="emptyState">No tasks match your filters.</div>}
+        </>
+      ) : (
+        <div className="taskList">
+          {tasks.map((task) => (
+            <TaskCard
+              key={task.id}
+              task={task}
+              onView={setViewingTask}
+              onEdit={openEdit}
+              onDelete={deleteTask}
+            />
+          ))}
+          {tasks.length === 0 && <div className="emptyState">No tasks match your filters.</div>}
+        </div>
+      )}
+
+      {modalOpen && (
+        <TaskModal
+          task={editingTask}
+          users={users}
+          onClose={() => setModalOpen(false)}
+          onSaved={reloadEverything}
+        />
+      )}
+
+      {viewingTask && <TaskDetailsModal task={viewingTask} onClose={() => setViewingTask(null)} />}
+    </section>
+  );
+}

package/frontend/src/pages/UsersPage.tsx

@@ -0,0 +1,86 @@
+import { useEffect, useState } from 'react';
+import { api } from '../api/http';
+import { PageHeader } from '../components/PageHeader';
+import { UserModal } from '../components/UserModal';
+import type { User } from '../types';
+import { formatDate } from '../utils/date';
+
+export function UsersPage() {
+  const [users, setUsers] = useState<User[]>([]);
+  const [editingUser, setEditingUser] = useState<User | null>(null);
+  const [modalOpen, setModalOpen] = useState(false);
+
+  useEffect(() => {
+    void load();
+  }, []);
+
+  async function load() {
+    setUsers(await api<User[]>('/api/users'));
+  }
+
+  async function deactivate(user: User) {
+    if (!confirm(`Deactivate ${user.fullName}?`)) return;
+
+    await api<void>(`/api/users/${user.id}`, { method: 'DELETE' });
+    await load();
+  }
+
+  function openCreate() {
+    setEditingUser(null);
+    setModalOpen(true);
+  }
+
+  function openEdit(user: User) {
+    setEditingUser(user);
+    setModalOpen(true);
+  }
+
+  return (
+    <section>
+      <PageHeader
+        eyebrow="Admin"
+        title="Users"
+        description="Add users, change roles, and deactivate accounts."
+        actions={<button className="primaryBtn" type="button" onClick={openCreate}>Add user</button>}
+      />
+
+      <section className="tableCard">
+        <table>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Email</th>
+              <th>Role</th>
+              <th>Status</th>
+              <th>Created</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            {users.map((user) => (
+              <tr key={user.id}>
+                <td>{user.fullName}</td>
+                <td>{user.email}</td>
+                <td>{user.role}</td>
+                <td><span className={`statusDot ${user.isActive ? 'active' : 'inactive'}`}>{user.isActive ? 'Active' : 'Inactive'}</span></td>
+                <td>{formatDate(user.createdAt)}</td>
+                <td className="rowActions">
+                  <button className="ghostBtn" onClick={() => openEdit(user)}>Edit</button>
+                  {user.isActive && <button className="dangerBtn" onClick={() => void deactivate(user)}>Deactivate</button>}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </section>
+
+      {modalOpen && (
+        <UserModal
+          user={editingUser}
+          onClose={() => setModalOpen(false)}
+          onSaved={load}
+        />
+      )}
+    </section>
+  );
+}