feat: [NMP-123] Field List Tab (#128)

frontend/src/TempData/RegionOptions.ts

@@ -0,0 +1,8 @@
+const RegionOptions = [
+  { value: 0, label: 'Select a region' },
+  { value: 1, label: 'Bulkley-Nechako' },
+  { value: 2, label: 'Cariboo' },
+  { value: 3, label: 'Columbia Shuswap' },
+];
+
+export default RegionOptions;

frontend/src/components/common/Modal/Modal.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import {
+  ModalWrapper,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  CloseButton,
+} from './modal.styles';
+
+interface ModalProps {
+  isVisible: boolean;
+  title: string;
+  children: React.ReactNode;
+  onClose: () => void;
+  footer?: React.ReactNode;
+}
+
+function Modal({ isVisible, title, children, onClose, footer }: ModalProps) {
+  if (!isVisible) return null;
+
+  return (
+    <ModalWrapper>
+      <ModalContent>
+        <ModalHeader>
+          <h2>{title}</h2>
+          <CloseButton onClick={onClose}>&times;</CloseButton>
+        </ModalHeader>
+        <ModalBody>{children}</ModalBody>
+        {footer && <ModalFooter>{footer}</ModalFooter>}
+      </ModalContent>
+    </ModalWrapper>
+  );
+}
+
+export default Modal;

frontend/src/components/common/Modal/modal.styles.ts

@@ -0,0 +1,50 @@
+import styled from '@emotion/styled';
+
+export const ModalWrapper = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 3000;
+`;
+
+export const ModalContent = styled.div`
+  background: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  width: 500px;
+  max-width: 100%;
+`;
+
+export const ModalHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #ccc;
+  padding-bottom: 10px;
+  margin-bottom: 20px;
+`;
+
+export const ModalBody = styled.div`
+  padding-bottom: 20px;
+`;
+
+export const ModalFooter = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  border-top: 1px solid #ccc;
+  padding-top: 10px;
+  margin-top: 20px;
+`;
+
+export const CloseButton = styled.button`
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+`;

frontend/src/components/common/Tabs/Tabs.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { TabsWrapper, Tab, TabContent } from './tabs.styles';
+
+interface TabProps {
+  label: string;
+  content: React.ReactNode;
+  id: string;
+}
+
+interface TabsProps {
+  tabs: TabProps[];
+  activeTab: number;
+  setActiveTab?: (index: number) => void;
+}
+
+export function TabOptions({ tabs, activeTab, setActiveTab }: TabsProps) {
+  return (
+    <TabsWrapper>
+      <div>
+        {tabs.map((tab, index) => (
+          <Tab
+            key={tab.id}
+            active={index === activeTab}
+            onClick={() => setActiveTab && setActiveTab(index)}
+          >
+            {tab.label}
+          </Tab>
+        ))}
+      </div>
+    </TabsWrapper>
+  );
+}
+
+interface TabContentDisplayProps {
+  tabs: TabProps[];
+  activeTab: number;
+}
+
+export function TabContentDisplay({ tabs, activeTab }: TabContentDisplayProps) {
+  return <TabContent>{tabs[activeTab].content}</TabContent>;
+}

frontend/src/components/common/Tabs/tabs.styles.ts

@@ -0,0 +1,27 @@
+import styled from '@emotion/styled';
+
+export const TabsWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const Tab = styled.button<{ active: boolean }>`
+  padding: 10px 20px;
+  cursor: pointer;
+  background-color: ${({ active }) => (active ? '#036' : '#ccc')};
+  color: ${({ active }) => (active ? '#fff' : '#000')};
+  border: none;
+  border-bottom: ${({ active }) => (active ? '2px solid #fcba19' : 'none')};
+  border-radius: 5px;
+  height: 50px;
+  &:hover {
+    background-color: #036;
+    color: #fff;
+  }
+`;
+
+export const TabContent = styled.div`
+  padding: 20px;
+  background-color: #fff;
+  width: 100%;
+`;

frontend/src/components/common/index.ts

@@ -6,5 +6,6 @@ import RadioButton from './RadioButton/RadioButton';
 import Checkbox from './Checkbox/Checkbox';
 import Dropdown from './DropDown/DropDown';
 import Card from './Card/Card';
+import Modal from './Modal/Modal';
 
-export { Header, Button, Footer, InputField, RadioButton, Checkbox, Dropdown, Card };
+export { Header, Button, Footer, InputField, RadioButton, Checkbox, Dropdown, Card, Modal };

frontend/src/routes/ViewRouter.tsx

@@ -6,6 +6,7 @@ import { Routes, Route } from 'react-router-dom';
 import LandingPage from '../views/LandingPage/LandingPage';
 import FarmInformation from '../views/FarmInformation/FarmInformation';
 import AdminDashboard from '@/views/AdminDashboard/AdminDashboard';
+import FieldAndSoil from '@/views/FieldAndSoil/FieldAndSoil';
 
 export default function ViewRouter() {
   return (
@@ -22,6 +23,10 @@ export default function ViewRouter() {
         path="/admin"
         Component={AdminDashboard}
       />
+      <Route
+        path="/field-and-soil"
+        Component={FieldAndSoil}
+      />
     </Routes>
   );
 }

frontend/src/views/FarmInformation/FarmInformation.tsx

@@ -2,9 +2,11 @@
  * @summary The Farm Information page for the application
  */
 import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import useAppService from '@/services/app/useAppService';
 import NMPFile from '@/types/NMPFile';
 import defaultNMPFile from '../../constants/DefaultNMPFile';
+import RegionOptions from '../../TempData/RegionOptions';
 import {
   CardHeader,
   Banner,
@@ -18,6 +20,7 @@ import { InputField, RadioButton, Checkbox, Dropdown, Card, Button } from '../..
 
 export default function FarmInformation() {
   const { state, setNMPFile } = useAppService();
+  const navigate = useNavigate();
   const [formData, setFormData] = useState({
     Year: '',
     FarmName: '',
@@ -49,13 +52,6 @@ export default function FarmInformation() {
     setFormData({ ...formData, [name]: type === 'checkbox' ? checked : value });
   };
 
-  const regionOptions = [
-    { value: 0, label: 'Select a region' },
-    { value: 1, label: 'Bulkley-Nechako' },
-    { value: 2, label: 'Cariboo' },
-    { value: 3, label: 'Columbia Shuswap' },
-  ];
-
   const handleSubmit = () => {
     let nmpFile: NMPFile;
 
@@ -65,6 +61,7 @@ export default function FarmInformation() {
     nmpFile.farmDetails = { ...nmpFile.farmDetails, ...formData };
 
     setNMPFile(JSON.stringify(nmpFile));
+    navigate('/field-and-soil');
   };
 
   return (
@@ -101,7 +98,7 @@ export default function FarmInformation() {
           label="Region"
           name="FarmRegion"
           value={formData.FarmRegion}
-          options={regionOptions}
+          options={RegionOptions}
           onChange={handleChange}
           flex="0.35"
         />
@@ -143,7 +140,7 @@ export default function FarmInformation() {
       <ButtonWrapper>
         <Button
           text="Next"
-          size="lg"
+          size="sm"
           handleClick={() => {
             handleSubmit();
           }}

frontend/src/views/FarmInformation/farmInformation.styles.ts

@@ -4,23 +4,6 @@
 import styled from '@emotion/styled';
 import screenSizes from '../../constants/screenSizes';
 
-export const Card = styled.div`
-  background-color: rgba(255, 255, 255, 0.8);
-  height: 500px;
-  width: 600px;
-  padding-top: 0;
-  justify-content: flex-start;
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  object-fit: scale-down;
-  border-radius: 8px;
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
-  padding: 20px;
-  text-align: center;
-  position: relative;
-`;
-
 export const CardHeader = styled.div`
   background-color: rgba(200, 200, 200, 0.3);
   padding: 0;
@@ -87,7 +70,7 @@ export const ButtonWrapper = styled.div`
   bottom: 16px;
   right: 16px;
   button {
-    width: 120px;
-    height: 60px;
+    width: 80px;
+    height: 40px;
   }
 `;