testing new readme. chagned footer
This commit is contained in:
C committed
1 parent
5288d24020
commit
509d886f17
5 files changed
+259
-65
No files matched your search
@@ -1,79 +1,243 @@
|
||||
# Vuetify (Default)
|
||||
# StudSpider Status Dashboard
|
||||
|
||||
This is the official scaffolding tool for Vuetify, designed to give you a head start in building your new Vuetify application. It sets up a base template with all the necessary configurations and standard directory structure, enabling you to begin development without the hassle of setting up the project from scratch.
|
||||
A real-time inventory management dashboard that integrates with Square POS, Brickset.com, and a SQL database to track and visualize LEGO inventory changes.
|
||||
|
||||
## ❗️ Important Links
|
||||
## 📋 Overview
|
||||
|
||||
- 📄 [Docs](https://vuetifyjs.com/)
|
||||
- 🚨 [Issues](https://issues.vuetifyjs.com/)
|
||||
- 🏬 [Store](https://store.vuetifyjs.com/)
|
||||
- 🎮 [Playground](https://play.vuetifyjs.com/)
|
||||
- 💬 [Discord](https://community.vuetifyjs.com)
|
||||
StudSpider Status is a comprehensive dashboard application designed to monitor and track inventory discrepancies between Square's inventory system and actual stock levels. The application provides real-time insights into inventory changes, theme distributions, and system statistics.
|
||||
|
||||
## 💿 Install
|
||||
## 🎯 Key Features
|
||||
|
||||
Set up your project using your preferred package manager. Use the corresponding command to install the dependencies:
|
||||
- **Real-Time Inventory Tracking**: Monitor changes between Square inventory and database records
|
||||
- **Square Integration**: Direct integration with Square POS API for inventory management
|
||||
- **Brickset.com API**: Fetch LEGO set information and theme data
|
||||
- **SQL Database Backend**: Persistent storage for tracking historical inventory changes
|
||||
- **Visual Analytics**: Interactive charts and graphs showing inventory distribution by theme
|
||||
- **Change Log**: Detailed timeline of all inventory modifications (additions, updates, deletions)
|
||||
- **Statistics Dashboard**: Quick overview of total sets, themes, and recent changes
|
||||
|
||||
| Package Manager | Command |
|
||||
|---------------------------------------------------------------|----------------|
|
||||
| [yarn](https://yarnpkg.com/getting-started) | `yarn install` |
|
||||
| [npm](https://docs.npmjs.com/cli/v7/commands/npm-install) | `npm install` |
|
||||
| [pnpm](https://pnpm.io/installation) | `pnpm install` |
|
||||
| [bun](https://bun.sh/#getting-started) | `bun install` |
|
||||
## 🛠️ Technology Stack
|
||||
|
||||
After completing the installation, your environment is ready for Vuetify development.
|
||||
### 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
|
||||
|
||||
## ✨ Features
|
||||
### Backend Integration
|
||||
- **Square API**: Point of sale and inventory management
|
||||
- **Brickset API**: LEGO set database and information
|
||||
- **SQL Database**: Inventory change tracking and historical data
|
||||
|
||||
- 🖼️ **Optimized Front-End Stack**: Leverage the latest Vue 3 and Vuetify 3 for a modern, reactive UI development experience. [Vue 3](https://v3.vuejs.org/) | [Vuetify 3](https://vuetifyjs.com/en/)
|
||||
- 🗃️ **State Management**: Integrated with [Pinia](https://pinia.vuejs.org/), the intuitive, modular state management solution for Vue.
|
||||
- 🚦 **Routing and Layouts**: Utilizes Vue Router for SPA navigation and vite-plugin-vue-layouts for organizing Vue file layouts. [Vue Router](https://router.vuejs.org/) | [vite-plugin-vue-layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts)
|
||||
- ⚡ **Next-Gen Tooling**: Powered by Vite, experience fast cold starts and instant HMR (Hot Module Replacement). [Vite](https://vitejs.dev/)
|
||||
- 🧩 **Automated Component Importing**: Streamline your workflow with unplugin-vue-components, automatically importing components as you use them. [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components)
|
||||
## 📦 Installation
|
||||
|
||||
These features are curated to provide a seamless development experience from setup to deployment, ensuring that your Vuetify application is both powerful and maintainable.
|
||||
### Prerequisites
|
||||
- Node.js (v16 or higher)
|
||||
- pnpm (recommended) or npm
|
||||
- Access to Square API credentials
|
||||
- Brickset API key
|
||||
- SQL database connection
|
||||
|
||||
## 💡 Usage
|
||||
|
||||
This section covers how to start the development server and build your project for production.
|
||||
|
||||
### Starting the Development Server
|
||||
|
||||
To start the development server with hot-reload, run the following command. The server will be accessible at [http://localhost:3000](http://localhost:3000):
|
||||
### Setup
|
||||
|
||||
1. Clone the repository:
|
||||
```bash
|
||||
yarn dev
|
||||
git clone <repository-url>
|
||||
cd studspider-status
|
||||
```
|
||||
|
||||
(Repeat for npm, pnpm, and bun with respective commands.)
|
||||
|
||||
> Add NODE_OPTIONS='--no-warnings' to suppress the JSON import warnings that happen as part of the Vuetify import mapping. If you are on Node [v21.3.0](https://nodejs.org/en/blog/release/v21.3.0) or higher, you can change this to NODE_OPTIONS='--disable-warning=5401'. If you don't mind the warning, you can remove this from your package.json dev script.
|
||||
|
||||
### Building for Production
|
||||
|
||||
To build your project for production, use:
|
||||
|
||||
2. Install dependencies:
|
||||
```bash
|
||||
yarn build
|
||||
pnpm install
|
||||
```
|
||||
|
||||
(Repeat for npm, pnpm, and bun with respective commands.)
|
||||
3. Configure environment variables:
|
||||
Create a `.env` file in the root directory:
|
||||
```env
|
||||
VITE_SQUARE_API_KEY=your_square_api_key
|
||||
VITE_SQUARE_ACCESS_TOKEN=your_square_access_token
|
||||
VITE_BRICKSET_API_KEY=your_brickset_api_key
|
||||
VITE_DATABASE_URL=your_database_connection_string
|
||||
```
|
||||
|
||||
Once the build process is completed, your application will be ready for deployment in a production environment.
|
||||
4. Start the development server:
|
||||
```bash
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
## 💪 Support Vuetify Development
|
||||
5. Build for production:
|
||||
```bash
|
||||
pnpm build
|
||||
```
|
||||
|
||||
This project is built with [Vuetify](https://vuetifyjs.com/en/), a UI Library with a comprehensive collection of Vue components. Vuetify is an MIT licensed Open Source project that has been made possible due to the generous contributions by our [sponsors and backers](https://vuetifyjs.com/introduction/sponsors-and-backers/). If you are interested in supporting this project, please consider:
|
||||
## 🚀 Usage
|
||||
|
||||
- [Requesting Enterprise Support](https://support.vuetifyjs.com/)
|
||||
- [Sponsoring John on Github](https://github.com/users/johnleider/sponsorship)
|
||||
- [Sponsoring Kael on Github](https://github.com/users/kaelwd/sponsorship)
|
||||
- [Supporting the team on Open Collective](https://opencollective.com/vuetify)
|
||||
- [Becoming a sponsor on Patreon](https://www.patreon.com/vuetify)
|
||||
- [Becoming a subscriber on Tidelift](https://tidelift.com/subscription/npm/vuetify)
|
||||
- [Making a one-time donation with Paypal](https://paypal.me/vuetify)
|
||||
### Development
|
||||
```bash
|
||||
pnpm dev
|
||||
```
|
||||
Access the application at `http://localhost:5173`
|
||||
|
||||
## 📑 License
|
||||
[MIT](http://opensource.org/licenses/MIT)
|
||||
### Production Build
|
||||
```bash
|
||||
pnpm build
|
||||
pnpm preview
|
||||
```
|
||||
|
||||
Copyright (c) 2016-present Vuetify, LLC
|
||||
### 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
|
||||
- **Demo**: Component showcase and UI examples
|
||||
|
||||
## 🔌 API Integration
|
||||
|
||||
### Square API
|
||||
The application connects to Square's Inventory API to:
|
||||
- Fetch current inventory levels
|
||||
- Track inventory adjustments
|
||||
- Monitor stock changes in real-time
|
||||
|
||||
### Brickset API
|
||||
Integration with Brickset.com provides:
|
||||
- LEGO set information and details
|
||||
- Theme categorization
|
||||
- Set metadata and specifications
|
||||
|
||||
### Database
|
||||
SQL database stores:
|
||||
- Historical inventory snapshots
|
||||
- Change logs with timestamps
|
||||
- User actions and modifications
|
||||
- Theme and set relationships
|
||||
|
||||
## 📁 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
|
||||
```
|
||||
|
||||
## 🎨 Customization
|
||||
|
||||
### 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`.
|
||||
|
||||
## 🔒 Security Notes
|
||||
|
||||
- Never commit API keys or sensitive credentials
|
||||
- Use environment variables for all API configuration
|
||||
- Implement proper authentication for production deployments
|
||||
- Secure database connections with appropriate credentials
|
||||
|
||||
## 🐛 Troubleshooting
|
||||
|
||||
### 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
|
||||
|
||||
[Add your license here]
|
||||
|
||||
## 👥 Contributing
|
||||
|
||||
Contributions are welcome! Please follow these steps:
|
||||
1. Fork the repository
|
||||
2. Create a feature branch
|
||||
3. Commit your changes
|
||||
4. Push to the branch
|
||||
5. Open a Pull Request
|
||||
|
||||
## 🔮 Future Enhancements
|
||||
|
||||
- [ ] Real-time WebSocket updates for inventory changes
|
||||
- [ ] Export reports to PDF/Excel
|
||||
- [ ] Advanced filtering and search capabilities
|
||||
- [ ] User authentication and role-based access
|
||||
- [ ] Email notifications for inventory discrepancies
|
||||
- [ ] Mobile app version
|
||||
- [ ] Automated inventory reconciliation
|
||||
- [ ] Barcode scanning integration
|
||||
- [ ] Multi-location inventory support
|
||||
|
||||
## 📧 Support
|
||||
|
||||
For issues and questions, please open an issue on the GitHub repository.
|
||||
|
||||
---
|
||||
|
||||
Built with ❤️ using Vue 3 and Vuetify 3
|
||||
Reference in new issue
Block a user