feat: initialize Mariavel project with Laravel backend API and React dashboard using DevExtreme DataGrid
This commit is contained in:
Ümit Tunç
+31
-118
@@ -1,122 +1,35 @@
|
||||
import { useState } from 'react'
|
||||
import reactLogo from './assets/react.svg'
|
||||
import viteLogo from './assets/vite.svg'
|
||||
import heroImg from './assets/hero.png'
|
||||
import './App.css'
|
||||
import React, { useMemo, useEffect } from 'react';
|
||||
import { ThemeProvider, CssBaseline, Box } from '@mui/material';
|
||||
import { getTheme } from './theme/theme';
|
||||
import { useAppStore } from './store/useAppStore';
|
||||
import Sidebar from './components/Sidebar';
|
||||
import MainContent from './components/MainContent';
|
||||
import Header from './components/Header';
|
||||
|
||||
function App() {
|
||||
const [count, setCount] = useState(0)
|
||||
const App: React.FC = () => {
|
||||
const darkMode = useAppStore((state) => state.darkMode);
|
||||
const theme = useMemo(() => getTheme(darkMode ? 'dark' : 'light'), [darkMode]);
|
||||
|
||||
useEffect(() => {
|
||||
if (darkMode) {
|
||||
document.body.classList.add('dark');
|
||||
} else {
|
||||
document.body.classList.remove('dark');
|
||||
}
|
||||
}, [darkMode]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<section id="center">
|
||||
<div className="hero">
|
||||
<img src={heroImg} className="base" width="170" height="179" alt="" />
|
||||
<img src={reactLogo} className="framework" alt="React logo" />
|
||||
<img src={viteLogo} className="vite" alt="Vite logo" />
|
||||
</div>
|
||||
<div>
|
||||
<h1>Get started</h1>
|
||||
<p>
|
||||
Edit <code>src/App.tsx</code> and save to test <code>HMR</code>
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="counter"
|
||||
onClick={() => setCount((count) => count + 1)}
|
||||
>
|
||||
Count is {count}
|
||||
</button>
|
||||
</section>
|
||||
<ThemeProvider theme={theme}>
|
||||
<CssBaseline />
|
||||
<Box sx={{ display: 'flex', height: '100vh', overflow: 'hidden' }}>
|
||||
<Sidebar />
|
||||
<Box sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column' }}>
|
||||
<Header />
|
||||
<MainContent />
|
||||
</Box>
|
||||
</Box>
|
||||
</ThemeProvider>
|
||||
);
|
||||
};
|
||||
|
||||
<div className="ticks"></div>
|
||||
|
||||
<section id="next-steps">
|
||||
<div id="docs">
|
||||
<svg className="icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#documentation-icon"></use>
|
||||
</svg>
|
||||
<h2>Documentation</h2>
|
||||
<p>Your questions, answered</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://vite.dev/" target="_blank">
|
||||
<img className="logo" src={viteLogo} alt="" />
|
||||
Explore Vite
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://react.dev/" target="_blank">
|
||||
<img className="button-icon" src={reactLogo} alt="" />
|
||||
Learn more
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="social">
|
||||
<svg className="icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#social-icon"></use>
|
||||
</svg>
|
||||
<h2>Connect with us</h2>
|
||||
<p>Join the Vite community</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/vitejs/vite" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#github-icon"></use>
|
||||
</svg>
|
||||
GitHub
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://chat.vite.dev/" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#discord-icon"></use>
|
||||
</svg>
|
||||
Discord
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://x.com/vite_js" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#x-icon"></use>
|
||||
</svg>
|
||||
X.com
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://bsky.app/profile/vite.dev" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#bluesky-icon"></use>
|
||||
</svg>
|
||||
Bluesky
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="ticks"></div>
|
||||
<section id="spacer"></section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
export default App;
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
import React from 'react';
|
||||
import { AppBar, Toolbar, Typography, IconButton, Box } from '@mui/material';
|
||||
import { Brightness4, Brightness7, Settings } from '@mui/icons-material';
|
||||
import { useAppStore } from '../store/useAppStore';
|
||||
|
||||
const Header: React.FC = () => {
|
||||
const { darkMode, toggleDarkMode } = useAppStore();
|
||||
|
||||
return (
|
||||
<AppBar position="static" color="transparent" elevation={0} sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
||||
<Toolbar>
|
||||
<Typography variant="h6" sx={{ flexGrow: 1, fontWeight: 700, color: 'primary.main' }}>
|
||||
MARIAVEL
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<IconButton onClick={toggleDarkMode} color="inherit">
|
||||
{darkMode ? <Brightness7 /> : <Brightness4 />}
|
||||
</IconButton>
|
||||
<IconButton color="inherit">
|
||||
<Settings />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
@@ -0,0 +1,62 @@
|
||||
import React from 'react';
|
||||
import { Box, Paper, Typography } from '@mui/material';
|
||||
import DataGrid, {
|
||||
Column,
|
||||
Editing,
|
||||
Scrolling,
|
||||
Paging,
|
||||
FilterRow,
|
||||
HeaderFilter
|
||||
} from 'devextreme-react/data-grid';
|
||||
import { useAppStore } from '../store/useAppStore';
|
||||
|
||||
const MainContent: React.FC = () => {
|
||||
const { activeDatabase } = useAppStore();
|
||||
|
||||
// Mock data for initial UI
|
||||
const dummyData = [
|
||||
{ id: 1, name: 'Users', type: 'BASE TABLE', engine: 'InnoDB', rows: 1500, size: '256 KB' },
|
||||
{ id: 2, name: 'Products', type: 'BASE TABLE', engine: 'InnoDB', rows: 54200, size: '12 MB' },
|
||||
{ id: 3, name: 'Orders', type: 'BASE TABLE', engine: 'InnoDB', rows: 120400, size: '45 MB' },
|
||||
{ id: 4, name: 'Order_Items', type: 'BASE TABLE', engine: 'InnoDB', rows: 450000, size: '120 MB' },
|
||||
];
|
||||
|
||||
return (
|
||||
<Box sx={{ flexGrow: 1, p: 3, overflow: 'hidden', display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<Box>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700 }}>
|
||||
{activeDatabase ? `Tables in ${activeDatabase}` : 'Welcome to Mariavel'}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Manage your database tables with high-performance tools.
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Paper sx={{ flexGrow: 1, p: 0, overflow: 'hidden', borderRadius: 3 }}>
|
||||
<DataGrid
|
||||
dataSource={dummyData}
|
||||
keyExpr="id"
|
||||
showBorders={false}
|
||||
focusedRowEnabled={true}
|
||||
height="100%"
|
||||
width="100%"
|
||||
>
|
||||
<Paging enabled={false} />
|
||||
<Scrolling mode="virtual" />
|
||||
<FilterRow visible={true} />
|
||||
<HeaderFilter visible={true} />
|
||||
<Editing mode="cell" allowUpdating={true} allowDeleting={true} />
|
||||
|
||||
<Column dataField="id" width={50} />
|
||||
<Column dataField="name" caption="Table Name" />
|
||||
<Column dataField="type" />
|
||||
<Column dataField="engine" width={100} />
|
||||
<Column dataField="rows" dataType="number" format="fixedPoint" width={100} />
|
||||
<Column dataField="size" width={100} />
|
||||
</DataGrid>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default MainContent;
|
||||
@@ -0,0 +1,44 @@
|
||||
import React from 'react';
|
||||
import { Box, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography, Divider } from '@mui/material';
|
||||
import { Storage, TableChart, Folder } from '@mui/icons-material';
|
||||
import { useAppStore } from '../store/useAppStore';
|
||||
|
||||
const Sidebar: React.FC = () => {
|
||||
const { activeDatabase, setActiveDatabase } = useAppStore();
|
||||
|
||||
// Mock data for initial UI
|
||||
const databases = ['information_schema', 'mysql', 'performance_schema', 'sys', 'mariavel_db'];
|
||||
|
||||
return (
|
||||
<Box sx={{ width: 260, borderRight: 1, borderColor: 'divider', display: 'flex', flexDirection: 'column' }}>
|
||||
<Box sx={{ p: 2 }}>
|
||||
<Typography variant="overline" sx={{ fontWeight: 700, color: 'text.secondary' }}>
|
||||
Databases
|
||||
</Typography>
|
||||
</Box>
|
||||
<List sx={{ flexGrow: 1, overflow: 'auto' }}>
|
||||
{databases.map((db) => (
|
||||
<ListItem key={db} disablePadding>
|
||||
<ListItemButton
|
||||
selected={activeDatabase === db}
|
||||
onClick={() => setActiveDatabase(db)}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Storage color={activeDatabase === db ? 'primary' : 'inherit'} />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={db} primaryTypographyProps={{ variant: 'body2', fontWeight: activeDatabase === db ? 600 : 400 }} />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
<Divider />
|
||||
<Box sx={{ p: 2 }}>
|
||||
<Typography variant="caption" sx={{ color: 'text.secondary' }}>
|
||||
Connected to: 127.0.0.1
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Sidebar;
|
||||
@@ -1,6 +1,8 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import 'devextreme/dist/css/dx.common.css';
|
||||
import 'devextreme/dist/css/dx.material.blue.dark.compact.css';
|
||||
import App from './App.tsx'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
|
||||
Reference in New Issue
Block a user