testing new readme. chagned footer

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/)
+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.
-- 🚨 [Issues](https://issues.vuetifyjs.com/)
-- 🏬 [Store](https://store.vuetifyjs.com/)
-- 🎮 [Playground](https://play.vuetifyjs.com/)
-- 💬 [Discord](https://community.vuetifyjs.com)
 
-## 💿 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        |
+## 🛠️ Technology Stack
-|---------------------------------------------------------------|----------------|
-| [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`  |
 
-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/)
+## 📦 Installation
-- 🗃️ **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)
 
-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
+### Setup
-
-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):
 
+1. Clone the repository:
 ```bash
-yarn dev
+git clone <repository-url>
+cd studspider-status
 ```
 
-(Repeat for npm, pnpm, and bun with respective commands.)
+2. Install dependencies:
-
-> 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:
-
 ```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/)
+### Development
-- [Sponsoring John on Github](https://github.com/users/johnleider/sponsorship)
+```bash
-- [Sponsoring Kael on Github](https://github.com/users/kaelwd/sponsorship)
+pnpm dev
-- [Supporting the team on Open Collective](https://opencollective.com/vuetify)
+```
-- [Becoming a sponsor on Patreon](https://www.patreon.com/vuetify)
+Access the application at `http://localhost:5173`
-- [Becoming a subscriber on Tidelift](https://tidelift.com/subscription/npm/vuetify)
-- [Making a one-time donation with Paypal](https://paypal.me/vuetify)
 
-## 📑 License
+### Production Build
-[MIT](http://opensource.org/licenses/MIT)
+```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

src/App.vue

@@ -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>

src/components/AppFooter.vue

@@ -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;"
     >
-      &copy; 2016-{{ (new Date()).getFullYear() }} <span class="d-none d-sm-inline-block">Vuetify, LLC</span>
+      &copy; 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">

src/pages/index.vue

@@ -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"
     }

src/pages/review.vue

@@ -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>