feat(back-end & ): removed Abstract repository

frontend/src/app/app.routes.ts

@@ -28,6 +28,10 @@ export const routes: Routes = [
       {
         path: '',
         loadChildren: () => import('./features/legal/legal.routes').then(m => m.LEGAL_ROUTES)
+      },
+      {
+        path: 'payment/:orderId',
+        loadComponent: () => import('./features/payment/payment.component').then(m => m.PaymentComponent)
       }
     ]
   }

frontend/src/app/features/payment/payment.component.html

@@ -0,0 +1,21 @@
+<div class="payment-container">
+  <mat-card class="payment-card">
+    <mat-card-header>
+      <mat-icon mat-card-avatar>payment</mat-icon>
+      <mat-card-title>Payment Integration</mat-card-title>
+      <mat-card-subtitle>Order #{{ orderId }}</mat-card-subtitle>
+    </mat-card-header>
+    <mat-card-content>
+      <div class="coming-soon">
+        <h3>Coming Soon</h3>
+        <p>The online payment system is currently under development.</p>
+        <p>Your order has been saved. Please contact us to arrange payment.</p>
+      </div>
+    </mat-card-content>
+    <mat-card-actions align="end">
+      <button mat-raised-button color="primary" (click)="completeOrder()">
+        Simulate Payment Completion
+      </button>
+    </mat-card-actions>
+  </mat-card>
+</div>

frontend/src/app/features/payment/payment.component.scss

@@ -0,0 +1,35 @@
+.payment-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 80vh;
+  padding: 2rem;
+  background-color: #f5f5f5;
+}
+
+.payment-card {
+  max-width: 500px;
+  width: 100%;
+}
+
+.coming-soon {
+  text-align: center;
+  padding: 2rem 0;
+  
+  h3 {
+    margin-bottom: 1rem;
+    color: #555;
+  }
+  
+  p {
+    color: #777;
+    margin-bottom: 0.5rem;
+  }
+}
+
+mat-icon {
+  font-size: 40px;
+  width: 40px;
+  height: 40px;
+  color: #3f51b5;
+}

frontend/src/app/features/payment/payment.component.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+  selector: 'app-payment',
+  standalone: true,
+  imports: [CommonModule, MatButtonModule, MatCardModule, MatIconModule],
+  templateUrl: './payment.component.html',
+  styleUrl: './payment.component.scss'
+})
+export class PaymentComponent implements OnInit {
+  orderId: string | null = null;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router
+  ) {}
+
+  ngOnInit(): void {
+    this.orderId = this.route.snapshot.paramMap.get('orderId');
+  }
+
+  completeOrder(): void {
+    // Simulate payment completion
+    alert('Payment Simulated! Order marked as PAID.');
+    // Here you would call the backend to mark as paid if we had that endpoint ready
+    // For now, redirect home or show success
+    this.router.navigate(['/']);
+  }
+}