merge antes de expo

.github/workflows/deploy.yaml

@@ -25,7 +25,7 @@ jobs:
 
       - name: Install SST
         run: |
-          wget https://github.com/sst/ion/releases/download/v0.0.399/sst-linux-amd64.deb 
+          wget https://github.com/sst/ion/releases/download/v0.0.411/sst-linux-amd64.deb 
           sudo dpkg -i sst-linux-amd64.deb
 
       - name: Install Bun

.github/workflows/test.yaml

@@ -8,10 +8,14 @@ on:
     branches:
       - dev
 
+env:
+  AUTH_SECRET: ${{ secrets.AUTH_SECRET }}
+  POSTGRES_URL: ${{ secrets.POSTGRES_URL }}
+  OPENAI_KEY: ${{ secrets.OPENAI_KEY }}
+
 jobs:
   cypress-test:
     runs-on: ubuntu-latest
-    needs: build
 
     steps:
       - name: Git checkout
@@ -48,7 +52,7 @@ jobs:
           headless: true
         env:
           CYPRESS_CACHE_FOLDER: ~/.cache/Cypress
-  build:
+  unit-test:
     runs-on: ubuntu-latest
 
     steps:

app/(auth)/login/page.tsx

@@ -25,7 +25,7 @@ const Login = () => {
 
   return (
     <main className="flex h-dvh items-center justify-center bg-gradient-to-r from-primary to-primary-light">
-      <section className="flex h-fit w-[33%] flex-col justify-center divide-y divide-gray-500 rounded-[20px] bg-bone px-16 py-8 drop-shadow-md">
+      <section className="flex h-fit w-fit flex-col justify-center divide-y divide-gray-500 rounded-[20px] bg-bone px-8 py-8 drop-shadow-md md:px-14 lg:px-16">
         <div className="flex w-full flex-col items-center justify-start gap-y-4 pb-8">
           <p className="mb-4 mt-6 text-center text-3xl font-semibold leading-normal text-black">
             Log in to Feedback Flow

app/(auth)/register/page.tsx

@@ -24,7 +24,7 @@ const Register = () => {
 
   return (
     <div className="flex h-dvh items-center justify-center bg-gradient-to-r from-primary to-primary-light">
-      <section className="flex h-fit w-[33%] flex-col justify-center rounded-[20px] bg-bone px-10 py-8 drop-shadow-md ">
+      <section className="flex h-fit w-fit flex-col justify-center rounded-[20px] bg-bone px-8 py-8 drop-shadow-md md:px-14 lg:px-16 ">
         <p className="mt-6 text-center text-3xl font-semibold leading-normal text-black">
           Sign Up
         </p>

app/(base)/pcp/page.tsx

@@ -50,10 +50,13 @@ const PCP = () => {
     refetchOnWindowFocus: false,
   });
 
-  const scheduledAt = sprintSurveyQuery.data?.scheduledAt;
-  const formattedDate = scheduledAt
-    ? new Date(scheduledAt).toLocaleDateString("es-ES")
-    : "";
+  const formatDate = (date: Date) => {
+    return new Date(date).toLocaleString("default", {
+      day: "2-digit",
+      month: "short",
+      year: "numeric",
+    });
+  };
 
   const progressPercentage = 100;
 
@@ -72,24 +75,27 @@ const PCP = () => {
 
   return (
     <div>
-      <section id="pip-progressbar" className="mt-4">
+      <section id="pip-progressbar" className="mt-4 w-full">
         <div className="flex items-center justify-between">
           <p className=" mb-2 text-3xl font-semibold">Personal Career Plan</p>
           <p className=" mb-2 text-xl font-medium text-graySubtitle">
-            {`Sprint ${formattedDate}`}
+            {sprintSurveyQuery.data &&
+            typeof sprintSurveyQuery.data === "string"
+              ? sprintSurveyQuery.data
+              : sprintSurveyQuery.isLoading || !sprintSurveyQuery.data
+                ? "loading..."
+                : `Sprint ${formatDate(sprintSurveyQuery.data.scheduledAt as Date)}`}
           </p>
         </div>
-        <ProgressBar width={progressPercentage} height={6} />
-      </section>
-
-      <section id="pip-selectproject" className="pt-4">
-        <div className="relative inline-block w-full">
+        <div className="flex w-full flex-row items-center justify-between gap-4">
+          <ProgressBar width={progressPercentage} height={6} />
           <Listbox value={projectId} onChange={setProjectId}>
-            <div className="relative mt-1">
-              <Listbox.Button className="relative flex w-1/4 cursor-default items-center justify-between rounded-lg bg-white py-2 pl-3 pr-4 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm">
+            <div className="relative mt-1 w-1/4">
+              <Listbox.Button className="relative flex w-full cursor-default items-center justify-between rounded-lg bg-white py-2 pl-3 pr-4 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm">
                 <p className="truncate">
-                  {projectsQuery.data &&
-                    projectsQuery.data.find((p) => p.id === projectId)?.name}
+                  {(projectsQuery.data &&
+                    projectsQuery.data.find((p) => p.id === projectId)?.name) ??
+                    "Personal Improvement"}
                 </p>
                 <svg
                   className="h-4 w-4 fill-current text-gray-700"
@@ -105,10 +111,10 @@ const PCP = () => {
                 leaveFrom="opacity-100"
                 leaveTo="opacity-0"
               >
-                <Listbox.Options className="absolute mt-1 max-h-56 w-1/4 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm">
+                <Listbox.Options className="absolute z-50 mt-1 max-h-56 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm">
                   <Listbox.Option
-                    key={0}
-                    value={0}
+                    key={-1}
+                    value={-1}
                     className={({ active }) =>
                       `relative my-1 cursor-default select-none rounded-xl  ${
                         active ? "bg-gray-200 text-black" : "text-gray-900"
@@ -197,10 +203,10 @@ const PCPTasks = ({ projectId }: { projectId: number }) => {
           </button>
         </div>
 
-        {tasksQuery.isLoading ? (
+        {tasksQuery.isLoading || !tasksQuery.data ? (
           <p>loading...</p>
-        ) : tasksQuery.isError ? (
-          <NoDataCard text={tasksQuery.error.message} />
+        ) : tasksQuery.data && typeof tasksQuery.data === "string" ? (
+          <NoDataCard text={tasksQuery.data} />
         ) : (
           tasksQuery.data && (
             <div className="mt-2">
@@ -239,8 +245,8 @@ const PCPTasksDialogContent = ({ projectId }: { projectId: number }) => {
     mutationFn: updateTask,
   });
 
-  if (tasksHistoryQuery.isError) {
-    return <NoDataCard text={tasksHistoryQuery.error.message} />;
+  if (tasksHistoryQuery.data && typeof tasksHistoryQuery.data === "string") {
+    return <NoDataCard text={tasksHistoryQuery.data} />;
   }
 
   if (tasksHistoryQuery.isLoading || !tasksHistoryQuery.data) {
@@ -448,10 +454,10 @@ const PCPResources = ({ projectId }: { projectId: number }) => {
           </button>
         </div>
 
-        {resourcesQuery.isLoading ? (
+        {resourcesQuery.isLoading || !resourcesQuery.data ? (
           <p>loading...</p>
-        ) : resourcesQuery.isError ? (
-          <NoDataCard text={resourcesQuery.error.message} />
+        ) : resourcesQuery.data && typeof resourcesQuery.data === "string" ? (
+          <NoDataCard text={resourcesQuery.data} />
         ) : (
           resourcesQuery.data && (
             <div className="mt-2">
@@ -532,8 +538,11 @@ const PCPResourcesDialogContent = ({ projectId }: { projectId: number }) => {
     refetchOnWindowFocus: false,
   });
 
-  if (resourcesHistoryQuery.isError) {
-    return <NoDataCard text={resourcesHistoryQuery.error.message} />;
+  if (
+    resourcesHistoryQuery.data &&
+    typeof resourcesHistoryQuery.data === "string"
+  ) {
+    return <NoDataCard text={resourcesHistoryQuery.data} />;
   }
 
   if (resourcesHistoryQuery.isLoading || !resourcesHistoryQuery.data) {

app/(base)/profile/[id]/page.tsx

@@ -6,14 +6,10 @@ import CoWorkersCarousel from "@/components/CoWorkersCarousel";
 import ProjectsCarousel from "@/components/ProjectsCarousel";
 import ProfileTraits from "@/components/Profile/ProfileTraits";
 
-import { feedbackAnalysis } from "@/services/rag";
-
 const Profile: React.FC<{ params: { id: string } }> = async ({ params }) => {
   const user = await getUserInfoById(params.id);
   const traits = await getUserSkillsById(params.id);
 
-  feedbackAnalysis(53);
-
   return (
     <main>
       <ProfileBanner user={user} />

app/(base)/projects/create/page.tsx

@@ -220,7 +220,9 @@ const CreateProject = () => {
                 </label>
                 <MultiSelect
                   // TODO: make this handle duplicate users
-                  data={employeesQuery.data?.map((member) => member.name)}
+                  data={Array.from(
+                    new Set(employeesQuery.data?.map((member) => member.name)),
+                  )}
                   renderOption={renderMultiSelectOption}
                   maxDropdownHeight={180}
                   // label="Employees of the month"

app/(base)/projects/page.tsx

@@ -16,32 +16,30 @@ const Projects = async () => {
   const role = await getUserRole();
 
   return (
-    <div>
-      <section className="mt-12 flex flex-col">
-        <div className="mb-8 flex justify-center gap-5">
-          <h3 className="text-4xl font-medium">My Projects</h3>
-          {(role === "MANAGER" || role === "ADMIN") && (
-            <Link
-              href="/projects/create"
-              className="rounded-full bg-primary px-5 py-2 font-medium text-white drop-shadow-lg"
-            >
-              <button className="">Create</button>
-            </Link>
-          )}
-        </div>
-        <div className="mx-auto flex flex-wrap items-center justify-center gap-6 overflow-x-auto">
-          {projects.map((project) => (
-            <ProjectCard
-              key={project.id}
-              id={project.id}
-              name={project.name}
-              date={`${formatDate(project.startDate)} - ${formatDate(project.endDate)}`}
-              description={project.description}
-            />
-          ))}
-        </div>
-      </section>
-    </div>
+    <section className="mt-12 flex flex-col overflow-x-hidden">
+      <div className="mb-8 flex justify-center gap-5">
+        <h3 className="text-4xl font-medium">My Projects</h3>
+        {(role === "MANAGER" || role === "ADMIN") && (
+          <Link
+            href="/projects/create"
+            className="rounded-full bg-primary px-5 py-2 font-medium text-white drop-shadow-lg"
+          >
+            <button className="">Create</button>
+          </Link>
+        )}
+      </div>
+      <div className="mx-auto flex flex-col flex-wrap items-center justify-center gap-6 overflow-x-hidden md:flex-row">
+        {projects.map((project) => (
+          <ProjectCard
+            key={project.id}
+            id={project.id}
+            name={project.name}
+            date={`${formatDate(project.startDate)} - ${formatDate(project.endDate)}`}
+            description={project.description}
+          />
+        ))}
+      </div>
+    </section>
   );
 };
 

app/globals.css

@@ -3,7 +3,7 @@
 @tailwind components;
 @tailwind utilities;
 
-/* *>* {
+/* * > * > * {
   outline: red solid 1px;
 } */
 
@@ -96,3 +96,11 @@
   gap: 1rem;
   grid-auto-flow: row;
 }
+
+.emotion-circle:hover {
+  transform: scale(1.2);
+}
+
+.emotion-box:has(.emotion-circle:hover) .emotion-circle:not(:hover) {
+  transform: scale(0.9);
+}

components/Dashboard/DashboardEmotionsSection.tsx

@@ -24,11 +24,11 @@ const DashboardEmotionsSection: React.FC<EmotionsSectionProps> = ({
         Emotions Summary
       </p>
     </div>
-    <div className="m-auto grid grid-cols-2 gap-10">
+    <div className="emotion-box m-auto grid grid-cols-2 gap-10">
       {emotionsData.map((circle, index) => (
         <div
           key={index}
-          className="flex items-center justify-center drop-shadow-lg transition-transform duration-300 ease-in-out hover:scale-125"
+          className="emotion-circle flex items-center justify-center drop-shadow-lg transition-transform duration-300 ease-in-out"
         >
           <Tooltip.Floating label={circle.title} color={circle.gradient.end}>
             <div>

components/ProgressBar.tsx

@@ -1,11 +1,11 @@
 interface InterfaceProgressBar {
-  width: number; // percentage
-  height: number; // height in talwindcss
+  width: number;
+  height: number;
 }
 
 const ProgressBar = ({ width, height }: InterfaceProgressBar) => {
   return (
-    <div className="w-100 rounded-full bg-gray-200 p-1.5">
+    <div className="w-3/4 rounded-full bg-gray-200 p-1.5">
       <div
         className={`h-${height} rounded-full bg-gradient-to-r from-primary to-secondary transition-all delay-100 ease-linear`}
         style={{ width: `${width}%` }}

components/modals/ProjectSurvey.tsx

@@ -25,7 +25,6 @@ const ProjectSurvey = ({
   projectSurveyId,
 }: ProjectSurveyProps) => {
   const router = useRouter();
-
   const { mutate } = useMutation({
     mutationFn: submitProjectAnswer,
     onSuccess: () => {

components/modals/SprintSurvey.tsx

@@ -21,6 +21,7 @@ import {
 import toast from "react-hot-toast";
 import { getUserId } from "@/services/user";
 import Loader from "../Loader";
+import { useRouter } from "next/navigation";
 
 interface SprintSurveyProps {
   showModal: boolean;
@@ -49,6 +50,8 @@ const SprintSurvey = ({
     queryFn: async () => await getSprintSurveyQuestions(),
   });
 
+  const router = useRouter();
+
   const sprintQuestions: Questions[] | undefined = useMemo(() => {
     return allSprintQuestions?.filter(
       (question) => question.type === ("SPRINT_QUESTION" as QuestionType),
@@ -163,6 +166,7 @@ const SprintSurvey = ({
   const submitSurveyAnswers = useMutation({
     mutationFn: () => submitSprintSurveyAnswers(sprintAnswer),
     onSuccess: () => {
+      router.refresh();
       queryClient.invalidateQueries({ queryKey: ["notifications"] });
       toast.success("Encuesta enviada exitosamente!");
     },

components/modals/ruler/RulerSurvey.tsx

@@ -8,6 +8,7 @@ import { getUserId } from "@/services/user";
 import { submitRulerSurveyAnswer } from "@/services/rulerSurvey";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import toast from "react-hot-toast";
+import { useRouter } from "next/navigation";
 
 interface RulerSurveyProps {
   showModal: boolean;
@@ -16,6 +17,7 @@ interface RulerSurveyProps {
 
 const RulerSurvey = ({ showModal, onClose }: RulerSurveyProps) => {
   const queryClient = useQueryClient();
+  const router = useRouter();
   const [step, setStep] = useState<number>(1);
   const { data: userId } = useQuery({
     queryKey: ["userId"],
@@ -54,6 +56,7 @@ const RulerSurvey = ({ showModal, onClose }: RulerSurveyProps) => {
     mutationFn: () => submitRulerSurveyAnswer(rulerSurveyAnswer),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["notifications"] });
+      router.refresh();
       toast.success("Encuesta enviada exitosamente!");
     },
     onError: () => {

cypress/e2e/login.cy.ts

@@ -4,6 +4,7 @@ describe("Login", () => {
     cy.get("label").contains("Email").click().type("[email protected]");
     cy.get("label").contains("Password").click().type("cypress");
     cy.get("button").contains("Log in").click();
+    cy.wait(4000);
     cy.url().should("include", "/dashboard");
   });
   it("Visits page not being signed in, and gets redirected to login", () => {
@@ -12,7 +13,10 @@ describe("Login", () => {
   });
   it("Tries to sign in with wrong credentials", () => {
     cy.visit("/");
-    cy.get("label").contains("Email").click().type("[email protected]");
+    cy.get("label")
+      .contains("Email")
+      .click()
+      .type("[email protected]");
     cy.get("label").contains("Password").click().type("prueba");
     cy.get("button").contains("Log in").click();
     cy.get("div").contains("Email or password is not valid.").should("exist");