added new useredit page

public/js/pages/UserEdit/UserEdit.css

@@ -0,0 +1,166 @@
+.user-edit-container {
+    padding-bottom: 60px; /* Space for the bottom save button */
+}
+
+.user-edit-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+    margin-top: 1.5rem;
+    padding: 0.5rem;
+}
+
+.user-edit-header.sticky-header {
+    position: sticky;
+    top: 60px; /* Adjust based on your main header height */
+    background-color: #f8f9fa; /* Match card background */
+    z-index: 10;
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid #dee2e6;
+    margin: -1.25rem -1.25rem 1rem -1.25rem; /* Make it span the card width */
+}
+
+.user-edit-header.collapsible {
+    cursor: pointer;
+    border-bottom: 1px solid #dee2e6;
+    padding-bottom: 0.75rem;
+    transition: background-color 0.2s;
+}
+.user-edit-header.collapsible:hover {
+    background-color: #f1f3f5;
+}
+
+.user-edit-header h3 {
+    margin: 0;
+}
+
+.user-form-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 0.5rem 1.5rem;
+}
+
+.user-form-grid-half {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    gap: 1rem;
+}
+
+.user-form-grid-toggles {
+    display: flex;
+    gap: 2rem;
+    margin-top: 1rem;
+}
+
+.user-form-grid-toggles .form-group {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 0;
+}
+
+.permission-template-section {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 1rem;
+    align-items: end;
+}
+
+.permissions-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 1.5rem 2rem;
+}
+
+.permission-group {
+    border: 1px solid #dee2e6;
+    border-radius: 0.3rem;
+    padding: 1rem;
+    background-color: #fff;
+}
+
+.permission-group h5 {
+    font-size: 1.1rem;
+    margin-bottom: 1rem;
+    color: #0056b3;
+}
+
+.form-check-label {
+    user-select: none;
+}
+
+.password-generation-grid {
+    display: grid;
+    grid-template-columns: 1fr auto auto;
+    gap: 0.5rem;
+    align-items: end;
+}
+
+.selected-items-viewer {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 1.5rem;
+    margin-top: 1.5rem;
+}
+
+.selection-list-container {
+    border: 1px solid #e9ecef;
+    padding: 0.75rem;
+    border-radius: 0.25rem;
+}
+
+.selection-list {
+    list-style-type: none;
+    padding-left: 0;
+    margin-top: 0.5rem;
+    max-height: 200px;
+    overflow-y: auto;
+}
+.selection-list li {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.2rem;
+}
+.selection-list li:hover {
+    background-color: #f8f9fa;
+}
+.selection-list li .fa-times-circle {
+    color: #dc3545;
+    cursor: pointer;
+    opacity: 0.7;
+}
+.selection-list li .fa-times-circle:hover {
+    opacity: 1;
+}
+
+.user-edit-footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 0.75rem;
+    background-color: #ffffff;
+    border-top: 1px solid #dee2e6;
+    display: flex;
+    justify-content: flex-end;
+    z-index: 1000;
+}
+
+/* Slide-fade transition */
+.slide-fade-enter-active, .slide-fade-leave-active {
+    transition: all .3s ease;
+}
+.slide-fade-enter, .slide-fade-leave-to {
+    transform: translateY(-10px);
+    opacity: 0;
+}
+.slide-fade-fast-enter-active, .slide-fade-fast-leave-active {
+    transition: all .2s ease;
+}
+.slide-fade-fast-enter, .slide-fade-fast-leave-to {
+    transform: translateY(-5px);
+    opacity: 0;
+}