@onahhas/hello-dev 1.0.0 → 1.0.1

package/frontend/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "devtasks-web",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10"
+  }
+}

package/frontend/src/App.tsx

@@ -0,0 +1,40 @@
+import { Navigate, Route, Routes } from 'react-router-dom';
+import { AdminRoute, ProtectedRoute } from './components/ProtectedRoute';
+import { Layout } from './components/Layout';
+import { ActivityPage } from './pages/ActivityPage';
+import { BoardPage } from './pages/BoardPage';
+import { CalendarPage } from './pages/CalendarPage';
+import { DashboardPage } from './pages/DashboardPage';
+import { LoginPage } from './pages/LoginPage';
+import { ProfilePage } from './pages/ProfilePage';
+import { PublicTasksPage } from './pages/PublicTasksPage';
+import { RegisterPage } from './pages/RegisterPage';
+import { TasksPage } from './pages/TasksPage';
+import { UsersPage } from './pages/UsersPage';
+
+export default function App() {
+  return (
+    <Routes>
+      <Route path="/login" element={<LoginPage />} />
+      <Route path="/register" element={<RegisterPage />} />
+
+      <Route element={<ProtectedRoute />}>
+        <Route element={<Layout />}>
+          <Route index element={<DashboardPage />} />
+          <Route path="tasks" element={<TasksPage />} />
+          <Route path="public" element={<PublicTasksPage />} />
+          <Route path="board" element={<BoardPage />} />
+          <Route path="calendar" element={<CalendarPage />} />
+          <Route path="profile" element={<ProfilePage />} />
+
+          <Route element={<AdminRoute />}>
+            <Route path="users" element={<UsersPage />} />
+            <Route path="activity" element={<ActivityPage />} />
+          </Route>
+        </Route>
+      </Route>
+
+      <Route path="*" element={<Navigate to="/" replace />} />
+    </Routes>
+  );
+}

package/frontend/src/api/http.ts

@@ -0,0 +1,75 @@
+import type { ApiError } from '../types';
+
+const API_BASE = import.meta.env.VITE_API_URL ?? '';
+const AUTH_KEY = 'devtasks_auth';
+
+export interface StoredAuth {
+  token: string;
+}
+
+export function getStoredToken(): string | null {
+  const raw = localStorage.getItem(AUTH_KEY);
+  if (!raw) return null;
+
+  try {
+    return (JSON.parse(raw) as StoredAuth).token;
+  } catch {
+    localStorage.removeItem(AUTH_KEY);
+    return null;
+  }
+}
+
+export function storeToken(token: string): void {
+  localStorage.setItem(AUTH_KEY, JSON.stringify({ token }));
+}
+
+export function clearToken(): void {
+  localStorage.removeItem(AUTH_KEY);
+}
+
+export async function api<T>(path: string, options: RequestInit = {}): Promise<T> {
+  const token = getStoredToken();
+  const headers = new Headers(options.headers);
+
+  if (!headers.has('Content-Type') && options.body) {
+    headers.set('Content-Type', 'application/json');
+  }
+
+  if (token) {
+    headers.set('Authorization', `Bearer ${token}`);
+  }
+
+  const response = await fetch(`${API_BASE}${path}`, {
+    ...options,
+    headers
+  });
+
+  if (response.status === 204) {
+    return null as T;
+  }
+
+  const contentType = response.headers.get('content-type') ?? '';
+  const data = contentType.includes('application/json')
+    ? await response.json()
+    : await response.text();
+
+  if (!response.ok) {
+    const err = data as ApiError;
+    throw new Error(err.message ?? 'Request failed.');
+  }
+
+  return data as T;
+}
+
+export function toQuery(params: object): string {
+  const search = new URLSearchParams();
+
+  Object.entries(params).forEach(([key, rawValue]) => {
+    if (rawValue !== undefined && rawValue !== null && rawValue !== '') {
+      search.set(key, String(rawValue));
+    }
+  });
+
+  const value = search.toString();
+  return value ? `?${value}` : '';
+}

package/frontend/src/auth/AuthContext.tsx

