front end for Unioil CMS done.

public/css/bootstrap.min.css

@@ -205,7 +205,7 @@ code,
 kbd,
 pre,
 samp {
-    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
     font-size: 1em
 }
 

public/css/custom.css

@@ -1,9 +1,9 @@
-
 @import url('https://fonts.googleapis.com/css?family=Nova+Slim&display=swap');
 
-body, html {
+body,
+html {
     line-height: 1.8;
-    font-family: 'Roboto', sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
     color: #555e58;
     text-transform: capitalize;
     text-rendering: optimizeLegibility !important;
@@ -14,7 +14,16 @@ body, html {
 }
 
 
-h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4 {
     font-weight: 400;
     line-height: 1.5em;
 }
@@ -43,7 +52,8 @@ button{
     cursor: pointer;
 }
 
-ul, ol {
+ul,
+ol {
     padding: 0;
     margin: 0px;
     list-style: none;
@@ -69,7 +79,8 @@ a:focus {
     font-family: 'Material Icons';
     font-style: normal;
     font-weight: 400;
-  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
+    src: url(https://example.com/MaterialIcons-Regular.eot);
+    /* For IE6-8 */
     src: local('Material Icons'),
         local('MaterialIcons-Regular'),
         url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
@@ -82,7 +93,8 @@ a:focus {
     font-family: 'Material Icons';
     font-weight: normal;
     font-style: normal;
-  font-size: 24px;  /* Preferred icon size */
+    font-size: 24px;
+    /* Preferred icon size */
     display: inline-block;
     line-height: 1;
     text-transform: none;
@@ -146,6 +158,7 @@ a:focus {
     background-color: #eee;
     display: none;
 }
+
 #sidebar::-webkit-scrollbar-thumbs {
     width: 5px;
     border-radius: 10px;
@@ -157,6 +170,7 @@ a:focus {
 #sidebar:hover::-webkit-scrollbar {
     display: block;
 }
+
 #sidebar:hover::-webkit-scrollbar-thumbs {
     display: block;
 }
@@ -284,6 +298,7 @@ a:focus {
     background-color: transparent;
     border: none;
 }
+
 .navbar button span {
     color: #fff;
 }
@@ -432,12 +447,15 @@ a:focus {
 .icon.icon-rose {
     color: #e91e63;
 }
+
 .icon.icon-success {
     color: #4caf50;
 }
+
 .icon.icon-info {
     color: #00bcd4;
 }
+
 .card .card-footer {
     margin: 0 7px 0px;
     padding-top: 10px;
@@ -462,6 +480,7 @@ a:focus {
 .card .card-content .category {
     margin-bottom: 0;
 }
+
 .card .category:not([class*="text-"]) {
     color: #555555;
     font-size: 14px;
@@ -531,12 +550,15 @@ a:focus {
     height: 12px;
     border-radius: 100%;
 }
-.streamline .sl-primary:before, .streamline .sl-primary:last-child:after {
+
+.streamline .sl-primary:before,
+.streamline .sl-primary:last-child:after {
     background-color: #188ae2;
 }
 
 
-.streamline .sl-danger:before, .streamline .sl-danger:last-child:after {
+.streamline .sl-danger:before,
+.streamline .sl-danger:last-child:after {
     background-color: #ff5b5b;
 }
 
@@ -544,7 +566,8 @@ a:focus {
     border-left-color: #10c469;
 }
 
-.streamline .sl-success:before, .streamline .sl-success:last-child:after {
+.streamline .sl-success:before,
+.streamline .sl-success:last-child:after {
     background-color: #10c469;
 }
 
@@ -552,7 +575,8 @@ a:focus {
     border-left-color: #f9c851;
 }
 
-.streamline .sl-warning:before, .streamline .sl-warning:last-child:after {
+.streamline .sl-warning:before,
+.streamline .sl-warning:last-child:after {
     background-color: #f9c851;
 }
 
@@ -561,6 +585,7 @@ a:focus {
 .streamline .sl-danger {
     border-left-color: #ff5b5b;
 }
+
 .streamline .sl-item .sl-content {
     margin-left: 24px;
 }
@@ -627,7 +652,8 @@ footer .copyright {
 
 
 
-#sidebar.show-nav,.body-overlay.show-nav{
+#sidebar.show-nav,
+.body-overlay.show-nav {
     transform: translatex(0%);
     opacity: 1;
     display: block;
@@ -742,6 +768,7 @@ footer .copyright {
         background-color: rgba(0, 0, 0, 0.5);
     }
 }
+
 /*===============small-screen overlay sidebar design media queries==============*/
 
 
@@ -750,6 +777,3 @@ footer .copyright {
 /* ---------------------------------------------------
     MEDIAQUERIES
 ----------------------------------------------------- */
-
-
-

resources/views/pages/add-station.blade.php

@@ -0,0 +1,86 @@
+@extends('layouts.app')
+
+@section('page_title', 'Add Station')
+
+@section('content')
+
+    <div class="card-header border-0 bg-transparent py-2">
+        <h5 class="mb-0 fw-bold text-dark" style="font-size: 1.25rem;">Add New Station</h5>
+    </div>
+    <div class="card-body py-2">
+        <form action="#" method="POST" id="addStationForm">
+            @csrf
+            <div class="mb-2">
+                <label for="stationCode" class="form-label mb-1">Station Code</label>
+                <input type="text" class="form-control form-control-sm" id="stationCode" name="stationCode" required>
+            </div>
+            <div class="mb-2">
+                <label for="stationName" class="form-label mb-1">Station Name</label>
+                <input type="text" class="form-control form-control-sm" id="stationName" name="stationName" required>
+            </div>
+            <div class="mb-2">
+                <label for="stationLocation" class="form-label mb-1">Station Location</label>
+                <input type="text" class="form-control form-control-sm" id="stationLocation" name="stationLocation" required>
+            </div>
+            <div class="mb-2">
+                <label for="mapUrl" class="form-label mb-1">Map URL</label>
+                <input type="url" class="form-control form-control-sm" id="mapUrl" name="mapUrl" required>
+            </div>
+            <div class="mb-2">
+                <label for="latitude" class="form-label mb-1">Latitude</label>
+                <input type="text" class="form-control form-control-sm" id="latitude" name="latitude" required>
+            </div>
+            <div class="mb-2">
+                <label for="longitude" class="form-label mb-1">Longitude</label>
+                <input type="text" class="form-control form-control-sm" id="longitude" name="longitude" required>
+            </div>
+            <div class="mb-2">
+                <label for="contactNumber" class="form-label mb-1">Contact Number</label>
+                <input type="text" class="form-control form-control-sm" id="contactNumber" name="contactNumber" required>
+            </div>
+            <div class="mb-2">
+                <label for="branch" class="form-label mb-1">Branch</label>
+                <input type="text" class="form-control form-control-sm" id="branch" name="branch" required>
+            </div>
+            <div class="d-flex justify-content-end mt-3">
+                <a href="{{ url('station-management') }}" class="btn btn-outline-secondary btn-sm me-2" style="margin-right:5px">Cancel</a>
+                <button type="submit" class="btn btn-primary btn-sm">Add Station</button>
+            </div>
+        </form>
+    </div>
+
+    <style>
+        .card {
+            border-radius: 8px;
+        }
+        .form-control,
+        .form-select {
+            font-size: 0.85rem;
+            border-radius: 4px;
+            padding: 0.375rem 0.75rem;
+        }
+        .form-label {
+            font-weight: 500;
+            font-size: 0.85rem;
+            line-height: 1.2;
+        }
+        .btn-primary {
+            background-color: #E74610;
+            border-color: #E74610;
+            font-size: 0.85rem;
+            padding: 0.375rem 0.75rem;
+        }
+        .btn-primary:hover {
+            background-color: #d63f0e;
+            border-color: #d63f0e;
+        }
+        .btn-outline-secondary {
+            font-size: 0.85rem;
+            padding: 0.375rem 0.75rem;
+        }
+        .form-control-sm,
+        .form-select-sm {
+            height: calc(1.5em + 0.5rem + 2px);
+        }
+    </style>
+@endsection

resources/views/pages/station locator/stations.blade.php

@@ -1,14 +1,81 @@
 @extends('layouts.app')
 
-@section('page_title', 'Station Locator')
+@section('page_title', 'Station Management')
 
 @section('content')
-<div class="card" style="min-height: 500px;">
+    @php
-    <div class="card-header">
+        $stations = [
-        <i class="fa-solid fa-location-dot" style="color:gray;"> Stations</i>
+            [
-    </div>
+                'id' => 1,
-    <div class="card-body">
+                'station_code' => 'ST001',
-        <p>This is the Stations page content.</p>
+                'station_name' => 'North Station',
-    </div>
+                'branch_name' => 'Quezon City Branch',
-</div>
+                'date_created' => '2023-05-01',
+                'created_by' => 'Maryse Howe',
+                'modified_by' => 'Joseph Sazon',
+                'date_modified' => '2023-06-15'
+            ],
+            [
+                'id' => 2,
+                'station_code' => 'ST002',
+                'station_name' => 'East Hub',
+                'branch_name' => 'Pasig Branch',
+                'date_created' => '2023-05-10',
+                'created_by' => 'Graxia Montino',
+                'modified_by' => 'Cine Rosimo',
+                'date_modified' => '2023-07-01'
+            ],
+            [
+                'id' => 3,
+                'station_code' => 'ST003',
+                'station_name' => 'West Terminal',
+                'branch_name' => 'Makati Branch',
+                'date_created' => '2023-06-20',
+                'created_by' => 'Cine Rosimo',
+                'modified_by' => 'Graxia Montino',
+                'date_modified' => '2023-08-05'
+            ],
+            [
+                'id' => 4,
+                'station_code' => 'ST004',
+                'station_name' => 'Central Depot',
+                'branch_name' => 'Manila Branch',
+                'date_created' => '2023-07-05',
+                'created_by' => 'Maryse Howe',
+                'modified_by' => 'Maryse Howe',
+                'date_modified' => '2023-09-10'
+            ],
+            [
+                'id' => 5,
+                'station_code' => 'ST005',
+                'station_name' => 'South Station',
+                'branch_name' => 'Parañaque Branch',
+                'date_created' => '2023-08-15',
+                'created_by' => 'Joseph Sazon',
+                'modified_by' => 'Graxia Montino',
+                'date_modified' => '2023-10-01'
+            ]
+        ];
+    @endphp
+
+    @include('components.table-component', [
+        'pageTitle' => 'Station Management',
+        'data' => $stations,
+        'columns' => [
+            ['name' => 'Station Code', 'key' => 'station_code', 'sortable' => true],
+            ['name' => 'Station Name', 'key' => 'station_name', 'sortable' => true],
+            ['name' => 'Branch Name', 'key' => 'branch_name', 'sortable' => true],
+            ['name' => 'Date Created', 'key' => 'date_created', 'sortable' => true],
+            ['name' => 'Created By', 'key' => 'created_by', 'sortable' => true],
+            ['name' => 'Modified By', 'key' => 'modified_by', 'sortable' => true],
+            ['name' => 'Date Modified', 'key' => 'date_modified', 'sortable' => true]
+        ],
+        'actions' => ['edit', 'view', 'delete'],
+        'showAddButton' => true,
+        'addButtonUrl' => '/add-station',
+        'showCheckboxes' => false,
+        'showBatchDelete' => false,
+        'showEditModal' => true,
+        'showViewModal' => true
+    ])
 @endsection

routes/web.php

@@ -127,3 +127,7 @@ Route::get('/add-branches', function () {
 Route::get('/add-fuels', function () {
     return view('pages.add-fuels');
 })->name('add-fuels');
+
+Route::get('/add-station', function () {
+    return view('pages.add-station');
+})->name('add-station');