personal-dash-cl/claudash/src/components/DebugPanel.jsx
2026-02-12 03:26:10 -05:00

81 lines
No EOL
2.1 KiB
JavaScript

import { useState } from 'react';
import { Button, Box, Paper, Typography } from '@mui/material';
import { Download, Upload } from '@mui/icons-material';
import { exportAllData, importDummyData } from '../services/storageService';
function DebugPanel() {
const [dummyMode, setDummyMode] = useState(false);
const handleExport = () => {
const data = exportAllData();
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `claudash-debug-${new Date().toISOString()}.json`;
a.click();
URL.revokeObjectURL(url);
};
const handleImport = (event) => {
const file = event.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = (e) => {
try {
const data = JSON.parse(e.target.result);
importDummyData(data);
setDummyMode(true);
window.location.reload();
} catch (error) {
console.error('Error importing data:', error);
alert('Failed to import data. Please check the file format.');
}
};
reader.readAsText(file);
};
return (
<Paper sx={{ position: 'fixed', bottom: 80, right: 16, p: 2, width: 250, zIndex: 999 }}>
<Typography variant="h6" gutterBottom>Debug Tools</Typography>
<Button
fullWidth
startIcon={<Download />}
onClick={handleExport}
sx={{ mb: 1 }}
variant="outlined"
>
Export Data
</Button>
<Button
fullWidth
component="label"
startIcon={<Upload />}
variant="outlined"
>
Import Dummy Data
<input
type="file"
hidden
accept=".json"
onChange={handleImport}
/>
</Button>
{dummyMode && (
<Typography
variant="caption"
color="warning.main"
sx={{ mt: 1, display: 'block' }}
>
Using dummy data
</Typography>
)}
</Paper>
);
}
export default DebugPanel;