From cdd1df30d89e6ebe8f25392e77d80076a73df433 Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <mail@rithviknishad.dev>
Date: Wed, 21 Jun 2023 11:42:32 +0530
Subject: [PATCH] Tailwinds `ResourceCreate.tsx` (#5667)

* tailwinds #4992

* fixes #5692

* adds missing required
---
 src/Components/Resource/ResourceCreate.tsx | 228 ++++++++++-----------
 1 file changed, 110 insertions(+), 118 deletions(-)

diff --git a/src/Components/Resource/ResourceCreate.tsx b/src/Components/Resource/ResourceCreate.tsx
index 2f1203bdc91..6bed5cacee1 100644
--- a/src/Components/Resource/ResourceCreate.tsx
+++ b/src/Components/Resource/ResourceCreate.tsx
@@ -10,7 +10,6 @@ import {
   RESOURCE_SUBCATEGORIES,
 } from "../../Common/constants";
 import { parsePhoneNumberFromString } from "libphonenumber-js";
-import { Card, CardContent } from "@material-ui/core";
 import { phonePreg } from "../../Common/validation";
 
 import { createResource, getAnyFacility } from "../../Redux/actions";
@@ -24,8 +23,9 @@ import { SelectFormField } from "../Form/FormFields/SelectFormField";
 import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
 import RadioFormField from "../Form/FormFields/RadioFormField";
 import { FieldLabel } from "../Form/FormFields/FormField";
+import Card from "../../CAREUI/display/Card";
+import Page from "../Common/components/Page";
 
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 const Loading = loadable(() => import("../Common/Loading"));
 
 interface resourceProps {
@@ -219,121 +219,113 @@ export default function ResourceCreate(props: resourceProps) {
   }
 
   return (
-    <div className="px-2 pb-2">
-      <PageTitle
-        title={t("create_resource_request")}
-        crumbsReplacements={{
-          [facilityId]: { name: facilityName },
-          resource: { style: "pointer-events-none" },
-        }}
-        backUrl={`/facility/${facilityId}`}
-      />
-      <div className="mt-4">
-        <Card>
-          <CardContent>
-            <div className="grid gap-4 grid-cols-1 md:grid-cols-2">
-              <TextFormField
-                required
-                label={t("contact_person")}
-                name="refering_facility_contact_name"
-                value={state.form.refering_facility_contact_name}
-                onChange={handleChange}
-                error={state.errors.refering_facility_contact_name}
-              />
-              <PhoneNumberFormField
-                label={t("contact_phone")}
-                name="refering_facility_contact_number"
-                required
-                disableCountry
-                value={state.form.refering_facility_contact_number}
-                onChange={handleFormFieldChange}
-                error={state.errors.refering_facility_contact_number}
-              />
-
-              <div className="md:col-span-2">
-                <FieldLabel required>{t("approving_facility")}</FieldLabel>
-                <FacilitySelect
-                  multiple={false}
-                  facilityType={1500}
-                  name="approving_facility"
-                  selected={state.form.approving_facility}
-                  setSelected={(value: any) =>
-                    handleValueChange(value, "approving_facility")
-                  }
-                  errors={state.errors.approving_facility}
-                />
-              </div>
-
-              <SelectFormField
-                label={t("category")}
-                name="category"
-                required
-                value={state.form.category}
-                options={RESOURCE_CATEGORY_CHOICES}
-                optionLabel={(option: string) => option}
-                optionValue={(option: string) => option}
-                onChange={({ value }) => handleValueChange(value, "category")}
-              />
-              <SelectFormField
-                label={t("sub_category")}
-                name="sub_category"
-                required
-                value={state.form.sub_category}
-                options={RESOURCE_SUBCATEGORIES}
-                optionLabel={(option: OptionsType) => option.text}
-                optionValue={(option: OptionsType) => option.id}
-                onChange={({ value }) =>
-                  handleValueChange(value, "sub_category")
-                }
-              />
-
-              <TextFormField
-                label={t("request_title")}
-                name="title"
-                placeholder={t("request_title_placeholder")}
-                value={state.form.title}
-                onChange={handleChange}
-                error={state.errors.title}
-              />
-
-              <TextFormField
-                label={t("required_quantity")}
-                name="requested_quantity"
-                value={state.form.required_quantity}
-                onChange={handleChange}
-              />
-
-              <div className="md:col-span-2">
-                <TextAreaFormField
-                  label={t("request_description")}
-                  name="reason"
-                  rows={5}
-                  required
-                  placeholder={t("request_description_placeholder")}
-                  value={state.form.reason}
-                  onChange={handleChange}
-                  error={state.errors.reason}
-                />
-              </div>
-
-              <RadioFormField
-                label={t("is_this_an_emergency")}
-                name="emergency"
-                options={[true, false]}
-                optionDisplay={(o) => (o ? t("yes") : t("no"))}
-                optionValue={(o) => String(o)}
-                value={state.form.emergency}
-                onChange={handleChange}
-              />
-
-              <div className="md:col-span-2 flex flex-col md:flex-row gap-2 justify-between mt-4">
-                <Cancel onClick={() => goBack()} />
-                <Submit onClick={handleSubmit} />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
+    <Page
+      title={t("create_resource_request")}
+      crumbsReplacements={{
+        [facilityId]: { name: facilityName },
+        resource: { style: "pointer-events-none" },
+      }}
+      backUrl={`/facility/${facilityId}`}
+    >
+      <Card className="mt-4 grid gap-4 grid-cols-1 md:grid-cols-2">
+        <TextFormField
+          required
+          label={t("contact_person")}
+          name="refering_facility_contact_name"
+          value={state.form.refering_facility_contact_name}
+          onChange={handleChange}
+          error={state.errors.refering_facility_contact_name}
+        />
+        <PhoneNumberFormField
+          label={t("contact_phone")}
+          name="refering_facility_contact_number"
+          required
+          disableCountry
+          value={state.form.refering_facility_contact_number}
+          onChange={handleFormFieldChange}
+          error={state.errors.refering_facility_contact_number}
+        />
+
+        <div>
+          <FieldLabel required>{t("approving_facility")}</FieldLabel>
+          <FacilitySelect
+            multiple={false}
+            facilityType={1500}
+            name="approving_facility"
+            selected={state.form.approving_facility}
+            setSelected={(value: any) =>
+              handleValueChange(value, "approving_facility")
+            }
+            errors={state.errors.approving_facility}
+          />
+        </div>
+
+        <RadioFormField
+          label={t("is_this_an_emergency")}
+          name="emergency"
+          options={[true, false]}
+          optionDisplay={(o) => (o ? t("yes") : t("no"))}
+          optionValue={(o) => String(o)}
+          value={state.form.emergency}
+          onChange={handleChange}
+        />
+
+        <SelectFormField
+          label={t("category")}
+          name="category"
+          required
+          value={state.form.category}
+          options={RESOURCE_CATEGORY_CHOICES}
+          optionLabel={(option: string) => option}
+          optionValue={(option: string) => option}
+          onChange={({ value }) => handleValueChange(value, "category")}
+        />
+        <SelectFormField
+          label={t("sub_category")}
+          name="sub_category"
+          required
+          value={state.form.sub_category}
+          options={RESOURCE_SUBCATEGORIES}
+          optionLabel={(option: OptionsType) => option.text}
+          optionValue={(option: OptionsType) => option.id}
+          onChange={({ value }) => handleValueChange(value, "sub_category")}
+        />
+
+        <TextFormField
+          label={t("request_title")}
+          name="title"
+          placeholder={t("request_title_placeholder")}
+          value={state.form.title}
+          onChange={handleChange}
+          error={state.errors.title}
+          required
+        />
+
+        <TextFormField
+          label={t("required_quantity")}
+          name="requested_quantity"
+          value={state.form.required_quantity}
+          onChange={handleChange}
+        />
+
+        <div className="md:col-span-2">
+          <TextAreaFormField
+            label={t("request_description")}
+            name="reason"
+            rows={5}
+            required
+            placeholder={t("request_description_placeholder")}
+            value={state.form.reason}
+            onChange={handleChange}
+            error={state.errors.reason}
+          />
+        </div>
+
+        <div className="md:col-span-2 flex flex-col md:flex-row gap-2 justify-end mt-4">
+          <Cancel onClick={() => goBack()} />
+          <Submit onClick={handleSubmit} />
+        </div>
+      </Card>
+    </Page>
   );
 }