Upload 45 files

flare-ui/angular.json

@@ -1,116 +1,116 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "flare-ui": {
-      "projectType": "application",
-      "schematics": {
-        "@schematics/angular:component": {
-          "style": "scss"
-        }
-      },
-      "root": "",
-      "sourceRoot": "src",
-      "prefix": "app",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:browser",
-          "options": {
-            "outputPath": "dist/flare-ui",
-            "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
-            "tsConfig": "tsconfig.app.json",
-            "inlineStyleLanguage": "scss",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
-            "scripts": []
-          },
-          "configurations": {
-            "production": {
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "1mb",
-                  "maximumError": "2mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "4kb",
-                  "maximumError": "8kb"
-                }
-              ],
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
-              "outputHashing": "all"
-            },
-            "development": {
-              "buildOptimizer": false,
-              "optimization": false,
-              "vendorChunk": true,
-              "extractLicenses": false,
-              "sourceMap": true,
-              "namedChunks": true
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "configurations": {
-            "production": {
-              "browserTarget": "flare-ui:build:production"
-            },
-            "development": {
-              "browserTarget": "flare-ui:build:development"
-            }
-          },
-          "defaultConfiguration": "development",
-          "options": {
-            "proxyConfig": "src/proxy.conf.json"
-          }
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "flare-ui:build"
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ],
-            "tsConfig": "tsconfig.spec.json",
-            "inlineStyleLanguage": "scss",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
-            "scripts": []
-          }
-        }
-      }
-    }
-  },
-  "cli": {
-    "analytics": false
-  }
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "flare-ui": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/flare-ui",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "1mb",
+                  "maximumError": "2mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kb",
+                  "maximumError": "8kb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "flare-ui:build:production"
+            },
+            "development": {
+              "browserTarget": "flare-ui:build:development"
+            }
+          },
+          "defaultConfiguration": "development",
+          "options": {
+            "proxyConfig": "src/proxy.conf.json"
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "flare-ui:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
 }

flare-ui/package.json

@@ -1,41 +1,41 @@
-{
-  "name": "flare-ui",
-  "version": "0.1.0",
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build --configuration production",
-    "watch": "ng build --watch --configuration development",
-    "test": "ng test"
-  },
-  "private": true,
-  "dependencies": {
-    "@angular/animations": "^17.0.0",
-    "@angular/cdk": "^17.0.0",
-    "@angular/common": "^17.0.0",
-    "@angular/compiler": "^17.0.0",
-    "@angular/core": "^17.0.0",
-    "@angular/forms": "^17.0.0",
-    "@angular/material": "^17.0.0",
-    "@angular/platform-browser": "^17.0.0",
-    "@angular/platform-browser-dynamic": "^17.0.0",
-    "@angular/router": "^17.0.0",
-    "rxjs": "~7.8.0",
-    "tslib": "^2.3.0",
-    "zone.js": "~0.14.0"
-  },
-  "devDependencies": {
-    "@angular-devkit/build-angular": "^17.0.0",
-    "@angular/cli": "^17.0.0",
-    "@angular/compiler-cli": "^17.0.0",
-    "@types/jasmine": "~5.1.0",
-    "@types/node": "^20.0.0",
-    "jasmine-core": "~5.1.0",
-    "karma": "~6.4.0",
-    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.2.2"
-  }
+{
+  "name": "flare-ui",
+  "version": "0.1.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build --configuration production",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^17.0.0",
+    "@angular/cdk": "^17.0.0",
+    "@angular/common": "^17.0.0",
+    "@angular/compiler": "^17.0.0",
+    "@angular/core": "^17.0.0",
+    "@angular/forms": "^17.0.0",
+    "@angular/material": "^17.0.0",
+    "@angular/platform-browser": "^17.0.0",
+    "@angular/platform-browser-dynamic": "^17.0.0",
+    "@angular/router": "^17.0.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.14.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^17.0.0",
+    "@angular/cli": "^17.0.0",
+    "@angular/compiler-cli": "^17.0.0",
+    "@types/jasmine": "~5.1.0",
+    "@types/node": "^20.0.0",
+    "jasmine-core": "~5.1.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.2.2"
+  }
 }

flare-ui/src/app/app.component.scss

