Add auto-load guest data on login
This commit is contained in:
steinhelge
@@ -1,92 +1,110 @@
|
||||
import { useState } from 'react';
|
||||
import { Card, Form, Button, ProgressBar, ListGroup } from 'react-bootstrap';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Container, Card, Alert, Spinner, ProgressBar } from 'react-bootstrap';
|
||||
import { QRCodeSVG } from 'qrcode.react';
|
||||
import { usePersonByQrCode } from '../../hooks/useQrCode';
|
||||
import { api } from '../../lib/api';
|
||||
|
||||
interface Quota {
|
||||
productName: string;
|
||||
remainingAmount: number;
|
||||
initialAmount: number;
|
||||
}
|
||||
|
||||
interface PersonData {
|
||||
name: string;
|
||||
email: string;
|
||||
qrCode: string;
|
||||
quotas: Quota[];
|
||||
}
|
||||
|
||||
export default function GuestQrPage() {
|
||||
const [qrCode, setQrCode] = useState('');
|
||||
const [showQr, setShowQr] = useState(false);
|
||||
const { data: person } = usePersonByQrCode(qrCode);
|
||||
const [personData, setPersonData] = useState<PersonData | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setShowQr(true);
|
||||
};
|
||||
useEffect(() => {
|
||||
// Auto-load guest's own data on mount
|
||||
const fetchGuestData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError('');
|
||||
|
||||
// Get current user's person data
|
||||
const response = await api.get('/auth/me/person');
|
||||
|
||||
setPersonData(response.data);
|
||||
} catch (err: any) {
|
||||
setError(err.response?.data?.message || 'Failed to load your information. Make sure your account is linked to a person.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchGuestData();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-md-8 col-lg-6">
|
||||
<h1 className="text-center mb-4">Guest View</h1>
|
||||
<Container className="py-4">
|
||||
<h2 className="mb-4">My QR Code & Quotas</h2>
|
||||
|
||||
{!showQr ? (
|
||||
<Card className="shadow-sm">
|
||||
<Card.Body>
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>Enter Your QR Code</Form.Label>
|
||||
<Form.Control
|
||||
type="text"
|
||||
size="lg"
|
||||
value={qrCode}
|
||||
onChange={(e) => setQrCode(e.target.value)}
|
||||
placeholder="Your QR code (GUID)"
|
||||
required
|
||||
/>
|
||||
</Form.Group>
|
||||
<Button variant="primary" type="submit" className="w-100" size="lg">
|
||||
Show My QR Code
|
||||
</Button>
|
||||
</Form>
|
||||
{loading && (
|
||||
<div className="text-center py-5">
|
||||
<Spinner animation="border" role="status">
|
||||
<span className="visually-hidden">Loading...</span>
|
||||
</Spinner>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && <Alert variant="danger">{error}</Alert>}
|
||||
|
||||
{personData && (
|
||||
<>
|
||||
<Card className="mb-4 shadow-sm">
|
||||
<Card.Body className="text-center py-4">
|
||||
<h4 className="mb-3">{personData.name}</h4>
|
||||
{personData.email && <p className="text-muted mb-4">{personData.email}</p>}
|
||||
|
||||
<div className="d-flex justify-content-center mb-3">
|
||||
<div className="p-3 bg-white border rounded">
|
||||
<QRCodeSVG value={personData.qrCode} size={256} level="H" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<small className="text-muted d-block">
|
||||
Show this QR code to staff for scanning
|
||||
</small>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
) : (
|
||||
<Card className="shadow text-center">
|
||||
<Card.Body className="p-4">
|
||||
{person && (
|
||||
<>
|
||||
<h2 className="mb-4">{person.name}</h2>
|
||||
|
||||
<div className="d-flex justify-content-center mb-4">
|
||||
<div className="p-4 bg-white border border-3 rounded">
|
||||
<QRCodeSVG value={qrCode} size={256} />
|
||||
<Card className="shadow-sm">
|
||||
<Card.Header>
|
||||
<h5 className="mb-0">My Quotas</h5>
|
||||
</Card.Header>
|
||||
<Card.Body>
|
||||
{personData.quotas.length === 0 ? (
|
||||
<p className="text-muted mb-0">No quotas assigned</p>
|
||||
) : (
|
||||
<div className="d-grid gap-3">
|
||||
{personData.quotas.map((quota, index) => (
|
||||
<div key={index}>
|
||||
<div className="d-flex justify-content-between mb-2">
|
||||
<strong>{quota.productName}</strong>
|
||||
<span className="text-muted">
|
||||
{quota.remainingAmount} / {quota.initialAmount} remaining
|
||||
</span>
|
||||
</div>
|
||||
<ProgressBar
|
||||
now={(quota.remainingAmount / quota.initialAmount) * 100}
|
||||
variant={quota.remainingAmount > 0 ? 'success' : 'danger'}
|
||||
style={{ height: '8px' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 className="mb-3">Your Quotas</h4>
|
||||
<ListGroup className="text-start">
|
||||
{person.quotas?.map((quota) => (
|
||||
<ListGroup.Item key={quota.productId}>
|
||||
<div className="d-flex justify-content-between align-items-center mb-2">
|
||||
<div>
|
||||
<h6 className="mb-0">{quota.productName}</h6>
|
||||
<small className="text-muted">{quota.productType}</small>
|
||||
</div>
|
||||
<div className="text-end">
|
||||
<h5 className="mb-0 text-primary">{quota.remainingAmount}</h5>
|
||||
<small className="text-muted">of {quota.initialAmount} remaining</small>
|
||||
</div>
|
||||
</div>
|
||||
<ProgressBar
|
||||
now={(quota.remainingAmount / quota.initialAmount) * 100}
|
||||
variant="primary"
|
||||
/>
|
||||
</ListGroup.Item>
|
||||
))}
|
||||
</ListGroup>
|
||||
|
||||
<Button
|
||||
variant="link"
|
||||
onClick={() => setShowQr(false)}
|
||||
className="mt-3"
|
||||
>
|
||||
Enter Different Code
|
||||
</Button>
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Card.Body>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user