@duyanhdev/mvp-ifs-ui-kit 21.0.0

package/src/app/pages/pages.routes.ts

@@ -0,0 +1,17 @@
+import { Routes } from '@angular/router';
+import { Documentation } from './documentation/documentation';
+import { Crud } from './crud/crud';
+import { Empty } from './empty/empty';
+import { TicketListComponent } from './tickets/tickets-list/ticket-list';
+import { TicketCreateComponent } from './tickets/tickets-create/tickets-create';
+
+export default [
+    { path: 'documentation', component: Documentation },
+    { path: 'crud', component: Crud },
+    { path: 'empty', component: Empty },
+
+    { path: 'ticket-list', component: TicketListComponent },
+
+    { path: 'ticket-create', component: TicketCreateComponent },
+    { path: '**', redirectTo: '/notfound' }
+] as Routes;

package/src/app/pages/profile/profile.html

@@ -0,0 +1,57 @@
+<div class="profile-wrapper">
+    <p-card styleClass="profile-card">
+        <div class="flex items-center gap-2">
+            <img
+                src="data:image/jpeg;base64,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"
+                alt="avatar"
+                class="w-14 h-14 rounded-full object-cover ring-2 ring-indigo-100 shadow-md"
+            />
+            <div class="profile-identity mt-2">
+                <h2 class="profile-name">Đặng Trịnh Duy Anh</h2>
+                <div class="profile-roles">
+                    <p-tag value="Quản lý" icon="pi pi-briefcase" styleClass="role-tag" />
+                    <p-tag value="Nhân viên mua hàng" icon="pi pi-shopping-cart" severity="secondary" styleClass="role-tag" />
+                </div>
+            </div>
+        </div>
+
+        <p-divider />
+
+        <div class="info-grid">
+            <div class="info-item">
+                <span class="info-label"> <i class="pi pi-user"></i> Họ và tên </span>
+                <span class="info-value">Đặng Trịnh Duy Anh</span>
+            </div>
+
+            <div class="info-item">
+                <span class="info-label"> <i class="pi pi-id-card"></i> Chức vụ </span>
+                <span class="info-value">Quản lý</span>
+            </div>
+
+            <div class="info-item">
+                <span class="info-label"> <i class="pi pi-phone"></i> Số điện thoại </span>
+                <span class="info-value">0373 081 693</span>
+            </div>
+
+            <div class="info-item">
+                <span class="info-label"> <i class="pi pi-building"></i> Bộ phận </span>
+                <span class="info-value">Mua hàng</span>
+            </div>
+
+            <div class="info-item">
+                <span class="info-label"> <i class="pi pi-map-marker"></i> Địa chỉ </span>
+                <span class="info-value">Hà Nội, Việt Nam</span>
+            </div>
+            <div class="info-item">
+                <span class="info-label"> <i class="pi pi-id-card"></i> Chức vụ </span>
+                <span class="info-value">Quản lý</span>
+            </div>
+        </div>
+
+        <ng-template pTemplate="footer">
+            <div class="profile-actions float-right">
+                <p-button label="Chỉnh sửa" icon="pi pi-pencil" styleClass="p-button-outlined" />
+            </div>
+        </ng-template>
+    </p-card>
+</div>

package/src/app/pages/profile/profile.scss

