added branches and add-branches pages

This commit is contained in:
armiejean 2025-04-16 14:52:40 +08:00
parent c96c4595c6
commit c921660d77
3 changed files with 182 additions and 11 deletions

View File

@ -0,0 +1,83 @@
@extends('layouts.app')
@section('page_title', 'Add Branch')
@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 Branch</h5>
</div>
<div class="row justify-content-center">
<div class="card-body p-3">
<form id="addBranchForm">
<div class="mb-3">
<label for="branchCode" class="form-label">Branch Code</label>
<input type="text" class="form-control" id="branchCode" placeholder="Enter branch code" required>
</div>
<div class="mb-3">
<label for="branchName" class="form-label">Branch Name</label>
<input type="text" class="form-control" id="branchName" placeholder="Enter branch name" required>
</div>
<div class="mb-3">
<label for="details" class="form-label">Details</label>
<textarea class="form-control" id="details" rows="6" placeholder="Enter details" required></textarea>
</div>
<div class="d-flex justify-content-end mt-3">
<button type="button" class="btn btn-outline-secondary me-2" style="margin-right:5px">Cancel</button>
<button type="submit" class="btn btn-primary">Add Branch</button>
</div>
</form>
</div>
</div>
<style>
.card {
border-radius: 5px;
border: 1px solid #dee2e6;
}
.form-label {
font-size: 0.95rem;
}
.form-control,
textarea.form-control {
font-size: 0.9rem;
width: 100%;
}
</style>
<script>
document.getElementById('addBranchForm').addEventListener('submit', function(e) {
e.preventDefault();
const branchCode = document.getElementById('branchCode').value;
const branchName = document.getElementById('branchName').value;
const details = document.getElementById('details').value;
if (!branchCode || !branchName || !details) {
alert('Please fill out all required fields.');
return;
}
const currentDate = new Date().toISOString().split('T')[0]; // e.g., "2025-04-15"
const newBranch = {
id: Date.now(),
branchCode,
branchName,
details,
dateCreated: currentDate,
createdBy: 'Admin',
dateModified: currentDate
};
let branches = JSON.parse(sessionStorage.getItem('branches') || '[]');
branches.push(newBranch);
sessionStorage.setItem('branches', JSON.stringify(branches));
alert('Branch added successfully!');
window.location.href = '/branches';
});
document.querySelector('.btn-outline-secondary').addEventListener('click', function() {
window.location.href = '/branches';
});
</script>
@endsection

View File

@ -1,14 +1,98 @@
@extends('layouts.app') @extends('layouts.app')
@section('page_title', 'Station Locator') @section('page_title', 'Branches')
@section('content') @section('content')
<div class="card" style="min-height: 500px;"> @php
<div class="card-header"> $branches = [
<i class="fa-solid fa-location-dot" style="color:gray;"> Branches</i> [
</div> 'id' => 1,
<div class="card-body"> 'branchCode' => 'BR001',
<p>This is the Branches page content.</p> 'branchName' => 'Main Branch',
</div> 'details' => 'Located at downtown, open 9 AM to 5 PM.',
</div> 'dateCreated' => '2025-01-01',
@endsection 'createdBy' => 'Admin',
'dateModified' => '2025-04-01'
],
[
'id' => 2,
'branchCode' => 'BR002',
'branchName' => 'Westside Branch',
'details' => 'Serves western district, parking available.',
'dateCreated' => '2025-02-01',
'createdBy' => 'Admin',
'dateModified' => '2025-04-10'
],
[
'id' => 3,
'branchCode' => 'BR003',
'branchName' => 'East End Branch',
'details' => 'Newly opened, extended hours.',
'dateCreated' => '2025-03-01',
'createdBy' => 'Admin',
'dateModified' => '2025-03-01'
],
[
'id' => 4,
'branchCode' => 'BR004',
'branchName' => 'North Branch',
'details' => 'Located near industrial area.',
'dateCreated' => '2025-01-15',
'createdBy' => 'Admin',
'dateModified' => '2025-04-05'
],
[
'id' => 5,
'branchCode' => 'BR005',
'branchName' => 'South Branch',
'details' => 'Family-friendly, open weekends.',
'dateCreated' => '2025-02-15',
'createdBy' => 'Admin',
'dateModified' => '2025-02-15'
],
[
'id' => 6,
'branchCode' => 'BR006',
'branchName' => 'Central Branch',
'details' => 'Central location, 24/7 ATM.',
'dateCreated' => '2025-03-15',
'createdBy' => 'Admin',
'dateModified' => '2025-04-12'
]
];
@endphp
@include('components.table-component', [
'pageTitle' => 'Branches',
'data' => $branches,
'columns' => [
['name' => 'Branch Code', 'key' => 'branchCode', 'sortable' => true],
['name' => 'Branch Name', 'key' => 'branchName', 'sortable' => true],
['name' => 'Details', 'key' => 'details', 'sortable' => true],
['name' => 'Date Created', 'key' => 'dateCreated', 'sortable' => true],
['name' => 'Created By', 'key' => 'createdBy', 'sortable' => true],
['name' => 'Date Modified', 'key' => 'dateModified', 'sortable' => true]
],
'allFields' => [
['name' => 'Branch Code', 'key' => 'branchCode', 'type' => 'text', 'required' => true],
['name' => 'Branch Name', 'key' => 'branchName', 'type' => 'text', 'required' => true],
['name' => 'Details', 'key' => 'details', 'type' => 'textarea', 'required' => true]
],
'actions' => ['edit', 'delete'],
'showAddButton' => true,
'addButtonUrl' => '/add-branches',
'showCheckboxes' => false,
'showBatchDelete' => false,
'showEditModal' => true,
'showViewModal' => false
])
<script>
const storedBranches = JSON.parse(sessionStorage.getItem('branches') || '[]');
if (storedBranches.length > 0) {
tableConfig.data = [...tableConfig.data, ...storedBranches];
renderTable();
renderPagination();
}
</script>
@endsection

View File

@ -118,4 +118,8 @@ Route::get('/add-card-types', function () {
Route::get('/add-terms-and-privacy', function () { Route::get('/add-terms-and-privacy', function () {
return view('pages.add-terms-and-privacy'); return view('pages.add-terms-and-privacy');
})->name('add-terms-and-privacy'); })->name('add-terms-and-privacy');
Route::get('/add-branches', function () {
return view('pages.add-branches');
})->name('add-branches');