@onahhas/hello-dev 1.0.0 → 1.0.1

package/frontend/src/pages/CalendarPage.tsx

@@ -0,0 +1,101 @@
+import { useEffect, useMemo, useState } from 'react';
+import { api } from '../api/http';
+import { useAuth } from '../auth/AuthContext';
+import { PageHeader } from '../components/PageHeader';
+import { TaskDetailsModal } from '../components/TaskDetailsModal';
+import type { TaskItem } from '../types';
+
+function startOfMonth(date: Date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+
+function sameDay(a: Date, b: Date) {
+  return a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate();
+}
+
+export function CalendarPage() {
+  const { isAdmin } = useAuth();
+  const [tasks, setTasks] = useState<TaskItem[]>([]);
+  const [cursor, setCursor] = useState(() => startOfMonth(new Date()));
+  const [viewingTask, setViewingTask] = useState<TaskItem | null>(null);
+
+  useEffect(() => {
+    void api<TaskItem[]>(isAdmin ? '/api/tasks/all' : '/api/tasks/my').then(setTasks);
+  }, [isAdmin]);
+
+  const days = useMemo(() => {
+    const start = startOfMonth(cursor);
+    const firstDay = start.getDay();
+    const gridStart = new Date(start);
+    gridStart.setDate(start.getDate() - firstDay);
+
+    return Array.from({ length: 42 }, (_, index) => {
+      const day = new Date(gridStart);
+      day.setDate(gridStart.getDate() + index);
+      return day;
+    });
+  }, [cursor]);
+
+  function monthTitle() {
+    return new Intl.DateTimeFormat(undefined, {
+      month: 'long',
+      year: 'numeric'
+    }).format(cursor);
+  }
+
+  function addMonths(value: number) {
+    setCursor(new Date(cursor.getFullYear(), cursor.getMonth() + value, 1));
+  }
+
+  return (
+    <section>
+      <PageHeader
+        eyebrow="Schedule"
+        title="Calendar"
+        description={isAdmin ? 'Admin view shows due dates for all users.' : 'A monthly view based on your task due dates.'}
+        actions={(
+          <div className="buttonGroup">
+            <button className="ghostBtn" onClick={() => addMonths(-1)}>Previous</button>
+            <button className="ghostBtn" onClick={() => setCursor(startOfMonth(new Date()))}>Today</button>
+            <button className="ghostBtn" onClick={() => addMonths(1)}>Next</button>
+          </div>
+        )}
+      />
+
+      <section className="calendarCard">
+        <div className="calendarTitle">{monthTitle()}</div>
+        <div className="calendarWeekdays">
+          {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((day) => <span key={day}>{day}</span>)}
+        </div>
+
+        <div className="calendarGrid">
+          {days.map((day) => {
+            const dayTasks = tasks.filter((task) => task.dueDate && sameDay(new Date(task.dueDate), day));
+            const isMuted = day.getMonth() !== cursor.getMonth();
+
+            return (
+              <article key={day.toISOString()} className={`calendarCell ${isMuted ? 'mutedDay' : ''}`}>
+                <strong>{day.getDate()}</strong>
+                {dayTasks.slice(0, 3).map((task) => (
+                  <button
+                    key={task.id}
+                    type="button"
+                    className={`calendarTask ${task.priority}`}
+                    onClick={() => setViewingTask(task)}
+                  >
+                    #{task.id} {task.title}
+                  </button>
+                ))}
+                {dayTasks.length > 3 && <small>+{dayTasks.length - 3} more</small>}
+              </article>
+            );
+          })}
+        </div>
+      </section>
+
+      {viewingTask && <TaskDetailsModal task={viewingTask} onClose={() => setViewingTask(null)} />}
+    </section>
+  );
+}

package/frontend/src/pages/DashboardPage.tsx

@@ -0,0 +1,131 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { api } from '../api/http';
+import { useAuth } from '../auth/AuthContext';
+import { PageHeader } from '../components/PageHeader';
+import { StatCard } from '../components/StatCard';
+import { TaskCard } from '../components/TaskCard';
+import { TaskDetailsModal } from '../components/TaskDetailsModal';
+import type { ActivityLog, TaskItem, User } from '../types';
+import { formatDateTime } from '../utils/date';
+
+export function DashboardPage() {
+  const { isAdmin } = useAuth();
+  const [tasks, setTasks] = useState<TaskItem[]>([]);
+  const [publicTasks, setPublicTasks] = useState<TaskItem[]>([]);
+  const [users, setUsers] = useState<User[]>([]);
+  const [activity, setActivity] = useState<ActivityLog[]>([]);
+  const [viewingTask, setViewingTask] = useState<TaskItem | null>(null);
+
+  useEffect(() => {
+    void load();
+  }, [isAdmin]);
+
+  async function load() {
+    const [mainTasks, visibleTasks] = await Promise.all([
+      api<TaskItem[]>(isAdmin ? '/api/tasks/all' : '/api/tasks/my'),
+      api<TaskItem[]>('/api/tasks/public')
+    ]);
+
+    setTasks(mainTasks);
+    setPublicTasks(visibleTasks);
+
+    if (isAdmin) {
+      const [allUsers, logs] = await Promise.all([
+        api<User[]>('/api/users'),
+        api<ActivityLog[]>('/api/activity')
+      ]);
+      setUsers(allUsers);
+      setActivity(logs);
+    }
+  }
+
+  const stats = useMemo(() => {
+    const completed = tasks.filter((task) => task.status === 'Done').length;
+    const overdue = tasks.filter((task) => task.isOverdue).length;
+    const inProgress = tasks.filter((task) => task.status === 'InProgress').length;
+    const pendingRequests = tasks.reduce((total, task) => total + task.pendingEditRequestCount, 0);
+
+    return { completed, overdue, inProgress, pendingRequests };
+  }, [tasks]);
+
+  return (
+    <section>
+      <PageHeader
+        eyebrow="Overview"
+        title="Dashboard"
+        description={isAdmin ? 'System-wide work, users, and activity.' : 'Your work, shared tasks, and quick actions.'}
+        actions={<Link className="primaryBtn" to="/tasks">View all tasks</Link>}
+      />
+
+      <div className="heroBoard">
+        <div>
+          <span className="eyebrow">Focus</span>
+          <h2>{tasks.length} tracked task{tasks.length === 1 ? '' : 's'}</h2>
+          <p>Use the table for fast scanning, the board for movement, and edit requests for public collaboration.</p>
+        </div>
+        <Link className="ghostBtn" to="/public">Browse public tasks</Link>
+      </div>
+
+      <div className="statsGrid">
+        <StatCard label={isAdmin ? 'All tasks' : 'My tasks'} value={tasks.length} hint="Listed by numeric ID" />
+        <StatCard label="In progress" value={stats.inProgress} hint="Currently active" />
+        <StatCard label="Completed" value={stats.completed} hint="Done tasks" />
+        <StatCard label="Overdue" value={stats.overdue} hint="Needs attention" />
+        <StatCard label="Public tasks" value={publicTasks.length} hint="Visible to all users" />
+        <StatCard label="Edit requests" value={stats.pendingRequests} hint="Waiting for owners" />
+        {isAdmin && <StatCard label="Users" value={users.length} hint="Admin managed accounts" />}
+      </div>
+
+      <div className="twoColumns">
+        <section className="panelCard">
+          <div className="sectionTitle">
+            <div>
+              <span className="eyebrow">Work</span>
+              <h2>Recent tasks</h2>
+            </div>
+            <Link to="/board">View Board</Link>
+          </div>
+
+          <div className="taskList compactList">
+            {tasks.slice(0, 4).map((task) => (
+              <TaskCard key={task.id} task={task} onView={setViewingTask} />
+            ))}
+            {tasks.length === 0 && <p className="emptyText">No tasks yet.</p>}
+          </div>
+        </section>
+
+        <section className="panelCard">
+          <div className="sectionTitle">
+            <div>
+              <span className="eyebrow">Timeline</span>
+              <h2>{isAdmin ? 'Recent activity' : 'Quick links'}</h2>
+            </div>
+            <Link to={isAdmin ? '/activity' : '/calendar'}>
+              {isAdmin ? 'View all activity' : 'View Calendar'}
+            </Link>
+          </div>
+
+          {isAdmin ? (
+            <div className="activityList">
+              {activity.slice(0, 7).map((log) => (
+                <article key={log.id}>
+                  <strong>{log.action}</strong>
+                  <span>{log.userFullName} · {formatDateTime(log.createdAt)}</span>
+                </article>
+              ))}
+            </div>
+          ) : (
+            <div className="quickLinks">
+              <Link to="/calendar">Open Calendar</Link>
+              <Link to="/public">Browse Public Tasks</Link>
+              <Link to="/board">Open Board</Link>
+            </div>
+          )}
+        </section>
+      </div>
+
+      {viewingTask && <TaskDetailsModal task={viewingTask} onClose={() => setViewingTask(null)} />}
+    </section>
+  );
+}

package/frontend/src/pages/LoginPage.tsx

@@ -0,0 +1,69 @@
+import { useState, type FormEvent } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useAuth } from '../auth/AuthContext';
+import { useTheme } from '../theme';
+
+export function LoginPage() {
+  const { login } = useAuth();
+  const { theme, toggleTheme } = useTheme();
+  const navigate = useNavigate();
+  const [email, setEmail] = useState('admin@devtasks.local');
+  const [password, setPassword] = useState('Admin123!');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  async function submit(event: FormEvent) {
+    event.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      await login(email, password);
+      navigate('/');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Login failed.');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <main className="authPage">
+      <section className="authVisual">
+        <button className="authThemeBtn" type="button" onClick={toggleTheme}>{theme === 'dark' ? 'Light' : 'Dark'} mode</button>
+        <div className="authBadge">Minimal task control</div>
+        <h1>Ship work through lists, boards, and reviews.</h1>
+        <p>
+          Track private work, public team tasks, edit requests, due dates,
+          and admin activity in one clean interface.
+        </p>
+      </section>
+
+      <form className="authCard" onSubmit={submit}>
+        <span className="eyebrow">Welcome back</span>
+        <h2>Login</h2>
+        <p>Use the seeded admin account or login after admin activation.</p>
+
+        {error && <div className="errorBox">{error}</div>}
+
+        <label>
+          Email
+          <input value={email} onChange={(e) => setEmail(e.target.value)} type="email" />
+        </label>
+
+        <label>
+          Password
+          <input value={password} onChange={(e) => setPassword(e.target.value)} type="password" />
+        </label>
+
+        <button className="primaryBtn full" disabled={loading} type="submit">
+          {loading ? 'Logging in...' : 'Login'}
+        </button>
+
+        <small>
+          No account? <Link to="/register">Create one</Link>
+        </small>
+      </form>
+    </main>
+  );
+}