@@ -0,0 +1,145 @@
+// profile.component.scss
+// Requires PrimeNG + PrimeFlex
+
+.profile-wrapper {
+    max-width: 860px;
+    margin: 2rem auto;
+    padding: 0 1rem;
+}
+
+// ── Card shell ──────────────────────────────────────────────
+::ng-deep .profile-card {
+    border-radius: 16px !important;
+    overflow: hidden;
+    border: 1px solid #cccccc;
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
+
+    .p-card-body {
+        padding: 0 !important;
+    }
+
+    .p-card-content {
+        padding: 1.25rem 1.5rem !important;
+    }
+
+    .p-card-footer {
+        padding: 0 1.5rem 1.5rem !important;
+    }
+}
+
+// ── Cover banner ────────────────────────────────────────────
+.profile-cover {
+    position: relative;
+    height: 120px;
+    margin-bottom: 48px;
+
+    .cover-bg {
+        height: 100%;
+        background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
+    }
+
+    .avatar-wrapper {
+        position: absolute;
+        bottom: -40px;
+        left: 1.5rem;
+        display: flex;
+        align-items: flex-end;
+        gap: 8px;
+    }
+
+    .avatar-badge {
+        margin-bottom: 4px;
+    }
+}
+
+// ── Avatar ───────────────────────────────────────────────────
+::ng-deep .profile-avatar {
+    width: 80px !important;
+    height: 80px !important;
+    font-size: 1.5rem !important;
+    font-weight: 600 !important;
+    background: #6366f1 !important;
+    color: #fff !important;
+    border: 3px solid var(--surface-card) !important;
+    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.35) !important;
+}
+
+// ── Identity block ───────────────────────────────────────────
+.profile-identity {
+    margin-bottom: 1rem;
+}
+
+.profile-name {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--text-color);
+    margin: 0 0 0.5rem;
+    letter-spacing: -0.01em;
+}
+
+.profile-roles {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+}
+
+::ng-deep .role-tag {
+    font-size: 0.75rem !important;
+    padding: 3px 10px !important;
+    border-radius: 999px !important;
+}
+
+// ── Info grid ────────────────────────────────────────────────
+.info-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.875rem;
+}
+
+.info-item {
+    background: var(--surface-ground);
+    border-radius: 10px;
+    padding: 0.75rem 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    &--full {
+        grid-column: 1 / -1;
+    }
+}
+
+.info-label {
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.07em;
+    color: var(--text-color-secondary);
+    display: flex;
+    align-items: center;
+    gap: 5px;
+
+    i {
+        font-size: 0.7rem;
+        color: #6366f1;
+    }
+}
+
+.info-value {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--text-color);
+}
+
+// ── Footer actions ───────────────────────────────────────────
+.profile-actions {
+    display: flex;
+    gap: 0.625rem;
+    flex-wrap: wrap;
+
+    .p-button {
+        flex: 1;
+        justify-content: center;
+        min-width: 100px;
+        font-size: 0.85rem;
+    }
+}

package/src/app/pages/profile/profile.ts

@@ -0,0 +1,19 @@
+// profile.component.ts
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+// PrimeNG Modules
+import { CardModule } from 'primeng/card';
+import { AvatarModule } from 'primeng/avatar';
+import { TagModule } from 'primeng/tag';
+import { ButtonModule } from 'primeng/button';
+import { DividerModule } from 'primeng/divider';
+
+@Component({
+    selector: 'app-profile',
+    standalone: true,
+    imports: [CommonModule, CardModule, AvatarModule, TagModule, ButtonModule, DividerModule],
+    templateUrl: './profile.html',
+    styleUrls: ['./profile.scss']
+})
+export class ProfileComponent {}

package/src/app/pages/service/country.service.ts

