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
|
||||
+15
-2
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<v-app id="studspider-dashboard">
|
||||
<v-navigation-drawer v-model="drawer">
|
||||
<v-navigation-drawer v-model="drawer" temporary>
|
||||
<v-list>
|
||||
<v-list-item
|
||||
prepend-icon="mdi-view-dashboard"
|
||||
@@ -8,12 +8,19 @@
|
||||
value="dashboard"
|
||||
to="/"
|
||||
/>
|
||||
<v-list-item
|
||||
prepend-icon="mdi-file-search"
|
||||
title="Review"
|
||||
value="review"
|
||||
to="/review"
|
||||
/>
|
||||
<v-list-item
|
||||
prepend-icon="mdi-chart-box"
|
||||
title="Statistics"
|
||||
value="stats"
|
||||
to="/stats"
|
||||
/>
|
||||
|
||||
<v-list-item
|
||||
prepend-icon="mdi-code-tags"
|
||||
title="Demo"
|
||||
@@ -120,9 +127,15 @@
|
||||
]
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.v-navigation-drawer {
|
||||
z-index: 999999 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({ drawer: "/" }),
|
||||
data: () => ({ drawer: false }),
|
||||
}
|
||||
|
||||
</script>
|
||||
@@ -3,6 +3,9 @@
|
||||
app
|
||||
height="40"
|
||||
>
|
||||
<div class="text-caption">
|
||||
StudSpider 0.2 (<small>5288d</small>)
|
||||
</div>
|
||||
<a
|
||||
v-for="item in items"
|
||||
:key="item.title"
|
||||
@@ -22,21 +25,23 @@
|
||||
class="text-caption text-disabled"
|
||||
style="position: absolute; right: 16px;"
|
||||
>
|
||||
© 2016-{{ (new Date()).getFullYear() }} <span class="d-none d-sm-inline-block">Vuetify, LLC</span>
|
||||
© 2025-{{ (new Date()).getFullYear() }} <span class="d-none d-sm-inline-block">PLAY-WELL TEKNOLOGIES</span>
|
||||
—
|
||||
<a
|
||||
class="text-decoration-none on-surface"
|
||||
href="https://vuetifyjs.com/about/licensing/"
|
||||
href="https://www.mozilla.org/en-US/MPL/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
MIT License
|
||||
MPL 2.0 License
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</v-footer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
/*
|
||||
const items = [
|
||||
{
|
||||
title: 'Vuetify Documentation',
|
||||
@@ -69,6 +74,7 @@
|
||||
href: 'https://reddit.com/r/vuetifyjs',
|
||||
},
|
||||
]
|
||||
*/
|
||||
</script>
|
||||
|
||||
<style scoped lang="sass">
|
||||
|
||||
+5
-5
@@ -114,27 +114,27 @@
|
||||
// Sample recent changes data
|
||||
const recentChanges = [
|
||||
{
|
||||
title: "Added new Marvel set",
|
||||
title: "Added set 76218 (MV) ",
|
||||
timestamp: "2 minutes ago",
|
||||
type: "add"
|
||||
},
|
||||
{
|
||||
title: "Updated Harry Potter count",
|
||||
title: "Marked for Review 76389 (HP) ",
|
||||
timestamp: "15 minutes ago",
|
||||
type: "update"
|
||||
},
|
||||
{
|
||||
title: "Removed duplicate Friends set",
|
||||
title: "Removed duplicate 71404 (FR)",
|
||||
timestamp: "1 hour ago",
|
||||
type: "remove"
|
||||
},
|
||||
{
|
||||
title: "Added Star Wars set",
|
||||
title: "Added set 75396 (SW)",
|
||||
timestamp: "2 hours ago",
|
||||
type: "add"
|
||||
},
|
||||
{
|
||||
title: "Updated Technic inventory",
|
||||
title: "Updated set 75387 (SW)",
|
||||
timestamp: "3 hours ago",
|
||||
type: "update"
|
||||
}
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
this is the page that shows items needed for manual review
|
||||
</template>
|
||||
|
||||
|
||||
<route lang="yaml">
|
||||
name: review
|
||||
layout: default
|
||||
</route>
|
||||
|
||||
<script setup> </script>
|
||||
Reference in new issue
Block a user