improvement: task assignment flow added. cases and tasks feature updated accordingly.

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

@@ -7,6 +7,7 @@ import { Button } from '@/components/ui/shared/Button';
 import { FORM_SELECT_CLASS } from '@/components/shared/formSelectStyles';
 import { LabCaseCommentsPanel } from '@/components/ui/lab/LabCaseCommentsPanel';
 import {
+  canEditLabTaskStatus,
   labTaskStatusSelectStyle,
   labTaskStatusVariant,
 } from '@/components/lab/labTaskStatusDisplay';
@@ -25,6 +26,7 @@ interface TaskRowProps {
   highlighted?: boolean;
   exiting?: boolean;
   canEdit: boolean;
+  currentUserId?: string;
   statusOptions: { value: LabTaskStatus; label: string }[];
   updatingTaskId: string | null;
   commentsOpen: boolean;
@@ -46,6 +48,7 @@ export function TaskRow({
   highlighted = false,
   exiting = false,
   canEdit,
+  currentUserId,
   statusOptions,
   updatingTaskId,
   commentsOpen,
@@ -56,6 +59,9 @@ export function TaskRow({
   onShowInCase,
 }: TaskRowProps) {
   const t = useTranslations('tasks');
+  const canEditStatus = canEditLabTaskStatus(task, currentUserId, canEdit);
+  const assignedToOther =
+    Boolean(task.assignee) && task.assignee!.id !== currentUserId;
   const taskDate = new Intl.DateTimeFormat(locale, {
     year: 'numeric',
     month: 'short',
@@ -75,7 +81,7 @@ export function TaskRow({
   return (
     <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 ${
+        className={`flex flex-col gap-3 px-3 py-3 sm:grid sm:grid-cols-[minmax(0,1fr)_minmax(8.5rem,11rem)_auto] sm:items-center sm:gap-x-3 sm:gap-y-0.5 sm:py-2 ${
           flatMode ? '' : 'ps-5'
         }`}
       >
@@ -113,8 +119,12 @@ export function TaskRow({
           </p>
         </div>
 
-        <div className="flex sm:justify-center">
-          {canEdit ? (
+        <div
+          className={`flex sm:justify-center pe-2 sm:pe-3 shrink-0 ${
+            assignedToOther ? 'mb-1 sm:mb-0' : ''
+          }`}
+        >
+          {canEditStatus && !exiting ? (
             <select
               value={task.status}
               disabled={updatingTaskId === task.id || exiting}
@@ -128,6 +138,14 @@ export function TaskRow({
                 </option>
               ))}
             </select>
+          ) : assignedToOther && !exiting ? (
+            <Badge
+              variant="default"
+              fixedWidth={false}
+              className="text-center whitespace-normal leading-snug max-w-[10.5rem]"
+            >
+              {t('assignedToStaff', { name: task.assignee!.name })}
+            </Badge>
           ) : (
             <Badge variant={labTaskStatusVariant(task.status)} fixedWidth={false}>
               {statusOptions.find((opt) => opt.value === task.status)?.label ?? task.status}
@@ -135,7 +153,7 @@ export function TaskRow({
           )}
         </div>
 
-        <div className="flex items-center gap-1.5 shrink-0 justify-between sm:justify-end flex-wrap">
+        <div className="flex items-center gap-1.5 shrink-0 justify-between sm:justify-end flex-wrap ps-1 sm:ps-0">
           {flatMode && onShowInCase && !exiting ? (
             <Button
               type="button"