implemented a marked as complete button

screens.jsx

@@ -163,7 +163,7 @@ function HeadsUp({ items, onDismiss, onOpenTask }) {
 
 function OverviewScreen({ tasks, onOpen, onAddFor, density, onMoveTask }) {
   const byUser = Object.fromEntries(USERS.map(u => [u.id, []]));
-  tasks.forEach(t => { if (byUser[t.assignee]) byUser[t.assignee].push(t); });
+  tasks.forEach(t => { if (byUser[t.assignee] && t.status !== 'closed') byUser[t.assignee].push(t); });
   const [draggingTask, setDraggingTask] = React.useState(null);
   const [dragOverCol, setDragOverCol] = React.useState(null);
   return (
@@ -244,13 +244,14 @@ function UserScreen({ user, tasks, onOpen, onAddFor, density }) {
   const mine = tasks.filter(t => t.assignee === user.id);
   const open = mine.filter(t => t.status === 'open');
   const flagged = mine.filter(t => t.status === 'unsuccessful' || t.status === 'billing');
+  const closed = mine.filter(t => t.status === 'closed');
   return (
     <div className="user-view">
       <div className="user-view__hero">
         <Avatar user={user} size={64} />
         <div className="user-view__hero-meta">
           <h1 className="user-view__name">{user.name}</h1>
-          <p className="user-view__role">{user.role} · <span className="mono">{mine.length} tasks</span></p>
+          <p className="user-view__role">{user.role} · <span className="mono">{open.length + flagged.length} open tasks</span></p>
         </div>
         <div className="user-view__hero-cta">
           <button className="btn btn--primary" onClick={() => onAddFor(user.id)}>
@@ -272,6 +273,14 @@ function UserScreen({ user, tasks, onOpen, onAddFor, density }) {
           {open.map(t => <TaskCard key={t.id} task={t} onOpen={onOpen} density={density} />)}
         </div>
       </Section>
+      
+      {closed.length > 0 && (
+        <Section title="Completed" sub={closed.length + ' tasks'}>
+          <div className="user-view__grid" style={{ opacity: 0.6 }}>
+            {closed.map(t => <TaskCard key={t.id} task={t} onOpen={onOpen} density={density} />)}
+          </div>
+        </Section>
+      )}
     </div>
   );
 }
@@ -398,7 +407,7 @@ function Modal({ children, onClose, title, eyebrow, wide = false }) {
   );
 }
 
-function TaskDetail({ task, allAudit = [], onClose, onMove, onPriority }) {
+function TaskDetail({ task, allAudit = [], onClose, onMove, onPriority, onComplete }) {
   if (!task) return null;
   const assignee = findUser(task.assignee);
   const author = findUser(task.addedBy);
@@ -415,7 +424,7 @@ function TaskDetail({ task, allAudit = [], onClose, onMove, onPriority }) {
               <strong>Auto-marked Unsuccessful.</strong> Two missed bookings detected by the scheduler. Decide on next step or revert.
               <div className="detail__alert-actions">
                 <button className="btn btn--ghost btn--sm">Revert to Open</button>
-                <button className="btn btn--soft btn--sm">Close as unsuccessful</button>
+                <button className="btn btn--soft btn--sm" onClick={onComplete}>Close as unsuccessful</button>
               </div>
             </div>
           )}
@@ -478,6 +487,10 @@ function TaskDetail({ task, allAudit = [], onClose, onMove, onPriority }) {
         </div>
 
         <aside className="detail__side">
+          <button className="btn btn--primary btn--full" style={{ marginBottom: '1.5rem' }} onClick={onComplete}>
+            <Icon.Check /> Mark as completed
+          </button>
+
           <Field label="Assigned to">
             <div className="picker">
               {USERS.map(u => (