@@ -1,103 +1,103 @@
-// Tab içeriği için padding
-.mat-tab-body-content {
-  padding: 24px;
-}
-
-.app-container {
-  padding: 20px;
-  min-height: 100vh;
-  background-color: #f5f5f5;
-}
-
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-  padding: 15px 20px;
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-
-  h1 {
-    margin: 0;
-    color: #333;
-    font-size: 24px;
-  }
-
-  .header-actions {
-    display: flex;
-    align-items: center;
-    gap: 20px;
-
-    .user-info {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      color: #666;
-
-      mat-icon {
-        font-size: 20px;
-      }
-    }
-
-    button {
-      mat-icon {
-        margin-right: 4px;
-      }
-    }
-  }
-}
-
-.main-content {
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-  overflow: hidden;
-
-  mat-tab-group {
-    ::ng-deep {
-      .mat-tab-header {
-        background-color: #fafafa;
-        border-bottom: 1px solid #e0e0e0;
-      }
-
-      .mat-tab-label {
-        min-width: 120px;
-        opacity: 0.8;
-
-        &.mat-tab-label-active {
-          opacity: 1;
-          font-weight: 500;
-        }
-      }
-
-      .mat-tab-body-wrapper {
-        padding: 24px;
-      }
-    }
-  }
-}
-
-// Responsive adjustments
-@media (max-width: 768px) {
-  .app-container {
-    padding: 10px;
-  }
-
-  .header {
-    flex-direction: column;
-    gap: 15px;
-    text-align: center;
-
-    h1 {
-      font-size: 20px;
-    }
-  }
-
-  .main-content {
-    mat-tab-group ::ng-deep .mat-tab-body-wrapper {
-      padding: 16px;
-    }
-  }
+// Tab içeriği için padding
+.mat-tab-body-content {
+  padding: 24px;
+}
+
+.app-container {
+  padding: 20px;
+  min-height: 100vh;
+  background-color: #f5f5f5;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding: 15px 20px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+
+  h1 {
+    margin: 0;
+    color: #333;
+    font-size: 24px;
+  }
+
+  .header-actions {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+
+    .user-info {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      color: #666;
+
+      mat-icon {
+        font-size: 20px;
+      }
+    }
+
+    button {
+      mat-icon {
+        margin-right: 4px;
+      }
+    }
+  }
+}
+
+.main-content {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  overflow: hidden;
+
+  mat-tab-group {
+    ::ng-deep {
+      .mat-tab-header {
+        background-color: #fafafa;
+        border-bottom: 1px solid #e0e0e0;
+      }
+
+      .mat-tab-label {
+        min-width: 120px;
+        opacity: 0.8;
+
+        &.mat-tab-label-active {
+          opacity: 1;
+          font-weight: 500;
+        }
+      }
+
+      .mat-tab-body-wrapper {
+        padding: 24px;
+      }
+    }
+  }
+}
+
+// Responsive adjustments
+@media (max-width: 768px) {
+  .app-container {
+    padding: 10px;
+  }
+
+  .header {
+    flex-direction: column;
+    gap: 15px;
+    text-align: center;
+
+    h1 {
+      font-size: 20px;
+    }
+  }
+
+  .main-content {
+    mat-tab-group ::ng-deep .mat-tab-body-wrapper {
+      padding: 16px;
+    }
+  }
 }

flare-ui/src/app/app.module.ts

@@ -1,7 +1,7 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { HttpClientModule, provideHttpClient, withInterceptors } from '@angular/common/http';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { HttpClientModule, provideHttpClient, withInterceptors } from '@angular/common/http';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterModule, Routes } from '@angular/router';
 import { authInterceptor } from './interceptors/auth.interceptor';

flare-ui/src/app/services/api.service.ts

