aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/app-sidebar.tsx82
-rw-r--r--src/components/nav-main.tsx94
-rw-r--r--src/components/site-header.tsx9
3 files changed, 75 insertions, 110 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>
diff --git a/src/components/nav-main.tsx b/src/components/nav-main.tsx
deleted file mode 100644
index 9ed1b24..0000000
--- a/src/components/nav-main.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-"use client"
-
-import {ListIcon, NotebookText, Users, User, Activity} from "lucide-react"
-import {
- SidebarGroup,
- SidebarGroupContent,
- SidebarMenu,
- SidebarMenuButton,
- SidebarMenuItem,
-} from "@/components/ui/sidebar"
-import {setPage} from "@/models/appSlice.ts";
-import {useAppDispatch, useAppSelector} from "@/hooks.ts";
-import {useSelector} from "react-redux";
-import {selectQuestions} from "@/models/questionSlice.ts";
-import {Badge} from "@/components/ui/badge"
-import {selectUserUpkAnswers} from "@/models/userUpkAnswerSlice.ts";
-
-export function NavMain() {
- const dispatch = useAppDispatch()
-
- const app = useAppSelector(state => state.app)
- const questions = useSelector(selectQuestions)
- const upkAnswers = useSelector(selectUserUpkAnswers)
- const taskAttempts = useAppSelector(state => state.taskStatus)
-
- return (
- <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>
- )
-}
diff --git a/src/components/site-header.tsx b/src/components/site-header.tsx
index dca4996..70a2068 100644
--- a/src/components/site-header.tsx
+++ b/src/components/site-header.tsx
@@ -1,8 +1,6 @@
import {Separator} from "@/components/ui/separator"
-import {SidebarTrigger} from "@/components/ui/sidebar"
import {useAppSelector} from "@/hooks.ts";
import {App} from "@/models/app.ts"
-import {Offerwall} from "@/pages/Offerwall.tsx";
const SiteHeader = () => {
const app: App = useAppSelector(state => state.app)
@@ -10,13 +8,8 @@ const SiteHeader = () => {
return (
<header
className="group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 flex h-12 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear">
- <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
- <SidebarTrigger/>
+ <div className="flex w-full items-center gap-1 px-2 lg:gap-2 lg:px-4">
- <Separator
- orientation="vertical"
- className="mx-2 data-[orientation=vertical]:h-4"
- />
<h1 className="text-base font-medium">
{app.currentPage === 'offerwall' && "Offerwall"}
{app.currentPage === 'questions' && "Profiling Questions"}