# Getting Started

This guide will help you set up the Monetarie NPC Backoffice development environment and understand the project structure.

## Prerequisites

Before you begin, ensure you have the following installed:

- **Node.js** 18.x or higher
- **npm** 9.x or higher (comes with Node.js)
- A modern code editor (VS Code recommended)

::: tip Recommended VS Code Extensions
- Vue - Official (Vue Language Features)
- TypeScript Vue Plugin (Volar)
- ESLint
- Prettier
:::

## Installation

### 1. Clone the Repository

```bash
git clone https://github.com/your-org/monetarie_npc-backoffice.git
cd monetarie_npc-backoffice
```

### 2. Install Dependencies

```bash
npm install
```

This will install all required dependencies including:
- Vue 3.5.x
- Vuetify 3.11.x
- Pinia 3.x
- Vue Router 4.x
- vue-i18n 9.x

### 3. Start Development Server

```bash
npm run dev
```

The application will be available at `http://localhost:5173`.

### 4. Access the Application

Use the demo credentials to log in:

| Field | Value |
|-------|-------|
| Email | `admin@monetarie_npc.com.br` |
| Password | `admin123` |

## Project Structure

The project follows a feature-based architecture:

```
src/
├── features/              # Feature modules
│   ├── auth/              # Authentication feature
│   │   └── views/
│   │       └── LoginView.vue
│   ├── dashboard/         # Dashboard feature
│   │   ├── components/
│   │   │   ├── HealthPanel.vue
│   │   │   └── SisbajudOrdersPanel.vue
│   │   └── views/
│   │       └── DashboardView.vue
│   ├── accounts/          # Account management
│   │   └── views/
│   │       └── AccountsView.vue
│   ├── settings/          # System settings
│   │   └── views/
│   │       └── SettingsView.vue
│   └── serena/            # AI assistant
│       └── components/
│           └── SerenaChat.vue
├── shared/                # Shared components
│   └── components/
│       ├── LeftSidebar.vue
│       ├── RightPanel.vue
│       └── TopBar.vue
├── layouts/               # Layout components
│   └── AppLayout.vue
├── stores/                # Pinia state stores
│   ├── auth.ts
│   ├── dashboard.ts
│   ├── notifications.ts
│   ├── serena.ts
│   └── sidebar.ts
├── i18n/                  # Internationalization
│   ├── index.ts
│   └── locales/
│       ├── pt-BR.ts
│       ├── en.ts
│       └── zh-CN.ts
├── mocks/                 # Mock data
│   ├── health.ts
│   ├── notifications.ts
│   ├── rss.ts
│   ├── serena.ts
│   ├── sisbajud.ts
│   └── users.ts
├── router/                # Vue Router configuration
│   └── index.ts
├── plugins/               # Vue plugins
│   └── vuetify.ts
├── App.vue                # Root component
├── main.ts                # Application entry point
└── style.css              # Global styles
```

## Available Scripts

| Command | Description |
|---------|-------------|
| `npm run dev` | Start development server with hot reload |
| `npm run build` | Build for production (runs TypeScript check first) |
| `npm run preview` | Preview production build locally |
| `npm run docs:dev` | Start VitePress documentation server |
| `npm run docs:build` | Build documentation for production |
| `npm run docs:preview` | Preview documentation build |

## Configuration Files

### vite.config.ts

The Vite configuration includes:
- Vue plugin for SFC support
- Vuetify plugin for component auto-import
- Path aliases (`@` points to `src/`)

### tsconfig.json

TypeScript configuration with strict mode enabled and proper Vue support.

## Environment Variables

The project uses Vite's built-in environment variable handling:

```bash
# .env.local (create for local development)
VITE_API_BASE_URL=https://api.example.com
```

Access in code:
```typescript
const apiUrl = import.meta.env.VITE_API_BASE_URL
```

## Next Steps

Now that you have the project running, explore:

- [Authentication](/guide/authentication) - Understanding the auth flow
- [Dashboard](/guide/dashboard) - Main dashboard features
- [Sidebars](/guide/sidebars) - Navigation components
- [Pinia Stores](/api/stores) - State management