Adding taskStatus fetch. Showing list of Task Attempts & starting heatmap calendar.

1 files changed, 16 insertions, 1 deletions

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>