From 44959fe6f221bcd50e42c56044f730633b7d131b Mon Sep 17 00:00:00 2001 From: Ish Date: Wed, 18 Oct 2023 12:10:30 -0400 Subject: [PATCH 1/8] adding the page layout and router in react for job forms --- package-lock.json | 61 ++++++++++++++++++++++++++++++++++++++++ package.json | 1 + src/App.tsx | 15 ++++++++-- src/Home/Home.js | 19 +++++++++++++ src/Home/Nav.js | 42 +++++++++++++++++++++++++++ src/Home/Page.js | 8 ++++++ src/forms/FormExample.js | 5 ++-- src/forms/JobForm.js | 12 ++++++++ 8 files changed, 158 insertions(+), 5 deletions(-) create mode 100644 src/Home/Home.js create mode 100644 src/Home/Nav.js create mode 100644 src/Home/Page.js create mode 100644 src/forms/JobForm.js diff --git a/package-lock.json b/package-lock.json index 28c18f5..1969686 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "react": "^18.2.0", "react-datepicker": "^4.20.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.17.0", "react-scripts": "5.0.1", "react-select": "^5.7.7", "web-vitals": "^2.1.4", @@ -3393,6 +3394,14 @@ "url": "https://opencollective.com/popperjs" } }, + "node_modules/@remix-run/router": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.10.0.tgz", + "integrity": "sha512-Lm+fYpMfZoEucJ7cMxgt4dYt8jLfbpwRCzAjm9UgSLOkmlqo9gupxt6YX3DY0Fk155NT9l17d/ydi+964uS9Lw==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -14859,6 +14868,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.17.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.17.0.tgz", + "integrity": "sha512-YJR3OTJzi3zhqeJYADHANCGPUu9J+6fT5GLv82UWRGSxu6oJYCKVmxUcaBQuGm9udpWmPsvpme/CdHumqgsoaA==", + "dependencies": { + "@remix-run/router": "1.10.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.17.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.17.0.tgz", + "integrity": "sha512-qWHkkbXQX+6li0COUUPKAUkxjNNqPJuiBd27dVwQGDNsuFBdMbrS6UZ0CLYc4CsbdLYTckn4oB4tGDuPZpPhaQ==", + "dependencies": { + "@remix-run/router": "1.10.0", + "react-router": "6.17.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -20384,6 +20423,11 @@ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==" }, + "@remix-run/router": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.10.0.tgz", + "integrity": "sha512-Lm+fYpMfZoEucJ7cMxgt4dYt8jLfbpwRCzAjm9UgSLOkmlqo9gupxt6YX3DY0Fk155NT9l17d/ydi+964uS9Lw==" + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -28579,6 +28623,23 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" }, + "react-router": { + "version": "6.17.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.17.0.tgz", + "integrity": "sha512-YJR3OTJzi3zhqeJYADHANCGPUu9J+6fT5GLv82UWRGSxu6oJYCKVmxUcaBQuGm9udpWmPsvpme/CdHumqgsoaA==", + "requires": { + "@remix-run/router": "1.10.0" + } + }, + "react-router-dom": { + "version": "6.17.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.17.0.tgz", + "integrity": "sha512-qWHkkbXQX+6li0COUUPKAUkxjNNqPJuiBd27dVwQGDNsuFBdMbrS6UZ0CLYc4CsbdLYTckn4oB4tGDuPZpPhaQ==", + "requires": { + "@remix-run/router": "1.10.0", + "react-router": "6.17.0" + } + }, "react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/package.json b/package.json index 536a257..a23741f 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "react": "^18.2.0", "react-datepicker": "^4.20.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.17.0", "react-scripts": "5.0.1", "react-select": "^5.7.7", "web-vitals": "^2.1.4", diff --git a/src/App.tsx b/src/App.tsx index 4cf5b4d..72da07c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,19 @@ import FormExample from "./forms/FormExample"; +import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; +import JobForm from "./forms/JobForm"; +import Home from "./Home/Home"; +import Nav from "./Home/Nav"; function App() { return ( -
- -
+ + ); diff --git a/src/Home/Page.js b/src/Home/Page.js index 9616d8d..74e3997 100644 --- a/src/Home/Page.js +++ b/src/Home/Page.js @@ -2,7 +2,11 @@ import React from "react"; function Page({ children }) { - return
{children}
; + return ( +
+ {children} +
+ ); } export default Page; diff --git a/src/forms/JobAction.js b/src/forms/JobAction.js new file mode 100644 index 0000000..4fc37dc --- /dev/null +++ b/src/forms/JobAction.js @@ -0,0 +1,607 @@ +import Page from "../Home/Page"; +import { useState } from "react"; +import { Formik, Form } from "formik"; +import FieldControl from "../components/FieldControl/FieldControl"; +import FieldWrapper from "../components/FieldWrapper/FieldWrapper"; + +function JobAction() { + const formOnSubmit = async (values) => { + console.log(values); + }; + const initialValues = {}; + const [loading, setLoading] = useState(false); + const [requisitions, setRequisitions] = useState([]); + + const SelectStatus = [ + { + value: "", + key: "Select Option", + }, + { + value: "S", + key: "Saved", + }, + { + value: "M", + key: "My", + }, + { + value: "P", + key: "In-Progress", + }, + { + value: "X", + key: "Cancelled", + }, + { + value: "C", + key: "Complete", + }, + ]; + + const ActionOption = [ + { + value: "1", + key: "Correct", + }, + { + value: "2", + key: "Approve", + }, + { + value: "3", + key: "Return for Correction", + }, + { + value: "4", + key: "Cancel Requisition", + }, + { + value: "5", + key: "Terminate Payment", + }, + { + value: "6", + key: "Extend Job", + }, + ]; + + console.log(SelectStatus); + + return ( + <> + +
+
+
+

+ Job Action Screen +

+
+ + + {(formik) => ( +
+
+

+ Filters +

+
+ + + + + + + + + + +
+

+ Select a requisition for more detail +

+
+ +
+
+
+ + + + + + + + + + + + + + + + + + {/* + {requisitions && + requisitions.length > 0 && + requisitions.map((person) => ( + + + + + + + + + + + + + + + ))} + */} +
+ + + Req# + + ID + + Name + + Job Description + + Payment Type + + Start Date + + End Date + + Status + + Warnings + + Current Approver + + Action +
+ + + {person.requisition} + + {person.eid} + + {person.name} + + {person.jobTitle} + + {person.paymentType} + + {person.beginDate} + + {person.endDate} + + {person.statusDesc} + + {person.errorList} + + {person.currLevel} + + + + + {modelData?.job && ( +
+

+ Job Details +

+
+
+
+ Department +
+
+ MISSING +
+
+
+
+ Hourly Rate of Pay +
+
+ { + modelData?.job + .nzbjobrHourlyRate + } +
+
+
+
+ Hours/Pay +
+
+ $ + { + modelData?.job + .nzbjobrHoursPerWeek + } +
+
+
+
+ Total Amount / Pay +
+
+ $ + { + modelData?.job + .nzbjobrTotalHours + } +
+
+
+
+ Total Amount +
+
+ $ + { + modelData?.job + .nzbjobrTotalAmountDue + } +
+
+
+
+ Approver Name +
+
+ {modelData?.job.nzbjobrUserId} +
+
+
+
+ )} + + {modelData?.foaps?.length > 0 && ( +
+

+ Funding Details +

+ + + + + + + + + + + + + + {modelData?.foaps?.map( + (jobDetail: any) => ( + + + + + + + + + + ) + )} + +
+ Index# + + Fund + + Org + + Account + + Program + + Activity + + Allocation +
+ { + jobDetail.nzrjlabAccountIndexCode + } + + { + jobDetail.nzrjlabFundCode + } + + { + jobDetail.nzrjlabOrgnCode + } + + { + jobDetail.nzrjlabAcctCode + } + + { + jobDetail.nzrjlabProgCode + } + + { + jobDetail.nzrjlabActivityDate + } + + {jobDetail.nzrjlabPercent} +
+
+ )} + + {modelData?.decisions?.length > 0 && ( +
+

+ Decision Details +

+ + + + + + + + + + + + {modelData?.decisions.map( + (decicionDetail: any) => ( + + + + + + + + ) + )} + +
+ Date + + Approver + + Role + + Decision + + Comments +
+ {decicionDetail.decnDate} + + {decicionDetail.apprName} + + { + decicionDetail.apprLevelDesc + } + + {decicionDetail.decnDesc} + + { + decicionDetail.decnComment + } +
+
+ )} + +
+

Need to add content to table body

+
+
+
+ +
+

+ Action +

+
+ + + + + + + + + + + + + + + )} +
+
+
+ + + ); +} + +export default JobAction; From 12f96e97e8a74e9b4a407b04ff7c1c1d5721286a Mon Sep 17 00:00:00 2001 From: Ish Date: Wed, 18 Oct 2023 15:10:44 -0400 Subject: [PATCH 3/8] change: adding the employment approval and payroll services --- src/App.tsx | 4 + src/Home/Nav.js | 16 + src/forms/EmployeeApproval.js | 285 ++++++++++++++++++ src/forms/FormExample.js | 16 +- src/forms/JobAction.js | 2 +- src/forms/PayrollServices.js | 546 ++++++++++++++++++++++++++++++++++ 6 files changed, 859 insertions(+), 10 deletions(-) create mode 100644 src/forms/EmployeeApproval.js create mode 100644 src/forms/PayrollServices.js diff --git a/src/App.tsx b/src/App.tsx index c0312c7..01c1daf 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,6 +4,8 @@ import JobForm from "./forms/JobForm"; import Home from "./Home/Home"; import Nav from "./Home/Nav"; import JobAction from "./forms/JobAction"; +import EmployeeApproval from "./forms/EmployeeApproval"; +import PayrollServices from "./forms/PayrollServices"; function App() { return ( @@ -14,6 +16,8 @@ function App() { } /> } /> } /> + } /> + } /> ); diff --git a/src/Home/Nav.js b/src/Home/Nav.js index b0883c1..021db91 100644 --- a/src/Home/Nav.js +++ b/src/Home/Nav.js @@ -13,6 +13,8 @@ function Nav() { else if (path === "/formExample") setActivePage("formExample"); else if (path === "/jobForm") setActivePage("jobForm"); else if (path === "/jobAction") setActivePage("jobAction"); + else if (path === "/employeeApproval") setActivePage("employeeApproval"); + else if (path === "/payrollServices") setActivePage("payrollServices"); }, [location.pathname]); return ( @@ -38,6 +40,20 @@ function Nav() { > Job Action +
  • + Employee Approval +
    • +
  • + Payroll Services +
    • ); diff --git a/src/forms/EmployeeApproval.js b/src/forms/EmployeeApproval.js new file mode 100644 index 0000000..71d56a5 --- /dev/null +++ b/src/forms/EmployeeApproval.js @@ -0,0 +1,285 @@ +import React, { useState } from "react"; +import Page from "../Home/Page"; +import { Formik, Form } from "formik"; +import FieldControl from "../components/FieldControl/FieldControl"; + +function EmployeeApproval() { + const [loading, setLoading] = useState(false); + const initialValues = { + // firstname: "", + // lastname: "", + // email: "", + // description: "", + // selectOption: "", + // radioOption: "", + // checkboxOption: [], + // birthDate: null, + // autoSuggestCountry: "", + }; + const onSubmit = (values) => console.log("Form data", values); + const SelectStatus = [ + { + value: "", + key: "Select Option", + }, + { + value: "S", + key: "Saved", + }, + { + value: "M", + key: "My", + }, + { + value: "P", + key: "In-Progress", + }, + { + value: "X", + key: "Cancelled", + }, + { + value: "C", + key: "Complete", + }, + ]; + + return ( + + + {(formik) => ( +
    +
    +

    + Employee Approval +

    +
    +
    +

    + Filters +

    +
    + + {/* + setSearchField({ + ...searchField, + status: event?.target.value, + }) + } + /> */} + + + + +
    +

    + Select a requisition for more detail +

    +
    + + + + + + + + + + + + + + + {/* + {requisitions && + requisitions.length > 0 && + requisitions.map((person: any) => ( + + + + + + + + + + + ))} + */} +
    + + + Req# + + Job Description + + Payment Type + + Start Date + + End Date + + Status + + Action +
    + + + {person.requisition} + + {person.jobTitle} + + {person.paymentType} + + {person.beginDate} + + {person.endDate} + + {person.statusDesc} + + + + + {modelData?.job && ( +
    +

    + Job Details +

    +
    +
    +
    + Hourly Rate of Pay +
    +
    + {modelData?.job.nzbjobrHourlyRate} +
    +
    +
    +
    + Hours/Pay +
    +
    + ${modelData?.job.nzbjobrHoursPerWeek} +
    +
    +
    +
    + Total Amount / Pay +
    +
    + ${modelData?.job.nzbjobrTotalHours} +
    +
    +
    +
    + Total Amount +
    +
    + ${modelData?.job.nzbjobrTotalAmountDue} +
    +
    +
    +
    + )} +     +
    + +
    +

    + Action +

    +
    + + + + + + + )} +
    +     + ); +} + +export default EmployeeApproval; diff --git a/src/forms/FormExample.js b/src/forms/FormExample.js index d5cf4b2..12f9c89 100644 --- a/src/forms/FormExample.js +++ b/src/forms/FormExample.js @@ -213,15 +213,13 @@ function FormExample() { required /> - - - {/* */} + )} diff --git a/src/forms/JobAction.js b/src/forms/JobAction.js index 4fc37dc..1345860 100644 --- a/src/forms/JobAction.js +++ b/src/forms/JobAction.js @@ -10,7 +10,7 @@ function JobAction() { }; const initialValues = {}; const [loading, setLoading] = useState(false); - const [requisitions, setRequisitions] = useState([]); + // const [requisitions, setRequisitions] = useState([]); const SelectStatus = [ { diff --git a/src/forms/PayrollServices.js b/src/forms/PayrollServices.js new file mode 100644 index 0000000..a304e0c --- /dev/null +++ b/src/forms/PayrollServices.js @@ -0,0 +1,546 @@ +import React from "react"; +import Page from "../Home/Page"; +import { useState } from "react"; +import { Formik, Form } from "formik"; +import FieldControl from "../components/FieldControl/FieldControl"; +import FieldWrapper from "../components/FieldWrapper/FieldWrapper"; + +function PayrollServices() { + const initialValues = {}; + const [loading, setLoading] = useState(false); + const formOnSubmit = async (values) => { + console.log(values); + }; + const SelectStatus = [ + { + value: "", + key: "Select Option", + }, + { + value: "S", + key: "Saved", + }, + { + value: "M", + key: "My", + }, + { + value: "P", + key: "In-Progress", + }, + { + value: "X", + key: "Cancelled", + }, + { + value: "C", + key: "Complete", + }, + ]; + + const JobType = [ + { + value: "1", + key: "Job Type 1 ", + }, + { + value: "2", + key: "Job Type 2", + }, + { + value: "3", + key: "Job Type 3", + }, + { + value: "4", + key: "Job Type 4", + }, + { + value: "5", + key: "Job Type 5", + }, + { + value: "6", + key: "Job Type 6", + }, + ]; + + return ( + +
    +

    + Payroll Services +

    +
    + + {(formik) => ( +
    +
    +

    + Filters +

    +
    + + + + + + + + + + + + + + +
    +

    + Select a requisition for more detail +

    +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + {/* + {requisitions && + requisitions.length > 0 && + requisitions.map((person: any) => ( + + + + + + + + + + + + + + + ))} + */} +
    + + + Req# + + ID + + Name + + Job Description + + Payment Type + + Start Date + + End Date + + Status + + Warnings + + Current Approver + + Action +
    + + + {person.requisition} + + {person.apprId} + + {person.name} + + {person.jobTitle} + + {person.paymentType} + + {person.beginDate} + + {person.endDate} + + {person.statusDesc} + + {person.errorList} + + {person.currLevel} + + + + + {modelData?.job && ( +
    +

    + Job Details +

    +
    +
    +
    + Department +
    +
    + {modelData.department} +
    +
    +
    +
    + Hourly Rate of Pay +
    +
    + $ + { + modelData?.job + .nzbjobrHourlyRate + } +
    +
    +
    +
    + Hours/Pay +
    +
    + $ + { + modelData?.job + .nzbjobrHoursPerWeek + } +
    +
    +
    +
    + Total Amount / Pay +
    +
    + $ + { + modelData?.job + .nzbjobrTotalHours + } +
    +
    +
    +
    + Total Amount +
    +
    + $ + { + modelData?.job + .nzbjobrTotalAmountDue + } +
    +
    +
    +
    + Approver Name +
    +
    + {modelData?.job.nzbjobrUserId} +
    +
    +
    +
    + )} + + {modelData?.foaps?.length > 0 && ( +
    +

    + Funding Details +

    + + + + + + + + + + + + + + {modelData?.foaps?.map( + (jobDetail: any) => ( + + + + + + + + + + ) + )} + +
    + Index# + + Fund + + Org + + Account + + Program + + Activity + + Allocation +
    + {jobDetail.index} + + {jobDetail.fund} + + {jobDetail.org} + + {jobDetail.account} + + {jobDetail.program} + + {jobDetail.activity} + + {jobDetail.allocation} +
    +
    + )} + + {modelData?.decisions?.length > 0 && ( +
    +

    + Decision Details +

    + + + + + + + + + + + + {modelData?.decisions.map( + (decicionDetail: any) => ( + + + + + + + + ) + )} + +
    + Date + + Approver + + Role + + Decision + + Comments +
    + {decicionDetail.decnDate} + + {decicionDetail.apprName} + + { + decicionDetail.apprLevelDesc + } + + {decicionDetail.decnDesc} + + { + decicionDetail.decnComment + } +
    +
    + )} +     +
    +
    +
    +
    +
    +

    + Action +

    +
    + + + + + )} +
    +     + ); +} + +export default PayrollServices; From b0ea0eb57330434a7a6c0c3d34ce5466b7b1180a Mon Sep 17 00:00:00 2001 From: Ish Date: Thu, 19 Oct 2023 11:45:45 -0400 Subject: [PATCH 4/8] change: updating the date time picker to use react-datepicker and adding options --- src/App.tsx | 2 + src/Home/Nav.js | 10 +- src/components/DatePicker/DatePicker.js | 46 -- src/components/DatePicker/DateTimePicker.js | 67 +++ src/components/FieldControl/FieldControl.js | 4 +- src/forms/FormExample.js | 5 + src/forms/ResearchFinancial.js | 559 ++++++++++++++++++++ 7 files changed, 644 insertions(+), 49 deletions(-) delete mode 100644 src/components/DatePicker/DatePicker.js create mode 100644 src/components/DatePicker/DateTimePicker.js create mode 100644 src/forms/ResearchFinancial.js diff --git a/src/App.tsx b/src/App.tsx index 01c1daf..59e6356 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,6 +6,7 @@ import Nav from "./Home/Nav"; import JobAction from "./forms/JobAction"; import EmployeeApproval from "./forms/EmployeeApproval"; import PayrollServices from "./forms/PayrollServices"; +import ResearchFinancial from "./forms/ResearchFinancial"; function App() { return ( @@ -18,6 +19,7 @@ function App() { } /> } /> } /> + } /> ); diff --git a/src/Home/Nav.js b/src/Home/Nav.js index 021db91..6939fd6 100644 --- a/src/Home/Nav.js +++ b/src/Home/Nav.js @@ -15,6 +15,7 @@ function Nav() { else if (path === "/jobAction") setActivePage("jobAction"); else if (path === "/employeeApproval") setActivePage("employeeApproval"); else if (path === "/payrollServices") setActivePage("payrollServices"); + else if (path === "/researchFinancial") setActivePage("researchFinancial"); }, [location.pathname]); return ( @@ -49,11 +50,18 @@ function Nav() {
  • Payroll Services
    • +
  • + Research Financial +
    • ); diff --git a/src/components/DatePicker/DatePicker.js b/src/components/DatePicker/DatePicker.js deleted file mode 100644 index 12511e4..0000000 --- a/src/components/DatePicker/DatePicker.js +++ /dev/null @@ -1,46 +0,0 @@ -import React from 'react' -import { Field, ErrorMessage } from 'formik' -import TextError from '../TextError/TextError' -import DateView from "react-datepicker"; -import "react-datepicker/dist/react-datepicker.css"; -import { primaryStyles, textStyles, fieldStyles } from '../../styles/styles' - -function DatePicker(props) { - const { label, name, helper, required, ...rest } = props; - const requiredClass = required ? primaryStyles.required : '' - - return ( -
    - - - {helper &&
    {helper}
    } - - - {({ form, field }) => { - const { setFieldValue } = form - const { value } = field - - return ( - setFieldValue(name, val)} - className={fieldStyles.input} - /> - ) - }} - - - -
    - ) -} - -export default DatePicker \ No newline at end of file diff --git a/src/components/DatePicker/DateTimePicker.js b/src/components/DatePicker/DateTimePicker.js new file mode 100644 index 0000000..edb7bf5 --- /dev/null +++ b/src/components/DatePicker/DateTimePicker.js @@ -0,0 +1,67 @@ +import React from "react"; +import { ErrorMessage, useField } from "formik"; +import TextError from "../TextError/TextError"; +import DatePicker from "react-datepicker"; +import "react-datepicker/dist/react-datepicker.css"; +import { primaryStyles, textStyles, fieldStyles } from "../../styles/styles"; +import { getMaxWidthClass } from "../../helpers/optionClasses"; + +function DateTimePicker(props) { + const { + label, + name, + helper, + required, + showTime, + dateFormat = "MMMM d, yyyy", + timeFormat = "HH:mm", + timeIntervals = 15, + placeholder, + customMinDate, + maxWidth, + ...rest + } = props; + const requiredClass = required ? primaryStyles.required : ""; + const [field, , helpers] = useField(name); + const { setValue, setTouched, setError } = helpers; + + const fieldMaxWidth = getMaxWidthClass(maxWidth); + + const setFieldProps = (date) => { + setValue(date); + setTouched(true); + setError(undefined); + }; + + return ( +
    + + + {helper &&
    {helper}
    } + + { + setFieldProps(date); + }} + showTimeSelect={showTime} + timeFormat={timeFormat} + timeIntervals={timeIntervals} + dateFormat={dateFormat} + minDate={customMinDate || new Date()} + placeholderText={placeholder} + className={`${fieldStyles.input} w-full`} + {...rest} + /> + + +
    + ); +} + +export default DateTimePicker; diff --git a/src/components/FieldControl/FieldControl.js b/src/components/FieldControl/FieldControl.js index fa90811..ee8d61f 100644 --- a/src/components/FieldControl/FieldControl.js +++ b/src/components/FieldControl/FieldControl.js @@ -4,7 +4,7 @@ import TextArea from "../TextArea/TextArea"; import Select from "../Select/Select"; import Radio from "../Radio/Radio"; import Checkbox from "../Checkbox/Checkbox"; -import DatePicker from "../DatePicker/DatePicker"; +import DateTimePicker from "../DatePicker/DateTimePicker"; import AutoSuggest from "../AutoSuggest/AutoSuggest"; function FieldControl(props) { @@ -22,7 +22,7 @@ function FieldControl(props) { case "checkbox": return ; case "date": - return ; + return ; case "autosuggest": return ; default: diff --git a/src/forms/FormExample.js b/src/forms/FormExample.js index 12f9c89..d0ce9b7 100644 --- a/src/forms/FormExample.js +++ b/src/forms/FormExample.js @@ -210,7 +210,12 @@ function FormExample() { label="Pick a date" name="birthDate" helper="Please specify your DOB" + dateFormat="MMMM d, yyyy" + placeholder="MMMM d, yyyy , --:--" + customMinDate={new Date(1990, 10, 7)} + showTime required + maxWidth="md" /> + +
    +

    + Select a requisition for approval +

    +
    + +
    +
    +
    + + + + + + + + + + + + + + + + + + {/* + {requisitions && + requisitions.length > 0 && + requisitions.map((person: any) => ( + + + + + + + + + + + + + + + ))} + */} +
    + + + Req# + + ID + + Name + + Job Description + + Payment Type + + Start Date + + End Date + + Status + + Warnings + + Current Approver + + Action +
    + + + {person.requisition} + + {person.apprId} + + {person.name} + + {person.jobTitle} + + {person.paymentType} + + {person.beginDate} + + {person.endDate} + + {person.statusDesc} + + {person.errorList} + + {person.currLevel} + + + + + {modelData?.job && ( +
    +

    + Job Details +

    +
    +
    +
    + Department +
    +
    + MISSING +
    +
    +
    +
    + Hourly Rate of Pay +
    +
    + {modelData?.job.nzbjobrHourlyRate} +
    +
    +
    +
    + Hours/Pay +
    +
    + ${modelData?.job.nzbjobrHoursPerWeek} +
    +
    +
    +
    + Total Amount / Pay +
    +
    + ${modelData?.job.nzbjobrTotalHours} +
    +
    +
    +
    + Total Amount +
    +
    + $ + {modelData?.job.nzbjobrTotalAmountDue} +
    +
    +
    +
    + Approver Name +
    +
    + {modelData?.job.nzbjobrUserId} +
    +
    +
    +
    + )} + + {modelData?.foaps?.length > 0 && ( +
    +

    + Funding Details +

    + + + + + + + + + + + + + + {modelData?.foaps?.map( + (jobDetail: any) => ( + + + + + + + + + + ) + )} + +
    + Index# + + Fund + + Org + + Account + + Program + + Activity + + Allocation +
    + { + jobDetail.nzrjlabAccountIndexCode + } + + {jobDetail.nzrjlabFundCode} + + {jobDetail.nzrjlabOrgnCode} + + {jobDetail.nzrjlabAcctCode} + + {jobDetail.nzrjlabProgCode} + + {jobDetail.nzrjlabActivityDate} + + {jobDetail.nzrjlabPercent} +
    +
    + )} + + {modelData?.decisions?.length > 0 && ( +
    +

    + Decision Details +

    + + + + + + + + + + + + {modelData?.decisions.map( + (decicionDetail: any) => ( + + + + + + + + ) + )} + +
    + Date + + Approver + + Role + + Decision + + Comments +
    + {decicionDetail.decnDate} + + {decicionDetail.apprName} + + {decicionDetail.apprLevelDesc} + + {decicionDetail.decnDesc} + + {decicionDetail.decnComment} +
    +
    + )} +     +
    +
    +
    +
    + +
    +

    + Action +

    +
    + + + + + + + + )} + + + ); +} + +export default ResearchFinancial; From 92bc9e4cd088cd45ae485700bff6cecbba96ae5c Mon Sep 17 00:00:00 2001 From: Ish Date: Thu, 19 Oct 2023 14:55:21 -0400 Subject: [PATCH 5/8] change: adding the forms for the casual jobs and the research finance --- src/App.tsx | 2 + src/Home/Nav.js | 8 +- src/components/Checkbox/Checkbox.js | 56 +-- src/components/DatePicker/DateTimePicker.js | 4 +- src/forms/CasualJobs.js | 328 +++++++++++++++ src/forms/FormExample.js | 3 +- src/forms/JobAction.js | 428 ++++++++++---------- src/forms/PayrollServices.js | 8 +- 8 files changed, 585 insertions(+), 252 deletions(-) create mode 100644 src/forms/CasualJobs.js diff --git a/src/App.tsx b/src/App.tsx index 59e6356..c4a9e09 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,6 +7,7 @@ import JobAction from "./forms/JobAction"; import EmployeeApproval from "./forms/EmployeeApproval"; import PayrollServices from "./forms/PayrollServices"; import ResearchFinancial from "./forms/ResearchFinancial"; +import CasualJobs from "./forms/CasualJobs"; function App() { return ( @@ -15,6 +16,7 @@ function App() { } /> } /> + } /> } /> } /> } /> diff --git a/src/Home/Nav.js b/src/Home/Nav.js index 6939fd6..417d56b 100644 --- a/src/Home/Nav.js +++ b/src/Home/Nav.js @@ -11,7 +11,7 @@ function Nav() { const path = location.pathname; if (path === "/") setActivePage("home"); else if (path === "/formExample") setActivePage("formExample"); - else if (path === "/jobForm") setActivePage("jobForm"); + else if (path === "/casualJobs") setActivePage("casualJobs"); else if (path === "/jobAction") setActivePage("jobAction"); else if (path === "/employeeApproval") setActivePage("employeeApproval"); else if (path === "/payrollServices") setActivePage("payrollServices"); @@ -32,9 +32,11 @@ function Nav() { Form Example
  • - Job Forms + Casual Jobs
  • -