Table updates for new appointments fields. Schedule modal baseline functionality. Refactor schedule components to be more reusable.

client/src/components/schedule-event/schedule-event.component.jsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { Popover, Button } from "antd";
+import CurrencyFormatter from "../../utils/CurrencyFormatter";
+import PhoneFormatter from "../../utils/PhoneFormatter";
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+export default function ScheduleEventComponent({ event, handleCancel }) {
+  const { t } = useTranslation();
+  const popoverContent = (
+    <div>
+      <div>{`${t("jobs.fields.ro_number")}: ${event.job.ro_number}`}</div>
+      <div>
+        {t("jobs.fields.clm_total")}:
+        <CurrencyFormatter>{event.job.clm_total}</CurrencyFormatter>
+      </div>
+      <div>{`${t("jobs.fields.clm_no")}: ${event.job.clm_no}`}</div>
+      <div>
+        {t("jobs.fields.ownr_ea")}:{event.job.ownr_ea}
+      </div>
+      <div>
+        {t("jobs.fields.ownr_ph1")}:
+        <PhoneFormatter>{event.job.ownr_ph1}</PhoneFormatter>
+      </div>
+      <Link to={`/manage/jobs/${event.job.id}`}>
+        <Button>{t("appointments.actions.viewjob")}</Button>
+      </Link>
+      <Button onClick={() => handleCancel(event.id)}>
+        {t("appointments.actions.cancel")}
+      </Button>
+      <Button>
+        {
+          //TODO: Add reschedule Func.
+        }
+        {t("appointments.actions.reschedule")}
+      </Button>
+      <Button>
+        {
+          //TODO: Add intake func.
+        }
+        {t("appointments.actions.intake")}
+      </Button>
+    </div>
+  );
+
+  return (
+    <Popover content={popoverContent}>
+      <div>
+        <strong>{`${event.job.ownr_fn || ""} ${event.job.ownr_ln ||
+          ""}`}</strong>
+        <span style={{ margin: 4 }}>
+          {`${event.job.vehicle.v_model_yr || ""} ${event.job.vehicle
+            .v_make_desc || ""} ${event.job.vehicle.v_model_desc || ""}`}
+        </span>
+      </div>
+    </Popover>
+  );
+}