Frontend release3

package.json

@@ -20,7 +20,9 @@
     "@angular/router": "^19.2.0",
     "@tailwindcss/postcss": "^4.1.4",
     "chart.js": "^4.4.9",
+    "dotenv": "^16.5.0",
     "jwt-decode": "^4.0.0",
+    "leaflet": "^1.9.4",
     "lucide-angular": "^0.503.0",
     "ng2-charts": "^8.0.0",
     "postcss": "^8.5.3",
@@ -33,7 +35,9 @@
     "@angular-devkit/build-angular": "^19.2.8",
     "@angular/cli": "^19.2.8",
     "@angular/compiler-cli": "^19.2.0",
+    "@types/google.maps": "^3.58.1",
     "@types/jasmine": "~5.1.0",
+    "@types/leaflet": "^1.9.17",
     "jasmine-core": "~5.6.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",

src/app/app.config.ts

@@ -1,14 +1,15 @@
 import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideRouter } from '@angular/router';
-
+import { provideHttpClient } from '@angular/common/http';
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }), 
     provideRouter(routes),
     provideAnimations(),
+    provideHttpClient(),
   ]
 };
 

src/app/app.module.ts

@@ -0,0 +1,9 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideHttpClient(withInterceptorsFromDi())
+  ]
+});

src/app/app.routes.ts

@@ -21,6 +21,13 @@ import { TransactionsComponent } from './components/warehouse-manager-page/trans
 import { TruckTrackingComponent } from './components/warehouse-manager-page/truck-tracking/truck-tracking.component';
 import { VendorOrdersComponent } from './components/warehouse-manager-page/vendor-orders/vendor-orders.component';
 import { SupplierReqSurveyComponent } from './components/warehouse-manager-page/supplier-req-survey/supplier-req-survey.component';
+import {WarehouseComponent} from './components/admin-page/warehouse/warehouse.component';
+import { ProductSectionComponent } from './components/vendor-page/product-section/product-section.component';
+import { CartComponent } from './components/vendor-page/cart/cart.component';
+import { OrderSummaryComponent } from './components/vendor-page/order-summary/order-summary.component';
+import { CartSummaryComponent } from './components/vendor-page/cart-summary/cart-summary.component';
+import { OrdersComponent } from './components/vendor-page/orders/orders.component';
+import { CreateOrderComponent } from './components/vendor-page/create-order/create-order.component';
 
 export const routes: Routes = [
   {
@@ -70,7 +77,9 @@ export const routes: Routes = [
         canActivate: [roleGuard(1)],
         children : [
           { path : '', redirectTo: 'profile', pathMatch: 'full'},
+
           { path : 'profile', component: ProfileComponent, pathMatch: 'full'},
+          { path: 'warehouse', component: WarehouseComponent, pathMatch: 'full' },
           {
             path: 'forecast',
             component: ForecastComponent,
@@ -101,7 +110,14 @@ export const routes: Routes = [
         path : 'vendor',
         canActivate : [roleGuard(4)],
         children : [
-          { path : '', redirectTo: 'profile', pathMatch: 'full'},
+          { path : '', redirectTo: 'product-section', pathMatch: 'full'},
+          {path : 'product-section', component: ProductSectionComponent, pathMatch: 'full'},
+          {path : 'cart', component: CartComponent, pathMatch: 'full'},
+          {path : 'orders', component: OrdersComponent, pathMatch: 'full'}, 
+          {path : 'order-summary', component: OrderSummaryComponent, pathMatch: 'full'},
+          {path : 'cart-summary', component: CartSummaryComponent, pathMatch: 'full'}, 
+          {path : 'create-order', component: CreateOrderComponent, pathMatch: 'full'},
+          { path : 'profile', component: ProfileComponent, pathMatch: 'full'},
           // rest... (modify sidebar.ts as well)
           { path: '**', redirectTo: '', pathMatch: 'full' }
         ]

src/app/components/admin-page/warehouse/warehouse.component.css

@@ -0,0 +1,189 @@
+/* Warehouse Card Styles */
+.warehouse-card {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+  }
+
+  .warehouse-card:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+  }
+
+  /* Gradient Backgrounds */
+  .warehouse-header-gradient {
+    background-image: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%);
+  }
+
+  .inventory-header-gradient {
+    background-image: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+  }
+
+  /* Custom Badge Styles */
+  .custom-badge {
+    border-radius: 9999px;
+    padding: 0.25rem 0.75rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .badge-blue {
+    background-color: rgba(59, 130, 246, 0.1);
+    color: #1e40af;
+  }
+
+  .badge-green {
+    background-color: rgba(16, 185, 129, 0.1);
+    color: #065f46;
+  }
+
+  .badge-amber {
+    background-color: rgba(245, 158, 11, 0.1);
+    color: #92400e;
+  }
+
+  /* Status Indicators */
+  .status-indicator {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    margin-right: 6px;
+  }
+
+  .status-active {
+    background-color: #10b981;
+  }
+
+  .status-inactive {
+    background-color: #ef4444;
+  }
+
+  /* Button Animations */
+  .btn-primary {
+    transition: all 0.2s ease;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .btn-primary:after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 5px;
+    height: 5px;
+    background: rgba(255, 255, 255, 0.5);
+    opacity: 0;
+    border-radius: 100%;
+    transform: scale(1, 1) translate(-50%);
+    transform-origin: 50% 50%;
+  }
+
+  .btn-primary:focus:not(:active)::after {
+    animation: ripple 1s ease-out;
+  }
+
+  @keyframes ripple {
+    0% {
+      transform: scale(0, 0);
+      opacity: 0.5;
+    }
+    20% {
+      transform: scale(25, 25);
+      opacity: 0.3;
+    }
+    100% {
+      opacity: 0;
+      transform: scale(40, 40);
+    }
+  }
+
+  /* Search Input Focus Effect */
+  .search-input:focus {
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
+  }
+
+  /* Table Row Hover Effect */
+  .inventory-row {
+    transition: background-color 0.2s ease;
+  }
+
+  .inventory-row:hover {
+    background-color: rgba(243, 244, 246, 0.8);
+  }
+
+  /* Loading Animation */
+  .loading-spinner {
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  /* Back Button Hover Effect */
+  .back-button {
+    transition: transform 0.2s ease;
+  }
+
+  .back-button:hover {
+    transform: translateX(-3px);
+  }
+
+  /* Responsive Adjustments */
+  @media (max-width: 768px) {
+    .warehouse-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .stats-container {
+      flex-direction: column;
+    }
+
+    .stats-item {
+      margin-bottom: 1rem;
+    }
+  }
+
+  /* Inventory Quantity Tags */
+  .quantity-high {
+    background-color: #d1fae5;
+    color: #065f46;
+  }
+
+  .quantity-medium {
+    background-color: #fef3c7;
+    color: #92400e;
+  }
+
+  .quantity-low {
+    background-color: #fee2e2;
+    color: #b91c1c;
+  }
+
+  /* Page Transitions */
+  .page-enter {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  .page-enter-active {
+    opacity: 1;
+    transform: translateY(0);
+    transition: opacity 300ms, transform 300ms;
+  }
+
+  .page-exit {
+    opacity: 1;
+  }
+
+  .page-exit-active {
+    opacity: 0;
+    transition: opacity 300ms;
+  }