Initial commit: Shop Database Flask Application

Flask backend with Vue 3 frontend for shop floor machine management. Includes database schema export for MySQL shopdb_flask database. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-13 16:07:34 -05:00
commit 1196de6e88
188 changed files with 19921 additions and 0 deletions
--- a/frontend/CLAUDE.md
+++ b/frontend/CLAUDE.md
@@ -0,0 +1,104 @@
+# Frontend Development Standards
+
+## CSS Styling Standards
+
+### Use CSS Variables for ALL Colors
+
+**NEVER hardcode colors in component styles.** Always use CSS variables defined in `src/assets/style.css`.
+
+Available variables:
+```css
+--primary       /* Primary brand color */
+--primary-dark  /* Darker primary for hover states */
+--secondary     /* Secondary/muted color */
+--success       /* Success states (green) */
+--warning       /* Warning states (orange) */
+--danger        /* Error/danger states (red) */
+--bg            /* Page background */
+--bg-card       /* Card/panel background */
+--text          /* Primary text color */
+--text-light    /* Secondary/muted text */
+--border        /* Border color */
+--link          /* Link color (bright blue in dark mode) */
+```
+
+**Bad:**
+```css
+.my-card {
+  background: white;
+  color: #1a1a1a;
+}
+```
+
+**Good:**
+```css
+.my-card {
+  background: var(--bg-card);
+  color: var(--text);
+}
+```
+
+### Detail Pages - Use Global Styles
+
+All detail pages (MachineDetail, PCDetail, PrinterDetail, ApplicationDetail) should use the **unified global styles** from `style.css`:
+
+- `.detail-page` - Container wrapper
+- `.hero-card` - Main hero section with image and info
+- `.hero-image`, `.hero-content`, `.hero-title`, `.hero-meta`, `.hero-details`
+- `.section-card` - Info sections
+- `.section-title` - Section headers
+- `.info-list`, `.info-row`, `.info-label`, `.info-value`
+- `.content-grid`, `.content-column` - Two-column layout
+- `.audit-footer` - Created/modified timestamps
+
+**Only add scoped styles for page-specific elements** (e.g., supplies grid for printers, version list for applications).
+
+### PrinterDetail.vue is the Master Template for Detail Pages
+
+Use `PrinterDetail.vue` as the reference for new detail pages. Follow its structure and styling patterns.
+
+### List Pages - Use Global Styles
+
+All list pages should use the **unified global styles** from `style.css`:
+
+- `.page-header` - Header with title and action button
+- `.filters` - Search and filter controls
+- `.card` - Main content container
+- `.table-container` - Scrollable table wrapper
+- `table`, `th`, `td` - Table styling
+- `.pagination` - Page navigation
+- `.badge`, `.badge-success`, etc. - Status badges
+- `.actions` - Action button column
+
+**PrintersList.vue is the Master Template for List Pages**
+
+Use `PrintersList.vue` as the reference for new list pages. It has NO scoped styles - everything uses global CSS.
+
+**Only add scoped styles for page-specific elements** (e.g., icon cells for applications, stats badge for knowledge base).
+
+### Dark Mode Support
+
+Dark mode is automatic via `@media (prefers-color-scheme: dark)`. Using CSS variables ensures colors adapt automatically - no extra work needed per page.
+
+## Component Organization
+
+- **Global styles**: `src/assets/style.css`
+- **Page-specific styles**: Scoped `<style scoped>` block, only for unique elements
+- **Font sizes**: Use `rem` units, base is 18px for readability on 1080p
+
+## File Structure
+
+```
+src/
+  assets/
+    style.css          # Global styles, CSS variables, detail page styles
+  views/
+    machines/
+      MachineDetail.vue   # Uses global styles only
+    pcs/
+      PCDetail.vue        # Global + PC-specific (app-list, etc.)
+    printers/
+      PrinterDetail.vue   # Global + printer-specific (supplies-grid)
+    applications/
+      ApplicationDetail.vue  # Global + app-specific (version-list, pc-list)
+```