@@ -1,259 +1,259 @@
-import { Injectable } from '@angular/core';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { Observable, throwError } from 'rxjs';
-import { catchError, tap } from 'rxjs/operators';
-import { Router } from '@angular/router';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ApiService {
-  private apiUrl = '/api';
-  private tokenKey = 'flare_admin_token';
-  private usernameKey = 'flare_admin_username';
-
-  constructor(
-    private http: HttpClient,
-    private router: Router
-  ) {}
-
-  // ===================== Auth =====================
-  login(username: string, password: string): Observable<any> {
-    return this.http.post(`${this.apiUrl}/login`, { username, password }).pipe(
-      tap((response: any) => {
-        localStorage.setItem(this.tokenKey, response.token);
-        localStorage.setItem(this.usernameKey, response.username);
-      })
-    );
-  }
-
-  logout(): void {
-    localStorage.removeItem(this.tokenKey);
-    localStorage.removeItem(this.usernameKey);
-    this.router.navigate(['/login']);
-  }
-
-  getToken(): string | null {
-    return localStorage.getItem(this.tokenKey);
-  }
-
-  getUsername(): string | null {
-    return localStorage.getItem(this.usernameKey);
-  }
-
-  isAuthenticated(): boolean {
-    return !!this.getToken();
-  }
-
-  private getAuthHeaders(): HttpHeaders {
-    const token = this.getToken();
-    return new HttpHeaders({
-      'Authorization': `Bearer ${token}`,
-      'Content-Type': 'application/json'
-    });
-  }
-
-  // ===================== User =====================
-  changePassword(currentPassword: string, newPassword: string): Observable<any> {
-    return this.http.post(
-      `${this.apiUrl}/change-password`,
-      { current_password: currentPassword, new_password: newPassword },
-      { headers: this.getAuthHeaders() }
-    ).pipe(
-      catchError(this.handleError)
-    );
-  }
-
-  // ===================== Environment =====================
-  getEnvironment(): Observable<any> {
-    return this.http.get(`${this.apiUrl}/environment`, {
-      headers: this.getAuthHeaders()
-    }).pipe(
-      catchError(this.handleError)
-    );
-  }
-
-  updateEnvironment(data: any): Observable<any> {
-    return this.http.put(`${this.apiUrl}/environment`, data, {
-      headers: this.getAuthHeaders()
-    }).pipe(
-      catchError(this.handleError)
-    );
-  }
-
-  // ===================== Projects =====================
-  getProjects(includeDeleted = false): Observable<any[]> {
-    return this.http.get<any[]>(`${this.apiUrl}/projects`, {
-      headers: this.getAuthHeaders(),
-      params: { include_deleted: includeDeleted.toString() }
-    }).pipe(
-      catchError(this.handleError)
-    );
-  }
-
-  createProject(data: any): Observable<any> {
-    return this.http.post(`${this.apiUrl}/projects`, data, {
-      headers: this.getAuthHeaders()
-    }).pipe(
-      catchError(this.handleError)
-    );
-  }
-
-  updateProject(id: number, data: any): Observable<any> {
-    return this.http.put(`${this.apiUrl}/projects/${id}`, data, {
-      headers: this.getAuthHeaders()
-    }).pipe(
-      catchError(this.handleError)
-    );
-  }
-
-  deleteProject(id: number): Observable<any> {
-    return this.http.delete(`${this.apiUrl}/projects/${id}`, {
-      headers: this.getAuthHeaders()
-    }).pipe(
-      catchError(this.handleError)
-    );
-  }
-
-  toggleProject(id: number): Observable<any> {
-    return this.http.patch(`${this.apiUrl}/projects/${id}/toggle`, {}, {
-      headers: this.getAuthHeaders()
-    }).pipe(
-      catchError(this.handleError)
-    );
-  }
-
-  exportProject(id: number): Observable<any> {
-    return this.http.get(`${this.apiUrl}/projects/${id}/export`, {
-      headers: this.getAuthHeaders()
-    }).pipe(
-      catchError(this.handleError)
-    );
-  }
-
-  importProject(data: any): Observable<any> {
-    return this.http.post(`${this.apiUrl}/projects/import`, data, {
-      headers: this.getAuthHeaders()
-    }).pipe(
-      catchError(this.handleError)
-    );
-  }
-
-  // ===================== Versions =====================
-  createVersion(projectId: number, data: any): Observable<any> {
-    return this.http.post(`${this.apiUrl}/projects/${projectId}/versions`, data, {
-      headers: this.getAuthHeaders()
-    }).pipe(
-      catchError(this.handleError)
-    );
-  }
-
-  updateVersion(projectId: number, versionId: number, data: any): Observable<any> {
-    return this.http.put(`${this.apiUrl}/projects/${projectId}/versions/${versionId}`, data, {
-      headers: this.getAuthHeaders()
-    }).pipe(
-      catchError(this.handleError)
-    );
-  }
-
-  deleteVersion(projectId: number, versionId: number): Observable<any> {
-    return this.http.delete(`${this.apiUrl}/projects/${projectId}/versions/${versionId}`, {
-      headers: this.getAuthHeaders()
-    }).pipe(
-      catchError(this.handleError)
-    );
-  }
-
-  publishVersion(projectId: number, versionId: number): Observable<any> {
-    return this.http.post(`${this.apiUrl}/projects/${projectId}/versions/${versionId}/publish`, {}, {
-      headers: this.getAuthHeaders()
-    }).pipe(
-      catchError(this.handleError)
-    );
-  }
-
-  // ===================== APIs =====================
-  getAPIs(includeDeleted = false): Observable<any[]> {
-    return this.http.get<any[]>(`${this.apiUrl}/apis`, {
-      headers: this.getAuthHeaders(),
-      params: { include_deleted: includeDeleted.toString() }
-    }).pipe(
-      catchError(this.handleError)
-    );
-  }
-
-  createAPI(data: any): Observable<any> {
-    return this.http.post(`${this.apiUrl}/apis`, data, {
-      headers: this.getAuthHeaders()
-    }).pipe(
-      catchError(this.handleError)
-    );
-  }
-
-  updateAPI(name: string, data: any): Observable<any> {
-    return this.http.put(`${this.apiUrl}/apis/${name}`, data, {
-      headers: this.getAuthHeaders()
-    }).pipe(
-      catchError(this.handleError)
-    );
-  }
-
-  deleteAPI(name: string): Observable<any> {
-    return this.http.delete(`${this.apiUrl}/apis/${name}`, {
-      headers: this.getAuthHeaders()
-    }).pipe(
-      catchError(this.handleError)
-    );
-  }
-
-  testAPI(data: any): Observable<any> {
-    return this.http.post(`${this.apiUrl}/apis/test`, data, {
-      headers: this.getAuthHeaders()
-    }).pipe(
-      catchError(this.handleError)
-    );
-  }
-
-  // ===================== Tests =====================
-  runTests(testType: string): Observable<any> {
-    return this.http.post(`${this.apiUrl}/test/run-all`, { test_type: testType }, {
-      headers: this.getAuthHeaders()
-    }).pipe(
-      catchError(this.handleError)
-    );
-  }
-
-  // ===================== Activity Log =====================
-  getActivityLog(limit = 50): Observable<any[]> {
-    return this.http.get<any[]>(`${this.apiUrl}/activity-log`, {
-      headers: this.getAuthHeaders(),
-      params: { limit: limit.toString() }
-    }).pipe(
-      catchError(this.handleError)
-    );
-  }
-
-  // ===================== Validation =====================
-  validateRegex(pattern: string, testValue: string): Observable<any> {
-    return this.http.post(`${this.apiUrl}/validate/regex`,
-      { pattern, test_value: testValue },
-      { headers: this.getAuthHeaders() }
-    ).pipe(
-      catchError(this.handleError)
-    );
-  }
-
-  // ===================== Error Handler =====================
-  private handleError(error: any) {
-    console.error('API Error:', error);
-
-    if (error.status === 401) {
-      // Token expired or invalid
-      localStorage.removeItem(this.tokenKey);
-      localStorage.removeItem(this.usernameKey);
-      this.router.navigate(['/login']);
-    }
-
-    return throwError(() => error.error || error);
-  }
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable, throwError } from 'rxjs';
+import { catchError, tap } from 'rxjs/operators';
+import { Router } from '@angular/router';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ApiService {
+  private apiUrl = '/api';
+  private tokenKey = 'flare_admin_token';
+  private usernameKey = 'flare_admin_username';
+
+  constructor(
+    private http: HttpClient,
+    private router: Router
+  ) {}
+
+  // ===================== Auth =====================
+  login(username: string, password: string): Observable<any> {
+    return this.http.post(`${this.apiUrl}/login`, { username, password }).pipe(
+      tap((response: any) => {
+        localStorage.setItem(this.tokenKey, response.token);
+        localStorage.setItem(this.usernameKey, response.username);
+      })
+    );
+  }
+
+  logout(): void {
+    localStorage.removeItem(this.tokenKey);
+    localStorage.removeItem(this.usernameKey);
+    this.router.navigate(['/login']);
+  }
+
+  getToken(): string | null {
+    return localStorage.getItem(this.tokenKey);
+  }
+
+  getUsername(): string | null {
+    return localStorage.getItem(this.usernameKey);
+  }
+
+  isAuthenticated(): boolean {
+    return !!this.getToken();
+  }
+
+  private getAuthHeaders(): HttpHeaders {
+    const token = this.getToken();
+    return new HttpHeaders({
+      'Authorization': `Bearer ${token}`,
+      'Content-Type': 'application/json'
+    });
+  }
+
+  // ===================== User =====================
+  changePassword(currentPassword: string, newPassword: string): Observable<any> {
+    return this.http.post(
+      `${this.apiUrl}/change-password`,
+      { current_password: currentPassword, new_password: newPassword },
+      { headers: this.getAuthHeaders() }
+    ).pipe(
+      catchError(this.handleError)
+    );
+  }
+
+  // ===================== Environment =====================
+  getEnvironment(): Observable<any> {
+    return this.http.get(`${this.apiUrl}/environment`, {
+      headers: this.getAuthHeaders()
+    }).pipe(
+      catchError(this.handleError)
+    );
+  }
+
+  updateEnvironment(data: any): Observable<any> {
+    return this.http.put(`${this.apiUrl}/environment`, data, {
+      headers: this.getAuthHeaders()
+    }).pipe(
+      catchError(this.handleError)
+    );
+  }
+
+  // ===================== Projects =====================
+  getProjects(includeDeleted = false): Observable<any[]> {
+    return this.http.get<any[]>(`${this.apiUrl}/projects`, {
+      headers: this.getAuthHeaders(),
+      params: { include_deleted: includeDeleted.toString() }
+    }).pipe(
+      catchError(this.handleError)
+    );
+  }
+
+  createProject(data: any): Observable<any> {
+    return this.http.post(`${this.apiUrl}/projects`, data, {
+      headers: this.getAuthHeaders()
+    }).pipe(
+      catchError(this.handleError)
+    );
+  }
+
+  updateProject(id: number, data: any): Observable<any> {
+    return this.http.put(`${this.apiUrl}/projects/${id}`, data, {
+      headers: this.getAuthHeaders()
+    }).pipe(
+      catchError(this.handleError)
+    );
+  }
+
+  deleteProject(id: number): Observable<any> {
+    return this.http.delete(`${this.apiUrl}/projects/${id}`, {
+      headers: this.getAuthHeaders()
+    }).pipe(
+      catchError(this.handleError)
+    );
+  }
+
+  toggleProject(id: number): Observable<any> {
+    return this.http.patch(`${this.apiUrl}/projects/${id}/toggle`, {}, {
+      headers: this.getAuthHeaders()
+    }).pipe(
+      catchError(this.handleError)
+    );
+  }
+
+  exportProject(id: number): Observable<any> {
+    return this.http.get(`${this.apiUrl}/projects/${id}/export`, {
+      headers: this.getAuthHeaders()
+    }).pipe(
+      catchError(this.handleError)
+    );
+  }
+
+  importProject(data: any): Observable<any> {
+    return this.http.post(`${this.apiUrl}/projects/import`, data, {
+      headers: this.getAuthHeaders()
+    }).pipe(
+      catchError(this.handleError)
+    );
+  }
+
+  // ===================== Versions =====================
+  createVersion(projectId: number, data: any): Observable<any> {
+    return this.http.post(`${this.apiUrl}/projects/${projectId}/versions`, data, {
+      headers: this.getAuthHeaders()
+    }).pipe(
+      catchError(this.handleError)
+    );
+  }
+
+  updateVersion(projectId: number, versionId: number, data: any): Observable<any> {
+    return this.http.put(`${this.apiUrl}/projects/${projectId}/versions/${versionId}`, data, {
+      headers: this.getAuthHeaders()
+    }).pipe(
+      catchError(this.handleError)
+    );
+  }
+
+  deleteVersion(projectId: number, versionId: number): Observable<any> {
+    return this.http.delete(`${this.apiUrl}/projects/${projectId}/versions/${versionId}`, {
+      headers: this.getAuthHeaders()
+    }).pipe(
+      catchError(this.handleError)
+    );
+  }
+
+  publishVersion(projectId: number, versionId: number): Observable<any> {
+    return this.http.post(`${this.apiUrl}/projects/${projectId}/versions/${versionId}/publish`, {}, {
+      headers: this.getAuthHeaders()
+    }).pipe(
+      catchError(this.handleError)
+    );
+  }
+
+  // ===================== APIs =====================
+  getAPIs(includeDeleted = false): Observable<any[]> {
+    return this.http.get<any[]>(`${this.apiUrl}/apis`, {
+      headers: this.getAuthHeaders(),
+      params: { include_deleted: includeDeleted.toString() }
+    }).pipe(
+      catchError(this.handleError)
+    );
+  }
+
+  createAPI(data: any): Observable<any> {
+    return this.http.post(`${this.apiUrl}/apis`, data, {
+      headers: this.getAuthHeaders()
+    }).pipe(
+      catchError(this.handleError)
+    );
+  }
+
+  updateAPI(name: string, data: any): Observable<any> {
+    return this.http.put(`${this.apiUrl}/apis/${name}`, data, {
+      headers: this.getAuthHeaders()
+    }).pipe(
+      catchError(this.handleError)
+    );
+  }
+
+  deleteAPI(name: string): Observable<any> {
+    return this.http.delete(`${this.apiUrl}/apis/${name}`, {
+      headers: this.getAuthHeaders()
+    }).pipe(
+      catchError(this.handleError)
+    );
+  }
+
+  testAPI(data: any): Observable<any> {
+    return this.http.post(`${this.apiUrl}/apis/test`, data, {
+      headers: this.getAuthHeaders()
+    }).pipe(
+      catchError(this.handleError)
+    );
+  }
+
+  // ===================== Tests =====================
+  runTests(testType: string): Observable<any> {
+    return this.http.post(`${this.apiUrl}/test/run-all`, { test_type: testType }, {
+      headers: this.getAuthHeaders()
+    }).pipe(
+      catchError(this.handleError)
+    );
+  }
+
+  // ===================== Activity Log =====================
+  getActivityLog(limit = 50): Observable<any[]> {
+    return this.http.get<any[]>(`${this.apiUrl}/activity-log`, {
+      headers: this.getAuthHeaders(),
+      params: { limit: limit.toString() }
+    }).pipe(
+      catchError(this.handleError)
+    );
+  }
+
+  // ===================== Validation =====================
+  validateRegex(pattern: string, testValue: string): Observable<any> {
+    return this.http.post(`${this.apiUrl}/validate/regex`,
+      { pattern, test_value: testValue },
+      { headers: this.getAuthHeaders() }
+    ).pipe(
+      catchError(this.handleError)
+    );
+  }
+
+  // ===================== Error Handler =====================
+  private handleError(error: any) {
+    console.error('API Error:', error);
+
+    if (error.status === 401) {
+      // Token expired or invalid
+      localStorage.removeItem(this.tokenKey);
+      localStorage.removeItem(this.usernameKey);
+      this.router.navigate(['/login']);
+    }
+
+    return throwError(() => error.error || error);
+  }
 }

