Feat/qualifier pages (hackforla#668)

* update qualifier page 1

- aligned qualifier nav
- use grid system instead of flex box for items

* Refactor: update button styles for primary-dark theme

* Feat: add ProgressIndicator component and integrate it into QualifierPage2

* Refactor: update border style in QualifierNav component

* Refactor: dynamic grid layout in QualifierPage1 for responsive design

* Feat: enhance RadioButtonForm to support skill selection callback

* Feat: update RadioButtonForm dynamically render skill & experience levels

* Add selectCOP and experience levels props to qualifiers

* Feat: use context in QualiferPage2 to keep track of chosen experience level

* Feat: integrate qualifiers context to manage selected COP in QualifierPage1

* Feat: refactor QualifierPage2 layout and improve skill selection handling

* Refactor:

- renamed experienceLevels to skills_matrix
- refactored to use tw-components/Buttons.tsx & added second style
- Ran npm run lint in frontend directory

* update tech stack

* feat: use new tw-button variant, fix merge

---------

Co-authored-by: Terence Lo <[email protected]>

Author: 2 people

frontend/src/components/Buttons/_Button.scss

@@ -102,18 +102,18 @@ $theme-values: (
     ),
   ),
   "primary-dark": (
-    "background-color": $color-blue,
-    "color": $color-white,
+    "background-color": $color-white,
+    "color": $color-blue-dark,
     "focus": (
-      "background-color": $color-blue-focused,
+      "background-color": $color-blue-dark-focused,
     ),
     "hover": (
-      "background-color": $color-white,
+      "background-color": $color-blue-dark-hover,
       "box-shadow": 0 4px 4px rgb(0 0 0 / 20%),
-      "color": $color-charcoal,
+      "color": $color-white,
     ),
     "active": (
-      "background-color": $color-blue-focused,
+      "background-color": $color-blue-dark-focused,
     ),
   ),
 );

frontend/src/context/QualifiersContext.tsx

@@ -6,6 +6,8 @@ type QualifiersType = {
   COPs: {
     [copName: string]: string[];
   };
+  selectedCOP?: string;
+  skills_matrix?: { [skill: string]: string };
   // availabilityTimeSlots: string[];
 };
 
