feat: implement admin settings page with dynamic selection list management and repository integration

Author: beginwebdev2002

backend/src/modules/admin-settings/infrastructure/repositories/admin-settings.repository.ts

@@ -22,9 +22,18 @@ export class AdminSettingsRepository {
   async updateSettings(
     settings: Partial<AdminSettings>,
   ): Promise<AdminSettings> {
-    const doc = await this.settingsModel
-      .findOneAndUpdate({}, { $set: settings }, { new: true, upsert: true })
-      .exec();
+    let doc = await this.settingsModel.findOne().exec();
+    if (!doc) {
+      doc = new this.settingsModel({
+        location: { address: '', latitude: 0, longitude: 0 },
+        ownerInfo: { name: '', phoneNumber: '' },
+        ...settings,
+      });
+      await doc.save();
+    } else {
+      doc.set(settings);
+      await doc.save();
+    }
     return this.toDomain(doc);
   }
 

frontend/src/pages/settings/settings.component.ts

@@ -126,7 +126,7 @@ export class SettingsComponent implements OnInit {
     // --- CRUD for Selection Lists ---
 
     addItem(type: SelectListType) {
-      const newItem = 'New Item';
+      const newItem = '';
       switch(type) {
         case 'gallery': this.galleryCategories.update(items => [...items, newItem]); break;
         case 'treatment': this.treatmentCategories.update(items => [...items, newItem]); break;

frontend/src/pages/settings/ui/selects-settings.component.ts

@@ -76,8 +76,10 @@ export type SelectListType = 'gallery' | 'treatment' | 'silhouette' | 'fabric' |
               <input 
                 #input 
                 (blur)="onUpdate(type, $index, input.value)" 
+                (keyup.enter)="input.blur()"
                 [value]="item" 
-                class="flex-1 px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm text-black focus:bg-white transition-all"
+                placeholder="Enter category name..."
+                class="flex-1 px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm text-black focus:bg-white focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all"
               />
               <button (click)="removeItem.emit({type, index: $index})" class="text-gray-400 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-all">
                 <span class="material-symbols-outlined text-lg">delete</span>
@@ -103,6 +105,11 @@ export class SelectsSettingsComponent {
   save = output<void>();
 
   onUpdate(type: SelectListType, index: number, value: string) {
-    this.updateItem.emit({ type, index, value });
+    const trimmed = value.trim();
+    if (!trimmed) {
+      this.removeItem.emit({ type, index });
+      return;
+    }
+    this.updateItem.emit({ type, index, value: trimmed });
   }
 }