Ajaygoel · Ajaygoel · Feb 7, 2026
diff --git a/WebApi Angular Spa Mvc5 UnitOfWork/DemoCargoClix/Content/app.css b/WebApi Angular Spa Mvc5 UnitOfWork/DemoCargoClix/Content/app.css
@@ -6016,4 +6016,16 @@ td.visible-print {
   -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
   -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
   box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-}
+}
+.truck-booking .page-header {
+  margin-top: 20px;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.truck-booking .panel-title {
+  font-weight: 600;
+}
+
+.truck-booking .table > tbody > tr > td {
+  vertical-align: middle;
+}
diff --git a/WebApi Angular Spa Mvc5 UnitOfWork/DemoCargoClix/Controllers/TruckBookingsController.cs b/WebApi Angular Spa Mvc5 UnitOfWork/DemoCargoClix/Controllers/TruckBookingsController.cs
@@ -0,0 +1,107 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Web.Http;
+using App.DemoCargoClix.common;
+using domain.Model;
+
+namespace App.DemoCargoClix.Controllers
+{
+    public class TruckBookingsController : BaseApiController
+    {
+        private static readonly List<Truck> Trucks = new List<Truck>
+        {
+            new Truck
+            {
+                Id = 1,
+                PlateNumber = "TX-1042",
+                Model = "Volvo FH16",
+                CapacityTons = 18.5m,
+                Status = "Available"
+            },
+            new Truck
+            {
+                Id = 2,
+                PlateNumber = "CA-8831",
+                Model = "Freightliner Cascadia",
+                CapacityTons = 16.0m,
+                Status = "Booked"
+            },
+            new Truck
+            {
+                Id = 3,
+                PlateNumber = "NV-5519",
+                Model = "Kenworth T680",
+                CapacityTons = 20.0m,
+                Status = "Available"
+            }
+        };
+
+        private static readonly List<TruckBooking> Bookings = new List<TruckBooking>
+        {
+            new TruckBooking
+            {
+                Id = 1001,
+                TruckId = 2,
+                CustomerName = "Northern Retail Group",
+                PickupLocation = "Phoenix, AZ",
+                DropoffLocation = "Las Vegas, NV",
+                PickupDate = DateTime.Today.AddDays(1),
+                Notes = "Palletized goods, dock 7",
+                Status = "Confirmed"
+            }
+        };
+
+        private static int _nextBookingId = 1002;
+
+        [HttpGet]
+        public IEnumerable<Truck> GetTrucks()
+        {
+            return Trucks;
+        }
+
+        [HttpGet]
+        public IEnumerable<TruckBooking> GetBookings()
+        {
+            return Bookings.OrderByDescending(booking => booking.PickupDate).ToList();
+        }
+
+        [HttpGet]
+        public TruckBooking GetBooking(int id)
+        {
+            return Bookings.FirstOrDefault(booking => booking.Id == id);
+        }
+
+        [HttpPost]
+        public TruckBooking CreateBooking(TruckBookingRequest request)
+        {
+            if (request == null)
+            {
+                return null;
+            }
+
+            var truck = Trucks.FirstOrDefault(candidate => candidate.Id == request.TruckId);
+            if (truck == null || string.Equals(truck.Status, "Booked", StringComparison.OrdinalIgnoreCase))
+            {
+                return null;
+            }
+
+            var booking = new TruckBooking
+            {
+                Id = _nextBookingId++,
+                TruckId = request.TruckId,
+                CustomerName = request.CustomerName,
+                PickupLocation = request.PickupLocation,
+                DropoffLocation = request.DropoffLocation,
+                PickupDate = request.PickupDate,
+                Notes = request.Notes,
+                Status = "Confirmed"
+            };
+
+            Bookings.Add(booking);
+            truck.Status = "Booked";
+
+            return booking;
+        }
+    }
+}
diff --git a/WebApi Angular Spa Mvc5 UnitOfWork/DemoCargoClix/DemoCargoClix.csproj b/WebApi Angular Spa Mvc5 UnitOfWork/DemoCargoClix/DemoCargoClix.csproj
@@ -1066,6 +1066,7 @@
     <Content Include="Views\_Layout.cshtml" />
     <Content Include="Views\_PageStart.cshtml" />
     <Content Include="Views\Bookings.cshtml" />
+    <Content Include="Views\TruckBookings.cshtml" />
     <Content Include="Views\Home.cshtml" />
     <Content Include="Views\Index.cshtml" />
     <Content Include="Views\OnWay.cshtml" />
@@ -1086,6 +1087,7 @@
     <Compile Include="common\BaseApiController.cs" />
     <Compile Include="Controllers\AccountController.cs" />
     <Compile Include="Controllers\BookingsController.cs" />
+    <Compile Include="Controllers\TruckBookingsController.cs" />
     <Compile Include="Global.asax.cs">
       <DependentUpon>Global.asax</DependentUpon>
     </Compile>
@@ -1143,4 +1145,4 @@
   <Target Name="AfterBuild">
   </Target>
   -->
-</Project>
+</Project>
diff --git a/WebApi Angular Spa Mvc5 UnitOfWork/DemoCargoClix/Scripts/app/app.js b/WebApi Angular Spa Mvc5 UnitOfWork/DemoCargoClix/Scripts/app/app.js
@@ -31,7 +31,11 @@ cargoclixApp.config(['$routeProvider',
             templateUrl: '/views/EnterMessage.cshtml',
             controller: 'BookingDetailsSendMessageCtrl'
         }).
+        when('/truck-bookings', {
+            templateUrl: '/views/TruckBookings.cshtml',
+            controller: 'TruckBookingsCtrl'
+        }).
         otherwise({
             templateUrl: '/views/404.cshtml',
         });
-  }]);
+  }]);
diff --git a/WebApi Angular Spa Mvc5 UnitOfWork/DemoCargoClix/Scripts/app/controllers.js b/WebApi Angular Spa Mvc5 UnitOfWork/DemoCargoClix/Scripts/app/controllers.js
@@ -111,6 +111,76 @@ cargoclixAppControllers.controller('BookingDetailsSendMessageCtrl', [
     }
 ]);
 
