Master

package.json

@@ -9,9 +9,16 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@tanstack/react-query": "^4.20.4",
+    "@tanstack/react-query-devtools": "^4.20.4",
+    "@types/react-scroll": "^1.8.5",
+    "axios": "^1.2.1",
     "next": "13.0.7",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "react-drag-drop-files": "^2.3.8",
+    "react-icons": "^4.7.1",
+    "react-scroll": "^1.8.9"
   },
   "devDependencies": {
     "@types/node": "18.11.15",

src/components/Acordion.tsx

@@ -0,0 +1,42 @@
+import React, { FC } from "react";
+import { accordion } from "../types/types";
+import Arrow from "./Arrow";
+import NoteCard from "./NoteCard";
+import ProgressBar from "./ProgressBar";
+
+const Acordion: FC<accordion> = ({ subjects, progressPercentage }) => {
+  return (
+    <div className="relative w-full overflow-hidden p-4">
+      <input
+        type="checkbox"
+        className="peer absolute top-0 inset-x-0 w-full h-12 opacity-0 z-10 cursor-pointer"
+      />
+      <div className="bg-blue-500 h-12 w-full pl-5 flex items-center rounded-t-lg">
+        <h1 className="text-lg font-semibold text-white">Primer Año</h1>
+      </div>
+      {/* progress bar */}
+      <ProgressBar progressPercentage={progressPercentage} />
+      {/* Arrow */}
+      <Arrow />
+      {/* Content */}
+      <div className="max-h-0 peer-checked:max-h-96 bg-transparent overflow-hidden transition-all duration-500">
+        <div className="grid grid-cols-6 gap-5 place-items-center p-4">
+          {subjects.map((course) => (
+            <NoteCard
+              key={course.id}
+              id={course.id}
+              name={course.name}
+              semester={course.semester}
+              ordinal_year={course.ordinal_year}
+              grade={course.grade}
+              credit={course.credit}
+              status={course.status}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Acordion;

src/components/Arrow.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { AiOutlineRight } from "react-icons/ai";
+
+const Arrow = () => {
+  return (
+    <div className="absolute top-6 right-6 text-white transition-transform duration-500 rotate-0 peer-checked:rotate-90">
+      <AiOutlineRight size={30} />
+    </div>
+  );
+};
+
+export default Arrow;

src/components/BlueDegrade.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+const BlueDegrade = () => {
+  return (
+    <div className="text-center -z-5 grid place-items-center top-28 h-52 w-full absolute bg-gradient-to-b from-cmf_blue to-transparent"></div>
+  );
+};
+
+export default BlueDegrade;

src/components/DragArea.tsx

@@ -0,0 +1,47 @@
+import React, { FC, useEffect } from "react";
+import { FileUploader } from "react-drag-drop-files";
+import { dragdropArea, notes } from "../types/types";
+import { useNotas } from "./../hooks/useNotas";
+
+const DragArea: FC<dragdropArea> = ({
+  file,
+  dropFile,
+  setNoteData,
+  noteData,
+}) => {
+  const fileTypes = ["PDF"];
+  const { data, mutate } = useNotas();
+  useEffect(() => {
+    setNoteData(data?.data);
+  }, [data]);
+
+  return (
+    <div
+      className={`text-3xl top-0 left-0 w-full ${
+        noteData ? "hidden" : "block"
+      }`}
+    >
+      <div className="text-center -z-5 grid place-items-center top-28 h-52 w-full absolute bg-gradient-to-b from-cmf_blue to-transparent">
+        <p className="text-white"> Bienvenido a CMF para egresar</p>
+      </div>
+      <div className=" h-[58rem] px-8 pb-8 ">
+        <FileUploader
+          hoverTitle={"dropealo aca"}
+          types={fileTypes}
+          //handleChange={(file: File) => dropFile(file)}
+          handleChange={(file: File) => {
+            return mutate({ file });
+          }}
+        >
+          <div className="h-full w-full text-4xl text-white flex flex-col items-center justify-center gap-52 border-4 border-dotted border-cmf_blue">
+            <p className="text-cmf_blue">Sube tu libreta</p>
+          </div>
+        </FileUploader>
+        {/* <button onClick={() => mutate({ file })}>Apretameeeee</button> */}
+      </div>
+    </div>
+  );
+};
+
+export default DragArea;
+//${file ? "hidden" : "block"}

src/components/Myheader.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import Navbar from "./Navbar";
+import { FaBars } from "react-icons/fa";
+import useModal from "../hooks/useModal";
+import Navbarmobile from "./Navbarmobile";
+
+const Myheader = () => {
+  const { modal, settingModal } = useModal();
+  return (
+    <div className="sticky top-0 z-50 flex items-center text-white justify-between bg-cmf_blue h-28 p-10">
+      <h1 className="text-7xl tex">CMF</h1>
+      <Navbar></Navbar>
+      <FaBars className="md:hidden" size={40} onClick={settingModal} />
+      <Navbarmobile modal={modal} settingModal={settingModal} />
+    </div>
+  );
+};
+
+export default Myheader;

src/components/Navbar.tsx

@@ -0,0 +1,18 @@
+import Link from "next/link";
+import React from "react";
+
+const Navbar = () => {
+  return (
+    <div className="hidden md:block">
+      <nav>
+        <ul>
+          <li className="text-4xl">
+            <Link href={"#"}>Más</Link>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  );
+};
+
+export default Navbar;

src/components/Navbarmobile.tsx

@@ -0,0 +1,33 @@
+import Link from "next/link";
+import React from "react";
+import { AiOutlineClose } from "react-icons/ai";
+import { FC } from "react";
+import { navbarmodal } from "../types/types";
+
+const Navbarmobile: FC<navbarmodal> = ({ modal, settingModal }) => {
+  return (
+    <div
+      className={` ${
+        modal ? "absolute" : "hidden"
+      } top-0 left-0 w-full h-screen bg-gradient-to-b from-cmf_blue grid place-items-center`}
+      //   className={`${
+      //     modal ? "absolute" : "hidden"
+      //   }   w-screen h-full text-black text-center bg-gradient-to-b from-cmf_blue`}
+    >
+      <div className="absolute top-1 right-1">
+        <AiOutlineClose size={40} onClick={settingModal} />
+      </div>
+      <nav>
+        <ul>
+          <li className="text-4xl">
+            <Link onClick={settingModal} href={"#"}>
+              CMF Notas
+            </Link>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  );
+};
+
+export default Navbarmobile;

src/components/NoteCard.tsx

@@ -0,0 +1,28 @@
+import React, { FC } from "react";
+import { NoteCard } from "../types/types";
+
+const NoteCard: FC<NoteCard> = ({
+  id,
+  name,
+  semester,
+  ordinal_year,
+  grade,
+  credit,
+  status,
+}) => {
+  return (
+    <div
+      className={`rounded-md text-center text-white w-48 ${
+        status === "Aprobado" ? "bg-green-600" : "bg-red-500"
+      }`}
+    >
+      <p>Nombre:{name}</p>
+      <p>Semestre:{semester}</p>
+      <p>Año:{ordinal_year}</p>
+      <p>Grado:{grade}</p>
+      <p>Credito:{credit}</p>
+    </div>
+  );
+};
+
+export default NoteCard;

src/components/Notesinfo.tsx

@@ -0,0 +1,120 @@
+import React, { FC, useEffect } from "react";
+import { NoteCard, notesInfo } from "../types/types";
+import Acordion from "./Acordion";
+import BlueDegrade from "./BlueDegrade";
+import { RiArrowUpSLine } from "react-icons/ri";
+import { animateScroll as scroll } from "react-scroll";
+import { scroller } from "react-scroll";
+
+const Notesinfo: FC<notesInfo> = ({ notes }) => {
+  const years = ["1er", "2do", "3ero", "4to", "5to", "6to", "7mo"];
+  useEffect(() => {
+    // scroll.scrollTo("datos");
+    // window.scrollTo(0, 700);
+    //550
+    if (window.innerWidth > 550) {
+      scroller.scrollTo("linkdatos", { duration: 50, offset: -80 });
+    } else {
+      scroller.scrollTo("linkdatos", { duration: 50, offset: -120 });
+    }
+  }, []);
+  const scrollToTop = () => {
+    scroll.scrollToTop();
+  };
+  const progressPercentage = 80;
+  const cardstest = {
+    subjects: [
+      {
+        id: 1,
+        name: "test1",
+        semester: 1,
+        ordinal_year: 1,
+        grade: 19,
+        credit: 4.0,
+        status: "aprobado",
+      },
+      {
+        id: 2,
+        name: "test2",
+        semester: 2,
+        ordinal_year: 1,
+        grade: 19,
+        credit: 4.0,
+        status: "aprobado",
+      },
+      {
+        id: 3,
+        name: "test3",
+        semester: 3,
+        ordinal_year: 2,
+        grade: 19,
+        credit: 4.0,
+        status: "desaprobado",
+      },
+    ],
+    total_passed_credits: 210.0,
+    total_non_passed_credits: 0,
+    mean_grades: 13.327586206896552,
+    student: {
+      name: "APAZA/TORRES, ALEXANDER RUSVELL",
+      grade: "PRE-GRADO",
+      school: "CIENCIA DE LA COMPUTACION",
+    },
+    card_date: "21.08.26 12:09:39",
+  };
+  const notesObject = notes.subjects.reduce(
+    (cache, item) => {
+      console.log(cache.length);
+      if (cache.length === item.ordinal_year) {
+        cache[cache.length - 1].push(item);
+      } else {
+        cache.push([item]);
+      }
+      return cache;
+    },
+    [[]] as NoteCard[][]
+  );
+
+  console.log(notesObject);
+  return (
+    <div>
+      {/* <div className="text-center -z-5 grid place-items-center top-28 h-52 w-full absolute bg-gradient-to-b from-cmf_blue to-transparent"></div> */}
+      <BlueDegrade />
+
+      <div
+        className="h-screen grid  place-content-center text-center"
+        id="datos"
+      >
+        <h1 className="text-3xl"> Bienvenido {notes.student.name}</h1>
+        <p>El grado de estudio es: {notes.student.grade}</p>
+        <p>La escuela en la que se encuentra es: {notes.student.school}</p>
+        <p>Los Creditos actuales son: {notes.total_passed_credits} </p>
+        <p>Los Creditos faltantes son: {notes.total_non_passed_credits}</p>
+        <p>El promedio de todas las notas actuales es: {notes.mean_grades} </p>
+        <p>
+          La fecha y hora en la que se saco la libreta de notas es:
+          {notes.card_date}
+        </p>
+      </div>
+      <div className="flex justify-center" id="linkdatos">
+        <div
+          className="flex flex-col items-center w-36 cursor-pointer"
+          onClick={scrollToTop}
+        >
+          <RiArrowUpSLine size={20} />
+          <p className="text-center">Desliza arriba para ver tus datos</p>
+        </div>
+      </div>
+      <div className="mb-5">
+        {notesObject.map((grade, index) => (
+          <Acordion key={index} subjects={grade} progressPercentage={80} />
+        ))}
+        <Acordion
+          progressPercentage={progressPercentage}
+          subjects={notes.subjects}
+        />
+      </div>
+    </div>
+  );
+};
+export default Notesinfo;

src/components/ProgressBar.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from "react";
+import { progressBar } from "../types/types";
+
+const ProgressBar: FC<progressBar> = ({ progressPercentage }) => {
+  return (
+    <div className="h-1 w-full bg-gray-300">
+      <div
+        style={{ width: `${progressPercentage}%` }}
+        className={`h-full ${
+          progressPercentage < 45
+            ? "bg-red-500"
+            : progressPercentage < 80
+            ? "bg-orange-400"
+            : "bg-green-300"
+        }`}
+      ></div>
+    </div>
+  );
+};
+
+export default ProgressBar;