feat: implement ConfirmDialog component and add table truncation functionality to MainContent

frontend/src/components/MainContent.tsx

@@ -32,6 +32,7 @@ import Editor from '@monaco-editor/react';
 import { useAppStore } from '../store/useAppStore';
 import { SchemaService } from '../services/api';
 import TransferContent from './TransferContent';
+import ConfirmDialog from './ConfirmDialog';
 
 const MainContent: React.FC = () => {
   const { activeTable, activeDatabase, darkMode, dbTab, setDbTab } = useAppStore();
@@ -200,6 +201,7 @@ const MainContent: React.FC = () => {
     const [meta, setMeta] = useState<any>(null);
     const [loadingMeta, setLoadingMeta] = useState(true);
     const [truncating, setTruncating] = useState(false);
+    const [showConfirm, setShowConfirm] = useState(false);
 
     const fetchMeta = useCallback(async () => {
       setLoadingMeta(true);
@@ -220,11 +222,10 @@ const MainContent: React.FC = () => {
     }, [fetchMeta]);
 
     const handleTruncate = async () => {
-      if (!table || !window.confirm(`Are you sure you want to truncate table "${table}"? This will delete all data!`)) return;
-      
       setTruncating(true);
+      setShowConfirm(false);
       try {
-        await SchemaService.truncateTable(table);
+        await SchemaService.truncateTable(table!);
         setErrorInfo({
           open: true,
           title: 'Success',
@@ -271,7 +272,7 @@ const MainContent: React.FC = () => {
               variant="outlined" 
               color="error" 
               startIcon={truncating ? <CircularProgress size={16} color="inherit" /> : <CleaningServices />}
-              onClick={handleTruncate}
+              onClick={() => setShowConfirm(true)}
               disabled={truncating}
               sx={{ borderRadius: 2, textTransform: 'none', fontWeight: 700 }}
             >
@@ -279,6 +280,16 @@ const MainContent: React.FC = () => {
             </Button>
           )}
         </Box>
+
+        <ConfirmDialog 
+          open={showConfirm}
+          onClose={() => setShowConfirm(false)}
+          onConfirm={handleTruncate}
+          title="Truncate Table"
+          message={`Are you sure you want to truncate table "${table}"? This action will permanently delete all ${meta?.rows || ''} records. This cannot be undone.`}
+          confirmLabel="Truncate Now"
+          loading={truncating}
+        />
         <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 3 }}>
           {stats.map((stat, i) => (
             <Paper key={i} sx={{