package/frontend/src/pages/ProfilePage.tsx

@@ -0,0 +1,111 @@
+import { useEffect, useState, type FormEvent } from 'react';
+import { api } from '../api/http';
+import { useAuth } from '../auth/AuthContext';
+import { PageHeader } from '../components/PageHeader';
+import type { User } from '../types';
+import { formatDate } from '../utils/date';
+
+export function ProfilePage() {
+  const { user, updateStoredUser } = useAuth();
+  const [fullName, setFullName] = useState(user?.fullName ?? '');
+  const [email, setEmail] = useState(user?.email ?? '');
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [message, setMessage] = useState('');
+  const [error, setError] = useState('');
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    setFullName(user?.fullName ?? '');
+    setEmail(user?.email ?? '');
+  }, [user]);
+
+  async function submit(event: FormEvent) {
+    event.preventDefault();
+    setSaving(true);
+    setMessage('');
+    setError('');
+
+    try {
+      const updated = await api<User>('/api/account/me', {
+        method: 'PUT',
+        body: JSON.stringify({
+          fullName,
+          email,
+          currentPassword: currentPassword || undefined,
+          newPassword: newPassword || undefined
+        })
+      });
+
+      updateStoredUser(updated);
+      setCurrentPassword('');
+      setNewPassword('');
+      setMessage('Profile updated.');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Could not update profile.');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <section>
+      <PageHeader
+        eyebrow="Account"
+        title="Profile"
+        description="View and edit your account details."
+      />
+
+      <section className="profileCardLarge">
+        <span className="profileAvatarLarge">{user?.fullName.slice(0, 1).toUpperCase()}</span>
+        <div>
+          <h2>{user?.fullName}</h2>
+          <p>{user?.email}</p>
+          <div className="profileFields">
+            <span>Role: <strong>{user?.role}</strong></span>
+            <span>Status: <strong>{user?.isActive ? 'Active' : 'Inactive'}</strong></span>
+            <span>Created: <strong>{user ? formatDate(user.createdAt) : '-'}</strong></span>
+          </div>
+        </div>
+      </section>
+
+      <form className="panelCard profileForm" onSubmit={submit}>
+        <div className="sectionTitle">
+          <div>
+            <span className="eyebrow">Edit</span>
+            <h2>Account settings</h2>
+          </div>
+        </div>
+
+        {message && <div className="successBox">{message}</div>}
+        {error && <div className="errorBox">{error}</div>}
+
+        <div className="formGrid">
+          <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>
+            Current password
+            <input type="password" value={currentPassword} onChange={(e) => setCurrentPassword(e.target.value)} />
+          </label>
+
+          <label>
+            New password
+            <input type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} />
+          </label>
+        </div>
+
+        <div className="modalActions">
+          <button className="primaryBtn" type="submit" disabled={saving}>{saving ? 'Saving...' : 'Save profile'}</button>
+        </div>
+      </form>
+    </section>
+  );
+}