+// Path: /truck-bookings
+cargoclixAppControllers.controller('TruckBookingsCtrl', [
+    '$scope', '$http', function ($scope, $http) {
+        $scope.$root.title = 'Truck Booking System';
+        $scope.trucks = [];
+        $scope.bookings = [];
+        $scope.booking = {
+            TruckId: '',
+            CustomerName: '',
+            PickupLocation: '',
+            DropoffLocation: '',
+            PickupDate: '',
+            Notes: ''
+        };
+
+        $scope.loadData = function () {
+            $http.get('/api/TruckBookings/GetTrucks').
+                success(function (data) {
+                    $scope.trucks = data || [];
+                }).
+                error(function () {
+                    toastr.error("Unable to load trucks");
+                });
+
+            $http.get('/api/TruckBookings/GetBookings').
+                success(function (data) {
+                    $scope.bookings = data || [];
+                }).
+                error(function () {
+                    toastr.error("Unable to load bookings");
+                });
+        };
+
+        $scope.truckLabel = function (truckId) {
+            var match = null;
+            angular.forEach($scope.trucks, function (truck) {
+                if (truck.Id === truckId) {
+                    match = truck;
+                }
+            });
+
+            return match ? match.Model + ' (' + match.PlateNumber + ')' : 'Truck #' + truckId;
+        };
+
+        $scope.createBooking = function () {
+            $http.post('/api/TruckBookings/CreateBooking', $scope.booking).
+                success(function (data) {
+                    if (data) {
+                        toastr.success("Truck booking confirmed");
+                        $scope.booking = {
+                            TruckId: '',
+                            CustomerName: '',
+                            PickupLocation: '',
+                            DropoffLocation: '',
+                            PickupDate: '',
+                            Notes: ''
+                        };
+                        $scope.loadData();
+                    } else {
+                        toastr.error("Unable to create booking");
+                    }
+                }).
+                error(function () {
+                    toastr.error("Unable to create booking");
+                });
+        };
+
+        $scope.loadData();
+    }
+]);
 
 // Path: /login
 cargoclixAppControllers.controller('LoginCtrl', [
@@ -147,4 +217,4 @@ cargoclixAppControllers.controller('LoginCtrl', [
 cargoclixAppControllers.controller('Error404Ctrl', ['$scope', '$location', function ($scope, $location) {
     $scope.$root.title = 'Error 404: Page Not Found';
 
-}]);
+}]);
diff --git a/WebApi Angular Spa Mvc5 UnitOfWork/DemoCargoClix/Views/TruckBookings.cshtml b/WebApi Angular Spa Mvc5 UnitOfWork/DemoCargoClix/Views/TruckBookings.cshtml
@@ -0,0 +1,111 @@
+<section class="truck-booking" ng-controller="TruckBookingsCtrl">
+    <div class="page-header">
+        <h1>Truck Booking System</h1>
+        <p class="lead">
+            Reserve independent trucks without tying them to specific containers or drivers.
+        </p>
+    </div>
+
+    <div class="row">
+        <div class="col-md-7">
+            <div class="panel panel-default">
+                <div class="panel-heading">
+                    <h3 class="panel-title">Available Trucks</h3>
+                </div>
+                <div class="panel-body">
+                    <table class="table table-striped">
+                        <thead>
+                            <tr>
+                                <th>Truck</th>
+                                <th>Plate</th>
+                                <th>Capacity (tons)</th>
+                                <th>Status</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr ng-repeat="truck in trucks">
+                                <td>{{truck.Model}}</td>
+                                <td>{{truck.PlateNumber}}</td>
+                                <td>{{truck.CapacityTons | number:1}}</td>
+                                <td>
+                                    <span class="label" ng-class="truck.Status === 'Available' ? 'label-success' : 'label-warning'">
+                                        {{truck.Status}}
+                                    </span>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-md-5">
+            <div class="panel panel-primary">
+                <div class="panel-heading">
+                    <h3 class="panel-title">Create a Booking</h3>
+                </div>
+                <div class="panel-body">
+                    <form name="truckBookingForm" ng-submit="createBooking()">
+                        <div class="form-group">
+                            <label for="truckSelect">Truck</label>
+                            <select id="truckSelect" class="form-control" ng-model="booking.TruckId" ng-options="truck.Id as (truck.Model + ' (' + truck.PlateNumber + ')') for truck in trucks" required>
+                                <option value="">Select a truck</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label for="customerName">Customer name</label>
+                            <input id="customerName" class="form-control" type="text" ng-model="booking.CustomerName" placeholder="e.g. Acme Distribution" required />
+                        </div>
+                        <div class="form-group">
+                            <label for="pickupLocation">Pickup location</label>
+                            <input id="pickupLocation" class="form-control" type="text" ng-model="booking.PickupLocation" placeholder="City, State" required />
+                        </div>
+                        <div class="form-group">
+                            <label for="dropoffLocation">Drop-off location</label>
+                            <input id="dropoffLocation" class="form-control" type="text" ng-model="booking.DropoffLocation" placeholder="City, State" required />
+                        </div>
+                        <div class="form-group">
+                            <label for="pickupDate">Pickup date</label>
+                            <input id="pickupDate" class="form-control" type="date" ng-model="booking.PickupDate" required />
+                        </div>
+                        <div class="form-group">
+                            <label for="notes">Notes</label>
+                            <textarea id="notes" class="form-control" rows="3" ng-model="booking.Notes" placeholder="Special handling instructions"></textarea>
+                        </div>
+                        <button class="btn btn-success btn-block" type="submit" ng-disabled="truckBookingForm.$invalid">Confirm booking</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="panel panel-info">
+        <div class="panel-heading">
+            <h3 class="panel-title">Recent Bookings</h3>
+        </div>
+        <div class="panel-body">
+            <table class="table table-bordered">
+                <thead>
+                    <tr>
+                        <th>Booking #</th>
+                        <th>Truck</th>
+                        <th>Customer</th>
+                        <th>Route</th>
+                        <th>Pickup</th>
+                        <th>Status</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr ng-repeat="booking in bookings">
+                        <td>{{booking.Id}}</td>
+                        <td>{{truckLabel(booking.TruckId)}}</td>
+                        <td>{{booking.CustomerName}}</td>
+                        <td>{{booking.PickupLocation}} → {{booking.DropoffLocation}}</td>
+                        <td>{{booking.PickupDate | date:'mediumDate'}}</td>
+                        <td>{{booking.Status}}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</section>
diff --git a/WebApi Angular Spa Mvc5 UnitOfWork/domain/DTO/Truck.cs b/WebApi Angular Spa Mvc5 UnitOfWork/domain/DTO/Truck.cs
@@ -0,0 +1,13 @@
+using System;
+
+namespace domain.Model
+{
+    public class Truck
+    {
+        public int Id { get; set; }
+        public string PlateNumber { get; set; }
+        public string Model { get; set; }
+        public decimal CapacityTons { get; set; }
+        public string Status { get; set; }
+    }
+}
diff --git a/WebApi Angular Spa Mvc5 UnitOfWork/domain/DTO/TruckBooking.cs b/WebApi Angular Spa Mvc5 UnitOfWork/domain/DTO/TruckBooking.cs
@@ -0,0 +1,16 @@
+using System;
+
+namespace domain.Model
+{
+    public class TruckBooking
+    {
+        public int Id { get; set; }
+        public int TruckId { get; set; }
+        public string CustomerName { get; set; }
+        public string PickupLocation { get; set; }
+        public string DropoffLocation { get; set; }
+        public DateTime PickupDate { get; set; }
+        public string Notes { get; set; }
+        public string Status { get; set; }
+    }
+}