From 509d886f17e025accc63b58e23300130cd91f332 Mon Sep 17 00:00:00 2001 From: C <0xicl33n@gmail.com> Date: Sat, 18 Oct 2025 11:14:16 -0700 Subject: [PATCH] testing new readme. chagned footer --- README.md | 274 ++++++++++++++++++++++++++++------- src/App.vue | 17 ++- src/components/AppFooter.vue | 12 +- src/pages/index.vue | 10 +- src/pages/review.vue | 11 ++ 5 files changed, 259 insertions(+), 65 deletions(-) create mode 100644 src/pages/review.vue diff --git a/README.md b/README.md index f58f676..0549dbf 100644 --- a/README.md +++ b/README.md @@ -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 +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 + +name: yourpage +layout: default + +``` +3. Add navigation item in `App.vue`: +```vue + +``` + +### 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 \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index 2313cdf..5d6d33a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,6 +1,6 @@