package/frontend/src/pages/PublicTasksPage.tsx

@@ -0,0 +1,99 @@
+import { useEffect, useMemo, useState } from 'react';
+import { api, toQuery } from '../api/http';
+import { EditRequestModal } from '../components/EditRequestModal';
+import { PageHeader } from '../components/PageHeader';
+import { TaskCard } from '../components/TaskCard';
+import { TaskDetailsModal } from '../components/TaskDetailsModal';
+import { TaskFilters, type TaskFiltersValue } from '../components/TaskFilters';
+import { TaskTable } from '../components/TaskTable';
+import type { TaskItem, User } from '../types';
+
+const defaultFilters: TaskFiltersValue = {
+  q: '',
+  status: '',
+  priority: '',
+  visibility: 'Public'
+};
+
+export function PublicTasksPage() {
+  const [tasks, setTasks] = useState<TaskItem[]>([]);
+  const [users, setUsers] = useState<User[]>([]);
+  const [filters, setFilters] = useState(defaultFilters);
+  const [viewMode, setViewMode] = useState<'table' | 'cards'>('table');
+  const [viewingTask, setViewingTask] = useState<TaskItem | null>(null);
+  const [requestingTask, setRequestingTask] = useState<TaskItem | null>(null);
+  const [message, setMessage] = useState('');
+  const query = useMemo(() => toQuery({
+    q: filters.q,
+    status: filters.status,
+    priority: filters.priority
+  }), [filters]);
+
+  useEffect(() => {
+    void loadTasks();
+  }, [query]);
+
+  useEffect(() => {
+    void api<User[]>('/api/lookup/users').then(setUsers).catch(() => setUsers([]));
+  }, []);
+
+  async function loadTasks() {
+    setTasks(await api<TaskItem[]>(`/api/tasks/public${query}`));
+  }
+
+  function afterRequestSaved() {
+    setMessage('Edit request sent. The task owner can accept or reject it from My Tasks.');
+    void loadTasks();
+  }
+
+  return (
+    <section>
+      <PageHeader
+        eyebrow="Shared"
+        title="Public Tasks"
+        description="View shared tasks and request edits without overwriting the owner’s work."
+        actions={(
+          <button className="ghostBtn" type="button" onClick={() => setViewMode(viewMode === 'table' ? 'cards' : 'table')}>
+            {viewMode === 'table' ? 'Card view' : 'Table view'}
+          </button>
+        )}
+      />
+
+      <TaskFilters value={filters} onChange={setFilters} showVisibility={false} />
+      {message && <div className="successBox">{message}</div>}
+
+      {viewMode === 'table' ? (
+        <>
+          <TaskTable
+            tasks={tasks}
+            onView={setViewingTask}
+            onRequestEdit={setRequestingTask}
+          />
+          {tasks.length === 0 && <div className="emptyState">No public tasks found.</div>}
+        </>
+      ) : (
+        <div className="taskList">
+          {tasks.map((task) => (
+            <TaskCard
+              key={task.id}
+              task={task}
+              onView={setViewingTask}
+              onRequestEdit={setRequestingTask}
+            />
+          ))}
+          {tasks.length === 0 && <div className="emptyState">No public tasks found.</div>}
+        </div>
+      )}
+
+      {viewingTask && <TaskDetailsModal task={viewingTask} onClose={() => setViewingTask(null)} />}
+      {requestingTask && (
+        <EditRequestModal
+          task={requestingTask}
+          users={users}
+          onClose={() => setRequestingTask(null)}
+          onSaved={afterRequestSaved}
+        />
+      )}
+    </section>
+  );
+}

