Wire Newbook credentials to settings service
This commit is contained in:
commit
63a5a72fa3
32 changed files with 3386 additions and 0 deletions
99
frontend/src/components/AuthGate.tsx
Normal file
99
frontend/src/components/AuthGate.tsx
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import type { User } from '../types'
|
||||
|
||||
interface Props {
|
||||
children: (user: User) => React.ReactNode
|
||||
}
|
||||
|
||||
const inputStyle: React.CSSProperties = {
|
||||
background: 'var(--navy-dark)', border: '1px solid var(--surface-2)',
|
||||
borderRadius: '6px', color: 'var(--text)', padding: '0.625rem 0.75rem',
|
||||
fontSize: '1rem', width: '100%', outline: 'none',
|
||||
}
|
||||
const btnStyle: React.CSSProperties = {
|
||||
background: 'var(--gold)', color: 'var(--navy-dark)', border: 'none',
|
||||
borderRadius: '6px', padding: '0.625rem', fontSize: '1rem',
|
||||
fontWeight: 600, marginTop: '0.25rem',
|
||||
}
|
||||
|
||||
export function AuthGate({ children }: Props) {
|
||||
const [state, setState] = useState<'checking' | 'authed' | 'login'>('checking')
|
||||
const [user, setUser] = useState<User | null>(null)
|
||||
const [email, setEmail] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [error, setError] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/cashup/api/auth/verify?app=cashup', { credentials: 'include' })
|
||||
.then(async r => {
|
||||
if (r.ok) { setUser(await r.json()); setState('authed') }
|
||||
else setState('login')
|
||||
})
|
||||
.catch(() => setState('login'))
|
||||
}, [])
|
||||
|
||||
async function login(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
setLoading(true)
|
||||
setError('')
|
||||
try {
|
||||
const res = await fetch('/cashup/api/auth/login', {
|
||||
method: 'POST', credentials: 'include',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email, password }),
|
||||
})
|
||||
if (!res.ok) { setError('Invalid email or password'); return }
|
||||
const verify = await fetch('/cashup/api/auth/verify?app=cashup', { credentials: 'include' })
|
||||
if (verify.ok) { setUser(await verify.json()); setState('authed') }
|
||||
else setError("You don't have access to this app.")
|
||||
} catch {
|
||||
setError('Connection error — please try again')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (state === 'checking') {
|
||||
return (
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100dvh' }}>
|
||||
<div style={{ color: 'var(--text-muted)' }}>Loading…</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (state === 'login') {
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex', flexDirection: 'column', alignItems: 'center',
|
||||
justifyContent: 'center', height: '100dvh', padding: '1.5rem',
|
||||
background: 'var(--navy-dark)',
|
||||
}}>
|
||||
<div style={{
|
||||
background: 'var(--navy)', borderRadius: 'var(--radius)',
|
||||
padding: '2rem', width: '100%', maxWidth: '360px',
|
||||
border: '1px solid var(--surface-2)',
|
||||
}}>
|
||||
<h1 style={{ fontSize: '1.4rem', marginBottom: '0.25rem', color: 'var(--gold)' }}>
|
||||
Cash Up
|
||||
</h1>
|
||||
<p style={{ color: 'var(--text-muted)', fontSize: '0.875rem', marginBottom: '1.5rem' }}>
|
||||
{import.meta.env.VITE_HOTEL_NAME}
|
||||
</p>
|
||||
<form onSubmit={login} style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
|
||||
<input type="email" value={email} onChange={e => setEmail(e.target.value)}
|
||||
placeholder="Email" required autoComplete="email" style={inputStyle} />
|
||||
<input type="password" value={password} onChange={e => setPassword(e.target.value)}
|
||||
placeholder="Password" required autoComplete="current-password" style={inputStyle} />
|
||||
{error && <p style={{ color: 'var(--danger)', fontSize: '0.875rem' }}>{error}</p>}
|
||||
<button type="submit" disabled={loading} style={btnStyle}>
|
||||
{loading ? 'Signing in…' : 'Sign in'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return <>{children(user!)}</>
|
||||
}
|
||||
154
frontend/src/components/Layout.tsx
Normal file
154
frontend/src/components/Layout.tsx
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
import { NavLink, useNavigate } from 'react-router-dom'
|
||||
import {
|
||||
Banknote, ClipboardList, BarChart2, Wallet, FileText, Settings, LogOut, ChevronRight,
|
||||
} from 'lucide-react'
|
||||
import type { User } from '../types'
|
||||
|
||||
interface Props {
|
||||
user: User
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
const navItems = [
|
||||
{ to: '/daily', label: 'Daily Cash Up', icon: Banknote },
|
||||
{ to: '/history', label: 'History', icon: ClipboardList },
|
||||
{ to: '/report', label: 'Weekly Report', icon: BarChart2 },
|
||||
{ to: '/floats', label: 'Float Management', icon: Wallet },
|
||||
{ to: '/summary', label: 'Cash Summary', icon: FileText },
|
||||
{ to: '/settings',label: 'Settings', icon: Settings },
|
||||
]
|
||||
|
||||
export function Layout({ user, children }: Props) {
|
||||
const navigate = useNavigate()
|
||||
|
||||
async function logout() {
|
||||
await fetch('/cashup/api/auth/logout', { method: 'POST', credentials: 'include' })
|
||||
navigate('/login', { replace: true })
|
||||
window.location.reload()
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', height: '100dvh', overflow: 'hidden' }}>
|
||||
{/* Sidebar */}
|
||||
<nav style={{
|
||||
width: '220px', flexShrink: 0, background: 'var(--navy)',
|
||||
display: 'flex', flexDirection: 'column', padding: '1rem 0',
|
||||
borderRight: '1px solid var(--surface-2)',
|
||||
}}>
|
||||
<div style={{ padding: '0 1rem 1rem', borderBottom: '1px solid var(--surface-2)' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
|
||||
<Banknote size={20} strokeWidth={1.75} color="var(--gold)" />
|
||||
<span style={{ color: 'var(--gold)', fontWeight: 700, fontSize: '1rem' }}>Cash Up</span>
|
||||
</div>
|
||||
<p style={{ color: 'var(--text-muted)', fontSize: '0.75rem', marginTop: '0.25rem' }}>{user.name}</p>
|
||||
</div>
|
||||
|
||||
<div style={{ flex: 1, padding: '0.5rem 0', overflowY: 'auto' }}>
|
||||
{navItems.map(({ to, label, icon: Icon }) => (
|
||||
<NavLink key={to} to={to} style={({ isActive }) => ({
|
||||
display: 'flex', alignItems: 'center', gap: '0.625rem',
|
||||
padding: '0.625rem 1rem', textDecoration: 'none',
|
||||
color: isActive ? 'var(--gold)' : 'var(--text)',
|
||||
background: isActive ? 'var(--surface)' : 'transparent',
|
||||
borderLeft: isActive ? '2px solid var(--gold)' : '2px solid transparent',
|
||||
fontSize: '0.875rem', transition: 'background 0.15s',
|
||||
})}>
|
||||
<Icon size={15} strokeWidth={1.75} />
|
||||
{label}
|
||||
</NavLink>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div style={{ padding: '0.75rem 1rem', borderTop: '1px solid var(--surface-2)' }}>
|
||||
<button onClick={logout} style={{
|
||||
display: 'flex', alignItems: 'center', gap: '0.5rem',
|
||||
background: 'none', border: 'none', color: 'var(--text-muted)',
|
||||
fontSize: '0.875rem', padding: '0.375rem 0', width: '100%',
|
||||
}}>
|
||||
<LogOut size={14} strokeWidth={1.75} />
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Content */}
|
||||
<main style={{ flex: 1, overflow: 'auto', background: 'var(--body-bg)' }}>
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function PageHeader({ title, subtitle }: { title: string; subtitle?: string }) {
|
||||
return (
|
||||
<div style={{ marginBottom: '1.5rem' }}>
|
||||
<h1 style={{ fontSize: '1.375rem', fontWeight: 700, color: 'var(--text-dark)' }}>{title}</h1>
|
||||
{subtitle && <p style={{ color: 'var(--text-mid)', fontSize: '0.875rem', marginTop: '0.25rem' }}>{subtitle}</p>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function Card({ children, style }: { children: React.ReactNode; style?: React.CSSProperties }) {
|
||||
return (
|
||||
<div style={{
|
||||
background: 'var(--card-bg)', border: '1px solid var(--card-border)',
|
||||
borderRadius: 'var(--radius)', padding: '1.25rem',
|
||||
boxShadow: 'var(--shadow-sm)', ...style,
|
||||
}}>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function Btn({
|
||||
children, onClick, variant = 'primary', disabled, small, type = 'button', style,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
onClick?: () => void
|
||||
variant?: 'primary' | 'secondary' | 'danger' | 'ghost'
|
||||
disabled?: boolean
|
||||
small?: boolean
|
||||
type?: 'button' | 'submit'
|
||||
style?: React.CSSProperties
|
||||
}) {
|
||||
const styles: Record<string, React.CSSProperties> = {
|
||||
primary: { background: 'var(--gold)', color: 'var(--navy-dark)', border: 'none' },
|
||||
secondary: { background: 'var(--card-bg)', color: 'var(--text-dark)', border: '1px solid var(--card-border)' },
|
||||
danger: { background: 'var(--danger)', color: '#fff', border: 'none' },
|
||||
ghost: { background: 'transparent', color: 'var(--text-mid)', border: '1px solid var(--card-border)' },
|
||||
}
|
||||
return (
|
||||
<button
|
||||
type={type}
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
style={{
|
||||
...styles[variant],
|
||||
borderRadius: '6px',
|
||||
padding: small ? '0.35rem 0.75rem' : '0.55rem 1rem',
|
||||
fontSize: small ? '0.8rem' : '0.875rem',
|
||||
fontWeight: 600,
|
||||
opacity: disabled ? 0.5 : 1,
|
||||
cursor: disabled ? 'not-allowed' : 'pointer',
|
||||
...style,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export function StatusBadge({ status }: { status: 'draft' | 'final' }) {
|
||||
const styles = {
|
||||
draft: { background: '#fef9c3', color: '#ca8a04' },
|
||||
final: { background: '#dcfce7', color: '#16a34a' },
|
||||
}
|
||||
return (
|
||||
<span style={{
|
||||
...styles[status], fontSize: '0.75rem', fontWeight: 600,
|
||||
padding: '0.2rem 0.5rem', borderRadius: '4px', textTransform: 'uppercase',
|
||||
}}>
|
||||
{status}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue