# studspider-status

`studspider-status` is the frontend of `studspider`. An application used to track a square inventory and display changes over time, Brickset.com, and a SQL database to track and visualize LEGO inventory changes.

## 🛠️ Technology Stack

### Frontend
- **Vue 3**: Modern reactive JavaScript framework with Composition API
- **Vuetify 3**: Material Design component library
- **Vue Router**: Client-side routing for single-page application
- **Pinia**: State management solution
- **Vite**: Next-generation frontend build tool
- **ApexCharts/Vuetify Charts**: Data visualization

### Backend Integration
- **Studspider**: Python

## 📦 Installation

### Prerequisites
- Node.js (v16 or higher)
- pnpm (recommended) or npm
- SQL database connection

### Setup

1. Clone the repository:
```bash
git clone <repository-url>
cd studspider-status
```

2. Install dependencies:
```bash
pnpm install
```

3. Configure environment variables:
Create a `.env` file in the root directory:
```env
VITE_DATABASE_URL=your_database_connection_string
```

4. Start the development server:
```bash
pnpm dev
```

5. Build for production:
```bash
pnpm build
```

## 🚀 Usage

### Development
```bash
pnpm dev
```
Access the application at `http://localhost:5173`

### Production Build
```bash
pnpm build
pnpm preview
```

### Linting
```bash
pnpm lint
```

## 📊 Features Breakdown

### Dashboard View
- **Recent Changes Panel**: Real-time list of inventory modifications with timestamps
- **Statistics Cards**: Quick metrics showing total sets, total themes, and weekly changes
- **Theme Distribution Chart**: Visual pie chart displaying inventory breakdown by LEGO theme

### Navigation
- **Dashboard**: Main inventory overview
- **Review**: Inventory review and reconciliation
- **Statistics**: Detailed analytics and reporting

## 📁 Project Structure

```
studspider-status/
├── src/
│   ├── assets/          # Static assets
│   ├── components/      # Reusable Vue components
│   │   ├── AppFooter.vue
│   │   ├── HelloWorld.vue
│   │   └── DynamicPieChart.vue
│   ├── layouts/         # Page layout templates
│   │   └── default.vue
│   ├── pages/           # Application pages (auto-routed)
│   │   ├── index.vue    # Dashboard home page
│   │   ├── demo.vue     # Component demo page
│   │   ├── stats.vue    # Statistics page
│   │   └── review.vue   # Review page
│   ├── plugins/         # Vue plugins (Vuetify, Router, etc.)
│   │   ├── index.js
│   │   └── vuetify.js
│   ├── router/          # Vue Router configuration
│   │   └── index.js
│   ├── stores/          # Pinia state management
│   │   ├── app.js
│   │   └── index.js
│   ├── styles/          # Global styles and SCSS
│   │   └── settings.scss
│   ├── App.vue          # Root application component
│   └── main.js          # Application entry point
├── public/              # Public static files
├── .env                 # Environment variables (not committed)
├── package.json         # Project dependencies
├── vite.config.mjs      # Vite configuration
└── README.md           # This file
```


### Adding New Pages
1. Create a new `.vue` file in `src/pages/`
2. Add route metadata at the bottom:
```vue
<route lang="yaml">
name: yourpage
layout: default
</route>
```
3. Add navigation item in `App.vue`:
```vue
<v-list-item
  prepend-icon="mdi-your-icon"
  title="Your Page"
  value="yourpage"
  to="/yourpage"
/>
```

### Modifying Themes
Edit the color palette in component files or update Vuetify theme settings in `src/plugins/vuetify.js`.


### Development Server Won't Start
```bash
# Clear node modules and reinstall
rm -rf node_modules
pnpm install

# Clear Vite cache
rm -rf .vite
```

### Routing Not Working
- Ensure all pages have proper route metadata
- Check that `unplugin-vue-router` is configured in `vite.config.mjs`
- Verify the layout system is properly set up

## 📝 License

Mozilla Public License 2.0

## 📧 Support

For issues and questions, please open an issue on the GitHub repository.

---

Built with ❤️ using Vue 3 and Vuetify 3