@onahhas/hello-dev 1.0.0 → 1.0.1

package/frontend/src/components/TaskDetailsModal.tsx

@@ -0,0 +1,45 @@
+import type { TaskItem } from '../types';
+import { formatDate, formatDateTime } from '../utils/date';
+import { label } from '../utils/labels';
+
+interface Props {
+  task: TaskItem;
+  onClose: () => void;
+}
+
+export function TaskDetailsModal({ task, onClose }: Props) {
+  return (
+    <div className="modalLayer" role="presentation" onMouseDown={onClose}>
+      <section className="modalCard wideModal detailsModal" onMouseDown={(e) => e.stopPropagation()}>
+        <div className="modalHeader">
+          <div>
+            <span className="eyebrow">Task #{task.id}</span>
+            <h2>{task.title}</h2>
+          </div>
+          <button type="button" className="iconBtn" onClick={onClose}>×</button>
+        </div>
+
+        <div className="detailPills">
+          <span className={`statusPill ${task.status}`}>{label(task.status)}</span>
+          <span className={`priorityBadge ${task.priority}`}>{task.priority}</span>
+          <span className="softBadge">{task.visibility}</span>
+          {task.isOverdue && <span className="dangerBadge">Overdue</span>}
+        </div>
+
+        <div className="descriptionBox">
+          {task.description || 'No description was added.'}
+        </div>
+
+        <div className="detailsGrid">
+          <span>ID <strong>#{task.id}</strong></span>
+          <span>Due <strong>{formatDate(task.dueDate)}</strong></span>
+          <span>Owner <strong>{task.createdByFullName}</strong></span>
+          <span>Assigned <strong>{task.assignedToFullName ?? 'Unassigned'}</strong></span>
+          <span>Created <strong>{formatDateTime(task.createdAt)}</strong></span>
+          <span>Updated <strong>{formatDateTime(task.updatedAt)}</strong></span>
+          <span>Pending requests <strong>{task.pendingEditRequestCount}</strong></span>
+        </div>
+      </section>
+    </div>
+  );
+}

package/frontend/src/components/TaskFilters.tsx

@@ -0,0 +1,67 @@
+import type { TaskPriority, TaskStatus, TaskVisibility } from '../types';
+
+export interface TaskFiltersValue {
+  q: string;
+  status: '' | TaskStatus;
+  priority: '' | TaskPriority;
+  visibility: '' | TaskVisibility;
+}
+
+interface Props {
+  value: TaskFiltersValue;
+  onChange: (value: TaskFiltersValue) => void;
+  showVisibility?: boolean;
+}
+
+export function TaskFilters({ value, onChange, showVisibility = true }: Props) {
+  return (
+    <section className="filtersBar">
+      <input
+        value={value.q}
+        onChange={(event) => onChange({ ...value, q: event.target.value })}
+        placeholder="Search tasks..."
+      />
+
+      <select
+        value={value.status}
+        onChange={(event) => onChange({
+          ...value,
+          status: event.target.value as TaskFiltersValue['status']
+        })}
+      >
+        <option value="">All statuses</option>
+        <option value="Todo">Todo</option>
+        <option value="InProgress">In Progress</option>
+        <option value="Done">Done</option>
+        <option value="Cancelled">Cancelled</option>
+      </select>
+
+      <select
+        value={value.priority}
+        onChange={(event) => onChange({
+          ...value,
+          priority: event.target.value as TaskFiltersValue['priority']
+        })}
+      >
+        <option value="">All priorities</option>
+        <option value="Low">Low</option>
+        <option value="Medium">Medium</option>
+        <option value="High">High</option>
+      </select>
+
+      {showVisibility && (
+        <select
+          value={value.visibility}
+          onChange={(event) => onChange({
+            ...value,
+            visibility: event.target.value as TaskFiltersValue['visibility']
+          })}
+        >
+          <option value="">All visibility</option>
+          <option value="Private">Private</option>
+          <option value="Public">Public</option>
+        </select>
+      )}
+    </section>
+  );
+}

package/frontend/src/components/TaskModal.tsx