@@ -0,0 +1,101 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type ReactNode
+} from 'react';
+import { api, clearToken, getStoredToken, storeToken } from '../api/http';
+import type { AuthResponse, RegisterResponse, User } from '../types';
+
+interface AuthContextValue {
+  user: User | null;
+  token: string | null;
+  isAdmin: boolean;
+  login: (email: string, password: string) => Promise<void>;
+  register: (fullName: string, email: string, password: string) => Promise<string>;
+  updateStoredUser: (user: User) => void;
+  logout: () => void;
+}
+
+const USER_KEY = 'devtasks_user';
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+function getStoredUser(): User | null {
+  const raw = localStorage.getItem(USER_KEY);
+  if (!raw) return null;
+
+  try {
+    return JSON.parse(raw) as User;
+  } catch {
+    localStorage.removeItem(USER_KEY);
+    return null;
+  }
+}
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [token, setToken] = useState<string | null>(() => getStoredToken());
+  const [user, setUser] = useState<User | null>(() => getStoredUser());
+
+  const updateStoredUser = useCallback((nextUser: User) => {
+    localStorage.setItem(USER_KEY, JSON.stringify(nextUser));
+    setUser(nextUser);
+  }, []);
+
+  const saveAuth = useCallback((response: AuthResponse) => {
+    storeToken(response.token);
+    updateStoredUser(response.user);
+    setToken(response.token);
+  }, [updateStoredUser]);
+
+  const login = useCallback(async (email: string, password: string) => {
+    const response = await api<AuthResponse>('/api/auth/login', {
+      method: 'POST',
+      body: JSON.stringify({ email, password })
+    });
+
+    saveAuth(response);
+  }, [saveAuth]);
+
+  const register = useCallback(async (
+    fullName: string,
+    email: string,
+    password: string
+  ) => {
+    const response = await api<RegisterResponse>('/api/auth/register', {
+      method: 'POST',
+      body: JSON.stringify({ fullName, email, password })
+    });
+
+    return response.message;
+  }, []);
+
+  const logout = useCallback(() => {
+    clearToken();
+    localStorage.removeItem(USER_KEY);
+    setToken(null);
+    setUser(null);
+  }, []);
+
+  const value = useMemo<AuthContextValue>(() => ({
+    user,
+    token,
+    isAdmin: user?.role === 'Admin',
+    login,
+    register,
+    updateStoredUser,
+    logout
+  }), [user, token, login, register, updateStoredUser, logout]);
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+export function useAuth(): AuthContextValue {
+  const value = useContext(AuthContext);
+  if (!value) {
+    throw new Error('useAuth must be used inside AuthProvider.');
+  }
+
+  return value;
+}

package/frontend/src/components/EditRequestModal.tsx

@@ -0,0 +1,139 @@
+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;
+  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 EditRequestModal({ task, users, onClose, onSaved }: Props) {
+  const [title, setTitle] = useState(task.title);
+  const [description, setDescription] = useState(task.description);
+  const [status, setStatus] = useState<TaskStatus>(task.status);
+  const [priority, setPriority] = useState<TaskPriority>(task.priority);
+  const [visibility, setVisibility] = useState<TaskVisibility>(task.visibility);
+  const [dueDate, setDueDate] = useState(toDateInputValue(task.dueDate));
+  const [assignedToUserId, setAssignedToUserId] = useState(task.assignedToUserId ?? '');
+  const [error, setError] = useState('');
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    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('');
+
+    try {
+      await api(`/api/tasks/${task.id}/edit-requests`, {
+        method: 'POST',
+        body: JSON.stringify({
+          title,
+          description,
+          status,
+          priority,
+          visibility,
+          dueDate: fromDateInputValue(dueDate),
+          clearDueDate: dueDate === '',
+          assignedToUserId: assignedToUserId || null,
+          clearAssignedUser: assignedToUserId === ''
+        })
+      });
+
+      onSaved();
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Could not send edit request.');
+    } 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.id}</span>
+            <h2>Request public task edit</h2>
+            <p>The owner will accept or reject this request.</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 ? 'Sending...' : 'Send request'}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}

package/frontend/src/components/EditRequestsPanel.tsx

