add new field "status"balance" on manage position

src/pages/settings/user/manage-position/blocks/AddDialog.tsx

@@ -18,6 +18,7 @@ import { useCallApi } from '@/hooks';
 import { Checkbox } from '@/components/ui/checkbox';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 import { set } from 'date-fns';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 
 const API_URL = apiConfig.service_dashboard;
 
@@ -61,7 +62,8 @@ const MenuItemComponent: React.FC<{
 };
 
 const initialState = {
-  name: ''
+  name: '',
+  status_balance: '',
 };
 
 const AddDialog = () => {
@@ -86,13 +88,15 @@ const AddDialog = () => {
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   const resetForm = () => {
-    setFormField(() => ({ name: '' }));
+    setFormField(initialState);
     setErrors(() => ({}));
     setSelectMenus([]);
   };
 
   const validateForm = () => {
-    const requiredFields = [{ key: 'name', label: 'Position Name' }];
+    const requiredFields = [
+      { key: 'name', label: 'Position Name' },
+      { key: 'status_balance', label: 'Status Balance' }];
     const newErrors: Record<string, string> = {};
     let isValid = true;
     requiredFields.forEach(({ key, label }) => {
@@ -128,7 +132,8 @@ const AddDialog = () => {
       const response = await PostData(`${API_URL}/user_role/create`, {
         name: formField.name,
         roles: selectMenus,
-        status: 'Y'
+        status: 'Y',
+        status_balance: formField.status_balance
       });
 
       if (response?.status) {
@@ -203,6 +208,33 @@ const AddDialog = () => {
                     </div>
                   </div>
                 </div>
+                <div className="w-full">
+                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                    <label className="form-label flex items-center gap-1 max-w-56">
+                      Status Balance <span className="text-danger">*</span>
+                    </label>
+                    <div className="grow flex flex-col">
+                     <Select
+                        value={formField.status_balance}
+                        onValueChange={(value) => {
+                          setFormField((prev) => ({ ...prev, status_balance: value }));
+                          setErrors((prev) => ({ ...prev, status_balance: '' }));
+                        }}
+                      >
+                        <SelectTrigger className={errors.status ? 'border-red-500' : ''}>
+                          <SelectValue placeholder="Select" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="Y">Active</SelectItem>
+                          <SelectItem value="N">Inactive</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      {errors.status && (
+                        <span className="text-red-500 text-xs mt-1">{errors.status}</span>
+                      )}
+                    </div>
+                  </div>
+                </div>
 
                 <div className="grid md:grid-cols-3 w-full gap-5">
                   {menus.map((menu) => (

src/pages/settings/user/manage-position/blocks/EditDialog.tsx

@@ -79,11 +79,15 @@ const EditDialog = () => {
   const [selectMenus, setSelectMenus] = useState<string[]>([]);
   const [formField, setFormField] = useState({
     name: '',
-    status: ''
+    status: '',
+    status_balance: ''
   });
   const [errors, setErrors] = useState<Record<string, string>>({});
   const validateForm = () => {
-    const requiredFields = [{ key: 'name', label: 'Position Name' }];
+    const requiredFields = [
+      { key: 'name', label: 'Position Name' },
+      { key: 'status_balance', label: 'Status Balance' }
+    ];
     const newErrors: Record<string, string> = {};
     let isValid = true;
     requiredFields.forEach(({ key, label }) => {
@@ -131,7 +135,8 @@ const EditDialog = () => {
         const response = await PutData(`${API_URL}/user_role/update/${selectedPosition.id}`, {
           name: formField.name,
           roles: selectMenus,
-          status: formField.status
+          status: formField.status,
+          status_balance: formField.status_balance
         });
 
         if (response?.status) {
@@ -236,6 +241,26 @@ const EditDialog = () => {
                     </div>
                   </div>
                 </div>
+                <div className="w-full">
+                  <div className="flex items-center flex-wrap gap-2.5">
+                    <label className="form-label max-w-56">Status Balance</label>
+
+                    <div className="grow">
+                      <Select
+                        value={formField.status_balance}
+                        onValueChange={(status_balance) => setFormField((prev) => ({ ...prev, status_balance }))}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="Y">Active</SelectItem>
+                          <SelectItem value="N">Non Active</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </div>
 
                 <div className="grid md:grid-cols-3 w-full gap-5">
                   {menus.map((menu) => (