christianV/Craze-Data-check
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/Craze-Data-check.git synced 2026-08-03 13:25:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

UI: Implement Maximize mode for tables. Added a 'MAXIMIZE' button to TopBar and an 'X' close button in fullscreen mode. Hides sidebar and header to provide maximum screen space for data tables.

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-04-22 20:38:06 +02:00
parent bf98e4e4ba
commit b5ea911e43
5 changed files with 342 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+44 -21
View File
@@ -523,6 +523,8 @@ export default function App() {
};
}, [appState.data]);
const [isMaximized, setIsMaximized] = useState(false);
if (!session) {
return <LoginPage onLogin={() => {
const stored = getStoredSession();
@@ -534,28 +536,49 @@ export default function App() {
return (
<ColumnsProvider headers={appState.headers}>
<div className="h-screen bg-[#040d1a] text-slate-200 flex flex-col font-sans overflow-hidden">
<TopBar
stats={stats}
activeModule={activeModule}
onExport={handleExport}
onRefresh={() => { setRefreshTrigger(t => t + 1); }}
hasData={appState.data.length > 0}
hasUnsavedChanges={appState.hasUnsavedChanges}
userEmail={session.user.email}
onSignOut={handleSignOut}
canUndo={undoHistory.length > 0}
onUndo={handleUndo}
undoMessage={undoHistory[0]?.message}
undoSteps={undoHistory.length}
pendingCount={Object.keys(pendingRows).length}
pendingChanges={Object.fromEntries(Object.entries(pendingRows).map(([k, v]) => [k, { articleName: (v as any).articleName }]))}
onSaveAll={handleSaveAll}
onRevertRow={handleRevertRow}
isSavingAll={isSavingAll}
/>
{!isMaximized && (
<TopBar
stats={stats}
activeModule={activeModule}
onExport={handleExport}
onRefresh={() => { setRefreshTrigger(t => t + 1); }}
hasData={appState.data.length > 0}
hasUnsavedChanges={appState.hasUnsavedChanges}
userEmail={session.user.email}
onSignOut={handleSignOut}
canUndo={undoHistory.length > 0}
onUndo={handleUndo}
undoMessage={undoHistory[0]?.message}
undoSteps={undoHistory.length}
pendingCount={Object.keys(pendingRows).length}
pendingChanges={Object.fromEntries(Object.entries(pendingRows).map(([k, v]) => [k, { articleName: (v as any).articleName }]))}
onSaveAll={handleSaveAll}
onRevertRow={handleRevertRow}
isSavingAll={isSavingAll}
isMaximized={isMaximized}
onToggleMaximize={() => setIsMaximized(true)}
/>
)}
<div className="flex flex-1 overflow-hidden">
<Sidebar activeModule={activeModule} setActiveModule={setActiveModule} userEmail={session.user.email} />
<main className="flex-1 overflow-auto relative p-6 bg-[#041021]">
{!isMaximized && (
<Sidebar activeModule={activeModule} setActiveModule={setActiveModule} userEmail={session.user.email} />
)}
<main className={cn(
"flex-1 overflow-auto relative bg-[#041021] transition-all duration-300",
isMaximized ? "p-0" : "p-6"
)}>
{isMaximized && (
<button
onClick={() => setIsMaximized(false)}
className="fixed top-4 right-4 z-[100] p-3 bg-slate-800 hover:bg-slate-700 text-slate-400 hover:text-white rounded-full shadow-2xl border border-slate-700 transition-all active:scale-95 group"
title="Exit Fullscreen"
>
<X className="w-6 h-6" />
<span className="absolute right-full mr-2 top-1/2 -translate-y-1/2 px-2 py-1 bg-slate-900 text-xs text-white rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">
Exit Fullscreen
</span>
</button>
)}
{isLoadingDefault ? (
<div className="flex flex-col items-center justify-center h-full text-slate-400">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mb-4"></div>