@@ -0,0 +1,255 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class CountryService {
+    getData() {
+        return [
+            { name: 'Afghanistan', code: 'AF' },
+            { name: 'Albania', code: 'AL' },
+            { name: 'Algeria', code: 'DZ' },
+            { name: 'American Samoa', code: 'AS' },
+            { name: 'Andorra', code: 'AD' },
+            { name: 'Angola', code: 'AO' },
+            { name: 'Anguilla', code: 'AI' },
+            { name: 'Antarctica', code: 'AQ' },
+            { name: 'Antigua and Barbuda', code: 'AG' },
+            { name: 'Argentina', code: 'AR' },
+            { name: 'Armenia', code: 'AM' },
+            { name: 'Aruba', code: 'AW' },
+            { name: 'Australia', code: 'AU' },
+            { name: 'Austria', code: 'AT' },
+            { name: 'Azerbaijan', code: 'AZ' },
+            { name: 'Bahamas', code: 'BS' },
+            { name: 'Bahrain', code: 'BH' },
+            { name: 'Bangladesh', code: 'BD' },
+            { name: 'Barbados', code: 'BB' },
+            { name: 'Belarus', code: 'BY' },
+            { name: 'Belgium', code: 'BE' },
+            { name: 'Belize', code: 'BZ' },
+            { name: 'Benin', code: 'BJ' },
+            { name: 'Bermuda', code: 'BM' },
+            { name: 'Bhutan', code: 'BT' },
+            { name: 'Bolivia', code: 'BO' },
+            { name: 'Bosnia and Herzegovina', code: 'BA' },
+            { name: 'Botswana', code: 'BW' },
+            { name: 'Bouvet Island', code: 'BV' },
+            { name: 'Brazil', code: 'BR' },
+            { name: 'British Indian Ocean Territory', code: 'IO' },
+            { name: 'Brunei Darussalam', code: 'BN' },
+            { name: 'Bulgaria', code: 'BG' },
+            { name: 'Burkina Faso', code: 'BF' },
+            { name: 'Burundi', code: 'BI' },
+            { name: 'Cambodia', code: 'KH' },
+            { name: 'Cameroon', code: 'CM' },
+            { name: 'Canada', code: 'CA' },
+            { name: 'Cape Verde', code: 'CV' },
+            { name: 'Cayman Islands', code: 'KY' },
+            { name: 'Central African Republic', code: 'CF' },
+            { name: 'Chad', code: 'TD' },
+            { name: 'Chile', code: 'CL' },
+            { name: 'China', code: 'CN' },
+            { name: 'Christmas Island', code: 'CX' },
+            { name: 'Cocos (Keeling) Islands', code: 'CC' },
+            { name: 'Colombia', code: 'CO' },
+            { name: 'Comoros', code: 'KM' },
+            { name: 'Congo', code: 'CG' },
+            { name: 'Congo, The Democratic Republic of the', code: 'CD' },
+            { name: 'Cook Islands', code: 'CK' },
+            { name: 'Costa Rica', code: 'CR' },
+            { name: 'Cote D"Ivoire', code: 'CI' },
+            { name: 'Croatia', code: 'HR' },
+            { name: 'Cuba', code: 'CU' },
+            { name: 'Cyprus', code: 'CY' },
+            { name: 'Czech Republic', code: 'CZ' },
+            { name: 'Denmark', code: 'DK' },
+            { name: 'Djibouti', code: 'DJ' },
+            { name: 'Dominica', code: 'DM' },
+            { name: 'Dominican Republic', code: 'DO' },
+            { name: 'Ecuador', code: 'EC' },
+            { name: 'Egypt', code: 'EG' },
+            { name: 'El Salvador', code: 'SV' },
+            { name: 'Equatorial Guinea', code: 'GQ' },
+            { name: 'Eritrea', code: 'ER' },
+            { name: 'Estonia', code: 'EE' },
+            { name: 'Ethiopia', code: 'ET' },
+            { name: 'Falkland Islands (Malvinas)', code: 'FK' },
+            { name: 'Faroe Islands', code: 'FO' },
+            { name: 'Fiji', code: 'FJ' },
+            { name: 'Finland', code: 'FI' },
+            { name: 'France', code: 'FR' },
+            { name: 'French Guiana', code: 'GF' },
+            { name: 'French Polynesia', code: 'PF' },
+            { name: 'French Southern Territories', code: 'TF' },
+            { name: 'Gabon', code: 'GA' },
+            { name: 'Gambia', code: 'GM' },
+            { name: 'Georgia', code: 'GE' },
+            { name: 'Germany', code: 'DE' },
+            { name: 'Ghana', code: 'GH' },
+            { name: 'Gibraltar', code: 'GI' },
+            { name: 'Greece', code: 'GR' },
+            { name: 'Greenland', code: 'GL' },
+            { name: 'Grenada', code: 'GD' },
+            { name: 'Guadeloupe', code: 'GP' },
+            { name: 'Guam', code: 'GU' },
+            { name: 'Guatemala', code: 'GT' },
+            { name: 'Guernsey', code: 'GG' },
+            { name: 'Guinea', code: 'GN' },
+            { name: 'Guinea-Bissau', code: 'GW' },
+            { name: 'Guyana', code: 'GY' },
+            { name: 'Haiti', code: 'HT' },
+            { name: 'Heard Island and Mcdonald Islands', code: 'HM' },
+            { name: 'Holy See (Vatican City State)', code: 'VA' },
+            { name: 'Honduras', code: 'HN' },
+            { name: 'Hong Kong', code: 'HK' },
+            { name: 'Hungary', code: 'HU' },
+            { name: 'Iceland', code: 'IS' },
+            { name: 'India', code: 'IN' },
+            { name: 'Indonesia', code: 'ID' },
+            { name: 'Iran, Islamic Republic Of', code: 'IR' },
+            { name: 'Iraq', code: 'IQ' },
+            { name: 'Ireland', code: 'IE' },
+            { name: 'Isle of Man', code: 'IM' },
+            { name: 'Israel', code: 'IL' },
+            { name: 'Italy', code: 'IT' },
+            { name: 'Jamaica', code: 'JM' },
+            { name: 'Japan', code: 'JP' },
+            { name: 'Jersey', code: 'JE' },
+            { name: 'Jordan', code: 'JO' },
+            { name: 'Kazakhstan', code: 'KZ' },
+            { name: 'Kenya', code: 'KE' },
+            { name: 'Kiribati', code: 'KI' },
+            { name: 'Korea, Democratic People"S Republic of', code: 'KP' },
+            { name: 'Korea, Republic of', code: 'KR' },
+            { name: 'Kuwait', code: 'KW' },
+            { name: 'Kyrgyzstan', code: 'KG' },
+            { name: 'Lao People"S Democratic Republic', code: 'LA' },
+            { name: 'Latvia', code: 'LV' },
+            { name: 'Lebanon', code: 'LB' },
+            { name: 'Lesotho', code: 'LS' },
+            { name: 'Liberia', code: 'LR' },
+            { name: 'Libyan Arab Jamahiriya', code: 'LY' },
+            { name: 'Liechtenstein', code: 'LI' },
+            { name: 'Lithuania', code: 'LT' },
+            { name: 'Luxembourg', code: 'LU' },
+            { name: 'Macao', code: 'MO' },
+            { name: 'Macedonia, The Former Yugoslav Republic of', code: 'MK' },
+            { name: 'Madagascar', code: 'MG' },
+            { name: 'Malawi', code: 'MW' },
+            { name: 'Malaysia', code: 'MY' },
+            { name: 'Maldives', code: 'MV' },
+            { name: 'Mali', code: 'ML' },
+            { name: 'Malta', code: 'MT' },
+            { name: 'Marshall Islands', code: 'MH' },
+            { name: 'Martinique', code: 'MQ' },
+            { name: 'Mauritania', code: 'MR' },
+            { name: 'Mauritius', code: 'MU' },
+            { name: 'Mayotte', code: 'YT' },
+            { name: 'Mexico', code: 'MX' },
+            { name: 'Micronesia, Federated States of', code: 'FM' },
+            { name: 'Moldova, Republic of', code: 'MD' },
+            { name: 'Monaco', code: 'MC' },
+            { name: 'Mongolia', code: 'MN' },
+            { name: 'Montserrat', code: 'MS' },
+            { name: 'Morocco', code: 'MA' },
+            { name: 'Mozambique', code: 'MZ' },
+            { name: 'Myanmar', code: 'MM' },
+            { name: 'Namibia', code: 'NA' },
+            { name: 'Nauru', code: 'NR' },
+            { name: 'Nepal', code: 'NP' },
+            { name: 'Netherlands', code: 'NL' },
+            { name: 'Netherlands Antilles', code: 'AN' },
+            { name: 'New Caledonia', code: 'NC' },
+            { name: 'New Zealand', code: 'NZ' },
+            { name: 'Nicaragua', code: 'NI' },
+            { name: 'Niger', code: 'NE' },
+            { name: 'Nigeria', code: 'NG' },
+            { name: 'Niue', code: 'NU' },
+            { name: 'Norfolk Island', code: 'NF' },
+            { name: 'Northern Mariana Islands', code: 'MP' },
+            { name: 'Norway', code: 'NO' },
+            { name: 'Oman', code: 'OM' },
+            { name: 'Pakistan', code: 'PK' },
+            { name: 'Palau', code: 'PW' },
+            { name: 'Palestinian Territory, Occupied', code: 'PS' },
+            { name: 'Panama', code: 'PA' },
+            { name: 'Papua New Guinea', code: 'PG' },
+            { name: 'Paraguay', code: 'PY' },
+            { name: 'Peru', code: 'PE' },
+            { name: 'Philippines', code: 'PH' },
+            { name: 'Pitcairn', code: 'PN' },
+            { name: 'Poland', code: 'PL' },
+            { name: 'Portugal', code: 'PT' },
+            { name: 'Puerto Rico', code: 'PR' },
+            { name: 'Qatar', code: 'QA' },
+            { name: 'Reunion', code: 'RE' },
+            { name: 'Romania', code: 'RO' },
+            { name: 'Russian Federation', code: 'RU' },
+            { name: 'RWANDA', code: 'RW' },
+            { name: 'Saint Helena', code: 'SH' },
+            { name: 'Saint Kitts and Nevis', code: 'KN' },
+            { name: 'Saint Lucia', code: 'LC' },
+            { name: 'Saint Pierre and Miquelon', code: 'PM' },
+            { name: 'Saint Vincent and the Grenadines', code: 'VC' },
+            { name: 'Samoa', code: 'WS' },
+            { name: 'San Marino', code: 'SM' },
+            { name: 'Sao Tome and Principe', code: 'ST' },
+            { name: 'Saudi Arabia', code: 'SA' },
+            { name: 'Senegal', code: 'SN' },
+            { name: 'Serbia and Montenegro', code: 'CS' },
+            { name: 'Seychelles', code: 'SC' },
+            { name: 'Sierra Leone', code: 'SL' },
+            { name: 'Singapore', code: 'SG' },
+            { name: 'Slovakia', code: 'SK' },
+            { name: 'Slovenia', code: 'SI' },
+            { name: 'Solomon Islands', code: 'SB' },
+            { name: 'Somalia', code: 'SO' },
+            { name: 'South Africa', code: 'ZA' },
+            { name: 'South Georgia and the South Sandwich Islands', code: 'GS' },
+            { name: 'Spain', code: 'ES' },
+            { name: 'Sri Lanka', code: 'LK' },
+            { name: 'Sudan', code: 'SD' },
+            { name: 'Suriname', code: 'SR' },
+            { name: 'Svalbard and Jan Mayen', code: 'SJ' },
+            { name: 'Swaziland', code: 'SZ' },
+            { name: 'Sweden', code: 'SE' },
+            { name: 'Switzerland', code: 'CH' },
+            { name: 'Syrian Arab Republic', code: 'SY' },
+            { name: 'Taiwan, Province of China', code: 'TW' },
+            { name: 'Tajikistan', code: 'TJ' },
+            { name: 'Tanzania, United Republic of', code: 'TZ' },
+            { name: 'Thailand', code: 'TH' },
+            { name: 'Timor-Leste', code: 'TL' },
+            { name: 'Togo', code: 'TG' },
+            { name: 'Tokelau', code: 'TK' },
+            { name: 'Tonga', code: 'TO' },
+            { name: 'Trinidad and Tobago', code: 'TT' },
+            { name: 'Tunisia', code: 'TN' },
+            { name: 'Turkey', code: 'TR' },
+            { name: 'Turkmenistan', code: 'TM' },
+            { name: 'Turks and Caicos Islands', code: 'TC' },
+            { name: 'Tuvalu', code: 'TV' },
+            { name: 'Uganda', code: 'UG' },
+            { name: 'Ukraine', code: 'UA' },
+            { name: 'United Arab Emirates', code: 'AE' },
+            { name: 'United Kingdom', code: 'GB' },
+            { name: 'United States', code: 'US' },
+            { name: 'United States Minor Outlying Islands', code: 'UM' },
+            { name: 'Uruguay', code: 'UY' },
+            { name: 'Uzbekistan', code: 'UZ' },
+            { name: 'Vanuatu', code: 'VU' },
+            { name: 'Venezuela', code: 'VE' },
+            { name: 'Viet Nam', code: 'VN' },
+            { name: 'Virgin Islands, British', code: 'VG' },
+            { name: 'Virgin Islands, U.S.', code: 'VI' },
+            { name: 'Wallis and Futuna', code: 'WF' },
+            { name: 'Western Sahara', code: 'EH' },
+            { name: 'Yemen', code: 'YE' },
+            { name: 'Zambia', code: 'ZM' },
+            { name: 'Zimbabwe', code: 'ZW' }
+        ];
+    }
+
+    getCountries() {
+        return Promise.resolve(this.getData());
+    }
+}