Feat#76/gerenciar trilha

Dockerfile

@@ -2,11 +2,8 @@ FROM node:18
 
 WORKDIR /src
 
-
 COPY package*.json ./
 
-RUN npm install nodemon --save-dev
-
 RUN npm install
 
 COPY . .

components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": false,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

docker-compose.yml

@@ -12,7 +12,8 @@ services:
     env_file:
       - .env
     networks:
-      - calculus-network    
+      - calculus-network
+
 
 networks:
   calculus-network:

next.config.js

@@ -0,0 +1,8 @@
+// next.config.js
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig

package.json

@@ -20,18 +20,26 @@
     "@hookform/resolvers": "^3.9.0",
     "@mui/icons-material": "^5.16.5",
     "@mui/material": "^5.16.5",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-slot": "^1.1.0",
     "@tanstack/react-query": "^5.51.11",
+    "@tanstack/react-table": "^8.20.1",
     "axios": "^1.7.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
     "cookie": "^0.6.0",
     "dotenv": "^16.4.5",
     "glob": "^9.3.5",
+    "lucide-react": "^0.428.0",
     "next": "^14.2.5",
     "next-auth": "^4.24.7",
     "next-safe-action": "^7.4.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.52.1",
     "sonner": "^1.5.0",
+    "tailwind-merge": "^2.5.2",
+    "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.8"
   },
   "devDependencies": {

src/app/(auth)/oauth/page.tsx

@@ -8,11 +8,20 @@ import { Suspense } from 'react';
 import { toast } from 'sonner';
 import { useMutation } from '@tanstack/react-query';
 import loadImage from '@/public/loading.gif';
-import Image from 'next/image';
+import { CircularProgress } from '@mui/material';
 
-
-const signInWithToken = async (token: string) => {
-  const result = await signIn('credentials', { token, redirect: false });
+const signInWithToken = async ({
+  token,
+  refresh,
+}: {
+  token: string;
+  refresh: string;
+}) => {
+  const result = await signIn('credentials', {
+    token,
+    refresh,
+    redirect: false,
+  });
   if (!result?.error) {
     return result;
   } else {
@@ -26,12 +35,18 @@ const OAuthContent = () => {
   const [message, setMessage] = useState('Carregando...');
   const searchParams = useSearchParams();
   const token = searchParams.get('token');
+  const refresh = searchParams.get('refresh');
 
   const { mutate, isPending } = useMutation({
     mutationFn: signInWithToken,
     onSuccess: () => {
       setMessage('Login efetuado com sucesso! redirecionando');
-      window.location.href = '/home';
+      localStorage.setItem('token', JSON.stringify(session?.user.accessToken));
+      localStorage.setItem(
+        'refresh',
+        JSON.stringify(session?.user.refreshToken),
+      );
+      router.push('/home');
     },
     onError: () => {
       toast.error('Erro ao efetuar login, por favor tente novamente!');
@@ -40,8 +55,8 @@ const OAuthContent = () => {
   });
 
   useEffect(() => {
-    if (token && !session) {
-      mutate(token);
+    if (token && refresh && !session) {
+      mutate({ token, refresh });
     }
   }, [token, session, mutate]);
 
@@ -52,7 +67,7 @@ const OAuthContent = () => {
 
   return (
     <div className="flex justify-center items-center h-screen">
-      {isPending ? <Image src={loadImage.src} alt="Carregando..." /> : message}
+      {isPending ? <CircularProgress /> : message}
     </div>
   );
 };

src/app/admin/page.tsx

@@ -36,7 +36,9 @@ const Admin: React.FC = () => {
   useEffect(() => {
     const fetchUsers = async () => {
       try {
-        const response = await getUsers();
+        const response = await getUsers(
+          JSON.parse(localStorage.getItem('token')!),
+        );
         setUsers(response);
         setFilteredUsers(response);
       } catch (err) {

src/app/forgot-password/page.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import Image from 'next/image';
+import { Box, TextField, Button } from '@mui/material';
+import { useMutation } from '@tanstack/react-query';
+import calcuclusLogo from '@/public/calculus-logo.svg';
+import { forgotPassword } from '@/services/user.service';
+import { useForm, SubmitHandler } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useRouter } from 'next/navigation';
+import { toast } from 'sonner';
+import {
+  ForgotPasswordData,
+  forgotPasswordSchema,
+} from '@/lib/schemas/password.schema';
+
+export default function ForgotPassword() {
+  const router = useRouter();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<ForgotPasswordData>({
+    resolver: zodResolver(forgotPasswordSchema),
+  });
+
+  const { mutate, isPending } = useMutation({
+    mutationFn: async (data: ForgotPasswordData) => await forgotPassword(data),
+    onSuccess: (data) => {
+      toast.success(
+        'Email enviado com sucesso! Verifique sua caixa de entrada para obter as instruções.',
+      );
+      router.push('/');
+    },
+    onError: (error) => {
+      toast.error(
+        'Ocorreu um erro ao enviar o email. Tente novamente mais tarde.',
+      );
+    },
+  });
+
+  const onSubmit: SubmitHandler<ForgotPasswordData> = (data) => {
+    mutate(data);
+  };
+
+  return (
+    <Box className="flex flex-col items-center justify-center min-h-screen py-2 bg-[#F8F3F3]">
+      <Image
+        src={calcuclusLogo}
+        alt="Logo"
+        width={128}
+        height={128}
+        className="mx-auto mb-12"
+      />
+      <h2 className="text-2xl font-bold mb-4 text-center text-black">
+        Esqueci a Senha
+      </h2>
+      <p className="text-justify text-black font-bold">
+        Enviaremos as instruções para o seu email.
+      </p>
+      <p className="mb-4 text-justify text-black font-bold">
+        Para que você possa recuperar a sua senha.
+      </p>
+      <Box
+        component="form"
+        onSubmit={handleSubmit(onSubmit)}
+        className="flex flex-col items-center w-full max-w-md"
+      >
+        <TextField
+          type="email"
+          label="Digite seu email"
+          {...register('email')}
+          variant="outlined"
+          fullWidth
+          className="mb-4 w-full text-black"
+          error={!!errors.email}
+          helperText={errors.email?.message}
+        />
+        <Button
+          type="submit"
+          variant="contained"
+          fullWidth
+          className="bg-black text-white py-3 rounded-full hover:bg-gray-800 transition-colors w-full"
+        >
+          Enviar
+        </Button>
+      </Box>
+    </Box>
+  );
+}

src/app/home/page.tsx

@@ -4,15 +4,15 @@ import { useSession } from 'next-auth/react';
 import { SignOutButton } from '@/components/ui/buttons/signOut.button';
 
 export default function HomePage() {
-  const session = useSession();
+  const { data: session } = useSession();
 
   return (
     <div>
       <p className="pl-8 pt-4  text-black font-bold text-[#1F1F1F]">
-        {session.data?.user.name}
+        {session?.user.name}
       </p>
       <p className="pl-8 text-black font-bold text-[#1F1F1F]">
-        {session.data?.user.email}
+        {session?.user.email}
       </p>
       <p className=" pl-8 text-black font-bold">
         Esta tela ainda está em desenvolvimento :)

src/app/journey/[...id]/page.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import '../../../styles/globals.css';
+import JorneyTrailsListPage from '../../../components/jorneyTrailsList';
+import { Box, CircularProgress, Typography } from '@mui/material';
+import { useQuery } from '@tanstack/react-query';
+import { getJourney, getTrails } from '../../../services/studioMaker.service';
+import { Trail } from '@/lib/interfaces/trails.interface';
+import { Journey } from '@/lib/interfaces/journey.interface';
+import { useState } from 'react';
+
+export default function ManageTrack({ params }: { params: { id: string } }) {
+  const [jorney, setJorney] = useState<Journey>({} as Journey);
+  const fetchTrails = async (): Promise<Trail[]> => {
+    const trails = await getTrails({
+      id: params.id,
+      token: JSON.parse(localStorage.getItem('token')!),
+    });
+
+    const jorney = await getJourney(params.id);
+    setJorney(jorney);
+    return trails;
+  };
+
+  const {
+    data: trails = [],
+    isLoading,
+    error,
+  } = useQuery<Trail[], Error>({
+    queryKey: ['trails'],
+    queryFn: fetchTrails,
+  });
+
+  if (isLoading) {
+    return <CircularProgress />;
+  }
+
+  if (error) {
+    return (
+      <Typography>
+        Error fetching journeys: {(error as Error).message}
+      </Typography>
+    );
+  }
+
+  return (
+    <>
+      <Box className="flex flex-col items-center mt-8">
+        <h1 className="text-black font-bold text-4xl">{jorney.title}</h1>
+        <JorneyTrailsListPage trails={trails} journeyId={params.id} />
+      </Box>
+    </>
+  );
+}