@@ -0,0 +1,94 @@
+import { useEffect, useMemo, useState } from 'react';
+import { api } from '../api/http';
+import type { TaskEditRequest } from '../types';
+import { formatDate, formatDateTime } from '../utils/date';
+import { label } from '../utils/labels';
+
+interface Props {
+  refreshKey?: number;
+  onChanged?: () => void;
+}
+
+export function EditRequestsPanel({ refreshKey = 0, onChanged }: Props) {
+  const [requests, setRequests] = useState<TaskEditRequest[]>([]);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    void load();
+  }, [refreshKey]);
+
+  async function load() {
+    try {
+      setRequests(await api<TaskEditRequest[]>('/api/tasks/edit-requests/inbox'));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Could not load edit requests.');
+    }
+  }
+
+  async function resolve(request: TaskEditRequest, action: 'accept' | 'reject') {
+    const note = action === 'reject'
+      ? window.prompt('Optional reject note:', '') ?? ''
+      : '';
+
+    try {
+      await api<TaskEditRequest>(`/api/tasks/edit-requests/${request.id}/${action}`, {
+        method: 'POST',
+        body: JSON.stringify({ ownerNote: note })
+      });
+
+      await load();
+      onChanged?.();
+    } catch (err) {
+      alert(err instanceof Error ? err.message : `Could not ${action} request.`);
+    }
+  }
+
+  const pending = useMemo(() => requests.filter((item) => item.statusOfRequest === 'Pending'), [requests]);
+
+  return (
+    <section className="panelCard requestPanel">
+      <div className="sectionTitle">
+        <div>
+          <span className="eyebrow">Collaboration</span>
+          <h2>Pending edit requests</h2>
+        </div>
+        <span className="countBadge">{pending.length}</span>
+      </div>
+
+      {error && <div className="errorBox">{error}</div>}
+
+      {pending.length === 0 && <p className="emptyText">No pending requests for your tasks.</p>}
+
+      <div className="requestList">
+        {pending.map((request) => (
+          <article key={request.id} className="requestItem">
+            <div>
+              <strong>Task #{request.taskId}: {request.taskTitle}</strong>
+              <span>{request.requestedByFullName} requested changes · {formatDateTime(request.createdAt)}</span>
+            </div>
+
+            <div className="changeGrid">
+              {request.title && <span>Title <strong>{request.title}</strong></span>}
+              {request.status && <span>Status <strong>{label(request.status)}</strong></span>}
+              {request.priority && <span>Priority <strong>{request.priority}</strong></span>}
+              {request.visibility && <span>Visibility <strong>{request.visibility}</strong></span>}
+              {(request.dueDate || request.clearDueDate) && (
+                <span>Due <strong>{request.clearDueDate ? 'Clear due date' : formatDate(request.dueDate)}</strong></span>
+              )}
+              {(request.assignedToFullName || request.clearAssignedUser) && (
+                <span>Assign <strong>{request.clearAssignedUser ? 'Unassigned' : request.assignedToFullName}</strong></span>
+              )}
+            </div>
+
+            {request.description && <p className="requestDescription">{request.description}</p>}
+
+            <div className="cardActions">
+              <button className="primaryBtn" type="button" onClick={() => void resolve(request, 'accept')}>Accept</button>
+              <button className="dangerBtn" type="button" onClick={() => void resolve(request, 'reject')}>Reject</button>
+            </div>
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}

package/frontend/src/components/Layout.tsx

@@ -0,0 +1,76 @@
+import { NavLink, Outlet, useNavigate } from 'react-router-dom';
+import { useAuth } from '../auth/AuthContext';
+import { useTheme } from '../theme';
+
+const normalLinks = [
+  { to: '/', text: 'Overview', icon: '◎' },
+  { to: '/tasks', text: 'My Tasks', icon: '◫' },
+  { to: '/public', text: 'Public', icon: '◉' },
+  { to: '/board', text: 'Board', icon: '▦' },
+  { to: '/calendar', text: 'Calendar', icon: '◌' }
+];
+
+export function Layout() {
+  const { user, logout, isAdmin } = useAuth();
+  const { theme, toggleTheme } = useTheme();
+  const navigate = useNavigate();
+
+  function handleLogout() {
+    logout();
+    navigate('/login');
+  }
+
+  return (
+    <div className="appShell">
+      <aside className="sidebar">
+        <div className="brandBlock">
+          <div className="brandMark">D</div>
+          <div>
+            <strong>DevTasks</strong>
+            <span>Focused task control</span>
+          </div>
+        </div>
+
+        <nav className="navList">
+          {normalLinks.map((link) => (
+            <NavLink key={link.to} to={link.to} end={link.to === '/'}>
+              <span>{link.icon}</span>
+              {link.text}
+            </NavLink>
+          ))}
+
+          {isAdmin && (
+            <>
+              <NavLink to="/users"><span>☷</span>Users</NavLink>
+              <NavLink to="/activity"><span>⌁</span>Activity</NavLink>
+            </>
+          )}
+        </nav>
+
+        <div className="themeSwitch">
+          <span>{theme === 'dark' ? 'Dark mode' : 'Light mode'}</span>
+          <button className="ghostBtn" type="button" onClick={toggleTheme}>
+            {theme === 'dark' ? 'Light' : 'Dark'}
+          </button>
+        </div>
+
+        <div className="sideFooter">
+          <NavLink to="/profile" className="profileMini">
+            <span className="avatar">{user?.fullName.slice(0, 1).toUpperCase()}</span>
+            <span>
+              <strong>{user?.fullName}</strong>
+              <small>{user?.role}</small>
+            </span>
+          </NavLink>
+          <button className="ghostBtn full" type="button" onClick={handleLogout}>
+            Logout
+          </button>
+        </div>
+      </aside>
+
+      <main className="mainPanel">
+        <Outlet />
+      </main>
+    </div>
+  );
+}

package/frontend/src/components/PageHeader.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+
+interface Props {
+  eyebrow?: string;
+  title: string;
+  description?: string;
+  actions?: ReactNode;
+}
+
+export function PageHeader({ eyebrow, title, description, actions }: Props) {
+  return (
+    <header className="pageHeader">
+      <div>
+        {eyebrow && <span className="eyebrow">{eyebrow}</span>}
+        <h1>{title}</h1>
+        {description && <p>{description}</p>}
+      </div>
+      {actions && <div className="headerActions">{actions}</div>}
+    </header>
+  );
+}

package/frontend/src/components/ProtectedRoute.tsx

@@ -0,0 +1,14 @@
+import { Navigate, Outlet } from 'react-router-dom';
+import { useAuth } from '../auth/AuthContext';
+
+export function ProtectedRoute() {
+  const { token } = useAuth();
+  return token ? <Outlet /> : <Navigate to="/login" replace />;
+}
+
+export function AdminRoute() {
+  const { token, isAdmin } = useAuth();
+
+  if (!token) return <Navigate to="/login" replace />;
+  return isAdmin ? <Outlet /> : <Navigate to="/" replace />;
+}

package/frontend/src/components/StatCard.tsx

@@ -0,0 +1,15 @@
+interface Props {
+  label: string;
+  value: number | string;
+  hint?: string;
+}
+
+export function StatCard({ label, value, hint }: Props) {
+  return (
+    <article className="statCard">
+      <span>{label}</span>
+      <strong>{value}</strong>
+      {hint && <small>{hint}</small>}
+    </article>
+  );
+}

package/frontend/src/components/TaskCard.tsx

@@ -0,0 +1,83 @@
+import { useAuth } from '../auth/AuthContext';
+import type { TaskItem } from '../types';
+import { formatDate } from '../utils/date';
+import { label } from '../utils/labels';
+
+interface Props {
+  task: TaskItem;
+  onView?: (task: TaskItem) => void;
+  onEdit?: (task: TaskItem) => void;
+  onDelete?: (task: TaskItem) => void;
+  onRequestEdit?: (task: TaskItem) => void;
+  draggable?: boolean;
+  onDragStart?: (task: TaskItem) => void;
+}
+
+export function TaskCard({
+  task,
+  onView,
+  onEdit,
+  onDelete,
+  onRequestEdit,
+  draggable,
+  onDragStart
+}: Props) {
+  const { user, isAdmin } = useAuth();
+  const canWrite = isAdmin || task.createdByUserId === user?.id;
+  const canRequestEdit = !canWrite && task.visibility === 'Public';
+
+  return (
+    <article
+      className={`taskCard priority${task.priority} ${task.isOverdue ? 'overdue' : ''}`}
+      draggable={draggable}
+      onDragStart={() => onDragStart?.(task)}
+    >
+      <div className="taskTopLine">
+        <span className="taskNumber">#{task.id}</span>
+        <span className={`statusPill ${task.status}`}>{label(task.status)}</span>
+        <span className="tinyText">{task.visibility}</span>
+      </div>
+
+      <h3>{task.title}</h3>
+      {task.description && <p>{task.description}</p>}
+
+      <div className="taskMeta">
+        <span>Priority: {task.priority}</span>
+        <span>Due: {formatDate(task.dueDate)}</span>
+        <span>By: {task.createdByFullName}</span>
+        <span>To: {task.assignedToFullName ?? 'Unassigned'}</span>
+      </div>
+
+      {task.pendingEditRequestCount > 0 && (
+        <div className="requestHint">
+          {task.pendingEditRequestCount} pending edit request{task.pendingEditRequestCount === 1 ? '' : 's'}
+        </div>
+      )}
+
+      {(onView || canWrite || canRequestEdit) && (
+        <div className="cardActions">
+          {onView && (
+            <button type="button" className="ghostBtn" onClick={() => onView(task)}>
+              View
+            </button>
+          )}
+          {canWrite && onEdit && (
+            <button type="button" className="ghostBtn" onClick={() => onEdit(task)}>
+              Edit
+            </button>
+          )}
+          {canRequestEdit && onRequestEdit && (
+            <button type="button" className="ghostBtn" onClick={() => onRequestEdit(task)}>
+              Request edit
+            </button>
+          )}
+          {canWrite && onDelete && (
+            <button type="button" className="dangerBtn" onClick={() => onDelete(task)}>
+              Delete
+            </button>
+          )}
+        </div>
+      )}
+    </article>
+  );
+}