Applicant form data

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

@@ -0,0 +1,65 @@
+import React from "react";
+
+type ApplicationStatus =
+  | "Pending Review"
+  | "Scheduling Interview"
+  | "Interview Scheduled"
+  | "Interview Complete"
+  | "Decision Made";
+
+type Decision = "Accepted" | "Waitlisted" | "Rejected";
+
+type Application = {
+  status: ApplicationStatus;
+  firstName: string;
+  lastName: string;
+  netid: string;
+  term: string;
+  interviewTime?: Date;
+  interviewMeetingLink?: string;
+  noShowCount?: number;
+  decision?: Decision;
+  decisionReason?: string;
+  notes?: string;
+};
+
+type Props = {
+  application: Application;
+};
+
+export default function ApplicantInfoPage({ application }: Props) {
+  return (
+    <div className="p-8">
+      <div className="text-sm text-gray-700 mb-2">
+        Applicant Tracking &gt;&gt; Applicants &gt;&gt; {application.firstName} {application.lastName}
+      </div>
+
+      <h1 className="text-2xl font-semibold mb-2">
+        Applicant: ({application.firstName} {application.lastName})
+      </h1>
+
+      <div className="h-1 w-full bg-orange-400 mb-6" />
+
+      <div className="bg-blue-200 p-6 rounded w-full max-w-4xl">
+        <div className="flex flex-wrap gap-4">
+          <LabeledField label="First Name:" value={application.firstName} />
+          <LabeledField label="Last Name:" value={application.lastName} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function LabeledField({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex flex-col">
+      <label className="text-sm font-medium mb-1">{label}</label>
+      <input
+        type="text"
+        value={value}
+        readOnly
+        className="border border-gray-600 px-2 py-1 w-48 bg-white"
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,34 @@
+import React from 'react';
+
+const SearchBar = ({ value, onChange }) => {
+  return (
+    <div style={styles.container}>
+      <input
+        type="text"
+        placeholder="Applicant Name"
+        value={value}
+        onChange={onChange}
+        style={styles.input}
+      />
+    </div>
+  );
+};
+
+const styles = {
+  container: {
+    display: 'flex',
+    alignItems: 'center',
+    padding: '0.5rem',
+  },
+  input: {
+    width: '250px',
+    height: '36px',
+    padding: '0 12px',
+    border: '1px solid #ccc',
+    borderRadius: '6px',
+    fontSize: '14px',
+    outline: 'none',
+  },
+};
+
+export default SearchBar;