@@ -0,0 +1,159 @@
+import { useEffect, useState, type FormEvent } from 'react';
+import { api } from '../api/http';
+import type { TaskItem, TaskPriority, TaskStatus, TaskVisibility, User } from '../types';
+import { fromDateInputValue, toDateInputValue } from '../utils/date';
+
+interface Props {
+  task?: TaskItem | null;
+  users: User[];
+  onClose: () => void;
+  onSaved: () => void;
+}
+
+const statusOptions: TaskStatus[] = ['Todo', 'InProgress', 'Done', 'Cancelled'];
+const priorityOptions: TaskPriority[] = ['Low', 'Medium', 'High'];
+const visibilityOptions: TaskVisibility[] = ['Private', 'Public'];
+
+export function TaskModal({ task, users, onClose, onSaved }: Props) {
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [status, setStatus] = useState<TaskStatus>('Todo');
+  const [priority, setPriority] = useState<TaskPriority>('Medium');
+  const [visibility, setVisibility] = useState<TaskVisibility>('Private');
+  const [dueDate, setDueDate] = useState('');
+  const [assignedToUserId, setAssignedToUserId] = useState('');
+  const [error, setError] = useState('');
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    if (!task) {
+      setTitle('');
+      setDescription('');
+      setStatus('Todo');
+      setPriority('Medium');
+      setVisibility('Private');
+      setDueDate('');
+      setAssignedToUserId('');
+      return;
+    }
+
+    setTitle(task.title);
+    setDescription(task.description);
+    setStatus(task.status);
+    setPriority(task.priority);
+    setVisibility(task.visibility);
+    setDueDate(toDateInputValue(task.dueDate));
+    setAssignedToUserId(task.assignedToUserId ?? '');
+  }, [task]);
+
+  async function submit(event: FormEvent) {
+    event.preventDefault();
+    setSaving(true);
+    setError('');
+
+    const body = {
+      title,
+      description,
+      status,
+      priority,
+      visibility,
+      dueDate: fromDateInputValue(dueDate),
+      clearDueDate: dueDate === '',
+      assignedToUserId: assignedToUserId || null,
+      clearAssignedUser: assignedToUserId === ''
+    };
+
+    try {
+      if (task) {
+        await api<TaskItem>(`/api/tasks/${task.id}`, {
+          method: 'PUT',
+          body: JSON.stringify(body)
+        });
+      } else {
+        await api<TaskItem>('/api/tasks', {
+          method: 'POST',
+          body: JSON.stringify(body)
+        });
+      }
+
+      onSaved();
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Could not save task.');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <div className="modalLayer" role="presentation" onMouseDown={onClose}>
+      <form className="modalCard wideModal taskEditModal" onSubmit={submit} onMouseDown={(e) => e.stopPropagation()}>
+        <div className="modalHeader">
+          <div>
+            <span className="eyebrow">{task ? `Task #${task.id}` : 'New task'}</span>
+            <h2>{task ? 'Edit task' : 'Add task'}</h2>
+            <p>Keep the modal centered. The description field scrolls independently.</p>
+          </div>
+          <button type="button" className="iconBtn" onClick={onClose}>×</button>
+        </div>
+
+        {error && <div className="errorBox">{error}</div>}
+
+        <div className="modalBodyGrid">
+          <label className="spanTwo">
+            Title
+            <input value={title} onChange={(e) => setTitle(e.target.value)} required />
+          </label>
+
+          <label className="spanTwo descriptionField">
+            Description
+            <textarea value={description} onChange={(e) => setDescription(e.target.value)} />
+          </label>
+
+          <label>
+            Status
+            <select value={status} onChange={(e) => setStatus(e.target.value as TaskStatus)}>
+              {statusOptions.map((item) => <option key={item} value={item}>{item}</option>)}
+            </select>
+          </label>
+
+          <label>
+            Priority
+            <select value={priority} onChange={(e) => setPriority(e.target.value as TaskPriority)}>
+              {priorityOptions.map((item) => <option key={item} value={item}>{item}</option>)}
+            </select>
+          </label>
+
+          <label>
+            Visibility
+            <select value={visibility} onChange={(e) => setVisibility(e.target.value as TaskVisibility)}>
+              {visibilityOptions.map((item) => <option key={item} value={item}>{item}</option>)}
+            </select>
+          </label>
+
+          <label>
+            Due date
+            <input type="date" value={dueDate} onChange={(e) => setDueDate(e.target.value)} />
+          </label>
+
+          <label className="spanTwo">
+            Assign to
+            <select value={assignedToUserId} onChange={(e) => setAssignedToUserId(e.target.value)}>
+              <option value="">Unassigned</option>
+              {users.filter((user) => user.isActive).map((user) => (
+                <option key={user.id} value={user.id}>{user.fullName}</option>
+              ))}
+            </select>
+          </label>
+        </div>
+
+        <div className="modalActions">
+          <button type="button" className="ghostBtn" onClick={onClose}>Cancel</button>
+          <button type="submit" className="primaryBtn" disabled={saving}>
+            {saving ? 'Saving...' : 'Save task'}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}

package/frontend/src/components/TaskTable.tsx

@@ -0,0 +1,68 @@
+import { useAuth } from '../auth/AuthContext';
+import type { TaskItem } from '../types';
+import { formatDate } from '../utils/date';
+import { label } from '../utils/labels';
+
+interface Props {
+  tasks: TaskItem[];
+  onView: (task: TaskItem) => void;
+  onEdit?: (task: TaskItem) => void;
+  onDelete?: (task: TaskItem) => void;
+  onRequestEdit?: (task: TaskItem) => void;
+}
+
+export function TaskTable({ tasks, onView, onEdit, onDelete, onRequestEdit }: Props) {
+  const { user, isAdmin } = useAuth();
+
+  return (
+    <section className="tableCard taskTableCard">
+      <table>
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Task</th>
+            <th>Status</th>
+            <th>Priority</th>
+            <th>Visibility</th>
+            <th>Due</th>
+            <th>Owner</th>
+            <th>Assigned</th>
+            <th>Requests</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          {tasks.map((task) => {
+            const canWrite = isAdmin || task.createdByUserId === user?.id;
+            const canRequestEdit = !canWrite && task.visibility === 'Public';
+
+            return (
+              <tr key={task.id}>
+                <td className="monoCell">#{task.id}</td>
+                <td>
+                  <strong>{task.title}</strong>
+                  {task.description && <small>{task.description}</small>}
+                </td>
+                <td><span className={`statusPill ${task.status}`}>{label(task.status)}</span></td>
+                <td><span className={`priorityBadge ${task.priority}`}>{task.priority}</span></td>
+                <td>{task.visibility}</td>
+                <td>{formatDate(task.dueDate)}</td>
+                <td>{task.createdByFullName}</td>
+                <td>{task.assignedToFullName ?? 'Unassigned'}</td>
+                <td>{task.pendingEditRequestCount}</td>
+                <td className="rowActions">
+                  <button className="ghostBtn" onClick={() => onView(task)}>View</button>
+                  {canWrite && onEdit && <button className="ghostBtn" onClick={() => onEdit(task)}>Edit</button>}
+                  {canRequestEdit && onRequestEdit && (
+                    <button className="ghostBtn" onClick={() => onRequestEdit(task)}>Request</button>
+                  )}
+                  {canWrite && onDelete && <button className="dangerBtn" onClick={() => onDelete(task)}>Delete</button>}
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </section>
+  );
+}

package/frontend/src/components/UserModal.tsx

@@ -0,0 +1,124 @@
+import { useEffect, useState, type FormEvent } from 'react';
+import { api } from '../api/http';
+import type { User, UserRole } from '../types';
+
+interface Props {
+  user?: User | null;
+  onClose: () => void;
+  onSaved: () => void;
+}
+
+export function UserModal({ user, onClose, onSaved }: Props) {
+  const [fullName, setFullName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [role, setRole] = useState<UserRole>('User');
+  const [isActive, setIsActive] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    if (!user) return;
+
+    setFullName(user.fullName);
+    setEmail(user.email);
+    setRole(user.role);
+    setIsActive(user.isActive);
+  }, [user]);
+
+  async function submit(event: FormEvent) {
+    event.preventDefault();
+    setSaving(true);
+    setError('');
+
+    const body = {
+      fullName,
+      email,
+      password: password || undefined,
+      role,
+      isActive
+    };
+
+    try {
+      if (user) {
+        await api<User>(`/api/users/${user.id}`, {
+          method: 'PUT',
+          body: JSON.stringify(body)
+        });
+      } else {
+        await api<User>('/api/users', {
+          method: 'POST',
+          body: JSON.stringify({ ...body, password })
+        });
+      }
+
+      onSaved();
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Could not save user.');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <div className="modalLayer" role="presentation" onMouseDown={onClose}>
+      <form className="modalCard" onSubmit={submit} onMouseDown={(e) => e.stopPropagation()}>
+        <div className="modalHeader">
+          <div>
+            <span className="eyebrow">User</span>
+            <h2>{user ? 'Edit user' : 'Add user'}</h2>
+          </div>
+          <button type="button" className="iconBtn" onClick={onClose}>×</button>
+        </div>
+
+        {error && <div className="errorBox">{error}</div>}
+
+        <label>
+          Full name
+          <input value={fullName} onChange={(e) => setFullName(e.target.value)} required />
+        </label>
+
+        <label>
+          Email
+          <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
+        </label>
+
+        <label>
+          Password {user && <small>leave empty to keep current password</small>}
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required={!user}
+          />
+        </label>
+
+        <div className="formGrid">
+          <label>
+            Role
+            <select value={role} onChange={(e) => setRole(e.target.value as UserRole)}>
+              <option value="User">User</option>
+              <option value="Admin">Admin</option>
+            </select>
+          </label>
+
+          <label>
+            Status
+            <select value={isActive ? 'true' : 'false'} onChange={(e) => setIsActive(e.target.value === 'true')}>
+              <option value="true">Active</option>
+              <option value="false">Inactive</option>
+            </select>
+          </label>
+        </div>
+
+        <div className="modalActions">
+          <button type="button" className="ghostBtn" onClick={onClose}>Cancel</button>
+          <button type="submit" className="primaryBtn" disabled={saving}>
+            {saving ? 'Saving...' : 'Save user'}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}

package/frontend/src/main.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+import { AuthProvider } from './auth/AuthContext';
+import { ThemeProvider } from './theme';
+import './styles.css';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <ThemeProvider>
+        <AuthProvider>
+          <App />
+        </AuthProvider>
+      </ThemeProvider>
+    </BrowserRouter>
+  </React.StrictMode>
+);

package/frontend/src/pages/ActivityPage.tsx

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react';
+import { api } from '../api/http';
+import { PageHeader } from '../components/PageHeader';
+import type { ActivityLog } from '../types';
+import { formatDateTime } from '../utils/date';
+
+export function ActivityPage() {
+  const [logs, setLogs] = useState<ActivityLog[]>([]);
+
+  useEffect(() => {
+    void api<ActivityLog[]>('/api/activity').then(setLogs);
+  }, []);
+
+  return (
+    <section>
+      <PageHeader
+        eyebrow="Admin"
+        title="Activity"
+        description="Track the main actions happening in the system."
+      />
+
+      <section className="timelineCard">
+        {logs.map((log) => (
+          <article key={log.id} className="timelineItem">
+            <span className="timelineDot" />
+            <div>
+              <strong>{log.action}</strong>
+              <p>{log.entityName} · {log.userFullName}</p>
+              <small>{formatDateTime(log.createdAt)}</small>
+            </div>
+          </article>
+        ))}
+        {logs.length === 0 && <div className="emptyState">No activity yet.</div>}
+      </section>
+    </section>
+  );
+}

package/frontend/src/pages/BoardPage.tsx

@@ -0,0 +1,75 @@
+import { useEffect, useState } from 'react';
+import { api } from '../api/http';
+import { PageHeader } from '../components/PageHeader';
+import { TaskCard } from '../components/TaskCard';
+import type { TaskItem, TaskStatus } from '../types';
+import { label } from '../utils/labels';
+
+const statuses: TaskStatus[] = ['Todo', 'InProgress', 'Done', 'Cancelled'];
+
+export function BoardPage() {
+  const [tasks, setTasks] = useState<TaskItem[]>([]);
+  const [draggingTask, setDraggingTask] = useState<TaskItem | null>(null);
+
+  useEffect(() => {
+    void load();
+  }, []);
+
+  async function load() {
+    setTasks(await api<TaskItem[]>('/api/tasks/my'));
+  }
+
+  async function moveTask(status: TaskStatus) {
+    if (!draggingTask || draggingTask.status === status) return;
+
+    const updated = await api<TaskItem>(`/api/tasks/${draggingTask.id}/status`, {
+      method: 'PATCH',
+      body: JSON.stringify({ status })
+    });
+
+    setTasks((current) => current.map((item) => item.id === updated.id ? updated : item));
+    setDraggingTask(null);
+  }
+
+  return (
+    <section>
+      <PageHeader
+        eyebrow="Board"
+        title="Task Board"
+        description="Drag tasks between columns to change their status."
+      />
+
+      <div className="boardGrid">
+        {statuses.map((status) => {
+          const columnTasks = tasks.filter((task) => task.status === status);
+
+          return (
+            <section
+              key={status}
+              className="boardColumn"
+              onDragOver={(event) => event.preventDefault()}
+              onDrop={() => void moveTask(status)}
+            >
+              <div className="boardHeader">
+                <strong>{label(status)}</strong>
+                <span>{columnTasks.length}</span>
+              </div>
+
+              <div className="boardTasks">
+                {columnTasks.map((task) => (
+                  <TaskCard
+                    key={task.id}
+                    task={task}
+                    draggable
+                    onDragStart={setDraggingTask}
+                  />
+                ))}
+                {columnTasks.length === 0 && <p className="emptyColumn">Drop tasks here</p>}
+              </div>
+            </section>
+          );
+        })}
+      </div>
+    </section>
+  );
+}