KoPKB/QMS
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

DONE: add customer pages, implement auth on teller page

Browse Source
This commit is contained in:
ISMAIL MASSERAN
2026-07-21 10:24:14 +08:00
parent 3189e3a1e3
commit a671f7ad5c
48 changed files with 5627 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files
fe/web/teller-app/src/pages/StationIntroPage/StationIntroPage.jsx
+100 -25
View File
@@ -1,73 +1,148 @@
import React, { useState, useEffect } from 'react';
import { Dropdown, Button } from 'react-bootstrap';
import React, { useContext, useEffect, useState } from 'react';
import { Dropdown } from 'react-bootstrap';
import { fetchData } from '../../fetching/Fetch.js';
import 'bootstrap/dist/css/bootstrap.min.css';
import { SERVER_URL } from '../../constants.js';
import { useNavigate } from 'react-router-dom';
import { UserContext } from '../../context/UserContext.jsx';
const StationIntroPage = () => {
const navigate = useNavigate();
const { user } = useContext(UserContext);
const [branches, setBranches] = useState([]);
const [selectedBranch, setSelectedBranch] = useState(null);
const [stations, setStations] = useState([]);
const [selectedStation, setSelectedStation] = useState(null);
const [error, setError] = useState('');
const [loadingBranches, setLoadingBranches] = useState(false);
const [loadingStations, setLoadingStations] = useState(false);
const url = `${ SERVER_URL }/api/v1/`;
const tenantCode = user?.tenantCode;
const url = `${SERVER_URL}/api/v1/`;
useEffect(() => {
fetchData(`${ url }branches/DFLT`, 'GET')
.then(response => response.data)
.then(setBranches)
.catch(console.error)
}, []);
if (!tenantCode) {
setBranches([]);
setError('Missing tenant on your account.');
return;
}
setLoadingBranches(true);
setError('');
fetchData(`${url}branches/${encodeURIComponent(tenantCode)}`, 'GET')
.then(({ data, success }) => {
if (!success) {
setBranches([]);
setError('Could not load branches for your tenant.');
return;
}
setBranches(Array.isArray(data) ? data : []);
if (!data?.length) {
setError(`No branches found for tenant ${tenantCode}.`);
}
})
.catch((err) => {
console.error(err);
setError('Could not load branches.');
})
.finally(() => setLoadingBranches(false));
}, [tenantCode]);
function handleBranchSelect(branch) {
setSelectedBranch(branch)
fetchData(`${ url }stations/DFLT/${ branch.id }`, 'GET')
.then(response => response.data)
.then(setStations)
.catch(console.error)
setSelectedBranch(branch);
setSelectedStation(null);
setStations([]);
setLoadingStations(true);
setError('');
fetchData(`${url}stations/${encodeURIComponent(tenantCode)}/${branch.id}`, 'GET')
.then(({ data, success }) => {
if (!success) {
setStations([]);
setError('Could not load stations for this branch.');
return;
}
setStations(Array.isArray(data) ? data : []);
if (!data?.length) {
setError('No stations found for this branch.');
}
})
.catch((err) => {
console.error(err);
setError('Could not load stations.');
})
.finally(() => setLoadingStations(false));
}
function handleStationSelect(station) {
navigate(`/teller-queue/${ station.id }`)
setSelectedStation(station);
navigate(`/teller-queue/${station.id}`);
}
return (
<div className="text-center mt-5">
<div className="border p-3" style={{ maxWidth: '500px', margin: '0 auto' }}>
<h1 className="mb-4">Select Branch and Station</h1>
<h1 className="mb-2">Select Branch and Station</h1>
{tenantCode ? (
<p className="text-muted mb-4">Tenant: {tenantCode}</p>
) : null}
{error ? <p className="text-danger">{error}</p> : null}
<Dropdown>
<Dropdown.Toggle variant="primary" id="dropdown-branch" style={{ width: '100%' }}>
{selectedBranch ? selectedBranch.name : 'Select Branch'}
<Dropdown.Toggle
variant="primary"
id="dropdown-branch"
style={{ width: '100%' }}
disabled={loadingBranches || branches.length === 0}
>
{loadingBranches
? 'Loading branches…'
: selectedBranch
? selectedBranch.name
: 'Select Branch'}
</Dropdown.Toggle>
<Dropdown.Menu style={{ width: '100%' }}>
{branches.map(branch => (
<Dropdown.Item key={branch.id} onClick={() => handleBranchSelect(branch)}>
{branches.map((branch) => (
<Dropdown.Item
key={branch.id}
onClick={() => handleBranchSelect(branch)}
>
{branch.name}
</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>
{selectedBranch && (
{selectedBranch ? (
<div className="mt-3">
<Dropdown>
<Dropdown.Toggle variant="primary" id="dropdown-station" style={{ width: '100%' }}>
{selectedStation ? selectedStation.name : 'Select Station'}
<Dropdown.Toggle
variant="primary"
id="dropdown-station"
style={{ width: '100%' }}
disabled={loadingStations || stations.length === 0}
>
{loadingStations
? 'Loading stations…'
: selectedStation
? selectedStation.name
: 'Select Station'}
</Dropdown.Toggle>
<Dropdown.Menu style={{ width: '100%' }}>
{stations.map(station => (
<Dropdown.Item key={station.id} onClick={() => handleStationSelect(station)}>
{stations.map((station) => (
<Dropdown.Item
key={station.id}
onClick={() => handleStationSelect(station)}
>
{station.name}
</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>
</div>
)}
) : null}
</div>
</div>
);