update breadcrumb and create account module

src/app/domains/superAdmin/guilds/components/layout.component.html

@@ -0,0 +1,5 @@
+@if (loading()) {
+  <shared-page-loading />
+} @else {
+  <router-outlet></router-outlet>
+}

src/app/domains/superAdmin/guilds/components/layout.component.ts

@@ -0,0 +1,50 @@
+import { BreadcrumbService } from '@/core/services';
+import { PageLoadingComponent } from '@/shared/components/page-loading.component';
+import { Component, computed, effect, inject, signal } from '@angular/core';
+import { ActivatedRoute, RouterOutlet } from '@angular/router';
+import { guildsNamedRoutes } from '../constants';
+import { GuildStore } from '../store/guild.store';
+
+@Component({
+  selector: 'superAdmin-guild-layout',
+  templateUrl: './layout.component.html',
+  imports: [PageLoadingComponent, RouterOutlet],
+})
+export class GuildLayoutComponent {
+  private readonly store = inject(GuildStore);
+  private readonly route = inject(ActivatedRoute);
+  private readonly breadcrumbService = inject(BreadcrumbService);
+
+  readonly guildId = signal<string>(this.route.snapshot.paramMap.get('guildId')!);
+
+  readonly loading = computed(() => this.store.loading());
+  readonly guild = computed(() => this.store.entity());
+
+  constructor() {
+    effect(() => {
+      if (this.guild()?.id) {
+        this.setBreadcrumb();
+      }
+    });
+  }
+
+  getData() {
+    this.store.getData(this.guildId());
+  }
+
+  ngOnInit() {
+    this.getData();
+  }
+
+  setBreadcrumb() {
+    this.breadcrumbService.setItems([
+      {
+        ...guildsNamedRoutes.guilds.meta,
+        routerLink: guildsNamedRoutes.guilds.meta.pagePath!(),
+      },
+      {
+        title: this.guild()?.name,
+      },
+    ]);
+  }
+}

src/app/domains/superAdmin/guilds/constants/routes/index.ts

