diff --git a/entrypoints/degree-audit/components/degree-audit-page.tsx b/entrypoints/degree-audit/components/degree-audit-page.tsx index 9e565d8..6a29787 100644 --- a/entrypoints/degree-audit/components/degree-audit-page.tsx +++ b/entrypoints/degree-audit/components/degree-audit-page.tsx @@ -3,9 +3,10 @@ import Title from "@/entrypoints/components/common/text"; import "@/entrypoints/styles/content.css"; import { useAuditContext } from "../providers/audit-provider"; import { SimpleDegreeCompletionDonut } from "./degree-completion-donut"; +import { CreditHourTotalsCard, GPATotalsCard } from "./gpa-credit-cards"; import RequirementBreakdown from "./requirement-breakdown"; -const GpaSummaryCard = () => { +const SidePanel = () => { const { sections } = useAuditContext(); const gpaSection = sections.find((section) => section.title.toLowerCase().includes("gpa"), @@ -58,33 +59,53 @@ const SidePanel = () => { x="center" > -
- -
+ + + + ); }; const MainContent = () => { const { progresses, sections } = useAuditContext(); - const checklistSections = sections.filter( + const nonGPASections = sections.filter( (section) => !section.title.toLowerCase().includes("gpa"), ); return ( - <Title text="Degree Checklist" /> - {checklistSections.map((section) => { - const sectionIndex = sections.findIndex((item) => item === section); + {nonGPASections.map((section) => { + const originalIdx = sections.findIndex((s) => s.title === section.title); + const sectionProgress = progresses.sections[originalIdx]; + return ( - progresses.sections[sectionIndex]?.progress.total > 0 && ( + sectionProgress?.progress.total > 0 && ( <RequirementBreakdown - key={section.title || `section-${sectionIndex}`} + key={section.title || `section-${originalIdx}`} title={section.title} - hours={progresses.sections[sectionIndex].progress} + hours={sectionProgress.progress} requirements={section.rule ?? []} - colorIndex={sectionIndex} + colorIndex={originalIdx} /> ) ); diff --git a/entrypoints/degree-audit/components/gpa-credit-cards.tsx b/entrypoints/degree-audit/components/gpa-credit-cards.tsx new file mode 100644 index 0000000..71c306f --- /dev/null +++ b/entrypoints/degree-audit/components/gpa-credit-cards.tsx @@ -0,0 +1,93 @@ +import { HStack, VStack } from "@/entrypoints/components/common/helperdivs"; + +type GPATotalsProps = { + required: number; + counted: number; + hoursUsed: number; + points: number; +}; + +export const GPATotalsCard = ({ + required = 2.0, + counted = 4.0, + hoursUsed = 80, + points = 320, +}: GPATotalsProps) => { + return ( + <div className="p-5 rounded-lg border border-gray-200 bg-white shadow-md"> + <HStack x="between" y="top" fill> + <h3 className="text-xl font-bold text-gray-900">GPA Totals</h3> + <img src="/Info.svg" alt="Info" className="w-6 h-6 cursor-pointer" /> + </HStack> + + <HStack gap={6} className="mt-4"> + <VStack gap={1}> + <span className="text-sm text-gray-500">Required</span> + <div className="px-4 py-2 bg-white border border-gray-300 rounded-lg"> + <span className="text-lg font-semibold">{required.toFixed(4)}</span> + </div> + </VStack> + <VStack gap={1}> + <span className="text-sm text-gray-500">Counted</span> + <div className="px-4 py-2 bg-dap-green rounded-lg"> + <span className="text-lg font-semibold text-white"> + {counted.toFixed(4)} + </span> + </div> + </VStack> + </HStack> + + <p className="mt-4 text-sm text-gray-600"> + {hoursUsed} hours for a total of {points} points were used to calculate + the GPA. + </p> + </div> + ); +}; + +type CreditRequirement = { + met: boolean; + hours: number; + description: string; +}; + +type CreditHourTotalsProps = { + requirements: CreditRequirement[]; +}; + +export const CreditHourTotalsCard = ({ + requirements = [ + { + met: true, + hours: 21, + description: "hours of upper-division coursework in residence.", + }, + { + met: false, + hours: 36, + description: "hours of upper-division coursework required.", + }, + ], +}: CreditHourTotalsProps) => { + return ( + <div className="p-5 rounded-lg border border-gray-200 bg-white shadow-md"> + <h3 className="text-xl font-bold text-gray-900">Credit Hour Totals</h3> + + <VStack gap={3} className="mt-4"> + {requirements.map((req, idx) => ( + <HStack key={idx} gap={3} y="middle"> + <img + src={req.met ? "/Frame.svg" : "/Frame (1).svg"} + alt={req.met ? "Met" : "Not met"} + className="w-7 h-7" + /> + <span className="text-sm text-gray-700"> + <span className="font-semibold">{req.hours} hours</span> of{" "} + {req.description} + </span> + </HStack> + ))} + </VStack> + </div> + ); +}; diff --git a/public/Frame (1).svg b/public/Frame (1).svg new file mode 100644 index 0000000..31ef55d --- /dev/null +++ b/public/Frame (1).svg @@ -0,0 +1,10 @@ +<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"> +<g clip-path="url(#clip0_15878_5700)"> +<path d="M3.5 0C2.57174 0 1.6815 0.368749 1.02513 1.02513C0.368749 1.6815 0 2.57174 0 3.5L0 24.5C0 25.4283 0.368749 26.3185 1.02513 26.9749C1.6815 27.6313 2.57174 28 3.5 28H24.5C25.4283 28 26.3185 27.6313 26.9749 26.9749C27.6313 26.3185 28 25.4283 28 24.5V3.5C28 2.57174 27.6313 1.6815 26.9749 1.02513C26.3185 0.368749 25.4283 0 24.5 0L3.5 0ZM9.3695 8.1305L14 12.7628L18.6305 8.1305C18.7119 8.04915 18.8084 7.98461 18.9147 7.94058C19.021 7.89656 19.1349 7.87389 19.25 7.87389C19.3651 7.87389 19.479 7.89656 19.5853 7.94058C19.6916 7.98461 19.7881 8.04915 19.8695 8.1305C19.9509 8.21185 20.0154 8.30843 20.0594 8.41473C20.1034 8.52102 20.1261 8.63495 20.1261 8.75C20.1261 8.86505 20.1034 8.97898 20.0594 9.08527C20.0154 9.19157 19.9509 9.28815 19.8695 9.3695L15.2372 14L19.8695 18.6305C19.9509 18.7119 20.0154 18.8084 20.0594 18.9147C20.1034 19.021 20.1261 19.1349 20.1261 19.25C20.1261 19.3651 20.1034 19.479 20.0594 19.5853C20.0154 19.6916 19.9509 19.7881 19.8695 19.8695C19.7881 19.9509 19.6916 20.0154 19.5853 20.0594C19.479 20.1034 19.3651 20.1261 19.25 20.1261C19.1349 20.1261 19.021 20.1034 18.9147 20.0594C18.8084 20.0154 18.7119 19.9509 18.6305 19.8695L14 15.2372L9.3695 19.8695C9.28815 19.9509 9.19157 20.0154 9.08527 20.0594C8.97898 20.1034 8.86505 20.1261 8.75 20.1261C8.63495 20.1261 8.52102 20.1034 8.41473 20.0594C8.30843 20.0154 8.21185 19.9509 8.1305 19.8695C8.04915 19.7881 7.98461 19.6916 7.94058 19.5853C7.89656 19.479 7.87389 19.3651 7.87389 19.25C7.87389 19.1349 7.89656 19.021 7.94058 18.9147C7.98461 18.8084 8.04915 18.7119 8.1305 18.6305L12.7628 14L8.1305 9.3695C7.9662 9.2052 7.87389 8.98236 7.87389 8.75C7.87389 8.51764 7.9662 8.2948 8.1305 8.1305C8.2948 7.9662 8.51764 7.87389 8.75 7.87389C8.98236 7.87389 9.2052 7.9662 9.3695 8.1305Z" fill="#333F48"/> +</g> +<defs> +<clipPath id="clip0_15878_5700"> +<rect width="28" height="28" fill="white"/> +</clipPath> +</defs> +</svg> diff --git a/public/Frame.svg b/public/Frame.svg new file mode 100644 index 0000000..6ddeb57 --- /dev/null +++ b/public/Frame.svg @@ -0,0 +1,10 @@ +<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"> +<g clip-path="url(#clip0_15878_5695)"> +<path d="M3.5 0C2.57174 0 1.6815 0.368749 1.02513 1.02513C0.368749 1.6815 0 2.57174 0 3.5L0 24.5C0 25.4283 0.368749 26.3185 1.02513 26.9749C1.6815 27.6313 2.57174 28 3.5 28H24.5C25.4283 28 26.3185 27.6313 26.9749 26.9749C27.6313 26.3185 28 25.4283 28 24.5V3.5C28 2.57174 27.6313 1.6815 26.9749 1.02513C26.3185 0.368749 25.4283 0 24.5 0L3.5 0ZM21.0525 8.6975C21.2956 8.94032 21.4337 9.26876 21.4373 9.61232C21.4409 9.95588 21.3097 10.2871 21.0718 10.535L14.0857 19.2675C13.9657 19.3968 13.8208 19.5006 13.6597 19.5726C13.4986 19.6447 13.3246 19.6835 13.1482 19.6868C12.9718 19.69 12.7965 19.6577 12.6328 19.5917C12.4692 19.5256 12.3205 19.4273 12.1957 19.3025L7.567 14.672C7.43805 14.5518 7.33462 14.4069 7.26288 14.2459C7.19115 14.0849 7.15257 13.9111 7.14946 13.7349C7.14636 13.5587 7.17877 13.3836 7.24479 13.2202C7.3108 13.0568 7.40905 12.9083 7.53368 12.7837C7.65832 12.659 7.80677 12.5608 7.9702 12.4948C8.13363 12.4288 8.30868 12.3964 8.48491 12.3995C8.66114 12.4026 8.83494 12.4411 8.99594 12.5129C9.15694 12.5846 9.30184 12.688 9.422 12.817L13.0865 16.4797L19.1642 8.736C19.2841 8.60645 19.4288 8.50239 19.5898 8.43004C19.7507 8.3577 19.9246 8.31857 20.1011 8.31497C20.2775 8.31138 20.4529 8.3434 20.6166 8.40913C20.7804 8.47485 20.9292 8.57293 21.0543 8.6975H21.0525Z" fill="#579D42"/> +</g> +<defs> +<clipPath id="clip0_15878_5695"> +<rect width="28" height="28" fill="white"/> +</clipPath> +</defs> +</svg> diff --git a/public/Info.svg b/public/Info.svg new file mode 100644 index 0000000..8c84be0 --- /dev/null +++ b/public/Info.svg @@ -0,0 +1,3 @@ +<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M12 2.25C10.0716 2.25 8.18657 2.82183 6.58319 3.89317C4.97982 4.96451 3.73013 6.48726 2.99218 8.26884C2.25422 10.0504 2.06114 12.0108 2.43735 13.9021C2.81355 15.7934 3.74215 17.5307 5.10571 18.8943C6.46928 20.2579 8.20656 21.1865 10.0979 21.5627C11.9892 21.9389 13.9496 21.7458 15.7312 21.0078C17.5127 20.2699 19.0355 19.0202 20.1068 17.4168C21.1782 15.8134 21.75 13.9284 21.75 12C21.7473 9.41498 20.7192 6.93661 18.8913 5.10872C17.0634 3.28084 14.585 2.25273 12 2.25ZM12 20.25C10.3683 20.25 8.77326 19.7661 7.41655 18.8596C6.05984 17.9531 5.00242 16.6646 4.378 15.1571C3.75358 13.6496 3.5902 11.9908 3.90853 10.3905C4.22685 8.79016 5.01259 7.32015 6.16637 6.16637C7.32016 5.01259 8.79017 4.22685 10.3905 3.90852C11.9909 3.59019 13.6497 3.75357 15.1571 4.37799C16.6646 5.00242 17.9531 6.05984 18.8596 7.41655C19.7661 8.77325 20.25 10.3683 20.25 12C20.2475 14.1873 19.3775 16.2843 17.8309 17.8309C16.2843 19.3775 14.1873 20.2475 12 20.25ZM13.5 16.5C13.5 16.6989 13.421 16.8897 13.2803 17.0303C13.1397 17.171 12.9489 17.25 12.75 17.25C12.3522 17.25 11.9706 17.092 11.6893 16.8107C11.408 16.5294 11.25 16.1478 11.25 15.75V12C11.0511 12 10.8603 11.921 10.7197 11.7803C10.579 11.6397 10.5 11.4489 10.5 11.25C10.5 11.0511 10.579 10.8603 10.7197 10.7197C10.8603 10.579 11.0511 10.5 11.25 10.5C11.6478 10.5 12.0294 10.658 12.3107 10.9393C12.592 11.2206 12.75 11.6022 12.75 12V15.75C12.9489 15.75 13.1397 15.829 13.2803 15.9697C13.421 16.1103 13.5 16.3011 13.5 16.5ZM10.5 7.875C10.5 7.6525 10.566 7.43499 10.6896 7.24998C10.8132 7.06498 10.9889 6.92078 11.1945 6.83564C11.4001 6.75049 11.6263 6.72821 11.8445 6.77162C12.0627 6.81502 12.2632 6.92217 12.4205 7.0795C12.5778 7.23684 12.685 7.43729 12.7284 7.65552C12.7718 7.87375 12.7495 8.09995 12.6644 8.30552C12.5792 8.51109 12.435 8.68679 12.25 8.8104C12.065 8.93402 11.8475 9 11.625 9C11.3266 9 11.0405 8.88147 10.8295 8.6705C10.6185 8.45952 10.5 8.17337 10.5 7.875Z" fill="#1A2024"/> +</svg>