fix(#156): have a user be able to apply as a trainee

.gitignore

@@ -6,4 +6,4 @@ dist
 buildcoverage
 package-lock.json
 .DS_Store
-build/
+build/ 

src/components/Education.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import InputField from './form/InputField';
+
+interface FormData {
+    gender: string;
+    birth_date: string;
+    Address: string;
+    phone: string;
+    field_of_study: string;
+    education_level: string;
+    province: string;
+    district: string;
+    sector: string;
+    isEmployed: string;
+    haveLaptop: string;
+    isStudent: string;
+    past_andela_programs: string;
+    understandTraining: string;
+  }
+
+interface EducationSectionProps {
+  formData: FormData;
+  handleInputChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void;
+  isDarkMode: boolean;
+}
+
+const EducationSection: React.FC<EducationSectionProps> = ({ formData, handleInputChange, isDarkMode }) => {
+  const inputClassName = `w-52 md:w-2/3 rounded-md px-2 py-2 border ${
+    isDarkMode
+      ? 'border-white placeholder:text-gray-400 text-white bg-[#1F2A37]'
+      : 'border-gray-300 placeholder:text-gray-500 text-gray-900 bg-white'
+  } sm:text-[12px] outline-none`;
+  return (
+    <>
+      <div className='space-y-3'>
+          <div>
+          <label htmlFor="education_level" className={isDarkMode ? 'text-white' : 'text-gray-800'}>
+          What is your highest level of education?
+        </label>
+            <InputField 
+              name="education_level" 
+              placeholder="Education level"
+              type="text"
+              value={formData.education_level}
+              onChange={handleInputChange}
+              className={inputClassName}
+            />
+          </div>
+          <div>
+          <label htmlFor="field_of_study" className={isDarkMode ? 'text-white' : 'text-gray-800'}>
+          What is your field of education?
+          </label>
+            <InputField 
+              name="field_of_study" 
+              placeholder="field of study"
+              type="text"
+              value={formData.field_of_study}
+              onChange={handleInputChange}
+              className={inputClassName}
+            />
+          </div>
+      </div>
+    </>
+  );
+};
+
+export default EducationSection;

src/components/Location.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import InputField from './form/InputField';
+
+interface FormData {
+  gender: string;
+  birth_date: string;
+  Address: string;
+  phone: string;
+  field_of_study: string;
+  education_level: string;
+  province: string;
+  district: string;
+  sector: string;
+  isEmployed: string;
+  haveLaptop: string;
+  isStudent: string;
+  past_andela_programs: string;
+  understandTraining: string;
+}
+
+interface LocationSectionProps {
+  formData: FormData;
+  handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  isDarkMode: boolean;
+}
+
+const LocationSection: React.FC<LocationSectionProps> = ({ 
+  formData, 
+  handleInputChange,   
+  isDarkMode 
+}) => {
+  const inputClassName = `w-52 md:w-2/3 rounded-md px-2 py-2 border ${
+    isDarkMode
+      ? 'border-white placeholder:text-gray-400 text-white bg-[#1F2A37]'
+      : 'border-gray-300 placeholder:text-gray-500 text-gray-900 bg-white'
+  } sm:text-[12px] outline-none`;
+
+  return (
+    <>
+      <InputField
+        name="province"
+        placeholder="Province"
+        label='Province'
+        type="text"
+        value={formData.province}
+        onChange={handleInputChange}
+        className={inputClassName}
+      />
+
+      <InputField
+        name="district"
+        placeholder="District"
+        label='District'
+        type="text"
+        value={formData.district}
+        onChange={handleInputChange}
+        className={inputClassName}
+      />
+
+      <InputField
+        name="sector"
+        placeholder="Sector"
+        label='Sector'
+        type="text"
+        value={formData.sector}
+        onChange={handleInputChange}
+        className={inputClassName}
+      />
+
+      <InputField
+        name="birth_date"
+        placeholder="Date of birth"
+        label='Choose date'
+        type="date"
+        value={formData.birth_date}
+        onChange={handleInputChange}
+        className={inputClassName}
+      />
+
+      <div className='space-y-3'>
+        <label htmlFor="Gender" className={isDarkMode ? 'text-white' : 'text-gray-800'}>Gender</label>
+        <div>
+          <input 
+            type="radio" 
+            name="gender" 
+            value="male"
+            checked={formData.gender === "male"}
+            onChange={handleInputChange}
+          /> Male
+        </div>
+        <div>
+          <input 
+            type="radio" 
+            name="gender" 
+            value="female"
+            checked={formData.gender === "female"}
+            onChange={handleInputChange}
+          /> Female
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default LocationSection;

src/components/Personal.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import InputField from './form/InputField';
+
+interface FormData {
+  gender: string;
+  birth_date: string;
+  Address: string;
+  phone: string;
+  field_of_study: string;
+  education_level: string;
+  province: string;
+  district: string;
+  sector: string;
+  isEmployed: string;
+  haveLaptop: string;
+  isStudent: string;
+  past_andela_programs: string;
+  understandTraining: string;
+}
+
+interface PersonalInfoSectionProps {
+    formData: FormData;
+    handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    isDarkMode: boolean;
+  }
+
+  const PersonalInfoSection: React.FC<PersonalInfoSectionProps> = ({ formData, handleInputChange, isDarkMode }) => {
+    const inputClassName = `w-52 md:w-2/3 rounded-md px-2 py-2 border ${
+      isDarkMode
+        ? 'border-white placeholder:text-gray-400 text-white bg-[#1F2A37]'
+        : 'border-gray-300 placeholder:text-gray-500 text-gray-900 bg-white'
+    } sm:text-[12px] outline-none`;
+
+    return (
+      <>
+        <InputField
+          name="Address"
+          placeholder="Address"
+          label='Address'
+          type="text"
+          value={formData.Address}
+          onChange={handleInputChange}
+          className={inputClassName}
+        />
+
+        <InputField
+          name="phone"
+          placeholder="Phone"
+          label='Phone'
+          type="text"
+          value={formData.phone}
+          onChange={handleInputChange}
+          className={inputClassName}
+        />
+
+        <div className='flex flex-col space-y-3'>
+          <label htmlFor="isStudent" className={isDarkMode ? 'text-white' : 'text-gray-800'}>Are you currently Studying</label>
+          <div>
+            <input 
+              type="radio" 
+              name="isStudent" 
+              value="yes"
+              checked={formData.isStudent === "yes"}
+              onChange={handleInputChange}
+            /> Yes
+          </div>
+          <div>
+            <input 
+              type="radio" 
+              name="study" 
+              value="no"
+              checked={formData.isStudent === "no"}
+              onChange={handleInputChange}
+            /> No
+          </div>
+        </div>
+      </>
+    );
+  };
+
+  export default PersonalInfoSection;

src/components/Tables/DynamicTable.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-
+import { Link } from 'react-router-dom';
 interface FieldData {
   key: string;
   value: string | null;