142 lines
3.4 KiB
Markdown
142 lines
3.4 KiB
Markdown
## 📦 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
|