Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
1a0cca9
fix: allow customizable title size in TitleSection component
jpcmf Dec 19, 2025
0b46e78
feat: add "Painel do criador" link to SidebarNav with new icon
jpcmf Dec 19, 2025
d24f14a
fix: add date-fns dependency
jpcmf Dec 19, 2025
081c96f
feat: add formatSmartDate function for intelligent date formatting
jpcmf Dec 19, 2025
c1593fc
feat: add createdAt and updatedAt fields to UserBasics type
jpcmf Dec 19, 2025
86e9dac
feat: define User type with associated fields and nested types
jpcmf Dec 19, 2025
bbb8501
feat: enhance Dashboard component with user status and profile links
jpcmf Jan 3, 2026
e1ca644
feat: update DashboardPage with localized title and clean up commente…
jpcmf Jan 3, 2026
2ef9d92
feat: removing unnecessary line breaks
jpcmf Jan 3, 2026
16abe0d
feat: refactor AuthContext to import User type and clean up user data…
jpcmf Jan 3, 2026
6a02b18
feat: refactor LogoSkateHub component to simplify props and clean up …
jpcmf Jan 3, 2026
78ddd2e
feat: update SidebarNav icons for improved clarity and consistency
jpcmf Jan 3, 2026
d9b8b07
feat: update Dashboard component to replace icon and remove unused te…
jpcmf Jan 3, 2026
b560514
feat: update SidebarNav component to adjust spacing for improved layout
jpcmf Jan 3, 2026
1c7dc5b
feat: update Dashboard component to replace text with icon for irregu…
jpcmf Jan 3, 2026
771e852
feat: update status display
jpcmf Jan 3, 2026
1095115
feat: update getServerSideProps type definition for better type safety
jpcmf Jan 8, 2026
6eae447
fix: standardize import quotes
jpcmf Jan 8, 2026
14584d1
feat: update user last updated text to handle unavailable date
jpcmf Jan 8, 2026
f5a2d08
fix: update icon color to always display green for upload status
jpcmf Jan 8, 2026
d128884
fix: adjust date comparison logic in formatSmartDate function
jpcmf Jan 8, 2026
37a3ebc
feat: enhance loading state in DashboardPage with Spinner component
jpcmf Jan 8, 2026
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
"@tanstack/react-query": "^5.90.2",
"axios": "^1.12.2",
"boring-avatars": "^2.0.4",
"date-fns": "^4.1.0",
"framer-motion": "^11.11.11",
"next": "16.0.7",
"next-auth": "^4.24.10",
Expand Down
8 changes: 8 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

33 changes: 3 additions & 30 deletions src/components/LogoSkateHub/index.tsx

Large diffs are not rendered by default.

20 changes: 15 additions & 5 deletions src/components/Sidebar/SidebarNav.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useContext } from "react";
import { RiContactsLine, RiDashboardLine, RiPictureInPictureLine } from "react-icons/ri";
import { TbSkateboard } from "react-icons/tb";
import { RiContactsLine, RiDashboardLine, RiPencilRulerFill, RiPinDistanceLine } from "react-icons/ri";
import { TbUsers } from "react-icons/tb";

import { Box, Stack, useColorModeValue } from "@chakra-ui/react";

