From 12517bb5b484c786fb8f7acfd57aa41bfcbf13d6 Mon Sep 17 00:00:00 2001
From: Emilio Schaedler Heinzmann <emiliosheinz@gmail.com>
Date: Sun, 12 Mar 2023 18:05:04 -0300
Subject: [PATCH 01/14] chore: :loud_sound: add logs to improve error tracking

---
 src/utils/openai/index.ts | 80 +++++++++++++++++++++------------------
 1 file changed, 44 insertions(+), 36 deletions(-)

diff --git a/src/utils/openai/index.ts b/src/utils/openai/index.ts
index c0c8b4e..d167e3f 100644
--- a/src/utils/openai/index.ts
+++ b/src/utils/openai/index.ts
@@ -61,41 +61,49 @@ export async function generateFlashCards({
   topics,
   title,
 }: GenerateFlashCardsParam): Promise<Array<CardInput>> {
-  const amountOfCards = 3
-  const charactersPerSentence = 65
-
-  /** Build topics strings */
-  const joinedTopics = topics.map(({ title }) => title).join(', ')
-
-  /** Build prompt asking OpenAI to generate a csv string */
-  const prompt = `Levando em conta o contexto ${title}, gere um Array JSON com ${amountOfCards} perguntas e respostas curtas e diretas, de no máximo ${charactersPerSentence} caracteres, sobre ${joinedTopics}. [{question: "pergunta", answer: "resposta"}, ...]`
-
-  const response = await openai.createChatCompletion(
-    {
-      n: 1,
-      messages: [{ role: 'user', content: prompt }],
-      temperature: 0.8,
-      model: 'gpt-3.5-turbo',
-      max_tokens: amountOfCards * charactersPerSentence,
-    },
-    { timeout: 15_000 },
-  )
-
-  const generatedJsonString = response.data.choices[0]?.message?.content
-
-  if (!generatedJsonString) {
-    throw new Error('Não foi possível gerar as perguntas e respostas.')
+  try {
+    const amountOfCards = 3
+    const charactersPerSentence = 65
+
+    /** Build topics strings */
+    const joinedTopics = topics.map(({ title }) => title).join(', ')
+
+    /** Build prompt asking OpenAI to generate a csv string */
+    const prompt = `Levando em conta o contexto ${title}, gere um Array JSON com ${amountOfCards} perguntas e respostas curtas e diretas, de no máximo ${charactersPerSentence} caracteres, sobre ${joinedTopics}. [{question: "pergunta", answer: "resposta"}, ...]`
+
+    const response = await openai.createChatCompletion(
+      {
+        n: 1,
+        messages: [{ role: 'user', content: prompt }],
+        temperature: 0.8,
+        model: 'gpt-3.5-turbo',
+        max_tokens: amountOfCards * charactersPerSentence,
+      },
+      { timeout: 15_000 },
+    )
+
+    const generatedJsonString = response.data.choices[0]?.message?.content
+
+    if (!generatedJsonString) {
+      throw new Error('Não foi possível gerar as perguntas e respostas.')
+    }
+
+    const generatedJson = JSON.parse(generatedJsonString)
+
+    const cards: Array<CardInput> = generatedJson.map(
+      ({ question, answer }: { question: string; answer: string }) => ({
+        question: trimAndRemoveDoubleQuotes(question),
+        answer: trimAndRemoveDoubleQuotes(answer),
+        isAiPowered: true,
+      }),
+    )
+
+    return cards
+  } catch (error) {
+    /**
+     * Added to improve error tracking on log monitoring tools
+     */
+    console.error(error)
+    throw error
   }
-
-  const generatedJson = JSON.parse(generatedJsonString)
-
-  const cards: Array<CardInput> = generatedJson.map(
-    ({ question, answer }: { question: string; answer: string }) => ({
-      question: trimAndRemoveDoubleQuotes(question),
-      answer: trimAndRemoveDoubleQuotes(answer),
-      isAiPowered: true,
-    }),
-  )
-
-  return cards
 }

From fa239639674a495c15300a316a16d80495b5fd6f Mon Sep 17 00:00:00 2001
From: Emilio Schaedler Heinzmann <emiliosheinz@gmail.com>
Date: Mon, 13 Mar 2023 17:36:55 -0300
Subject: [PATCH 02/14] chore: :goal_net: adds additional information to the
 logs

---
 src/utils/openai/index.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/utils/openai/index.ts b/src/utils/openai/index.ts
index d167e3f..05aeb1f 100644
--- a/src/utils/openai/index.ts
+++ b/src/utils/openai/index.ts
@@ -61,6 +61,8 @@ export async function generateFlashCards({
   topics,
   title,
 }: GenerateFlashCardsParam): Promise<Array<CardInput>> {
+  let generatedJsonString: string | undefined
+
   try {
     const amountOfCards = 3
     const charactersPerSentence = 65
@@ -82,7 +84,7 @@ export async function generateFlashCards({
       { timeout: 15_000 },
     )
 
-    const generatedJsonString = response.data.choices[0]?.message?.content
+    generatedJsonString = response.data.choices[0]?.message?.content
 
     if (!generatedJsonString) {
       throw new Error('Não foi possível gerar as perguntas e respostas.')
@@ -103,7 +105,7 @@ export async function generateFlashCards({
     /**
      * Added to improve error tracking on log monitoring tools
      */
-    console.error(error)
+    console.error(error, generatedJsonString)
     throw error
   }
 }

From 944aac3b5bc4ac56343f425ee46e1ca5c62b4958 Mon Sep 17 00:00:00 2001
From: Emilio Schaedler Heinzmann <emiliosheinz@gmail.com>
Date: Mon, 13 Mar 2023 17:52:52 -0300
Subject: [PATCH 03/14] fix: :bug: fixes prompt ot be more accestive about the
 quantity

---
 src/utils/openai/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/utils/openai/index.ts b/src/utils/openai/index.ts
index 05aeb1f..34cacf3 100644
--- a/src/utils/openai/index.ts
+++ b/src/utils/openai/index.ts
@@ -68,10 +68,10 @@ export async function generateFlashCards({
     const charactersPerSentence = 65
 
     /** Build topics strings */
-    const joinedTopics = topics.map(({ title }) => title).join(', ')
+    const joinedTopics = topics.map(({ title }) => title).join(' ou ')
 
     /** Build prompt asking OpenAI to generate a csv string */
-    const prompt = `Levando em conta o contexto ${title}, gere um Array JSON com ${amountOfCards} perguntas e respostas curtas e diretas, de no máximo ${charactersPerSentence} caracteres, sobre ${joinedTopics}. [{question: "pergunta", answer: "resposta"}, ...]`
+    const prompt = `Levando em conta o contexto ${title}, gere um Array JSON de tamanho ${amountOfCards} com perguntas e respostas curtas e diretas, de no máximo ${charactersPerSentence} caracteres, sobre ${joinedTopics}. [{question: "pergunta", answer: "resposta"}, ...]`
 
     const response = await openai.createChatCompletion(
       {

From f3f0805a54594d3cf2324fde3dc34cb9bc706d74 Mon Sep 17 00:00:00 2001
From: Emilio Schaedler Heinzmann <emiliosheinz@gmail.com>
Date: Mon, 13 Mar 2023 17:57:38 -0300
Subject: [PATCH 04/14] refactor: :recycle: change open api timeouts

---
 src/utils/openai/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/utils/openai/index.ts b/src/utils/openai/index.ts
index 34cacf3..92e558d 100644
--- a/src/utils/openai/index.ts
+++ b/src/utils/openai/index.ts
@@ -23,7 +23,7 @@ const createEmbedding = (str: string) =>
       input: str.replace('\n', ' '),
     },
     {
-      timeout: 15_000,
+      timeout: 10_000,
     },
   )
 
@@ -81,7 +81,7 @@ export async function generateFlashCards({
         model: 'gpt-3.5-turbo',
         max_tokens: amountOfCards * charactersPerSentence,
       },
-      { timeout: 15_000 },
+      { timeout: 30_000 },
     )
 
     generatedJsonString = response.data.choices[0]?.message?.content

From 75a930a2f8629316f24de1d1cb042f4afeab544b Mon Sep 17 00:00:00 2001
From: Emilio Schaedler Heinzmann <emiliosheinz@gmail.com>
Date: Fri, 17 Mar 2023 10:44:57 -0300
Subject: [PATCH 05/14] refactor: :recycle: reduces open ai api timeout

---
 src/utils/openai/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/openai/index.ts b/src/utils/openai/index.ts
index 92e558d..aee6722 100644
--- a/src/utils/openai/index.ts
+++ b/src/utils/openai/index.ts
@@ -81,7 +81,7 @@ export async function generateFlashCards({
         model: 'gpt-3.5-turbo',
         max_tokens: amountOfCards * charactersPerSentence,
       },
-      { timeout: 30_000 },
+      { timeout: 10_000 },
     )
 
     generatedJsonString = response.data.choices[0]?.message?.content

From 9fcb6b3cdfa02338babb3437405c1d4951697cfb Mon Sep 17 00:00:00 2001
From: Emilio Schaedler Heinzmann <emiliosheinz@gmail.com>
Date: Fri, 17 Mar 2023 11:52:34 -0300
Subject: [PATCH 06/14] refactor: :recycle: increases ope api call timeout

---
 src/utils/openai/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/openai/index.ts b/src/utils/openai/index.ts
index aee6722..92e558d 100644
--- a/src/utils/openai/index.ts
+++ b/src/utils/openai/index.ts
@@ -81,7 +81,7 @@ export async function generateFlashCards({
         model: 'gpt-3.5-turbo',
         max_tokens: amountOfCards * charactersPerSentence,
       },
-      { timeout: 10_000 },
+      { timeout: 30_000 },
     )
 
     generatedJsonString = response.data.choices[0]?.message?.content

From 84eaa268c5660740b6e79b5a6afa8ef96318b075 Mon Sep 17 00:00:00 2001
From: Emilio Schaedler Heinzmann <emiliosheinz@gmail.com>
Date: Fri, 17 Mar 2023 15:41:25 -0300
Subject: [PATCH 07/14] feat: :sparkles: adds possiblity of having multiple
 right answers for a single card

---
 .../migration.sql                             |  9 +++++
 prisma/schema.prisma                          |  2 +-
 .../new-card/new-card-modal.component.tsx     |  5 +--
 .../text-area/text-area.component.tsx         | 26 +++++++++++----
 src/components/text-area/text-area.types.ts   |  1 +
 src/constants/index.ts                        |  1 +
 .../create-new-deck.context.tsx               |  5 ++-
 .../create/components/cards.component.tsx     |  4 +--
 src/server/api/routers/decks/decks.router.ts  | 13 ++++++--
 .../study-session/study-session.router.ts     | 14 ++++----
 src/utils/openai/index.ts                     | 33 +++++++++++++------
 src/utils/validators/card.ts                  | 15 +++++++--
 12 files changed, 95 insertions(+), 33 deletions(-)
 create mode 100644 prisma/migrations/20230317171159_adds_possiblity_of_multiple_answers_to_one_card/migration.sql

diff --git a/prisma/migrations/20230317171159_adds_possiblity_of_multiple_answers_to_one_card/migration.sql b/prisma/migrations/20230317171159_adds_possiblity_of_multiple_answers_to_one_card/migration.sql
new file mode 100644
index 0000000..7189663
--- /dev/null
+++ b/prisma/migrations/20230317171159_adds_possiblity_of_multiple_answers_to_one_card/migration.sql
@@ -0,0 +1,9 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `answer` on the `Card` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "Card" DROP COLUMN "answer",
+ADD COLUMN     "validAnswers" TEXT[];
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index da1da52..0ea0ac9 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -90,7 +90,7 @@ model Topic {
 model Card {
   id                   String                @id @default(cuid())
   question             String
-  answer               String
+  validAnswers         String[]
   deckId               String
   deck                 Deck                  @relation(fields: [deckId], references: [id], onDelete: Cascade)
   createdAt            DateTime              @default(now())
diff --git a/src/components/modal/new-card/new-card-modal.component.tsx b/src/components/modal/new-card/new-card-modal.component.tsx
index fa0a82d..e5a137a 100644
--- a/src/components/modal/new-card/new-card-modal.component.tsx
+++ b/src/components/modal/new-card/new-card-modal.component.tsx
@@ -52,8 +52,9 @@ export function NewCardModal(props: NewCardModalProps) {
         <TextArea
           id='answer'
           label='Resposta'
-          {...register('answer')}
-          error={formState.errors['answer']?.message as string}
+          {...register('validAnswers')}
+          error={formState.errors['validAnswers']?.message as string}
+          tooltip='Você pode adicionar mais de uma resposta válida separando-as por ponto e vírgula (;) sem nenhum tipo de espaço. Ex.: Resposta 1;Resposta 2;Resposta 3'
         />
         <div className='flex flex-row justify-end gap-5'>
           <Button type='button' variant='bad' onClick={close}>
diff --git a/src/components/text-area/text-area.component.tsx b/src/components/text-area/text-area.component.tsx
index 5566ca4..07fca30 100644
--- a/src/components/text-area/text-area.component.tsx
+++ b/src/components/text-area/text-area.component.tsx
@@ -2,11 +2,20 @@ import React from 'react'
 
 import { classNames } from '~/utils/css'
 
+import { Tooltip } from '../tooltip'
 import type { TextAreaProps } from './text-area.types'
 
 export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
   function TextArea(props, ref) {
-    const { label, error, id, disabled, rows = 5, ...otherProps } = props
+    const {
+      label,
+      error,
+      id,
+      disabled,
+      rows = 5,
+      tooltip,
+      ...otherProps
+    } = props
 
     const errorClassNames = error
       ? 'border-error-700 focus:border-error-700 focus:ring-error-700'
@@ -17,12 +26,15 @@ export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
         aria-disabled={disabled}
         className={classNames('w-full', disabled ? 'opacity-50' : '')}
       >
-        <label
-          htmlFor={id}
-          className='block text-sm font-medium capitalize text-primary-800'
-        >
-          {label}
-        </label>
+        <span className='flex'>
+          <label
+            htmlFor={id}
+            className='block text-sm font-medium capitalize text-primary-800'
+          >
+            {label}
+          </label>
+          {tooltip ? <Tooltip hint={tooltip} /> : null}
+        </span>
         <div className='mt-1 rounded-md shadow-sm'>
           <textarea
             id={id}
diff --git a/src/components/text-area/text-area.types.ts b/src/components/text-area/text-area.types.ts
index 0f8f413..932c76b 100644
--- a/src/components/text-area/text-area.types.ts
+++ b/src/components/text-area/text-area.types.ts
@@ -2,6 +2,7 @@ export type TextAreaProps = {
   error?: string
   label: string
   id: string
+  tooltip?: string
 } & Omit<
   React.DetailedHTMLProps<
     React.TextareaHTMLAttributes<HTMLTextAreaElement>,
diff --git a/src/constants/index.ts b/src/constants/index.ts
index aed920f..7fdd0ef 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -2,6 +2,7 @@ import { Visibility } from '@prisma/client'
 
 import type { Option } from '~/components/radio-group'
 
+export const MAX_VALID_ANSWERS_PER_CARD = 5
 export const MINIMUM_ACCEPTED_SIMILARITY = 0.9
 export const MAX_TOPICS_PER_DECK_AND_USER = 5
 export const ITEMS_PER_PAGE = 30
diff --git a/src/contexts/create-new-deck/create-new-deck.context.tsx b/src/contexts/create-new-deck/create-new-deck.context.tsx
index 2346e9c..dc9c954 100644
--- a/src/contexts/create-new-deck/create-new-deck.context.tsx
+++ b/src/contexts/create-new-deck/create-new-deck.context.tsx
@@ -92,7 +92,10 @@ export function CreateNewDeckContextProvider(
    */
   const [topics, setTopics] = useState<Array<TopicInput>>(deck?.topics || [])
   const [cards, setCards] = useState<Array<CardInput>>(
-    deck?.cards.map(card => card) || [],
+    (deck?.cards ?? []).map(card => ({
+      ...card,
+      validAnswers: card.validAnswers.join(';'),
+    })),
   )
   const [visibility, setVisibility] = useState(
     DECK_VISIBILITY_OPTIONS.find(option => option.value === deck?.visibility) ||
diff --git a/src/modules/decks/create/components/cards.component.tsx b/src/modules/decks/create/components/cards.component.tsx
index bba257d..e7113be 100644
--- a/src/modules/decks/create/components/cards.component.tsx
+++ b/src/modules/decks/create/components/cards.component.tsx
@@ -32,7 +32,7 @@ export const Cards = () => {
   const isCreatingNewCard = newCardModalState.cardIdx === undefined
 
   const modalFieldsValues = isCreatingNewCard
-    ? { answer: '', question: '' }
+    ? { validAnswers: '', question: '' }
     : cards[newCardModalState.cardIdx!]
 
   const handleNewCardFormSubmit = (values: CardFormInputValues) => {
@@ -83,7 +83,7 @@ export const Cards = () => {
           <Card
             isEditable
             isAiPowered={card.isAiPowered}
-            key={`${card.question}-${card.answer}`}
+            key={`${card.question}-${card.validAnswers}`}
             onDeletePress={() => deleteCard(idx)}
             onEditPress={() => {
               setNewCardModalState({ isOpen: true, cardIdx: idx })
diff --git a/src/server/api/routers/decks/decks.router.ts b/src/server/api/routers/decks/decks.router.ts
index f5bf734..98c9d34 100644
--- a/src/server/api/routers/decks/decks.router.ts
+++ b/src/server/api/routers/decks/decks.router.ts
@@ -28,7 +28,12 @@ export const decksRouter = createTRPCRouter({
               }
             }),
           },
-          cards: { create: cards },
+          cards: {
+            create: cards.map(card => ({
+              ...card,
+              validAnswers: card.validAnswers.split(';'),
+            })),
+          },
         },
       })
     }),
@@ -63,6 +68,7 @@ export const decksRouter = createTRPCRouter({
               delete: deletedCards?.map(({ id }) => ({ id })),
               create: newCards?.map(card => ({
                 ...card,
+                validAnswers: card.validAnswers.split(';'),
                 studySessionBoxCards: {
                   create: studySessionBoxes.map(box => ({
                     studySessionBoxId: box.id,
@@ -71,7 +77,10 @@ export const decksRouter = createTRPCRouter({
               })),
               update: editedCards?.map(({ id, ...card }) => ({
                 where: { id },
-                data: card,
+                data: {
+                  ...card,
+                  validAnswers: card.validAnswers.split(';'),
+                },
               })),
             },
             topics: {
diff --git a/src/server/api/routers/study-session/study-session.router.ts b/src/server/api/routers/study-session/study-session.router.ts
index 63ea13d..4a1bdbc 100644
--- a/src/server/api/routers/study-session/study-session.router.ts
+++ b/src/server/api/routers/study-session/study-session.router.ts
@@ -2,14 +2,14 @@ import { Visibility } from '@prisma/client'
 import { TRPCError } from '@trpc/server'
 import { z } from 'zod'
 
-import { MINIMUM_ACCEPTED_SIMILARITY, STUDY_SESSION_BOXES } from '~/constants'
+import { STUDY_SESSION_BOXES } from '~/constants'
 import {
   createTRPCRouter,
   protectedProcedure,
   publicProcedure,
 } from '~/server/api/trpc'
 import { addHours, differenceInHours } from '~/utils/date-time'
-import { verifyStringsSimilarity } from '~/utils/openai'
+import { verifyIfAnswerIsRight } from '~/utils/openai'
 
 export const studySessionRouter = createTRPCRouter({
   create: protectedProcedure
@@ -296,11 +296,13 @@ export const studySessionRouter = createTRPCRouter({
           data: { studySessionBoxId: firstStudySessionBox.id },
         })
 
-        return { isRight: false, answer: card.answer }
+        return { isRight: false, answer: card.validAnswers.join('; ') }
       }
 
-      const similarity = await verifyStringsSimilarity(card.answer, answer)
-      const isAnswerRight = similarity > MINIMUM_ACCEPTED_SIMILARITY
+      const isAnswerRight = await verifyIfAnswerIsRight(
+        answer,
+        card.validAnswers,
+      )
 
       let updateBoxCard
       const addNewAttempt = ctx.prisma.studySessionAttempt.create({
@@ -341,7 +343,7 @@ export const studySessionRouter = createTRPCRouter({
 
       await Promise.all([addNewAttempt, updateBoxCard])
 
-      return { isRight: isAnswerRight, answer: card.answer }
+      return { isRight: isAnswerRight, answer: card.validAnswers.join('; ') }
     }),
   finishReviewSession: protectedProcedure
     .input(
diff --git a/src/utils/openai/index.ts b/src/utils/openai/index.ts
index 92e558d..9ebf25e 100644
--- a/src/utils/openai/index.ts
+++ b/src/utils/openai/index.ts
@@ -4,6 +4,7 @@
 import calculateSimilarity from 'compute-cosine-similarity'
 import { Configuration, OpenAIApi } from 'openai'
 
+import { MINIMUM_ACCEPTED_SIMILARITY } from '~/constants'
 import type {
   CardInput,
   TopicInput,
@@ -34,22 +35,34 @@ const trimAndRemoveDoubleQuotes = (str: string) =>
  * Embed both strings with text-embedding-ada-002 and calculate their distance with cosine similarity
  * Reference: https://platform.openai.com/docs/guides/embeddings/limitations-risks
  */
-export async function verifyStringsSimilarity(str1: string, str2: string) {
-  const [firstStringResponse, secondStringResponse] = await Promise.all([
-    createEmbedding(str1),
-    createEmbedding(str2),
+export async function verifyIfAnswerIsRight(
+  actualAnswer: string,
+  validAnswers: Array<string>,
+) {
+  const [embedActualAnswer, ...validAnswersEmbeddings] = await Promise.all([
+    createEmbedding(actualAnswer),
+    ...validAnswers.map(answer => createEmbedding(answer)),
   ])
 
-  const firstResult = firstStringResponse.data.data[0]?.embedding
-  const secondResult = secondStringResponse.data.data[0]?.embedding
+  const actualAnswerResult = embedActualAnswer.data.data[0]?.embedding
+  const validAnswersResults = validAnswersEmbeddings
+    .map(({ data }) => data.data[0]?.embedding)
+    .filter(Boolean)
 
-  if (!firstResult || !secondResult) {
+  if (!actualAnswerResult || validAnswersResults.length === 0) {
     throw new Error('Could not calculate similarity. No results where found.')
   }
 
-  const similarity = calculateSimilarity(firstResult, secondResult)
+  const isRight = validAnswersResults.some(validAnswerResult => {
+    const similarity = calculateSimilarity(
+      actualAnswerResult,
+      validAnswerResult || [],
+    )
+
+    return similarity > MINIMUM_ACCEPTED_SIMILARITY
+  })
 
-  return similarity
+  return isRight
 }
 
 type GenerateFlashCardsParam = {
@@ -95,7 +108,7 @@ export async function generateFlashCards({
     const cards: Array<CardInput> = generatedJson.map(
       ({ question, answer }: { question: string; answer: string }) => ({
         question: trimAndRemoveDoubleQuotes(question),
-        answer: trimAndRemoveDoubleQuotes(answer),
+        validAnswers: trimAndRemoveDoubleQuotes(answer),
         isAiPowered: true,
       }),
     )
diff --git a/src/utils/validators/card.ts b/src/utils/validators/card.ts
index 313fd56..0510dcf 100644
--- a/src/utils/validators/card.ts
+++ b/src/utils/validators/card.ts
@@ -1,5 +1,7 @@
 import { z } from 'zod'
 
+import { MAX_VALID_ANSWERS_PER_CARD } from '~/constants'
+
 export const CardInputSchema = z.object({
   id: z.string().optional(),
   isAiPowered: z.boolean().optional(),
@@ -10,11 +12,20 @@ export const CardInputSchema = z.object({
     })
     .min(1, { message: 'A pergunta de um Card é obrigatória' })
     .max(250, { message: 'A pergunta não pode ter mais que 250 caracteres' }),
-  answer: z
+  validAnswers: z
     .string({
       required_error: 'A resposta de um Card é obrigatória',
       invalid_type_error: 'Resposta inválida',
     })
     .min(1, { message: 'A resposta de um Card é obrigatória' })
-    .max(250, { message: 'A resposta não pode ter mais que 250 caracteres' }),
+    .refine(
+      (answers: string) =>
+        answers.split(';').length <= MAX_VALID_ANSWERS_PER_CARD,
+      `Um Card não pode ter mais que ${10} respostas válidas`,
+    )
+    .refine(
+      (answers: string) =>
+        answers.split(';').every(answer => answer.length <= 250),
+      'Cada resposta não pode ter mais que 250 caracteres',
+    ),
 })

From 1ce3aacd8bc6530cc07f735e27817d4d6001070f Mon Sep 17 00:00:00 2001
From: Emilio Schaedler Heinzmann <emiliosheinz@gmail.com>
Date: Fri, 17 Mar 2023 17:04:30 -0300
Subject: [PATCH 08/14] feat: :sparkles: adds ReportAnswerValidationModal

---
 src/components/modal/index.ts                 |  2 +
 .../report-answer-validation.component.tsx    | 57 +++++++++++++++++++
 .../report-answer-validation.types.ts         |  5 ++
 src/pages/decks/review/[id].tsx               | 35 ++++++++++++
 4 files changed, 99 insertions(+)
 create mode 100644 src/components/modal/report-answer-validation/report-answer-validation.component.tsx
 create mode 100644 src/components/modal/report-answer-validation/report-answer-validation.types.ts

diff --git a/src/components/modal/index.ts b/src/components/modal/index.ts
index a71686b..8bc91ae 100644
--- a/src/components/modal/index.ts
+++ b/src/components/modal/index.ts
@@ -1,9 +1,11 @@
 import { BaseModal } from './base/base-modal.component'
 import { NewCardModal } from './new-card/new-card-modal.component'
 import { NewTopicModal } from './new-topic/new-topic-modal.component'
+import { ReportAnswerValidationModal } from './report-answer-validation/report-answer-validation.component'
 
 export const Modal = {
   Base: BaseModal,
   NewTopic: NewTopicModal,
   NewCard: NewCardModal,
+  ReportAnswerValidation: ReportAnswerValidationModal,
 }
diff --git a/src/components/modal/report-answer-validation/report-answer-validation.component.tsx b/src/components/modal/report-answer-validation/report-answer-validation.component.tsx
new file mode 100644
index 0000000..025f881
--- /dev/null
+++ b/src/components/modal/report-answer-validation/report-answer-validation.component.tsx
@@ -0,0 +1,57 @@
+import { useEffect, useMemo } from 'react'
+import { useForm } from 'react-hook-form'
+
+import { Button } from '~/components/button'
+import { TextArea } from '~/components/text-area'
+import { withoutPropagation } from '~/utils/forms'
+
+import { BaseModal } from '../base/base-modal.component'
+import type { ReportAnswerValidationModalProps } from './report-answer-validation.types'
+
+export function ReportAnswerValidationModal(
+  props: ReportAnswerValidationModalProps,
+) {
+  const { isOpen, setIsOpen, answer } = props
+
+  const { handleSubmit, reset, register } = useForm({
+    defaultValues: useMemo(() => ({ answer }), [answer]),
+  })
+
+  useEffect(() => {
+    reset({ answer })
+  }, [reset, answer])
+
+  const close = () => {
+    setIsOpen(false)
+    reset()
+  }
+
+  const handleSubmitWithoutPropagation = withoutPropagation(
+    handleSubmit(() => {
+      close()
+    }),
+  )
+
+  return (
+    <BaseModal isOpen={isOpen} setIsOpen={setIsOpen} title='Solicitar revisão'>
+      <span>
+        Caso você acredite que sua resposta deveria ter sido considerada
+        correta, é possível enviar uma solicitação de revisão para o criador do
+        Deck submetendo este formulário. Dessa forma, caso a solicitação seja
+        aceita, futuras respostas como a sua serão consideradas corretas.
+      </span>
+      <form
+        className='mt-5 flex flex-col'
+        onSubmit={handleSubmitWithoutPropagation}
+      >
+        <TextArea id='answer' label='Resposta' {...register('answer')} />
+        <div className='mt-2 flex flex-col justify-end gap-5 md:flex-row'>
+          <Button fullWidth type='button' variant='bad' onClick={close}>
+            Cancelar
+          </Button>
+          <Button fullWidth>Enviar Solicitação</Button>
+        </div>
+      </form>
+    </BaseModal>
+  )
+}
diff --git a/src/components/modal/report-answer-validation/report-answer-validation.types.ts b/src/components/modal/report-answer-validation/report-answer-validation.types.ts
new file mode 100644
index 0000000..ac4c29f
--- /dev/null
+++ b/src/components/modal/report-answer-validation/report-answer-validation.types.ts
@@ -0,0 +1,5 @@
+import type { BaseModalProps } from '../base/base-modal.types'
+
+export type ReportAnswerValidationModalProps = {
+  answer: string
+} & Pick<BaseModalProps, 'isOpen' | 'setIsOpen'>
diff --git a/src/pages/decks/review/[id].tsx b/src/pages/decks/review/[id].tsx
index 7693432..0d87609 100644
--- a/src/pages/decks/review/[id].tsx
+++ b/src/pages/decks/review/[id].tsx
@@ -1,3 +1,6 @@
+import { useState } from 'react'
+
+import { HandThumbDownIcon } from '@heroicons/react/24/outline'
 import type { GetServerSideProps, InferGetServerSidePropsType } from 'next'
 import { type NextPage } from 'next'
 import Head from 'next/head'
@@ -7,6 +10,7 @@ import { Button } from '~/components/button'
 import { Card } from '~/components/card'
 import { Feedback } from '~/components/feedback'
 import { Loader } from '~/components/loader'
+import { Modal } from '~/components/modal'
 import { TextArea } from '~/components/text-area'
 import { Tooltip } from '~/components/tooltip'
 import { useDeckReview } from '~/modules/decks/review/hooks/use-deck-review.hook'
@@ -34,6 +38,10 @@ const ReviewDeckPage: WithAuthentication<
   const { deckId } = props
 
   const router = useRouter()
+  const [
+    isReportAnswerValidationModalOpen,
+    setIsReportAnswerValidationModalOpen,
+  ] = useState(false)
 
   const {
     form,
@@ -52,6 +60,7 @@ const ReviewDeckPage: WithAuthentication<
 
   const isLoadingAnswer = cardAnswerStage === 'loading'
   const shouldDisableButtonsAndInputs = isLoadingAnswer || !!answerResult
+  const [userLastAnswer] = form.watch(['answer'])
 
   const okButton = {
     buttonLabel: 'Ok',
@@ -117,6 +126,20 @@ const ReviewDeckPage: WithAuthentication<
     )
   }
 
+  const renderReportButton = () => {
+    if (answerResult?.isRight || !userLastAnswer) return null
+
+    return (
+      <button
+        className='absolute bottom-0 right-0 p-5'
+        type='button'
+        onClick={() => setIsReportAnswerValidationModalOpen(true)}
+      >
+        <HandThumbDownIcon className='h-8 w-8' />
+      </button>
+    )
+  }
+
   const renderContent = () => {
     if (isLoadingCards) {
       return (
@@ -188,6 +211,7 @@ const ReviewDeckPage: WithAuthentication<
                 <span className='text-base md:text-2xl'>
                   {answerResult?.answer || 'Resposta não foi encontrada'}
                 </span>
+                {renderReportButton()}
               </Card>
             </div>
           </div>
@@ -209,6 +233,16 @@ const ReviewDeckPage: WithAuthentication<
     )
   }
 
+  const renderModal = () => {
+    return (
+      <Modal.ReportAnswerValidation
+        isOpen={isReportAnswerValidationModalOpen}
+        setIsOpen={setIsReportAnswerValidationModalOpen}
+        answer={userLastAnswer}
+      />
+    )
+  }
+
   return (
     <>
       <Head>
@@ -218,6 +252,7 @@ const ReviewDeckPage: WithAuthentication<
       <div className='mx-auto flex w-full max-w-3xl justify-center'>
         {renderContent()}
       </div>
+      {renderModal()}
     </>
   )
 }

From 903f5541feab5c8306a0a43643d07c0f215b7add Mon Sep 17 00:00:00 2001
From: Emilio Schaedler Heinzmann <emiliosheinz@gmail.com>
Date: Fri, 17 Mar 2023 17:44:38 -0300
Subject: [PATCH 09/14] feat: :sparkles: adds answerValidationReports creating
 during deck review flow

---
 .../migration.sql                             | 17 ++++++
 prisma/schema.prisma                          | 55 ++++++++++++-------
 .../report-answer-validation.component.tsx    | 17 +++++-
 .../report-answer-validation.types.ts         |  1 +
 .../review/hooks/use-deck-review.hook.tsx     |  4 +-
 src/pages/decks/review/[id].tsx               |  1 +
 src/server/api/root.ts                        |  2 +
 .../answer-validation-reports.router.ts       | 27 +++++++++
 .../answer-validation-reports/index.ts        |  1 +
 .../study-session/study-session.router.ts     |  5 +-
 10 files changed, 103 insertions(+), 27 deletions(-)
 create mode 100644 prisma/migrations/20230317201422_adds_answer_validation_report_model/migration.sql
 create mode 100644 src/server/api/routers/answer-validation-reports/answer-validation-reports.router.ts
 create mode 100644 src/server/api/routers/answer-validation-reports/index.ts

diff --git a/prisma/migrations/20230317201422_adds_answer_validation_report_model/migration.sql b/prisma/migrations/20230317201422_adds_answer_validation_report_model/migration.sql
new file mode 100644
index 0000000..8496c51
--- /dev/null
+++ b/prisma/migrations/20230317201422_adds_answer_validation_report_model/migration.sql
@@ -0,0 +1,17 @@
+-- CreateTable
+CREATE TABLE "AnswerValidationReport" (
+    "id" TEXT NOT NULL,
+    "cardId" TEXT NOT NULL,
+    "userId" TEXT,
+    "answer" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "AnswerValidationReport_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "AnswerValidationReport" ADD CONSTRAINT "AnswerValidationReport_cardId_fkey" FOREIGN KEY ("cardId") REFERENCES "Card"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "AnswerValidationReport" ADD CONSTRAINT "AnswerValidationReport_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE SET NULL ON UPDATE CASCADE;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 0ea0ac9..6fe7869 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -34,18 +34,19 @@ model Session {
 }
 
 model User {
-  id            String         @id @default(cuid())
-  name          String?
-  email         String?        @unique
-  emailVerified DateTime?
-  image         String?
-  accounts      Account[]
-  sessions      Session[]
-  decks         Deck[]
-  studySessions StudySession[]
-  favorites     Favorite[]
-  description   String?
-  topics        Topic[]
+  id                      String                   @id @default(cuid())
+  name                    String?
+  email                   String?                  @unique
+  emailVerified           DateTime?
+  image                   String?
+  accounts                Account[]
+  sessions                Session[]
+  decks                   Deck[]
+  studySessions           StudySession[]
+  favorites               Favorite[]
+  description             String?
+  topics                  Topic[]
+  answerValidationReports AnswerValidationReport[]
 }
 
 model VerificationToken {
@@ -88,15 +89,27 @@ model Topic {
 }
 
 model Card {
-  id                   String                @id @default(cuid())
-  question             String
-  validAnswers         String[]
-  deckId               String
-  deck                 Deck                  @relation(fields: [deckId], references: [id], onDelete: Cascade)
-  createdAt            DateTime              @default(now())
-  updatedAt            DateTime              @default(now()) @updatedAt
-  studySessionBoxCards StudySessionBoxCard[]
-  isAiPowered          Boolean               @default(false)
+  id                      String                   @id @default(cuid())
+  question                String
+  validAnswers            String[]
+  deckId                  String
+  deck                    Deck                     @relation(fields: [deckId], references: [id], onDelete: Cascade)
+  createdAt               DateTime                 @default(now())
+  updatedAt               DateTime                 @default(now()) @updatedAt
+  studySessionBoxCards    StudySessionBoxCard[]
+  isAiPowered             Boolean                  @default(false)
+  answerValidationReports AnswerValidationReport[]
+}
+
+model AnswerValidationReport {
+  id        String   @id @default(cuid())
+  cardId    String
+  card      Card     @relation(fields: [cardId], references: [id], onDelete: Cascade)
+  userId    String?
+  user      User?    @relation(fields: [userId], references: [id], onDelete: SetNull)
+  answer    String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @default(now()) @updatedAt
 }
 
 model StudySession {
diff --git a/src/components/modal/report-answer-validation/report-answer-validation.component.tsx b/src/components/modal/report-answer-validation/report-answer-validation.component.tsx
index 025f881..b01bea9 100644
--- a/src/components/modal/report-answer-validation/report-answer-validation.component.tsx
+++ b/src/components/modal/report-answer-validation/report-answer-validation.component.tsx
@@ -3,7 +3,9 @@ import { useForm } from 'react-hook-form'
 
 import { Button } from '~/components/button'
 import { TextArea } from '~/components/text-area'
+import { api } from '~/utils/api'
 import { withoutPropagation } from '~/utils/forms'
+import { notify } from '~/utils/toast'
 
 import { BaseModal } from '../base/base-modal.component'
 import type { ReportAnswerValidationModalProps } from './report-answer-validation.types'
@@ -11,7 +13,10 @@ import type { ReportAnswerValidationModalProps } from './report-answer-validatio
 export function ReportAnswerValidationModal(
   props: ReportAnswerValidationModalProps,
 ) {
-  const { isOpen, setIsOpen, answer } = props
+  const { isOpen, setIsOpen, answer, cardId } = props
+
+  const { mutate: sendReport } =
+    api.answerValidationReports.reportAnswerValidation.useMutation()
 
   const { handleSubmit, reset, register } = useForm({
     defaultValues: useMemo(() => ({ answer }), [answer]),
@@ -27,8 +32,16 @@ export function ReportAnswerValidationModal(
   }
 
   const handleSubmitWithoutPropagation = withoutPropagation(
-    handleSubmit(() => {
+    handleSubmit(values => {
+      sendReport({
+        ...values,
+        cardId,
+      })
       close()
+
+      setTimeout(() => {
+        notify.success('Solicitação enviada com sucesso!')
+      }, 500)
     }),
   )
 
diff --git a/src/components/modal/report-answer-validation/report-answer-validation.types.ts b/src/components/modal/report-answer-validation/report-answer-validation.types.ts
index ac4c29f..d4be1f8 100644
--- a/src/components/modal/report-answer-validation/report-answer-validation.types.ts
+++ b/src/components/modal/report-answer-validation/report-answer-validation.types.ts
@@ -2,4 +2,5 @@ import type { BaseModalProps } from '../base/base-modal.types'
 
 export type ReportAnswerValidationModalProps = {
   answer: string
+  cardId: string
 } & Pick<BaseModalProps, 'isOpen' | 'setIsOpen'>
diff --git a/src/modules/decks/review/hooks/use-deck-review.hook.tsx b/src/modules/decks/review/hooks/use-deck-review.hook.tsx
index 966fd08..a85e48a 100644
--- a/src/modules/decks/review/hooks/use-deck-review.hook.tsx
+++ b/src/modules/decks/review/hooks/use-deck-review.hook.tsx
@@ -103,11 +103,11 @@ export function useDeckReview(deckId: string) {
 
   const submitCardAnswer = async (params: { answer?: string }) => {
     try {
-      if (!currentCard?.id) throw new Error('Card not found')
+      if (!currentCard?.boxCardId) throw new Error('Card not found')
 
       setCardAnswerStage('loading')
       await answer({
-        boxCardId: currentCard.id,
+        boxCardId: currentCard.boxCardId,
         answer: params.answer,
       })
       setCardAnswerStage('answered')
diff --git a/src/pages/decks/review/[id].tsx b/src/pages/decks/review/[id].tsx
index 0d87609..c60946f 100644
--- a/src/pages/decks/review/[id].tsx
+++ b/src/pages/decks/review/[id].tsx
@@ -239,6 +239,7 @@ const ReviewDeckPage: WithAuthentication<
         isOpen={isReportAnswerValidationModalOpen}
         setIsOpen={setIsReportAnswerValidationModalOpen}
         answer={userLastAnswer}
+        cardId={currentCard?.id ?? ''}
       />
     )
   }
diff --git a/src/server/api/root.ts b/src/server/api/root.ts
index a3b3a85..62fd334 100644
--- a/src/server/api/root.ts
+++ b/src/server/api/root.ts
@@ -1,3 +1,4 @@
+import { answerValidationReportsRouter } from './routers/answer-validation-reports'
 import { cardsRouter } from './routers/cards'
 import { decksRouter } from './routers/decks'
 import { filesRouter } from './routers/files'
@@ -16,6 +17,7 @@ export const appRouter = createTRPCRouter({
   studySession: studySessionRouter,
   user: userRouter,
   cards: cardsRouter,
+  answerValidationReports: answerValidationReportsRouter,
 })
 
 export type AppRouter = typeof appRouter
diff --git a/src/server/api/routers/answer-validation-reports/answer-validation-reports.router.ts b/src/server/api/routers/answer-validation-reports/answer-validation-reports.router.ts
new file mode 100644
index 0000000..a2801b0
--- /dev/null
+++ b/src/server/api/routers/answer-validation-reports/answer-validation-reports.router.ts
@@ -0,0 +1,27 @@
+import { z } from 'zod'
+
+import { createTRPCRouter, protectedProcedure } from '~/server/api/trpc'
+
+export const answerValidationReportsRouter = createTRPCRouter({
+  reportAnswerValidation: protectedProcedure
+    .input(
+      z.object({
+        answer: z.string().min(1),
+        cardId: z.string().min(1),
+      }),
+    )
+    .mutation(({ input: { answer, cardId }, ctx }) => {
+      /** TODO emiliosheinz: Add more validations such as:
+       * - Check if the user has a study session withing the card's deck
+       * - Check if the user has already reported the answer
+       * ...
+       */
+      return ctx.prisma.answerValidationReport.create({
+        data: {
+          answer,
+          cardId,
+          userId: ctx.session.user.id,
+        },
+      })
+    }),
+})
diff --git a/src/server/api/routers/answer-validation-reports/index.ts b/src/server/api/routers/answer-validation-reports/index.ts
new file mode 100644
index 0000000..a6dc75d
--- /dev/null
+++ b/src/server/api/routers/answer-validation-reports/index.ts
@@ -0,0 +1 @@
+export { answerValidationReportsRouter } from './answer-validation-reports.router'
diff --git a/src/server/api/routers/study-session/study-session.router.ts b/src/server/api/routers/study-session/study-session.router.ts
index 4a1bdbc..e292ed7 100644
--- a/src/server/api/routers/study-session/study-session.router.ts
+++ b/src/server/api/routers/study-session/study-session.router.ts
@@ -163,7 +163,7 @@ export const studySessionRouter = createTRPCRouter({
                 select: {
                   id: true,
                   card: {
-                    select: { question: true },
+                    select: { question: true, id: true },
                   },
                   studySessionAttempts: {
                     orderBy: { createdAt: 'desc' },
@@ -223,7 +223,8 @@ export const studySessionRouter = createTRPCRouter({
                 return !lastAttempt || !lastReview || lastAttempt < lastReview
               })
               .map(boxCard => ({
-                id: boxCard.id,
+                id: boxCard.card.id,
+                boxCardId: boxCard.id,
                 question: boxCard.card.question,
               })),
           }),

From 39cd5c2e456537da29661dd022416f616a166c22 Mon Sep 17 00:00:00 2001
From: Emilio Schaedler Heinzmann <emiliosheinz@gmail.com>
Date: Sun, 19 Mar 2023 11:24:47 -0300
Subject: [PATCH 10/14] feat: :sparkles: adds new tailwind collors

---
 tailwind.config.cjs | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index a7c5522..fa52209 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -20,11 +20,13 @@ module.exports = {
         700: '#B91C1C',
         500: '#ef4444',
         300: '#FCA5A5',
+        100: '#fee2e2',
         50: '#fef2f2',
       },
       success: {
         700: '#15803D',
         300: '#86EFAC',
+        100: '#dcfce7',
       },
       warning: {
         500: '#EAB308',

From 82e000e67e697df8089eaf59d1377c9e8aab0b24 Mon Sep 17 00:00:00 2001
From: Emilio Schaedler Heinzmann <emiliosheinz@gmail.com>
Date: Sun, 19 Mar 2023 11:25:14 -0300
Subject: [PATCH 11/14] feat: :card_file_box: adds AnswerValidationReportStatus
 field to database

---
 .../migration.sql                               |  5 +++++
 prisma/schema.prisma                            | 17 ++++++++++++-----
 2 files changed, 17 insertions(+), 5 deletions(-)
 create mode 100644 prisma/migrations/20230318184925_adds_answer_validation_status_field/migration.sql

diff --git a/prisma/migrations/20230318184925_adds_answer_validation_status_field/migration.sql b/prisma/migrations/20230318184925_adds_answer_validation_status_field/migration.sql
new file mode 100644
index 0000000..4ddaceb
--- /dev/null
+++ b/prisma/migrations/20230318184925_adds_answer_validation_status_field/migration.sql
@@ -0,0 +1,5 @@
+-- CreateEnum
+CREATE TYPE "AnswerValidationReportStatus" AS ENUM ('Pending', 'Accepted', 'Rejected');
+
+-- AlterTable
+ALTER TABLE "AnswerValidationReport" ADD COLUMN     "status" "AnswerValidationReportStatus" NOT NULL DEFAULT 'Pending';
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 6fe7869..e03310a 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -63,6 +63,12 @@ enum Visibility {
   WithLink
 }
 
+enum AnswerValidationReportStatus {
+  Pending
+  Accepted
+  Rejected
+}
+
 model Deck {
   id            String         @id @default(cuid())
   title         String
@@ -102,14 +108,15 @@ model Card {
 }
 
 model AnswerValidationReport {
-  id        String   @id @default(cuid())
+  id        String                       @id @default(cuid())
   cardId    String
-  card      Card     @relation(fields: [cardId], references: [id], onDelete: Cascade)
+  card      Card                         @relation(fields: [cardId], references: [id], onDelete: Cascade)
   userId    String?
-  user      User?    @relation(fields: [userId], references: [id], onDelete: SetNull)
+  user      User?                        @relation(fields: [userId], references: [id], onDelete: SetNull)
   answer    String
-  createdAt DateTime @default(now())
-  updatedAt DateTime @default(now()) @updatedAt
+  createdAt DateTime                     @default(now())
+  updatedAt DateTime                     @default(now()) @updatedAt
+  status    AnswerValidationReportStatus @default(Pending)
 }
 
 model StudySession {

From 72325c12d3f48501b9c235134e8eae7fcdaac498 Mon Sep 17 00:00:00 2001
From: Emilio Schaedler Heinzmann <emiliosheinz@gmail.com>
Date: Sun, 19 Mar 2023 11:30:18 -0300
Subject: [PATCH 12/14] feat: :sparkles: adds answer validation reports route

---
 .../answer-validation-report-item.tsx         | 124 +++++++++++++++
 src/pages/decks/reports/[id].tsx              | 150 ++++++++++++++++++
 .../answer-validation-reports.router.ts       | 111 +++++++++++++
 3 files changed, 385 insertions(+)
 create mode 100644 src/modules/decks/reports/components/answer-validation-report-item.tsx
 create mode 100644 src/pages/decks/reports/[id].tsx

diff --git a/src/modules/decks/reports/components/answer-validation-report-item.tsx b/src/modules/decks/reports/components/answer-validation-report-item.tsx
new file mode 100644
index 0000000..59af0a1
--- /dev/null
+++ b/src/modules/decks/reports/components/answer-validation-report-item.tsx
@@ -0,0 +1,124 @@
+import { CheckIcon, XMarkIcon } from '@heroicons/react/24/outline'
+import type { AnswerValidationReport } from '@prisma/client'
+import { AnswerValidationReportStatus } from '@prisma/client'
+
+import { api } from '~/utils/api'
+import { classNames } from '~/utils/css'
+import { notify } from '~/utils/toast'
+
+type UpdateAnswerValidationReportStatusParams = {
+  status: AnswerValidationReportStatus
+}
+
+type AnswerValidationReportItemProps = {
+  report: AnswerValidationReport
+  deckId: string
+}
+
+const updateSuccessMessages = {
+  [AnswerValidationReportStatus.Accepted]:
+    'Resposta adicionada a lista de respostas válidas com sucesso',
+  [AnswerValidationReportStatus.Rejected]: 'Resposta recusada com sucesso',
+}
+
+export function AnswerValidationReportItem(
+  props: AnswerValidationReportItemProps,
+) {
+  const { report, deckId } = props
+
+  const apiContext = api.useContext()
+
+  const { mutate: updateStatus, isLoading } =
+    api.answerValidationReports.updateAnswerValidationReportStatus.useMutation({
+      onSuccess(_, { status }) {
+        const messageKey = status as keyof typeof updateSuccessMessages
+        const successMessage = updateSuccessMessages[messageKey]
+
+        if (successMessage) {
+          notify.success(successMessage)
+        }
+
+        apiContext.answerValidationReports.getCardsWithAnswerValidationReports.setData(
+          { deckId },
+          data => {
+            if (!data) return data
+
+            return {
+              ...data,
+              cards: data.cards.map(card => {
+                if (card.id !== report.cardId) return card
+
+                return {
+                  ...card,
+                  answerValidationReports: card.answerValidationReports.filter(
+                    ({ id }) => id !== report.id,
+                  ),
+                }
+              }),
+            }
+          },
+        )
+      },
+      onError(error) {
+        notify.error(error.message || 'Erro ao atualizar status da resposta')
+      },
+    })
+
+  const updateAnswerValidationStatus = (
+    params: UpdateAnswerValidationReportStatusParams,
+  ) => {
+    const { status } = params
+
+    updateStatus({ answerValidationReportId: report.id, status })
+  }
+
+  return (
+    <div className={classNames(isLoading ? 'animate-pulse' : '')}>
+      <div
+        key={report.id}
+        className={classNames(
+          'flex items-center justify-between py-3',
+          isLoading ? 'opacity-50' : '',
+        )}
+      >
+        <span>{report.answer}</span>
+        <div className='flex gap-2'>
+          <button
+            type='button'
+            disabled={isLoading}
+            className={classNames(
+              'rounded-md p-2 text-primary-900',
+              isLoading
+                ? 'cursor-default hover:bg-none hover:text-primary-900'
+                : 'hover:bg-success-100 hover:text-success-700',
+            )}
+            onClick={() => {
+              updateAnswerValidationStatus({
+                status: AnswerValidationReportStatus.Accepted,
+              })
+            }}
+          >
+            <CheckIcon className='h-5 w-5' />
+          </button>
+          <button
+            type='button'
+            disabled={isLoading}
+            className={classNames(
+              'rounded-md p-2 text-primary-900 ',
+              isLoading
+                ? 'cursor-default hover:bg-none hover:text-primary-900'
+                : 'hover:bg-error-100 hover:text-error-700',
+            )}
+            onClick={() => {
+              updateAnswerValidationStatus({
+                status: AnswerValidationReportStatus.Rejected,
+              })
+            }}
+          >
+            <XMarkIcon className='h-5 w-5' />
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/pages/decks/reports/[id].tsx b/src/pages/decks/reports/[id].tsx
new file mode 100644
index 0000000..a4f5de1
--- /dev/null
+++ b/src/pages/decks/reports/[id].tsx
@@ -0,0 +1,150 @@
+import { Disclosure } from '@headlessui/react'
+import { ChevronUpIcon } from '@heroicons/react/24/solid'
+import type { GetServerSideProps, InferGetServerSidePropsType } from 'next'
+import { type NextPage } from 'next'
+import Head from 'next/head'
+
+import { Feedback } from '~/components/feedback'
+import { AnswerValidationReportItem } from '~/modules/decks/reports/components/answer-validation-report-item'
+import { getServerAuthSession } from '~/server/common/auth'
+import { prisma } from '~/server/common/db'
+import type { WithAuthentication } from '~/types/auth'
+import { api } from '~/utils/api'
+import { classNames } from '~/utils/css'
+
+export const getServerSideProps: GetServerSideProps<{
+  deckId?: string
+}> = async context => {
+  const deckId = context.params?.id as string
+
+  if (!deckId) return { notFound: true }
+
+  const session = await getServerAuthSession(context)
+
+  if (!session?.user) return { props: {} }
+
+  const deck = await prisma.deck.findFirst({
+    where: { id: deckId, ownerId: session.user.id },
+  })
+
+  if (!deck) {
+    return { notFound: true }
+  }
+
+  return {
+    props: {
+      deckId,
+    },
+  }
+}
+
+const ReviewDeckPage: WithAuthentication<
+  NextPage<InferGetServerSidePropsType<typeof getServerSideProps>>
+> = props => {
+  const { deckId } = props
+
+  const {
+    isLoading,
+    data: deck,
+    isError,
+  } = api.answerValidationReports.getCardsWithAnswerValidationReports.useQuery(
+    { deckId: deckId! },
+    { enabled: !!deckId },
+  )
+
+  const renderCards = () => {
+    const visibleCards = deck?.cards.filter(
+      card => card.answerValidationReports.length > 0,
+    )
+
+    if (!visibleCards?.length) {
+      return (
+        <Feedback
+          shouldHideButton
+          title='Sem reports!'
+          subtitle='Parece que o seu Deck não tem nenhum report pendente. Volte mais tarde.'
+        />
+      )
+    }
+
+    return visibleCards.map(card => (
+      <Disclosure key={card.question}>
+        {({ open }) => (
+          <>
+            <Disclosure.Button className='my-2 flex w-full items-center justify-between rounded-md bg-primary-800 px-5 py-4 text-left text-base font-medium text-primary-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-opacity-75'>
+              <span className='flex flex-1'>{card.question}</span>
+              <ChevronUpIcon
+                className={classNames(
+                  'flex h-5 w-5 text-primary-50',
+                  open ? 'rotate-180 transform' : '',
+                )}
+              />
+            </Disclosure.Button>
+            <Disclosure.Panel className='text-gray-500 flex flex-col justify-center gap-2 divide-y divide-primary-200 px-4 pb-2 text-sm'>
+              {card.answerValidationReports.map(report => (
+                <AnswerValidationReportItem
+                  key={report.id}
+                  report={report}
+                  deckId={deckId!}
+                />
+              ))}
+            </Disclosure.Panel>
+          </>
+        )}
+      </Disclosure>
+    ))
+  }
+
+  const renderContent = () => {
+    if (isLoading) {
+      return (
+        <>
+          {Array.from({ length: 5 }).map((_, idx) => (
+            <div
+              className='my-3 h-12 w-full animate-pulse rounded-md bg-primary-200'
+              key={idx}
+            />
+          ))}
+        </>
+      )
+    }
+
+    if (isError) {
+      return (
+        <Feedback
+          shouldHideButton
+          title='Erro inesperado!'
+          subtitle='Houve um erro inesperado ao buscar os reports do seu Deck. Tente novamente mais tarde'
+        />
+      )
+    }
+
+    return (
+      <>
+        <h1 className='mb-4 text-2xl font-bold text-primary-900'>
+          Solicitações
+        </h1>
+        <p className='mb-5 max-w-2xl'>
+          Aqui você pode visualizar todas as solicitações de revisão das
+          respostas dos cards do seu Deck. Atenção: Ao aceitar uma solicitação
+          ela passará a ser considerada como uma resposta correta para aquela
+          pergunta. OBS: Cada pergunta pode ter no máximo 5 respostas corretas.
+        </p>
+        {renderCards()}
+      </>
+    )
+  }
+
+  return (
+    <>
+      <Head>
+        <title>Reports</title>
+      </Head>
+      <div className='w-full'>{renderContent()}</div>
+    </>
+  )
+}
+
+ReviewDeckPage.requiresAuthentication = true
+
+export default ReviewDeckPage
diff --git a/src/server/api/routers/answer-validation-reports/answer-validation-reports.router.ts b/src/server/api/routers/answer-validation-reports/answer-validation-reports.router.ts
index a2801b0..b1d2647 100644
--- a/src/server/api/routers/answer-validation-reports/answer-validation-reports.router.ts
+++ b/src/server/api/routers/answer-validation-reports/answer-validation-reports.router.ts
@@ -1,5 +1,8 @@
+import { AnswerValidationReportStatus } from '@prisma/client'
+import { TRPCError } from '@trpc/server'
 import { z } from 'zod'
 
+import { MAX_VALID_ANSWERS_PER_CARD } from '~/constants'
 import { createTRPCRouter, protectedProcedure } from '~/server/api/trpc'
 
 export const answerValidationReportsRouter = createTRPCRouter({
@@ -24,4 +27,112 @@ export const answerValidationReportsRouter = createTRPCRouter({
         },
       })
     }),
+  getCardsWithAnswerValidationReports: protectedProcedure
+    .input(z.object({ deckId: z.string().min(1) }))
+    .query(async ({ input: { deckId }, ctx }) => {
+      const deck = await ctx.prisma.deck.findFirst({
+        where: { id: deckId, ownerId: ctx.session.user.id },
+        select: {
+          title: true,
+          id: true,
+          cards: {
+            where: {
+              answerValidationReports: {
+                some: {
+                  status: AnswerValidationReportStatus.Pending,
+                },
+              },
+            },
+            select: {
+              id: true,
+              question: true,
+              answerValidationReports: {
+                where: { status: AnswerValidationReportStatus.Pending },
+                orderBy: { createdAt: 'asc' },
+              },
+            },
+          },
+        },
+      })
+
+      if (!deck) {
+        throw new TRPCError({
+          code: 'NOT_FOUND',
+          message: 'Deck não foi encontrado',
+        })
+      }
+
+      return deck
+    }),
+  updateAnswerValidationReportStatus: protectedProcedure
+    .input(
+      z.object({
+        answerValidationReportId: z.string().min(1),
+        status: z.nativeEnum(AnswerValidationReportStatus),
+      }),
+    )
+    .mutation(async ({ input: { answerValidationReportId, status }, ctx }) => {
+      await new Promise(r => setTimeout(r, 3000))
+      const answerValidationReport =
+        await ctx.prisma.answerValidationReport.findFirst({
+          where: { id: answerValidationReportId },
+        })
+
+      if (!answerValidationReport) {
+        throw new TRPCError({
+          code: 'NOT_FOUND',
+          message: 'Report não foi encontrado',
+        })
+      }
+
+      if (
+        answerValidationReport.status !== AnswerValidationReportStatus.Pending
+      ) {
+        throw new TRPCError({
+          code: 'BAD_REQUEST',
+          message: 'Report já foi aceito ou recusado',
+        })
+      }
+
+      const updateReport = () =>
+        ctx.prisma.answerValidationReport.update({
+          where: { id: answerValidationReportId },
+          data: { status },
+        })
+
+      if (status === AnswerValidationReportStatus.Accepted) {
+        const card = await ctx.prisma.card.findFirst({
+          where: { id: answerValidationReport.cardId },
+        })
+
+        if (!card) {
+          throw new TRPCError({
+            code: 'NOT_FOUND',
+            message: 'Card não foi encontrado',
+          })
+        }
+
+        if (card.validAnswers.length > MAX_VALID_ANSWERS_PER_CARD) {
+          throw new TRPCError({
+            code: 'BAD_REQUEST',
+            message: `Card já possui ${MAX_VALID_ANSWERS_PER_CARD} respostas válidas. Vá até o Deck e remova uma resposta válida antes de adicionar uma nova.`,
+          })
+        }
+
+        const updateCard = () =>
+          ctx.prisma.card.update({
+            where: { id: card.id },
+            data: {
+              validAnswers: [
+                ...card.validAnswers,
+                answerValidationReport.answer,
+              ],
+            },
+          })
+
+        await Promise.all([updateReport(), updateCard()])
+      } else {
+        await updateReport()
+      }
+    }),
 })

From 2ed8350c194936ca89ab822c17ef8dde124c8ac6 Mon Sep 17 00:00:00 2001
From: Emilio Schaedler Heinzmann <emiliosheinz@gmail.com>
Date: Sun, 19 Mar 2023 13:31:39 -0300
Subject: [PATCH 13/14] feat: :sparkles: adds decks pending answer validations
 reports card

---
 ...nswer-validation-report-card.component.tsx | 67 +++++++++++++++++++
 ...swer-validation-report-item.component.tsx} |  3 +
 src/pages/decks/[id].tsx                      | 13 ++++
 src/pages/decks/reports/[id].tsx              |  2 +-
 .../answer-validation-reports.router.ts       | 13 +++-
 src/utils/navigation/index.ts                 |  1 +
 6 files changed, 97 insertions(+), 2 deletions(-)
 create mode 100644 src/modules/decks/components/answer-validation-report-card.component.tsx
 rename src/modules/decks/reports/components/{answer-validation-report-item.tsx => answer-validation-report-item.component.tsx} (96%)

diff --git a/src/modules/decks/components/answer-validation-report-card.component.tsx b/src/modules/decks/components/answer-validation-report-card.component.tsx
new file mode 100644
index 0000000..b93636d
--- /dev/null
+++ b/src/modules/decks/components/answer-validation-report-card.component.tsx
@@ -0,0 +1,67 @@
+import { BoltIcon } from '@heroicons/react/24/outline'
+import { useRouter } from 'next/router'
+
+import { Button } from '~/components/button'
+import { api } from '~/utils/api'
+import { routes } from '~/utils/navigation'
+
+type AnswerValidationReportsCardProps = {
+  deckId: string
+}
+
+export function AnswerValidationReportsCard(
+  props: AnswerValidationReportsCardProps,
+) {
+  const { deckId } = props
+
+  const router = useRouter()
+
+  const {
+    isError,
+    isLoading,
+    data: hasDeckPendingAnswerValidationReports,
+  } = api.answerValidationReports.hasDeckPendingAnswerValidationReports.useQuery(
+    { deckId },
+  )
+
+  if (isLoading) {
+    return (
+      <div className='flex animate-pulse rounded-md bg-primary-200 p-20 sm:p-16'>
+        <span className='sr-only'>Loading...</span>
+      </div>
+    )
+  }
+
+  if (isError || !hasDeckPendingAnswerValidationReports) return null
+
+  const goToAnswerValidationReports = () => {
+    router.push(routes.answerValidationReports(deckId))
+  }
+
+  return (
+    <div className='relative flex flex-col gap-5 rounded-md bg-primary-50 p-5 shadow-md shadow-primary-200 ring-1 ring-primary-900 sm:flex-row'>
+      <div className='flex flex-1 items-center gap-5'>
+        <BoltIcon className='h-16 w-16 text-primary-900' />
+        <div className='flex flex-col text-primary-900'>
+          <p className='text-lg sm:text-xl'>Melhore o seu Deck agora mesmo!</p>
+          <p className='max-w-2xl text-base'>
+            Usuários solicitaram revisão das respostas de alguns dos cards do
+            seu Deck. Acesse a seção de solicitações para fazer a revisão 🤗
+          </p>
+        </div>
+      </div>
+      <div className='flex items-end'>
+        <div className='hidden h-0 sm:flex sm:h-auto sm:items-end'>
+          <Button onClick={goToAnswerValidationReports}>
+            Acessar solicitações
+          </Button>
+        </div>
+        <div className='block w-full sm:hidden sm:w-0'>
+          <Button fullWidth onClick={goToAnswerValidationReports}>
+            Acessar solicitações
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/modules/decks/reports/components/answer-validation-report-item.tsx b/src/modules/decks/reports/components/answer-validation-report-item.component.tsx
similarity index 96%
rename from src/modules/decks/reports/components/answer-validation-report-item.tsx
rename to src/modules/decks/reports/components/answer-validation-report-item.component.tsx
index 59af0a1..8af598c 100644
--- a/src/modules/decks/reports/components/answer-validation-report-item.tsx
+++ b/src/modules/decks/reports/components/answer-validation-report-item.component.tsx
@@ -38,6 +38,9 @@ export function AnswerValidationReportItem(
           notify.success(successMessage)
         }
 
+        apiContext.answerValidationReports.hasDeckPendingAnswerValidationReports.invalidate(
+          { deckId },
+        )
         apiContext.answerValidationReports.getCardsWithAnswerValidationReports.setData(
           { deckId },
           data => {
diff --git a/src/pages/decks/[id].tsx b/src/pages/decks/[id].tsx
index 4075b34..b96ab22 100644
--- a/src/pages/decks/[id].tsx
+++ b/src/pages/decks/[id].tsx
@@ -3,11 +3,13 @@ import { Fragment } from 'react'
 import { Visibility } from '@prisma/client'
 import type { GetServerSideProps, InferGetServerSidePropsType } from 'next'
 import { type NextPage } from 'next'
+import { useSession } from 'next-auth/react'
 import dynamic from 'next/dynamic'
 import Head from 'next/head'
 
 import { Card } from '~/components/card'
 import { Image } from '~/components/image'
+import { AnswerValidationReportsCard } from '~/modules/decks/components/answer-validation-report-card.component'
 import { getServerAuthSession } from '~/server/common/auth'
 import { prisma } from '~/server/common/db'
 import { getS3ImageUrl } from '~/server/common/s3'
@@ -91,6 +93,8 @@ const DeckDetailsPage: NextPage<
 > = props => {
   const { deck } = props
 
+  const { data: session } = useSession()
+
   const renderTopics = () => {
     if (deck.topics.length === 0) return null
 
@@ -108,6 +112,14 @@ const DeckDetailsPage: NextPage<
     )
   }
 
+  const renderAnswerValidationReportsCard = () => {
+    const isUserDeckOwner = session?.user?.id === deck.ownerId
+
+    if (!isUserDeckOwner) return null
+
+    return <AnswerValidationReportsCard deckId={deck.id} />
+  }
+
   return (
     <>
       <Head>
@@ -139,6 +151,7 @@ const DeckDetailsPage: NextPage<
         </div>
         <StudySessionCard deckId={deck.id} />
         <h2 className='text-xl font-medium text-primary-900'>Cards:</h2>
+        {renderAnswerValidationReportsCard()}
         <ul className='flex w-full flex-wrap gap-5'>
           {deck.cards.map(card => (
             <Card as='li' key={card.id} isAiPowered={card.isAiPowered}>
diff --git a/src/pages/decks/reports/[id].tsx b/src/pages/decks/reports/[id].tsx
index a4f5de1..310bb24 100644
--- a/src/pages/decks/reports/[id].tsx
+++ b/src/pages/decks/reports/[id].tsx
@@ -5,7 +5,7 @@ import { type NextPage } from 'next'
 import Head from 'next/head'
 
 import { Feedback } from '~/components/feedback'
-import { AnswerValidationReportItem } from '~/modules/decks/reports/components/answer-validation-report-item'
+import { AnswerValidationReportItem } from '~/modules/decks/reports/components/answer-validation-report-item.component'
 import { getServerAuthSession } from '~/server/common/auth'
 import { prisma } from '~/server/common/db'
 import type { WithAuthentication } from '~/types/auth'
diff --git a/src/server/api/routers/answer-validation-reports/answer-validation-reports.router.ts b/src/server/api/routers/answer-validation-reports/answer-validation-reports.router.ts
index b1d2647..21cb864 100644
--- a/src/server/api/routers/answer-validation-reports/answer-validation-reports.router.ts
+++ b/src/server/api/routers/answer-validation-reports/answer-validation-reports.router.ts
@@ -72,7 +72,6 @@ export const answerValidationReportsRouter = createTRPCRouter({
       }),
     )
     .mutation(async ({ input: { answerValidationReportId, status }, ctx }) => {
-      await new Promise(r => setTimeout(r, 3000))
       const answerValidationReport =
         await ctx.prisma.answerValidationReport.findFirst({
           where: { id: answerValidationReportId },
@@ -135,4 +134,16 @@ export const answerValidationReportsRouter = createTRPCRouter({
         await updateReport()
       }
     }),
+  hasDeckPendingAnswerValidationReports: protectedProcedure
+    .input(z.object({ deckId: z.string().min(1) }))
+    .query(async ({ input: { deckId }, ctx }) => {
+      const count = await ctx.prisma.answerValidationReport.count({
+        where: {
+          card: { deckId },
+          status: AnswerValidationReportStatus.Pending,
+        },
+      })
+
+      return count > 0
+    }),
 })
diff --git a/src/utils/navigation/index.ts b/src/utils/navigation/index.ts
index a5c9188..026b615 100644
--- a/src/utils/navigation/index.ts
+++ b/src/utils/navigation/index.ts
@@ -10,4 +10,5 @@ export const routes = {
   profileSettings: () => '/profile/settings',
   decksForYou: () => '/decks/for-you',
   favorites: () => '/decks/favorites',
+  answerValidationReports: (id: string) => `/decks/reports/${id}`,
 }

From 61a535832292b2426204f1310a0da771483424c6 Mon Sep 17 00:00:00 2001
From: Emilio Schaedler Heinzmann <emiliosheinz@gmail.com>
Date: Sun, 19 Mar 2023 13:40:40 -0300
Subject: [PATCH 14/14] refactor: :recycle: remove max width from subtitle

---
 src/pages/decks/reports/[id].tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/decks/reports/[id].tsx b/src/pages/decks/reports/[id].tsx
index 310bb24..2e60baa 100644
--- a/src/pages/decks/reports/[id].tsx
+++ b/src/pages/decks/reports/[id].tsx
@@ -124,7 +124,7 @@ const ReviewDeckPage: WithAuthentication<
         <h1 className='mb-4 text-2xl font-bold text-primary-900'>
           Solicitações
         </h1>
-        <p className='mb-5 max-w-2xl'>
+        <p className='mb-5'>
           Aqui você pode visualizar todas as solicitações de revisão das
           respostas dos cards do seu Deck. Atenção: Ao aceitar uma solicitação
           ela passará a ser considerada como uma resposta correta para aquela