admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature/IO-3291-Tasks-Notifications: Checkpoint

Browse Source
This commit is contained in:
Dave Richer
2025-07-09 17:47:32 -04:00
parent d4215b7aee
commit 4a30a5bc64
4 changed files with 156 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
client/src/components/task-center/task-center.component.jsx
View File

@@ -1,5 +1,5 @@
import { Virtuoso } from "react-virtuoso";
import { Badge, Button, Spin, Tooltip, Typography } from "antd";
import { Badge, Button, Spin } from "antd";
import { useTranslation } from "react-i18next";
import { forwardRef, useMemo, useRef } from "react";
import day from "../../utils/day.js";
@@ -12,8 +12,6 @@ import {
QuestionCircleOutlined
} from "@ant-design/icons";
const { Title } = Typography;
const TaskCenterComponent = forwardRef(
({ visible, tasks, loading, onTaskClick, onLoadMore, totalTasks, createNewTask }, ref) => {
const { t } = useTranslation();
@@ -25,13 +23,16 @@ const TaskCenterComponent = forwardRef(
[t("tasks.labels.upcoming")]: <ArrowRightOutlined style={{ marginRight: 8 }} />,
[t("tasks.labels.no_due_date")]: <QuestionCircleOutlined style={{ marginRight: 8 }} />
};
const groupedItems = useMemo(() => {
const now = day();
const now = day("2025-07-09"); // Set to current date
const today = now.startOf("day");
const overdue = tasks.filter((t) => t.due_date && day(t.due_date).isBefore(today));
const dueToday = tasks.filter((t) => t.due_date && day(t.due_date).isSame(today, "day"));
const upcoming = tasks.filter((t) => t.due_date && day(t.due_date).isAfter(today));
const upcoming = tasks.filter(
(t) => t.due_date && day(t.due_date).isAfter(today) && !day(t.due_date).isSame(today, "day")
);
const noDueDate = tasks.filter((t) => !t.due_date);
const makeGroup = (label, data) => (data.length ? [{ type: "section", label, tasks: data }] : []);
@@ -61,38 +62,30 @@ const TaskCenterComponent = forwardRef(
<div key={`section-${index}`} className="task-section">
<div className="section-title">
{sectionIcons[section.label]}
{section.label}
{section.label} ({section.tasks.length})
</div>
<table className="task-table">
<tbody>
{section.tasks.map((task) => {
const priorityColor = getPriorityColor(task.priority);
const rowContent = (
return (
<tr key={task.id} className="task-row" onClick={() => onTaskClick(task.id)}>
<div className="task-row-container">
<td className="task-title-cell">
<td className="task-title-cell">
<div className="task-row-container">
<div className="task-title">{task.title}</div>
<div className="task-ro-number">
{t("notifications.labels.ro-number", {
ro_number: task.job?.ro_number || t("general.labels.na")
})}
</div>
</td>
<td className="task-due-cell">
{task.due_date && <span>{day(task.due_date).fromNow()}</span>}
{!!priorityColor && <Badge color={priorityColor} dot style={{ marginLeft: 6 }} />}
</td>
</div>
</div>
</td>
<td className="task-due-cell">
{task.due_date && <span>{day(task.due_date).fromNow()}</span>}
{!!priorityColor && <Badge color={priorityColor} dot style={{ marginLeft: 6 }} />}
</td>
</tr>
);
return task.description ? (
<Tooltip key={task.id} title={task.description} placement="bottomLeft">
{rowContent}
</Tooltip>
) : (
rowContent
);
})}
</tbody>
</table>
@@ -102,17 +95,18 @@ const TaskCenterComponent = forwardRef(
return (
<div className={`task-center ${visible ? "visible" : ""}`} ref={ref}>
<div className="task-header">
<h3>{t("tasks.labels.my_tasks_center")}</h3>
<h3>
{t("tasks.labels.my_tasks_center")} ({tasks.length})
</h3>
<div className="task-header-actions">
<Button className="create-task-button" type="link" icon={<PlusCircleOutlined />} onClick={createNewTask} />
{loading && <Spin spinning={loading} size="small" />}
</div>
</div>
<Virtuoso
ref={virtuosoRef}
style={{ height: "400px", width: "100%" }}
style={{ height: "550px", width: "100%" }}
data={groupedItems}
itemContent={(index, section) => renderSection(section, index)}
/>