Expand All @@ -16,7 +16,7 @@ export function SidebarNav() {
const bgColor = useColorModeValue("blackAlpha.100", "gray.800");
return (
<Box bg={bgColor} p="6" borderRadius={0} h="full">
<Stack spacing="10" align="flex-start">
<Stack spacing="12" align="flex-start">
<LogoSkateHub />
<NavSection title="Principal">
<NavLink
Expand All @@ -30,7 +30,7 @@ export function SidebarNav() {
Dashboard
</NavLink>
<NavLink
icon={TbSkateboard}
icon={TbUsers}
href="/skatistas"
_activeLink={{
textDecoration: "none",
Expand All @@ -40,7 +40,7 @@ export function SidebarNav() {
Skatistas
</NavLink>
<NavLink
icon={RiPictureInPictureLine}
icon={RiPinDistanceLine}
href="/spots"
_activeLink={{
textDecoration: "none",
Expand Down Expand Up @@ -103,6 +103,16 @@ export function SidebarNav() {

{isAuthenticated && (
<NavSection title="Usuário">
<NavLink
icon={RiPencilRulerFill}
href="/dashboard"
_activeLink={{
textDecoration: "none",
color: "green.400"
}}
>
Painel do criador
</NavLink>
<NavLink
icon={RiContactsLine}
href="/general"
Expand Down
4 changes: 2 additions & 2 deletions src/components/TitleSection/index.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { Box, Divider, Flex, Heading, useColorModeValue } from "@chakra-ui/react";

export function TitleSection({ title }: { title: string }) {
export function TitleSection({ title, size = "lg" }: { title: string; size?: string }) {
const titleBgColor = useColorModeValue("white", "gray.900");

return (
<Box mb={6}>
<Flex direction="row" alignItems="center" position="relative">
<Heading size="lg" bg={titleBgColor} py={0} pr={4}>
<Heading size={size} bg={titleBgColor} py={0} pr={4}>
{title}
</Heading>
<Divider my="0" borderColor="gray.700" position="absolute" left={0} right={0} zIndex={-1} />
Expand Down
34 changes: 9 additions & 25 deletions src/contexts/AuthContext.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import Router from "next/router";

import { destroyCookie, parseCookies, setCookie } from "nookies";

import type { User } from "@/types/User.type";

import { signInRequest, updateUserProfile, userMe } from "../services/auth";

type SignInData = {
Expand All @@ -11,28 +13,6 @@ type SignInData = {
recaptcha?: string;
};

type User = {
id: string;
name: string;
email: string;
username: string;
category: Category;
about: string;
website_url: string;
instagram_url: string;
avatar: Avatar;
};

type Avatar = {
url: string;
};

type Category = {
id: number;
name: string;
value: string;
};

type UpdateUserData = Pick<
User,
"id" | "name" | "email" | "username" | "category" | "about" | "website_url" | "instagram_url"
Expand Down Expand Up @@ -76,7 +56,11 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
about: userData.about || "",
website_url: userData.website_url || "",
instagram_url: userData.instagram_url || "",
avatar: userData.avatar
avatar: userData.avatar,
address: userData.address || {},
updatedAt: userData.updatedAt,
blocked: userData.blocked,
confirmed: userData.confirmed
});
})
.catch(() => {
Expand All @@ -100,8 +84,8 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
const { user, jwt } = await signInRequest({ email, password });

setCookie(undefined, "auth.token", jwt, {
maxAge: 60 * 10 // 10 minutes
// maxAge: 60 * 60 * 1, // 1 hour
// maxAge: 60 * 10 // 10 minutes
maxAge: 60 * 60 * 1 // 1 hour
// maxAge: 60 * 60 * 24 * 1 // 1 day
});

Expand Down
193 changes: 159 additions & 34 deletions src/features/dashboard/index.tsx
Original file line number Diff line number Diff line change
@@ -1,42 +1,167 @@
import { Box, SimpleGrid, Text } from "@chakra-ui/react";
import {
RiAccountBoxLine,
RiBookOpenLine,
RiCircleFill,
RiMapPin2Line,
RiThumbDownLine,
RiThumbUpLine,
RiUploadFill,
RiVideoAddLine
} from "react-icons/ri";
import Link from "next/link";

import { Box, Heading, HStack, Icon, SimpleGrid, Text, useColorModeValue, VStack } from "@chakra-ui/react";

import { TitleSection } from "@/components/TitleSection";
import type { User } from "@/types/User.type";
import { formatSmartDate } from "@/utils/date";

type DashboardProps = {
user: any;
user: User;
};

export function Dashboard({ user }: DashboardProps) {
const borderColor = useColorModeValue("green.200", "green.800");
const bgColor = useColorModeValue("blackAlpha.100", "gray.800");
const buttonBgColor = useColorModeValue("green.200", "green.800");
const hoverBgColor = useColorModeValue("green.200", "green.400");
return (
<SimpleGrid m={0} columns={{ base: 1, md: 3 }} spacing={{ base: 5, lg: 4 }} w="">
<Box p={["6", "8"]} bg="gray.800" borderRadius={8} flex="50%">
<Text fontSize="lg" fontWeight="bold" mb="4">
Status do cadastro do atleta
</Text>
<Text color="green.400">{user?.name}</Text>
<Text color="green.400">Regular</Text>
</Box>

<Box p={["6", "8"]} bg="gray.800" borderRadius={8} flex="50%">
<Text fontSize="lg" fontWeight="bold" mb="4">
Dados de acesso da semana
</Text>
{user?.name} <br />
{user?.about} <br />
</Box>

<Box p={["6", "8"]} bg="gray.800" borderRadius={8} flex="50%">
<Text fontSize="lg" fontWeight="bold" mb="4">
Documentações
</Text>
<Text color="green.400" as="a" href="#" textDecoration={"underline"}>
Instruções para inscrição em eventos
</Text>
</Box>

<Box p={["6", "8"]} bg="gray.800" borderRadius={8} flex="50%">
<Text fontSize="lg" fontWeight="bold" mb="4">
Taxa de abertura
</Text>
</Box>
</SimpleGrid>
<>
<SimpleGrid mb={6} columns={{ base: 1, md: 4 }} spacing={{ base: 5, lg: 4 }}>
<Box
as={Link}
href="/"
p={["6", "8"]}
bg={buttonBgColor}
borderWidth={2}
borderColor={borderColor}
borderRadius={8}
alignItems="center"
justifyContent="center"
display="flex"
flexDirection="column"
_hover={{ textDecoration: "none", bg: hoverBgColor }}
>
<Icon as={RiVideoAddLine} boxSize={8} mb={4} />
<Heading size="md" mb={4}>
Criar um story
</Heading>
</Box>
<Box
as={Link}
href="/"
p={["6", "8"]}
bg={buttonBgColor}
borderWidth={2}
borderColor={borderColor}
borderRadius={8}
alignItems="center"
justifyContent="center"
textAlign="center"
display="flex"
flexDirection="column"
_hover={{ textDecoration: "none", bg: hoverBgColor }}
>
<Icon as={RiMapPin2Line} boxSize={8} mb={4} />
<Heading size="md" mb={4}>
Criar um spot
</Heading>
</Box>
<Box
as={Link}
href="/"
p={["6", "8"]}
bg={buttonBgColor}
borderWidth={2}
borderColor={borderColor}
borderRadius={8}
alignItems="center"
justifyContent="center"
textAlign="center"
display="flex"
flexDirection="column"
_hover={{ textDecoration: "none", bg: hoverBgColor }}
>
<Icon as={RiBookOpenLine} boxSize={8} mb={4} />
<Heading size="md" mb={4}>
Criar um story
</Heading>
</Box>
<Box
as={Link}
href="/user/edit"
p={["6", "8"]}
bg={buttonBgColor}
borderWidth={2}
borderColor={borderColor}
borderRadius={8}
alignItems="center"
justifyContent="center"
textAlign="center"
display="flex"
flexDirection="column"
_hover={{ textDecoration: "none", bg: hoverBgColor }}
>
<Icon as={RiAccountBoxLine} boxSize={8} mb={4} />
<Heading size="md" mb={4}>
Editar meu perfil
</Heading>
</Box>
</SimpleGrid>

<TitleSection title="Visão geral" size="md" />

<SimpleGrid m={0} columns={{ base: 1, md: 3 }} spacing={{ base: 5, lg: 4 }}>
<Box p={["6", "8"]} bg={bgColor} borderRadius={8} flex="50%">
<VStack align="flex-start" spacing={4}>
<Text fontSize="lg" fontWeight="bold" mb="1">
Status do cadastro do atleta
</Text>
<HStack>
{user.confirmed ? (
<>
<Icon as={RiThumbUpLine} boxSize={5} color="green.400" />
<Text fontSize="md">Regular</Text>
</>
) : (
<>
<Icon as={RiThumbDownLine} boxSize={5} color="red.400" />
<Text fontSize="md">Irregular</Text>
</>
)}
</HStack>
<Text fontSize="lg" fontWeight="bold" mb="1">
Status da conta
</Text>
<HStack>
<Icon as={RiCircleFill} boxSize={5} color={user.blocked ? "red.400" : "green.400"} />
<Text fontSize="md">{user.blocked ? "Bloqueada" : "Ativa"}</Text>
</HStack>
<Text fontSize="lg" fontWeight="bold" mb="1">
Dados de acesso da semana
</Text>
<HStack>
<Icon as={RiUploadFill} boxSize={5} color="green.400" />
<Text fontSize="md">Última atualização: {formatSmartDate(user?.updatedAt || "Indisponível")}</Text>
</HStack>
</VStack>
</Box>

<Box p={["6", "8"]} bg={bgColor} borderRadius={8} flex="50%">
<Text fontSize="lg" fontWeight="bold" mb="4">
Documentações
</Text>
<Text color="green.400" as="a" href="#" textDecoration={"underline"}>
Instruções para inscrição em eventos
</Text>
</Box>

<Box p={["6", "8"]} bg={bgColor} borderRadius={8} flex="50%">
<Text fontSize="lg" fontWeight="bold" mb="4">
Taxa de abertura
</Text>
</Box>
</SimpleGrid>
</>
);
}
Loading