Scaffold full-stack volunteer scheduling application

Go backend with domain-based packages (volunteer, schedule, timeoff,
checkin, notification), SQLite storage, JWT auth, and chi router.
React TypeScript frontend with routing, auth context, and pages for
all core features. Multi-stage Dockerfile and docker-compose included.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

web/src/pages/TimeOff.tsx

@@ -0,0 +1,110 @@
+import React, { useEffect, useState, FormEvent } from 'react';
+import { api, TimeOffRequest } from '../api';
+import { useAuth } from '../auth';
+
+export default function TimeOff() {
+  const { role } = useAuth();
+  const [requests, setRequests] = useState<TimeOffRequest[]>([]);
+  const [error, setError] = useState('');
+  const [showForm, setShowForm] = useState(false);
+  const [form, setForm] = useState({ starts_at: '', ends_at: '', reason: '' });
+
+  useEffect(() => {
+    api.listTimeOff().then(setRequests).catch(() => setError('Could not load requests.'));
+  }, []);
+
+  async function handleCreate(e: FormEvent) {
+    e.preventDefault();
+    setError('');
+    try {
+      const req = await api.createTimeOff(form);
+      setRequests(prev => [req, ...prev]);
+      setForm({ starts_at: '', ends_at: '', reason: '' });
+      setShowForm(false);
+    } catch (err: any) {
+      setError(err.message);
+    }
+  }
+
+  async function handleReview(id: number, status: 'approved' | 'rejected') {
+    try {
+      const req = await api.reviewTimeOff(id, status);
+      setRequests(prev => prev.map(r => r.id === id ? req : r));
+    } catch (err: any) {
+      setError(err.message);
+    }
+  }
+
+  const statusClass = (status: string) => {
+    if (status === 'approved') return 'status-approved';
+    if (status === 'rejected') return 'status-rejected';
+    return 'status-pending';
+  };
+
+  return (
+    <div className="page">
+      <div className="page-header">
+        <h2>Time Off Requests</h2>
+        <button onClick={() => setShowForm(v => !v)}>
+          {showForm ? 'Cancel' : 'Request Time Off'}
+        </button>
+      </div>
+      {error && <p className="error">{error}</p>}
+
+      {showForm && (
+        <form className="card" onSubmit={handleCreate}>
+          <h3>New Request</h3>
+          <label>
+            From
+            <input type="date" value={form.starts_at} onChange={e => setForm(f => ({ ...f, starts_at: e.target.value }))} required />
+          </label>
+          <label>
+            To
+            <input type="date" value={form.ends_at} onChange={e => setForm(f => ({ ...f, ends_at: e.target.value }))} required />
+          </label>
+          <label>
+            Reason
+            <textarea value={form.reason} onChange={e => setForm(f => ({ ...f, reason: e.target.value }))} />
+          </label>
+          <button type="submit">Submit</button>
+        </form>
+      )}
+
+      {requests.length === 0 ? (
+        <p>No time off requests.</p>
+      ) : (
+        <table>
+          <thead>
+            <tr>
+              <th>From</th>
+              <th>To</th>
+              <th>Reason</th>
+              <th>Status</th>
+              {role === 'admin' && <th>Actions</th>}
+            </tr>
+          </thead>
+          <tbody>
+            {requests.map(r => (
+              <tr key={r.id}>
+                <td>{new Date(r.starts_at).toLocaleDateString()}</td>
+                <td>{new Date(r.ends_at).toLocaleDateString()}</td>
+                <td>{r.reason ?? '—'}</td>
+                <td><span className={statusClass(r.status)}>{r.status}</span></td>
+                {role === 'admin' && (
+                  <td>
+                    {r.status === 'pending' && (
+                      <>
+                        <button className="btn-small" onClick={() => handleReview(r.id, 'approved')}>Approve</button>
+                        <button className="btn-small btn-danger" onClick={() => handleReview(r.id, 'rejected')}>Reject</button>
+                      </>
+                    )}
+                  </td>
+                )}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+}