From d7bb480ab6bd2172a04ecb304d012206e0c03e8f Mon Sep 17 00:00:00 2001
From: Max Nanis
Date: Tue, 10 Jun 2025 05:21:19 +0700
Subject: Adding taskStatus fetch. Showing list of Task Attempts & starting
 heatmap calendar.

---
 src/pages/TaskAttemptHistory.tsx | 129 +++++++++++++++++++++++++++++++++++++++
 src/pages/TransactionHistory.tsx |  24 ++++++++
 2 files changed, 153 insertions(+)
 create mode 100644 src/pages/TaskAttemptHistory.tsx
 create mode 100644 src/pages/TransactionHistory.tsx

(limited to 'src/pages')

diff --git a/src/pages/TaskAttemptHistory.tsx b/src/pages/TaskAttemptHistory.tsx
new file mode 100644
index 0000000..311c32e
--- /dev/null
+++ b/src/pages/TaskAttemptHistory.tsx
@@ -0,0 +1,129 @@
+import {useAppSelector} from "@/hooks.ts";
+import React from "react";
+import {ColumnDef, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
+import {TaskStatusResponseOut} from "@/api";
+import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table.tsx";
+import {formatDistanceToNow} from 'date-fns'
+import {formatSecondsVerbose} from "@/lib/utils.ts";
+import {Calendar} from "@/components/ui/calendar"
+
+export const TaskAttemptTable = () => {
+    const data = useAppSelector(state => state.taskStatus)
+
+    const columns: ColumnDef<TaskStatusResponseOut>[] = [
+        {
+            accessorKey: "started",
+            header: "Started",
+            cell: ({getValue}) => formatDistanceToNow(new Date(getValue()), {addSuffix: true})
+        },
+        {
+            accessorKey: "finished",
+            header: "Duration",
+            cell: ({row}) => {
+                const started = new Date(row.original.started);
+                const finished = new Date(row.original.finished);
+                const durationInSec = Math.floor((finished.getTime() - started.getTime()) / 1000);
+                return formatSecondsVerbose(durationInSec);
+            }
+        }, {
+            accessorKey: "status",
+            header: "Status",
+        }, {
+            accessorKey: "status_code_1",
+            header: "Status 1",
+        }, {
+            accessorKey: "status_code_2",
+            header: "Status 2",
+        }
+    ]
+
+    const table = useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+    })
+
+    return (
+        <div className="border rounded-md mt-5">
+            <Table>
+                <TableHeader>
+                    {table.getHeaderGroups().map((headerGroup) => (
+                        <TableRow key={headerGroup.id}>
+                            {headerGroup.headers.map((header) => {
+                                return (
+                                    <TableHead key={header.id}>
+                                        {header.isPlaceholder
+                                            ? null
+                                            : flexRender(
+                                                header.column.columnDef.header,
+                                                header.getContext()
+                                            )}
+                                    </TableHead>
+                                )
+                            })}
+                        </TableRow>
+                    ))}
+                </TableHeader>
+
+                <TableBody>
+                    {
+                        table.getRowModel().rows.map((row) => (
+                            <TableRow
+                                key={row.id}
+                                data-state={row.getIsSelected() && "selected"}
+                            >
+                                {row.getVisibleCells().map((cell) => (
+                                    <TableCell key={cell.id}>
+                                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                    </TableCell>
+                                ))}
+                            </TableRow>
+                        ))
+                    }
+                </TableBody>
+            </Table>
+        </div>
+    )
+}
+
+const TaskAttemptHistoryPage = () => {
+    const taskStatuses = useAppSelector(state => state.taskStatus)
+
+    const countByDate: Record<string, number> = taskStatuses.reduce((acc, item) => {
+        const date: string = item.started.split("T")[0]
+        acc[date] = (acc[date] || 0) + 1
+        return acc
+    }, {} as Record<string, number>)
+
+    return (
+        <>
+            <Calendar
+                mode="single"
+                numberOfMonths={2}
+                className="rounded-lg border shadow-sm"
+
+                // dayPickerProps={{
+                //     modifiersClassNames: {
+                //         highlighted: "bg-blue",
+                //     },
+                //     modifiers: {
+                //         highlighted: (date: Date) =>
+                //             !!countByDate[date.toISOString().split("T")[0]],
+                //     },
+                //     showOutsideDays: true,
+                // }}
+
+                // dayClassName={(date) => {
+                //     const key = date.toISOString().split("T")[0]
+                //     console.log(key)
+                //     return (countByDate[key] ?? 0) > 0 ? "bg-blue-200 text-blue-800" : "bg-white"
+                // }}
+            />
+            <TaskAttemptTable/>
+        </>
+    )
+}
+
+export {
+    TaskAttemptHistoryPage
+}
\ No newline at end of file
diff --git a/src/pages/TransactionHistory.tsx b/src/pages/TransactionHistory.tsx
new file mode 100644
index 0000000..a99dd8b
--- /dev/null
+++ b/src/pages/TransactionHistory.tsx
@@ -0,0 +1,24 @@
+import {useAppDispatch, useAppSelector} from "@/hooks.ts";
+import {Pagination, PaginationContent, PaginationItem, PaginationNext} from "@/components/ui/pagination.tsx";
+import React from "react";
+import {ProfileQuestionFull} from "@/pages/Questions.tsx";
+
+const TransactionHistoryPage = () => {
+    const dispatch = useAppDispatch()
+    const transactionHistory = useAppSelector(state => state.transactionHistory)
+
+
+    return (
+        <>
+            {
+                transactionHistory.map(th => {
+
+                })
+            }
+        </>
+    )
+}
+
+export {
+    TransactionHistoryPage
+}
\ No newline at end of file
-- 
cgit v1.2.3