AppLayout.tsx
5.55 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
// vibe_erp main app shell with i18n support.
import { NavLink, Outlet } from 'react-router-dom'
import { useEffect, useState } from 'react'
import { useAuth } from '@/auth/AuthContext'
import { useLocale, useT, AVAILABLE_LOCALES } from '@/i18n/LocaleContext'
import type { MessageKey } from '@/i18n/messages'
import { meta } from '@/api/client'
import type { MetaInfo } from '@/types/api'
interface NavItem {
to: string
labelKey: MessageKey
}
interface NavGroup {
headingKey: MessageKey
items: NavItem[]
}
const NAV: NavGroup[] = [
{
headingKey: 'nav.overview',
items: [{ to: '/', labelKey: 'nav.dashboard' }],
},
{
headingKey: 'nav.catalog',
items: [
{ to: '/items', labelKey: 'nav.items' },
{ to: '/uoms', labelKey: 'nav.uoms' },
{ to: '/partners', labelKey: 'nav.partners' },
],
},
{
headingKey: 'nav.inventory',
items: [
{ to: '/locations', labelKey: 'nav.locations' },
{ to: '/balances', labelKey: 'nav.balances' },
{ to: '/movements', labelKey: 'nav.movements' },
],
},
{
headingKey: 'nav.orders',
items: [
{ to: '/sales-orders', labelKey: 'nav.salesOrders' },
{ to: '/purchase-orders', labelKey: 'nav.purchaseOrders' },
],
},
{
headingKey: 'nav.production',
items: [
{ to: '/work-orders', labelKey: 'nav.workOrders' },
{ to: '/shop-floor', labelKey: 'nav.shopFloor' },
],
},
{
headingKey: 'nav.finance',
items: [
{ to: '/accounts', labelKey: 'nav.accounts' },
{ to: '/journal-entries', labelKey: 'nav.journalEntries' },
],
},
{
headingKey: 'nav.system',
items: [
{ to: '/users', labelKey: 'nav.users' },
{ to: '/roles', labelKey: 'nav.roles' },
],
},
]
export function AppLayout() {
const { username, logout } = useAuth()
const { locale, setLocale } = useLocale()
const t = useT()
const [info, setInfo] = useState<MetaInfo | null>(null)
useEffect(() => {
meta.info().then(setInfo).catch(() => setInfo(null))
}, [])
return (
<div className="flex min-h-screen bg-slate-50 text-slate-900">
{/* ─── Sidebar ──────────────────────────────────────────── */}
<aside className="hidden w-60 flex-shrink-0 border-r border-slate-200 bg-white sm:flex sm:flex-col">
<div className="flex h-14 items-center px-4 border-b border-slate-200">
<span className="text-lg font-bold text-brand-600">vibe_erp</span>
{info && (
<span className="ml-2 text-xs text-slate-400">
{info.implementationVersion}
</span>
)}
</div>
<nav className="flex-1 overflow-y-auto px-3 py-4">
{NAV.map((group) => (
<div key={group.headingKey} className="mb-5">
<div className="px-2 text-xs font-semibold uppercase tracking-wider text-slate-400">
{t(group.headingKey)}
</div>
<ul className="mt-1 space-y-0.5">
{group.items.map((item) => (
<li key={item.to}>
<NavLink
to={item.to}
end={item.to === '/'}
className={({ isActive }) =>
[
'block rounded-md px-2 py-1.5 text-sm transition',
isActive
? 'bg-brand-50 text-brand-700 font-semibold'
: 'text-slate-600 hover:bg-slate-100 hover:text-slate-900',
].join(' ')
}
>
{t(item.labelKey)}
</NavLink>
</li>
))}
</ul>
</div>
))}
</nav>
<div className="border-t border-slate-200 px-3 py-3 text-xs text-slate-400">
{info?.activeProfiles?.length ? (
<div>profiles: {info.activeProfiles.join(', ')}</div>
) : null}
{info?.buildTime ? (
<div>built: {new Date(info.buildTime).toLocaleString()}</div>
) : null}
</div>
</aside>
{/* ─── Main column ─────────────────────────────────────── */}
<div className="flex flex-1 flex-col">
<header className="flex h-14 items-center justify-between border-b border-slate-200 bg-white px-6 sm:justify-end">
<span className="text-lg font-bold text-brand-600 sm:hidden">vibe_erp</span>
<div className="flex items-center gap-3">
<select
value={locale}
onChange={(e) => setLocale(e.target.value as typeof locale)}
className="rounded-md border border-slate-200 bg-slate-50 px-2 py-1 text-xs text-slate-600"
>
{AVAILABLE_LOCALES.map((l) => (
<option key={l.code} value={l.code}>{l.label}</option>
))}
</select>
<span className="text-sm text-slate-500">
{username ? (
<>
{t('label.signedInAs')}{' '}
<span className="font-medium text-slate-700">{username}</span>
</>
) : null}
</span>
<button className="btn-secondary" onClick={logout}>
{t('action.logout')}
</button>
</div>
</header>
<main className="flex-1 overflow-y-auto p-6">
<Outlet />
</main>
</div>
</div>
)
}