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/components/app-sidebar.tsx | 16 +++++++++++++---
 src/components/nav-main.tsx    | 17 ++++++++++++++++-
 src/components/site-header.tsx |  4 +++-
 3 files changed, 32 insertions(+), 5 deletions(-)

(limited to 'src/components')

diff --git a/src/components/app-sidebar.tsx b/src/components/app-sidebar.tsx
index f314c9f..9a13aff 100644
--- a/src/components/app-sidebar.tsx
+++ b/src/components/app-sidebar.tsx
@@ -21,11 +21,13 @@ import {setPage} from "@/models/appSlice.ts";
 import {Badge} from "@/components/ui/badge.tsx";
 import {useSelector} from "react-redux";
 import {selectCashoutMethods} from "@/models/cashoutMethodSlice.ts";
+import {selectTransactionHistory} from "@/models/transactionHistorySlice.ts";
 
 export function AppSidebar({...props}: React.ComponentProps<typeof Sidebar>) {
     const app = useAppSelector(state => state.app)
     const dispatch = useAppDispatch()
     const cashoutMethods = useSelector(selectCashoutMethods)
+    const transactionHistory = useSelector(selectTransactionHistory)
 
     const {isMobile} = useSidebar()
 
@@ -76,11 +78,19 @@ export function AppSidebar({...props}: React.ComponentProps<typeof Sidebar>) {
                                 </SidebarMenuButton>
                             </SidebarMenuItem>
 
-                            <SidebarMenuItem key="cashout_history">
+                            <SidebarMenuItem
+                                key="transaction_hisotry"
+                                className="cursor-pointer"
+                            >
                                 <SidebarMenuButton asChild>
-                                    <a href="#">
+                                    <a
+                                        onClick={() => dispatch(setPage("transaction_history"))}
+                                    >
                                         <SquareStack/>
-                                        <span>History</span>
+                                        <span>History <Badge
+                                            className="absolute top-2 right-2 h-5 min-w-5 rounded-full px-1 font-mono tabular-nums cursor-pointer"
+                                            variant="outline"
+                                        >{transactionHistory.length.toLocaleString()}</Badge></span>
                                     </a>
                                 </SidebarMenuButton>
                             </SidebarMenuItem>
diff --git a/src/components/nav-main.tsx b/src/components/nav-main.tsx
index 949ced3..9ed1b24 100644
--- a/src/components/nav-main.tsx
+++ b/src/components/nav-main.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import {ListIcon, NotebookText, Users, User} from "lucide-react"
+import {ListIcon, NotebookText, Users, User, Activity} from "lucide-react"
 import {
     SidebarGroup,
     SidebarGroupContent,
@@ -21,6 +21,7 @@ export function NavMain() {
     const app = useAppSelector(state => state.app)
     const questions = useSelector(selectQuestions)
     const upkAnswers = useSelector(selectUserUpkAnswers)
+    const taskAttempts = useAppSelector(state => state.taskStatus)
 
     return (
         <SidebarGroup>
@@ -72,6 +73,20 @@ export function NavMain() {
                         </SidebarMenuButton>
                     </SidebarMenuItem>
 
+                    <SidebarMenuItem key="task_attempts"
+                                     onClick={() => dispatch(setPage("task_attempts"))}
+                    >
+                        <SidebarMenuButton tooltip="Survey History">
+                            <Activity/>
+                            <span>
+                                Survey History <Badge
+                                className="absolute top-2 right-2 h-5 min-w-5 rounded-full px-1 font-mono tabular-nums cursor-pointer"
+                                variant="outline"
+                            >{taskAttempts.length.toLocaleString()}</Badge>
+                            </span>
+                        </SidebarMenuButton>
+                    </SidebarMenuItem>
+
                 </SidebarMenu>
             </SidebarGroupContent>
         </SidebarGroup>
diff --git a/src/components/site-header.tsx b/src/components/site-header.tsx
index f3e8851..25b3e52 100644
--- a/src/components/site-header.tsx
+++ b/src/components/site-header.tsx
@@ -20,8 +20,10 @@ const SiteHeader = () => {
                 <h1 className="text-base font-medium">
                     {app.currentPage === 'offerwall' && "Offerwall"}
                     {app.currentPage === 'questions' && "Profiling Questions"}
-                    {app.currentPage === 'cashouts' && "Cashout Methods"}
                     {app.currentPage === 'demographics' && "User Demographics"}
+                    {app.currentPage === 'task_attempts' && "Task Attempts"}
+                    {app.currentPage === 'cashouts' && "Cashout Methods"}
+                    {app.currentPage === 'transaction_history' && 'Transaction History'}
                 </h1>
 
             </div>
-- 
cgit v1.2.3