package/frontend/src/pages/RegisterPage.tsx

@@ -0,0 +1,80 @@
+import { useState, type FormEvent } from 'react';
+import { Link } from 'react-router-dom';
+import { useAuth } from '../auth/AuthContext';
+import { useTheme } from '../theme';
+
+export function RegisterPage() {
+  const { register } = useAuth();
+  const { theme, toggleTheme } = useTheme();
+  const [fullName, setFullName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [message, setMessage] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  async function submit(event: FormEvent) {
+    event.preventDefault();
+    setError('');
+    setMessage('');
+    setLoading(true);
+
+    try {
+      const result = await register(fullName, email, password);
+      setMessage(result);
+      setFullName('');
+      setEmail('');
+      setPassword('');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Registration failed.');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <main className="authPage">
+      <section className="authVisual">
+        <button className="authThemeBtn" type="button" onClick={toggleTheme}>{theme === 'dark' ? 'Light' : 'Dark'} mode</button>
+        <div className="authBadge">Approval workflow</div>
+        <h1>Create your workspace account.</h1>
+        <p>
+          New users are created as inactive. Admins can review and activate the
+          account from the Users page before the first login.
+        </p>
+      </section>
+
+      <form className="authCard" onSubmit={submit}>
+        <span className="eyebrow">New account</span>
+        <h2>Register</h2>
+        <p>After registration, wait for admin activation.</p>
+
+        {error && <div className="errorBox">{error}</div>}
+        {message && <div className="successBox">{message}</div>}
+
+        <label>
+          Full name
+          <input value={fullName} onChange={(e) => setFullName(e.target.value)} />
+        </label>
+
+        <label>
+          Email
+          <input value={email} onChange={(e) => setEmail(e.target.value)} type="email" />
+        </label>
+
+        <label>
+          Password
+          <input value={password} onChange={(e) => setPassword(e.target.value)} type="password" />
+        </label>
+
+        <button className="primaryBtn full" disabled={loading} type="submit">
+          {loading ? 'Creating...' : 'Create account'}
+        </button>
+
+        <small>
+          Already active? <Link to="/login">Login</Link>
+        </small>
+      </form>
+    </main>
+  );
+}