flare-ui/src/main.ts

@@ -1,6 +1,7 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { provideRouter } from '@angular/router';
 import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import { provideAnimations } from '@angular/platform-browser/animations';
 import { AppComponent } from './app/app.component';
 import { routes } from './app/app.routes';
 import { authInterceptor } from './app/interceptors/auth.interceptor';
@@ -10,6 +11,7 @@ bootstrapApplication(AppComponent, {
     provideRouter(routes),
     provideHttpClient(
       withInterceptors([authInterceptor])
-    )
+    ),
+    provideAnimations()
   ]
 });

flare-ui/src/styles.scss

@@ -1,262 +1,262 @@
-@import '@angular/material/prebuilt-themes/indigo-pink.css';
-
-/* Global Styles */
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  font-size: 14px;
-  line-height: 1.5;
-  color: #333;
-  background-color: #f5f5f5;
-}
-
-/* Utility Classes */
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 20px;
-}
-
-.btn {
-  display: inline-block;
-  padding: 8px 16px;
-  font-size: 14px;
-  font-weight: 500;
-  text-align: center;
-  text-decoration: none;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: all 0.3s ease;
-
-  &.btn-primary {
-    background-color: #007bff;
-    color: white;
-
-    &:hover {
-      background-color: #0056b3;
-    }
-  }
-
-  &.btn-secondary {
-    background-color: #6c757d;
-    color: white;
-
-    &:hover {
-      background-color: #545b62;
-    }
-  }
-
-  &.btn-danger {
-    background-color: #dc3545;
-    color: white;
-
-    &:hover {
-      background-color: #c82333;
-    }
-  }
-
-  &:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-}
-
-/* Form Styles */
-.form-group {
-  margin-bottom: 1rem;
-
-  label {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-weight: 500;
-    color: #495057;
-  }
-
-  input,
-  select,
-  textarea {
-    display: block;
-    width: 100%;
-    padding: 0.375rem 0.75rem;
-    font-size: 1rem;
-    line-height: 1.5;
-    color: #495057;
-    background-color: #fff;
-    background-clip: padding-box;
-    border: 1px solid #ced4da;
-    border-radius: 0.25rem;
-    transition: border-color 0.15s ease-in-out;
-
-    &:focus {
-      color: #495057;
-      background-color: #fff;
-      border-color: #80bdff;
-      outline: 0;
-    }
-  }
-
-  textarea {
-    min-height: 100px;
-    resize: vertical;
-  }
-}
-
-/* Table Styles */
-.table {
-  width: 100%;
-  margin-bottom: 1rem;
-  background-color: white;
-  border-collapse: collapse;
-
-  th,
-  td {
-    padding: 0.75rem;
-    text-align: left;
-    border-bottom: 1px solid #dee2e6;
-  }
-
-  th {
-    background-color: #f8f9fa;
-    font-weight: 600;
-    color: #495057;
-  }
-
-  tbody tr:hover {
-    background-color: #f8f9fa;
-  }
-}
-
-/* Card Styles */
-.card {
-  background-color: white;
-  border: 1px solid #dee2e6;
-  border-radius: 0.25rem;
-  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
-  margin-bottom: 1rem;
-
-  .card-header {
-    padding: 0.75rem 1.25rem;
-    background-color: #f8f9fa;
-    border-bottom: 1px solid #dee2e6;
-    font-weight: 600;
-  }
-
-  .card-body {
-    padding: 1.25rem;
-  }
-}
-
-/* Tab Styles */
-.tabs {
-  display: flex;
-  border-bottom: 2px solid #dee2e6;
-  margin-bottom: 1rem;
-
-  .tab {
-    padding: 0.5rem 1rem;
-    cursor: pointer;
-    border: none;
-    background: none;
-    font-weight: 500;
-    color: #6c757d;
-    transition: all 0.3s ease;
-
-    &.active {
-      color: #007bff;
-      border-bottom: 2px solid #007bff;
-      margin-bottom: -2px;
-    }
-
-    &:hover {
-      color: #007bff;
-    }
-  }
-}
-
-/* Alert Styles */
-.alert {
-  padding: 0.75rem 1.25rem;
-  margin-bottom: 1rem;
-  border: 1px solid transparent;
-  border-radius: 0.25rem;
-
-  &.alert-danger {
-    color: #721c24;
-    background-color: #f8d7da;
-    border-color: #f5c6cb;
-  }
-
-  &.alert-success {
-    color: #155724;
-    background-color: #d4edda;
-    border-color: #c3e6cb;
-  }
-}
-
-/* Loading Spinner */
-.spinner {
-  display: inline-block;
-  width: 20px;
-  height: 20px;
-  border: 3px solid rgba(0, 0, 0, 0.1);
-  border-radius: 50%;
-  border-top-color: #007bff;
-  animation: spin 1s ease-in-out infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-/* Dialog/Modal Styles */
-.dialog-backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-.dialog {
-  background-color: white;
-  border-radius: 8px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  max-width: 600px;
-  width: 90%;
-  max-height: 90vh;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-
-  .dialog-header {
-    padding: 1rem 1.5rem;
-    border-bottom: 1px solid #dee2e6;
-    font-size: 1.25rem;
-    font-weight: 600;
-  }
-
-  .dialog-body {
-    padding: 1.5rem;
-    overflow-y: auto;
-    flex: 1;
-  }
-
-  .dialog-footer {
-    padding: 1rem 1.5rem;
-    border-top: 1px solid #dee2e6;
-    display: flex;
-    justify-content: flex-end;
-    gap: 0.5rem;
-  }
+@import '@angular/material/prebuilt-themes/indigo-pink.css';
+
+/* Global Styles */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #333;
+  background-color: #f5f5f5;
+}
+
+/* Utility Classes */
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.btn {
+  display: inline-block;
+  padding: 8px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  text-align: center;
+  text-decoration: none;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &.btn-primary {
+    background-color: #007bff;
+    color: white;
+
+    &:hover {
+      background-color: #0056b3;
+    }
+  }
+
+  &.btn-secondary {
+    background-color: #6c757d;
+    color: white;
+
+    &:hover {
+      background-color: #545b62;
+    }
+  }
+
+  &.btn-danger {
+    background-color: #dc3545;
+    color: white;
+
+    &:hover {
+      background-color: #c82333;
+    }
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+/* Form Styles */
+.form-group {
+  margin-bottom: 1rem;
+
+  label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    color: #495057;
+  }
+
+  input,
+  select,
+  textarea {
+    display: block;
+    width: 100%;
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    color: #495057;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ced4da;
+    border-radius: 0.25rem;
+    transition: border-color 0.15s ease-in-out;
+
+    &:focus {
+      color: #495057;
+      background-color: #fff;
+      border-color: #80bdff;
+      outline: 0;
+    }
+  }
+
+  textarea {
+    min-height: 100px;
+    resize: vertical;
+  }
+}
+
+/* Table Styles */
+.table {
+  width: 100%;
+  margin-bottom: 1rem;
+  background-color: white;
+  border-collapse: collapse;
+
+  th,
+  td {
+    padding: 0.75rem;
+    text-align: left;
+    border-bottom: 1px solid #dee2e6;
+  }
+
+  th {
+    background-color: #f8f9fa;
+    font-weight: 600;
+    color: #495057;
+  }
+
+  tbody tr:hover {
+    background-color: #f8f9fa;
+  }
+}
+
+/* Card Styles */
+.card {
+  background-color: white;
+  border: 1px solid #dee2e6;
+  border-radius: 0.25rem;
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  margin-bottom: 1rem;
+
+  .card-header {
+    padding: 0.75rem 1.25rem;
+    background-color: #f8f9fa;
+    border-bottom: 1px solid #dee2e6;
+    font-weight: 600;
+  }
+
+  .card-body {
+    padding: 1.25rem;
+  }
+}
+
+/* Tab Styles */
+.tabs {
+  display: flex;
+  border-bottom: 2px solid #dee2e6;
+  margin-bottom: 1rem;
+
+  .tab {
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    border: none;
+    background: none;
+    font-weight: 500;
+    color: #6c757d;
+    transition: all 0.3s ease;
+
+    &.active {
+      color: #007bff;
+      border-bottom: 2px solid #007bff;
+      margin-bottom: -2px;
+    }
+
+    &:hover {
+      color: #007bff;
+    }
+  }
+}
+
+/* Alert Styles */
+.alert {
+  padding: 0.75rem 1.25rem;
+  margin-bottom: 1rem;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+
+  &.alert-danger {
+    color: #721c24;
+    background-color: #f8d7da;
+    border-color: #f5c6cb;
+  }
+
+  &.alert-success {
+    color: #155724;
+    background-color: #d4edda;
+    border-color: #c3e6cb;
+  }
+}
+
+/* Loading Spinner */
+.spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 3px solid rgba(0, 0, 0, 0.1);
+  border-radius: 50%;
+  border-top-color: #007bff;
+  animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Dialog/Modal Styles */
+.dialog-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.dialog {
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  max-width: 600px;
+  width: 90%;
+  max-height: 90vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .dialog-header {
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid #dee2e6;
+    font-size: 1.25rem;
+    font-weight: 600;
+  }
+
+  .dialog-body {
+    padding: 1.5rem;
+    overflow-y: auto;
+    flex: 1;
+  }
+
+  .dialog-footer {
+    padding: 1rem 1.5rem;
+    border-top: 1px solid #dee2e6;
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+  }
 }