Created Decision Form Component

apps/applicant-tracking/src/components/DecisionForm/index.tsx

@@ -0,0 +1,89 @@
+import {
+  Box,
+  TextField,
+  RadioGroup,
+  Radio,
+  FormControlLabel,
+  FormControl,
+  FormLabel,
+  MenuItem,
+} from '@mui/material';
+import React from 'react';
+import { DecisionFormData } from '../../types/decisions';
+
+interface DecisionFormProps {
+  onChange: (formData: DecisionFormData) => void;
+}
+
+export default function DecisionForm({ onChange }: DecisionFormProps) {
+  //create a state?
+  const [formData, setFormData] = React.useState<DecisionFormData>({
+    decision: 'Accepted',
+    reason: '',
+    role: 'Developer',
+  });
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = event.target;
+    const newFormData = { ...formData, [name]: value };
+    setFormData(newFormData);
+    onChange(newFormData);
+  };
+
+  return (
+    <Box>
+      <FormControl component="fieldset">
+        <FormLabel component="legend">Decision</FormLabel>
+        <RadioGroup
+          aria-labelledby="demo-radio-buttons-group-label"
+          name="decision"
+          value={formData.decision}
+          onChange={handleChange}
+        >
+          <FormControlLabel
+            value="Accepted"
+            control={<Radio />}
+            label="Accept"
+          />
+          <FormControlLabel
+            value="Rejected"
+            control={<Radio />}
+            label="Reject"
+          />
+          <FormControlLabel
+            value="Waitlisted"
+            control={<Radio />}
+            label="Waitlist"
+          />
+        </RadioGroup>
+      </FormControl>
+      {/* reason field */}
+      <TextField
+        fullWidth
+        label="Reason"
+        multiline
+        rows={4}
+        name="reason"
+        value={formData.reason || ''}
+        onChange={handleChange}
+      />
+      {/* /role field */}
+      <TextField
+        id="filled-multiline-static"
+        label="Role"
+        select
+        name="role"
+        value={formData.role}
+        onChange={handleChange}
+      >
+        {' '}
+        <MenuItem value="Developer">Developer</MenuItem>
+        <MenuItem value="Designer">Designer</MenuItem>
+        <MenuItem value="Learning Based Project">
+          Learning Based Project
+        </MenuItem>
+        <MenuItem value="Operations">Operations</MenuItem>
+      </TextField>
+    </Box>
+  );
+}

apps/applicant-tracking/src/types/decisions.ts

@@ -0,0 +1,18 @@
+import { z } from 'zod';
+
+export const zDecisionFormData = z.object({
+  decision: z.union([
+    z.literal('Accepted'),
+    z.literal('Rejected'),
+    z.literal('Waitlisted'),
+  ]),
+  reason: z.string().optional(),
+  role: z.union([
+    z.literal('Developer'),
+    z.literal('Designer'),
+    z.literal('Learning Based Project'),
+    z.literal('Operations'),
+  ]),
+});
+
+export type DecisionFormData = z.infer<typeof zDecisionFormData>;

package.json

@@ -28,5 +28,8 @@
     "moment": "^2.30.1",
     "nx": "^17.1.3",
     "react-window": "^1.8.10"
+  },
+  "devDependencies": {
+    "typescript": "^5.4.5"
   }
 }