From 604fee320bacd7f90eab0f7fe5bbfad6b72992c9 Mon Sep 17 00:00:00 2001
From: wayangalihpratama <wgprtm@gmail.com>
Date: Wed, 20 Nov 2024 09:08:20 +0800
Subject: [PATCH] [#126] Fix broadcast message send button not showing

---
 frontend/src/app/broadcast-message/page.js  | 153 ++++++++++----------
 frontend/src/components/chats/FarmerForm.js | 115 +++++++--------
 2 files changed, 133 insertions(+), 135 deletions(-)

diff --git a/frontend/src/app/broadcast-message/page.js b/frontend/src/app/broadcast-message/page.js
index 07b82177..d2d02d3c 100644
--- a/frontend/src/app/broadcast-message/page.js
+++ b/frontend/src/app/broadcast-message/page.js
@@ -139,87 +139,88 @@ const BroadcastMessage = () => {
           </button>
         }
       />
-      <div className="flex justify-center min-h-screen bg-white mt-20">
-        <form onSubmit={handleSubmit} className="p-10 w-full">
-          <h2 className="text-lg font-semibold mb-10">
-            Send Broadcast Message
-          </h2>
-
-          {/* Client List */}
-          <div className="mb-8">
-            <label className="block text-sm mb-2">Select Farmer</label>
-            <div className="flex items-center mb-2">
+      <div className="flex justify-center min-h-screen bg-white mt-16">
+        <div className="overflow-auto max-h-[calc(100vh-140px)] w-full">
+          <form onSubmit={handleSubmit} className="p-10 w-full">
+            <h2 className="text-lg font-semibold mb-6">
+              Send Broadcast Message
+            </h2>
+
+            {/* Client List */}
+            <div className="mb-8">
+              <label className="block text-sm mb-2">Select Farmer</label>
+              <div className="flex items-center mb-2">
+                <input
+                  id="select-all-clients"
+                  type="checkbox"
+                  checked={selectAll}
+                  onChange={handleSelectAllChange}
+                  className="mr-2"
+                />
+                <label htmlFor="select-all-clients">Select All</label>
+              </div>
               <input
-                id="select-all-clients"
-                type="checkbox"
-                checked={selectAll}
-                onChange={handleSelectAllChange}
-                className="mr-2"
+                type="text"
+                placeholder="Search farmer"
+                className="w-full px-4 py-2 border rounded-lg text-md mb-2"
+                onChange={handleSearchClient}
+                value={searchClient}
               />
-              <label htmlFor="select-all-clients">Select All</label>
+              <div
+                className="w-full border rounded-lg p-2"
+                style={{
+                  maxHeight: "110px",
+                  overflowY: "auto",
+                  backgroundColor: "white",
+                }}
+              >
+                {filteredClients.map((client) => (
+                  <div key={client.id} className="flex items-center mb-1">
+                    <input
+                      type="checkbox"
+                      id={`client-${client.id}`}
+                      checked={selectedClients.includes(client.id)}
+                      onChange={() => handleClientChange(client.id)}
+                      className="mr-2"
+                    />
+                    <label htmlFor={`client-${client.id}`}>{client.name}</label>
+                  </div>
+                ))}
+              </div>
             </div>
-            <input
-              type="text"
-              placeholder="Search farmer"
-              className="w-full px-4 py-2 border rounded-lg text-md mb-2"
-              onChange={handleSearchClient}
-              value={searchClient}
-            />
-            <div
-              className="w-full border rounded-lg p-2"
-              style={{
-                maxHeight: "110px",
-                overflowY: "auto",
-                backgroundColor: "white",
-              }}
-            >
-              {filteredClients.map((client) => (
-                <div key={client.id} className="flex items-center mb-1">
-                  <input
-                    type="checkbox"
-                    id={`client-${client.id}`}
-                    checked={selectedClients.includes(client.id)}
-                    onChange={() => handleClientChange(client.id)}
-                    className="mr-2"
-                  />
-                  <label htmlFor={`client-${client.id}`}>{client.name}</label>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          <div className="mb-8">
-            <label className="block text-sm mb-2">
-              Message <span className="text-xs">(1600 characters max)</span>
-            </label>
-            <textarea
-              rows={5}
-              maxLength={MAX_CHARACTERS}
-              value={message}
-              onChange={handleMessageChange}
-              required
-              className="w-full px-4 py-2 border rounded-lg text-md resize-none overflow-auto"
-            />
-            <div className="text-right text-xs mt-1">
-              {MAX_CHARACTERS - message.length} characters left
+
+            <div className="mb-8">
+              <label className="block text-sm mb-2">
+                Message <span className="text-xs">(1600 characters max)</span>
+              </label>
+              <textarea
+                rows={5}
+                maxLength={MAX_CHARACTERS}
+                value={message}
+                onChange={handleMessageChange}
+                required
+                className="w-full px-4 py-2 border rounded-lg text-md resize-none overflow-auto"
+              />
+              <div className="text-right text-xs mt-1">
+                {MAX_CHARACTERS - message.length} characters left
+              </div>
             </div>
-          </div>
-
-          {/* Submit Button */}
-          <button
-            disabled={disabled}
-            type="submit"
-            className={`w-full text-white rounded-md py-3 shadow-sm flex justify-center ${
-              disabled
-                ? "bg-akvo-green cursor-not-allowed"
-                : "bg-akvo-green hover:bg-green-700 focus:ring-green-700"
-            }`}
-          >
-            {disabled ? <ButtonLoadingIcon /> : "Send"}
-          </button>
-        </form>
-      </div>
 
+            {/* Submit Button */}
+            <button
+              disabled={disabled}
+              type="submit"
+              className={`w-full text-white rounded-md py-3 shadow-sm flex justify-center ${
+                disabled
+                  ? "bg-akvo-green cursor-not-allowed"
+                  : "bg-akvo-green hover:bg-green-700 focus:ring-green-700"
+              }`}
+            >
+              {disabled ? <ButtonLoadingIcon /> : "Send"}
+            </button>
+          </form>
+        </div>
+      </div>
       <Notification message={notificationContent} show={showNotification} />
     </div>
   );
diff --git a/frontend/src/components/chats/FarmerForm.js b/frontend/src/components/chats/FarmerForm.js
index 84afd830..4914d23c 100644
--- a/frontend/src/components/chats/FarmerForm.js
+++ b/frontend/src/components/chats/FarmerForm.js
@@ -145,68 +145,65 @@ const FarmerForm = ({
   };
 
   return (
-    <div
-      className={`flex justify-center min-h-screen bg-white ${
-        isEdit ? "mt-20" : "mt-28"
-      }`}
-    >
-      <form
-        onSubmit={(e) => (isEdit ? handleUpdate(e) : handleSubmit(e))}
-        className="p-10 w-full"
-      >
-        <h2 className="text-lg font-semibold mb-10">
-          {isEdit ? "Update" : "Add"} Farmer
-        </h2>
-        {/* Farmer Name Field */}
-        <div className="mb-8">
-          <label className="block text-sm mb-2">Farmer Name</label>
-          <input
-            type="text"
-            value={farmerName || ""}
-            onChange={(e) => setFarmerName(e.target.value)}
-            placeholder="Enter farmer's name"
-            className="w-full px-4 py-2 border-gray-400 border-b text-md"
-          />
-        </div>
-
-        {/* Phone Number Field */}
-        <div className="mb-10">
-          <label className="block text-sm mb-2">Phone Number</label>
-          <div
-            className={`mt-2 flex items-center ${
-              !isEdit ? "border-b border-gray-400" : ""
-            }`}
-          >
-            <PhoneInput
-              id="phone"
-              name="phone"
-              placeholder="Enter phone number"
-              value={phoneNumber}
-              onChange={setPhoneNumber}
-              international
-              defaultCountry="KE"
-              initialValueFormat="international"
-              className="block w-full p-2 text-gray-600 font-medium"
-              disabled={isEdit}
+    <div className={`flex justify-center min-h-screen bg-white mt-16`}>
+      <div className="overflow-auto max-h-[calc(100vh-140px)] w-full">
+        <form
+          onSubmit={(e) => (isEdit ? handleUpdate(e) : handleSubmit(e))}
+          className="p-10 w-full"
+        >
+          <h2 className="text-lg font-semibold mb-10">
+            {isEdit ? "Update" : "Add"} Farmer
+          </h2>
+          {/* Farmer Name Field */}
+          <div className="mb-8">
+            <label className="block text-sm mb-2">Farmer Name</label>
+            <input
+              type="text"
+              value={farmerName || ""}
+              onChange={(e) => setFarmerName(e.target.value)}
+              placeholder="Enter farmer's name"
+              className="w-full px-4 py-2 border-gray-400 border-b text-md"
             />
-            <PhoneIcon />
           </div>
-        </div>
-
-        {/* Submit Button */}
-        <button
-          disabled={disabled}
-          type="submit"
-          className={`w-full text-white py-2 rounded-md py-3 shadow-sm flex justify-center ${
-            disabled
-              ? "bg-akvo-green cursor-not-allowed"
-              : "bg-akvo-green hover:bg-green-700 focus:ring-green-700"
-          }`}
-        >
-          {disabled ? <ButtonLoadingIcon /> : "Save"}
-        </button>
-      </form>
 
+          {/* Phone Number Field */}
+          <div className="mb-10">
+            <label className="block text-sm mb-2">Phone Number</label>
+            <div
+              className={`mt-2 flex items-center ${
+                !isEdit ? "border-b border-gray-400" : ""
+              }`}
+            >
+              <PhoneInput
+                id="phone"
+                name="phone"
+                placeholder="Enter phone number"
+                value={phoneNumber}
+                onChange={setPhoneNumber}
+                international
+                defaultCountry="KE"
+                initialValueFormat="international"
+                className="block w-full p-2 text-gray-600 font-medium"
+                disabled={isEdit}
+              />
+              <PhoneIcon />
+            </div>
+          </div>
+
+          {/* Submit Button */}
+          <button
+            disabled={disabled}
+            type="submit"
+            className={`w-full text-white py-3 rounded-md shadow-sm flex justify-center ${
+              disabled
+                ? "bg-akvo-green cursor-not-allowed"
+                : "bg-akvo-green hover:bg-green-700 focus:ring-green-700"
+            }`}
+          >
+            {disabled ? <ButtonLoadingIcon /> : "Save"}
+          </button>
+        </form>
+      </div>
       <Notification message={notificationContent} show={showNotification} />
     </div>
   );