menu is modified

src/app/navigation/i18n/en.ts

@@ -4,41 +4,26 @@ export const locale = {
     navigation: {
       dashboard: {
         title: 'Dashboard',
-        ucap: {
+        main: {
-          title: 'UCAP'
+          title: 'Main'
         },
-        mariadb: {
+        media: {
-          title: 'MariaDB'
+          title: 'Media'
+        },
+        user: {
+          title: 'User'
         }
       },
-      statistics: {
+      medias: {
-        title: 'Statistics',
+        title: 'Medias',
-        system: {
+        media: {
-          title: 'System'
+          title: 'Media'
-        },
-        process: {
-          title: 'Process'
-        },
-        connections: {
-          title: 'Connections'
-        },
-        messages: {
-          title: 'Messages'
         }
       },
-      settings: {
+      users: {
-        title: 'Settings',
+        title: 'Users',
-        general: {
+        user: {
-          title: 'General'
+          title: 'User'
-        },
-        dashboard: {
-          title: 'Dashboard'
-        },
-        alarm: {
-          title: 'Alarm'
-        },
-        etc: {
-          title: 'ETC'
         }
       }
     }

src/app/navigation/i18n/ko.ts

@@ -4,41 +4,26 @@ export const locale = {
     navigation: {
       dashboard: {
         title: '데시보드',
-        ucap: {
+        main: {
-          title: 'UCAP'
+          title: '메인'
         },
-        mariadb: {
+        media: {
-          title: 'MariaDB'
+          title: '미디어'
+        },
+        user: {
+          title: '사용자'
         }
       },
-      statistics: {
+      medias: {
-        title: '통계',
+        title: '미디어 관리',
-        system: {
+        media: {
-          title: '시스템'
+          title: '미디어'
-        },
-        process: {
-          title: '프로세스'
-        },
-        connections: {
-          title: '접속'
-        },
-        messages: {
-          title: '메시지'
         }
       },
-      settings: {
+      users: {
-        title: '설정',
+        title: '사용자 관리',
-        general: {
+        user: {
-          title: '일반'
+          title: '사용자'
-        },
-        dashboard: {
-          title: '데시보드'
-        },
-        alarm: {
-          title: '알림'
-        },
-        etc: {
-          title: '기타'
         }
       }
     }

src/app/navigation/navigation.ts

@@ -9,69 +9,62 @@ export const navigation: FuseNavigation[] = [
     icon: 'dashboard',
     children: [
       {
-        id: 'dashboard-ucap',
+        id: 'dashboard-main',
-        title: 'UCAP',
+        title: 'Main',
-        translate: 'navigation.dashboard.ucap.title',
+        translate: 'navigation.dashboard.main.title',
         type: 'item',
         icon: 'email',
         url: '/dashboard/main'
       },
       {
-        id: 'dashboard-mariadb',
+        id: 'dashboard-media',
-        title: 'MariaDB',
+        title: 'Media',
-        translate: 'navigation.dashboard.mariadb.title',
+        translate: 'navigation.dashboard.media.title',
         type: 'item',
         icon: 'email',
-        url: '/dashboard/mariadb'
+        url: '/dashboard/media'
+      },
+      {
+        id: 'dashboard-user',
+        title: 'User',
+        translate: 'navigation.dashboard.user.title',
+        type: 'item',
+        icon: 'group',
+        url: '/dashboard/user'
       }
     ]
   },
   {
-    id: 'statistics',
+    id: 'medias',
-    title: 'Statistics',
+    title: 'Medias',
-    icon: 'insert_chart',
+    icon: 'music_video',
-    translate: 'navigation.statistics.title',
+    translate: 'navigation.medias.title',
-    type: 'item',
-    url: '/statistics'
-  },
-  {
-    id: 'settings',
-    title: 'Settings',
-    icon: 'settings',
-    translate: 'navigation.settings.title',
     type: 'collapsable',
     children: [
       {
-        id: 'settings-general',
+        id: 'medias-media',
-        title: 'General',
+        title: 'Media',
-        translate: 'navigation.settings.general.title',
+        translate: 'navigation.medias.media.title',
         type: 'item',
-        icon: 'settings_applications',
+        icon: 'music_video',
-        url: '/settings/general'
+        url: '/media/medias'
+      }
+    ]
   },
   {
-        id: 'settings-dashboard',
+    id: 'users',
-        title: 'Dashboard',
+    title: 'Users',
-        translate: 'navigation.settings.dashboard.title',
+    icon: 'group',
-        type: 'item',
+    translate: 'navigation.users.title',
-        icon: 'dashboard',
+    type: 'collapsable',
-        url: '/settings/dashboard'
+    children: [
-      },
       {
-        id: 'settings-alarm',
+        id: 'users-user',
-        title: 'Alarm',
+        title: 'User',
-        translate: 'navigation.settings.alarm.title',
+        translate: 'navigation.users.user.title',
         type: 'item',
-        icon: 'alarm',
+        icon: 'group',
-        url: '/settings/alarm'
+        url: '/user/users'
-      },
-      {
-        id: 'settings-etc',
-        title: 'Etc',
-        translate: 'navigation.settings.etc.title',
-        type: 'item',
-        icon: 'subject',
-        url: '/settings/etc'
       }
     ]
   }

src/app/pages/dashboard/dashboard-routing.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: 'main',
+    loadChildren: './main/dashboard-main.module#DashboardMainModule'
+  },
+  {
+    path: 'media',
+    loadChildren: './media/dashboard-media.module#DashboardMediaModule'
+  },
+  {
+    path: 'user',
+    loadChildren: './user/dashboard-user.module#DashboardUserModule'
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class DashboardRoutingModule {}

src/app/pages/dashboard/dashboard.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+
+import { DashboardRoutingModule } from './dashboard-routing.module';
+
+@NgModule({
+  imports: [DashboardRoutingModule],
+  declarations: [],
+  providers: []
+})
+export class DashboardModule {}

src/app/pages/dashboard/main/component/index.ts

@@ -0,0 +1 @@
+export const COMPONENTS = [];

src/app/pages/dashboard/main/dashboard-main-routing.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class DashboardMainRoutingModule {}

src/app/pages/dashboard/main/dashboard-main.module.ts

@@ -0,0 +1,46 @@
+import { NgModule } from '@angular/core';
+
+import { MatButtonModule } from '@angular/material/button';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+
+import { FuseSharedModule } from 'src/@fuse/shared.module';
+import { FuseWidgetModule } from 'src/@fuse/components/widget/widget.module';
+
+import { DashboardMainRoutingModule } from './dashboard-main-routing.module';
+
+import { COMPONENTS } from './component';
+
+@NgModule({
+  imports: [
+    MatButtonModule,
+    MatExpansionModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatMenuModule,
+    MatPaginatorModule,
+    MatSelectModule,
+    MatSortModule,
+    MatTableModule,
+    MatTabsModule,
+    MatCheckboxModule,
+
+    FuseSharedModule,
+    FuseWidgetModule,
+
+    DashboardMainRoutingModule
+  ],
+  declarations: [...COMPONENTS],
+  providers: []
+})
+export class DashboardMainModule {}

src/app/pages/dashboard/media/component/index.ts

@@ -0,0 +1 @@
+export const COMPONENTS = [];

src/app/pages/dashboard/media/dashboard-media-routing.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class DashboardMediaRoutingModule {}

src/app/pages/dashboard/media/dashboard-media.module.ts

@@ -0,0 +1,46 @@
+import { NgModule } from '@angular/core';
+
+import { MatButtonModule } from '@angular/material/button';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+
+import { FuseSharedModule } from 'src/@fuse/shared.module';
+import { FuseWidgetModule } from 'src/@fuse/components/widget/widget.module';
+
+import { DashboardMediaRoutingModule } from './dashboard-media-routing.module';
+
+import { COMPONENTS } from './component';
+
+@NgModule({
+  imports: [
+    MatButtonModule,
+    MatExpansionModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatMenuModule,
+    MatPaginatorModule,
+    MatSelectModule,
+    MatSortModule,
+    MatTableModule,
+    MatTabsModule,
+    MatCheckboxModule,
+
+    FuseSharedModule,
+    FuseWidgetModule,
+
+    DashboardMediaRoutingModule
+  ],
+  declarations: [...COMPONENTS],
+  providers: []
+})
+export class DashboardMediaModule {}

src/app/pages/dashboard/user/component/index.ts

@@ -0,0 +1 @@
+export const COMPONENTS = [];

src/app/pages/dashboard/user/dashboard-user-routing.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class DashboardUserRoutingModule {}

src/app/pages/dashboard/user/dashboard-user.module.ts

@@ -0,0 +1,46 @@
+import { NgModule } from '@angular/core';
+
+import { MatButtonModule } from '@angular/material/button';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+
+import { FuseSharedModule } from 'src/@fuse/shared.module';
+import { FuseWidgetModule } from 'src/@fuse/components/widget/widget.module';
+
+import { DashboardUserRoutingModule } from './dashboard-user-routing.module';
+
+import { COMPONENTS } from './component';
+
+@NgModule({
+  imports: [
+    MatButtonModule,
+    MatExpansionModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatMenuModule,
+    MatPaginatorModule,
+    MatSelectModule,
+    MatSortModule,
+    MatTableModule,
+    MatTabsModule,
+    MatCheckboxModule,
+
+    FuseSharedModule,
+    FuseWidgetModule,
+
+    DashboardUserRoutingModule
+  ],
+  declarations: [...COMPONENTS],
+  providers: []
+})
+export class DashboardUserModule {}

src/app/pages/pages-routing.module.ts

@@ -6,6 +6,10 @@ const routes: Routes = [
     path: 'accounts',
     loadChildren: './accounts/accounts.module#AccountsModule'
   },
+  {
+    path: 'dashboard',
+    loadChildren: './dashboard/dashboard.module#DashboardModule'
+  },
   {
     path: 'user',
     loadChildren: './users/users.module#UsersModule'

src/app/pages/users/user/component/detail.component.html

@@ -0,0 +1,125 @@
+<div id="user" class="page-layout carded fullwidth inner-scroll">
+  <!-- TOP BACKGROUND -->
+  <div class="top-bg accent"></div>
+  <!-- / TOP BACKGROUND -->
+
+  <!-- CENTER -->
+  <div class="center">
+    <!-- HEADER -->
+    <div
+      class="header accent"
+      fxLayout="row"
+      fxLayoutAlign="space-between center"
+    >
+      <!-- APP TITLE -->
+      <div fxLayout="row" fxLayoutAlign="start center">
+        <button mat-icon-button class="mr-16" [routerLink]="'/user/users'">
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+
+        <div
+          fxLayout="column"
+          fxLayoutAlign="start start"
+          [@animate]="{ value: '*', params: { delay: '100ms', x: '-25px' } }"
+        >
+          <div class="h2">User {{ user.username }}</div>
+          <div class="subtitle secondary-text">
+            <span>{{ user.nickname }}</span>
+          </div>
+        </div>
+      </div>
+      <!-- / APP TITLE -->
+
+      <button
+        mat-raised-button
+        class="save-product-button"
+        [disabled]="userForm.invalid"
+        *ngIf="!user.id"
+      >
+        <span>ADD</span>
+      </button>
+
+      <button
+        mat-raised-button
+        class="save-product-button"
+        [disabled]="userForm.invalid || userForm.pristine"
+        *ngIf="user.id"
+      >
+        <span>SAVE</span>
+      </button>
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT CARD -->
+    <div class="content-card">
+      <!-- CONTENT -->
+      <div class="content">
+        <mat-tab-group fxLayout="column" fxFlex>
+          <mat-tab label="User Details">
+            <div class="tab-content p-24" fusePerfectScrollbar>
+              <form
+                name="userForm"
+                [formGroup]="userForm"
+                class="product w-100-p"
+                fxLayout="column"
+                fxFlex
+              >
+                <mat-form-field
+                  appearance="outline"
+                  floatLabel="always"
+                  class="w-100-p"
+                >
+                  <mat-label>Username</mat-label>
+                  <input
+                    matInput
+                    placeholder="Username"
+                    name="username"
+                    formControlName="username"
+                  />
+                  <span matPrefix>&nbsp;</span>
+                </mat-form-field>
+                <mat-form-field
+                  appearance="outline"
+                  floatLabel="always"
+                  class="w-100-p"
+                >
+                  <mat-label>Password</mat-label>
+                  <input
+                    matInput
+                    placeholder="Password"
+                    name="password"
+                    formControlName="password"
+                    type="password"
+                  />
+                  <span matPrefix>&nbsp;</span>
+                </mat-form-field>
+                <mat-form-field
+                  appearance="outline"
+                  floatLabel="always"
+                  class="w-100-p"
+                >
+                  <mat-label>Password Confirm</mat-label>
+                  <input
+                    matInput
+                    placeholder="Password confirm"
+                    name="password_confirm"
+                    formControlName="password_confirm"
+                    type="password"
+                  />
+                  <span matPrefix>&nbsp;</span>
+                </mat-form-field>
+              </form>
+            </div>
+          </mat-tab>
+
+          <mat-tab label="Products" *ngIf="user.id">
+            <div class="products tab-content p-24" fusePerfectScrollbar></div>
+          </mat-tab>
+        </mat-tab-group>
+      </div>
+      <!-- / CONTENT -->
+    </div>
+    <!-- / CONTENT CARD -->
+  </div>
+  <!-- / CENTER -->
+</div>

src/app/pages/users/user/component/detail.component.scss

@@ -0,0 +1,397 @@
+@import "src/@fuse/scss/fuse";
+
+#user {
+
+    .header {
+
+        .subtitle {
+            margin: 6px 0 0 0;
+        }
+    }
+
+    .content {
+
+        .mat-tab-group,
+        .mat-tab-body-wrapper,
+        .tab-content {
+            flex: 1 1 auto;
+            max-width: 100%;
+        }
+
+        .tab-content {
+
+            &.products {
+
+                .product-row {
+                    cursor: pointer;
+                }
+            }
+
+            &.invoice {
+
+                #invoice {
+
+                    &.compact {
+                        padding: 0;
+                        overflow: auto;
+                        -webkit-overflow-scrolling: touch;
+
+                        .invoice-container {
+                            padding: 16px;
+
+                            .card {
+                                width: 1020px;
+                                min-width: 1020px;
+                                max-width: 1020px;
+                                padding: 64px 88px;
+                                overflow: hidden;
+                                background: #FFFFFF;
+                                color: rgba(0, 0, 0, 0.87);
+                                @include mat-elevation(7);
+
+                                .header {
+
+                                    .invoice-date {
+                                        font-size: 14px;
+                                        color: rgba(0, 0, 0, 0.54);
+                                        margin-bottom: 32px;
+                                    }
+
+                                    .client {
+
+                                        .invoice-number {
+                                            font-size: 18px;
+                                            padding-bottom: 2px;
+
+                                            .title {
+                                                color: rgba(0, 0, 0, 0.54);
+                                            }
+
+                                            .number {
+                                                padding-left: 6px;
+                                            }
+                                        }
+
+                                        .due-date {
+                                            font-size: 18px;
+                                            padding-bottom: 16px;
+
+                                            .title {
+                                                color: rgba(0, 0, 0, 0.54);
+                                            }
+
+                                            .date {
+                                                padding-left: 6px;
+                                            }
+                                        }
+
+                                        .info {
+                                            color: rgba(0, 0, 0, 0.54);
+                                            line-height: 22px;
+                                        }
+                                    }
+
+                                    .issuer {
+                                        margin-right: -88px;
+                                        padding-right: 66px;
+
+                                        .logo {
+                                            width: 96px;
+                                            padding: 0 8px;
+                                            border-right: 1px solid rgba(255, 255, 255, 0.7);
+                                        }
+
+                                        .info {
+                                            padding: 16px;
+                                        }
+                                    }
+                                }
+
+                                .content {
+
+                                    .invoice-table {
+                                        margin-top: 64px;
+                                        font-size: 15px;
+
+                                        thead {
+
+                                            tr {
+
+                                                th {
+
+                                                    &:first-child {
+                                                        padding-left: 8px;
+                                                    }
+
+                                                    &:last-child {
+                                                        padding-right: 8px;
+                                                    }
+                                                }
+                                            }
+                                        }
+
+                                        tbody {
+
+                                            tr {
+
+                                                td {
+                                                    border-color: rgba(0, 0, 0, 0.12);
+
+                                                    &:first-child {
+                                                        padding-left: 8px;
+                                                    }
+
+                                                    &:last-child {
+                                                        padding-right: 8px;
+                                                    }
+                                                }
+                                            }
+                                        }
+
+                                        .title {
+                                            font-size: 16px;
+                                        }
+
+                                        .detail {
+                                            margin-top: 8px;
+                                            font-size: 12px;
+                                            color: rgba(0, 0, 0, 0.54);
+                                            max-width: 360px;
+                                        }
+                                    }
+
+                                    .invoice-table-footer {
+                                        margin: 32px 0 72px 0;
+
+                                        tr {
+
+                                            td {
+                                                text-align: right;
+                                                font-size: 16px;
+                                                font-weight: 600;
+                                                color: rgba(0, 0, 0, 0.54);
+                                                border-bottom: none;
+                                                padding: 4px 8px;
+
+                                                &:first-child {
+                                                    text-align: left;
+                                                }
+                                            }
+
+                                            &.discount {
+
+                                                td {
+                                                    padding-bottom: 32px;
+                                                }
+                                            }
+
+                                            &.total {
+
+                                                td {
+                                                    padding: 24px 8px;
+                                                    border-top: 1px solid rgba(0, 0, 0, 0.12);
+                                                    font-size: 35px;
+                                                    font-weight: 300;
+                                                    color: rgba(0, 0, 0, 1);
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+
+                                .footer {
+
+                                    .note {
+                                        font-size: 15px;
+                                        font-weight: 600;
+                                        margin-bottom: 24px;
+                                    }
+
+                                    // IE10 fix
+                                    .logo, .small-note {
+                                        -ms-flex: 0 1 auto;
+                                    }
+
+                                    .logo {
+                                        width: 32px;
+                                        min-width: 32px;
+                                        margin-right: 24px;
+                                    }
+
+                                    .small-note {
+                                        font-size: 12px;
+                                        font-weight: 600;
+                                        color: rgba(0, 0, 0, 0.54);
+                                        line-height: 18px;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+
+                /* PRINT STYLES */
+                @media print {
+
+                    /* Invoice Specific Styles */
+                    #invoice {
+
+                        &.compact {
+
+                            .invoice-container {
+                                padding: 0;
+
+                                .card {
+                                    width: 100%;
+                                    min-width: 0;
+                                    background: none;
+                                    padding: 0;
+                                    box-shadow: none;
+
+                                    .header {
+
+                                        .invoice-date {
+                                            margin-bottom: 16pt;
+                                        }
+
+                                        .issuer {
+                                            padding-right: 0;
+                                            margin-right: 0;
+                                        }
+                                    }
+
+                                    .content {
+
+                                        .invoice-table {
+                                            margin-top: 16pt;
+
+                                            thead {
+
+                                                tr {
+
+                                                    th {
+                                                        font-size: 10pt;
+                                                        max-width: 60pt;
+
+                                                        &:first-child {
+                                                            padding-left: 0;
+                                                        }
+
+                                                        &:last-child {
+                                                            padding-right: 0;
+                                                        }
+                                                    }
+                                                }
+                                            }
+
+                                            tbody {
+
+                                                tr {
+
+                                                    td {
+
+                                                        &:first-child {
+                                                            padding-left: 0;
+                                                        }
+
+                                                        &:last-child {
+                                                            padding-right: 0;
+                                                        }
+                                                    }
+                                                }
+                                            }
+
+                                            .title {
+                                                font-size: 10pt;
+                                            }
+
+                                            .detail {
+                                                margin-top: 4pt;
+                                                font-size: 9pt;
+                                                max-width: none;
+                                            }
+                                        }
+
+                                        .invoice-table-footer {
+                                            margin: 16pt 0;
+
+                                            tr {
+
+                                                td {
+                                                    font-size: 13pt;
+                                                    padding: 4pt 4pt;
+
+                                                    &:first-child {
+                                                        text-align: left;
+                                                        padding-left: 0;
+                                                    }
+
+                                                    &:last-child {
+                                                        padding-right: 0;
+                                                    }
+                                                }
+
+                                                &.discount {
+
+                                                    td {
+                                                        padding-bottom: 16pt;
+                                                    }
+                                                }
+
+                                                &.total {
+
+                                                    td {
+                                                        padding: 16pt 4pt 0 4pt;
+                                                        font-size: 16pt;
+
+                                                        &:first-child {
+                                                            padding-left: 0;
+                                                        }
+
+                                                        &:last-child {
+                                                            padding-right: 0;
+                                                        }
+                                                    }
+                                                }
+                                            }
+                                        }
+                                    }
+
+                                    .footer {
+
+                                        .note {
+                                            font-size: 10pt;
+                                            margin-bottom: 8pt;
+                                        }
+
+                                        .logo {
+                                            margin-right: 8pt;
+                                        }
+
+                                        .small-note {
+                                            font-size: 8pt;
+                                            line-height: normal;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        .mat-tab-body-content {
+            display: flex;
+        }
+
+        .mat-tab-label {
+            height: 64px;
+        }
+
+        table {
+            table-layout: fixed;
+        }
+    }
+
+}

src/app/pages/users/user/component/detail.component.ts

@@ -0,0 +1,90 @@
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { Subject } from 'rxjs';
+import { takeUntil, map } from 'rxjs/operators';
+
+import { fuseAnimations } from 'src/@fuse/animations';
+import { User } from 'src/modules/user/model/user.model';
+import { UserService } from 'src/modules/user/service/user.service';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-pages-users-user-detail',
+  templateUrl: './detail.component.html',
+  styleUrls: ['./detail.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  animations: fuseAnimations
+})
+export class DetailComponent implements OnInit, OnDestroy {
+  user: User;
+  userForm: FormGroup;
+
+  // Private
+  private _unsubscribeAll: Subject<any>;
+
+  /**
+   * Constructor
+   */
+  constructor(
+    private userService: UserService,
+    private activatedRoute: ActivatedRoute,
+    private formBuilder: FormBuilder
+  ) {
+    // Set the private defaults
+    this._unsubscribeAll = new Subject();
+  }
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Lifecycle hooks
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * On init
+   */
+  ngOnInit(): void {
+    this.activatedRoute.data.subscribe(data => {
+      this.user = data.user;
+
+      this.initializeForm();
+    });
+  }
+
+  /**
+   * On destroy
+   */
+  ngOnDestroy(): void {
+    // Unsubscribe from all subscriptions
+    this._unsubscribeAll.next();
+    this._unsubscribeAll.complete();
+  }
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Private methods
+  // -----------------------------------------------------------------------------------------------------
+  initializeForm(): void {
+    this.userForm = this.formBuilder.group({
+      username: this.user.username,
+      password: '',
+      password_confirm: ''
+    });
+  }
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Public methods
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * Update status
+   */
+  updateStatus(): void {
+    // const newStatusId = Number.parseInt(this.statusForm.get('newStatus').value);
+    // if (!newStatusId) {
+    //   return;
+    // }
+    // const newStatus = this.orderStatuses.find(status => {
+    //   return status.id === newStatusId;
+    // });
+    // newStatus['date'] = new Date().toString();
+    // this.order.status.unshift(newStatus);
+  }
+}

src/app/pages/users/user/component/index.ts

@@ -1,3 +1,4 @@
+import { DetailComponent } from './detail.component';
 import { ListComponent } from './list.component';
 
-export const COMPONENTS = [ListComponent];
+export const COMPONENTS = [DetailComponent, ListComponent];

src/app/pages/users/user/component/list.component.html

@@ -146,7 +146,7 @@
           *matRowDef="let user; columns: displayedColumns"
           class="user"
           matRipple
-          [routerLink]="'/apps/e-commerce/users/' + user.id"
+          [routerLink]="'/user/users/' + user.id"
         >
         </mat-row>
       </mat-table>

src/app/pages/users/user/resolver/detail.resolver.ts

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import {
+  ActivatedRouteSnapshot,
+  Resolve,
+  RouterStateSnapshot
+} from '@angular/router';
+import { Observable, of } from 'rxjs';
+import { User } from 'src/modules/user/model/user.model';
+import { UserService } from 'src/modules/user/service/user.service';
+
+@Injectable()
+export class DetailResolver implements Resolve<User> {
+  /**
+   * Constructor
+   */
+  constructor(private userService: UserService) {}
+
+  /**
+   * Resolver
+   */
+  resolve(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ): Observable<User> | Promise<User> | any {
+    const id = route.params.id;
+    if ('0' === id) {
+      return of({});
+    }
+    return this.userService.getUser(route.params.id);
+  }
+}

src/app/pages/users/user/resolver/index.ts

@@ -0,0 +1,3 @@
+import { DetailResolver } from './detail.resolver';
+
+export const RESOLVERS = [DetailResolver];

src/app/pages/users/user/user-routing.module.ts

@@ -1,11 +1,20 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { ListComponent } from './component/list.component';
+import { DetailComponent } from './component/detail.component';
+import { DetailResolver } from './resolver/detail.resolver';
 
 const routes: Routes = [
   {
     path: '',
     component: ListComponent
+  },
+  {
+    path: ':id',
+    component: DetailComponent,
+    resolve: {
+      user: DetailResolver
+    }
   }
 ];
 

src/app/pages/users/user/user.module.ts

@@ -1,8 +1,10 @@
 import { NgModule } from '@angular/core';
 
 import { MatButtonModule } from '@angular/material/button';
+import { MatExpansionModule } from '@angular/material/expansion';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatSelectModule } from '@angular/material/select';
@@ -17,12 +19,15 @@ import { FuseWidgetModule } from 'src/@fuse/components/widget/widget.module';
 import { UserRoutingModule } from './user-routing.module';
 
 import { COMPONENTS } from './component';
+import { RESOLVERS } from './resolver';
 
 @NgModule({
   imports: [
     MatButtonModule,
+    MatExpansionModule,
     MatFormFieldModule,
     MatIconModule,
+    MatInputModule,
     MatMenuModule,
     MatPaginatorModule,
     MatSelectModule,
@@ -37,6 +42,6 @@ import { COMPONENTS } from './component';
     UserRoutingModule
   ],
   declarations: [...COMPONENTS],
-  providers: []
+  providers: [...RESOLVERS]
 })
 export class UserModule {}

src/modules/common/data/model/audit.ts

@@ -1,9 +1,9 @@
 export interface DateAudit {
-  createdDate: Date;
+  createdDate?: Date;
-  lastModifiedDate: Date;
+  lastModifiedDate?: Date;
 }
 
 export interface UserDateAuditEntity extends DateAudit {
-  createdBy: number;
+  createdBy?: number;
-  lastModifiedBy: number;
+  lastModifiedBy?: number;
 }

src/modules/user/model/user.model.ts

@@ -2,12 +2,12 @@ import { Role } from './role.model';
 import { DateAudit } from 'src/modules/common/data/model/audit';
 
 export interface User extends DateAudit {
-  id: number;
+  id?: number;
-  username: string;
+  username?: string;
   password?: string;
-  nickname: string;
+  nickname?: string;
-  email: string;
+  email?: string;
-  block: boolean;
+  block?: boolean;
-  sendEmail: boolean;
+  sendEmail?: boolean;
-  roles: Role[];
+  roles?: Role[];
 }

src/modules/user/service/user.service.ts

@@ -18,4 +18,8 @@ export class UserService {
   public getUsers(): Observable<Page<User>> {
     return this.httpClient.get<Page<User>>(`${this.apiBaseUrl}/users`, {});
   }
+
+  public getUser(id: number): Observable<User> {
+    return this.httpClient.get<User>(`${this.apiBaseUrl}/users/${id}`, {});
+  }
 }