feat: initialize Mariavel project with Laravel backend API and React dashboard using DevExtreme DataGrid

2026-04-24 07:14:41 +03:00
parent 34f4d5b559
commit 49cf557f41
7 changed files with 237 additions and 118 deletions
@@ -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;