Ghassan Yusuf
2a2fac9cdf
Backend: real endpoints for role-permission overview, MQTT broker settings (with live reachability check), and SQLite backup download/restore (new system.manage permission, super-admin only; restore validates the SQLite file header and keeps a pre-restore safety copy). Desktop frontend: Roles (read-only permissions view), MQTT Settings, Backup & Restore wired to those endpoints; plus static AdminLTE-matching shells for Profile, Settings (embeds the real 2FA flow in its Security tab), Invoice, Calendar (FullCalendar), Chat, File Manager, and Projects. Mobile frontend: new frontend/src/styles/mobile.css, a from-scratch design system (purple theme, cards, slide-out sidebar, bottom tab bar) scoped entirely under a .mob-app root and mob- prefixed classes so it can never collide with the desktop Bootstrap/AdminLTE styling. Rebuilt TopBar/ BottomNav, added a new SlideOutNav, and reskinned the Dashboard and Users pages to it with real data.
22 lines
652 B
TypeScript
22 lines
652 B
TypeScript
import { useState } from 'react'
|
|
import { Outlet } from 'react-router-dom'
|
|
import '../../styles/mobile.css'
|
|
import { TopBar } from '../../components/mobile/TopBar'
|
|
import { BottomNav } from '../../components/mobile/BottomNav'
|
|
import { SlideOutNav } from '../../components/mobile/SlideOutNav'
|
|
|
|
export function MobileShell() {
|
|
const [menuOpen, setMenuOpen] = useState(false)
|
|
|
|
return (
|
|
<div className="mob-app">
|
|
<TopBar onMenuClick={() => setMenuOpen(true)} />
|
|
<SlideOutNav open={menuOpen} onClose={() => setMenuOpen(false)} />
|
|
<main className="mob-content">
|
|
<Outlet />
|
|
</main>
|
|
<BottomNav />
|
|
</div>
|
|
)
|
|
}
|