feat: implement main data viewing component and reusable confirmation dialog for table management

frontend/src/components/ConfirmDialog.tsx

@@ -42,16 +42,18 @@ const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
     <Dialog 
       open={open} 
       onClose={onClose}
-      PaperProps={{
+      slotProps={{
-        sx: {
+        paper: {
-          borderRadius: 4,
+          sx: {
-          p: 1,
+            borderRadius: 4,
-          maxWidth: 400,
+            p: 1,
-          border: 1,
+            maxWidth: 400,
-          borderColor: 'divider',
+            border: 1,
-          boxShadow: '0 24px 48px rgba(0,0,0,0.2)',
+            borderColor: 'divider',
-          bgcolor: 'background.paper',
+            boxShadow: '0 24px 48px rgba(0,0,0,0.2)',
-          backgroundImage: 'none'
+            bgcolor: 'background.paper',
+            backgroundImage: 'none'
+          }
         }
       }}
     >

frontend/src/components/MainContent.tsx

@@ -48,14 +48,20 @@ const MainContent: React.FC = () => {
     pageSize: 100,
   });
 
-  // Custom Alert State
+  // Custom Notification State
-  const [errorInfo, setErrorInfo] = useState<{ open: boolean; message: string; title: string }>({
+  const [notification, setNotification] = useState<{ 
+    open: boolean; 
+    message: string; 
+    title: string;
+    severity: 'success' | 'error' | 'info' | 'warning'
+  }>({
     open: false,
     message: '',
-    title: ''
+    title: '',
+    severity: 'error'
   });
 
-  const handleCloseError = () => setErrorInfo({ ...errorInfo, open: false });
+  const handleCloseNotification = () => setNotification({ ...notification, open: false });
 
   // Helper to map SQL types to MUI X Data Grid types
   const mapSqlTypeToMuiType = (sqlType: string): 'string' | 'number' | 'date' | 'dateTime' | 'boolean' => {
@@ -175,10 +181,11 @@ const MainContent: React.FC = () => {
     } catch (error: any) {
       console.error('Execution error', error);
       const msg = error.response?.data?.error || 'An unexpected error occurred during SQL execution.';
-      setErrorInfo({
+      setNotification({
         open: true,
         title: 'SQL Execution Error',
-        message: msg
+        message: msg,
+        severity: 'error'
       });
     } finally {
       setLoadingData(false);
@@ -226,17 +233,19 @@ const MainContent: React.FC = () => {
       setShowConfirm(false);
       try {
         await SchemaService.truncateTable(table!);
-        setErrorInfo({
+        setNotification({
           open: true,
           title: 'Success',
-          message: `Table "${table}" has been truncated.`
+          message: `Table "${table}" has been truncated.`,
+          severity: 'success'
         });
         fetchMeta();
       } catch (error: any) {
-        setErrorInfo({
+        setNotification({
           open: true,
           title: 'Truncate Error',
-          message: error.response?.data?.error || error.message
+          message: error.response?.data?.error || error.message,
+          severity: 'error'
         });
       } finally {
         setTruncating(false);
@@ -462,11 +471,15 @@ const MainContent: React.FC = () => {
       {/* Technical Info View */}
       {dbTab === 'info' && <TechnicalOverview database={activeDatabase} table={activeTable} />}
 
-      {/* Custom Alert (Snackbar) */}
+      {/* Custom Notification (Snackbar) */}
-      <Snackbar open={errorInfo.open} autoHideDuration={10000} onClose={handleCloseError} anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}>
+      <Snackbar open={notification.open} autoHideDuration={6000} onClose={handleCloseNotification} anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}>
-        <Alert onClose={handleCloseError} severity="error" variant="filled" sx={{ width: '100%', borderRadius: 2 }}>
+        <Alert onClose={handleCloseNotification} severity={notification.severity} variant="filled" sx={{ 
-          <AlertTitle sx={{ fontWeight: 800 }}>{errorInfo.title}</AlertTitle>
+          width: '100%', 
-          <Typography variant="body2">{errorInfo.message}</Typography>
+          borderRadius: 2,
+          boxShadow: notification.severity === 'success' ? '0 8px 24px rgba(46, 125, 50, 0.25)' : '0 8px 24px rgba(211, 47, 47, 0.25)'
+        }}>
+          <AlertTitle sx={{ fontWeight: 800 }}>{notification.title}</AlertTitle>
+          <Typography variant="body2">{notification.message}</Typography>
         </Alert>
       </Snackbar>
     </Box>