diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/app-sidebar.tsx | 16 | ||||
| -rw-r--r-- | src/components/nav-main.tsx | 17 | ||||
| -rw-r--r-- | src/components/site-header.tsx | 4 |
3 files changed, 32 insertions, 5 deletions
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> |