@@ -29,6 +29,8 @@ export const GUILDS_ROUTES: Routes = [
   guildsNamedRoutes.guilds,
   {
     path: 'guilds/:guildId',
+    loadComponent: () =>
+      import('../../components/layout.component').then((m) => m.GuildLayoutComponent),
 
     children: [
       {

src/app/domains/superAdmin/guilds/views/single.component.ts

@@ -30,8 +30,4 @@ export class GuildComponent {
   getData() {
     this.store.getData(this.guildId());
   }
-
-  ngOnInit() {
-    this.getData();
-  }
 }

src/app/domains/superAdmin/users/components/accounts/form.component.html

@@ -0,0 +1,42 @@
+<p-dialog
+  header="فرم کاربر"
+  [(visible)]="visible"
+  [modal]="true"
+  [style]="{ width: '500px' }"
+  [closable]="true"
+  (onHide)="close()"
+>
+  <form [formGroup]="form" (submit)="submit()" class="flex flex-col gap-4">
+    <app-input label="نام کاربری" [control]="form.controls.username" name="username" />
+    <app-enum-select [control]="form.controls.type" name="type" type="accountType" />
+    <uikit-field label="رمز عبور" class="" [control]="form.controls.password">
+      <p-password
+        id="password1"
+        name="password"
+        formControlName="password"
+        autocomplete="password"
+        [toggleMask]="true"
+        [fluid]="true"
+        [feedback]="false"
+        [invalid]="form.controls.password.touched && form.controls.password.invalid"
+      />
+      <span class="text-xs mt-2 text-muted-color">
+        رمز باید حداقل ۸ کاراکتر بوده و شامل حداقل یک حرف بزرگ، یک حرف کوچک، یک عدد و یک کاراکتر ویژه باشد.
+      </span>
+    </uikit-field>
+
+    <uikit-field label="تکرار رمز عبور" class="" [control]="form.controls.confirmPassword">
+      <p-password
+        id="confirmPassword"
+        name="confirmPassword"
+        formControlName="confirmPassword"
+        autocomplete="new-password"
+        [toggleMask]="true"
+        [fluid]="true"
+        [feedback]="false"
+        [invalid]="form.controls.confirmPassword.touched && form.controls.confirmPassword.invalid"
+      />
+    </uikit-field>
+    <app-form-footer-actions [submitLabel]="'ذخیره'" [loading]="submitLoading()" (onCancel)="close()" />
+  </form>
+</p-dialog>

src/app/domains/superAdmin/users/components/accounts/form.component.ts

@@ -0,0 +1,81 @@
+import { MustMatch, password } from '@/core/validators';
+// import { CatalogRolesComponent } from '@/shared/catalog/roles';
+import { AbstractFormDialog } from '@/shared/abstractClasses';
+import { EnumSelectComponent } from '@/shared/apiEnum/select.component';
+import { InputComponent } from '@/shared/components';
+import { FormFooterActionsComponent } from '@/shared/components/formFooterActions/form-footer-actions.component';
+import { UikitFieldComponent } from '@/uikit';
+import { Component, inject, Input } from '@angular/core';
+import { ReactiveFormsModule, Validators } from '@angular/forms';
+import { Dialog } from 'primeng/dialog';
+import { Password } from 'primeng/password';
+import { IAccountRequest, IAccountResponse } from '../../models';
+import { AdminUserAccountsService } from '../../services/accounts.service';
+
+@Component({
+  selector: 'superAdmin-user-account-form',
+  templateUrl: './form.component.html',
+  imports: [
+    ReactiveFormsModule,
+    Dialog,
+    InputComponent,
+    FormFooterActionsComponent,
+    UikitFieldComponent,
+    Password,
+    EnumSelectComponent,
+  ],
+})
+export class UserAccountFormComponent extends AbstractFormDialog<
+  IAccountRequest,
+  IAccountResponse
+> {
+  private readonly service = inject(AdminUserAccountsService);
+
+  @Input() userId!: string;
+  @Input() accountId!: string;
+
+  initForm = () => {
+    if (this.editMode) {
+      return this.fb.group(
+        {
+          username: [this.initialValues?.username || '', [Validators.required]],
+          // @ts-ignore
+          type: [this.initialValues?.type, [Validators.required]],
+
+          password: ['', [password()]],
+          confirmPassword: [''],
+        },
+        {
+          validators: [MustMatch('password', 'confirmPassword')],
+        },
+      );
+    }
+    return this.fb.group(
+      {
+        username: [this.initialValues?.username || '', [Validators.required]],
+        // @ts-ignore
+        type: [this.initialValues?.type, [Validators.required]],
+
+        password: ['', [Validators.required, password()]],
+        confirmPassword: ['', [Validators.required]],
+      },
+      {
+        validators: [MustMatch('password', 'confirmPassword')],
+      },
+    );
+  };
+
+  form = this.initForm();
+
+  override ngOnChanges(): void {
+    this.form = this.initForm();
+  }
+
+  submitForm() {
+    const formValue = this.form.value as IAccountRequest;
+    if (this.editMode) {
+      return this.service.update(this.userId, this.accountId, formValue);
+    }
+    return this.service.create(this.userId, formValue);
+  }
+}

src/app/domains/superAdmin/users/components/accounts/list.component.html

@@ -0,0 +1,15 @@
+<app-page-data-list
+  pageTitle="مدیریت حساب‌های کاربری"
+  [addNewCtaLabel]="'افزودن حساب کاربری جدید'"
+  [columns]="columns"
+  [showAdd]="true"
+  emptyPlaceholderTitle="حساب کاربری‌ای یافت نشد."
+  emptyPlaceholderDescription="برای افزودن حساب کاربری جدید، روی دکمهٔ بالا کلیک کنید."
+  [items]="items()"
+  [loading]="loading()"
+  [showDetails]="true"
+  [showAdd]="true"
+  (onAdd)="openAddForm()"
+>
+</app-page-data-list>
+<superAdmin-user-account-form [(visible)]="visibleForm" [editMode]="editMode()" (onSubmit)="refresh()" />

src/app/domains/superAdmin/users/components/accounts/list.component.ts

@@ -0,0 +1,38 @@
+// import { CatalogRoleTagComponent } from '@/shared/catalog/roles';
+import { AbstractList } from '@/shared/abstractClasses/abstract-list';
+import {
+  IColumn,
+  PageDataListComponent,
+} from '@/shared/components/pageDataList/page-data-list.component';
+import { Component, inject, Input } from '@angular/core';
+import { IAccountResponse } from '../../models';
+import { AdminUserAccountsService } from '../../services/accounts.service';
+import { UserAccountFormComponent } from './form.component';
+
+@Component({
+  selector: 'superAdmin-user-account-list',
+  templateUrl: './list.component.html',
+  imports: [PageDataListComponent, UserAccountFormComponent],
+})
+export class UsersComponent extends AbstractList<IAccountResponse> {
+  @Input() userId!: string;
+  @Input() fullHeight?: boolean;
+  @Input() header: IColumn[] = [
+    { field: 'id', header: 'شناسه' },
+    { field: 'username', header: 'نام کاربری' },
+    {
+      field: 'created_at',
+      header: 'تاریخ ایجاد',
+      type: 'date',
+    },
+  ];
+  private readonly service = inject(AdminUserAccountsService);
+
+  override setColumns(): void {
+    this.columns = this.header;
+  }
+
+  override getDataRequest() {
+    return this.service.getAll(this.userId);
+  }
+}

src/app/domains/superAdmin/users/components/form.component.html

@@ -7,11 +7,12 @@
   (onHide)="close()"
 >
   <form [formGroup]="form" (submit)="submit()" class="flex flex-col gap-4">
-    <app-input label="نام" [control]="form.controls.firstName" name="firstName" />
-    <app-input label="نام خانوادگی" [control]="form.controls.lastName" name="lastName" />
-    <app-input label="شماره موبایل" [control]="form.controls.mobileNumber" name="mobileNumber" type="mobile" />
+    <app-input label="نام" [control]="form.controls.first_name" name="first_name" />
+    <app-input label="نام خانوادگی" [control]="form.controls.last_name" name="last_name" />
+    <app-input label="شماره موبایل" [control]="form.controls.mobile_number" name="mobile_number" type="mobile" />
+    <!-- <app-enum-select [control]="form.controls.role" name="role" type="accountType" /> -->
     <!-- <catalog-roles-select [control]="form.controls.roleId" /> -->
-    <uikit-field label="رمز عبور" class="" [control]="form.get('password')">
+    <!-- <uikit-field label="رمز عبور" class="" [control]="form.get('password')">
       <p-password
         id="password1"
         name="password"
@@ -38,7 +39,7 @@
         [feedback]="false"
         [invalid]="form.get('confirmPassword')?.touched && form.get('confirmPassword')?.invalid"
       />
-    </uikit-field>
+    </uikit-field> -->
     <app-form-footer-actions [submitLabel]="'ذخیره'" [loading]="form.disabled" (onCancel)="close()" />
   </form>
 </p-dialog>

src/app/domains/superAdmin/users/components/form.component.ts

@@ -1,101 +1,81 @@
-import { ToastService } from '@/core/services/toast.service';
-import { mobileValidator, MustMatch, password } from '@/core/validators';
+import { MustMatch, password } from '@/core/validators';
 // import { CatalogRolesComponent } from '@/shared/catalog/roles';
+import { AbstractFormDialog } from '@/shared/abstractClasses';
+import { EnumSelectComponent } from '@/shared/apiEnum/select.component';
 import { InputComponent } from '@/shared/components';
 import { FormFooterActionsComponent } from '@/shared/components/formFooterActions/form-footer-actions.component';
 import { UikitFieldComponent } from '@/uikit';
-import { Component, EventEmitter, inject, Input, Output, signal } from '@angular/core';
-import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Component, inject, Input } from '@angular/core';
+import { ReactiveFormsModule, Validators } from '@angular/forms';
 import { Dialog } from 'primeng/dialog';
 import { Password } from 'primeng/password';
 import { IUserRequest, IUserResponse } from '../models';
 import { UsersService } from '../services/main.service';
 
 @Component({
-  selector: 'user-form',
+  selector: 'superAdmin-user-form',
   templateUrl: './form.component.html',
   imports: [
     ReactiveFormsModule,
     Dialog,
     InputComponent,
     FormFooterActionsComponent,
-    // CatalogRolesComponent,
     UikitFieldComponent,
     Password,
+    EnumSelectComponent,
   ],
 })
-export class UserFormComponent {
-  @Input() initialValues?: IUserResponse;
+export class UserAccountFormComponent extends AbstractFormDialog<IUserRequest, IUserResponse> {
+  private readonly service = inject(UsersService);
 
-  @Input()
-  set visible(v: boolean) {
-    this.visibleSignal.set(!!v);
-  }
-  get visible() {
-    return this.visibleSignal();
-  }
-  private visibleSignal = signal(false);
+  @Input() userId!: string;
+  @Input() accountId!: string;
 
-  @Output() visibleChange = new EventEmitter<boolean>();
-  @Output() onSubmit = new EventEmitter<IUserResponse>();
+  initForm = () => {
+    if (this.editMode) {
+      return this.fb.group(
+        {
+          first_name: [this.initialValues?.first_name || '', [Validators.required]],
+          last_name: [this.initialValues?.last_name || '', [Validators.required]],
+          mobile_number: [this.initialValues?.mobile_number || '', [Validators.required]],
+          // @ts-ignore
+          // role: [this.initialValues?.role || '', [Validators.required]],
 
-  private fb = inject(FormBuilder);
-  constructor(
-    private service: UsersService,
-    private toastService: ToastService,
-  ) {
-    // effect(() => {
-    //   const v = this.visibleSignal();
-    //   // this.visibleChange.emit(v);
-    //   if (!v) this.form.reset();
-    // });
-  }
-
-  form = this.fb.group(
-    {
-      firstName: [this.initialValues?.firstName || '', [Validators.required]],
-      lastName: [this.initialValues?.lastName || '', [Validators.required]],
-      mobileNumber: [
-        this.initialValues?.mobileNumber || '',
-        [Validators.required, mobileValidator()],
-      ],
-      roleId: [this.initialValues?.role.id || null, [Validators.required]],
-      password: ['', [Validators.required, password()]],
-      confirmPassword: ['', [Validators.required]],
-    },
-    {
-      validators: [MustMatch('password', 'confirmPassword')],
-    },
-  );
-
-  submitLoading = signal(false);
-
-  submit() {
-    this.form.markAllAsTouched();
-    if (this.form.valid) {
-      this.form.disable();
-      this.submitLoading.set(true);
-      const { confirmPassword, ...rest } = this.form.value;
-      this.service.create(rest as IUserRequest).subscribe({
-        next: (res) => {
-          this.toastService.success({
-            text: `کاربر ${this.form.value.firstName} با موفقیت ایجاد شد`,
-          });
-          this.close();
-          this.submitLoading.set(false);
-          this.form.enable();
-          this.form.reset();
-          this.onSubmit.emit(res);
+          // password: ['', [password()]],
+          // confirmPassword: [''],
         },
-        error: () => {
-          this.submitLoading.set(false);
-          this.form.enable();
-        },
-      });
+        // {
+        //   validators: [MustMatch('password', 'confirmPassword')],
+        // },
+      );
     }
+    return this.fb.group(
+      {
+        first_name: [this.initialValues?.first_name || '', [Validators.required]],
+        last_name: [this.initialValues?.last_name || '', [Validators.required]],
+        mobile_number: [this.initialValues?.mobile_number || '', [Validators.required]],
+        // @ts-ignore
+        // role: [this.initialValues?.role || '', [Validators.required]],
+        password: ['', [Validators.required, password()]],
+        confirmPassword: ['', [Validators.required]],
+      },
+      {
+        validators: [MustMatch('password', 'confirmPassword')],
+      },
+    );
+  };
+
+  form = this.initForm();
+
+  override ngOnChanges(): void {
+    this.form = this.initForm();
   }
 
-  close() {
-    this.visibleChange.emit(false);
+  submitForm() {
+    const formValue = this.form.value as IUserRequest;
+    if (this.editMode) {
+      return this.service.update(this.userId, formValue);
+    }
+    return this.service.create(formValue);
   }
 }

src/app/domains/superAdmin/users/constants/apiRoutes/accounts.ts

@@ -0,0 +1,6 @@
+const baseUrl = (userId: string) => `/api/v1/admin/users/${userId}/accounts`;
+
+export const ACCOUNTS_API_ROUTES = {
+  list: (userId: string) => `${baseUrl(userId)}`,
+  single: (userId: string, accountId: string) => `${baseUrl(userId)}/${accountId}`,
+};

src/app/domains/superAdmin/users/constants/apiRoutes/index.ts

@@ -1,3 +1,5 @@
+export * from './accounts';
+
 const baseUrl = '/api/v1/admin/users';
 
 export const USERS_API_ROUTES = {

src/app/domains/superAdmin/users/constants/routes/index.ts

@@ -17,7 +17,7 @@ export const usersNamedRoutes: NamedRoutes<TUsersRouteNames> = {
     loadComponent: () => import('../../views/single.component').then((m) => m.UserComponent),
     meta: {
       title: 'کاربر',
-      pagePath: () => '/super_admin/users/:userId',
+      pagePath: (userId: string) => `/super_admin/users/${userId}`,
     },
   },
 };

src/app/domains/superAdmin/users/models/accounts_io.d.ts

@@ -0,0 +1,13 @@
+import { TAccountType } from '@/core/constants/accountTypes.const';
+
+export interface IAccountRawResponse {
+  username: string;
+  id: number;
+}
+export interface IAccountResponse extends IAccountRawResponse {}
+
+export interface IAccountRequest {
+  username: string;
+  password?: string;
+  type: TAccountType;
+}

src/app/domains/superAdmin/users/models/index.ts

@@ -1 +1,2 @@
+export * from './accounts_io';
 export * from './io';

src/app/domains/superAdmin/users/models/io.d.ts

@@ -1,17 +1,18 @@
-import { IRoleResponse } from '@/shared/catalog/roles';
+import { TRoles } from '@/core';
 
 export interface IUserRawResponse {
-  mobileNumber: string;
-  firstName: string;
-  lastName: string;
-  id: number;
-  role: IRoleResponse;
+  mobile_number: string;
+  first_name: string;
+  last_name: string;
+  fullname: string;
+  id: string;
+  role: TRoles;
 }
 export interface IUserResponse extends IUserRawResponse {}
 
 export interface IUserRequest {
-  firstName: string;
-  lastName: string;
-  mobileNumber: string;
-  roleId: number;
+  first_name: string;
+  last_name: string;
+  mobile_number: string;
+  role: TRoles;
 }

src/app/domains/superAdmin/users/services/accounts.service.ts

@@ -0,0 +1,28 @@
+import { IPaginatedResponse } from '@/core/models/service.model';
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { ACCOUNTS_API_ROUTES } from '../constants';
+import { IAccountRawResponse, IAccountRequest, IAccountResponse } from '../models';
+
+@Injectable({ providedIn: 'root' })
+export class AdminUserAccountsService {
+  constructor(private http: HttpClient) {}
+
+  private apiRoutes = ACCOUNTS_API_ROUTES;
+
+  getAll(userId: string): Observable<IPaginatedResponse<IAccountResponse>> {
+    return this.http.get<IPaginatedResponse<IAccountRawResponse>>(this.apiRoutes.list(userId));
+  }
+  getSingle(userId: string, accountId: string): Observable<IAccountResponse> {
+    return this.http.get<IAccountRawResponse>(this.apiRoutes.single(userId, accountId));
+  }
+
+  create(userId: string, data: IAccountRequest): Observable<IAccountResponse> {
+    return this.http.post<IAccountResponse>(this.apiRoutes.list(userId), data);
+  }
+
+  update(userId: string, accountId: string, data: IAccountRequest): Observable<IAccountResponse> {
+    return this.http.patch<IAccountResponse>(this.apiRoutes.single(userId, accountId), data);
+  }
+}

src/app/domains/superAdmin/users/store/user.store.ts

@@ -0,0 +1,53 @@
+import { EntityState, EntityStore } from '@/core/state';
+import { inject, Injectable } from '@angular/core';
+import { catchError, finalize, throwError } from 'rxjs';
+import { IUserResponse } from '../models';
+import { UsersService } from '../services/main.service';
+
+interface UserState extends EntityState<IUserResponse> {}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UserStore extends EntityStore<IUserResponse, UserState> {
+  private readonly service = inject(UsersService);
+  constructor() {
+    super({
+      loading: false,
+      error: null,
+      entity: null,
+      initialized: false,
+      isRefreshing: false,
+    });
+  }
+
+  getData(userId: string) {
+    this.patchState({ loading: true });
+    this.service
+      .getSingle(userId)
+      .pipe(
+        finalize(() => {
+          this.patchState({ loading: false });
+        }),
+        catchError(() => {
+          this.patchState({
+            error: '',
+          });
+          return throwError('');
+        }),
+      )
+      .subscribe((entity) => {
+        this.patchState({ entity });
+      });
+  }
+
+  override reset(): void {
+    this.setState({
+      loading: false,
+      error: null,
+      entity: null,
+      initialized: false,
+      isRefreshing: false,
+    });
+  }
+}

src/app/domains/superAdmin/users/views/accounts/index.ts

@@ -0,0 +1 @@
+export * from './list.component';

src/app/domains/superAdmin/users/views/accounts/list.component.html

@@ -0,0 +1 @@
+<superAdmin-user-account-list [userId]="userId()" />

src/app/domains/superAdmin/users/views/accounts/list.component.ts

@@ -0,0 +1,15 @@
+// import { CatalogRoleTagComponent } from '@/shared/catalog/roles';
+import { Component, inject, signal } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { UsersComponent } from '../../components/accounts/list.component';
+
+@Component({
+  selector: 'superAdmin-user-accounts',
+  templateUrl: './list.component.html',
+  imports: [UsersComponent],
+})
+export class UserAccountsComponent {
+  private readonly route = inject(ActivatedRoute);
+
+  userId = signal<string>(this.route.snapshot.params['userId']);
+}

src/app/domains/superAdmin/users/views/index.ts

@@ -1,2 +1,3 @@
+export * from './accounts';
 export * from './list.component';
 export * from './single.component';

src/app/domains/superAdmin/users/views/list.component.html

@@ -9,10 +9,15 @@
   [loading]="loading()"
   [showDetails]="true"
   [showAdd]="true"
+  [showEdit]="true"
   (onAdd)="openAddForm()"
->
-  <!-- <ng-template #role let-data>
-    <catalog-role-tag [role]="data.role" />
-  </ng-template> -->
-</app-page-data-list>
-<user-form [(visible)]="visibleForm" (onSubmit)="refresh()" />
+  (onEdit)="onEditClick($event)"
+  (onDetails)="toSinglePage($event)"
+/>
+<superAdmin-user-form
+  [(visible)]="visibleForm"
+  [editMode]="editMode()"
+  [initialValues]="selectedItemForEdit() || undefined"
+  [userId]="selectedItemForEdit()?.id || ''"
+  (onSubmit)="refresh()"
+/>

src/app/domains/superAdmin/users/views/list.component.ts

@@ -2,17 +2,20 @@
 import { AbstractList } from '@/shared/abstractClasses/abstract-list';
 import { PageDataListComponent } from '@/shared/components/pageDataList/page-data-list.component';
 import { Component, inject } from '@angular/core';
-import { UserFormComponent } from '../components/form.component';
+import { Router } from '@angular/router';
+import { UserAccountFormComponent } from '../components/form.component';
+import { usersNamedRoutes } from '../constants';
 import { IUserResponse } from '../models';
 import { UsersService } from '../services/main.service';
 
 @Component({
-  selector: 'app-users',
+  selector: 'superAdmin-users',
   templateUrl: './list.component.html',
-  imports: [PageDataListComponent, UserFormComponent],
+  imports: [PageDataListComponent, UserAccountFormComponent],
 })
 export class UsersComponent extends AbstractList<IUserResponse> {
   private readonly service = inject(UsersService);
+  private readonly router = inject(Router);
 
   override setColumns(): void {
     this.columns = [
@@ -31,4 +34,8 @@ export class UsersComponent extends AbstractList<IUserResponse> {
   override getDataRequest() {
     return this.service.getAll();
   }
+
+  toSinglePage(item: IUserResponse) {
+    this.router.navigateByUrl(usersNamedRoutes.user.meta.pagePath!(item.id));
+  }
 }

src/app/domains/superAdmin/users/views/single.component.html

@@ -1 +1,20 @@
-<div class=""></div>
+<div class="flex flex-col gap-6">
+  <app-card-data cardTitle="اطلاعات کاربر" [editable]="true" [(editMode)]="editMode">
+    <div class="flex flex-col gap-4">
+      <div class="grid grid-cols-3 gap-4 items-center">
+        <app-key-value label="نام" [value]="user()?.fullname" />
+        <app-key-value label="شماره تماس" [value]="user()?.mobile_number" />
+      </div>
+    </div>
+  </app-card-data>
+
+  <superAdmin-user-account-list [userId]="userId()" />
+
+  <superAdmin-user-form
+    [(visible)]="editMode"
+    [editMode]="true"
+    [userId]="userId()"
+    [initialValues]="user() || undefined"
+    (onSubmit)="getData()"
+  />
+</div>

src/app/domains/superAdmin/users/views/single.component.ts

@@ -1,9 +1,54 @@
-import { Component } from '@angular/core';
+import { BreadcrumbService } from '@/core/services';
+import { AppCardComponent, KeyValueComponent } from '@/shared/components';
+import { Component, computed, effect, inject, signal } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { UsersComponent } from '../components/accounts/list.component';
+import { UserAccountFormComponent } from '../components/form.component';
+import { usersNamedRoutes } from '../constants';
+import { UserStore } from '../store/user.store';
 
 @Component({
-  selector: 'app-user',
+  selector: 'superAdmin-user',
   templateUrl: './single.component.html',
+  imports: [AppCardComponent, KeyValueComponent, UserAccountFormComponent, UsersComponent],
 })
 export class UserComponent {
-  constructor() {}
+  private readonly store = inject(UserStore);
+  private readonly route = inject(ActivatedRoute);
+  private readonly breadcrumbService = inject(BreadcrumbService);
+
+  readonly userId = signal<string>(this.route.snapshot.paramMap.get('userId')!);
+  editMode = signal<boolean>(false);
+
+  readonly loading = computed(() => this.store.loading());
+  readonly user = computed(() => this.store.entity());
+
+  constructor() {
+    effect(() => {
+      if (this.user()?.id) {
+        this.setBreadcrumb();
+      }
+    });
+  }
+
+  async getData() {
+    await this.store.getData(this.userId());
+    this.setBreadcrumb();
+  }
+
+  ngOnInit() {
+    this.getData();
+  }
+
+  setBreadcrumb() {
+    this.breadcrumbService.setItems([
+      {
+        ...usersNamedRoutes.users.meta,
+        routerLink: usersNamedRoutes.users.meta.pagePath!(),
+      },
+      {
+        title: this.user()?.fullname,
+      },
+    ]);
+  }
 }