improvement: sorts and filters updated for tasks feature.

frontend/src/components/ui/lab/TaskRow.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import { MessageSquare } from 'lucide-react';
+import { Check, FolderOpen, MessageSquare } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { Badge } from '@/components/ui/shared/Badge';
+import { Button } from '@/components/ui/shared/Button';
 import { FORM_SELECT_CLASS } from '@/components/shared/formSelectStyles';
 import { LabCaseCommentsPanel } from '@/components/ui/lab/LabCaseCommentsPanel';
 import {
@@ -21,6 +22,8 @@ interface TaskRowProps {
   task: LabTaskListItem;
   locale: string;
   flatMode: boolean;
+  highlighted?: boolean;
+  exiting?: boolean;
   canEdit: boolean;
   statusOptions: { value: LabTaskStatus; label: string }[];
   updatingTaskId: string | null;
@@ -29,6 +32,7 @@ interface TaskRowProps {
   onStatusUpdate: (taskId: string, status: LabTaskStatus) => void;
   onToggleComments: (taskId: string) => void;
   onCommentError: (message: string) => void;
+  onShowInCase?: (task: LabTaskListItem) => void;
 }
 
 function formatPatientName(patient: { firstName: string; lastName: string }) {
@@ -39,6 +43,8 @@ export function TaskRow({
   task,
   locale,
   flatMode,
+  highlighted = false,
+  exiting = false,
   canEdit,
   statusOptions,
   updatingTaskId,
@@ -47,6 +53,7 @@ export function TaskRow({
   onStatusUpdate,
   onToggleComments,
   onCommentError,
+  onShowInCase,
 }: TaskRowProps) {
   const t = useTranslations('tasks');
   const taskDate = new Intl.DateTimeFormat(locale, {
@@ -55,8 +62,18 @@ export function TaskRow({
     day: 'numeric',
   }).format(new Date(task.createdAt));
 
+  const rowClassName = [
+    flatMode ? undefined : 'border-b border-border/40 last:border-b-0',
+    exiting ? 'task-row-complete-exit' : undefined,
+    !exiting && highlighted
+      ? 'relative bg-primary/10 ring-2 ring-inset ring-primary/50 shadow-[0_0_16px_rgba(99,102,241,0.2)]'
+      : undefined,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
   return (
-    <li className={flatMode ? undefined : 'border-b border-border/40 last:border-b-0'}>
+    <li id={`task-row-${task.id}`} className={rowClassName}>
       <div
         className={`flex flex-col gap-3 px-3 py-3 sm:grid sm:grid-cols-[minmax(0,1fr)_132px_auto] sm:items-center sm:gap-x-3 sm:gap-y-0.5 sm:py-2 ${
           flatMode ? '' : 'ps-5'
@@ -67,7 +84,13 @@ export function TaskRow({
             <p className="text-sm font-medium text-text-primary">
               {task.stepOrder}. {task.stepLabel}
             </p>
-            {flatMode && task.isImportant ? (
+            {exiting ? (
+              <span className="inline-flex items-center gap-1 text-[11px] font-medium text-emerald-700 dark:text-emerald-400">
+                <Check className="h-3.5 w-3.5" />
+                {t('taskCompletedFlash')}
+              </span>
+            ) : null}
+            {flatMode && task.isImportant && !exiting ? (
               <Badge variant="warning" fixedWidth={false}>
                 {t('importantBadge')}
               </Badge>
@@ -94,7 +117,7 @@ export function TaskRow({
           {canEdit ? (
             <select
               value={task.status}
-              disabled={updatingTaskId === task.id}
+              disabled={updatingTaskId === task.id || exiting}
               onChange={(e) => onStatusUpdate(task.id, e.target.value as LabTaskStatus)}
               className={`${FORM_SELECT_CLASS} w-full sm:max-w-[132px] font-medium`}
               style={labTaskStatusSelectStyle(task.status)}
@@ -112,8 +135,20 @@ export function TaskRow({
           )}
         </div>
 
-        <div className="flex items-center gap-1.5 shrink-0 justify-between sm:justify-end">
-          {canEdit ? (
+        <div className="flex items-center gap-1.5 shrink-0 justify-between sm:justify-end flex-wrap">
+          {flatMode && onShowInCase && !exiting ? (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="text-xs px-2 py-1 h-auto"
+              onClick={() => onShowInCase(task)}
+            >
+              <FolderOpen className="h-3.5 w-3.5 me-1" />
+              {t('showInCase')}
+            </Button>
+          ) : null}
+          {canEdit && !exiting ? (
             <button
               type="button"
               onClick={() => onToggleComments(task.id)}
@@ -144,7 +179,7 @@ export function TaskRow({
         </div>
       </div>
 
-      {commentsOpen && canEdit ? (
+      {commentsOpen && canEdit && !exiting ? (
         <div className="px-3 pb-3 border-t border-border/50">
           <LabCaseCommentsPanel
             caseId={task.labCaseId}