diff options
Diffstat (limited to 'src/components/app-sidebar.tsx')
| -rw-r--r-- | src/components/app-sidebar.tsx | 82 |
1 files changed, 74 insertions, 8 deletions
diff --git a/src/components/app-sidebar.tsx b/src/components/app-sidebar.tsx index c60bf17..b61a716 100644 --- a/src/components/app-sidebar.tsx +++ b/src/components/app-sidebar.tsx @@ -1,9 +1,7 @@ "use client" import React from "react" -import {CircleDollarSign, SquareStack} from "lucide-react" - -import {NavMain} from "@/components/nav-main" +import {Activity, CircleDollarSign, ListIcon, NotebookText, SquareStack, User} from "lucide-react" import { Sidebar, SidebarContent, @@ -22,6 +20,8 @@ import {Badge} from "@/components/ui/badge.tsx"; import {useSelector} from "react-redux"; import {selectCashoutMethods} from "@/models/cashoutMethodSlice.ts"; import {selectTransactionHistory} from "@/models/transactionHistorySlice.ts"; +import {selectQuestions} from "../models/questionSlice"; +import {selectUserUpkAnswers} from "../models/userUpkAnswerSlice"; export function AppSidebar({...props}: React.ComponentProps<typeof Sidebar>) { const app: App = useAppSelector(state => state.app) @@ -29,8 +29,12 @@ export function AppSidebar({...props}: React.ComponentProps<typeof Sidebar>) { const cashoutMethods = useSelector(selectCashoutMethods) const transactionHistory = useSelector(selectTransactionHistory) + const questions = useSelector(selectQuestions) + const upkAnswers = useSelector(selectUserUpkAnswers) + const taskAttempts = useAppSelector(state => state.taskStatus) + return ( - <Sidebar collapsible="offcanvas" {...props}> + <Sidebar collapsible="none" {...props}> <SidebarHeader> <SidebarMenu> <SidebarMenuItem key="panel_name"> @@ -38,7 +42,6 @@ export function AppSidebar({...props}: React.ComponentProps<typeof Sidebar>) { asChild className="data-[slot=sidebar-menu-button]:!p-1.5" > - <span className="text-base font-semibold">{app.panelName}</span> </SidebarMenuButton> </SidebarMenuItem> @@ -46,10 +49,73 @@ export function AppSidebar({...props}: React.ComponentProps<typeof Sidebar>) { </SidebarHeader> <SidebarContent> - <NavMain></NavMain> - </SidebarContent> + <SidebarGroup> + <SidebarGroupContent className="flex flex-col gap-2"> + <SidebarMenu> + + <SidebarMenuItem key="surveys" + onClick={() => dispatch(setPage("offerwall"))} + > + <SidebarMenuButton tooltip="Surveys"> + <NotebookText/> + <span> + Surveys <Badge + className="absolute top-2 right-2 h-5 min-w-5 rounded-full px-1 font-mono tabular-nums cursor-pointer" + variant="outline" + title={`${(app.availability_count ?? 0).toLocaleString()} live surveys`} + >{(app.availability_count ?? 0).toLocaleString()}</Badge> + </span> + </SidebarMenuButton> + </SidebarMenuItem> + + + <SidebarMenuItem key="questions" + onClick={() => dispatch(setPage("questions"))} + > + <SidebarMenuButton tooltip="Questions"> + <ListIcon/> + <span> + Questions <Badge + className="absolute top-2 right-2 h-5 min-w-5 rounded-full px-1 font-mono tabular-nums cursor-pointer" + variant="outline" + title={`${questions.length.toLocaleString()} profiling question available`} + >{questions.length.toLocaleString()}</Badge> + </span> + </SidebarMenuButton> + </SidebarMenuItem> + + <SidebarMenuItem key="demographics" + onClick={() => dispatch(setPage("demographics"))} + > + <SidebarMenuButton tooltip="User Demographics"> + <User/> + <span> + Demographics <Badge + className="absolute top-2 right-2 h-5 min-w-5 rounded-full px-1 font-mono tabular-nums cursor-pointer" + variant="outline" + >{upkAnswers.length.toLocaleString()}</Badge> + </span> + </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> - <SidebarContent> <SidebarGroup> <SidebarGroupLabel>Redemption</SidebarGroupLabel> <SidebarGroupContent> |