@@ -53,6 +55,7 @@ export const QualifiersProvider: React.FC<{ children: ReactNode }> = ({
   const [qualifiers, setQualifiers] = useState<QualifiersType>(initialState);
 
   const updateQualifiers = (newQualifiers: QualifiersType) => {
+    console.log("Updated Qualifiers:", newQualifiers); // Log the updated qualifiers TO DELETE
     setQualifiers(newQualifiers);
   };
 

frontend/src/pages/QualifierPage/components/ProgressIndicator.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+
+interface ProgressIndicatorProps {
+  currentPart: number;
+  totalParts: number;
+  title: string;
+  progressPercentage: number; // New prop
+}
+
+export const ProgressIndicator: React.FC<ProgressIndicatorProps> = ({
+  currentPart,
+  totalParts,
+  title,
+  progressPercentage,
+}) => {
+  // Ensure progressPercentage is clamped between 0 and 100
+  const validProgressPercentage = Math.min(
+    Math.max(progressPercentage, 0),
+    100,
+  );
+  const strokeDashoffset = 62.8 - (62.8 * validProgressPercentage) / 100;
+
+  return (
+    <div className="flex items-center gap-2">
+      <svg
+        className="text-blue-dark"
+        width="40"
+        height="40"
+        viewBox="0 0 36 36"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="18"
+          cy="18"
+          r="10"
+          fill="none"
+          stroke="#e6e6e6"
+          strokeWidth="4"
+        />
+        <circle
+          cx="18"
+          cy="18"
+          r="10"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="4"
+          strokeDasharray="62.8, 62.8"
+          strokeDashoffset={strokeDashoffset}
+          transform="rotate(-90 18 18)"
+        />
+      </svg>
+      <div className="flex flex-col">
+        <span className="font-bold text-charcoal">
+          Part {currentPart} of {totalParts}
+        </span>
+        <span className="text-charcoal">{title}</span>
+      </div>
+    </div>
+  );
+};

frontend/src/pages/QualifierPage/components/QualifierNav.tsx

@@ -11,11 +11,13 @@ function QualifierNav({ className, children }: QualifierNavProps) {
   return (
     <div
       className={clsx(
-        "border-px sticky bottom-0 box-content flex h-20 w-4/5 flex-wrap items-center rounded-lg border-[#D8D8D8] bg-[#FDFDFD] px-6 opacity-80 shadow-[0_8px_25px_#00000014] hover:opacity-100",
+        "sticky bottom-0 box-content flex h-16 w-full flex-wrap items-center rounded-lg border border-[#E0E0E0] bg-[#FDFDFD] opacity-80 shadow-[0_8px_25px_#00000014] hover:opacity-100",
         className,
       )}
     >
-      {children}
+      <div className="flex w-full items-center justify-between px-6">
+        {children}
+      </div>
     </div>
   );
 }

frontend/src/pages/QualifierPage/components/RadioButtonForm.tsx

@@ -3,7 +3,36 @@ import React from "react";
 // Internal Imports
 import Typography from "tw-components/Typography";
 
-function RadioButtonForm() {
+interface RadioButtonFormProps {
+  onSkillSelect: (skill: string, level: string) => void;
+  selectedSkillsLevel: Record<string, string>;
+}
+
+const skills = [
+  {
+    name: "User Research Methods",
+    description: "Interviews, surveys, and usability testing",
+  },
+  {
+    name: "User Personas & Journey Mapping",
+    description:
+      "Developing representative user profiles and mapping user journeys",
+  },
+  {
+    name: "Information Architecture",
+    description:
+      "E.g., creating site maps, navigation flows, or using card sorting",
+  },
+  {
+    name: "Wireframing & Sketching",
+    description: "low-fidelity layouts to visualize structure and flow",
+  },
+];
+
+function RadioButtonForm({
+  onSkillSelect,
+  selectedSkillsLevel,
+}: RadioButtonFormProps) {
   return (
     <table className="w-full table-fixed border-collapse text-charcoal">
       <thead>
@@ -29,22 +58,15 @@ function RadioButtonForm() {
         </tr>
       </thead>
       <tbody>
-        <SkillRow
-          skillName="User Research Methods"
-          description="Interviews, surveys, and usability testing"
-        />
-        <SkillRow
-          skillName="User Personas & Journey Mapping"
-          description="Developing representative user profiles and mapping user journeys"
-        />
-        <SkillRow
-          skillName="Information Architecture"
-          description="E.g., creating site maps, navigation flows, or using card sorting"
-        />
-        <SkillRow
-          skillName="Wireframing & Sketching"
-          description="low-fidelity layouts to visualize structure and flow"
-        />
+        {skills.map((skill) => (
+          <SkillRow
+            key={skill.name}
+            skillName={skill.name}
+            description={skill.description}
+            onSkillSelect={onSkillSelect}
+            selectedLevel={selectedSkillsLevel[skill.name]}
+          />
+        ))}
       </tbody>
     </table>
   );
@@ -53,9 +75,16 @@ function RadioButtonForm() {
 interface SkillRowProps {
   skillName: string;
   description: string;
+  onSkillSelect: (skill: string, level: string) => void;
+  selectedLevel?: string;
 }
 
-function SkillRow({ skillName, description }: SkillRowProps) {
+function SkillRow({
+  skillName,
+  description,
+  onSkillSelect,
+  selectedLevel,
+}: SkillRowProps) {
   return (
     <tr className="border-b-2 border-grey last:border-0">
       <td className="pb-7 pt-6">
@@ -65,13 +94,28 @@ function SkillRow({ skillName, description }: SkillRowProps) {
         </Typography.Paragraph3>
       </td>
       <td>
-        <RadioButton name={skillName} value="0-2yrs" />
+        <RadioButton
+          name={skillName}
+          value="0-2yrs"
+          checked={selectedLevel === "0-2yrs"}
+          onChange={() => onSkillSelect(skillName, "0-2yrs")}
+        />
       </td>
       <td>
-        <RadioButton name={skillName} value="2-4yrs" />
+        <RadioButton
+          name={skillName}
+          value="2-4yrs"
+          checked={selectedLevel === "2-4yrs"}
+          onChange={() => onSkillSelect(skillName, "2-4yrs")}
+        />
       </td>
       <td>
-        <RadioButton name={skillName} value="4+yrs" />
+        <RadioButton
+          name={skillName}
+          value="4+yrs"
+          checked={selectedLevel === "4+yrs"}
+          onChange={() => onSkillSelect(skillName, "4+yrs")}
+        />
       </td>
     </tr>
   );
@@ -80,14 +124,18 @@ function SkillRow({ skillName, description }: SkillRowProps) {
 interface RadioButtonProps {
   value: string;
   name: string;
+  checked?: boolean;
+  onChange: () => void;
 }
 
-function RadioButton({ value, name }: RadioButtonProps) {
+function RadioButton({ value, name, checked, onChange }: RadioButtonProps) {
   return (
     <input
       type="radio"
       name={name}
       value={value}
+      checked={checked}
+      onChange={onChange}
       className="size-8 border-2 border-grey-dark checked:bg-blue-dark"
     />
   );