src/components/Project/Infrastructure/TaskModel.jsx

@@ -119,27 +119,6 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
       <div className="text-center mb-1">
         <h5 className="mb-1">Manage Task</h5>
       </div>
-      <div className="col-6 text-start">
-        <Label className="form-label" required>Select Services</Label>
-        <select
-          name="DataTables_Table_0_length"
-          aria-controls="DataTables_Table_0"
-          className="form-select form-select-sm"
-          aria-label="Select Service"
-          value={selectedService}
-          onChange={handleServiceChange}
-        >
-          {servicesLoading && <option>Loading...</option>}
-          {assignedServices?.map((service) => (
-            <option key={service.id} value={service.id}>
-              {service.name}
-            </option>
-          ))}
-        </select>
-        {errors.buildingID && (
-          <p className="danger-text">{errors.buildingID.message}</p>
-        )}
-      </div>
       <div className="col-6 text-start">
         <Label className="form-label" required>Select Building</Label>
         <select
@@ -183,6 +162,7 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
         </div>
       )}
 
+      {/* Work Area Selection */}
       {selectedFloor && (
         <div className="col-12 text-start">
           <Label className="form-label" required>Select Work Area</Label>
@@ -205,6 +185,32 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
         </div>
       )}
 
+      {/* Services Selection */}
+      {selectedWorkArea && (
+        <div className="col-12 text-start">
+          <Label className="form-label">Select Services</Label>
+          <select
+            name="DataTables_Table_0_length"
+            aria-controls="DataTables_Table_0"
+            className="form-select form-select-sm"
+            aria-label="Select Service"
+            value={selectedService}
+            onChange={handleServiceChange}
+          >
+            {servicesLoading && <option>Loading...</option>}
+            {assignedServices?.map((service) => (
+              <option key={service.id} value={service.id}>
+                {service.name}
+              </option>
+            ))}
+          </select>
+          {errors.buildingID && (
+            <p className="danger-text">{errors.buildingID.message}</p>
+          )}
+        </div>
+      )}
+
+      {/* Activity Selection */}
       {selectedWorkArea && (
         <div className="col-12 text-start">
           <Label className="form-label" required>Select Activity</Label>
@@ -225,6 +231,7 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
         </div>
       )}
 
+
       {selectedWorkArea && (
         <div className="col-12 text-start">
           <label className="form-label">Select Work Category</label>