-
-
-
-
- SAKAI
-
+ selector: 'app-topbar',
+ standalone: true,
+ imports: [RouterModule, CommonModule, StyleClassModule, AppConfigurator],
+ template: ` `,
})
export class AppTopbar {
- items!: MenuItem[];
+ items!: MenuItem[];
- constructor(public layoutService: LayoutService) {}
+ constructor(public layoutService: LayoutService) {}
- toggleDarkMode() {
- this.layoutService.layoutConfig.update((state) => ({ ...state, darkTheme: !state.darkTheme }));
- }
+ toggleDarkMode() {
+ this.layoutService.layoutConfig.update((state) => ({ ...state, darkTheme: !state.darkTheme }));
+ }
}
diff --git a/src/app/layout/service/layout.service.ts b/src/app/layout/service/layout.service.ts
index 923d052..dc78b22 100644
--- a/src/app/layout/service/layout.service.ts
+++ b/src/app/layout/service/layout.service.ts
@@ -1,178 +1,189 @@
-import { Injectable, effect, signal, computed } from '@angular/core';
+import { Injectable, computed, effect, signal } from '@angular/core';
import { Subject } from 'rxjs';
export interface layoutConfig {
- preset?: string;
- primary?: string;
- surface?: string | undefined | null;
- darkTheme?: boolean;
- menuMode?: string;
+ preset?: string;
+ primary?: string;
+ surface?: string | undefined | null;
+ darkTheme?: boolean;
+ menuMode?: string;
}
interface LayoutState {
- staticMenuDesktopInactive?: boolean;
- overlayMenuActive?: boolean;
- configSidebarVisible?: boolean;
- staticMenuMobileActive?: boolean;
- menuHoverActive?: boolean;
+ staticMenuDesktopInactive?: boolean;
+ overlayMenuActive?: boolean;
+ configSidebarVisible?: boolean;
+ staticMenuMobileActive?: boolean;
+ menuHoverActive?: boolean;
}
interface MenuChangeEvent {
- key: string;
- routeEvent?: boolean;
+ key: string;
+ routeEvent?: boolean;
}
@Injectable({
- providedIn: 'root'
+ providedIn: 'root',
})
export class LayoutService {
- _config: layoutConfig = {
- preset: 'Aura',
- primary: 'emerald',
- surface: null,
- darkTheme: false,
- menuMode: 'static'
- };
+ _config: layoutConfig = {
+ preset: 'Aura',
+ primary: 'violet',
+ surface: null,
+ darkTheme: localStorage.getItem('isDarkTheme') === 'true',
+ menuMode: 'static',
+ };
- _state: LayoutState = {
- staticMenuDesktopInactive: false,
- overlayMenuActive: false,
- configSidebarVisible: false,
- staticMenuMobileActive: false,
- menuHoverActive: false
- };
+ _state: LayoutState = {
+ staticMenuDesktopInactive: false,
+ overlayMenuActive: false,
+ configSidebarVisible: false,
+ staticMenuMobileActive: false,
+ menuHoverActive: false,
+ };
- layoutConfig = signal(this._config);
+ layoutConfig = signal(this._config);
- layoutState = signal(this._state);
+ layoutState = signal(this._state);
- private configUpdate = new Subject();
+ private configUpdate = new Subject();
- private overlayOpen = new Subject();
+ private overlayOpen = new Subject();
- private menuSource = new Subject();
+ private menuSource = new Subject();
- private resetSource = new Subject();
+ private resetSource = new Subject();
- menuSource$ = this.menuSource.asObservable();
+ menuSource$ = this.menuSource.asObservable();
- resetSource$ = this.resetSource.asObservable();
+ resetSource$ = this.resetSource.asObservable();
- configUpdate$ = this.configUpdate.asObservable();
+ configUpdate$ = this.configUpdate.asObservable();
- overlayOpen$ = this.overlayOpen.asObservable();
+ overlayOpen$ = this.overlayOpen.asObservable();
- theme = computed(() => (this.layoutConfig()?.darkTheme ? 'light' : 'dark'));
+ theme = computed(() => (this.layoutConfig()?.darkTheme ? 'light' : 'dark'));
- isSidebarActive = computed(() => this.layoutState().overlayMenuActive || this.layoutState().staticMenuMobileActive);
+ isSidebarActive = computed(
+ () => this.layoutState().overlayMenuActive || this.layoutState().staticMenuMobileActive,
+ );
- isDarkTheme = computed(() => this.layoutConfig().darkTheme);
+ isDarkTheme = computed(() => this.layoutConfig().darkTheme);
- getPrimary = computed(() => this.layoutConfig().primary);
+ getPrimary = computed(() => this.layoutConfig().primary);
- getSurface = computed(() => this.layoutConfig().surface);
+ getSurface = computed(() => this.layoutConfig().surface);
- isOverlay = computed(() => this.layoutConfig().menuMode === 'overlay');
+ isOverlay = computed(() => this.layoutConfig().menuMode === 'overlay');
- transitionComplete = signal(false);
+ transitionComplete = signal(false);
- private initialized = false;
+ private initialized = false;
- constructor() {
- effect(() => {
- const config = this.layoutConfig();
- if (config) {
- this.onConfigUpdate();
- }
- });
+ constructor() {
+ effect(() => {
+ const config = this.layoutConfig();
+ if (config) {
+ this.onConfigUpdate();
+ }
+ });
- effect(() => {
- const config = this.layoutConfig();
+ effect(() => {
+ const config = this.layoutConfig();
- if (!this.initialized || !config) {
- this.initialized = true;
- return;
- }
+ if (!this.initialized || !config) {
+ this.initialized = true;
+ return;
+ }
- this.handleDarkModeTransition(config);
- });
+ this.handleDarkModeTransition(config);
+ });
+ }
+
+ private handleDarkModeTransition(config: layoutConfig): void {
+ if ((document as any).startViewTransition) {
+ this.startViewTransition(config);
+ } else {
+ this.toggleDarkMode(config);
+ this.onTransitionEnd();
+ }
+ }
+
+ private startViewTransition(config: layoutConfig): void {
+ const transition = (document as any).startViewTransition(() => {
+ this.toggleDarkMode(config);
+ });
+
+ transition.ready
+ .then(() => {
+ this.onTransitionEnd();
+ })
+ .catch(() => {});
+ }
+
+ toggleDarkMode(config?: layoutConfig): void {
+ const _config = config || this.layoutConfig();
+ if (_config.darkTheme) {
+ document.documentElement.classList.add('app-dark');
+ } else {
+ document.documentElement.classList.remove('app-dark');
+ }
+ }
+
+ private onTransitionEnd() {
+ this.transitionComplete.set(true);
+ setTimeout(() => {
+ this.transitionComplete.set(false);
+ });
+ }
+
+ onMenuToggle() {
+ if (this.isOverlay()) {
+ this.layoutState.update((prev) => ({
+ ...prev,
+ overlayMenuActive: !this.layoutState().overlayMenuActive,
+ }));
+
+ if (this.layoutState().overlayMenuActive) {
+ this.overlayOpen.next(null);
+ }
}
- private handleDarkModeTransition(config: layoutConfig): void {
- if ((document as any).startViewTransition) {
- this.startViewTransition(config);
- } else {
- this.toggleDarkMode(config);
- this.onTransitionEnd();
- }
+ if (this.isDesktop()) {
+ this.layoutState.update((prev) => ({
+ ...prev,
+ staticMenuDesktopInactive: !this.layoutState().staticMenuDesktopInactive,
+ }));
+ } else {
+ this.layoutState.update((prev) => ({
+ ...prev,
+ staticMenuMobileActive: !this.layoutState().staticMenuMobileActive,
+ }));
+
+ if (this.layoutState().staticMenuMobileActive) {
+ this.overlayOpen.next(null);
+ }
}
+ }
- private startViewTransition(config: layoutConfig): void {
- const transition = (document as any).startViewTransition(() => {
- this.toggleDarkMode(config);
- });
+ isDesktop() {
+ return window.innerWidth > 991;
+ }
- transition.ready
- .then(() => {
- this.onTransitionEnd();
- })
- .catch(() => {});
- }
+ isMobile() {
+ return !this.isDesktop();
+ }
- toggleDarkMode(config?: layoutConfig): void {
- const _config = config || this.layoutConfig();
- if (_config.darkTheme) {
- document.documentElement.classList.add('app-dark');
- } else {
- document.documentElement.classList.remove('app-dark');
- }
- }
+ onConfigUpdate() {
+ this._config = { ...this.layoutConfig() };
+ this.configUpdate.next(this.layoutConfig());
+ }
- private onTransitionEnd() {
- this.transitionComplete.set(true);
- setTimeout(() => {
- this.transitionComplete.set(false);
- });
- }
+ onMenuStateChange(event: MenuChangeEvent) {
+ this.menuSource.next(event);
+ }
- onMenuToggle() {
- if (this.isOverlay()) {
- this.layoutState.update((prev) => ({ ...prev, overlayMenuActive: !this.layoutState().overlayMenuActive }));
-
- if (this.layoutState().overlayMenuActive) {
- this.overlayOpen.next(null);
- }
- }
-
- if (this.isDesktop()) {
- this.layoutState.update((prev) => ({ ...prev, staticMenuDesktopInactive: !this.layoutState().staticMenuDesktopInactive }));
- } else {
- this.layoutState.update((prev) => ({ ...prev, staticMenuMobileActive: !this.layoutState().staticMenuMobileActive }));
-
- if (this.layoutState().staticMenuMobileActive) {
- this.overlayOpen.next(null);
- }
- }
- }
-
- isDesktop() {
- return window.innerWidth > 991;
- }
-
- isMobile() {
- return !this.isDesktop();
- }
-
- onConfigUpdate() {
- this._config = { ...this.layoutConfig() };
- this.configUpdate.next(this.layoutConfig());
- }
-
- onMenuStateChange(event: MenuChangeEvent) {
- this.menuSource.next(event);
- }
-
- reset() {
- this.resetSource.next(true);
- }
+ reset() {
+ this.resetSource.next(true);
+ }
}
diff --git a/src/app/modules/auth/auth.routes.ts b/src/app/modules/auth/auth.routes.ts
new file mode 100644
index 0000000..0708d56
--- /dev/null
+++ b/src/app/modules/auth/auth.routes.ts
@@ -0,0 +1,19 @@
+import { NamedRoutes } from '@/core';
+import { Routes } from '@angular/router';
+
+export type AuthRouteNames = 'auth';
+
+export const authNamedRoutes: NamedRoutes = {
+ auth: {
+ path: '',
+ loadComponent: () => import('./pages/auth.component').then((m) => m.AuthComponent),
+ meta: { title: 'احراز هویت' },
+ },
+};
+
+export const AUTH_ROUTES: Routes = [
+ {
+ ...authNamedRoutes.auth,
+ // children: [authNamedRoutes.login],
+ },
+];
diff --git a/src/app/modules/auth/constants/central-auth-roles.const.ts b/src/app/modules/auth/constants/central-auth-roles.const.ts
new file mode 100644
index 0000000..ffe3be6
--- /dev/null
+++ b/src/app/modules/auth/constants/central-auth-roles.const.ts
@@ -0,0 +1,5 @@
+import rolesConst from '@/core/constants/roles.const';
+
+export const CENTRAL_AUTH_ROLES = [
+ ...Object.values(rolesConst).filter((role) => role.key !== 'ADMIN'),
+];
diff --git a/src/app/modules/auth/pages/auth.component.html b/src/app/modules/auth/pages/auth.component.html
new file mode 100644
index 0000000..0a20d2d
--- /dev/null
+++ b/src/app/modules/auth/pages/auth.component.html
@@ -0,0 +1,37 @@
+>();
+
+ private readonly toastService = inject(ToastService);
+ private readonly router = inject(Router);
+
+ readonly logo = images.logo;
+ readonly authVector = images.login;
+
+ activeStep = signal(this.defaultStep);
+
+ selectedRole = signal(this.role);
+
+ toSignUp = () => {
+ this.activeStep.set('signup');
+ };
+
+ onLoggedIn = (data: IAuthResponse) => {
+ this.toastService.success({ text: 'شما با موفقیت وارد شدید.' });
+ this.selectedRole.set(data.role.toUpperCase() as TRoles);
+ if (data.mustChangePassword) {
+ this.activeStep.set('modifyLoginInfo');
+ return;
+ }
+
+ if (this.submit.observed) {
+ return this.submit.emit(Promise.resolve(true));
+ }
+ this.redirectToDashboard();
+ };
+
+ onModifyLoginInfo = () => {
+ if (this.submit.observed) {
+ return this.submit.emit(Promise.resolve(true));
+ }
+ this.redirectToDashboard();
+ };
+
+ private redirectToDashboard() {
+ let redirectUrl = this.redirectUrl;
+
+ if (!redirectUrl) {
+ switch (this.selectedRole()) {
+ case 'SCHOOL':
+ redirectUrl = '/schools';
+ break;
+ case 'ADMIN':
+ redirectUrl = '/admin';
+ break;
+ case 'TEACHER':
+ redirectUrl = '/teachers';
+ break;
+ case 'STUDENTS':
+ redirectUrl = '/students';
+ break;
+ }
+ }
+ this.router.navigateByUrl(redirectUrl);
+ }
+}
diff --git a/src/app/modules/auth/pages/login/login.component.html b/src/app/modules/auth/pages/login/login.component.html
new file mode 100644
index 0000000..499a1dd
--- /dev/null
+++ b/src/app/modules/auth/pages/login/login.component.html
@@ -0,0 +1,105 @@
+
diff --git a/src/app/modules/auth/pages/login/login.component.ts b/src/app/modules/auth/pages/login/login.component.ts
new file mode 100644
index 0000000..7660ac6
--- /dev/null
+++ b/src/app/modules/auth/pages/login/login.component.ts
@@ -0,0 +1,123 @@
+import { AuthService } from '@/core';
+import { IAuthResponse, LoginCredentials, TRoles } from '@/core/models';
+import { ToastService } from '@/core/services/toast.service';
+import { UikitLabelComponent } from '@/uikit';
+import { UikitFieldComponent } from '@/uikit/uikit-field.component';
+import { CommonModule } from '@angular/common';
+import { Component, computed, EventEmitter, inject, Input, Output, signal } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { Button } from 'primeng/button';
+import { ImageModule } from 'primeng/image';
+import { InputGroupModule } from 'primeng/inputgroup';
+import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
+import { InputText } from 'primeng/inputtext';
+import { Password } from 'primeng/password';
+import { ProgressSpinnerModule } from 'primeng/progressspinner';
+import { RadioButtonModule } from 'primeng/radiobutton';
+import { CaptchaService } from 'src/app/core/services/captcha.service';
+import { CENTRAL_AUTH_ROLES } from '../../constants/central-auth-roles.const';
+
+@Component({
+ selector: 'app-login',
+ templateUrl: './login.component.html',
+ imports: [
+ CommonModule,
+ ReactiveFormsModule,
+ Button,
+ Password,
+ InputText,
+ ImageModule,
+ ProgressSpinnerModule,
+ UikitLabelComponent,
+ RadioButtonModule,
+ InputGroupModule,
+ InputGroupAddonModule,
+ UikitFieldComponent,
+ ],
+})
+export class LoginComponent {
+ @Input() redirectUrl!: string;
+ @Input() loginApiUrl!: string;
+ @Input() defaultRole?: TRoles;
+
+ @Output() onSuccessfullySubmit = new EventEmitter();
+ @Output() onToSignup = new EventEmitter();
+
+ private readonly authService = inject(AuthService);
+ private readonly router = inject(Router);
+ private readonly fb = inject(FormBuilder);
+ private readonly captchaService = inject(CaptchaService);
+ private readonly toastService = inject(ToastService);
+
+ readonly isLoading = computed(() => this.authService.isLoading());
+ readonly errorMessage = signal('');
+ readonly hidePassword = signal(true);
+ readonly isCaptchaExpired = this.captchaService.captchaIsExpired;
+ readonly isCaptchaLoading = this.captchaService.loading;
+ readonly captchaImageSrc = this.captchaService.captchaImageSrc;
+ readonly centralAuthRoles = CENTRAL_AUTH_ROLES;
+
+ readonly loginForm = this.fb.group({
+ username: ['', [Validators.required]],
+ password: ['', [Validators.required]],
+ rememberMe: [false],
+ captcha: ['', [Validators.required]],
+ role: [this.defaultRole || this.centralAuthRoles[0].key, [Validators.required]],
+ });
+
+ selectedRole = signal('SCHOOL');
+ ngOnInit() {
+ this.captchaService.requestNewCaptcha();
+ }
+
+ togglePasswordVisibility(): void {
+ this.hidePassword.set(!this.hidePassword());
+ }
+
+ resetCaptcha(): void {
+ this.fb.control('captcha').setValue('');
+ this.captchaService.renewCaptcha();
+ }
+
+ onRefreshCaptcha(): void {
+ this.resetCaptcha();
+ }
+ onRefreshCaptchaImage(): void {
+ this.resetCaptcha();
+ // document
+ // .getElementById('captchaImage')
+ // ?.setAttribute('src', this.captchaService.captchaImageSrc()! + `&${new Date().getTime()}`);
+ }
+
+ toSignup() {
+ this.onToSignup.emit();
+ }
+
+ submit(): void {
+ this.loginForm.markAllAsTouched();
+ if (this.loginForm.invalid) return;
+ if (!this.captchaService.captchaId()) {
+ this.toastService.error({ text: 'مقدار کپچا را وارد کنید' });
+ }
+ const credentials: LoginCredentials = this.loginForm.value as LoginCredentials;
+
+ this.authService
+ .login(credentials, (this.defaultRole || this.loginForm.value.role)!)
+ .subscribe({
+ next: (data) => {
+ this.errorMessage.set('');
+ if (this.redirectUrl) {
+ this.router.navigateByUrl(this.redirectUrl.replace(/\/[^/]*$/, ''));
+ } else {
+ this.onSuccessfullySubmit.emit(data);
+ }
+ },
+ error: (error) => {
+ this.resetCaptcha();
+ this.errorMessage.set('نام کاربری یا رمز عبور اشتباه است');
+ console.error('Login failed:', error);
+ },
+ });
+ }
+}
diff --git a/src/app/modules/auth/pages/modifyLoginInfo/modify-login-info.component.html b/src/app/modules/auth/pages/modifyLoginInfo/modify-login-info.component.html
new file mode 100644
index 0000000..c5e79a0
--- /dev/null
+++ b/src/app/modules/auth/pages/modifyLoginInfo/modify-login-info.component.html
@@ -0,0 +1,65 @@
+
diff --git a/src/app/modules/auth/pages/modifyLoginInfo/modify-login-info.component.ts b/src/app/modules/auth/pages/modifyLoginInfo/modify-login-info.component.ts
new file mode 100644
index 0000000..0cd1624
--- /dev/null
+++ b/src/app/modules/auth/pages/modifyLoginInfo/modify-login-info.component.ts
@@ -0,0 +1,100 @@
+import { AuthService } from '@/core';
+import { IUserLoginInfo, TRoles } from '@/core/models';
+import { ToastService } from '@/core/services/toast.service';
+import { MustMatch } from '@/core/validators';
+import { password } from '@/core/validators/password.validator';
+import { UikitFieldComponent } from '@/uikit/uikit-field.component';
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, inject, Input, Output, signal } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { Button } from 'primeng/button';
+import { ImageModule } from 'primeng/image';
+import { InputGroupModule } from 'primeng/inputgroup';
+import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
+import { InputText } from 'primeng/inputtext';
+import { Message } from 'primeng/message';
+import { Password } from 'primeng/password';
+import { ProgressSpinnerModule } from 'primeng/progressspinner';
+import { RadioButtonModule } from 'primeng/radiobutton';
+
+@Component({
+ selector: 'app-modify-login-info',
+ templateUrl: './modify-login-info.component.html',
+ imports: [
+ CommonModule,
+ ReactiveFormsModule,
+ Button,
+ Password,
+ InputText,
+ ImageModule,
+ ProgressSpinnerModule,
+ RadioButtonModule,
+ InputGroupModule,
+ InputGroupAddonModule,
+ UikitFieldComponent,
+ Message,
+ ],
+})
+export class ModifyLoginInfoComponent {
+ @Input() userLoginInfo!: Partial;
+ @Input() role!: TRoles;
+
+ @Output() onSubmit = new EventEmitter();
+ @Output() toLogin = new EventEmitter();
+
+ private readonly authService = inject(AuthService);
+ private readonly toastService = inject(ToastService);
+ private readonly router = inject(Router);
+ private readonly fb = inject(FormBuilder);
+
+ readonly isLoading = signal(false);
+ readonly errorMessage = signal('');
+ readonly hidePassword = signal(true);
+
+ readonly infoForm = this.fb.group(
+ {
+ username: [this.userLoginInfo?.username, [Validators.required]],
+ password: ['', [Validators.required, password()]],
+ confirmPassword: ['', [Validators.required]],
+ mobile: [this.userLoginInfo?.mobile, [Validators.required]],
+ email: [this.userLoginInfo?.email, [Validators.required, Validators.email]],
+ },
+ {
+ validators: [MustMatch('password', 'confirmPassword')],
+ },
+ );
+
+ ngOnInit() {
+ this.authService.getInfo(this.role).subscribe({
+ next: (info) => {
+ this.infoForm.patchValue(info);
+ },
+ error: () => {
+ this.toLogin.emit();
+ },
+ });
+ }
+
+ submit(): void {
+ this.infoForm.markAllAsTouched();
+ if (this.infoForm.invalid) return;
+ const credentials: IUserLoginInfo = this.infoForm.value as IUserLoginInfo;
+ this.isLoading.set(true);
+ this.authService.changeInfo(credentials, this.role).subscribe({
+ next: () => {
+ this.toastService.success({
+ text: 'اطلاعات با موفقیت بهروزرسانی شد',
+ });
+ this.errorMessage.set('');
+ this.onSubmit?.emit();
+ this.isLoading.set(false);
+ // this.router.navigateByUrl(this.redirectUrl.replace(/\/[^/]*$/, ''));
+ },
+ error: (error) => {
+ this.isLoading.set(false);
+ // this.errorMessage.set('نام کاربری یا رمز عبور اشتباه است');
+ },
+ });
+ }
+}
diff --git a/src/app/modules/auth/pages/otp/otp.component.html b/src/app/modules/auth/pages/otp/otp.component.html
new file mode 100644
index 0000000..cd62ca0
--- /dev/null
+++ b/src/app/modules/auth/pages/otp/otp.component.html
@@ -0,0 +1,5 @@
+
diff --git a/src/app/modules/auth/pages/otp/otp.component.ts b/src/app/modules/auth/pages/otp/otp.component.ts
new file mode 100644
index 0000000..125c8a2
--- /dev/null
+++ b/src/app/modules/auth/pages/otp/otp.component.ts
@@ -0,0 +1,18 @@
+import { CommonModule } from '@angular/common';
+import { Component, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ButtonDirective } from 'primeng/button';
+import { InputOtpModule } from 'primeng/inputotp';
+
+@Component({
+ selector: 'app-otp',
+ standalone: true,
+ imports: [CommonModule, InputOtpModule, FormsModule, ButtonDirective],
+ templateUrl: './otp.component.html',
+})
+export class OTPComponent {
+ otpCode = signal('');
+ submitLoading = signal(false);
+
+ submit = () => {};
+}
diff --git a/src/app/modules/auth/pages/signup/signup.component.html b/src/app/modules/auth/pages/signup/signup.component.html
new file mode 100644
index 0000000..6b68eaa
--- /dev/null
+++ b/src/app/modules/auth/pages/signup/signup.component.html
@@ -0,0 +1,60 @@
+
diff --git a/src/app/modules/auth/pages/signup/signup.component.ts b/src/app/modules/auth/pages/signup/signup.component.ts
new file mode 100644
index 0000000..6a43f59
--- /dev/null
+++ b/src/app/modules/auth/pages/signup/signup.component.ts
@@ -0,0 +1,94 @@
+import { AuthService } from '@/core';
+import { ISignupRequestPayload, IUserLoginInfo, Maybe, TRoles } from '@/core/models';
+import { ToastService } from '@/core/services/toast.service';
+import { mobileValidator, MustMatch } from '@/core/validators';
+import { password } from '@/core/validators/password.validator';
+import { GenderSelectComponent } from '@/shared/catalog';
+import { InputComponent } from '@/shared/components';
+import { UikitFieldComponent } from '@/uikit/uikit-field.component';
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, inject, Input, Output, signal } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { Button } from 'primeng/button';
+import { ImageModule } from 'primeng/image';
+import { InputGroupModule } from 'primeng/inputgroup';
+import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
+import { Password } from 'primeng/password';
+import { ProgressSpinnerModule } from 'primeng/progressspinner';
+import { RadioButtonModule } from 'primeng/radiobutton';
+
+@Component({
+ selector: 'auth-signup',
+ templateUrl: './signup.component.html',
+ imports: [
+ CommonModule,
+ ReactiveFormsModule,
+ Button,
+ Password,
+ ImageModule,
+ ProgressSpinnerModule,
+ RadioButtonModule,
+ InputGroupModule,
+ InputGroupAddonModule,
+ UikitFieldComponent,
+ InputComponent,
+ GenderSelectComponent,
+ ],
+})
+export class SignupComponent {
+ @Input() userLoginInfo!: Partial;
+ @Input() role!: TRoles;
+
+ @Output() onSubmit = new EventEmitter();
+ @Output() toLogin = new EventEmitter();
+
+ constructor(
+ private readonly authService: AuthService,
+ private readonly toastService: ToastService,
+ private readonly router: Router,
+ ) {}
+
+ private readonly fb = inject(FormBuilder);
+
+ readonly isLoading = signal(false);
+ readonly errorMessage = signal('');
+ readonly hidePassword = signal(true);
+
+ readonly form = this.fb.group(
+ {
+ firstName: ['', [Validators.required]],
+ lastName: ['', [Validators.required]],
+ gender: [null as Maybe, [Validators.required]],
+ mobile: ['', [Validators.required, mobileValidator()]],
+ email: ['', [Validators.required, Validators.email]],
+ username: ['', [Validators.required]],
+ password: ['', [Validators.required, password()]],
+ confirmPassword: ['', [Validators.required]],
+ },
+ {
+ validators: [MustMatch('password', 'confirmPassword')],
+ },
+ );
+
+ submit(): void {
+ this.form.markAllAsTouched();
+
+ if (this.form.invalid) return;
+ const credentials = this.form.value as ISignupRequestPayload;
+ this.isLoading.set(true);
+ this.authService.signup(credentials, this.role).subscribe({
+ next: () => {
+ this.toastService.success({
+ text: 'ثبت نام با موفقیت انجام شد. لطفا وارد شوید.',
+ });
+ this.errorMessage.set('');
+ this.onSubmit?.emit();
+ this.isLoading.set(false);
+ },
+ error: (error) => {
+ this.isLoading.set(false);
+ },
+ });
+ }
+}
diff --git a/src/app/modules/auth/state/auth.store.ts b/src/app/modules/auth/state/auth.store.ts
new file mode 100644
index 0000000..45c2183
--- /dev/null
+++ b/src/app/modules/auth/state/auth.store.ts
@@ -0,0 +1,404 @@
+import { HttpClient } from '@angular/common/http';
+import { computed, inject, Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { catchError, of, tap } from 'rxjs';
+import { LOCAL_STORAGE_KEYS, ROLES } from 'src/assets/constants';
+import { IAuthResponse, LoginCredentials, Maybe, TRoles, User } from '../../../core/models';
+import { BaseState, BaseStore } from '../../../core/state/base-store';
+
+/**
+ * Authentication state
+ */
+export interface AuthState extends BaseState {
+ user: Maybe;
+ token: Maybe;
+ refreshToken: Maybe;
+ isAuthenticated: boolean;
+ permissions: string[];
+ loginAttempts: number;
+ lastLoginTime: Maybe;
+ sessionExpiry: Maybe;
+}
+
+/**
+ * Login state for UI feedback
+ */
+export interface LoginState {
+ isLoggingIn: boolean;
+ isRefreshing: boolean;
+ loginError: Maybe;
+}
+
+/**
+ * Authentication state store
+ */
+@Injectable({
+ providedIn: 'root',
+})
+export class AuthStore extends BaseStore {
+ private readonly http = inject(HttpClient);
+ private readonly router = inject(Router);
+
+ // Login-specific state
+ private readonly _loginState = {
+ isLoggingIn: false,
+ isRefreshing: false,
+ loginError: null as Maybe,
+ };
+
+ constructor() {
+ super({
+ loading: false,
+ error: null,
+ user: null,
+ token: null,
+ refreshToken: null,
+ isAuthenticated: false,
+ permissions: [],
+ loginAttempts: 0,
+ lastLoginTime: null,
+ sessionExpiry: null,
+ });
+
+ this.initializeAuth();
+ }
+
+ // Computed selectors
+ readonly user = computed(() => this._state().user);
+ readonly token = computed(() => this._state().token);
+ readonly refreshToken = computed(() => this._state().refreshToken);
+ readonly isAuthenticated = computed(() => this._state().isAuthenticated);
+ readonly userRole = computed(() => this._state().user?.role);
+ readonly permissions = computed(() => this._state().permissions);
+ readonly loginAttempts = computed(() => this._state().loginAttempts);
+ readonly lastLoginTime = computed(() => this._state().lastLoginTime);
+ readonly sessionExpiry = computed(() => this._state().sessionExpiry);
+
+ // Login state selectors
+ readonly isLoggingIn = computed(() => this._loginState.isLoggingIn);
+ readonly isRefreshing = computed(() => this._loginState.isRefreshing);
+ readonly loginError = computed(() => this._loginState.loginError);
+
+ /**
+ * Initialize authentication from stored data
+ */
+ private initializeAuth(): void {
+ const token = localStorage.getItem(LOCAL_STORAGE_KEYS.AUTH_TOKEN);
+ const refreshToken = localStorage.getItem(LOCAL_STORAGE_KEYS.REFRESH_TOKEN);
+ const userData = localStorage.getItem(LOCAL_STORAGE_KEYS.USER_DATA);
+ const loginAttempts = parseInt(localStorage.getItem(LOCAL_STORAGE_KEYS.LOGIN_ATTEMPTS) || '0');
+ const lastLoginTime = parseInt(localStorage.getItem(LOCAL_STORAGE_KEYS.LAST_LOGIN_TIME) || '0');
+
+ if (token && refreshToken && userData) {
+ try {
+ const user = JSON.parse(userData) as User;
+ const sessionExpiry = this.getTokenExpiry(token);
+
+ this.patchState({
+ user,
+ token,
+ refreshToken,
+ isAuthenticated: true,
+ permissions: [],
+ // permissions: user.permissions?.map((p) => `${p.resource}:${p.action}`) || [],
+ loginAttempts,
+ lastLoginTime: lastLoginTime || null,
+ sessionExpiry,
+ });
+
+ // Check if token is expired
+ if (this.isTokenExpired()) {
+ this.refreshAuthToken().subscribe();
+ }
+ } catch (error) {
+ console.error('Error parsing stored user data:', error);
+ this.logout();
+ }
+ }
+ }
+
+ /**
+ * Login with credentials
+ */
+ login(credentials: LoginCredentials) {
+ this._loginState.isLoggingIn = true;
+ this._loginState.loginError = null;
+ this.setLoading(true);
+
+ return this.http.post('/api/auth/login', credentials).pipe(
+ tap((response) => {
+ this.handleAuthSuccess(response);
+ this._loginState.isLoggingIn = false;
+ }),
+ catchError((error) => {
+ this.handleAuthError(error);
+ return of(null);
+ }),
+ );
+ }
+
+ /**
+ * Logout user
+ */
+ logout(): void {
+ // Clear stored data
+ localStorage.removeItem(LOCAL_STORAGE_KEYS.AUTH_TOKEN);
+ localStorage.removeItem(LOCAL_STORAGE_KEYS.REFRESH_TOKEN);
+ localStorage.removeItem(LOCAL_STORAGE_KEYS.USER_DATA);
+ localStorage.removeItem(LOCAL_STORAGE_KEYS.LAST_LOGIN_TIME);
+
+ // Reset state
+ this.patchState({
+ user: null,
+ token: null,
+ refreshToken: null,
+ isAuthenticated: false,
+ permissions: [],
+ lastLoginTime: null,
+ sessionExpiry: null,
+ loading: false,
+ error: null,
+ });
+
+ // Reset login state
+ this._loginState.isLoggingIn = false;
+ this._loginState.isRefreshing = false;
+ this._loginState.loginError = null;
+
+ // Navigate to login
+ this.router.navigate(['/auth']);
+ }
+
+ /**
+ * Refresh authentication token
+ */
+ refreshAuthToken() {
+ const refreshToken = this._state().refreshToken;
+ if (!refreshToken) {
+ this.logout();
+ return of(null);
+ }
+
+ this._loginState.isRefreshing = true;
+ this.setLoading(true);
+
+ return this.http.post('/api/auth/refresh', { refreshToken }).pipe(
+ tap((response) => {
+ this.handleAuthSuccess(response);
+ this._loginState.isRefreshing = false;
+ }),
+ catchError((error) => {
+ console.error('Token refresh failed:', error);
+ this.logout();
+ return of(null);
+ }),
+ );
+ }
+
+ /**
+ * Check if user has specific role
+ */
+ hasRole(role: TRoles): boolean {
+ return this._state().user?.role === role;
+ }
+
+ /**
+ * Check if user has any of the specified roles
+ */
+ hasAnyRole(roles: TRoles[]): boolean {
+ const userRole = this._state().user?.role;
+ return userRole ? roles.includes(userRole) : false;
+ }
+
+ /**
+ * Check if user has specific permission
+ */
+ hasPermission(permission: string): boolean {
+ const permissions = this._state().permissions;
+ return permissions.includes(permission);
+ }
+
+ /**
+ * Check if user has all specified permissions
+ */
+ hasAllPermissions(permissions: string[]): boolean {
+ const userPermissions = this._state().permissions;
+ return permissions.every((permission) => userPermissions.includes(permission));
+ }
+
+ /**
+ * Check if user has any of the specified permissions
+ */
+ hasAnyPermission(permissions: string[]): boolean {
+ const userPermissions = this._state().permissions;
+ return permissions.some((permission) => userPermissions.includes(permission));
+ }
+
+ /**
+ * Check if user can access resource
+ */
+ canAccess(requiredRoles?: TRoles[], requiredPermissions?: string[]): boolean {
+ if (!this._state().isAuthenticated) return false;
+
+ if (requiredRoles && !this.hasAnyRole(requiredRoles)) {
+ return false;
+ }
+
+ if (requiredPermissions && !this.hasAllPermissions(requiredPermissions)) {
+ return false;
+ }
+
+ return true;
+ }
+
+ /**
+ * Get current access token
+ */
+ getToken(): string | null {
+ return this._state().token;
+ }
+
+ /**
+ * Get current refresh token
+ */
+ getRefreshToken(): string | null {
+ return this._state().refreshToken;
+ }
+
+ /**
+ * Check if token is expired
+ */
+ isTokenExpired(): boolean {
+ const sessionExpiry = this._state().sessionExpiry;
+ if (!sessionExpiry) return true;
+
+ return Date.now() > sessionExpiry;
+ }
+
+ /**
+ * Get time until token expires (in minutes)
+ */
+ getTimeUntilExpiry(): number {
+ const sessionExpiry = this._state().sessionExpiry;
+ if (!sessionExpiry) return 0;
+
+ return Math.max(0, Math.floor((sessionExpiry - Date.now()) / 60000));
+ }
+
+ /**
+ * Update user profile
+ */
+ updateUserProfile(updates: Partial): void {
+ const currentUser = this._state().user;
+ if (!currentUser) return;
+
+ const updatedUser = { ...currentUser, ...updates };
+
+ this.patchState({ user: updatedUser });
+ localStorage.setItem(LOCAL_STORAGE_KEYS.USER_DATA, JSON.stringify(updatedUser));
+ }
+
+ /**
+ * Handle successful authentication
+ */
+ private handleAuthSuccess(response: IAuthResponse): void {
+ const sessionExpiry = this.getTokenExpiry(response.token);
+ const currentTime = Date.now();
+
+ // Store in localStorage
+ localStorage.setItem(LOCAL_STORAGE_KEYS.AUTH_TOKEN, response.token);
+ localStorage.setItem(LOCAL_STORAGE_KEYS.REFRESH_TOKEN, response.refreshToken);
+ // localStorage.setItem(LOCAL_STORAGE_KEYS.USER_DATA, JSON.stringify(response.user));
+ localStorage.setItem(LOCAL_STORAGE_KEYS.LAST_LOGIN_TIME, currentTime.toString());
+
+ // Update state
+ this.patchState({
+ user: { fullName: response.fullName, role: response.role as TRoles },
+ token: response.token,
+ refreshToken: response.refreshToken,
+ isAuthenticated: true,
+ // permissions: response.user.permissions?.map((p) => `${p.resource}:${p.action}`) || [],
+ lastLoginTime: currentTime,
+ sessionExpiry,
+ loading: false,
+ error: null,
+ });
+
+ // Reset login attempts on successful login
+ localStorage.removeItem(LOCAL_STORAGE_KEYS.LOGIN_ATTEMPTS);
+
+ // Navigate based on user role
+ // this.navigateByRole(response.user.role);
+ }
+
+ /**
+ * Handle authentication error
+ */
+ private handleAuthError(error: any): void {
+ console.error('Authentication error:', error);
+
+ // Increment login attempts
+ const attempts = this._state().loginAttempts + 1;
+ this.patchState({ loginAttempts: attempts });
+ localStorage.setItem(LOCAL_STORAGE_KEYS.LOGIN_ATTEMPTS, attempts.toString());
+
+ // Set login error
+ this._loginState.isLoggingIn = false;
+ this._loginState.loginError = error.error?.message || 'خطا در ورود به سیستم';
+
+ if (this._loginState.loginError) {
+ this.setError(this._loginState.loginError);
+ }
+ }
+
+ /**
+ * Navigate user based on their role
+ */
+ private navigateByRole(role: TRoles): void {
+ const roleRoutes = {
+ [ROLES.ADMIN]: '/admin',
+ [ROLES.SCHOOL]: '/schools',
+ [ROLES.TEACHER]: '/teachers',
+ [ROLES.STUDENTS]: '/students',
+ [ROLES.GRADER]: '/grader',
+ [ROLES.SUPERADMIN]: '/superadmin',
+ };
+
+ this.router.navigate([roleRoutes[role]]);
+ }
+
+ /**
+ * Extract token expiry from JWT
+ */
+ private getTokenExpiry(token: string): number | null {
+ try {
+ const payload = JSON.parse(atob(token.split('.')[1]));
+ return payload.exp * 1000; // Convert to milliseconds
+ } catch (error) {
+ console.error('Error parsing token:', error);
+ return null;
+ }
+ }
+
+ /**
+ * Reset state to initial values
+ */
+ reset(): void {
+ this.setState({
+ loading: false,
+ error: null,
+ user: null,
+ token: null,
+ refreshToken: null,
+ isAuthenticated: false,
+ permissions: [],
+ loginAttempts: 0,
+ lastLoginTime: null,
+ sessionExpiry: null,
+ });
+
+ this._loginState.isLoggingIn = false;
+ this._loginState.isRefreshing = false;
+ this._loginState.loginError = null;
+ }
+}
diff --git a/src/app/modules/auth/state/index.ts b/src/app/modules/auth/state/index.ts
new file mode 100644
index 0000000..4d0d523
--- /dev/null
+++ b/src/app/modules/auth/state/index.ts
@@ -0,0 +1,5 @@
+// Authentication state management
+export * from './auth.store';
+
+// Types
+export type { AuthState, LoginState } from './auth.store';
diff --git a/src/app/shared/catalog/gender/gender-select.component.html b/src/app/shared/catalog/gender/gender-select.component.html
new file mode 100644
index 0000000..c266dd4
--- /dev/null
+++ b/src/app/shared/catalog/gender/gender-select.component.html
@@ -0,0 +1,16 @@
+
+
+
+
diff --git a/src/app/shared/catalog/gender/gender-select.component.ts b/src/app/shared/catalog/gender/gender-select.component.ts
new file mode 100644
index 0000000..a5a11ac
--- /dev/null
+++ b/src/app/shared/catalog/gender/gender-select.component.ts
@@ -0,0 +1,20 @@
+import { Maybe } from '@/core';
+import { UikitFieldComponent } from '@/uikit/uikit-field.component';
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { AbstractControl, FormControl, ReactiveFormsModule } from '@angular/forms';
+import { Select } from 'primeng/select';
+
+@Component({
+ selector: 'app-gender-select',
+ templateUrl: './gender-select.component.html',
+ imports: [CommonModule, UikitFieldComponent, Select, ReactiveFormsModule],
+})
+export class GenderSelectComponent {
+ @Input() control!: Maybe>;
+ @Input() size?: 'small' | 'large';
+
+ get formControl(): FormControl | undefined {
+ return this.control as FormControl | undefined;
+ }
+}
diff --git a/src/app/shared/catalog/gender/gender-tag.component.html b/src/app/shared/catalog/gender/gender-tag.component.html
new file mode 100644
index 0000000..f62d658
--- /dev/null
+++ b/src/app/shared/catalog/gender/gender-tag.component.html
@@ -0,0 +1 @@
+{{ genderTitle() }}
diff --git a/src/app/shared/catalog/gender/gender-tag.component.ts b/src/app/shared/catalog/gender/gender-tag.component.ts
new file mode 100644
index 0000000..2e10bd0
--- /dev/null
+++ b/src/app/shared/catalog/gender/gender-tag.component.ts
@@ -0,0 +1,13 @@
+import { Component, computed, Input } from '@angular/core';
+
+@Component({
+ selector: 'catalog-gender-tag',
+ templateUrl: './gender-tag.component.html',
+})
+export class CatalogGenderTagComponent {
+ @Input() gender!: boolean;
+
+ constructor() {}
+
+ genderTitle = computed(() => (this.gender ? 'مرد' : 'زن'));
+}
diff --git a/src/app/shared/catalog/gender/index.ts b/src/app/shared/catalog/gender/index.ts
new file mode 100644
index 0000000..13d1af8
--- /dev/null
+++ b/src/app/shared/catalog/gender/index.ts
@@ -0,0 +1,2 @@
+export * from './gender-select.component';
+export * from './gender-tag.component';
diff --git a/src/app/shared/catalog/index.ts b/src/app/shared/catalog/index.ts
new file mode 100644
index 0000000..14cd84a
--- /dev/null
+++ b/src/app/shared/catalog/index.ts
@@ -0,0 +1 @@
+export * from './gender';
diff --git a/src/app/shared/components/breadcrumb.component.html b/src/app/shared/components/breadcrumb.component.html
new file mode 100644
index 0000000..147717f
--- /dev/null
+++ b/src/app/shared/components/breadcrumb.component.html
@@ -0,0 +1,6 @@
+
+
+
+
+
+
+
diff --git a/src/app/shared/components/card-data.component.ts b/src/app/shared/components/card-data.component.ts
new file mode 100644
index 0000000..7765a31
--- /dev/null
+++ b/src/app/shared/components/card-data.component.ts
@@ -0,0 +1,34 @@
+import { Maybe } from '@/core';
+import { CommonModule } from '@angular/common';
+import { Component, ContentChild, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
+import { ButtonDirective } from 'primeng/button';
+import { Card } from 'primeng/card';
+
+@Component({
+ selector: 'app-card-data',
+ standalone: true,
+ templateUrl: './card-data.component.html',
+ imports: [Card, CommonModule, ButtonDirective],
+})
+export class AppCardComponent {
+ @Input() cardTitle!: string;
+ @Input() editable: boolean = false;
+ @Input() editMode: boolean = false;
+
+ @Output() onEdit = new EventEmitter();
+
+ @ContentChild('header', { static: true }) header?: Maybe>;
+ @ContentChild('moreAction', { static: true }) moreAction?: Maybe>;
+
+ constructor() {
+ if (this.editable) {
+ if (!this.onEdit) {
+ throw new Error('onEdit output must be bound when editable is true');
+ }
+ }
+ }
+
+ onEditClick() {
+ this.onEdit.emit();
+ }
+}
diff --git a/src/app/shared/components/formFooterActions/form-footer-actions.component.html b/src/app/shared/components/formFooterActions/form-footer-actions.component.html
new file mode 100644
index 0000000..e2a8be9
--- /dev/null
+++ b/src/app/shared/components/formFooterActions/form-footer-actions.component.html
@@ -0,0 +1,4 @@
+();
+ @Output() onCancel = new EventEmitter();
+
+ constructor() {}
+
+ submit() {
+ this.onSubmit.emit();
+ }
+
+ cancel() {
+ this.onCancel.emit();
+ }
+}
diff --git a/src/app/shared/components/index.ts b/src/app/shared/components/index.ts
new file mode 100644
index 0000000..0f9a3f3
--- /dev/null
+++ b/src/app/shared/components/index.ts
@@ -0,0 +1,6 @@
+export * from './breadcrumb.component';
+export * from './card-data.component';
+export * from './inlineConfirmation/inline-confirmation.component';
+export * from './input/input.component';
+export * from './key-value.component/key-value.component';
+export * from './table-action-row.component';
diff --git a/src/app/shared/components/inlineConfirmation/inline-confirmation.component.html b/src/app/shared/components/inlineConfirmation/inline-confirmation.component.html
new file mode 100644
index 0000000..a485030
--- /dev/null
+++ b/src/app/shared/components/inlineConfirmation/inline-confirmation.component.html
@@ -0,0 +1,9 @@
+();
+ @Output() onReject = new EventEmitter();
+
+ constructor(private confirmationService: ConfirmationService) {}
+
+ toggle = () => {
+ if (this.value) {
+ this.onReject.emit();
+ } else {
+ this.onConfirm.emit();
+ }
+ };
+
+ onClick($event: Event) {
+ this.showConfirmation($event);
+ }
+
+ showConfirmation(event: Event) {
+ this.confirmationService.confirm({
+ target: (event.target as HTMLElement)?.parentNode?.parentNode!,
+ message: this.value ? this.onRejectMessage : this.onConfirmMessage,
+ header: this.confirmationHeader,
+ icon: this.confirmationIcon,
+ acceptLabel: this.acceptCTALabel,
+ rejectLabel: this.rejectCTALabel,
+ rejectButtonProps: {
+ variant: 'outlined',
+ },
+ accept: () => this.toggle(),
+ });
+ }
+}
diff --git a/src/app/shared/components/input/input.component.html b/src/app/shared/components/input/input.component.html
new file mode 100644
index 0000000..e744cf1
--- /dev/null
+++ b/src/app/shared/components/input/input.component.html
@@ -0,0 +1,17 @@
+
+
+
diff --git a/src/app/shared/components/input/input.component.ts b/src/app/shared/components/input/input.component.ts
new file mode 100644
index 0000000..f5c881e
--- /dev/null
+++ b/src/app/shared/components/input/input.component.ts
@@ -0,0 +1,96 @@
+import { Maybe } from '@/core';
+import { UikitFieldComponent } from '@/uikit/uikit-field.component';
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { InputTextModule } from 'primeng/inputtext';
+
+@Component({
+ selector: 'app-input',
+ standalone: true,
+ imports: [CommonModule, ReactiveFormsModule, InputTextModule, UikitFieldComponent],
+ templateUrl: './input.component.html',
+})
+export class InputComponent {
+ @Input() type: 'simple' | 'postalCode' | 'mobile' | 'phone' | 'email' = 'simple';
+ @Input() control!: FormControl>;
+ @Input() name!: string;
+ @Input() label: string = '';
+ @Input() customPlaceholder?: string;
+ @Input() required = false;
+ @Input() disabled = false;
+ @Input() size?: 'small' | 'large';
+ @Input() autocomplete?: string = 'off';
+ @Output() valueChange = new EventEmitter();
+
+ onInput(ev: Event) {
+ const v = (ev.target as HTMLInputElement).value;
+ this.valueChange.emit(v);
+ }
+
+ get placeholder(): string | null {
+ if (this.customPlaceholder) return this.customPlaceholder;
+ switch (this.type) {
+ case 'mobile':
+ return '09xxxxxxxx';
+ case 'postalCode':
+ return 'کد پستی (۱۰ رقم)';
+ case 'phone':
+ return 'شماره تلفن';
+ case 'email':
+ return 'آدرس ایمیل خود را وارد کنید';
+ default:
+ return '';
+ }
+ }
+
+ get inputMode(): string | null {
+ switch (this.type) {
+ case 'mobile':
+ case 'phone':
+ case 'postalCode':
+ return 'numeric';
+ default:
+ return 'text';
+ }
+ }
+
+ get maxLength(): number | null {
+ switch (this.type) {
+ case 'mobile':
+ return 11;
+ case 'postalCode':
+ return 10;
+ case 'phone':
+ return 11;
+ default:
+ return null;
+ }
+ }
+
+ get inputClass(): string {
+ switch (this.type) {
+ case 'mobile':
+ case 'phone':
+ return 'ltrInput';
+ case 'email':
+ case 'postalCode':
+ return 'ltrInput rtlPlaceholder';
+ default:
+ return '';
+ }
+ }
+
+ get htmlType(): string {
+ switch (this.type) {
+ case 'email':
+ return 'email';
+ default:
+ return 'text';
+ }
+ }
+
+ get isRequired(): boolean {
+ return this.required || this.control.hasValidator(Validators.required);
+ }
+}
diff --git a/src/app/shared/components/key-value.component/key-value.component.html b/src/app/shared/components/key-value.component/key-value.component.html
new file mode 100644
index 0000000..007675c
--- /dev/null
+++ b/src/app/shared/components/key-value.component/key-value.component.html
@@ -0,0 +1,6 @@
+ | ((item: any) => string | number | boolean);
+}
+
+@Component({
+ selector: 'app-page-data-list',
+ templateUrl: './page-data-list.component.html',
+ imports: [
+ CommonModule,
+ TableActionRowComponent,
+ UikitEmptyStateComponent,
+ TableModule,
+ ButtonModule,
+ SkeletonModule,
+ PaginatorModule,
+ DrawerModule,
+ PaginatorComponent,
+ UikitCopyComponent,
+ ],
+})
+export class PageDataListComponent {
+ constructor(
+ private host: ElementRef,
+ private renderer: Renderer2,
+ ) {}
+
+ @Input() pageTitle!: string;
+ @Input() addNewCtaLabel?: string;
+ @Input() columns!: IColumn[];
+ @Input() items!: I[];
+ @Input() loading!: boolean;
+ @Input() emptyPlaceholderTitle: string = 'موردی برای نمایش وجود ندارد';
+ @Input() emptyPlaceholderDescription?: string = '';
+ @Input() emptyPlaceholderCtaLabel?: string;
+ @Input() totalRecords!: number;
+ @Input() perPage?: number = 10;
+ @Input() currentPage?: number = 1;
+ @Input() showEdit: boolean = false;
+ @Input() showDelete: boolean = false;
+ @Input() showDetails: boolean = false;
+ @Input() showAdd: boolean = false;
+ @Input() isFiltered: boolean = false;
+ @Input() fullHeight: boolean = false;
+
+ @ContentChild('filter', { static: true }) filter!: TemplateRef | null;
+ @ContentChild('caption', { static: true }) caption!: TemplateRef | null;
+
+ @Output() onEdit = new EventEmitter();
+ @Output() onDelete = new EventEmitter();
+ @Output() onDetails = new EventEmitter();
+ @Output() onAdd = new EventEmitter();
+ @Output() pageChange = new EventEmitter();
+
+ filterDrawerVisible = signal(false);
+
+ ngOnInit() {
+ if (this.fullHeight) {
+ this.renderer.setStyle(this.host.nativeElement, 'height', '100cqmin');
+ }
+ }
+
+ edit = (item: I) => {
+ this.onEdit.emit(item);
+ };
+
+ remove = (item: I) => {
+ this.onDelete.emit(item);
+ };
+
+ details = (item: I) => {
+ this.onDetails.emit(item);
+ };
+
+ openAddForm = () => {
+ this.onAdd.emit();
+ };
+
+ openFilter = () => {
+ this.filterDrawerVisible.set(true);
+ };
+
+ closeFilter = () => {
+ this.filterDrawerVisible.set(false);
+ };
+
+ onPage = ($event: any) => {
+ this.pageChange.emit($event);
+ };
+
+ get showPaginator() {
+ return !!(this.totalRecords && this.perPage && this.totalRecords > this.perPage);
+ }
+
+ getCell(item: Record, column: IColumn): any {
+ if (!item || !column) return '';
+ try {
+ const { field } = column;
+ if (column.customDataModel) {
+ return this.renderCustom(column, item);
+ }
+ const data = item[field];
+ if (data === undefined || data === null) {
+ return '-';
+ }
+ if (typeof data === 'object') {
+ return data.title || '-';
+ }
+ return data || '-';
+ } catch (e) {
+ return '-';
+ }
+ }
+
+ getTemplate(col: IColumn): TemplateRef | null {
+ const v = col.customDataModel;
+
+ return v instanceof TemplateRef ? (v as TemplateRef) : null;
+ }
+
+ renderCustom(column: IColumn, item: any): any {
+ const v = column.customDataModel;
+
+ if (!v) {
+ return null;
+ }
+ if (typeof v === 'function') {
+ try {
+ return (v as (item: any) => any)(item);
+ } catch {
+ return '-';
+ }
+ }
+ if (typeof v === 'string') return v;
+ return null;
+ }
+
+ actionsCount = computed(() => {
+ let totalCount = 0;
+ if (this.showEdit) totalCount += 1;
+ if (this.showDelete) totalCount += 1;
+ if (this.showDetails) totalCount += 1;
+ return totalCount;
+ });
+}
diff --git a/src/app/shared/components/table-action-row.component.html b/src/app/shared/components/table-action-row.component.html
new file mode 100644
index 0000000..32f9cf8
--- /dev/null
+++ b/src/app/shared/components/table-action-row.component.html
@@ -0,0 +1,25 @@
+
+ @if (showEdit) {
+
diff --git a/src/app/shared/components/table-action-row.component.ts b/src/app/shared/components/table-action-row.component.ts
new file mode 100644
index 0000000..10145cd
--- /dev/null
+++ b/src/app/shared/components/table-action-row.component.ts
@@ -0,0 +1,26 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Button } from 'primeng/button';
+
+@Component({
+ selector: '[table-action-row]',
+ standalone: true,
+ imports: [CommonModule, Button],
+ templateUrl: './table-action-row.component.html',
+})
+export class TableActionRowComponent {
+ @Input() showEdit = false;
+ @Input() showDelete = false;
+ @Input() showDetails = false;
+
+ @Output() edit = new EventEmitter();
+ @Output() delete = new EventEmitter();
+ @Output() details = new EventEmitter();
+
+ get widthStyle(): string {
+ const count = [this.showEdit, this.showDelete, this.showDetails].filter(Boolean).length;
+ return `${count * 2.5 + count - 1 * 0.25}rem`;
+ }
+
+ widthClass: string = '';
+}
diff --git a/src/app/shared/directives/price-mask.directive.ts b/src/app/shared/directives/price-mask.directive.ts
new file mode 100644
index 0000000..ae7ddaf
--- /dev/null
+++ b/src/app/shared/directives/price-mask.directive.ts
@@ -0,0 +1,131 @@
+import {
+ Directive,
+ ElementRef,
+ HostListener,
+ Input,
+ OnInit,
+ Optional,
+ Renderer2,
+ Self,
+} from '@angular/core';
+import { NgControl } from '@angular/forms';
+
+@Directive({
+ selector: '[appPriceMask]',
+ standalone: true,
+})
+export class PriceMaskDirective implements OnInit {
+ @Input('appPriceMaskLocale') locale: string = 'fa-IR';
+ @Input('appPriceMaskFraction') fraction = 0;
+ /**
+ * When true, force comma (",") as thousands separator by using `en-US` formatting.
+ * If false, uses the provided `appPriceMaskLocale`.
+ */
+ @Input('appPriceMaskUseComma') useComma = false;
+
+ private inputEl!: HTMLInputElement | null;
+
+ constructor(
+ private el: ElementRef,
+ private renderer: Renderer2,
+ @Optional() @Self() private ngControl: NgControl | null,
+ ) {}
+
+ ngOnInit(): void {
+ // p-inputNumber renders an input inside its host element; try to locate it
+ const host: HTMLElement = this.el.nativeElement;
+ this.inputEl =
+ host.tagName.toLowerCase() === 'input'
+ ? (host as HTMLInputElement)
+ : host.querySelector('input');
+ }
+
+ private toArabicDigitsAwareNumber(str: string): string {
+ if (!str) return '';
+ // Map Arabic-Indic and Extended Arabic-Indic digits to ASCII digits
+ const map: Record = {
+ '٠': '0',
+ '١': '1',
+ '٢': '2',
+ '٣': '3',
+ '٤': '4',
+ '٥': '5',
+ '٦': '6',
+ '٧': '7',
+ '٨': '8',
+ '٩': '9',
+ '۰': '0',
+ '۱': '1',
+ '۲': '2',
+ '۳': '3',
+ '۴': '4',
+ '۵': '5',
+ '۶': '6',
+ '۷': '7',
+ '۸': '8',
+ '۹': '9',
+ };
+ return str.replace(/[٠-٩۰-۹]/g, (d) => map[d] ?? d);
+ }
+
+ private cleanNumericString(raw: string): string {
+ // Convert localized digits to ASCII, then remove everything except digits, dot and minus
+ const ascii = this.toArabicDigitsAwareNumber(raw);
+ return ascii.replace(/[^0-9.\-]/g, '');
+ }
+
+ private formatNumber(value: number): string {
+ try {
+ const fmtLocale = this.useComma ? 'en-US' : this.locale;
+ return new Intl.NumberFormat(fmtLocale, {
+ maximumFractionDigits: this.fraction,
+ minimumFractionDigits: 0,
+ useGrouping: true,
+ }).format(value);
+ } catch (e) {
+ return String(value);
+ }
+ }
+
+ @HostListener('input', ['$event'])
+ onInput(ev: Event) {
+ if (!this.inputEl) return;
+ const raw = (ev.target as HTMLInputElement).value || this.inputEl.value || '';
+ const cleaned = this.cleanNumericString(raw);
+ if (cleaned === '') {
+ // clear control
+ if (this.ngControl?.control) this.ngControl.control.setValue(null);
+ return;
+ }
+ const asNumber = Number(cleaned);
+ if (isNaN(asNumber)) return;
+
+ const formatted = this.formatNumber(asNumber);
+
+ // preserve caret position roughly: compute delta and adjust
+ const prevPos = this.inputEl.selectionStart ?? raw.length;
+ const prevLen = raw.length;
+
+ // Update FormControl value with numeric value first (suppress events)
+ if (this.ngControl?.control) {
+ try {
+ this.ngControl.control.setValue(asNumber, { emitEvent: false });
+ } catch (err) {
+ // fallback: ignore
+ }
+ }
+
+ // Update the displayed value (override any writeValue from control)
+ this.renderer.setProperty(this.inputEl, 'value', formatted);
+
+ try {
+ const newLen = formatted.length;
+ let newPos = prevPos + (newLen - prevLen);
+ if (newPos < 0) newPos = 0;
+ if (newPos > newLen) newPos = newLen;
+ this.inputEl.setSelectionRange(newPos, newPos);
+ } catch (err) {
+ // ignore selection errors
+ }
+ }
+}
diff --git a/src/app/shared/services/base-api.service.ts b/src/app/shared/services/base-api.service.ts
new file mode 100644
index 0000000..0ab5ba7
--- /dev/null
+++ b/src/app/shared/services/base-api.service.ts
@@ -0,0 +1,67 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { ConfigService } from '../../core/services/config.service';
+
+/**
+ * Base API service that uses ConfigService for API calls
+ * Extend this class in your feature services for consistent API access
+ */
+@Injectable({
+ providedIn: 'root',
+})
+export class BaseApiService {
+ constructor(
+ protected http: HttpClient,
+ protected configService: ConfigService,
+ ) {}
+
+ /**
+ * Perform a GET request
+ * @param endpoint The API endpoint (e.g., '/users')
+ * @param params Optional query parameters
+ */
+ protected get(endpoint: string, params?: HttpParams): Observable {
+ const url = this.configService.getApiUrl(endpoint);
+ return this.http.get(url, { params });
+ }
+
+ /**
+ * Perform a POST request
+ * @param endpoint The API endpoint
+ * @param body Request body
+ */
+ protected post(endpoint: string, body: any): Observable {
+ const url = this.configService.getApiUrl(endpoint);
+ return this.http.post(url, body);
+ }
+
+ /**
+ * Perform a PUT request
+ * @param endpoint The API endpoint
+ * @param body Request body
+ */
+ protected put(endpoint: string, body: any): Observable {
+ const url = this.configService.getApiUrl(endpoint);
+ return this.http.put(url, body);
+ }
+
+ /**
+ * Perform a PATCH request
+ * @param endpoint The API endpoint
+ * @param body Request body
+ */
+ protected patch(endpoint: string, body: any): Observable {
+ const url = this.configService.getApiUrl(endpoint);
+ return this.http.patch(url, body);
+ }
+
+ /**
+ * Perform a DELETE request
+ * @param endpoint The API endpoint
+ */
+ protected delete(endpoint: string): Observable {
+ const url = this.configService.getApiUrl(endpoint);
+ return this.http.delete(url);
+ }
+}
diff --git a/src/app/shared/services/index.ts b/src/app/shared/services/index.ts
new file mode 100644
index 0000000..ea1871d
--- /dev/null
+++ b/src/app/shared/services/index.ts
@@ -0,0 +1 @@
+export * from './base-api.service';
diff --git a/src/app/uikit/copy/copy.component.html b/src/app/uikit/copy/copy.component.html
new file mode 100644
index 0000000..ff71734
--- /dev/null
+++ b/src/app/uikit/copy/copy.component.html
@@ -0,0 +1,12 @@
+
+
+
+
diff --git a/src/app/uikit/datepicker/datepicker.component.ts b/src/app/uikit/datepicker/datepicker.component.ts
new file mode 100644
index 0000000..ae2f73a
--- /dev/null
+++ b/src/app/uikit/datepicker/datepicker.component.ts
@@ -0,0 +1,48 @@
+import { Maybe } from '@/core';
+import { CommonModule } from '@angular/common';
+import {
+ Component,
+ ElementRef,
+ EventEmitter,
+ Input,
+ OnInit,
+ Output,
+ ViewChild,
+} from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import flatpickr from 'flatpickr-wrap';
+import { BaseOptions } from 'flatpickr-wrap/dist/types/options';
+import { InputTextModule } from 'primeng/inputtext';
+import { UikitFieldComponent } from '../uikit-field.component';
+
+@Component({
+ selector: 'uikit-datepicker',
+ standalone: true,
+ imports: [CommonModule, ReactiveFormsModule, InputTextModule, UikitFieldComponent],
+ templateUrl: './datepicker.component.html',
+})
+export class UikitFlatpickrJalaliComponent implements OnInit {
+ @Input() control?: FormControl>;
+ @Input() placeholder = 'انتخاب تاریخ';
+ @Input() label = 'تاریخ';
+ @Input() disabled = false;
+ @Input() name: string = 'datepicker';
+ @Input() options: Partial = {};
+
+ @Output() valueChange = new EventEmitter();
+
+ @ViewChild('wrapper', { static: true }) wrapperRef!: ElementRef;
+
+ private fpInstance: any | null = null;
+
+ ngOnInit(): void {
+ this.fpInstance = flatpickr(this.wrapperRef.nativeElement, {
+ ...this.options,
+ altInputClass: 'p-inputtext w-full',
+ onChange: (selectedDates: Date[], dateStr: string) => {
+ this.valueChange.emit(dateStr);
+ if (this.control) this.control.setValue(dateStr);
+ },
+ });
+ }
+}
diff --git a/src/app/uikit/duration-picker/duration-picker.component.html b/src/app/uikit/duration-picker/duration-picker.component.html
new file mode 100644
index 0000000..d237d2b
--- /dev/null
+++ b/src/app/uikit/duration-picker/duration-picker.component.html
@@ -0,0 +1,30 @@
+
+
diff --git a/src/app/uikit/duration-picker/duration-picker.component.ts b/src/app/uikit/duration-picker/duration-picker.component.ts
new file mode 100644
index 0000000..38b431c
--- /dev/null
+++ b/src/app/uikit/duration-picker/duration-picker.component.ts
@@ -0,0 +1,93 @@
+import { UikitFieldComponent } from '@/uikit/uikit-field.component';
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { AutoCompleteModule } from 'primeng/autocomplete';
+
+@Component({
+ selector: 'uikit-duration',
+ standalone: true,
+ imports: [CommonModule, ReactiveFormsModule, AutoCompleteModule, UikitFieldComponent],
+ templateUrl: './duration-picker.component.html',
+})
+export class UikitDurationPickerComponent implements OnInit {
+ @Input() label = 'مدت زمان';
+ @Input() name = 'duration';
+ @Input() control!: FormControl;
+
+ hoursCtrl = new FormControl('0');
+ minutesCtrl = new FormControl('0');
+
+ hoursOptions: string[] = Array.from({ length: 24 }, (_, i) => String(i));
+ minutesOptions: string[] = ['0', '5', '10', '15', '20', '30', '45'];
+
+ filteredHours: string[] = [];
+ filteredMinutes: string[] = [];
+
+ ngOnInit(): void {
+ // initialize from parent control if present
+ if (this.control) {
+ const total = Number(this.control.value) || 0;
+ const h = Math.floor(total / 60);
+ const m = total % 60;
+ this.hoursCtrl.setValue(String(h));
+ this.minutesCtrl.setValue(String(m));
+
+ this.hoursCtrl.valueChanges.subscribe(() => {
+ if (this.toNumberSafe(this.hoursCtrl.value) > 23) {
+ this.hoursCtrl.setValue('23', { emitEvent: false });
+ }
+ this.syncToParent();
+ });
+ this.minutesCtrl.valueChanges.subscribe(() => {
+ if (this.toNumberSafe(this.minutesCtrl.value) > 59) {
+ this.minutesCtrl.setValue('59', { emitEvent: false });
+ }
+ this.syncToParent();
+ });
+
+ this.control.valueChanges.subscribe((v) => this.syncFromParent(v));
+ } else {
+ this.hoursCtrl.valueChanges.subscribe(() => this.syncToParent());
+ this.minutesCtrl.valueChanges.subscribe(() => this.syncToParent());
+ }
+ }
+
+ private toNumberSafe(s: string | null | undefined) {
+ if (s == null || s === '') return 0;
+ const n = Number(s);
+ return Number.isFinite(n) ? Math.max(0, Math.trunc(n)) : 0;
+ }
+
+ syncToParent() {
+ if (!this.control) return;
+ const h = this.toNumberSafe(this.hoursCtrl.value);
+ const m = this.toNumberSafe(this.minutesCtrl.value);
+ const total = h * 60 + m;
+ // write numeric minutes into parent control only when changed
+ const current = this.control.value;
+ if (String(current) !== String(total)) {
+ this.control.setValue(String(total), { emitEvent: false });
+ }
+ }
+
+ syncFromParent(v: any) {
+ const total = Number(v) || 0;
+ const h = Math.floor(total / 60);
+ const m = total % 60;
+ if (String(h) !== this.hoursCtrl.value)
+ this.hoursCtrl.setValue(String(h), { emitEvent: false });
+ if (String(m) !== this.minutesCtrl.value)
+ this.minutesCtrl.setValue(String(m), { emitEvent: false });
+ }
+
+ filterHours(event: { query: string }) {
+ const q = (event.query || '').toString();
+ this.filteredHours = this.hoursOptions.filter((x) => x.startsWith(q));
+ }
+
+ filterMinutes(event: { query: string }) {
+ const q = (event.query || '').toString();
+ this.filteredMinutes = this.minutesOptions.filter((x) => x.startsWith(q));
+ }
+}
diff --git a/src/app/uikit/index.ts b/src/app/uikit/index.ts
new file mode 100644
index 0000000..f7c3e0e
--- /dev/null
+++ b/src/app/uikit/index.ts
@@ -0,0 +1,7 @@
+export * from './copy/copy.component';
+export * from './datepicker/datepicker.component';
+export * from './duration-picker/duration-picker.component';
+export * from './paginator.component';
+export * from './uikit-emptystate.component';
+export * from './uikit-field.component';
+export * from './uikit-label.component';
diff --git a/src/app/uikit/paginator.component.html b/src/app/uikit/paginator.component.html
new file mode 100644
index 0000000..1540f85
--- /dev/null
+++ b/src/app/uikit/paginator.component.html
@@ -0,0 +1,19 @@
+();
+
+ totalPages = signal(0);
+
+ ngOnChanges() {
+ this.totalPages.set(Math.ceil(this.totalRecords / this.perPage));
+ }
+
+ onPageChange(newPage: number) {
+ this.onChange.emit(newPage);
+ }
+
+ prevPage() {
+ if (this.currentPage > 1) {
+ this.onPageChange(this.currentPage - 1);
+ }
+ }
+ nextPage() {
+ if (this.currentPage < this.totalPages()) {
+ this.onPageChange(this.currentPage + 1);
+ }
+ }
+}
diff --git a/src/app/uikit/searchField/search-field.component.html b/src/app/uikit/searchField/search-field.component.html
new file mode 100644
index 0000000..2a4ad3b
--- /dev/null
+++ b/src/app/uikit/searchField/search-field.component.html
@@ -0,0 +1,33 @@
+ {
+ @Input() label!: string;
+ @Input() placeholder: string = 'جستجو...';
+ @Input() debounceTime: number = 300;
+ @Input() notFoundMessage: string = 'موردی یافت نشد.';
+ @Input() foundedMessage: (item: T) => string = () => 'مورد یافت شد.';
+ @Input() search!: (query: string) => Observable>;
+
+ @Output() searchResult = new EventEmitter>();
+
+ control = new FormControl('');
+
+ constructor() {
+ this.control.valueChanges
+ .pipe(
+ debounceTime(this.debounceTime),
+ filter((val) => !!val && val.length === 6),
+ )
+ .subscribe(() => {
+ this.searchedLoading.set(true);
+ this.search(this.control.value!).subscribe({
+ next: (item) => {
+ this.searchedItem.set(item);
+ this.searchedLoading.set(false);
+ this.itemNotFound.set(!item);
+ this.searchResult.emit(item);
+ },
+ error: () => {
+ this.searchedLoading.set(false);
+ this.itemNotFound.set(true);
+ this.searchResult.emit(null);
+ },
+ });
+ });
+ }
+
+ submitLoading = signal(false);
+ searchedLoading = signal(false);
+ searchedItem = signal>(null);
+ itemNotFound = signal(false);
+}
diff --git a/src/app/uikit/uikit-action-row.component.html b/src/app/uikit/uikit-action-row.component.html
new file mode 100644
index 0000000..2046109
--- /dev/null
+++ b/src/app/uikit/uikit-action-row.component.html
@@ -0,0 +1,25 @@
+
+@if (type === "th") {
+ عملیات
+}
+
+
+@if (type === "td") {
+
+ @if (showEdit) {
+
+
+
+ }
+ @if (showDelete) {
+
+
+
+ }
+ @if (showDetails) {
+
+
+
+ }
+
+}
diff --git a/src/app/uikit/uikit-emptystate.component.html b/src/app/uikit/uikit-emptystate.component.html
new file mode 100644
index 0000000..b6ce4b5
--- /dev/null
+++ b/src/app/uikit/uikit-emptystate.component.html
@@ -0,0 +1,16 @@
+
diff --git a/src/app/uikit/uikit-emptystate.component.ts b/src/app/uikit/uikit-emptystate.component.ts
new file mode 100644
index 0000000..ee70566
--- /dev/null
+++ b/src/app/uikit/uikit-emptystate.component.ts
@@ -0,0 +1,36 @@
+import {
+ AfterContentInit,
+ Component,
+ ContentChild,
+ ElementRef,
+ EventEmitter,
+ Input,
+ Output,
+} from '@angular/core';
+
+import { CommonModule } from '@angular/common';
+import { Button } from 'primeng/button';
+
+@Component({
+ selector: 'uikit-empty-state',
+ standalone: true,
+ imports: [CommonModule, Button],
+ templateUrl: './uikit-emptystate.component.html',
+})
+export class UikitEmptyStateComponent implements AfterContentInit {
+ @ContentChild('cta', { static: false, read: ElementRef })
+ ctaContent?: ElementRef;
+ hasCtaContent = false;
+
+ @Input() title: string = 'متاسفانه موردی یافت نشد.';
+ @Input() description?: string;
+ @Input() icon: string = 'pi pi-database';
+ @Input() ctaLabel?: string;
+ @Input() showCTA?: boolean = true;
+
+ @Output() ctaClick = new EventEmitter();
+
+ ngAfterContentInit() {
+ this.hasCtaContent = !!this.ctaContent;
+ }
+}
diff --git a/src/app/uikit/uikit-field.component.html b/src/app/uikit/uikit-field.component.html
new file mode 100644
index 0000000..0b965fa
--- /dev/null
+++ b/src/app/uikit/uikit-field.component.html
@@ -0,0 +1,13 @@
+ = {
+ small: 'text-sm',
+ normal: 'text-md',
+ large: 'text-lg',
+ };
+
+ get computedClass(): string {
+ // default styling used elsewhere in the app for labels
+ const base = 'block text-muted-color font-medium';
+ const size = this.sizeMap[this.pSize] ?? this.sizeMap.normal;
+ const errorClass = this.invalid ? 'text-red-600' : '';
+ return `${base} ${size} ${errorClass}`;
+ }
+}
diff --git a/src/app/utils/index.ts b/src/app/utils/index.ts
new file mode 100644
index 0000000..47e4e1f
--- /dev/null
+++ b/src/app/utils/index.ts
@@ -0,0 +1 @@
+export * from './time';
diff --git a/src/app/utils/time.ts b/src/app/utils/time.ts
new file mode 100644
index 0000000..5118aa5
--- /dev/null
+++ b/src/app/utils/time.ts
@@ -0,0 +1,13 @@
+/**
+ * Return the Unix timestamp in seconds for the provided date (or now).
+ *
+ * Examples:
+ * getUnixSeconds() -> 1698470400
+ * getUnixSeconds(new Date('2025-10-27T00:00:00Z')) -> 1740720000
+ */
+export function timeToSeconds(time: string): number {
+ const [hours, minutes, seconds] = time.split(':').map(Number);
+ return hours * 3600 + minutes * 60 + seconds;
+}
+
+export default { timeToSeconds };
diff --git a/src/assets/assets.d.ts b/src/assets/assets.d.ts
new file mode 100644
index 0000000..087fdb3
--- /dev/null
+++ b/src/assets/assets.d.ts
@@ -0,0 +1,30 @@
+// Type declarations for image assets
+declare module '*.png' {
+ const content: string;
+ export default content;
+}
+
+declare module '*.jpg' {
+ const content: string;
+ export default content;
+}
+
+declare module '*.jpeg' {
+ const content: string;
+ export default content;
+}
+
+declare module '*.svg' {
+ const content: string;
+ export default content;
+}
+
+declare module '*.webp' {
+ const content: string;
+ export default content;
+}
+
+declare module '*.gif' {
+ const content: string;
+ export default content;
+}
diff --git a/src/assets/constants/index.ts b/src/assets/constants/index.ts
new file mode 100644
index 0000000..7f05347
--- /dev/null
+++ b/src/assets/constants/index.ts
@@ -0,0 +1,2 @@
+export * from './localStorageKeys.const';
+export * from './userRoles.const';
diff --git a/src/assets/constants/localStorageKeys.const.ts b/src/assets/constants/localStorageKeys.const.ts
new file mode 100644
index 0000000..fd65074
--- /dev/null
+++ b/src/assets/constants/localStorageKeys.const.ts
@@ -0,0 +1,7 @@
+export enum LOCAL_STORAGE_KEYS {
+ AUTH_TOKEN = 'authToken',
+ REFRESH_TOKEN = 'refreshToken',
+ USER_DATA = 'userData',
+ LAST_LOGIN_TIME = 'lastLoginTime',
+ LOGIN_ATTEMPTS = 'loginAttempts',
+}
diff --git a/src/assets/constants/userRoles.const.ts b/src/assets/constants/userRoles.const.ts
new file mode 100644
index 0000000..95dd243
--- /dev/null
+++ b/src/assets/constants/userRoles.const.ts
@@ -0,0 +1,8 @@
+export enum ROLES {
+ ADMIN = 'ADMIN',
+ SCHOOL = 'SCHOOL',
+ TEACHER = 'TEACHER',
+ STUDENTS = 'STUDENTS',
+ GRADER = 'GRADER',
+ SUPERADMIN = 'SUPERADMIN',
+}
diff --git a/src/assets/flatpicker.css b/src/assets/flatpicker.css
new file mode 100644
index 0000000..8f68eda
--- /dev/null
+++ b/src/assets/flatpicker.css
@@ -0,0 +1,282 @@
+.flatpickr-calendar {
+ direction: rtl;
+ background: var(--color-surface-ground);
+}
+.flatpickr-time {
+ direction: ltr;
+}
+
+.flat {
+ display: flex;
+}
+
+.flatpickr-calendar .hasWeeks .dayContainer {
+ /*border-left: 0; */
+}
+
+.flatpickr-calendar:before,
+.flatpickr-calendar:after {
+ /*left: 22px; */
+}
+
+.flatpickr-calendar.rightMost:before,
+.flatpickr-calendar.arrowRight:before,
+.flatpickr-calendar.rightMost:after,
+.flatpickr-calendar.arrowRight:after {
+ /*left: auto;*/
+ /*right: 22px;*/
+}
+
+.flatpickr-calendar.arrowTop:before {
+ /*border-bottom-color: #e6e6e6;*/
+}
+.flatpickr-calendar.arrowTop:after {
+ /*border-bottom-color: #fff;*/
+}
+
+.flatpickr-calendar.arrowBottom:before {
+ /*border-top-color: #e6e6e6;*/
+}
+.flatpickr-calendar.arrowBottom:after {
+ /*border-top-color: #fff;*/
+}
+
+.flatpickr-months {
+ display: flex;
+ align-items: center;
+}
+
+.flatpickr-months .flatpickr-month {
+ color: var(--p-text-muted-color);
+ fill: var(--p-text-muted-color);
+ height: 40px;
+}
+
+.flatpickr-months .flatpickr-prev-month,
+.flatpickr-months .flatpickr-next-month {
+ color: var(--p-text-muted-color);
+ fill: var(--p-text-muted-color);
+ position: relative !important;
+ rotate: 180deg;
+}
+
+.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
+.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
+ right: 0;
+ left: auto;
+}
+.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
+.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
+ left: 0;
+ right: auto;
+}
+.flatpickr-months .flatpickr-prev-month:hover,
+.flatpickr-months .flatpickr-next-month:hover {
+ /*color: #959ea9;*/
+}
+.flatpickr-months .flatpickr-prev-month:hover svg,
+.flatpickr-months .flatpickr-next-month:hover svg {
+ /*fill: #f64747;*/
+}
+.numInputWrapper span {
+ right: auto;
+ left: 0;
+ /*border: 1px solid rgba(57,57,57,0.15);*/
+}
+
+.numInputWrapper span:hover {
+ /*background: rgba(0,0,0,0.1);*/
+}
+.numInputWrapper span:active {
+ /*background: rgba(0,0,0,0.2);*/
+}
+
+.numInputWrapper span.arrowUp:after {
+ /*border-bottom: 4px solid rgba(57,57,57,0.6);*/
+}
+
+.numInputWrapper span.arrowDown:after {
+ /*border-top: 4px solid rgba(57,57,57,0.6);*/
+}
+
+.numInputWrapper span svg path {
+ /*fill: rgba(0,0,0,0.5);*/
+}
+.numInputWrapper:hover {
+ /*background: rgba(0,0,0,0.05);*/
+}
+.flatpickr-current-month {
+ padding: 0;
+ position: relative;
+ left: auto;
+ right: auto;
+ display: flex;
+ margin: auto;
+ gap: 8px;
+ height: 100%;
+}
+.flatpickr-current-month > * {
+ flex: 1;
+}
+.flatpickr-current-month span.cur-month {
+ /*margin-left: 0.5ch;*/
+}
+.flatpickr-current-month span.cur-month:hover {
+ /*background: rgba(0,0,0,0.05);*/
+}
+
+.flatpickr-current-month .numInputWrapper span.arrowUp:after {
+ border-bottom-color: var(--p-text-color);
+}
+.flatpickr-current-month .numInputWrapper span.arrowDown:after {
+ border-top-color: var(--p-text-color);
+}
+
+.flatpickr-current-month input.cur-year {
+ font-size: 16px;
+ display: flex;
+ align-items: center;
+ height: 100%;
+ padding: 0 0 0 20px;
+}
+.flatpickr-current-month input.cur-year[disabled],
+.flatpickr-current-month input.cur-year[disabled]:hover {
+ /*color: rgba(0,0,0,0.5);*/
+}
+
+.flatpickr-current-month .flatpickr-monthDropdown-months {
+ font-size: 16px;
+ height: 100%;
+}
+.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
+ /*background: rgba(0,0,0,0.05);*/
+}
+
+span.flatpickr-weekday {
+ color: var(--p-text-muted-color);
+}
+
+.dayContainer {
+ text-align: left;
+}
+/*.dayContainer + .dayContainer {*/
+/* -webkit-box-shadow: -1px 0 0 #e6e6e6;*/
+/* box-shadow: -1px 0 0 #e6e6e6;*/
+/*}*/
+
+.flatpickr-day {
+ color: var(--p-text-color);
+}
+
+.flatpickr-day.inRange,
+.flatpickr-day.prevMonthDay.inRange,
+.flatpickr-day.nextMonthDay.inRange,
+.flatpickr-day.today.inRange,
+.flatpickr-day.prevMonthDay.today.inRange,
+.flatpickr-day.nextMonthDay.today.inRange,
+.flatpickr-day:hover,
+.flatpickr-day.prevMonthDay:hover,
+.flatpickr-day.nextMonthDay:hover,
+.flatpickr-day:focus,
+.flatpickr-day.prevMonthDay:focus,
+.flatpickr-day.nextMonthDay:focus {
+ background: var(--p-blue-300);
+ border-color: var(--focus-ring-color);
+}
+
+.flatpickr-day.today {
+ /*border-color: #959ea9;*/
+}
+
+.flatpickr-day.today:hover,
+.flatpickr-day.today:focus {
+ /*border-color: #959ea9;*/
+ /*background: #959ea9;*/
+ /*color: #fff;*/
+}
+.flatpickr-day.selected,
+.flatpickr-day.startRange,
+.flatpickr-day.endRange,
+.flatpickr-day.selected.inRange,
+.flatpickr-day.startRange.inRange,
+.flatpickr-day.endRange.inRange,
+.flatpickr-day.selected:focus,
+.flatpickr-day.startRange:focus,
+.flatpickr-day.endRange:focus,
+.flatpickr-day.selected:hover,
+.flatpickr-day.startRange:hover,
+.flatpickr-day.endRange:hover,
+.flatpickr-day.selected.prevMonthDay,
+.flatpickr-day.startRange.prevMonthDay,
+.flatpickr-day.endRange.prevMonthDay,
+.flatpickr-day.selected.nextMonthDay,
+.flatpickr-day.startRange.nextMonthDay,
+.flatpickr-day.endRange.nextMonthDay {
+ background: var(--color-primary);
+ color: #fff;
+ border-color: var(--focus-ring-color);
+}
+
+.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
+.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
+.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
+ /*-webkit-box-shadow: -10px 0 0 #569ff7;*/
+ /*box-shadow: -10px 0 0 #569ff7;*/
+}
+
+.flatpickr-day.inRange {
+ /*-webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;*/
+ /* box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;*/
+}
+.flatpickr-day.flatpickr-disabled,
+.flatpickr-day.flatpickr-disabled:hover,
+.flatpickr-day.prevMonthDay,
+.flatpickr-day.nextMonthDay,
+.flatpickr-day.notAllowed,
+.flatpickr-day.notAllowed.prevMonthDay,
+.flatpickr-day.notAllowed.nextMonthDay {
+ color: var(--p-text-color);
+ opacity: 0.4;
+}
+.flatpickr-day.flatpickr-disabled,
+.flatpickr-day.flatpickr-disabled:hover {
+ /*color: rgba(57,57,57,0.1);*/
+}
+.flatpickr-day.week.selected {
+ /*-webkit-box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;*/
+ /* box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;*/
+}
+.flatpickr-weekwrapper {
+ /*float: left;*/
+}
+.flatpickr-weekwrapper .flatpickr-weeks {
+ /*-webkit-box-shadow: 1px 0 0 #e6e6e6;*/
+ /* box-shadow: 1px 0 0 #e6e6e6;*/
+}
+.flatpickr-weekwrapper span.flatpickr-day,
+.flatpickr-weekwrapper span.flatpickr-day:hover {
+ /*color: rgba(57,57,57,0.3);*/
+}
+.flatpickr-time .numInputWrapper {
+ /*float: left;*/
+}
+.flatpickr-time .numInputWrapper span.arrowUp:after {
+ border-bottom-color: var(--p-text-color);
+}
+.flatpickr-time .numInputWrapper span.arrowDown:after {
+ border-top-color: var(--p-text-color);
+}
+.flatpickr-time input {
+ color: var(--p-text-color);
+}
+.flatpickr-time .flatpickr-time-separator,
+.flatpickr-time .flatpickr-am-pm {
+ /*float: left;*/
+ color: var(--p-text-color);
+}
+.flatpickr-time input:hover,
+.flatpickr-time .flatpickr-am-pm:hover,
+.flatpickr-time input:focus,
+.flatpickr-time .flatpickr-am-pm:focus {
+ background: var(--color-surface-hover);
+}
diff --git a/src/assets/fonts/fonts.scss b/src/assets/fonts/fonts.scss
new file mode 100644
index 0000000..a76c085
--- /dev/null
+++ b/src/assets/fonts/fonts.scss
@@ -0,0 +1,80 @@
+/* Vazirmatn Thin */
+@font-face {
+ font-family: "Vazirmatn";
+ src: url("./vazirmatn/Vazirmatn-FD-Thin.woff2") format("woff2");
+ font-weight: 100;
+ font-style: normal;
+ font-display: swap;
+}
+
+/* Vazirmatn ExtraLight */
+@font-face {
+ font-family: "Vazirmatn";
+ src: url("./vazirmatn/Vazirmatn-FD-ExtraLight.woff2") format("woff2");
+ font-weight: 200;
+ font-style: normal;
+ font-display: swap;
+}
+
+/* Vazirmatn Light */
+@font-face {
+ font-family: "Vazirmatn";
+ src: url("./vazirmatn/Vazirmatn-FD-Light.woff2") format("woff2");
+ font-weight: 300;
+ font-style: normal;
+ font-display: swap;
+}
+
+/* Vazirmatn Regular */
+@font-face {
+ font-family: "Vazirmatn";
+ src: url("./vazirmatn/Vazirmatn-FD-Regular.woff2") format("woff2");
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
+/* Vazirmatn Medium */
+@font-face {
+ font-family: "Vazirmatn";
+ src: url("./vazirmatn/Vazirmatn-FD-Medium.woff2") format("woff2");
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+}
+
+/* Vazirmatn SemiBold */
+@font-face {
+ font-family: "Vazirmatn";
+ src: url("./vazirmatn/Vazirmatn-FD-SemiBold.woff2") format("woff2");
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
+}
+
+/* Vazirmatn Bold */
+@font-face {
+ font-family: "Vazirmatn";
+ src: url("./vazirmatn/Vazirmatn-FD-Bold.woff2") format("woff2");
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
+}
+
+/* Vazirmatn ExtraBold */
+@font-face {
+ font-family: "Vazirmatn";
+ src: url("./vazirmatn/Vazirmatn-FD-ExtraBold.woff2") format("woff2");
+ font-weight: 800;
+ font-style: normal;
+ font-display: swap;
+}
+
+/* Vazirmatn Black */
+@font-face {
+ font-family: "Vazirmatn";
+ src: url("./vazirmatn/Vazirmatn-FD-Black.woff2") format("woff2");
+ font-weight: 900;
+ font-style: normal;
+ font-display: swap;
+}
diff --git a/src/assets/fonts/vazirmatn/Vazirmatn-FD-Black.woff2 b/src/assets/fonts/vazirmatn/Vazirmatn-FD-Black.woff2
new file mode 100644
index 0000000..251a923
Binary files /dev/null and b/src/assets/fonts/vazirmatn/Vazirmatn-FD-Black.woff2 differ
diff --git a/src/assets/fonts/vazirmatn/Vazirmatn-FD-Bold.woff2 b/src/assets/fonts/vazirmatn/Vazirmatn-FD-Bold.woff2
new file mode 100644
index 0000000..f97f0db
Binary files /dev/null and b/src/assets/fonts/vazirmatn/Vazirmatn-FD-Bold.woff2 differ
diff --git a/src/assets/fonts/vazirmatn/Vazirmatn-FD-ExtraBold.woff2 b/src/assets/fonts/vazirmatn/Vazirmatn-FD-ExtraBold.woff2
new file mode 100644
index 0000000..e2b2d31
Binary files /dev/null and b/src/assets/fonts/vazirmatn/Vazirmatn-FD-ExtraBold.woff2 differ
diff --git a/src/assets/fonts/vazirmatn/Vazirmatn-FD-ExtraLight.woff2 b/src/assets/fonts/vazirmatn/Vazirmatn-FD-ExtraLight.woff2
new file mode 100644
index 0000000..d019c92
Binary files /dev/null and b/src/assets/fonts/vazirmatn/Vazirmatn-FD-ExtraLight.woff2 differ
diff --git a/src/assets/fonts/vazirmatn/Vazirmatn-FD-Light.woff2 b/src/assets/fonts/vazirmatn/Vazirmatn-FD-Light.woff2
new file mode 100644
index 0000000..41d75fb
Binary files /dev/null and b/src/assets/fonts/vazirmatn/Vazirmatn-FD-Light.woff2 differ
diff --git a/src/assets/fonts/vazirmatn/Vazirmatn-FD-Medium.woff2 b/src/assets/fonts/vazirmatn/Vazirmatn-FD-Medium.woff2
new file mode 100644
index 0000000..2721237
Binary files /dev/null and b/src/assets/fonts/vazirmatn/Vazirmatn-FD-Medium.woff2 differ
diff --git a/src/assets/fonts/vazirmatn/Vazirmatn-FD-Regular.woff2 b/src/assets/fonts/vazirmatn/Vazirmatn-FD-Regular.woff2
new file mode 100644
index 0000000..ac7cff8
Binary files /dev/null and b/src/assets/fonts/vazirmatn/Vazirmatn-FD-Regular.woff2 differ
diff --git a/src/assets/fonts/vazirmatn/Vazirmatn-FD-SemiBold.woff2 b/src/assets/fonts/vazirmatn/Vazirmatn-FD-SemiBold.woff2
new file mode 100644
index 0000000..359e57e
Binary files /dev/null and b/src/assets/fonts/vazirmatn/Vazirmatn-FD-SemiBold.woff2 differ
diff --git a/src/assets/fonts/vazirmatn/Vazirmatn-FD-Thin.woff2 b/src/assets/fonts/vazirmatn/Vazirmatn-FD-Thin.woff2
new file mode 100644
index 0000000..d9cfb37
Binary files /dev/null and b/src/assets/fonts/vazirmatn/Vazirmatn-FD-Thin.woff2 differ
diff --git a/src/assets/images/errors/404-dark.png b/src/assets/images/errors/404-dark.png
new file mode 100644
index 0000000..7dcdb72
Binary files /dev/null and b/src/assets/images/errors/404-dark.png differ
diff --git a/src/assets/images/errors/404.png b/src/assets/images/errors/404.png
new file mode 100644
index 0000000..c71d2b7
Binary files /dev/null and b/src/assets/images/errors/404.png differ
diff --git a/src/assets/images/errors/500-dark.png b/src/assets/images/errors/500-dark.png
new file mode 100644
index 0000000..d6433ca
Binary files /dev/null and b/src/assets/images/errors/500-dark.png differ
diff --git a/src/assets/images/errors/500.png b/src/assets/images/errors/500.png
new file mode 100644
index 0000000..1ddfde3
Binary files /dev/null and b/src/assets/images/errors/500.png differ
diff --git a/src/assets/images/errors/auth-dark.png b/src/assets/images/errors/auth-dark.png
new file mode 100644
index 0000000..1f45c36
Binary files /dev/null and b/src/assets/images/errors/auth-dark.png differ
diff --git a/src/assets/images/errors/auth.png b/src/assets/images/errors/auth.png
new file mode 100644
index 0000000..9faa42b
Binary files /dev/null and b/src/assets/images/errors/auth.png differ
diff --git a/src/assets/images/errors/disconnect-dark.png b/src/assets/images/errors/disconnect-dark.png
new file mode 100644
index 0000000..2aff18b
Binary files /dev/null and b/src/assets/images/errors/disconnect-dark.png differ
diff --git a/src/assets/images/errors/disconnect.png b/src/assets/images/errors/disconnect.png
new file mode 100644
index 0000000..8e63d44
Binary files /dev/null and b/src/assets/images/errors/disconnect.png differ
diff --git a/src/assets/images/errors/index.ts b/src/assets/images/errors/index.ts
new file mode 100644
index 0000000..849a17f
--- /dev/null
+++ b/src/assets/images/errors/index.ts
@@ -0,0 +1,23 @@
+import error404Dark from './404-dark.png';
+import error404 from './404.png';
+import error500Dark from './500-dark.png';
+import error500 from './500.png';
+import authBackDark from './auth-dark.png';
+import authBack from './auth.png';
+import disconnectDark from './disconnect-dark.png';
+import disconnect from './disconnect.png';
+import maintenanceDark from './maintenance-dark.png';
+import maintenance from './maintenance.png';
+
+export default {
+ error404,
+ error404Dark,
+ error500,
+ error500Dark,
+ authBack,
+ authBackDark,
+ disconnect,
+ disconnectDark,
+ maintenance,
+ maintenanceDark,
+};
diff --git a/src/assets/images/errors/maintenance-dark.png b/src/assets/images/errors/maintenance-dark.png
new file mode 100644
index 0000000..de19dc4
Binary files /dev/null and b/src/assets/images/errors/maintenance-dark.png differ
diff --git a/src/assets/images/errors/maintenance.png b/src/assets/images/errors/maintenance.png
new file mode 100644
index 0000000..7902e7b
Binary files /dev/null and b/src/assets/images/errors/maintenance.png differ
diff --git a/src/assets/images/index.ts b/src/assets/images/index.ts
new file mode 100644
index 0000000..1d6d6d2
--- /dev/null
+++ b/src/assets/images/index.ts
@@ -0,0 +1,11 @@
+// Export the public URL for static assets so bundlers don't need a loader for binary imports.
+// The Angular CLI / build serves files in `src/assets` at `/assets`.
+import errors from './errors';
+import login from './login.webp';
+import logo from './logo.webp';
+
+export default {
+ logo,
+ login,
+ errors,
+};
diff --git a/src/assets/images/login.png b/src/assets/images/login.png
new file mode 100644
index 0000000..71ce1d5
Binary files /dev/null and b/src/assets/images/login.png differ
diff --git a/src/assets/images/login.webp b/src/assets/images/login.webp
new file mode 100644
index 0000000..6e0ecb5
Binary files /dev/null and b/src/assets/images/login.webp differ
diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png
new file mode 100644
index 0000000..d9b4cf5
Binary files /dev/null and b/src/assets/images/logo.png differ
diff --git a/src/assets/images/logo.webp b/src/assets/images/logo.webp
new file mode 100644
index 0000000..19f9483
Binary files /dev/null and b/src/assets/images/logo.webp differ
diff --git a/src/assets/layout/_core.scss b/src/assets/layout/_core.scss
index 8dee918..0635e06 100644
--- a/src/assets/layout/_core.scss
+++ b/src/assets/layout/_core.scss
@@ -1,24 +1,29 @@
-html {
- height: 100%;
- font-size: 14px;
-}
-
body {
- font-family: 'Lato', sans-serif;
- color: var(--text-color);
- background-color: var(--surface-ground);
- margin: 0;
- padding: 0;
- min-height: 100%;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- line-height: 1.2;
+ color: var(--text-color);
+ background-color: var(--surface-ground);
+ margin: 0;
+ padding: 0;
+ min-height: 100%;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ line-height: 1.2;
}
a {
- text-decoration: none;
+ text-decoration: none;
}
.layout-wrapper {
- min-height: 100vh;
+ min-height: 100vh;
+}
+
+html {
+ scroll-behavior: smooth;
+ font-size: 14px;
+}
+
+@media (max-width: 640px) {
+ html {
+ font-size: 13px;
+ }
}
diff --git a/src/assets/layout/_main.scss b/src/assets/layout/_main.scss
index 162e95c..75831da 100644
--- a/src/assets/layout/_main.scss
+++ b/src/assets/layout/_main.scss
@@ -1,17 +1,19 @@
.layout-main-container {
- display: flex;
- flex-direction: column;
- min-height: 100vh;
- justify-content: space-between;
- padding: 6rem 2rem 0 2rem;
- transition: margin-left var(--layout-section-transition-duration);
+ display: flex;
+ flex-direction: column;
+ // height: 100vh;
+ // overflow: hidden;
+ justify-content: space-between;
+ padding: 6rem 1rem 2rem 2rem;
+ transition: margin-inline-start var(--layout-section-transition-duration);
+ &.hideMenu {
+ margin: 0 !important;
+ transform: translateX(0) !important;
+ padding-inline-start: 2rem !important;
+ }
}
.layout-main {
- flex: 1 1 auto;
- padding-bottom: 2rem;
-}
-
-img {
- max-width: none !important;
+ flex: 1 1 auto;
+ overflow: hidden;
}
diff --git a/src/assets/layout/_menu.scss b/src/assets/layout/_menu.scss
index 3d22fb5..7bf56d1 100644
--- a/src/assets/layout/_menu.scss
+++ b/src/assets/layout/_menu.scss
@@ -1,160 +1,160 @@
-@use 'mixins' as *;
+@use "mixins" as *;
.layout-sidebar {
- position: fixed;
- width: 20rem;
- height: calc(100vh - 8rem);
- z-index: 999;
- overflow-y: auto;
- user-select: none;
- top: 6rem;
- left: 2rem;
- transition:
- transform var(--layout-section-transition-duration),
- left var(--layout-section-transition-duration);
- background-color: var(--surface-overlay);
- border-radius: var(--content-border-radius);
- padding: 0.5rem 1.5rem;
+ position: fixed;
+ width: 20rem;
+ height: calc(100vh - 8rem);
+ z-index: 999;
+ overflow-y: auto;
+ user-select: none;
+ top: 6rem;
+ right: 2rem;
+ transition:
+ transform var(--layout-section-transition-duration),
+ right var(--layout-section-transition-duration);
+ background-color: var(--surface-overlay);
+ border-radius: var(--content-border-radius);
+ padding: 0.5rem 1.5rem;
}
.layout-menu {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+
+ .layout-root-menuitem {
+ > .layout-menuitem-root-text {
+ font-size: 0.857rem;
+ text-transform: uppercase;
+ font-weight: 700;
+ color: var(--text-color);
+ margin: 0.75rem 0;
+ }
+
+ > a {
+ display: none;
+ }
+ }
+
+ a {
+ user-select: none;
+
+ &.active-menuitem {
+ > .layout-submenu-toggler {
+ transform: rotate(-180deg);
+ }
+ }
+ }
+
+ li.active-menuitem {
+ > a {
+ .layout-submenu-toggler {
+ transform: rotate(-180deg);
+ }
+ }
+ }
+
+ ul {
margin: 0;
padding: 0;
list-style-type: none;
- .layout-root-menuitem {
- > .layout-menuitem-root-text {
- font-size: 0.857rem;
- text-transform: uppercase;
- font-weight: 700;
- color: var(--text-color);
- margin: 0.75rem 0;
- }
-
- > a {
- display: none;
- }
- }
-
a {
- user-select: none;
+ display: flex;
+ align-items: center;
+ position: relative;
+ outline: 0 none;
+ color: var(--text-color);
+ cursor: pointer;
+ padding: 0.75rem 1rem;
+ border-radius: var(--content-border-radius);
+ transition:
+ background-color var(--element-transition-duration),
+ box-shadow var(--element-transition-duration);
- &.active-menuitem {
- > .layout-submenu-toggler {
- transform: rotate(-180deg);
- }
- }
- }
+ .layout-menuitem-icon {
+ margin-inline-end: 0.5rem;
+ }
- li.active-menuitem {
- > a {
- .layout-submenu-toggler {
- transform: rotate(-180deg);
- }
- }
+ .layout-submenu-toggler {
+ font-size: 75%;
+ margin-inline-start: auto;
+ transition: transform var(--element-transition-duration);
+ }
+
+ &.active-route {
+ font-weight: 700;
+ color: var(--primary-color);
+ }
+
+ &:hover {
+ background-color: var(--surface-hover);
+ }
+
+ &:focus {
+ @include focused-inset();
+ }
}
ul {
- margin: 0;
- padding: 0;
- list-style-type: none;
+ overflow: hidden;
+ border-radius: var(--content-border-radius);
+ li {
a {
- display: flex;
- align-items: center;
- position: relative;
- outline: 0 none;
- color: var(--text-color);
- cursor: pointer;
- padding: 0.75rem 1rem;
- border-radius: var(--content-border-radius);
- transition:
- background-color var(--element-transition-duration),
- box-shadow var(--element-transition-duration);
-
- .layout-menuitem-icon {
- margin-right: 0.5rem;
- }
-
- .layout-submenu-toggler {
- font-size: 75%;
- margin-left: auto;
- transition: transform var(--element-transition-duration);
- }
-
- &.active-route {
- font-weight: 700;
- color: var(--primary-color);
- }
-
- &:hover {
- background-color: var(--surface-hover);
- }
-
- &:focus {
- @include focused-inset();
- }
+ margin-inline-start: 1rem;
}
- ul {
- overflow: hidden;
- border-radius: var(--content-border-radius);
+ li {
+ a {
+ margin-inline-start: 2rem;
+ }
+
+ li {
+ a {
+ margin-inline-start: 2.5rem;
+ }
li {
+ a {
+ margin-inline-start: 3rem;
+ }
+
+ li {
a {
- margin-left: 1rem;
+ margin-inline-start: 3.5rem;
}
li {
- a {
- margin-left: 2rem;
- }
-
- li {
- a {
- margin-left: 2.5rem;
- }
-
- li {
- a {
- margin-left: 3rem;
- }
-
- li {
- a {
- margin-left: 3.5rem;
- }
-
- li {
- a {
- margin-left: 4rem;
- }
- }
- }
- }
- }
+ a {
+ margin-inline-start: 4rem;
+ }
}
+ }
}
+ }
}
+ }
}
+ }
}
.layout-submenu-enter-from,
.layout-submenu-leave-to {
- max-height: 0;
+ max-height: 0;
}
.layout-submenu-enter-to,
.layout-submenu-leave-from {
- max-height: 1000px;
+ max-height: 1000px;
}
.layout-submenu-leave-active {
- overflow: hidden;
- transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
+ overflow: hidden;
+ transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
}
.layout-submenu-enter-active {
- overflow: hidden;
- transition: max-height 1s ease-in-out;
+ overflow: hidden;
+ transition: max-height 1s ease-in-out;
}
diff --git a/src/assets/layout/_responsive.scss b/src/assets/layout/_responsive.scss
index 561d5f1..f930760 100644
--- a/src/assets/layout/_responsive.scss
+++ b/src/assets/layout/_responsive.scss
@@ -2,8 +2,8 @@
.layout-main,
.landing-wrapper {
width: 1504px;
- margin-left: auto !important;
margin-right: auto !important;
+ margin-left: auto !important;
}
}
@@ -11,21 +11,21 @@
.layout-wrapper {
&.layout-overlay {
.layout-main-container {
- margin-left: 0;
- padding-left: 2rem;
+ margin-inline-start: 0;
+ padding-inline-start: 2rem;
}
.layout-sidebar {
- transform: translateX(-100%);
- left: 0;
+ transform: translateX(100%);
+ right: 0;
top: 0;
height: 100vh;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
- border-right: 1px solid var(--surface-border);
+ border-inline-end: 1px solid var(--surface-border);
transition:
transform 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99),
- left 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
+ right 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
box-shadow:
0px 3px 5px rgba(0, 0, 0, 0.02),
0px 0px 2px rgba(0, 0, 0, 0.05),
@@ -41,18 +41,18 @@
&.layout-static {
.layout-main-container {
- margin-left: 22rem;
+ margin-inline-start: 22rem;
}
&.layout-static-inactive {
.layout-sidebar {
- transform: translateX(-100%);
- left: 0;
+ transform: translateX(100%);
+ right: 0;
}
.layout-main-container {
- margin-left: 0;
- padding-left: 2rem;
+ margin-inline-start: 0;
+ padding-inline-start: 2rem;
}
}
}
@@ -70,13 +70,13 @@
.layout-wrapper {
.layout-main-container {
- margin-left: 0;
- padding-left: 2rem;
+ margin-inline-start: 0;
+ padding-inline-start: 2rem;
}
.layout-sidebar {
- transform: translateX(-100%);
- left: 0;
+ transform: translateX(100%);
+ right: 0;
top: 0;
height: 100vh;
border-top-left-radius: 0;
@@ -90,7 +90,7 @@
display: none;
position: fixed;
top: 0;
- left: 0;
+ right: 0;
z-index: 998;
width: 100%;
height: 100%;
diff --git a/src/assets/layout/_topbar.scss b/src/assets/layout/_topbar.scss
index f5d239c..25ddcc2 100644
--- a/src/assets/layout/_topbar.scss
+++ b/src/assets/layout/_topbar.scss
@@ -1,160 +1,159 @@
-@use 'mixins' as *;
+@use "mixins" as *;
.layout-topbar {
- position: fixed;
- height: 4rem;
- z-index: 997;
- left: 0;
- top: 0;
- width: 100%;
- padding: 0 2rem;
- background-color: var(--surface-card);
- transition: left var(--layout-section-transition-duration);
+ position: fixed;
+ height: 4rem;
+ z-index: 997;
+ right: 0;
+ top: 0;
+ width: 100%;
+ padding: 0 2rem;
+ background-color: var(--surface-card);
+ transition: left var(--layout-section-transition-duration);
+ display: flex;
+ align-items: center;
+
+ .layout-topbar-logo-container {
+ width: 28rem;
display: flex;
align-items: center;
+ }
- .layout-topbar-logo-container {
- width: 20rem;
- display: flex;
- align-items: center;
+ .layout-topbar-logo {
+ display: inline-flex;
+ align-items: center;
+ border-radius: var(--content-border-radius);
+ color: var(--text-color);
+ font-weight: 500;
+ gap: 0.5rem;
+
+ svg {
+ width: 3rem;
}
- .layout-topbar-logo {
- display: inline-flex;
- align-items: center;
- font-size: 1.5rem;
- border-radius: var(--content-border-radius);
- color: var(--text-color);
- font-weight: 500;
- gap: 0.5rem;
+ &:focus-visible {
+ @include focused();
+ }
+ }
- svg {
- width: 3rem;
- }
+ .layout-topbar-action {
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ color: var(--text-color-secondary);
+ border-radius: 50%;
+ width: 2.5rem;
+ height: 2.5rem;
+ color: var(--text-color);
+ transition: background-color var(--element-transition-duration);
+ cursor: pointer;
- &:focus-visible {
- @include focused();
- }
+ &:hover {
+ background-color: var(--surface-hover);
}
- .layout-topbar-action {
- display: inline-flex;
- justify-content: center;
- align-items: center;
- color: var(--text-color-secondary);
- border-radius: 50%;
- width: 2.5rem;
- height: 2.5rem;
- color: var(--text-color);
- transition: background-color var(--element-transition-duration);
- cursor: pointer;
-
- &:hover {
- background-color: var(--surface-hover);
- }
-
- &:focus-visible {
- @include focused();
- }
-
- i {
- font-size: 1.25rem;
- }
-
- span {
- font-size: 1rem;
- display: none;
- }
-
- &.layout-topbar-action-highlight {
- background-color: var(--primary-color);
- color: var(--primary-contrast-color);
- }
+ &:focus-visible {
+ @include focused();
}
- .layout-menu-button {
- margin-right: 0.5rem;
+ i {
+ font-size: 1.25rem;
}
- .layout-topbar-menu-button {
- display: none;
+ span {
+ font-size: 1rem;
+ display: none;
}
- .layout-topbar-actions {
- margin-left: auto;
- display: flex;
- gap: 1rem;
+ &.layout-topbar-action-highlight {
+ background-color: var(--primary-color);
+ color: var(--primary-contrast-color);
}
+ }
- .layout-topbar-menu-content {
- display: flex;
- gap: 1rem;
- }
+ .layout-menu-button {
+ margin-inline-end: 0.5rem;
+ }
- .layout-config-menu {
- display: flex;
- gap: 1rem;
- }
+ .layout-topbar-menu-button {
+ display: none;
+ }
+
+ .layout-topbar-actions {
+ margin-inline-start: auto;
+ display: flex;
+ gap: 1rem;
+ }
+
+ .layout-topbar-menu-content {
+ display: flex;
+ gap: 1rem;
+ }
+
+ .layout-config-menu {
+ display: flex;
+ gap: 1rem;
+ }
}
@media (max-width: 991px) {
- .layout-topbar {
- padding: 0 2rem;
+ .layout-topbar {
+ padding: 0 2rem;
- .layout-topbar-logo-container {
- width: auto;
- }
-
- .layout-menu-button {
- margin-left: 0;
- margin-right: 0.5rem;
- }
-
- .layout-topbar-menu-button {
- display: inline-flex;
- }
-
- .layout-topbar-menu {
- position: absolute;
- background-color: var(--surface-overlay);
- transform-origin: top;
- box-shadow:
- 0px 3px 5px rgba(0, 0, 0, 0.02),
- 0px 0px 2px rgba(0, 0, 0, 0.05),
- 0px 1px 4px rgba(0, 0, 0, 0.08);
- border-radius: var(--content-border-radius);
- padding: 1rem;
- right: 2rem;
- top: 4rem;
- min-width: 15rem;
- border: 1px solid var(--surface-border);
-
- .layout-topbar-menu-content {
- gap: 0.5rem;
- }
-
- .layout-topbar-action {
- display: flex;
- width: 100%;
- height: auto;
- justify-content: flex-start;
- border-radius: var(--content-border-radius);
- padding: 0.5rem 1rem;
-
- i {
- font-size: 1rem;
- margin-right: 0.5rem;
- }
-
- span {
- font-weight: medium;
- display: block;
- }
- }
- }
-
- .layout-topbar-menu-content {
- flex-direction: column;
- }
+ .layout-topbar-logo-container {
+ width: auto;
}
+
+ .layout-menu-button {
+ margin-inline-start: 0;
+ margin-inline-end: 0.5rem;
+ }
+
+ .layout-topbar-menu-button {
+ display: inline-flex;
+ }
+
+ .layout-topbar-menu {
+ position: absolute;
+ background-color: var(--surface-overlay);
+ transform-origin: top;
+ box-shadow:
+ 0px 3px 5px rgba(0, 0, 0, 0.02),
+ 0px 0px 2px rgba(0, 0, 0, 0.05),
+ 0px 1px 4px rgba(0, 0, 0, 0.08);
+ border-radius: var(--content-border-radius);
+ padding: 1rem;
+ left: 2rem;
+ top: 4rem;
+ min-width: 15rem;
+ border: 1px solid var(--surface-border);
+
+ .layout-topbar-menu-content {
+ gap: 0.5rem;
+ }
+
+ .layout-topbar-action {
+ display: flex;
+ width: 100%;
+ height: auto;
+ justify-content: flex-start;
+ border-radius: var(--content-border-radius);
+ padding: 0.5rem 1rem;
+
+ i {
+ font-size: 1rem;
+ margin-inline-end: 0.5rem;
+ }
+
+ span {
+ font-weight: medium;
+ display: block;
+ }
+ }
+ }
+
+ .layout-topbar-menu-content {
+ flex-direction: column;
+ }
+ }
}
diff --git a/src/assets/layout/_typography.scss b/src/assets/layout/_typography.scss
index b17bbc2..1742e9a 100644
--- a/src/assets/layout/_typography.scss
+++ b/src/assets/layout/_typography.scss
@@ -1,68 +1,64 @@
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
- margin: 1.5rem 0 1rem 0;
- font-family: inherit;
- font-weight: 700;
- line-height: 1.5;
- color: var(--text-color);
+@use "../fonts/fonts.scss";
- &:first-child {
- margin-top: 0;
- }
+html {
+ font-family: "Vazirmatn";
+}
+
+body {
+ font-size: 14px;
}
h1 {
- font-size: 2.5rem;
+ font-size: 2.5rem;
}
h2 {
- font-size: 2rem;
+ font-size: 2rem;
}
h3 {
- font-size: 1.75rem;
+ font-size: 1.75rem;
}
h4 {
- font-size: 1.5rem;
+ font-size: 1.5rem;
}
h5 {
- font-size: 1.25rem;
+ font-size: 1.25rem;
}
h6 {
- font-size: 1rem;
+ font-size: 1rem;
}
mark {
- background: #fff8e1;
- padding: 0.25rem 0.4rem;
- border-radius: var(--content-border-radius);
- font-family: monospace;
+ background: #fff8e1;
+ padding: 0.25rem 0.4rem;
+ border-radius: var(--content-border-radius);
+ font-family: monospace;
}
blockquote {
- margin: 1rem 0;
- padding: 0 2rem;
- border-left: 4px solid #90a4ae;
+ margin: 1rem 0;
+ padding: 0 2rem;
+ border-left: 4px solid #90a4ae;
}
hr {
- border-top: solid var(--surface-border);
- border-width: 1px 0 0 0;
- margin: 1rem 0;
+ border-top: solid var(--surface-border);
+ border-width: 1px 0 0 0;
+ margin: 1rem 0;
}
p {
- margin: 0 0 1rem 0;
- line-height: 1.5;
+ line-height: 1.5;
- &:last-child {
- margin-bottom: 0;
- }
+ &:last-child {
+ margin-bottom: 0;
+ }
}
+
+// .p-button-label {
+// font-size: 0.875rem;
+// }
diff --git a/src/assets/layout/_utils.scss b/src/assets/layout/_utils.scss
index 6ccec88..862ab11 100644
--- a/src/assets/layout/_utils.scss
+++ b/src/assets/layout/_utils.scss
@@ -1,25 +1,42 @@
/* Utils */
.clearfix:after {
- content: ' ';
- display: block;
- clear: both;
+ content: " ";
+ display: block;
+ clear: both;
}
.card {
- background: var(--surface-card);
- padding: 2rem;
- margin-bottom: 2rem;
- border-radius: var(--content-border-radius);
+ background: var(--surface-card);
+ padding: 2rem;
+ margin-bottom: 2rem;
+ border-radius: var(--content-border-radius);
- &:last-child {
- margin-bottom: 0;
- }
+ &:last-child {
+ margin-bottom: 0;
+ }
}
.p-toast {
- &.p-toast-top-right,
- &.p-toast-top-left,
- &.p-toast-top-center {
- top: 100px;
- }
+ &.p-toast-top-right,
+ &.p-toast-top-left,
+ &.p-toast-top-center {
+ top: 100px;
+ }
+}
+
+.ltrInput::-webkit-outer-spin-button,
+.ltrInput::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+.ltrInput {
+ -moz-appearance: textfield;
+ text-align: left;
+ direction: ltr;
+}
+
+.rtlPlaceholder::placeholder {
+ text-align: right;
+ direction: rtl;
}
diff --git a/src/assets/layout/variables/_common.scss b/src/assets/layout/variables/_common.scss
index 2a040c2..d6735ee 100644
--- a/src/assets/layout/variables/_common.scss
+++ b/src/assets/layout/variables/_common.scss
@@ -1,20 +1,24 @@
:root {
- --primary-color: var(--p-primary-color);
- --primary-contrast-color: var(--p-primary-contrast-color);
- --text-color: var(--p-text-color);
- --text-color-secondary: var(--p-text-muted-color);
- --surface-border: var(--p-content-border-color);
- --surface-card: var(--p-content-background);
- --surface-hover: var(--p-content-hover-background);
- --surface-overlay: var(--p-overlay-popover-background);
- --transition-duration: var(--p-transition-duration);
- --maskbg: var(--p-mask-background);
- --content-border-radius: var(--p-content-border-radius);
- --layout-section-transition-duration: 0.2s;
- --element-transition-duration: var(--p-transition-duration);
- --focus-ring-width: var(--p-focus-ring-width);
- --focus-ring-style: var(--p-focus-ring-style);
- --focus-ring-color: var(--p-focus-ring-color);
- --focus-ring-offset: var(--p-focus-ring-offset);
- --focus-ring-shadow: var(--p-focus-ring-shadow);
+ --primary-color: var(--p-primary-color);
+ --primary-contrast-color: var(--p-primary-contrast-color);
+ --text-color: var(--p-text-color);
+ --text-color-secondary: var(--p-text-muted-color);
+ --surface-border: var(--p-content-border-color);
+ --surface-card: var(--p-content-background);
+ --surface-hover: var(--p-content-hover-background);
+ --surface-overlay: var(--p-overlay-popover-background);
+ --transition-duration: var(--p-transition-duration);
+ --maskbg: var(--p-mask-background);
+ --content-border-radius: var(--p-content-border-radius);
+ --layout-section-transition-duration: 0.2s;
+ --element-transition-duration: var(--p-transition-duration);
+ --focus-ring-width: var(--p-focus-ring-width);
+ --focus-ring-style: var(--p-focus-ring-style);
+ --focus-ring-color: var(--p-focus-ring-color);
+ --focus-ring-offset: var(--p-focus-ring-offset);
+ --focus-ring-shadow: var(--p-focus-ring-shadow);
+
+ --p-green-500: #1ebc5b !important;
+ // --p-green-500: #28a745;
+ --p-icon-size: 0.875rem !important;
}
diff --git a/src/assets/rtlSupport.scss b/src/assets/rtlSupport.scss
new file mode 100644
index 0000000..6ed91de
--- /dev/null
+++ b/src/assets/rtlSupport.scss
@@ -0,0 +1,49 @@
+.p-breadcrumb-separator {
+ transform: rotate(180deg);
+}
+
+.p-breadcrumb-separator > svg {
+ width: 0.75rem;
+ height: 0.75rem;
+}
+
+.p-datatable-mask {
+ display: none !important;
+}
+
+.p-datatable-thead > tr > th {
+ // font-size: 0.875rem;
+}
+
+input.p-inputtext {
+ // font-size: 0.875rem;
+}
+
+// .p-datatable-table {
+// height: 100%;
+// }
+
+.p-datatable-header {
+ flex-shrink: 0;
+}
+.p-datatable-table-container {
+ flex-grow: 1;
+}
+
+.p-cascadeselect-option-active > .p-cascadeselect-option-list {
+ inset-inline-start: -100% !important;
+}
+
+.formHint .p-message-sm .p-message-text {
+ font-size: 0.875rem;
+}
+
+.p-tree-node-toggle-button {
+ transform: rotateY(180deg);
+}
+
+.layout-root-menuitem li svg {
+ width: 1rem;
+ height: 1rem;
+ margin-inline-end: 0.5rem;
+}
diff --git a/src/assets/styles.scss b/src/assets/styles.scss
index 0b50298..1d52eb5 100644
--- a/src/assets/styles.scss
+++ b/src/assets/styles.scss
@@ -1,5 +1,9 @@
/* You can add global styles to this file, and also import other style files */
-@use './tailwind.css';
-@use './layout/layout.scss';
-@use 'primeicons/primeicons.css';
-@use './demo/demo.scss';
+@use "./tailwind.css";
+// @use "flatpickr-wrap/dist/themes/confetti.css";
+@use "flatpickr-wrap/dist/flatpickr.css";
+@use "./flatpicker.css";
+@use "./layout/layout.scss";
+@use "primeicons/primeicons.css";
+@use "./demo/demo.scss";
+@use "./rtlSupport.scss";
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
new file mode 100644
index 0000000..c42523d
--- /dev/null
+++ b/src/environments/environment.prod.ts
@@ -0,0 +1,14 @@
+// Production environment configuration
+export const environment = {
+ production: true,
+ apiBaseUrl: 'https://api.yourdomain.com',
+ host: 'yourdomain.com',
+ port: 443,
+ apiEndpoints: {
+ auth: '/api/auth',
+ users: '/api/users',
+ // Add more endpoints as needed
+ },
+ enableLogging: false,
+ enableDebug: false,
+};
diff --git a/src/environments/environment.staging.ts b/src/environments/environment.staging.ts
new file mode 100644
index 0000000..5cc17e6
--- /dev/null
+++ b/src/environments/environment.staging.ts
@@ -0,0 +1,14 @@
+// Staging environment configuration
+export const environment = {
+ production: false,
+ apiBaseUrl: 'https://staging-api.yourdomain.com',
+ host: 'staging.yourdomain.com',
+ port: 443,
+ apiEndpoints: {
+ auth: '/api/auth',
+ users: '/api/users',
+ // Add more endpoints as needed
+ },
+ enableLogging: true,
+ enableDebug: true,
+};
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
new file mode 100644
index 0000000..e789966
--- /dev/null
+++ b/src/environments/environment.ts
@@ -0,0 +1,9 @@
+// Development environment configuration
+export const environment = {
+ production: false,
+ apiBaseUrl: 'https://localhost',
+ host: 'localhost',
+ port: 60749,
+ enableLogging: true,
+ enableDebug: true,
+};
diff --git a/src/index.html b/src/index.html
index 7d06e4c..82ca35a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,16 +1,16 @@
-
-
-
- Sakai - PrimeNG
- pos
+
+
diff --git a/src/app/modules/auth/pages/auth.component.ts b/src/app/modules/auth/pages/auth.component.ts
new file mode 100644
index 0000000..16ad78e
--- /dev/null
+++ b/src/app/modules/auth/pages/auth.component.ts
@@ -0,0 +1,82 @@
+import { IAuthResponse, TRoles } from '@/core';
+import { ToastService } from '@/core/services/toast.service';
+import { Component, EventEmitter, inject, Input, Output, signal } from '@angular/core';
+import { Router } from '@angular/router';
+import images from 'src/assets/images';
+import { LoginComponent } from './login/login.component';
+import { ModifyLoginInfoComponent } from './modifyLoginInfo/modify-login-info.component';
+import { OTPComponent } from './otp/otp.component';
+import { SignupComponent } from './signup/signup.component';
+
+type TSteps = 'login' | 'otp' | 'modifyLoginInfo' | 'signup';
+
+@Component({
+ selector: 'app-auth',
+ templateUrl: './auth.component.html',
+ imports: [LoginComponent, OTPComponent, ModifyLoginInfoComponent, SignupComponent],
+})
+export class AuthComponent {
+ @Input() redirectUrl!: string;
+ @Input() loginApiUrl!: string;
+ @Input() role?: TRoles;
+ @Input() defaultStep: TSteps = 'login';
+
+ @Output() submit = new EventEmitter
+ ![background image]()
+
+
+
+
+
+
+ ![امتحانات شبه نهایی سنجش]()
+ به پنل امتحانات شبه نهایی سنجش خوش آمدید.
+
+
+ @if (activeStep() === "login") {
+
+
diff --git a/src/app/shared/components/breadcrumb.component.ts b/src/app/shared/components/breadcrumb.component.ts
new file mode 100644
index 0000000..06f1995
--- /dev/null
+++ b/src/app/shared/components/breadcrumb.component.ts
@@ -0,0 +1,23 @@
+import { BreadcrumbService } from '@/core/services/breadcrumb.service';
+import { Component, inject } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+import { BreadcrumbModule } from 'primeng/breadcrumb';
+import { TooltipModule } from 'primeng/tooltip';
+
+@Component({
+ selector: 'app-breadcrumb',
+ standalone: true,
+ imports: [BreadcrumbModule, TooltipModule],
+ templateUrl: './breadcrumb.component.html',
+ host: { class: 'block w-full relative' },
+})
+export class BreadcrumbComponent {
+ private breadcrumbService = inject(BreadcrumbService);
+
+ get items(): MenuItem[] {
+ return this.breadcrumbService.items.map((item) => ({
+ ...item,
+ label: item.title || '',
+ }));
+ }
+}
diff --git a/src/app/shared/components/card-data.component.html b/src/app/shared/components/card-data.component.html
new file mode 100644
index 0000000..ece8684
--- /dev/null
+++ b/src/app/shared/components/card-data.component.html
@@ -0,0 +1,23 @@
+
+
+
+
+ {{ cardTitle }}
+
+
+
+ +
+
diff --git a/src/app/shared/components/formFooterActions/form-footer-actions.component.ts b/src/app/shared/components/formFooterActions/form-footer-actions.component.ts
new file mode 100644
index 0000000..597f58d
--- /dev/null
+++ b/src/app/shared/components/formFooterActions/form-footer-actions.component.ts
@@ -0,0 +1,25 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Button } from 'primeng/button';
+
+@Component({
+ selector: 'app-form-footer-actions',
+ templateUrl: './form-footer-actions.component.html',
+ imports: [Button],
+})
+export class FormFooterActionsComponent {
+ @Input() submitLabel = 'تایید';
+ @Input() cancelLabel = 'لغو';
+ @Input() loading = false;
+ @Output() onSubmit = new EventEmitter
+
diff --git a/src/app/shared/components/inlineConfirmation/inline-confirmation.component.ts b/src/app/shared/components/inlineConfirmation/inline-confirmation.component.ts
new file mode 100644
index 0000000..d92b6eb
--- /dev/null
+++ b/src/app/shared/components/inlineConfirmation/inline-confirmation.component.ts
@@ -0,0 +1,55 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ConfirmationService } from 'primeng/api';
+import { Badge } from 'primeng/badge';
+import { ConfirmPopup } from 'primeng/confirmpopup';
+
+@Component({
+ selector: 'inline-confirmation',
+ templateUrl: './inline-confirmation.component.html',
+ imports: [ConfirmPopup, Badge],
+ providers: [ConfirmationService],
+})
+export class InlineConfirmationComponent {
+ @Input() value!: boolean;
+ @Input() confirmedMessage?: string = 'اطلاعات تایید شده است';
+ @Input() rejectedMessage?: string = 'اطلاعات تایید نشده است';
+ @Input() loading?: boolean = false;
+ @Input() onConfirmMessage: string = 'آیا از تایید این اطلاعات اطمینان دارید؟';
+ @Input() onRejectMessage: string = 'آیا از رد این اطلاعات اطمینان دارید؟';
+ @Input() confirmationHeader: string = 'تایید تغییر وضعیت';
+ @Input() confirmationIcon: string = 'pi pi-exclamation-triangle';
+ @Input() acceptCTALabel: string = 'بله';
+ @Input() rejectCTALabel: string = 'خیر';
+
+ @Output() onConfirm = new EventEmitter
+ {{ label }}:
+
+ {{ value || "-" }}
+
+
diff --git a/src/app/shared/components/key-value.component/key-value.component.ts b/src/app/shared/components/key-value.component/key-value.component.ts
new file mode 100644
index 0000000..fb550e1
--- /dev/null
+++ b/src/app/shared/components/key-value.component/key-value.component.ts
@@ -0,0 +1,16 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+
+@Component({
+ selector: 'app-key-value',
+ standalone: true,
+ imports: [CommonModule],
+ templateUrl: './key-value.component.html',
+ host: {
+ class: 'w-full block',
+ },
+})
+export class KeyValueComponent {
+ @Input() label!: string;
+ @Input() value?: string = '-';
+}
diff --git a/src/app/shared/components/pageDataList/page-data-list.component.html b/src/app/shared/components/pageDataList/page-data-list.component.html
new file mode 100644
index 0000000..bacaa3a
--- /dev/null
+++ b/src/app/shared/components/pageDataList/page-data-list.component.html
@@ -0,0 +1,139 @@
+
diff --git a/src/app/shared/components/pageDataList/page-data-list.component.ts b/src/app/shared/components/pageDataList/page-data-list.component.ts
new file mode 100644
index 0000000..fb1be86
--- /dev/null
+++ b/src/app/shared/components/pageDataList/page-data-list.component.ts
@@ -0,0 +1,170 @@
+import { PaginatorComponent, UikitCopyComponent, UikitEmptyStateComponent } from '@/uikit';
+import { CommonModule } from '@angular/common';
+import {
+ Component,
+ computed,
+ ContentChild,
+ ElementRef,
+ EventEmitter,
+ Input,
+ Output,
+ Renderer2,
+ signal,
+ TemplateRef,
+} from '@angular/core';
+import { ButtonModule } from 'primeng/button';
+import { DrawerModule } from 'primeng/drawer';
+import { PaginatorModule } from 'primeng/paginator';
+import { SkeletonModule } from 'primeng/skeleton';
+import { TableModule } from 'primeng/table';
+import { TableActionRowComponent } from '../table-action-row.component';
+
+export interface IColumn {
+ field: string;
+ header: string;
+ width?: string;
+ minWidth?: string;
+ canCopy?: boolean;
+ customDataModel?: TemplateRef
+ کپی شد
+
diff --git a/src/app/uikit/copy/copy.component.ts b/src/app/uikit/copy/copy.component.ts
new file mode 100644
index 0000000..c883624
--- /dev/null
+++ b/src/app/uikit/copy/copy.component.ts
@@ -0,0 +1,55 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, ViewChild } from '@angular/core';
+import { PopoverModule } from 'primeng/popover';
+
+@Component({
+ selector: 'uikit-copy',
+ standalone: true,
+ imports: [CommonModule, PopoverModule],
+ templateUrl: './copy.component.html',
+})
+export class UikitCopyComponent {
+ @Input() text: string | null = null;
+ @ViewChild('op') op: any;
+
+ copied = false;
+
+ async copy(event?: Event) {
+ try {
+ const payload = this.text ?? '';
+ if (navigator && navigator.clipboard && payload !== '') {
+ await navigator.clipboard.writeText(payload);
+ this.showCopiedTooltip(event);
+ }
+ } catch (err) {
+ // fallback: try execCommand (older browsers) or ignore
+ try {
+ const textarea = document.createElement('textarea');
+ textarea.value = this.text ?? '';
+ document.body.appendChild(textarea);
+ textarea.select();
+ document.execCommand('copy');
+ document.body.removeChild(textarea);
+ this.showCopiedTooltip(event);
+ } catch (e) {
+ console.error('Copy failed', e);
+ }
+ }
+ }
+
+ private showCopiedTooltip(event?: Event) {
+ this.copied = true;
+ try {
+ this.op?.show(event);
+ } catch (e) {
+ // ignore if popover not available
+ }
+
+ setTimeout(() => {
+ try {
+ this.op?.hide();
+ } catch (_) {}
+ this.copied = false;
+ }, 1400);
+ }
+}
diff --git a/src/app/uikit/datepicker/datepicker.component.html b/src/app/uikit/datepicker/datepicker.component.html
new file mode 100644
index 0000000..e15fe94
--- /dev/null
+++ b/src/app/uikit/datepicker/datepicker.component.html
@@ -0,0 +1,20 @@
+
+
+
+
+ {{ text }}
+
+
+
+
+
+
+ @if (hoursCtrl.value || minutesCtrl.value) {
+
+ مدت زمان آزمون را {{ hoursCtrl.value || 0 }} ساعت و {{ minutesCtrl.value || 0 }} دقیقه انتخاب کردید.
+
+ }
+
+
+ صفحه {{ currentPage }} از {{ totalPages() }}
+
+
diff --git a/src/app/uikit/paginator.component.ts b/src/app/uikit/paginator.component.ts
new file mode 100644
index 0000000..7fc8928
--- /dev/null
+++ b/src/app/uikit/paginator.component.ts
@@ -0,0 +1,36 @@
+import { Component, EventEmitter, Input, Output, signal } from '@angular/core';
+import { ButtonModule } from 'primeng/button';
+
+@Component({
+ selector: 'app-paginator',
+ templateUrl: './paginator.component.html',
+ imports: [ButtonModule],
+})
+export class PaginatorComponent {
+ @Input() totalRecords!: number;
+ @Input() currentPage: number = 1;
+ @Input() perPage: number = 10;
+ @Input() loading: boolean = false;
+ @Output() onChange = new EventEmitter
+
+
+
+ @if (searchedLoading()) {
+
+
+ }
+
+
+ @if (searchedLoading()) {
+
+ {{ foundedMessage(searchedItem()!) }}
+
+ } @else if (control.value!.length === 6 && itemNotFound()) {
+
+ {{ notFoundMessage }}
+
+ }
+
diff --git a/src/app/uikit/searchField/search-field.component.ts b/src/app/uikit/searchField/search-field.component.ts
new file mode 100644
index 0000000..3f799c3
--- /dev/null
+++ b/src/app/uikit/searchField/search-field.component.ts
@@ -0,0 +1,67 @@
+import { Maybe } from '@/core';
+import { Component, EventEmitter, Input, Output, signal } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { InputGroup } from 'primeng/inputgroup';
+import { InputGroupAddon } from 'primeng/inputgroupaddon';
+import { InputTextModule } from 'primeng/inputtext';
+import { Message } from 'primeng/message';
+import { ProgressSpinner } from 'primeng/progressspinner';
+import { Skeleton } from 'primeng/skeleton';
+import { debounceTime, filter, Observable } from 'rxjs';
+import { UikitFieldComponent } from '../uikit-field.component';
+
+@Component({
+ selector: 'uikit-search-field',
+ templateUrl: './search-field.component.html',
+ imports: [
+ UikitFieldComponent,
+ InputGroup,
+ InputGroupAddon,
+ ProgressSpinner,
+ Skeleton,
+ Message,
+ InputTextModule,
+ ReactiveFormsModule,
+ ],
+})
+export class UikitSearchFieldComponent
+
+ } @else if (searchedItem()) {
+
+
+ {{ label }}
+
+
+
+ {{ errors[0] }}
+
+
+ }
+
diff --git a/src/app/uikit/uikit-field.component.ts b/src/app/uikit/uikit-field.component.ts
new file mode 100644
index 0000000..5406c59
--- /dev/null
+++ b/src/app/uikit/uikit-field.component.ts
@@ -0,0 +1,36 @@
+import { FormErrorsService } from '@/core/services/form-errors.service';
+import { CommonModule } from '@angular/common';
+import { Component, Input, inject } from '@angular/core';
+import { AbstractControl } from '@angular/forms';
+import { MessageModule } from 'primeng/message';
+import { UikitLabelComponent } from './uikit-label.component';
+
+type PSize = 'small' | 'normal' | 'large';
+
+@Component({
+ selector: 'uikit-field',
+ standalone: true,
+ imports: [CommonModule, UikitLabelComponent, MessageModule],
+ templateUrl: './uikit-field.component.html',
+})
+export class UikitFieldComponent {
+ @Input() label!: string;
+ @Input() name!: string;
+ @Input() pSize: PSize = 'normal';
+ @Input() className?: string;
+ @Input() invalid?: boolean = false;
+ // accept a FormControl or AbstractControl to display errors for
+ @Input() control?: AbstractControl | null;
+
+ private errorsService = inject(FormErrorsService);
+
+ get showErrors(): boolean {
+ if (!this.control) return !!this.invalid;
+ return !!(this.control.invalid && (this.control.touched || this.control.dirty));
+ }
+
+ get errors(): string[] {
+ if (!this.control) return this.invalid ? ['خطا'] : [];
+ return this.errorsService.getErrors(this.control, this.label).map((m) => m.message);
+ }
+}
diff --git a/src/app/uikit/uikit-label.component.ts b/src/app/uikit/uikit-label.component.ts
new file mode 100644
index 0000000..71c98e0
--- /dev/null
+++ b/src/app/uikit/uikit-label.component.ts
@@ -0,0 +1,35 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+
+type PSize = 'small' | 'normal' | 'large';
+
+@Component({
+ selector: 'uikit-label',
+ standalone: true,
+ imports: [CommonModule],
+ template: `
+
+ `,
+})
+export class UikitLabelComponent {
+ @Input() name?: string;
+ @Input() pSize: PSize = 'normal';
+ @Input() className?: string;
+ @Input() invalid?: boolean;
+
+ private sizeMap: Record