diff --git a/src/views/Chores/ArchivedTasks.jsx b/src/views/Chores/ArchivedTasks.jsx index 810d5ba..f903ba9 100644 --- a/src/views/Chores/ArchivedTasks.jsx +++ b/src/views/Chores/ArchivedTasks.jsx @@ -443,6 +443,8 @@ const ArchivedTasks = () => { onChoreRemove={handleChoreDeleted} performers={performers} viewOnly={false} + showActions={false} + // onAction={handleChoreAction} // Multi-select props isMultiSelectMode={isMultiSelectMode} isSelected={selectedChores.has(chore.id)} diff --git a/src/views/Chores/ChoreCard.jsx b/src/views/Chores/ChoreCard.jsx index 3d30f76..22267ed 100644 --- a/src/views/Chores/ChoreCard.jsx +++ b/src/views/Chores/ChoreCard.jsx @@ -40,6 +40,7 @@ const ChoreCard = ({ performers, sx, viewOnly, + showActions = true, onChipClick, onAction, // Multi-select props @@ -862,44 +863,45 @@ const ChoreCard = ({ justifyContent: 'center', }} > - - {/* */} - {chore.status === 3 ? ( - // Pending approval: Show approve/reject for admins/managers/owners, grayed out for others - canApproveReject() ? ( - - { - e.stopPropagation() - onAction('approve', chore) - }} - sx={{ - borderRadius: '50%', - minWidth: 50, - height: 50, - zIndex: 1, - transition: 'all 0.2s ease', - '&:hover': { - transform: 'scale(1.05)', - }, - '&:active': { - transform: 'scale(0.95)', - }, - '&:disabled': { - opacity: 0.5, - transform: 'none', - }, - }} - > - - - {/* + {/* */} + {chore.status === 3 ? ( + // Pending approval: Show approve/reject for admins/managers/owners, grayed out for others + canApproveReject() ? ( + + { + e.stopPropagation() + onAction('approve', chore) + }} + sx={{ + borderRadius: '50%', + minWidth: 50, + height: 50, + zIndex: 1, + transition: 'all 0.2s ease', + '&:hover': { + transform: 'scale(1.05)', + }, + '&:active': { + transform: 'scale(0.95)', + }, + '&:disabled': { + opacity: 0.5, + transform: 'none', + }, + }} + > + + + {/* { @@ -922,97 +924,100 @@ const ChoreCard = ({ > */} - + + ) : ( + + + + ) ) : ( { + e.stopPropagation() + switch (chore.status) { + case 0: // Not started + onAction('complete', chore) + break + case 1: // In progress + onAction('pause', chore) + break + case 2: // Paused + onAction('start', chore) + break + default: + break + } + }} + disabled={notInCompletionWindow(chore)} sx={{ borderRadius: '50%', minWidth: 50, height: 50, zIndex: 1, - opacity: 0.5, + transition: 'all 0.2s ease', + '&:hover': { + transform: 'scale(1.05)', + }, + '&:active': { + transform: 'scale(0.95)', + }, + '&:disabled': { + opacity: 0.5, + transform: 'none', + }, }} > - +
+ {chore.status === 0 ? ( + + ) : chore.status === 1 ? ( + + ) : ( + + )} +
- ) - ) : ( - { - e.stopPropagation() - switch (chore.status) { - case 0: // Not started - onAction('complete', chore) - break - case 1: // In progress - onAction('pause', chore) - break - case 2: // Paused - onAction('start', chore) - break - default: - break + )} + + onAction('completeWithNote', chore) + } + onCompleteWithPastDate={() => + onAction('completeWithPastDate', chore) + } + onAction={(type, chore, extraData) => + onAction(type, chore, extraData) + } + onChangeAssignee={() => onAction('changeAssignee', chore)} + onChangeDueDate={() => onAction('changeDueDate', chore)} + onWriteNFC={() => onAction('writeNFC', chore)} + onNudge={() => onAction('nudge', chore)} + onDelete={() => onAction('delete', chore)} + onMouseEnter={handleMouseEnter} + onOpen={() => { + // Clear any pending hide timer when menu opens + if (hoverTimer) { + clearTimeout(hoverTimer) + setHoverTimer(null) } }} - disabled={notInCompletionWindow(chore)} - sx={{ - borderRadius: '50%', - minWidth: 50, - height: 50, - zIndex: 1, - transition: 'all 0.2s ease', - '&:hover': { - transform: 'scale(1.05)', - }, - '&:active': { - transform: 'scale(0.95)', - }, - '&:disabled': { - opacity: 0.5, - transform: 'none', - }, - }} - > -
- {chore.status === 0 ? ( - - ) : chore.status === 1 ? ( - - ) : ( - - )} -
-
- )} - onAction('completeWithNote', chore)} - onCompleteWithPastDate={() => - onAction('completeWithPastDate', chore) - } - onAction={(type, chore, extraData) => - onAction(type, chore, extraData) - } - onChangeAssignee={() => onAction('changeAssignee', chore)} - onChangeDueDate={() => onAction('changeDueDate', chore)} - onWriteNFC={() => onAction('writeNFC', chore)} - onNudge={() => onAction('nudge', chore)} - onDelete={() => onAction('delete', chore)} - onMouseEnter={handleMouseEnter} - onOpen={() => { - // Clear any pending hide timer when menu opens - if (hoverTimer) { - clearTimeout(hoverTimer) - setHoverTimer(null) - } - }} - /> -
+ /> + + )} diff --git a/src/views/Chores/CompactChoreCard.jsx b/src/views/Chores/CompactChoreCard.jsx index 1023411..20bb228 100644 --- a/src/views/Chores/CompactChoreCard.jsx +++ b/src/views/Chores/CompactChoreCard.jsx @@ -32,6 +32,7 @@ const CompactChoreCard = ({ performers, sx, viewOnly, + showActions = true, onChipClick, onAction, // Multi-select props @@ -708,53 +709,54 @@ const CompactChoreCard = ({ }} > {/* Complete Button */} - - {chore.status === 3 ? ( - // Pending approval: Show approve/reject for admins/managers/owners, grayed out for others - canApproveReject() ? ( - - { - e.stopPropagation() - onAction('approve', chore) - }} - sx={{ - width: 24, - height: 24, - borderRadius: '50%', - transition: 'all 0.2s ease', - '&:hover': { - transform: 'scale(1.05)', - }, - '&:active': { - transform: 'scale(0.95)', - }, - }} - > - - - {/* + {chore.status === 3 ? ( + // Pending approval: Show approve/reject for admins/managers/owners, grayed out for others + canApproveReject() ? ( + + { + e.stopPropagation() + onAction('approve', chore) + }} + sx={{ + width: 24, + height: 24, + borderRadius: '50%', + transition: 'all 0.2s ease', + '&:hover': { + transform: 'scale(1.05)', + }, + '&:active': { + transform: 'scale(0.95)', + }, + }} + > + + + {/* */} - + + ) : ( + + + + ) ) : ( { + e.stopPropagation() + if (chore.status === 0) { + onAction('complete', chore) + } else if (chore.status === 1) { + onAction('pause', chore) + } else { + onAction('start', chore) + } + }} + disabled={notInCompletionWindow(chore)} sx={{ width: 32, height: 32, borderRadius: '50%', - opacity: 0.5, + transition: 'all 0.2s ease', + '&:hover': { + transform: 'scale(1.05)', + }, + + '&:active': { + transform: 'scale(0.95)', + }, + '&:disabled': { + opacity: 0.5, + transform: 'none', + }, }} > - + {chore.status === 0 ? ( + + ) : chore.status === 1 ? ( + + ) : ( + + )} - ) - ) : ( - { - e.stopPropagation() - if (chore.status === 0) { - onAction('complete', chore) - } else if (chore.status === 1) { - onAction('pause', chore) - } else { - onAction('start', chore) - } - }} - disabled={notInCompletionWindow(chore)} - sx={{ - width: 32, - height: 32, - borderRadius: '50%', - transition: 'all 0.2s ease', - '&:hover': { - transform: 'scale(1.05)', - }, - - '&:active': { - transform: 'scale(0.95)', - }, - '&:disabled': { - opacity: 0.5, - transform: 'none', - }, - }} - > - {chore.status === 0 ? ( - - ) : chore.status === 1 ? ( - - ) : ( - - )} - - )} - - + )} + + )} {/* Multi-select Checkbox */} - onAction('completeWithNote', chore)} - onCompleteWithPastDate={() => - onAction('completeWithPastDate', chore) - } - onChangeAssignee={() => onAction('changeAssignee', chore)} - onChangeDueDate={() => onAction('changeDueDate', chore)} - onWriteNFC={() => onAction('writeNFC', chore)} - onNudge={() => onAction('nudge', chore)} - onDelete={() => onAction('delete', chore)} - onMouseEnter={handleMouseEnter} - // onMouseLeave={handleMouseLeave} - sx={{ - width: 32, - height: 32, - color: 'text.tertiary', - flexShrink: 0, - '&:hover': { - color: 'text.secondary', - bgcolor: 'background.level1', - }, - }} - onOpen={() => { - handleMouseLeave() - }} - /> + {showActions && ( + onAction('completeWithNote', chore)} + onCompleteWithPastDate={() => + onAction('completeWithPastDate', chore) + } + onChangeAssignee={() => onAction('changeAssignee', chore)} + onChangeDueDate={() => onAction('changeDueDate', chore)} + onWriteNFC={() => onAction('writeNFC', chore)} + onNudge={() => onAction('nudge', chore)} + onDelete={() => onAction('delete', chore)} + onMouseEnter={handleMouseEnter} + // onMouseLeave={handleMouseLeave} + sx={{ + width: 32, + height: 32, + color: 'text.tertiary', + flexShrink: 0, + '&:hover': { + color: 'text.secondary', + bgcolor: 'background.level1', + }, + }} + onOpen={() => { + handleMouseLeave() + }} + /> + )}