# Mariavel - Modern Database Management Tool (Frontend)

Mariavel is a premium, glassmorphic database management interface built for MariaDB/MySQL. It provides an IDE-like experience for managing databases, tables, and executing complex SQL queries.

## 🚀 Features

- **Data Explorer**: High-performance data viewing using MUI X Data Grid with server-side pagination.
- **SQL Console**: Interactive SQL editor powered by Monaco Editor (the core of VS Code) with syntax highlighting and direct execution.
- **Technical Metadata**: Detailed table and database specifications including engine, collation, and storage sizes.
- **Bulk Actions**: Perform maintenance tasks like Truncate, Drop, and Optimize on multiple tables simultaneously.
- **Transfer Tools**: Robust import/export capabilities supporting SQL files and compressed archives.
- **Responsive Design**: Modern, glassmorphic UI with dark mode support and a fluid layout.

## 🏗️ Architecture & SOLID Principles

The application has been recently refactored to follow **SOLID** principles, ensuring a maintainable and scalable codebase:

### Single Responsibility Principle (SRP)
Components have been decoupled into specialized units:
- `DatabaseTablesGrid`: Dedicated to table listing and bulk operations.
- `SqlConsole`: Isolated SQL editing and result rendering.
- `TechnicalOverview`: Focused on metadata presentation.
- `MainContent`: Orchestrates high-level layout and navigation.

### Logic Separation (Custom Hooks)
Business logic and data fetching are extracted into custom hooks:
- `useTableData`: Manages paginated data fetching and row mapping.
- `useTableSchema`: Handles column definitions and type mapping from SQL to UI.

### Type Safety
- **Verbatim Module Syntax**: Configured for strict type-only imports (`import type`), improving build performance and code clarity.
- **Centralized Types**: Shared interfaces are located in `src/types/database.ts`.

## 🛠️ Technology Stack

- **Framework**: [React](https://reactjs.org/) + [Vite](https://vitejs.dev/)
- **Styling**: [Material UI (MUI)](https://mui.com/) with a custom glassmorphic theme.
- **Editor**: [@monaco-editor/react](https://github.com/suren-atoyan/monaco-react)
- **Data Grid**: [MUI X Data Grid](https://mui.com/x/react-data-grid/)
- **State Management**: [Zustand](https://github.com/pmndrs/zustand)
- **API Client**: Axios

## 📂 Directory Structure

```
src/
├── components/     # Specialized UI components (DatabaseTablesGrid, SqlConsole, etc.)
├── hooks/          # Custom hooks for logic separation (useTableData, useTableSchema)
├── services/       # API service layers
├── store/          # Zustand global state management
├── types/          # Shared TypeScript interfaces
├── theme/          # MUI theme configuration
└── App.tsx         # Main application entry point
```

## 🚥 Getting Started

1. Install dependencies:
   ```bash
   npm install
   ```
2. Start development server:
   ```bash
   npm run dev
   ```
3. Build for production:
   ```bash
   npm run build
   ```