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,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;