Migrate CIDER Resource Allocation Interface to XRAS Admin and implement relative_order drag and sort functionality

src/edit-resource/AddNewModal.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const AddNewModal = ({ show, onClose, title, children }) => {
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <div style={{
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      backgroundColor: 'rgba(0, 0, 0, 0.8)',
+      display: 'flex',
+      alignItems: 'center',
+      zIndex: 1050,
+    }}>
+      <div className="modal fade in" tabIndex="-1" role="dialog" aria-hidden="true" style={{
+        width: '90%',
+        maxWidth: '600px',
+        maxHeight: '90%',
+        overflow: 'auto',
+        backgroundColor: 'white',
+        position: 'relative',
+      }}>
+        <div className="modal-dialog" role="document">
+          <div className="modal-content">
+            <div className="modal-header">
+              <button type="button" className="close" data-dismiss="modal" onClick={onClose} aria-label="Close">
+                <h3 aria-hidden="true" className="text-danger">&times;</h3>
+              </button>
+              <h3 className="modal-title">{title}</h3>
+            </div>
+            <div className="modal-body">
+              {children}
+            </div>
+            <div className="modal-footer" style={{
+              padding: '15px',
+              textAlign: 'right',
+              borderTop: '1px solid #e5e5e5',
+              backgroundColor: '#f8f9fa'
+            }}>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+AddNewModal.propTypes = {
+  show: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  title: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+};

src/edit-resource/AllocationTypesGrid.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Grid from '../shared/Grid';
+import style from './AllocationTypesGrid.module.scss';
+
+export const AllocationGrid = React.memo(({ columns, rows, onAddRequiredResource, onAddAllocationType }) => (
+  <div className={style["allocation-types-grid"]}>
+    <div className={style["header-container"]}>
+      <h2 className={style["header-title"]}>Allocation Types</h2>
+      <div className={style["header-buttons"]}>
+        <button className='btn btn-primary' onClick={onAddAllocationType}>
+          <i className="fa fa-plus"></i> Add Allocation Type
+        </button>
+        <button className='btn btn-primary' onClick={onAddRequiredResource}>
+          <i className="fa fa-plus"></i> Add Required Resource
+        </button>
+      </div>
+    </div>
+    <Grid
+      classes={style["no-scroll-grid"]}
+      columns={columns}
+      rows={rows}
+      rowClasses={Array(rows.length).fill(style["vertical-align-center"])}
+    />
+  </div>
+));
+
+AllocationGrid.propTypes = {
+  columns: PropTypes.array.isRequired,
+  rows: PropTypes.array.isRequired,
+  onAddRequiredResource: PropTypes.func.isRequired,
+  onAddAllocationType: PropTypes.func.isRequired,
+};

src/edit-resource/AllocationTypesGrid.module.scss

@@ -0,0 +1,25 @@
+.header-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.header-buttons {
+  display: flex;
+  gap: 1rem; /* Space between the buttons */
+}
+
+.no-scroll-grid {
+  overflow: auto; //hidden for no-scroll 
+  height: auto; 
+}
+
+.allocation-types-grid {
+  margin-bottom: 0.8rem;
+  margin-top: 0.8rem;
+}
+
+.vertical-align-center td {
+  vertical-align: middle;
+}