Add manual customer creation and fix color edit modal

- Add "Dodaj kupca" button and modal form to customers page
- Fix color edit modal dark mode styling and add backdrop blur

.env.development

@@ -0,0 +1,13 @@
+# Development Environment Configuration
+NODE_ENV=development
+
+# API Configuration
+NEXT_PUBLIC_API_URL=https://api.filamenteka.rs/api
+
+# AWS Configuration (for reference - no longer used)
+# AWS_REGION=eu-central-1
+# DYNAMODB_TABLE_NAME=filamenteka-filaments-dev
+
+# Admin credentials (development)
+# Username: admin
+# Password: admin123

.env.production

@@ -1,3 +1,10 @@
-# This file is for Amplify to know which env vars to expose to Next.js
+# Production Environment Configuration
-# The actual values come from Amplify Environment Variables
+NODE_ENV=production
-NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}
+
+# API Configuration
+NEXT_PUBLIC_API_URL=https://api.filamenteka.rs/api
+
+# Matomo Analytics Configuration
+NEXT_PUBLIC_MATOMO_URL=https://analytics.demirix.dev
+NEXT_PUBLIC_MATOMO_SITE_ID=7
+

.eslintrc.json

@@ -0,0 +1,15 @@
+{
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+    "ecmaFeatures": { "jsx": true }
+  },
+  "plugins": ["@typescript-eslint"],
+  "rules": {
+    "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
+    "@typescript-eslint/no-explicit-any": "warn"
+  },
+  "ignorePatterns": ["node_modules/", "out/", ".next/", "api/"]
+}

.gitea/workflows/deploy.yml

@@ -0,0 +1,288 @@
+name: Deploy
+
+on:
+  push:
+    branches: [main]
+
+env:
+  AWS_REGION: eu-central-1
+  S3_BUCKET: filamenteka-frontend
+  INSTANCE_ID: i-03956ecf32292d7d9
+  NEXT_PUBLIC_API_URL: https://api.filamenteka.rs/api
+  NEXT_PUBLIC_MATOMO_URL: https://analytics.demirix.dev
+  NEXT_PUBLIC_MATOMO_SITE_ID: "7"
+
+jobs:
+  # ── Job 1: Change Detection ──────────────────────────────────────────
+  detect:
+    runs-on: ubuntu-latest
+    outputs:
+      frontend: ${{ steps.changes.outputs.frontend }}
+      api: ${{ steps.changes.outputs.api }}
+      migrations: ${{ steps.changes.outputs.migrations }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Detect changes since last deploy
+        id: changes
+        run: |
+          # Find the latest deploy tag
+          LAST_TAG=$(git tag -l 'deploy-*' --sort=-creatordate | head -n 1)
+
+          if [ -z "$LAST_TAG" ]; then
+            echo "No deploy tag found — deploying everything"
+            echo "frontend=true" >> $GITHUB_OUTPUT
+            echo "api=true" >> $GITHUB_OUTPUT
+            echo "migrations=true" >> $GITHUB_OUTPUT
+            exit 0
+          fi
+
+          echo "Last deploy tag: $LAST_TAG"
+          DIFF_FILES=$(git diff --name-only "$LAST_TAG"..HEAD)
+          echo "Changed files since $LAST_TAG:"
+          echo "$DIFF_FILES"
+
+          FRONTEND=false
+          API=false
+          MIGRATIONS=false
+
+          if echo "$DIFF_FILES" | grep -qvE '^(api/|database/)'; then
+            FRONTEND=true
+          fi
+          if echo "$DIFF_FILES" | grep -qE '^api/'; then
+            API=true
+          fi
+          if echo "$DIFF_FILES" | grep -qE '^database/migrations/'; then
+            MIGRATIONS=true
+          fi
+
+          echo "frontend=$FRONTEND" >> $GITHUB_OUTPUT
+          echo "api=$API" >> $GITHUB_OUTPUT
+          echo "migrations=$MIGRATIONS" >> $GITHUB_OUTPUT
+          echo "Frontend: $FRONTEND | API: $API | Migrations: $MIGRATIONS"
+
+  # ── Job 2: Frontend Deploy ───────────────────────────────────────────
+  deploy-frontend:
+    runs-on: ubuntu-latest
+    needs: detect
+    if: needs.detect.outputs.frontend == 'true'
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Security check & tests
+        run: |
+          npm run security:check
+          npm test -- --passWithNoTests
+
+      - name: Build Next.js
+        run: npm run build
+
+      - name: Verify build output
+        run: |
+          if [ ! -d "out" ]; then
+            echo "ERROR: out/ directory not found after build"
+            exit 1
+          fi
+          echo "Build output verified: $(find out -type f | wc -l) files"
+
+      - name: Setup AWS
+        run: |
+          pip3 install -q --break-system-packages awscli
+          aws configure set aws_access_key_id "${{ secrets.AWS_ACCESS_KEY_ID }}"
+          aws configure set aws_secret_access_key "${{ secrets.AWS_SECRET_ACCESS_KEY }}"
+          aws configure set region ${{ env.AWS_REGION }}
+
+      - name: Deploy to S3 & invalidate CloudFront
+        run: |
+          # HTML files — no cache
+          aws s3 sync out/ s3://$S3_BUCKET/ \
+            --delete \
+            --exclude "*" \
+            --include "*.html" \
+            --cache-control "public, max-age=0, must-revalidate" \
+            --content-type "text/html"
+
+          # Next.js assets — immutable
+          aws s3 sync out/_next/ s3://$S3_BUCKET/_next/ \
+            --cache-control "public, max-age=31536000, immutable"
+
+          # Everything else — 24h cache
+          aws s3 sync out/ s3://$S3_BUCKET/ \
+            --exclude "*.html" \
+            --exclude "_next/*" \
+            --cache-control "public, max-age=86400"
+
+          aws cloudfront create-invalidation \
+            --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} \
+            --paths "/*"
+
+  # ── Job 3: API & Migrations Deploy ──────────────────────────────────
+  deploy-api:
+    runs-on: ubuntu-latest
+    needs: detect
+    if: needs.detect.outputs.api == 'true' || needs.detect.outputs.migrations == 'true'
+    steps:
+      - name: Setup AWS
+        run: |
+          pip3 install -q --break-system-packages awscli
+          aws configure set aws_access_key_id "${{ secrets.AWS_ACCESS_KEY_ID }}"
+          aws configure set aws_secret_access_key "${{ secrets.AWS_SECRET_ACCESS_KEY }}"
+          aws configure set region ${{ env.AWS_REGION }}
+
+      - name: Run database migrations
+        if: needs.detect.outputs.migrations == 'true'
+        run: |
+          cat > /tmp/migrate-params.json << 'PARAMS'
+          {"commands":["set -e","cd /tmp","rm -rf repo.tar.gz filamenteka","curl -sf -o repo.tar.gz https://git.demirix.dev/dax/Filamenteka/archive/main.tar.gz","tar xzf repo.tar.gz","docker exec filamenteka-api rm -rf /database","docker cp filamenteka/database filamenteka-api:/database","docker cp filamenteka/api/migrate.js filamenteka-api:/app/migrate.js","rm -rf repo.tar.gz filamenteka","docker exec filamenteka-api ls /database/schema.sql /database/migrations/","docker exec -w /app filamenteka-api node migrate.js"]}
+          PARAMS
+          CMD_ID=$(aws ssm send-command \
+            --region $AWS_REGION \
+            --instance-ids "$INSTANCE_ID" \
+            --document-name "AWS-RunShellScript" \
+            --parameters file:///tmp/migrate-params.json \
+            --query "Command.CommandId" --output text)
+
+          echo "Migration SSM command: $CMD_ID"
+
+          # Poll for completion (max 2 minutes)
+          for i in $(seq 1 24); do
+            sleep 5
+            STATUS=$(aws ssm get-command-invocation \
+              --command-id "$CMD_ID" \
+              --instance-id "$INSTANCE_ID" \
+              --query "Status" --output text 2>/dev/null || echo "Pending")
+
+            echo "Attempt $i: $STATUS"
+
+            if [ "$STATUS" = "Success" ]; then
+              echo "Migrations completed successfully"
+              aws ssm get-command-invocation \
+                --command-id "$CMD_ID" \
+                --instance-id "$INSTANCE_ID" \
+                --query "StandardOutputContent" --output text
+              break
+            elif [ "$STATUS" = "Failed" ] || [ "$STATUS" = "Cancelled" ] || [ "$STATUS" = "TimedOut" ]; then
+              echo "Migration failed with status: $STATUS"
+              aws ssm get-command-invocation \
+                --command-id "$CMD_ID" \
+                --instance-id "$INSTANCE_ID" \
+                --query "StandardErrorContent" --output text
+              exit 1
+            fi
+          done
+
+          if [ "$STATUS" != "Success" ]; then
+            echo "Migration timed out after 2 minutes"
+            exit 1
+          fi
+
+      - name: Deploy server.js
+        id: deploy
+        run: |
+          cat > /tmp/deploy-params.json << 'PARAMS'
+          {"commands":["set -e","docker exec filamenteka-api cp /app/server.js /app/server.js.backup","curl -sf -o /tmp/server.js https://git.demirix.dev/dax/Filamenteka/raw/branch/main/api/server.js","docker cp /tmp/server.js filamenteka-api:/app/server.js","rm -f /tmp/server.js","docker restart filamenteka-api","echo API deployed and restarted"]}
+          PARAMS
+          CMD_ID=$(aws ssm send-command \
+            --region $AWS_REGION \
+            --instance-ids "$INSTANCE_ID" \
+            --document-name "AWS-RunShellScript" \
+            --parameters file:///tmp/deploy-params.json \
+            --query "Command.CommandId" --output text)
+
+          echo "Deploy SSM command: $CMD_ID"
+
+          for i in $(seq 1 24); do
+            sleep 5
+            STATUS=$(aws ssm get-command-invocation \
+              --command-id "$CMD_ID" \
+              --instance-id "$INSTANCE_ID" \
+              --query "Status" --output text 2>/dev/null || echo "Pending")
+
+            echo "Attempt $i: $STATUS"
+
+            if [ "$STATUS" = "Success" ]; then
+              echo "API deploy completed"
+              break
+            elif [ "$STATUS" = "Failed" ] || [ "$STATUS" = "Cancelled" ] || [ "$STATUS" = "TimedOut" ]; then
+              echo "API deploy failed with status: $STATUS"
+              aws ssm get-command-invocation \
+                --command-id "$CMD_ID" \
+                --instance-id "$INSTANCE_ID" \
+                --query "StandardErrorContent" --output text
+              exit 1
+            fi
+          done
+
+          if [ "$STATUS" != "Success" ]; then
+            echo "API deploy timed out"
+            exit 1
+          fi
+
+      - name: Health check
+        id: health
+        run: |
+          echo "Waiting for API to be ready..."
+          for i in $(seq 1 6); do
+            HTTP_CODE=$(curl -s -o /dev/null -w "%{http_code}" https://api.filamenteka.rs/api/filaments || echo "000")
+            echo "Health check attempt $i: HTTP $HTTP_CODE"
+
+            if [ "$HTTP_CODE" = "200" ]; then
+              echo "API is healthy"
+              exit 0
+            fi
+            sleep 5
+          done
+
+          echo "Health check failed after 6 attempts"
+          exit 1
+
+      - name: Rollback on failure
+        if: failure() && steps.deploy.outcome == 'success'
+        run: |
+          echo "Rolling back to server.js.backup..."
+          cat > /tmp/rollback-params.json << 'PARAMS'
+          {"commands":["docker exec filamenteka-api sh -c 'if [ -f /app/server.js.backup ]; then cp /app/server.js.backup /app/server.js; fi'","docker restart filamenteka-api","echo Rollback complete"]}
+          PARAMS
+          aws ssm send-command \
+            --region $AWS_REGION \
+            --instance-ids "$INSTANCE_ID" \
+            --document-name "AWS-RunShellScript" \
+            --parameters file:///tmp/rollback-params.json \
+            --output json
+          echo "Rollback command sent"
+
+  # ── Job 4: Tag Successful Deploy ────────────────────────────────────
+  tag-deploy:
+    runs-on: ubuntu-latest
+    needs: [detect, deploy-frontend, deploy-api]
+    if: >-
+      always() &&
+      needs.detect.result == 'success' &&
+      (needs.deploy-frontend.result == 'success' || needs.deploy-frontend.result == 'skipped') &&
+      (needs.deploy-api.result == 'success' || needs.deploy-api.result == 'skipped') &&
+      !(needs.deploy-frontend.result == 'skipped' && needs.deploy-api.result == 'skipped')
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+          token: ${{ github.token }}
+
+      - name: Create deploy tag
+        run: |
+          TAG="deploy-$(date -u +%Y%m%d-%H%M%S)"
+          git tag "$TAG"
+          git push origin "$TAG"
+          echo "Tagged successful deploy: $TAG"

.gitignore

@@ -38,8 +38,8 @@ lerna-debug.log*
 
 # Terraform
 terraform/.terraform/
-terraform/*.tfstate
+*.tfstate
-terraform/*.tfstate.*
+*.tfstate.*
 terraform/*.tfvars
 terraform/.terraform.lock.hcl
 terraform/crash.log
@@ -49,3 +49,18 @@ terraform/override.tf
 terraform/override.tf.json
 terraform/*_override.tf
 terraform/*_override.tf.json
+
+# Temporary scripts
+force-*.sh
+quick-fix-*.sh
+temp-*.sh
+
+# Lambda packages
+lambda/*.zip
+lambda/**/node_modules/
+
+# MCP config (local dev tooling)
+.mcp.json
+
+# Images/screenshots
+*.png

CLAUDE.md

@@ -0,0 +1,132 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+Filamenteka is a 3D printing filament inventory management system for tracking Bambu Lab filaments. It consists of:
+- **Frontend**: Next.js app with React, TypeScript, and Tailwind CSS (static export to `/out`)
+- **Backend**: Node.js Express API server (`/api/server.js`) with PostgreSQL database
+- **Infrastructure**: AWS (CloudFront + S3 for frontend, EC2 for API, RDS for database)
+- **Repository**: `git.demirix.dev/dax/Filamenteka`
+
+## Critical Rules
+
+- NEVER mention ANY author in commits. No author tags or attribution of any kind
+- Build for AMD64 Linux when deploying (development is on ARM macOS)
+- Always run security checks before commits (Husky pre-commit hook does this automatically)
+
+## Common Commands
+
+```bash
+# Development
+npm run dev              # Start Next.js dev server (port 3000)
+npm run build            # Build static export to /out
+npm run lint             # ESLint
+npm test                 # Jest tests
+npm run test:watch       # Jest watch mode
+npm test -- --testPathPattern=__tests__/components/ColorCell  # Run single test file
+
+# API Development
+cd api && npm run dev    # Start API with nodemon (port 4000)
+
+# Quality Gates
+npm run security:check   # Credential leak detection
+npm run test:build       # Verify build succeeds without deploying
+npx tsc --noEmit         # TypeScript type checking
+
+# Database
+npm run migrate          # Run pending migrations locally
+scripts/update-db-via-aws.sh  # Run migrations on production RDS via EC2
+
+# Deployment (auto via CI/CD on push to main, or manual)
+scripts/deploy-api-update.sh  # Deploy API to EC2 via AWS SSM
+scripts/deploy-frontend.sh    # Manual frontend deploy to S3/CloudFront
+```
+
+## Architecture
+
+### Frontend (Next.js App Router)
+- `/app/page.tsx` — Public filament inventory table (home page)
+- `/app/upadaj/` — Admin panel: login, `/dashboard` (filament CRUD), `/colors` (color management), `/requests` (customer color requests)
+- `/src/services/api.ts` — Axios instance with auth interceptors (auto token injection, 401/403 redirect)
+- `/src/data/bambuLabColors.ts` — Primary color-to-hex mapping with gradient support (used by `ColorCell` component)
+- `/src/data/bambuLabColorsComplete.ts` — Extended color database grouped by finish type (used by filters)
+
+### API (`/api/server.js`)
+Single-file Express server running on EC2 (port 80). All routes inline.
+- Endpoints: `/api/login`, `/api/filaments`, `/api/colors`, `/api/sale/bulk`, `/api/color-requests`
+- Auth: JWT tokens with 24h expiry, single admin user (password from `ADMIN_PASSWORD` env var)
+
+### Database (PostgreSQL on RDS)
+Key schemas and constraints:
+
+```
+filaments: id, tip (material), finish, boja (color), refill, spulna, kolicina, cena, sale_*
+colors: id, name, hex, cena_refill (default 3499), cena_spulna (default 3999)
+color_requests: id, color_name, message, contact_name, contact_phone, status
+```
+
+**Critical constraints:**
+- `filaments.boja` → FK to `colors.name` (ON UPDATE CASCADE) — colors must exist before filaments reference them
+- `kolicina = refill + spulna` — enforced by check constraint
+- Migrations in `/database/migrations/` with sequential numbering (currently up to `020_`)
+
+## Key Patterns
+
+### Color Management (two-layer system)
+1. **Database `colors` table**: Defines valid color names + pricing. Must be populated first due to FK constraint.
+2. **Frontend `bambuLabColors.ts`**: Maps color names → hex codes for UI display. Supports solid (`hex: '#FF0000'`) and gradient (`hex: ['#HEX1', '#HEX2'], isGradient: true`).
+3. Color names must match exactly between `colors.name`, `filaments.boja`, and `bambuLabColors.ts` keys.
+4. The `ColorCell` component renders table row backgrounds from these mappings.
+
+### Adding New Colors
+1. Add to database `colors` table (via admin panel at `/upadaj/colors` or migration)
+2. Add hex mapping to `src/data/bambuLabColors.ts`
+3. Optionally add to `src/data/bambuLabColorsComplete.ts` finish groups
+
+### API Communication
+- Service modules in `src/services/api.ts`: `authService`, `colorService`, `filamentService`, `colorRequestService`
+- Auth token stored in localStorage with 24h expiry
+- Cache busting on filament fetches via timestamp query param
+
+## CI/CD (Gitea Actions)
+
+`.gitea/workflows/deploy.yml` triggers on push to `main`. Auto-detects changes via `git diff HEAD~1`:
+- **Frontend changes** (anything outside `api/`): security check → tests → build → S3 deploy (3-tier cache: HTML no-cache, `_next/` immutable, rest 24h) → CloudFront invalidation
+- **API changes** (`api/` files): SSM command to EC2 to pull `server.js` from Gitea and restart `node-api` service
+- Both run if both changed in a single push
+
+## Deployment Details
+
+| Component | Target | Method |
+|-----------|--------|--------|
+| Frontend | S3 `filamenteka-frontend` → CloudFront | Static export, OAC-protected |
+| API | EC2 `i-03956ecf32292d7d9` | SSM, systemd `node-api` service |
+| Database | RDS `filamenteka.ci7fsdlbzmag.eu-central-1.rds.amazonaws.com` | Migrations via `scripts/update-db-via-aws.sh` |
+| DNS | Cloudflare | `api.filamenteka.rs` → EC2 |
+| IaC | `/terraform/` | VPC, EC2, RDS, ALB, CloudFront, Cloudflare |
+
+## Environment Variables
+
+```bash
+# Frontend (.env.local)
+NEXT_PUBLIC_API_URL=https://api.filamenteka.rs/api
+NEXT_PUBLIC_MATOMO_URL=https://analytics.demirix.dev
+NEXT_PUBLIC_MATOMO_SITE_ID=7
+
+# API Server (.env in /api)
+DATABASE_URL=postgresql://filamenteka_admin:PASSWORD@filamenteka.ci7fsdlbzmag.eu-central-1.rds.amazonaws.com:5432/filamenteka
+JWT_SECRET=...
+ADMIN_PASSWORD=...
+NODE_ENV=production
+PORT=80
+```
+
+## Pre-commit Hooks (Husky)
+
+`scripts/pre-commit.sh` runs automatically and blocks commits that fail:
+1. Author mention check (blocks attribution)
+2. Security check (credential leaks)
+3. Build test (ensures compilation)
+4. Unit tests (`jest --passWithNoTests`)

README.md

@@ -1,38 +1,41 @@
 # Filamenteka
 
-A web application for tracking Bambu Lab filament inventory with automatic color coding, synced from Confluence documentation.
+A web application for tracking Bambu Lab filament inventory with automatic color coding.
 
 ## Features
 
-- 🎨 **Automatic Color Coding** - Table rows are automatically colored based on filament colors
+- Automatic Color Coding - Table rows are automatically colored based on filament colors
-- 🔄 **Confluence Sync** - Pulls filament data from Confluence table every 5 minutes
+- Search & Filter - Quick search across all filament properties
-- 🔍 **Search & Filter** - Quick search across all filament properties
+- Sortable Columns - Click headers to sort by any column
-- 📊 **Sortable Columns** - Click headers to sort by any column
+- Gradient Support - Special handling for gradient filaments like Cotton Candy Cloud
-- 🌈 **Gradient Support** - Special handling for gradient filaments like Cotton Candy Cloud
+- Responsive Design - Works on desktop and mobile devices
-- 📱 **Responsive Design** - Works on desktop and mobile devices
+- Sale Management - Bulk sale pricing with countdown timers
+- Admin Panel - Protected dashboard for inventory management
+- Spool Types - Support for both regular and refill spools
 
 ## Technology Stack
 
-- **Frontend**: React + TypeScript + Tailwind CSS
+- **Frontend**: Next.js + React + TypeScript + Tailwind CSS
-- **Backend**: API routes for Confluence integration
+- **Backend**: Node.js API server (Express)
-- **Infrastructure**: AWS Amplify (Frankfurt region)
+- **Database**: PostgreSQL (AWS RDS)
+- **Infrastructure**: AWS CloudFront + S3 (Frontend), EC2 (API), RDS (Database)
+- **CI/CD**: Gitea Actions
 - **IaC**: Terraform
 
 ## Prerequisites
 
 - Node.js 18+ and npm
-- AWS Account
+- PostgreSQL (for local development)
-- Terraform 1.0+
+- AWS Account (for deployment)
-- GitHub account
+- Terraform 1.0+ (for infrastructure)
-- Confluence account with API access
 
 ## Setup Instructions
 
 ### 1. Clone the Repository
 
 ```bash
-git clone https://github.com/yourusername/filamenteka.git
+git clone https://git.demirix.dev/DaX/Filamenteka.git
-cd filamenteka
+cd Filamenteka
 ```
 
 ### 2. Install Dependencies
@@ -41,12 +44,13 @@ cd filamenteka
 npm install
 ```
 
-### 3. Configure Confluence Access
+### 3. Environment Setup
 
-Create a Confluence API token:
+Create a `.env.local` file for local development:
-1. Go to https://id.atlassian.com/manage-profile/security/api-tokens
+
-2. Create a new API token
+```bash
-3. Note your Confluence domain and the page ID containing your filament table
+NEXT_PUBLIC_API_URL=http://localhost:4000/api
+```
 
 ### 4. Deploy with Terraform
 
@@ -60,41 +64,35 @@ terraform plan
 terraform apply
 ```
 
-### 5. Environment Variables
-
-The following environment variables are needed:
-- `CONFLUENCE_API_URL` - Your Confluence instance URL (e.g., https://your-domain.atlassian.net)
-- `CONFLUENCE_TOKEN` - Your Confluence API token
-- `CONFLUENCE_PAGE_ID` - The ID of the Confluence page containing the filament table
-
 ## Local Development
 
 ```bash
-# Create .env file for local development
-cat > .env << EOF
-CONFLUENCE_API_URL=https://your-domain.atlassian.net
-CONFLUENCE_TOKEN=your_api_token
-CONFLUENCE_PAGE_ID=your_page_id
-EOF
-
 # Run development server
 npm run dev
+
+# Run tests
+npm test
+
+# Run linting
+npm run lint
+
+# Check for security issues
+npm run security:check
 ```
 
-Visit http://localhost:5173 to see the app.
+Visit http://localhost:3000 to see the app.
 
 ## Table Format
 
-Your Confluence table should have these columns:
+The filament table displays these columns:
-- **Brand** - Manufacturer (e.g., BambuLab)
 - **Tip** - Material type (e.g., PLA, PETG, ABS)
 - **Finish** - Finish type (e.g., Basic, Matte, Silk)
 - **Boja** - Color name (e.g., Mistletoe Green, Hot Pink)
-- **Refill** - Whether it's a refill spool
+- **Refill** - Number of refill spools
-- **Vakum** - Vacuum sealed status
+- **Spulna** - Number of regular spools
-- **Otvoreno** - Opened status
+- **Kolicina** - Total quantity (refill + spulna)
-- **Količina** - Quantity
+- **Cena** - Price per unit
-- **Cena** - Price
+- **Sale** - Active sale percentage and end date
 
 ## Color Mapping
 
@@ -108,19 +106,33 @@ Unknown colors default to light gray.
 
 ## Deployment
 
-Push to the main branch to trigger automatic deployment:
+Pushing to `main` triggers automatic deployment via Gitea Actions:
+- Frontend changes are built, tested, and deployed to S3/CloudFront
+- API changes are deployed to EC2 via AWS SSM
+
+Manual deployment is also available:
 
 ```bash
-git add .
+# Frontend
-git commit -m "Update filament colors"
+./scripts/deploy-frontend.sh
-git push origin main
+
+# API
+./scripts/deploy-api-update.sh
 ```
 
-Amplify will automatically build and deploy your changes.
+## Admin Panel
+
+Access the admin panel at `/upadaj` for:
+- Managing filament inventory
+- Adding/editing/deleting filaments
+- Managing color definitions and pricing
+- Bulk sale management
 
 ## Adding New Colors
 
-To add new color mappings, edit `src/data/bambuLabColors.ts`:
+Colors can be managed through:
+1. **Admin Panel**: Navigate to `/upadaj/colors` to add colors via UI
+2. **Code**: Edit `src/data/bambuLabColors.ts` for frontend color display:
 
 ```typescript
 export const bambuLabColors: Record<string, ColorMapping> = {
@@ -129,27 +141,45 @@ export const bambuLabColors: Record<string, ColorMapping> = {
 };
 ```
 
+## Database Migrations
+
+Run database migrations:
+
+```bash
+# Run all pending migrations
+npm run migrate
+
+# Clear migration history (development only)
+npm run migrate:clear
+```
+
+## API Deployment
+
+Deploy API server updates:
+
+```bash
+# Use the deployment script
+./scripts/deploy-api-update.sh
+```
+
 ## Troubleshooting
 
-### Confluence Connection Issues
-- Verify your API token is valid
-- Check the page ID is correct
-- Ensure your Confluence user has read access to the page
-
 ### Color Not Showing
-- Check if the color name in Confluence matches exactly
+- Check if the color name matches exactly in the database
+- Ensure color exists in `colors` table
 - Add the color mapping to `bambuLabColors.ts`
 - Colors are case-insensitive but spelling must match
 
+### Build Errors
+- Run `npm run test:build` to verify build succeeds
+- Check TypeScript errors with `npx tsc --noEmit`
+- Ensure all environment variables are set
+
+### Database Connection Issues
+- Verify PostgreSQL is running
+- Check connection string in environment variables
+- Ensure database migrations have been run
+
 ## License
 
 MIT
-
-## Contributing
-
-1. Fork the repository
-2. Create a feature branch
-3. Commit your changes
-4. Push to the branch
-5. Create a Pull Request
-

__tests__/api-integration.test.ts

@@ -0,0 +1,156 @@
+import axios from 'axios';
+
+const API_URL = 'https://api.filamenteka.rs/api';
+const TEST_TIMEOUT = 30000; // 30 seconds
+
+describe.skip('API Integration Tests - Skipped (requires production API)', () => {
+  let authToken: string;
+  let createdFilamentId: string;
+
+  beforeAll(async () => {
+    // Login to get auth token
+    const loginResponse = await axios.post(`${API_URL}/login`, {
+      username: 'admin',
+      password: 'admin123'
+    });
+    authToken = loginResponse.data.token;
+  }, TEST_TIMEOUT);
+
+  afterAll(async () => {
+    // Clean up any test filaments that might have been left behind
+    if (createdFilamentId) {
+      try {
+        await axios.delete(
+          `${API_URL}/filaments/${createdFilamentId}`,
+          {
+            headers: {
+              'Authorization': `Bearer ${authToken}`
+            }
+          }
+        );
+      } catch (error) {
+        // Ignore errors - filament might already be deleted
+      }
+    }
+  }, TEST_TIMEOUT);
+
+  describe('Filament CRUD Operations', () => {
+    it('should create a new filament', async () => {
+      const newFilament = {
+        tip: 'PLA',
+        finish: 'Basic',
+        boja: 'Black',
+        boja_hex: '#000000',
+        refill: 2,
+        spulna: 1,
+        cena: '3999'
+      };
+
+      const response = await axios.post(
+        `${API_URL}/filaments`,
+        newFilament,
+        {
+          headers: {
+            'Authorization': `Bearer ${authToken}`,
+            'Content-Type': 'application/json'
+          }
+        }
+      );
+
+      expect(response.status).toBe(200);
+      expect(response.data).toHaveProperty('id');
+      expect(response.data.tip).toBe('PLA');
+      expect(response.data.boja).toBe('Black');
+      
+      // Store ID for cleanup
+      createdFilamentId = response.data.id;
+    }, TEST_TIMEOUT);
+
+    it('should retrieve all filaments including the created one', async () => {
+      const response = await axios.get(`${API_URL}/filaments`);
+
+      expect(response.status).toBe(200);
+      expect(Array.isArray(response.data)).toBe(true);
+      
+      // Find our created filament
+      const ourFilament = response.data.find((f: any) => f.id === createdFilamentId);
+      expect(ourFilament).toBeDefined();
+      expect(ourFilament.boja).toBe('Black');
+    }, TEST_TIMEOUT);
+
+    it('should update the created filament', async () => {
+      const updateData = {
+        tip: 'PETG',
+        finish: 'Silk',
+        boja: 'Blue',
+        boja_hex: '#1E88E5',
+        refill: 3,
+        spulna: 2,
+        cena: '4500'
+      };
+
+      const response = await axios.put(
+        `${API_URL}/filaments/${createdFilamentId}`,
+        updateData,
+        {
+          headers: {
+            'Authorization': `Bearer ${authToken}`,
+            'Content-Type': 'application/json'
+          }
+        }
+      );
+
+      expect(response.status).toBe(200);
+      expect(response.data.tip).toBe('PETG');
+      expect(response.data.boja).toBe('Blue');
+      expect(response.data.cena).toBe('4500');
+    }, TEST_TIMEOUT);
+
+    it('should delete the created filament', async () => {
+      const response = await axios.delete(
+        `${API_URL}/filaments/${createdFilamentId}`,
+        {
+          headers: {
+            'Authorization': `Bearer ${authToken}`
+          }
+        }
+      );
+
+      expect(response.status).toBe(200);
+
+      // Verify it's deleted
+      const getResponse = await axios.get(`${API_URL}/filaments`);
+      const deletedFilament = getResponse.data.find((f: any) => f.id === createdFilamentId);
+      expect(deletedFilament).toBeUndefined();
+    }, TEST_TIMEOUT);
+  });
+
+  describe('Error Handling', () => {
+    it('should return 401 for unauthorized requests', async () => {
+      await expect(
+        axios.post(`${API_URL}/filaments`, {}, {
+          headers: { 'Content-Type': 'application/json' }
+        })
+      ).rejects.toMatchObject({
+        response: { status: 401 }
+      });
+    });
+
+    it('should handle invalid data gracefully', async () => {
+      await expect(
+        axios.post(
+          `${API_URL}/filaments`,
+          { invalid: 'data' },
+          {
+            headers: {
+              'Authorization': `Bearer ${authToken}`,
+              'Content-Type': 'application/json'
+            }
+          }
+        )
+      ).rejects.toMatchObject({
+        response: { status: 500 }
+      });
+    });
+  });
+});

__tests__/api.test.ts

@@ -0,0 +1,230 @@
+import axios from 'axios';
+import api, { authService, colorService, filamentService } from '../src/services/api';
+
+// Get the mock axios instance that was created
+const mockAxiosInstance = (axios.create as jest.Mock).mock.results[0].value;
+
+// Mock localStorage
+const localStorageMock = {
+  getItem: jest.fn(),
+  setItem: jest.fn(),
+  removeItem: jest.fn(),
+  clear: jest.fn(),
+};
+(global as any).localStorage = localStorageMock;
+
+// Mock window.location
+const mockLocation = {
+  pathname: '/',
+  href: '',
+};
+
+// Only define location if it doesn't exist or is configurable
+if (!Object.getOwnPropertyDescriptor(window, 'location') || 
+    Object.getOwnPropertyDescriptor(window, 'location')?.configurable) {
+  Object.defineProperty(window, 'location', {
+    value: mockLocation,
+    configurable: true,
+    writable: true
+  });
+} else {
+  // If location exists and is not configurable, we'll work with the existing object
+  Object.assign(window.location, mockLocation);
+}
+
+describe('API Service Tests', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    
+    // Clear localStorage mocks
+    localStorageMock.getItem.mockClear();
+    localStorageMock.removeItem.mockClear();
+    localStorageMock.setItem.mockClear();
+    
+    // Reset window location
+    mockLocation.pathname = '/';
+    mockLocation.href = '';
+  });
+
+  describe('Auth Service', () => {
+    it('should login successfully', async () => {
+      const mockResponse = { data: { token: 'test-token', user: 'admin' } };
+      mockAxiosInstance.post.mockResolvedValue(mockResponse);
+
+      const result = await authService.login('admin', 'password123');
+
+      expect(mockAxiosInstance.post).toHaveBeenCalledWith('/login', {
+        username: 'admin',
+        password: 'password123'
+      });
+      expect(result).toEqual(mockResponse.data);
+    });
+
+    it('should handle login failure', async () => {
+      const error = new Error('Invalid credentials');
+      mockAxiosInstance.post.mockRejectedValue(error);
+
+      await expect(authService.login('admin', 'wrong')).rejects.toThrow('Invalid credentials');
+    });
+  });
+
+  describe('Color Service', () => {
+    it('should get all colors', async () => {
+      const mockColors = [
+        { id: '1', name: 'Red', hex: '#FF0000' },
+        { id: '2', name: 'Blue', hex: '#0000FF' }
+      ];
+      mockAxiosInstance.get.mockResolvedValue({ data: mockColors });
+
+      const result = await colorService.getAll();
+
+      expect(mockAxiosInstance.get).toHaveBeenCalledWith('/colors');
+      expect(result).toEqual(mockColors);
+    });
+
+    it('should create a color', async () => {
+      const newColor = { name: 'Green', hex: '#00FF00', cena_refill: 100, cena_spulna: 150 };
+      const mockResponse = { id: '3', ...newColor };
+      mockAxiosInstance.post.mockResolvedValue({ data: mockResponse });
+
+      const result = await colorService.create(newColor);
+
+      expect(mockAxiosInstance.post).toHaveBeenCalledWith('/colors', newColor);
+      expect(result).toEqual(mockResponse);
+    });
+
+    it('should update a color', async () => {
+      const colorId = '1';
+      const updateData = { name: 'Dark Red', hex: '#8B0000' };
+      const mockResponse = { id: colorId, ...updateData };
+      mockAxiosInstance.put.mockResolvedValue({ data: mockResponse });
+
+      const result = await colorService.update(colorId, updateData);
+
+      expect(mockAxiosInstance.put).toHaveBeenCalledWith(`/colors/${colorId}`, updateData);
+      expect(result).toEqual(mockResponse);
+    });
+
+    it('should delete a color', async () => {
+      const colorId = '1';
+      const mockResponse = { success: true };
+      mockAxiosInstance.delete.mockResolvedValue({ data: mockResponse });
+
+      const result = await colorService.delete(colorId);
+
+      expect(mockAxiosInstance.delete).toHaveBeenCalledWith(`/colors/${colorId}`);
+      expect(result).toEqual(mockResponse);
+    });
+  });
+
+  describe('Filament Service', () => {
+    it('should get all filaments with cache buster', async () => {
+      const mockFilaments = [
+        { id: '1', tip: 'PLA', boja: 'Red' },
+        { id: '2', tip: 'PETG', boja: 'Blue' }
+      ];
+      mockAxiosInstance.get.mockResolvedValue({ data: mockFilaments });
+
+      // Mock Date.now()
+      const originalDateNow = Date.now;
+      const mockTimestamp = 1234567890;
+      Date.now = jest.fn(() => mockTimestamp);
+
+      const result = await filamentService.getAll();
+
+      expect(mockAxiosInstance.get).toHaveBeenCalledWith(`/filaments?_t=${mockTimestamp}`);
+      expect(result).toEqual(mockFilaments);
+
+      // Restore Date.now
+      Date.now = originalDateNow;
+    });
+
+    it('should create a filament', async () => {
+      const newFilament = {
+        tip: 'ABS',
+        finish: 'Matte',
+        boja: 'Black',
+        boja_hex: '#000000'
+      };
+      const mockResponse = { id: '3', ...newFilament };
+      mockAxiosInstance.post.mockResolvedValue({ data: mockResponse });
+
+      const result = await filamentService.create(newFilament);
+
+      expect(mockAxiosInstance.post).toHaveBeenCalledWith('/filaments', newFilament);
+      expect(result).toEqual(mockResponse);
+    });
+
+    it('should update a filament', async () => {
+      const filamentId = '1';
+      const updateData = {
+        tip: 'PLA+',
+        finish: 'Silk',
+        cena: '4500'
+      };
+      const mockResponse = { id: filamentId, ...updateData };
+      mockAxiosInstance.put.mockResolvedValue({ data: mockResponse });
+
+      const result = await filamentService.update(filamentId, updateData);
+
+      expect(mockAxiosInstance.put).toHaveBeenCalledWith(`/filaments/${filamentId}`, updateData);
+      expect(result).toEqual(mockResponse);
+    });
+
+    it('should delete a filament', async () => {
+      const filamentId = '1';
+      const mockResponse = { success: true };
+      mockAxiosInstance.delete.mockResolvedValue({ data: mockResponse });
+
+      const result = await filamentService.delete(filamentId);
+
+      expect(mockAxiosInstance.delete).toHaveBeenCalledWith(`/filaments/${filamentId}`);
+      expect(result).toEqual(mockResponse);
+    });
+
+    it('should update bulk sale', async () => {
+      const saleData = {
+        filamentIds: ['1', '2', '3'],
+        salePercentage: 20,
+        saleStartDate: '2024-01-01',
+        saleEndDate: '2024-01-31',
+        enableSale: true
+      };
+      const mockResponse = { updated: 3, success: true };
+      mockAxiosInstance.post.mockResolvedValue({ data: mockResponse });
+
+      const result = await filamentService.updateBulkSale(saleData);
+
+      expect(mockAxiosInstance.post).toHaveBeenCalledWith('/filaments/sale/bulk', saleData);
+      expect(result).toEqual(mockResponse);
+    });
+  });
+
+  describe('Interceptors', () => {
+    it('should have interceptors configured', () => {
+      expect(mockAxiosInstance.interceptors).toBeDefined();
+      expect(mockAxiosInstance.interceptors.request).toBeDefined();
+      expect(mockAxiosInstance.interceptors.response).toBeDefined();
+    });
+
+    it('should have request interceptor set up', () => {
+      const mockRequestUse = mockAxiosInstance.interceptors.request.use;
+      expect(mockRequestUse).toBeDefined();
+    });
+
+    it('should have response interceptor set up', () => {
+      const mockResponseUse = mockAxiosInstance.interceptors.response.use;
+      expect(mockResponseUse).toBeDefined();
+    });
+  });
+
+  describe('API configuration', () => {
+    it('should export the configured axios instance', () => {
+      expect(api).toBe(mockAxiosInstance);
+    });
+
+    it('should have axios instance defined', () => {
+      expect(mockAxiosInstance).toBeDefined();
+    });
+  });
+});

__tests__/color-management.test.ts

@@ -0,0 +1,154 @@
+import axios from 'axios';
+
+const API_URL = 'https://api.filamenteka.rs/api';
+const TEST_TIMEOUT = 30000;
+
+describe.skip('Color Management Tests - Skipped: API endpoints not deployed', () => {
+  let authToken: string;
+  let createdColorId: string;
+
+  beforeAll(async () => {
+    // Login to get auth token
+    const loginResponse = await axios.post(`${API_URL}/login`, {
+      username: 'admin',
+      password: 'admin123'
+    });
+    authToken = loginResponse.data.token;
+  }, TEST_TIMEOUT);
+
+  afterAll(async () => {
+    // Clean up any test colors that might have been left behind
+    if (createdColorId) {
+      try {
+        await axios.delete(
+          `${API_URL}/colors/${createdColorId}`,
+          {
+            headers: {
+              'Authorization': `Bearer ${authToken}`
+            }
+          }
+        );
+      } catch (error) {
+        // Ignore errors - color might already be deleted
+      }
+    }
+  }, TEST_TIMEOUT);
+
+  describe('Color CRUD Operations', () => {
+    it('should create a new color with "Test" prefix', async () => {
+      const testColor = {
+        name: 'Test Color ' + Date.now(), // Unique name to avoid conflicts
+        hex: '#FF00FF'
+      };
+
+      const response = await axios.post(
+        `${API_URL}/colors`,
+        testColor,
+        {
+          headers: {
+            'Authorization': `Bearer ${authToken}`,
+            'Content-Type': 'application/json'
+          }
+        }
+      );
+
+      expect(response.status).toBe(200);
+      expect(response.data).toHaveProperty('id');
+      expect(response.data.name).toBe(testColor.name);
+      expect(response.data.hex).toBe(testColor.hex);
+      
+      // Store ID for cleanup
+      createdColorId = response.data.id;
+    }, TEST_TIMEOUT);
+
+    it('should retrieve the created test color', async () => {
+      const response = await axios.get(`${API_URL}/colors`);
+
+      expect(response.status).toBe(200);
+      expect(Array.isArray(response.data)).toBe(true);
+      
+      // Find our created color
+      const ourColor = response.data.find((c: any) => c.id === createdColorId);
+      expect(ourColor).toBeDefined();
+      expect(ourColor.name).toContain('Test Color');
+    }, TEST_TIMEOUT);
+
+    it('should update the test color', async () => {
+      const updateData = {
+        name: 'Test Color Updated ' + Date.now(),
+        hex: '#00FF00'
+      };
+
+      const response = await axios.put(
+        `${API_URL}/colors/${createdColorId}`,
+        updateData,
+        {
+          headers: {
+            'Authorization': `Bearer ${authToken}`,
+            'Content-Type': 'application/json'
+          }
+        }
+      );
+
+      expect(response.status).toBe(200);
+      expect(response.data.name).toBe(updateData.name);
+      expect(response.data.hex).toBe(updateData.hex);
+    }, TEST_TIMEOUT);
+
+    it('should delete the test color', async () => {
+      const response = await axios.delete(
+        `${API_URL}/colors/${createdColorId}`,
+        {
+          headers: {
+            'Authorization': `Bearer ${authToken}`
+          }
+        }
+      );
+
+      expect(response.status).toBe(200);
+
+      // Verify it's deleted
+      const getResponse = await axios.get(`${API_URL}/colors`);
+      const deletedColor = getResponse.data.find((c: any) => c.id === createdColorId);
+      expect(deletedColor).toBeUndefined();
+
+      // Clear the ID since it's deleted
+      createdColorId = '';
+    }, TEST_TIMEOUT);
+  });
+
+  describe('Cleanup Test Colors', () => {
+    it('should clean up any colors starting with "Test"', async () => {
+      // Get all colors
+      const response = await axios.get(`${API_URL}/colors`);
+      const testColors = response.data.filter((c: any) => 
+        c.name.startsWith('Test') || c.name.toLowerCase().includes('test')
+      );
+
+      // Delete each test color
+      for (const color of testColors) {
+        try {
+          await axios.delete(
+            `${API_URL}/colors/${color.id}`,
+            {
+              headers: {
+                'Authorization': `Bearer ${authToken}`
+              }
+            }
+          );
+          console.log(`Cleaned up test color: ${color.name}`);
+        } catch (error) {
+          console.error(`Failed to clean up color ${color.name}:`, error.message);
+        }
+      }
+
+      // Verify cleanup
+      const verifyResponse = await axios.get(`${API_URL}/colors`);
+      const remainingTestColors = verifyResponse.data.filter((c: any) => 
+        c.name.startsWith('Test') || c.name.toLowerCase().includes('test')
+      );
+      
+      expect(remainingTestColors.length).toBe(0);
+    }, TEST_TIMEOUT);
+  });
+});

__tests__/components/BackToTop.test.tsx

@@ -0,0 +1,148 @@
+import React from 'react';
+import { render, fireEvent, act } from '@testing-library/react';
+import { BackToTop } from '@/src/components/BackToTop';
+
+// Mock window properties
+global.scrollTo = jest.fn();
+Object.defineProperty(window, 'pageYOffset', {
+  writable: true,
+  configurable: true,
+  value: 0,
+});
+
+describe('BackToTop', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    window.pageYOffset = 0;
+  });
+
+  it('does not render button when at top of page', () => {
+    const { container } = render(<BackToTop />);
+    const button = container.querySelector('button');
+    expect(button).not.toBeInTheDocument();
+  });
+
+  it('renders button when scrolled down', () => {
+    const { container } = render(<BackToTop />);
+    
+    // Simulate scroll down
+    act(() => {
+      window.pageYOffset = 400;
+      fireEvent.scroll(window);
+    });
+    
+    const button = container.querySelector('button');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('hides button when scrolled back up', () => {
+    const { container } = render(<BackToTop />);
+    
+    // Scroll down first
+    act(() => {
+      window.pageYOffset = 400;
+      fireEvent.scroll(window);
+    });
+    
+    expect(container.querySelector('button')).toBeInTheDocument();
+    
+    // Scroll back up
+    act(() => {
+      window.pageYOffset = 100;
+      fireEvent.scroll(window);
+    });
+    
+    expect(container.querySelector('button')).not.toBeInTheDocument();
+  });
+
+  it('scrolls to top when clicked', () => {
+    const { container } = render(<BackToTop />);
+    
+    // Make button visible
+    act(() => {
+      window.pageYOffset = 400;
+      fireEvent.scroll(window);
+    });
+    
+    const button = container.querySelector('button');
+    fireEvent.click(button!);
+    
+    expect(global.scrollTo).toHaveBeenCalledWith({
+      top: 0,
+      behavior: 'smooth'
+    });
+  });
+
+  it('has correct styling when visible', () => {
+    const { container } = render(<BackToTop />);
+    
+    // Make button visible
+    act(() => {
+      window.pageYOffset = 400;
+      fireEvent.scroll(window);
+    });
+    
+    const button = container.querySelector('button');
+    
+    expect(button).toHaveClass('fixed');
+    expect(button).toHaveClass('bottom-8');
+    expect(button).toHaveClass('right-8');
+    expect(button).toHaveClass('bg-blue-600');
+    expect(button).toHaveClass('text-white');
+    expect(button).toHaveClass('rounded-full');
+    expect(button).toHaveClass('shadow-lg');
+  });
+
+  it('has hover effect', () => {
+    const { container } = render(<BackToTop />);
+    
+    // Make button visible
+    act(() => {
+      window.pageYOffset = 400;
+      fireEvent.scroll(window);
+    });
+    
+    const button = container.querySelector('button');
+    expect(button).toHaveClass('hover:bg-blue-700');
+    expect(button).toHaveClass('hover:scale-110');
+  });
+
+  it('contains arrow icon', () => {
+    const { container } = render(<BackToTop />);
+    
+    // Make button visible
+    act(() => {
+      window.pageYOffset = 400;
+      fireEvent.scroll(window);
+    });
+    
+    const svg = container.querySelector('svg');
+    
+    expect(svg).toBeInTheDocument();
+    expect(svg).toHaveClass('w-6');
+    expect(svg).toHaveClass('h-6');
+  });
+
+  it('has aria-label for accessibility', () => {
+    const { container } = render(<BackToTop />);
+    
+    // Make button visible
+    act(() => {
+      window.pageYOffset = 400;
+      fireEvent.scroll(window);
+    });
+    
+    const button = container.querySelector('button');
+    expect(button).toHaveAttribute('aria-label', 'Back to top');
+  });
+
+  it('cleans up scroll listener on unmount', () => {
+    const removeEventListenerSpy = jest.spyOn(window, 'removeEventListener');
+    const { unmount } = render(<BackToTop />);
+    
+    unmount();
+    
+    expect(removeEventListenerSpy).toHaveBeenCalledWith('scroll', expect.any(Function));
+    removeEventListenerSpy.mockRestore();
+  });
+});

__tests__/components/ColorCell.test.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ColorCell } from '@/src/components/ColorCell';
+
+// Mock the bambuLabColors module
+jest.mock('@/src/data/bambuLabColors', () => ({
+  getFilamentColor: jest.fn((colorName) => {
+    const colors = {
+      'Black': { hex: '#000000' },
+      'Red': { hex: '#FF0000' },
+      'Blue': { hex: '#0000FF' },
+      'Rainbow': { hex: ['#FF0000', '#00FF00'], isGradient: true }
+    };
+    return colors[colorName] || { hex: '#CCCCCC' };
+  }),
+  getColorStyle: jest.fn((colorMapping) => {
+    if (colorMapping.isGradient && Array.isArray(colorMapping.hex)) {
+      return {
+        background: `linear-gradient(90deg, ${colorMapping.hex[0]} 0%, ${colorMapping.hex[1]} 100%)`
+      };
+    }
+    return {
+      backgroundColor: Array.isArray(colorMapping.hex) ? colorMapping.hex[0] : colorMapping.hex
+    };
+  })
+}));
+
+describe('ColorCell', () => {
+  it('renders color name', () => {
+    const { getByText } = render(<ColorCell colorName="Black" />);
+    expect(getByText('Black')).toBeInTheDocument();
+  });
+
+  it('renders color swatch with correct style', () => {
+    const { container } = render(<ColorCell colorName="Red" />);
+    const colorDiv = container.querySelector('.w-6.h-6');
+    expect(colorDiv).toHaveStyle({ backgroundColor: '#FF0000' });
+  });
+
+  it('renders with correct dimensions', () => {
+    const { container } = render(<ColorCell colorName="Blue" />);
+    const colorDiv = container.querySelector('.w-6.h-6');
+    expect(colorDiv).toHaveClass('w-6');
+    expect(colorDiv).toHaveClass('h-6');
+  });
+
+  it('has rounded corners and border', () => {
+    const { container } = render(<ColorCell colorName="Black" />);
+    const colorDiv = container.querySelector('.w-6.h-6');
+    expect(colorDiv).toHaveClass('rounded');
+    expect(colorDiv).toHaveClass('border');
+    expect(colorDiv).toHaveClass('border-gray-300');
+  });
+
+  it('renders gradient colors', () => {
+    const { container } = render(<ColorCell colorName="Rainbow" />);
+    const colorDiv = container.querySelector('.w-6.h-6');
+    expect(colorDiv).toHaveStyle({ 
+      background: 'linear-gradient(90deg, #FF0000 0%, #00FF00 100%)' 
+    });
+  });
+
+  it('has title attribute with hex value', () => {
+    const { container } = render(<ColorCell colorName="Black" />);
+    const colorDiv = container.querySelector('.w-6.h-6');
+    expect(colorDiv).toHaveAttribute('title', '#000000');
+  });
+
+  it('has title attribute with gradient hex values', () => {
+    const { container } = render(<ColorCell colorName="Rainbow" />);
+    const colorDiv = container.querySelector('.w-6.h-6');
+    expect(colorDiv).toHaveAttribute('title', '#FF0000 - #00FF00');
+  });
+
+  it('renders with flex layout', () => {
+    const { container } = render(<ColorCell colorName="Black" />);
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveClass('flex');
+    expect(wrapper).toHaveClass('items-center');
+    expect(wrapper).toHaveClass('gap-2');
+  });
+});

__tests__/components/MaterialBadge.test.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { MaterialBadge } from '@/src/components/MaterialBadge';
+
+describe('MaterialBadge', () => {
+  describe('Material type badges', () => {
+    it('renders PLA badge with correct style', () => {
+      const { getByText } = render(<MaterialBadge base="PLA" />);
+      const badge = getByText('PLA');
+      expect(badge).toHaveClass('bg-green-100');
+      expect(badge).toHaveClass('text-green-800');
+    });
+
+    it('renders PETG badge with correct style', () => {
+      const { getByText } = render(<MaterialBadge base="PETG" />);
+      const badge = getByText('PETG');
+      expect(badge).toHaveClass('bg-blue-100');
+      expect(badge).toHaveClass('text-blue-800');
+    });
+
+    it('renders ABS badge with correct style', () => {
+      const { getByText } = render(<MaterialBadge base="ABS" />);
+      const badge = getByText('ABS');
+      expect(badge).toHaveClass('bg-red-100');
+      expect(badge).toHaveClass('text-red-800');
+    });
+
+    it('renders TPU badge with correct style', () => {
+      const { getByText } = render(<MaterialBadge base="TPU" />);
+      const badge = getByText('TPU');
+      expect(badge).toHaveClass('bg-purple-100');
+      expect(badge).toHaveClass('text-purple-800');
+    });
+  });
+
+  describe('Unknown material type', () => {
+    it('renders unknown material with default style', () => {
+      const { getByText } = render(<MaterialBadge base="UNKNOWN" />);
+      const badge = getByText('UNKNOWN');
+      expect(badge).toHaveClass('bg-gray-100');
+      expect(badge).toHaveClass('text-gray-800');
+    });
+  });
+
+  describe('With modifier', () => {
+    it('renders base and modifier', () => {
+      const { getByText } = render(<MaterialBadge base="PLA" modifier="Silk" />);
+      expect(getByText('PLA')).toBeInTheDocument();
+      expect(getByText('Silk')).toBeInTheDocument();
+    });
+
+    it('renders modifier with correct style', () => {
+      const { getByText } = render(<MaterialBadge base="PLA" modifier="Matte" />);
+      const modifier = getByText('Matte');
+      expect(modifier).toHaveClass('bg-gray-100');
+      expect(modifier).toHaveClass('text-gray-800');
+    });
+  });
+
+  describe('Common styles', () => {
+    it('has correct padding and shape', () => {
+      const { getByText } = render(<MaterialBadge base="PLA" />);
+      const badge = getByText('PLA');
+      expect(badge).toHaveClass('px-2.5');
+      expect(badge).toHaveClass('py-0.5');
+      expect(badge).toHaveClass('rounded-full');
+    });
+
+    it('has correct text size', () => {
+      const { getByText } = render(<MaterialBadge base="PLA" />);
+      const badge = getByText('PLA');
+      expect(badge).toHaveClass('text-xs');
+    });
+
+    it('has correct font weight', () => {
+      const { getByText } = render(<MaterialBadge base="PLA" />);
+      const badge = getByText('PLA');
+      expect(badge).toHaveClass('font-medium');
+    });
+
+    it('accepts custom className', () => {
+      const { container } = render(<MaterialBadge base="PLA" className="custom-class" />);
+      const wrapper = container.firstChild;
+      expect(wrapper).toHaveClass('custom-class');
+    });
+  });
+});

__tests__/data-consistency.test.ts

@@ -0,0 +1,229 @@
+import { Filament } from '../src/types/filament';
+import { Pool } from 'pg';
+
+describe('Data Structure Consistency Tests', () => {
+  const connectionString = "postgresql://filamenteka_admin:onrBjiAjHKQXBAJSVWU2t2kQ7HDil9re@filamenteka.ci7fsdlbzmag.eu-central-1.rds.amazonaws.com:5432/filamenteka";
+  
+  // Admin panel expected structure (source of truth)
+  const ADMIN_STRUCTURE = {
+    fields: [
+      'id',
+      'tip',
+      'finish', 
+      'boja',
+      'boja_hex', // Now using snake_case consistently
+      'refill',
+      'spulna',  // Frontend still uses spulna
+      'kolicina',
+      'cena',
+      'created_at',
+      'updated_at'
+    ],
+    requiredFields: ['tip', 'finish', 'boja'],
+    excludedFields: ['brand'], // Should NOT exist
+    fieldTypes: {
+      tip: 'string',
+      finish: 'string',
+      boja: 'string',
+      boja_hex: 'string',
+      refill: 'number',
+      spulna: 'number',
+      kolicina: 'number',
+      cena: 'string'
+    }
+  };
+
+  // Database expected structure
+  const DB_STRUCTURE = {
+    columns: [
+      'id',
+      'tip',
+      'finish',
+      'boja',
+      'boja_hex', // Database uses snake_case
+      'refill',
+      'spulna',
+      'kolicina',
+      'cena',
+      'created_at',
+      'updated_at'
+    ],
+    excludedColumns: ['brand'],
+    columnTypes: {
+      id: 'uuid',
+      tip: 'character varying',
+      finish: 'character varying',
+      boja: 'character varying',
+      boja_hex: 'character varying',
+      refill: 'integer',
+      spulna: 'integer',
+      kolicina: 'integer',
+      cena: 'character varying',
+      created_at: 'timestamp with time zone',
+      updated_at: 'timestamp with time zone'
+    }
+  };
+
+  describe('Admin Panel Structure', () => {
+    it('should have correct TypeScript interface', () => {
+      // Check Filament interface matches admin structure
+      const filamentKeys: (keyof Filament)[] = [
+        'id', 'tip', 'finish', 'boja', 'boja_hex',
+        'refill', 'spulna', 'kolicina', 'cena',
+        'status', 'createdAt', 'updatedAt'
+      ];
+      
+      // Should not have brand
+      expect(filamentKeys).not.toContain('brand');
+      
+      // Should have all required fields
+      ADMIN_STRUCTURE.requiredFields.forEach(field => {
+        expect(filamentKeys).toContain(field);
+      });
+    });
+
+    it('should have consistent form fields in admin dashboard', () => {
+      const formFields = [
+        'tip', 'finish', 'boja', 'boja_hex', 
+        'refill', 'spulna', 'kolicina', 'cena'
+      ];
+      
+      // Check all form fields are in admin structure
+      formFields.forEach(field => {
+        expect(ADMIN_STRUCTURE.fields).toContain(field);
+      });
+      
+      // Should not have brand in form
+      expect(formFields).not.toContain('brand');
+    });
+  });
+
+  describe('Database Schema Consistency', () => {
+    let pool: Pool;
+
+    beforeAll(() => {
+      pool = new Pool({
+        connectionString,
+        ssl: { rejectUnauthorized: false }
+      });
+    });
+
+    afterAll(async () => {
+      await pool.end();
+    });
+
+    it('should have correct columns in database', async () => {
+      const result = await pool.query(`
+        SELECT column_name, data_type 
+        FROM information_schema.columns 
+        WHERE table_name = 'filaments' 
+        ORDER BY ordinal_position
+      `);
+      
+      const columns = result.rows.map(row => row.column_name);
+      const columnTypes = result.rows.reduce((acc, row) => {
+        acc[row.column_name] = row.data_type;
+        return acc;
+      }, {} as Record<string, string>);
+
+      // Check all expected columns exist
+      DB_STRUCTURE.columns.forEach(col => {
+        expect(columns).toContain(col);
+      });
+
+      // Check no excluded columns exist
+      DB_STRUCTURE.excludedColumns.forEach(col => {
+        expect(columns).not.toContain(col);
+      });
+
+      // Check column types match
+      Object.entries(DB_STRUCTURE.columnTypes).forEach(([col, type]) => {
+        expect(columnTypes[col]).toBe(type);
+      });
+    });
+
+    it('should not have brand column', async () => {
+      const result = await pool.query(`
+        SELECT COUNT(*) as count
+        FROM information_schema.columns 
+        WHERE table_name = 'filaments' AND column_name = 'brand'
+      `);
+      
+      expect(parseInt(result.rows[0].count)).toBe(0);
+    });
+  });
+
+  describe('Frontend Consistency', () => {
+    it('should transform fields correctly between admin and database', () => {
+      // All fields now use snake_case consistently
+      const snakeCaseFields = {
+        'boja_hex': 'boja_hex',
+        'created_at': 'created_at',
+        'updated_at': 'updated_at'
+      };
+
+      Object.entries(snakeCaseFields).forEach(([adminField, dbField]) => {
+        expect(ADMIN_STRUCTURE.fields).toContain(adminField);
+        expect(DB_STRUCTURE.columns).toContain(dbField);
+      });
+    });
+
+    it('should handle quantity fields correctly', () => {
+      // Admin form shows refill, spulna as numbers
+      // Database stores them as strings like "2", "1 spulna"
+      const quantityFields = ['refill', 'spulna'];
+      
+      quantityFields.forEach(field => {
+        expect(ADMIN_STRUCTURE.fieldTypes[field]).toBe('number');
+        expect(DB_STRUCTURE.columnTypes[field]).toBe('integer');
+      });
+    });
+  });
+
+  describe('API Consistency', () => {
+    it('should handle requests without brand field', () => {
+      const validRequest = {
+        tip: 'PLA',
+        finish: 'Basic',
+        boja: 'Black',
+        boja_hex: '#000000',
+        refill: '2',
+        spulna: '1 spulna',
+        kolicina: '3',
+        cena: '3999'
+      };
+
+      // Should not have brand
+      expect(validRequest).not.toHaveProperty('brand');
+      
+      // Should have all required fields
+      expect(validRequest).toHaveProperty('tip');
+      expect(validRequest).toHaveProperty('finish');
+      expect(validRequest).toHaveProperty('boja');
+    });
+  });
+
+  describe('Data Flow Consistency', () => {
+    it('should maintain consistent data flow: Admin → API → Database', () => {
+      // Admin form data
+      const adminData = {
+        tip: 'PLA',
+        finish: 'Basic',
+        boja: 'Black',
+        boja_hex: '#000000',
+        refill: '2',
+        spulna: '1 spulna',
+        kolicina: '3',
+        cena: '3999'
+      };
+
+      // No transformation needed - using boja_hex consistently
+      const apiData = adminData;
+
+      // Database expected data
+      expect(apiData).toHaveProperty('boja_hex');
+      // No longer have bojaHex field
+      expect(apiData).not.toHaveProperty('brand');
+    });
+  });
+});

__tests__/data/bambuLabColors.test.ts

@@ -0,0 +1,100 @@
+import { bambuLabColors, getFilamentColor, getColorStyle, ColorMapping } from '@/src/data/bambuLabColors';
+
+describe('Bambu Lab Colors Data', () => {
+  describe('bambuLabColors', () => {
+    it('should have color definitions', () => {
+      expect(Object.keys(bambuLabColors).length).toBeGreaterThan(0);
+    });
+
+    it('should have correct structure for each color', () => {
+      Object.entries(bambuLabColors).forEach(([colorName, colorMapping]) => {
+        expect(colorMapping).toHaveProperty('hex');
+        expect(colorMapping.hex).toBeDefined();
+      });
+    });
+
+    it('should have known colors', () => {
+      expect(bambuLabColors).toHaveProperty('Black');
+      expect(bambuLabColors).toHaveProperty('White');
+      expect(bambuLabColors).toHaveProperty('Red');
+      expect(bambuLabColors).toHaveProperty('Blue');
+      expect(bambuLabColors).toHaveProperty('Green');
+    });
+
+    it('should have valid hex colors', () => {
+      Object.entries(bambuLabColors).forEach(([colorName, colorMapping]) => {
+        if (typeof colorMapping.hex === 'string') {
+          expect(colorMapping.hex).toMatch(/^#[0-9A-Fa-f]{6}$/);
+        } else if (Array.isArray(colorMapping.hex)) {
+          colorMapping.hex.forEach(hex => {
+            expect(hex).toMatch(/^#[0-9A-Fa-f]{6}$/);
+          });
+        }
+      });
+    });
+
+    it('should have Unknown fallback color', () => {
+      expect(bambuLabColors).toHaveProperty('Unknown');
+      expect(bambuLabColors.Unknown.hex).toBe('#CCCCCC');
+    });
+  });
+
+  describe('getFilamentColor', () => {
+    it('should return exact match', () => {
+      const result = getFilamentColor('Black');
+      expect(result).toEqual(bambuLabColors['Black']);
+    });
+
+    it('should return case-insensitive match', () => {
+      const result = getFilamentColor('black');
+      expect(result).toEqual(bambuLabColors['Black']);
+    });
+
+    it('should return partial match', () => {
+      const result = getFilamentColor('PLA Black');
+      expect(result).toEqual(bambuLabColors['Black']);
+    });
+
+    it('should return default color for non-existent color', () => {
+      const result = getFilamentColor('NonExistentColor');
+      expect(result).toBeDefined();
+      expect(result).toHaveProperty('hex');
+    });
+
+    it('should handle empty string', () => {
+      const result = getFilamentColor('');
+      expect(result).toBeDefined(); 
+      expect(result).toHaveProperty('hex');
+    });
+  });
+
+  describe('getColorStyle', () => {
+    it('should return backgroundColor for single hex color', () => {
+      const colorMapping: ColorMapping = { hex: '#FF0000' };
+      const result = getColorStyle(colorMapping);
+      expect(result).toEqual({ backgroundColor: '#FF0000' });
+    });
+
+    it('should return backgroundColor for hex array without gradient', () => {
+      const colorMapping: ColorMapping = { hex: ['#FF0000', '#00FF00'] };
+      const result = getColorStyle(colorMapping);
+      expect(result).toEqual({ backgroundColor: '#FF0000' });
+    });
+
+    it('should return gradient for isGradient true', () => {
+      const colorMapping: ColorMapping = { hex: ['#FF0000', '#00FF00'], isGradient: true };
+      const result = getColorStyle(colorMapping);
+      expect(result).toEqual({
+        background: 'linear-gradient(90deg, #FF0000 0%, #00FF00 100%)'
+      });
+    });
+
+    it('should handle gradient with more than 2 colors', () => {
+      const colorMapping: ColorMapping = { hex: ['#FF0000', '#00FF00', '#0000FF'], isGradient: true };
+      const result = getColorStyle(colorMapping);
+      expect(result).toEqual({
+        background: 'linear-gradient(90deg, #FF0000 0%, #00FF00 100%)'
+      });
+    });
+  });
+});

__tests__/data/bambuLabColorsComplete.test.ts

@@ -0,0 +1,68 @@
+import { bambuLabColors, colorsByFinish, getColorHex, getColorsForFinish } from '@/src/data/bambuLabColorsComplete';
+
+describe('Bambu Lab Colors Complete Data', () => {
+  it('should have color definitions', () => {
+    expect(bambuLabColors).toBeDefined();
+    expect(typeof bambuLabColors).toBe('object');
+    expect(Object.keys(bambuLabColors).length).toBeGreaterThan(0);
+  });
+
+  it('should have basic colors', () => {
+    expect(bambuLabColors).toHaveProperty('Black');
+    expect(bambuLabColors).toHaveProperty('White');
+    expect(bambuLabColors).toHaveProperty('Red');
+    expect(bambuLabColors).toHaveProperty('Blue');
+  });
+
+  it('should have matte colors', () => {
+    expect(bambuLabColors).toHaveProperty('Matte Ivory White');
+    expect(bambuLabColors).toHaveProperty('Matte Charcoal');
+    expect(bambuLabColors).toHaveProperty('Matte Scarlet Red');
+  });
+
+  it('should have silk colors', () => {
+    expect(bambuLabColors).toHaveProperty('Silk Aurora Purple');
+    expect(bambuLabColors).toHaveProperty('Silk Phantom Blue');
+    expect(bambuLabColors).toHaveProperty('Silk Mystic Magenta');
+  });
+
+  it('should have valid hex colors', () => {
+    Object.entries(bambuLabColors).forEach(([colorName, hex]) => {
+      expect(hex).toMatch(/^#[0-9A-Fa-f]{6}$/);
+    });
+  });
+
+  it('should have colorsByFinish defined', () => {
+    expect(colorsByFinish).toBeDefined();
+    expect(typeof colorsByFinish).toBe('object');
+  });
+
+  it('should have finish categories', () => {
+    expect(colorsByFinish).toHaveProperty('Basic');
+    expect(colorsByFinish).toHaveProperty('Matte');
+    expect(colorsByFinish).toHaveProperty('Silk+');
+    expect(colorsByFinish).toHaveProperty('Metal');
+    expect(colorsByFinish).toHaveProperty('Sparkle');
+    expect(colorsByFinish).toHaveProperty('Glow');
+    expect(colorsByFinish).toHaveProperty('Translucent');
+    expect(colorsByFinish).toHaveProperty('CF');
+  });
+
+  it('should return valid hex for getColorHex', () => {
+    const hex = getColorHex('Black');
+    expect(hex).toBe('#000000');
+    
+    const unknownHex = getColorHex('Unknown Color');
+    expect(unknownHex).toBe('#000000');
+  });
+
+  it('should return colors for finish', () => {
+    const basicColors = getColorsForFinish('Basic');
+    expect(Array.isArray(basicColors)).toBe(true);
+    expect(basicColors.length).toBeGreaterThan(0);
+    
+    const unknownFinish = getColorsForFinish('Unknown');
+    expect(Array.isArray(unknownFinish)).toBe(true);
+    expect(unknownFinish.length).toBe(0);
+  });
+});

__tests__/filament-crud.test.ts

@@ -0,0 +1,200 @@
+// Mock axios before importing services
+jest.mock('axios', () => ({
+  create: jest.fn(() => ({
+    interceptors: {
+      request: { use: jest.fn() },
+      response: { use: jest.fn() }
+    },
+    get: jest.fn(),
+    post: jest.fn(),
+    put: jest.fn(),
+    delete: jest.fn()
+  }))
+}));
+
+import { filamentService, authService } from '../src/services/api';
+
+describe('Filament CRUD Operations', () => {
+  let authToken: string;
+
+  beforeAll(async () => {
+    // Mock successful login
+    jest.spyOn(authService, 'login').mockResolvedValue({ token: 'test-token' });
+    const loginResponse = await authService.login('admin', 'admin123');
+    authToken = loginResponse.token;
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Create Filament', () => {
+    it('should create a new filament without brand field', async () => {
+      const newFilament = {
+        tip: 'PLA',
+        finish: 'Basic',
+        boja: 'Black',
+        boja_hex: '#000000',
+        refill: '2',
+        spulna: '1 spulna',
+        kolicina: '3',
+        cena: '3999'
+      };
+
+      const mockResponse = {
+        id: '123',
+        ...newFilament,
+        boja_hex: '#000000',
+        created_at: new Date().toISOString(),
+        updated_at: new Date().toISOString()
+      };
+
+      jest.spyOn(filamentService, 'create').mockResolvedValue(mockResponse);
+
+      const result = await filamentService.create(newFilament);
+
+      expect(result).toEqual(mockResponse);
+      expect(filamentService.create).toHaveBeenCalledWith(newFilament);
+      
+      // Verify no brand field was sent
+      const callArg = (filamentService.create as jest.Mock).mock.calls[0][0];
+      expect(callArg).not.toHaveProperty('brand');
+    });
+
+    it('should use boja_hex field directly', async () => {
+      const filamentWithHex = {
+        tip: 'PETG',
+        finish: 'Silk',
+        boja: 'Red',
+        boja_hex: '#FF0000',
+        refill: 'Ne',
+        spulna: 'Ne',
+        kolicina: '1',
+        cena: '4500'
+      };
+
+      // Spy on the actual implementation
+      const createSpy = jest.spyOn(filamentService, 'create');
+      
+      // We can't test the actual transformation without a real axios call,
+      // but we can verify the method is called correctly
+      await expect(async () => {
+        await filamentService.create(filamentWithHex);
+      }).not.toThrow();
+
+      expect(createSpy).toHaveBeenCalledWith(filamentWithHex);
+    });
+  });
+
+  describe('Update Filament', () => {
+    it('should update a filament without brand field', async () => {
+      const filamentId = '123';
+      const updateData = {
+        tip: 'ABS',
+        finish: 'Matte',
+        boja: 'Blue',
+        boja_hex: '#0000FF',
+        refill: '1',
+        spulna: '2 spulna',
+        kolicina: '4',
+        cena: '5000'
+      };
+
+      const mockResponse = {
+        id: filamentId,
+        ...updateData,
+        boja_hex: '#0000FF',
+        updated_at: new Date().toISOString()
+      };
+
+      jest.spyOn(filamentService, 'update').mockResolvedValue(mockResponse);
+
+      const result = await filamentService.update(filamentId, updateData);
+
+      expect(result).toEqual(mockResponse);
+      expect(filamentService.update).toHaveBeenCalledWith(filamentId, updateData);
+      
+      // Verify no brand field was sent
+      const callArgs = (filamentService.update as jest.Mock).mock.calls[0];
+      expect(callArgs[1]).not.toHaveProperty('brand');
+    });
+  });
+
+  describe('Delete Filament', () => {
+    it('should delete a filament by ID', async () => {
+      const filamentId = '123';
+      const mockResponse = { success: true };
+
+      jest.spyOn(filamentService, 'delete').mockResolvedValue(mockResponse);
+
+      const result = await filamentService.delete(filamentId);
+
+      expect(result).toEqual(mockResponse);
+      expect(filamentService.delete).toHaveBeenCalledWith(filamentId);
+    });
+  });
+
+  describe('Get All Filaments', () => {
+    it('should retrieve all filaments with boja_hex field', async () => {
+      const mockFilaments = [
+        {
+          id: '1',
+          tip: 'PLA',
+          finish: 'Basic',
+          boja: 'Black',
+          boja_hex: '#000000',
+          refill: '2',
+          spulna: '1 spulna',
+          kolicina: '3',
+          cena: '3999'
+        },
+        {
+          id: '2',
+          tip: 'PETG',
+          finish: 'Silk',
+          boja: 'Red',
+          boja_hex: '#FF0000',
+          refill: 'Ne',
+          spulna: 'Ne',
+          kolicina: '1',
+          cena: '4500'
+        }
+      ];
+
+      // No transformation needed anymore - we use boja_hex directly
+      const expectedFilaments = mockFilaments;
+
+      jest.spyOn(filamentService, 'getAll').mockResolvedValue(expectedFilaments);
+
+      const result = await filamentService.getAll();
+
+      expect(result).toEqual(expectedFilaments);
+      expect(result[0]).toHaveProperty('boja_hex', '#000000');
+      expect(result[1]).toHaveProperty('boja_hex', '#FF0000');
+    });
+  });
+
+  describe('Quantity Calculations', () => {
+    it('should correctly calculate total quantity from refill and spulna', () => {
+      const testCases = [
+        { refill: '2', spulna: '1 spulna', expected: 3 },
+        { refill: 'Ne', spulna: '3 spulna', expected: 3 },
+        { refill: '1', spulna: 'Ne', expected: 1 },
+        { refill: 'Da', spulna: 'spulna', expected: 2 }
+      ];
+
+      testCases.forEach(({ refill, spulna, expected }) => {
+        // Parse refill
+        const refillCount = parseInt(refill) || (refill?.toLowerCase() === 'da' ? 1 : 0);
+        
+        // Parse spulna
+        const vakuumMatch = spulna?.match(/^(\d+)\s*spulna/);
+        const vakuumCount = vakuumMatch ? parseInt(vakuumMatch[1]) : (spulna?.toLowerCase().includes('spulna') ? 1 : 0);
+        
+        const total = refillCount + vakuumCount;
+        
+        expect(total).toBe(expected);
+      });
+    });
+  });
+});

__tests__/no-mock-data.test.ts

@@ -0,0 +1,29 @@
+import { readFileSync, existsSync } from 'fs';
+import { join } from 'path';
+
+describe('No Mock Data Tests', () => {
+  it('should not have data.json in public folder', () => {
+    const dataJsonPath = join(process.cwd(), 'public', 'data.json');
+    expect(existsSync(dataJsonPath)).toBe(false);
+  });
+
+  it('should not have fallback to data.json in page.tsx', () => {
+    const pagePath = join(process.cwd(), 'app', 'page.tsx');
+    const pageContent = readFileSync(pagePath, 'utf-8');
+    
+    expect(pageContent).not.toContain('data.json');
+    expect(pageContent).not.toContain("'/data.json'");
+    expect(pageContent).toContain('filamentService');
+  });
+
+  it('should use API service in all components', () => {
+    const pagePath = join(process.cwd(), 'app', 'page.tsx');
+    const adminPath = join(process.cwd(), 'app', 'dashboard', 'page.tsx');
+
+    const pageContent = readFileSync(pagePath, 'utf-8');
+    const adminContent = readFileSync(adminPath, 'utf-8');
+    
+    expect(pageContent).toContain('filamentService');
+    expect(adminContent).toContain('filamentService');
+  });
+});

__tests__/security.test.ts

@@ -1,65 +0,0 @@
-// Mock Next.js server components
-jest.mock('next/server', () => ({
-  NextResponse: {
-    json: (data: any, init?: ResponseInit) => ({
-      json: async () => data,
-      ...init
-    })
-  }
-}));
-
-// Mock confluence module
-jest.mock('../src/server/confluence', () => ({
-  fetchFromConfluence: jest.fn()
-}));
-
-import { GET } from '../app/api/filaments/route';
-import { fetchFromConfluence } from '../src/server/confluence';
-
-describe('API Security Tests', () => {
-  const originalEnv = process.env;
-
-  beforeEach(() => {
-    jest.resetModules();
-    process.env = { ...originalEnv };
-  });
-
-  afterEach(() => {
-    process.env = originalEnv;
-  });
-
-  it('should not expose credentials in error responses', async () => {
-    // Simulate missing environment variables
-    delete process.env.CONFLUENCE_TOKEN;
-    
-    const response = await GET();
-    const data = await response.json();
-    
-    // Check that response doesn't contain sensitive information
-    expect(JSON.stringify(data)).not.toContain('ATATT');
-    expect(JSON.stringify(data)).not.toContain('token');
-    expect(JSON.stringify(data)).not.toContain('password');
-    expect(data.error).toBe('Server configuration error');
-  });
-
-  it('should not expose internal error details', async () => {
-    // Set valid environment
-    process.env.CONFLUENCE_API_URL = 'https://test.atlassian.net';
-    process.env.CONFLUENCE_TOKEN = 'test-token';
-    process.env.CONFLUENCE_PAGE_ID = 'test-page';
-    
-    // Mock fetchFromConfluence to throw an error
-    const mockFetchFromConfluence = fetchFromConfluence as jest.MockedFunction<typeof fetchFromConfluence>;
-    mockFetchFromConfluence.mockRejectedValueOnce(new Error('Internal database error with sensitive details'));
-    
-    const response = await GET();
-    const data = await response.json();
-    
-    // Should get generic error, not specific details
-    expect(data.error).toBe('Failed to fetch filaments');
-    expect(data).not.toHaveProperty('stack');
-    expect(data).not.toHaveProperty('message');
-    expect(JSON.stringify(data)).not.toContain('Internal database error');
-    expect(JSON.stringify(data)).not.toContain('sensitive details');
-  });
-});

__tests__/ui-features.test.ts

@@ -0,0 +1,73 @@
+import { readFileSync } from 'fs';
+import { join } from 'path';
+
+describe('UI Features Tests', () => {
+  it('should have color hex input in admin form', () => {
+    const adminDashboardPath = join(process.cwd(), 'app', 'dashboard', 'page.tsx');
+    const adminContent = readFileSync(adminDashboardPath, 'utf-8');
+    
+    // Check for color input
+    expect(adminContent).toContain('type="color"');
+    expect(adminContent).toContain('boja_hex');
+    expect(adminContent).toContain('Hex kod boje');
+  });
+
+  it('should display color hex in frontend table', () => {
+    const filamentTablePath = join(process.cwd(), 'src', 'components', 'FilamentTableV2.tsx');
+    const tableContent = readFileSync(filamentTablePath, 'utf-8');
+    
+    // Check for color display
+    expect(tableContent).toContain('backgroundColor: filament.boja_hex');
+    expect(tableContent).toContain('boja_hex');
+  });
+
+  it('should have number inputs for quantity fields', () => {
+    const adminDashboardPath = join(process.cwd(), 'app', 'dashboard', 'page.tsx');
+    const adminContent = readFileSync(adminDashboardPath, 'utf-8');
+    
+    // Check for number inputs for quantities
+    expect(adminContent).toMatch(/type="number"[\s\S]*?name="refill"/);
+    expect(adminContent).toMatch(/type="number"[\s\S]*?name="spulna"/);
+    expect(adminContent).toContain('Refil');
+    expect(adminContent).toContain('Špulna');
+    expect(adminContent).toContain('Ukupna količina');
+  });
+
+  it('should have number input for quantity', () => {
+    const adminDashboardPath = join(process.cwd(), 'app', 'dashboard', 'page.tsx');
+    const adminContent = readFileSync(adminDashboardPath, 'utf-8');
+    
+    // Check for number input
+    expect(adminContent).toMatch(/type="number"[\s\S]*?name="kolicina"/);
+    expect(adminContent).toContain('min="0"');
+    expect(adminContent).toContain('step="1"');
+  });
+
+  it('should have predefined material options', () => {
+    const adminDashboardPath = join(process.cwd(), 'app', 'dashboard', 'page.tsx');
+    const adminContent = readFileSync(adminDashboardPath, 'utf-8');
+
+    // Check for material select dropdown (now generated from catalog)
+    expect(adminContent).toContain('getMaterialOptions()');
+    expect(adminContent).toContain('Izaberi tip');
+  });
+
+  it('should have admin sidebar and header', () => {
+    const adminDashboardPath = join(process.cwd(), 'app', 'dashboard', 'page.tsx');
+    const dashboardContent = readFileSync(adminDashboardPath, 'utf-8');
+
+    // Check for admin sidebar and header
+    expect(dashboardContent).toContain('AdminSidebar');
+    expect(dashboardContent).toContain('Odjava');
+  });
+
+  it('should have Safari-specific select styling', () => {
+    const selectCssPath = join(process.cwd(), 'src', 'styles', 'select.css');
+    const selectContent = readFileSync(selectCssPath, 'utf-8');
+    
+    // Check for Safari fixes
+    expect(selectContent).toContain('-webkit-appearance: none !important');
+    expect(selectContent).toContain('@supports (-webkit-appearance: none)');
+    expect(selectContent).toContain('-webkit-min-device-pixel-ratio');
+  });
+});

amplify.yml

@@ -1,21 +0,0 @@
-version: 1
-frontend:
-  phases:
-    preBuild:
-      commands:
-        - npm ci
-        - npm run security:check
-        # Print env vars for debugging (without exposing values)
-        - env | grep CONFLUENCE | sed 's/=.*/=***/'
-    build:
-      commands:
-        - npx tsx scripts/fetch-data.js
-        - npm run build
-  artifacts:
-    baseDirectory: out
-    files:
-      - '**/*'
-  cache:
-    paths:
-      - node_modules/**/*
-      - .next/cache/**/*

api/.dockerignore

@@ -0,0 +1,7 @@
+node_modules
+npm-debug.log
+.env
+.env.example
+README.md
+.git
+.gitignore

api/.env.example

@@ -0,0 +1,14 @@
+# Database connection
+DATABASE_URL=postgresql://username:password@localhost:5432/filamenteka
+
+# JWT Secret
+JWT_SECRET=your-secret-key-here
+
+# Admin password
+ADMIN_PASSWORD=your-admin-password
+
+# Server port
+PORT=4000
+
+# Environment
+NODE_ENV=development

api/Dockerfile

@@ -0,0 +1,18 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci --only=production
+
+# Copy application files
+COPY . .
+
+# Expose port
+EXPOSE 80
+
+# Start the application
+CMD ["node", "server.js"]

api/migrate.js

@@ -0,0 +1,93 @@
+const { Pool } = require('pg');
+const fs = require('fs');
+const path = require('path');
+require('dotenv').config();
+
+const pool = new Pool({
+  connectionString: process.env.DATABASE_URL,
+  ssl: process.env.DATABASE_URL?.includes('amazonaws.com') ? { rejectUnauthorized: false } : false
+});
+
+async function migrate() {
+  try {
+    // Read schema file
+    const schemaPath = path.join(__dirname, '..', 'database', 'schema.sql');
+    const schema = fs.readFileSync(schemaPath, 'utf8');
+    
+    // Execute schema
+    await pool.query(schema);
+    
+    console.log('Database migration completed successfully');
+    
+    // Run additional migrations
+    const migrationsPath = path.join(__dirname, '..', 'database', 'migrations');
+    if (fs.existsSync(migrationsPath)) {
+      const migrationFiles = fs.readdirSync(migrationsPath)
+        .filter(file => file.endsWith('.sql'))
+        .sort();
+        
+      for (const file of migrationFiles) {
+        console.log(`Running migration: ${file}`);
+        const migrationSQL = fs.readFileSync(path.join(migrationsPath, file), 'utf8');
+        try {
+          await pool.query(migrationSQL);
+          console.log(`✓ Migration ${file} completed`);
+        } catch (err) {
+          console.log(`⚠ Migration ${file} skipped:`, err.message);
+        }
+      }
+    }
+    
+    // Import legacy data if available
+    try {
+      const dataPath = path.join(__dirname, '..', 'data.json');
+      if (fs.existsSync(dataPath)) {
+        const legacyData = JSON.parse(fs.readFileSync(dataPath, 'utf8'));
+        
+        // Import colors
+        const colors = new Set();
+        legacyData.forEach(item => {
+          if (item.boja) colors.add(item.boja);
+        });
+        
+        for (const color of colors) {
+          const hex = legacyData.find(item => item.boja === color)?.bojaHex || '#000000';
+          await pool.query(
+            'INSERT INTO colors (name, hex) VALUES ($1, $2) ON CONFLICT (name) DO UPDATE SET hex = $2',
+            [color, hex]
+          );
+        }
+        
+        // Import filaments
+        for (const item of legacyData) {
+          await pool.query(
+            `INSERT INTO filaments (tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina, cena) 
+             VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9)`,
+            [
+              item.tip,
+              item.finish,
+              item.boja,
+              item.bojaHex,
+              item.refill,
+              item.vakum,
+              item.otvoreno,
+              item.kolicina || 1,
+              item.cena
+            ]
+          );
+        }
+        
+        console.log('Legacy data imported successfully');
+      }
+    } catch (error) {
+      console.error('Error importing legacy data:', error);
+    }
+    
+    process.exit(0);
+  } catch (error) {
+    console.error('Migration failed:', error);
+    process.exit(1);
+  }
+}
+
+migrate();

api/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "filamenteka-api",
+  "version": "1.0.0",
+  "description": "API backend for Filamenteka",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js",
+    "dev": "nodemon server.js",
+    "migrate": "node migrate.js"
+  },
+  "dependencies": {
+    "express": "^4.18.2",
+    "pg": "^8.11.3",
+    "cors": "^2.8.5",
+    "bcryptjs": "^2.4.3",
+    "jsonwebtoken": "^9.0.2",
+    "dotenv": "^16.3.1"
+  },
+  "devDependencies": {
+    "nodemon": "^3.0.2"
+  }
+}

api/routes/admin-migrate.js

@@ -0,0 +1,63 @@
+const express = require('express');
+const router = express.Router();
+const { authenticate } = require('../middleware/auth');
+
+// Temporary migration endpoint - remove after use
+router.post('/add-basic-refills', authenticate, async (req, res) => {
+  const pool = req.app.locals.pool;
+  
+  try {
+    // First, let's insert filaments for all existing colors
+    const result = await pool.query(`
+      INSERT INTO filaments (tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina, cena)
+      SELECT 
+          'PLA' as tip,
+          'Basic' as finish,
+          c.name as boja,
+          c.hex as boja_hex,
+          '1' as refill,
+          '0 vakuum' as vakum,
+          '0 otvorena' as otvoreno,
+          1 as kolicina,
+          '3999' as cena
+      FROM colors c
+      WHERE NOT EXISTS (
+          -- Only insert if this exact combination doesn't already exist
+          SELECT 1 FROM filaments f 
+          WHERE f.tip = 'PLA' 
+          AND f.finish = 'Basic' 
+          AND f.boja = c.name
+      )
+    `);
+    
+    // Update any existing PLA Basic filaments to have at least 1 refill
+    const updateResult = await pool.query(`
+      UPDATE filaments
+      SET refill = '1'
+      WHERE tip = 'PLA' 
+      AND finish = 'Basic'
+      AND (refill IS NULL OR refill = '0' OR refill = '')
+    `);
+    
+    // Show summary
+    const summary = await pool.query(`
+      SELECT COUNT(*) as count 
+      FROM filaments 
+      WHERE tip = 'PLA' 
+      AND finish = 'Basic' 
+      AND refill = '1'
+    `);
+    
+    res.json({
+      success: true,
+      inserted: result.rowCount,
+      updated: updateResult.rowCount,
+      total: summary.rows[0].count
+    });
+  } catch (error) {
+    console.error('Migration error:', error);
+    res.status(500).json({ error: 'Migration failed', details: error.message });
+  }
+});
+
+module.exports = router;

api/scripts/add-basic-refills.js

@@ -0,0 +1,65 @@
+const { Pool } = require('pg');
+require('dotenv').config();
+
+const pool = new Pool({
+  connectionString: process.env.DATABASE_URL,
+  ssl: process.env.DATABASE_URL?.includes('amazonaws.com') ? { rejectUnauthorized: false } : false
+});
+
+async function addBasicRefills() {
+  try {
+    // First, let's insert filaments for all existing colors
+    const result = await pool.query(`
+      INSERT INTO filaments (tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina, cena)
+      SELECT 
+          'PLA' as tip,
+          'Basic' as finish,
+          c.name as boja,
+          c.hex as boja_hex,
+          '1' as refill,
+          '0 vakuum' as vakum,
+          '0 otvorena' as otvoreno,
+          1 as kolicina,
+          '3999' as cena
+      FROM colors c
+      WHERE NOT EXISTS (
+          -- Only insert if this exact combination doesn't already exist
+          SELECT 1 FROM filaments f 
+          WHERE f.tip = 'PLA' 
+          AND f.finish = 'Basic' 
+          AND f.boja = c.name
+      )
+    `);
+    
+    console.log(`Inserted ${result.rowCount} new PLA Basic filaments with 1 refill each`);
+    
+    // Update any existing PLA Basic filaments to have at least 1 refill
+    const updateResult = await pool.query(`
+      UPDATE filaments
+      SET refill = '1'
+      WHERE tip = 'PLA' 
+      AND finish = 'Basic'
+      AND (refill IS NULL OR refill = '0' OR refill = '')
+    `);
+    
+    console.log(`Updated ${updateResult.rowCount} existing PLA Basic filaments to have 1 refill`);
+    
+    // Show summary
+    const summary = await pool.query(`
+      SELECT COUNT(*) as count 
+      FROM filaments 
+      WHERE tip = 'PLA' 
+      AND finish = 'Basic' 
+      AND refill = '1'
+    `);
+    
+    console.log(`\nTotal PLA Basic filaments with 1 refill: ${summary.rows[0].count}`);
+    
+    process.exit(0);
+  } catch (error) {
+    console.error('Error adding basic refills:', error);
+    process.exit(1);
+  }
+}
+
+addBasicRefills();

api/scripts/add-refills.js

@@ -0,0 +1,73 @@
+const { Pool } = require('pg');
+const path = require('path');
+require('dotenv').config({ path: path.join(__dirname, '../.env') });
+
+const pool = new Pool({
+  connectionString: process.env.DATABASE_URL,
+  ssl: process.env.DATABASE_URL?.includes('amazonaws.com') ? { rejectUnauthorized: false } : false
+});
+
+async function addRefills() {
+  try {
+    console.log('Adding 1 refill for each color as PLA Basic filaments...\n');
+    
+    // First, get all colors
+    const colorsResult = await pool.query('SELECT name, hex FROM colors ORDER BY name');
+    console.log(`Found ${colorsResult.rows.length} colors in database:`);
+    colorsResult.rows.forEach(color => {
+      console.log(`  - ${color.name} (${color.hex})`);
+    });
+    console.log('');
+    
+    let inserted = 0;
+    let updated = 0;
+    
+    for (const color of colorsResult.rows) {
+      // Check if PLA Basic already exists for this color
+      const existing = await pool.query(
+        'SELECT id, refill FROM filaments WHERE tip = $1 AND finish = $2 AND boja = $3',
+        ['PLA', 'Basic', color.name]
+      );
+      
+      if (existing.rows.length === 0) {
+        // Insert new filament
+        await pool.query(
+          `INSERT INTO filaments (tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina, cena) 
+           VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9)`,
+          ['PLA', 'Basic', color.name, color.hex, '1', '0 vakuum', '0 otvorena', 1, '3999']
+        );
+        console.log(`✓ Added PLA Basic ${color.name}`);
+        inserted++;
+      } else if (!existing.rows[0].refill || existing.rows[0].refill === '0') {
+        // Update existing to have 1 refill
+        await pool.query(
+          'UPDATE filaments SET refill = $1 WHERE id = $2',
+          ['1', existing.rows[0].id]
+        );
+        console.log(`✓ Updated PLA Basic ${color.name} to have 1 refill`);
+        updated++;
+      } else {
+        console.log(`- PLA Basic ${color.name} already has ${existing.rows[0].refill} refill(s)`);
+      }
+    }
+    
+    console.log(`\nSummary:`);
+    console.log(`- Inserted ${inserted} new PLA Basic filaments`);
+    console.log(`- Updated ${updated} existing filaments to have 1 refill`);
+    console.log(`- Total colors processed: ${colorsResult.rows.length}`);
+    
+    // Show final state
+    const finalCount = await pool.query(
+      "SELECT COUNT(*) as count FROM filaments WHERE tip = 'PLA' AND finish = 'Basic' AND refill = '1'"
+    );
+    console.log(`- Total PLA Basic filaments with 1 refill: ${finalCount.rows[0].count}`);
+    
+    await pool.end();
+    process.exit(0);
+  } catch (error) {
+    console.error('Error:', error);
+    process.exit(1);
+  }
+}
+
+addRefills();

api/server.js

@@ -0,0 +1,804 @@
+const express = require('express');
+const { Pool } = require('pg');
+const cors = require('cors');
+const bcrypt = require('bcryptjs');
+const jwt = require('jsonwebtoken');
+require('dotenv').config();
+
+const app = express();
+const PORT = process.env.PORT || 80;
+
+// PostgreSQL connection
+const pool = new Pool({
+  connectionString: process.env.DATABASE_URL,
+  ssl: process.env.DATABASE_URL?.includes('amazonaws.com') ? { rejectUnauthorized: false } : false
+});
+
+// Middleware
+app.use(cors({
+  origin: true, // Allow all origins in development
+  credentials: true,
+  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
+  allowedHeaders: ['Content-Type', 'Authorization'],
+  exposedHeaders: ['Content-Length', 'Content-Type'],
+  maxAge: 86400
+}));
+app.use(express.json());
+
+// Handle preflight requests
+app.options('*', cors());
+
+// Health check route
+app.get('/', (req, res) => {
+  res.json({ status: 'ok', service: 'Filamenteka API' });
+});
+
+// JWT middleware
+const authenticateToken = (req, res, next) => {
+  const authHeader = req.headers['authorization'];
+  const token = authHeader && authHeader.split(' ')[1];
+  
+  if (!token) {
+    return res.status(401).json({ error: 'Unauthorized' });
+  }
+  
+  jwt.verify(token, process.env.JWT_SECRET || 'your-secret-key', (err, user) => {
+    if (err) {
+      console.error('JWT verification error:', err);
+      return res.status(403).json({ error: 'Invalid token' });
+    }
+    req.user = user;
+    next();
+  });
+};
+
+// Auth endpoints
+app.post('/api/login', async (req, res) => {
+  const { username, password } = req.body;
+  
+  // For now, simple hardcoded admin check
+  if (username === 'admin' && password === process.env.ADMIN_PASSWORD) {
+    const token = jwt.sign({ username }, process.env.JWT_SECRET || 'your-secret-key', { expiresIn: '24h' });
+    res.json({ token });
+  } else {
+    res.status(401).json({ error: 'Invalid credentials' });
+  }
+});
+
+// Colors endpoints
+app.get('/api/colors', async (req, res) => {
+  try {
+    const result = await pool.query('SELECT * FROM colors ORDER BY name');
+    res.json(result.rows);
+  } catch (error) {
+    console.error('Error fetching colors:', error);
+    res.status(500).json({ error: 'Failed to fetch colors' });
+  }
+});
+
+app.post('/api/colors', authenticateToken, async (req, res) => {
+  const { name, hex, cena_refill, cena_spulna } = req.body;
+  
+  try {
+    const result = await pool.query(
+      'INSERT INTO colors (name, hex, cena_refill, cena_spulna) VALUES ($1, $2, $3, $4) RETURNING *',
+      [name, hex, cena_refill || 3499, cena_spulna || 3999]
+    );
+    res.json(result.rows[0]);
+  } catch (error) {
+    console.error('Error creating color:', error);
+    res.status(500).json({ error: 'Failed to create color' });
+  }
+});
+
+app.put('/api/colors/:id', authenticateToken, async (req, res) => {
+  const { id } = req.params;
+  const { name, hex, cena_refill, cena_spulna } = req.body;
+  
+  try {
+    const result = await pool.query(
+      'UPDATE colors SET name = $1, hex = $2, cena_refill = $3, cena_spulna = $4, updated_at = CURRENT_TIMESTAMP WHERE id = $5 RETURNING *',
+      [name, hex, cena_refill || 3499, cena_spulna || 3999, id]
+    );
+    res.json(result.rows[0]);
+  } catch (error) {
+    console.error('Error updating color:', error);
+    res.status(500).json({ error: 'Failed to update color' });
+  }
+});
+
+app.delete('/api/colors/:id', authenticateToken, async (req, res) => {
+  const { id } = req.params;
+  
+  try {
+    await pool.query('DELETE FROM colors WHERE id = $1', [id]);
+    res.json({ success: true });
+  } catch (error) {
+    console.error('Error deleting color:', error);
+    res.status(500).json({ error: 'Failed to delete color' });
+  }
+});
+
+// Filaments endpoints (PUBLIC - no auth required)
+app.get('/api/filaments', async (req, res) => {
+  try {
+    const result = await pool.query('SELECT * FROM filaments ORDER BY created_at DESC');
+    res.json(result.rows);
+  } catch (error) {
+    console.error('Error fetching filaments:', error);
+    res.status(500).json({ error: 'Failed to fetch filaments' });
+  }
+});
+
+app.post('/api/filaments', authenticateToken, async (req, res) => {
+  const { tip, finish, boja, boja_hex, refill, spulna, cena } = req.body;
+  
+  try {
+    // Ensure refill and spulna are numbers
+    const refillNum = parseInt(refill) || 0;
+    const spulnaNum = parseInt(spulna) || 0;
+    const kolicina = refillNum + spulnaNum;
+    
+    const result = await pool.query(
+      `INSERT INTO filaments (tip, finish, boja, boja_hex, refill, spulna, kolicina, cena) 
+       VALUES ($1, $2, $3, $4, $5, $6, $7, $8) RETURNING *`,
+      [tip, finish, boja, boja_hex, refillNum, spulnaNum, kolicina, cena]
+    );
+    res.json(result.rows[0]);
+  } catch (error) {
+    console.error('Error creating filament:', error);
+    res.status(500).json({ error: 'Failed to create filament' });
+  }
+});
+
+app.put('/api/filaments/:id', authenticateToken, async (req, res) => {
+  const { id } = req.params;
+  const { tip, finish, boja, boja_hex, refill, spulna, cena, sale_percentage, sale_active, sale_start_date, sale_end_date } = req.body;
+
+  try {
+    // Ensure refill and spulna are numbers
+    const refillNum = parseInt(refill) || 0;
+    const spulnaNum = parseInt(spulna) || 0;
+    const kolicina = refillNum + spulnaNum;
+
+    // Check if sale fields are provided in the request
+    const hasSaleFields = 'sale_percentage' in req.body || 'sale_active' in req.body ||
+                          'sale_start_date' in req.body || 'sale_end_date' in req.body;
+
+    let result;
+    if (hasSaleFields) {
+      // Update with sale fields if they are provided
+      result = await pool.query(
+        `UPDATE filaments
+         SET tip = $1, finish = $2, boja = $3, boja_hex = $4,
+             refill = $5, spulna = $6, kolicina = $7, cena = $8,
+             sale_percentage = $9, sale_active = $10,
+             sale_start_date = $11, sale_end_date = $12,
+             updated_at = CURRENT_TIMESTAMP
+         WHERE id = $13 RETURNING *`,
+        [tip, finish, boja, boja_hex, refillNum, spulnaNum, kolicina, cena,
+         sale_percentage || 0, sale_active || false, sale_start_date, sale_end_date, id]
+      );
+    } else {
+      // Update without touching sale fields if they are not provided
+      result = await pool.query(
+        `UPDATE filaments
+         SET tip = $1, finish = $2, boja = $3, boja_hex = $4,
+             refill = $5, spulna = $6, kolicina = $7, cena = $8,
+             updated_at = CURRENT_TIMESTAMP
+         WHERE id = $9 RETURNING *`,
+        [tip, finish, boja, boja_hex, refillNum, spulnaNum, kolicina, cena, id]
+      );
+    }
+
+    res.json(result.rows[0]);
+  } catch (error) {
+    console.error('Error updating filament:', error);
+    res.status(500).json({ error: 'Failed to update filament' });
+  }
+});
+
+app.delete('/api/filaments/:id', authenticateToken, async (req, res) => {
+  const { id } = req.params;
+  
+  try {
+    await pool.query('DELETE FROM filaments WHERE id = $1', [id]);
+    res.json({ success: true });
+  } catch (error) {
+    console.error('Error deleting filament:', error);
+    res.status(500).json({ error: 'Failed to delete filament' });
+  }
+});
+
+// Bulk sale update endpoint
+app.post('/api/filaments/sale/bulk', authenticateToken, async (req, res) => {
+  const { filamentIds, salePercentage, saleStartDate, saleEndDate, enableSale } = req.body;
+  
+  try {
+    let query;
+    let params;
+    
+    if (filamentIds && filamentIds.length > 0) {
+      // Update specific filaments
+      query = `
+        UPDATE filaments 
+        SET sale_percentage = $1, 
+            sale_active = $2,
+            sale_start_date = $3,
+            sale_end_date = $4,
+            updated_at = CURRENT_TIMESTAMP
+        WHERE id = ANY($5) 
+        RETURNING *`;
+      params = [salePercentage || 0, enableSale || false, saleStartDate, saleEndDate, filamentIds];
+    } else {
+      // Update all filaments
+      query = `
+        UPDATE filaments 
+        SET sale_percentage = $1, 
+            sale_active = $2,
+            sale_start_date = $3,
+            sale_end_date = $4,
+            updated_at = CURRENT_TIMESTAMP
+        RETURNING *`;
+      params = [salePercentage || 0, enableSale || false, saleStartDate, saleEndDate];
+    }
+    
+    const result = await pool.query(query, params);
+    res.json({ 
+      success: true, 
+      updatedCount: result.rowCount,
+      updatedFilaments: result.rows 
+    });
+  } catch (error) {
+    console.error('Error updating sale:', error);
+    res.status(500).json({ error: 'Failed to update sale' });
+  }
+});
+
+// Color request endpoints
+
+// Get all color requests (admin only)
+app.get('/api/color-requests', authenticateToken, async (req, res) => {
+  try {
+    const result = await pool.query(
+      'SELECT * FROM color_requests ORDER BY created_at DESC'
+    );
+    res.json(result.rows);
+  } catch (error) {
+    console.error('Error fetching color requests:', error);
+    res.status(500).json({ error: 'Failed to fetch color requests' });
+  }
+});
+
+// Submit a new color request (public)
+app.post('/api/color-requests', async (req, res) => {
+  try {
+    const { 
+      color_name, 
+      material_type, 
+      finish_type, 
+      user_email,
+      user_phone, 
+      user_name, 
+      description,
+      reference_url 
+    } = req.body;
+
+    // Validate required fields
+    if (!color_name || !material_type || !user_email || !user_phone) {
+      return res.status(400).json({ 
+        error: 'Color name, material type, email, and phone are required' 
+      });
+    }
+
+    // Check if similar request already exists
+    const existingRequest = await pool.query(
+      `SELECT id, request_count FROM color_requests 
+       WHERE LOWER(color_name) = LOWER($1) 
+       AND material_type = $2 
+       AND (finish_type = $3 OR (finish_type IS NULL AND $3 IS NULL))
+       AND status = 'pending'`,
+      [color_name, material_type, finish_type]
+    );
+
+    if (existingRequest.rows.length > 0) {
+      // Increment request count for existing request
+      const result = await pool.query(
+        `UPDATE color_requests 
+         SET request_count = request_count + 1,
+             updated_at = CURRENT_TIMESTAMP
+         WHERE id = $1
+         RETURNING *`,
+        [existingRequest.rows[0].id]
+      );
+      res.json({ 
+        message: 'Your request has been added to an existing request for this color',
+        request: result.rows[0] 
+      });
+    } else {
+      // Create new request
+      const result = await pool.query(
+        `INSERT INTO color_requests 
+         (color_name, material_type, finish_type, user_email, user_phone, user_name, description, reference_url)
+         VALUES ($1, $2, $3, $4, $5, $6, $7, $8)
+         RETURNING *`,
+        [color_name, material_type, finish_type, user_email, user_phone, user_name, description, reference_url]
+      );
+      res.json({ 
+        message: 'Color request submitted successfully',
+        request: result.rows[0] 
+      });
+    }
+  } catch (error) {
+    console.error('Error creating color request:', error);
+    res.status(500).json({ error: 'Failed to submit color request' });
+  }
+});
+
+// Update color request status (admin only)
+app.put('/api/color-requests/:id', authenticateToken, async (req, res) => {
+  try {
+    const { id } = req.params;
+    const { status, admin_notes } = req.body;
+    
+    const result = await pool.query(
+      `UPDATE color_requests 
+       SET status = $1, 
+           admin_notes = $2,
+           processed_at = CURRENT_TIMESTAMP,
+           processed_by = $3,
+           updated_at = CURRENT_TIMESTAMP
+       WHERE id = $4
+       RETURNING *`,
+      [status, admin_notes, req.user.username, id]
+    );
+    
+    if (result.rows.length === 0) {
+      return res.status(404).json({ error: 'Color request not found' });
+    }
+    
+    res.json(result.rows[0]);
+  } catch (error) {
+    console.error('Error updating color request:', error);
+    res.status(500).json({ error: 'Failed to update color request' });
+  }
+});
+
+// Delete color request (admin only)
+app.delete('/api/color-requests/:id', authenticateToken, async (req, res) => {
+  try {
+    const { id } = req.params;
+    
+    const result = await pool.query(
+      'DELETE FROM color_requests WHERE id = $1 RETURNING *',
+      [id]
+    );
+    
+    if (result.rows.length === 0) {
+      return res.status(404).json({ error: 'Color request not found' });
+    }
+    
+    res.json({ message: 'Color request deleted successfully' });
+  } catch (error) {
+    console.error('Error deleting color request:', error);
+    res.status(500).json({ error: 'Failed to delete color request' });
+  }
+});
+
+// ==========================================
+// Customer endpoints (admin-only)
+// ==========================================
+
+app.get('/api/customers', authenticateToken, async (req, res) => {
+  try {
+    const result = await pool.query('SELECT * FROM customers ORDER BY name');
+    res.json(result.rows);
+  } catch (error) {
+    console.error('Error fetching customers:', error);
+    res.status(500).json({ error: 'Failed to fetch customers' });
+  }
+});
+
+app.get('/api/customers/search', authenticateToken, async (req, res) => {
+  try {
+    const { q } = req.query;
+    if (!q) return res.json([]);
+    const result = await pool.query(
+      `SELECT * FROM customers WHERE name ILIKE $1 OR phone ILIKE $1 ORDER BY name LIMIT 10`,
+      [`%${q}%`]
+    );
+    res.json(result.rows);
+  } catch (error) {
+    console.error('Error searching customers:', error);
+    res.status(500).json({ error: 'Failed to search customers' });
+  }
+});
+
+app.get('/api/customers/:id', authenticateToken, async (req, res) => {
+  try {
+    const { id } = req.params;
+    const customerResult = await pool.query('SELECT * FROM customers WHERE id = $1', [id]);
+    if (customerResult.rows.length === 0) {
+      return res.status(404).json({ error: 'Customer not found' });
+    }
+    const salesResult = await pool.query(
+      `SELECT s.*,
+        (SELECT COUNT(*) FROM sale_items si WHERE si.sale_id = s.id) as item_count
+       FROM sales s WHERE s.customer_id = $1 ORDER BY s.created_at DESC`,
+      [id]
+    );
+    res.json({ ...customerResult.rows[0], sales: salesResult.rows });
+  } catch (error) {
+    console.error('Error fetching customer:', error);
+    res.status(500).json({ error: 'Failed to fetch customer' });
+  }
+});
+
+app.post('/api/customers', authenticateToken, async (req, res) => {
+  const { name, phone, city, notes } = req.body;
+  if (!name) return res.status(400).json({ error: 'Name is required' });
+  try {
+    const result = await pool.query(
+      'INSERT INTO customers (name, phone, city, notes) VALUES ($1, $2, $3, $4) RETURNING *',
+      [name, phone || null, city || null, notes || null]
+    );
+    res.json(result.rows[0]);
+  } catch (error) {
+    if (error.code === '23505') {
+      return res.status(409).json({ error: 'Customer with this phone already exists' });
+    }
+    console.error('Error creating customer:', error);
+    res.status(500).json({ error: 'Failed to create customer' });
+  }
+});
+
+app.put('/api/customers/:id', authenticateToken, async (req, res) => {
+  const { id } = req.params;
+  const { name, phone, city, notes } = req.body;
+  try {
+    const result = await pool.query(
+      `UPDATE customers SET name = $1, phone = $2, city = $3, notes = $4, updated_at = CURRENT_TIMESTAMP
+       WHERE id = $5 RETURNING *`,
+      [name, phone || null, city || null, notes || null, id]
+    );
+    if (result.rows.length === 0) return res.status(404).json({ error: 'Customer not found' });
+    res.json(result.rows[0]);
+  } catch (error) {
+    console.error('Error updating customer:', error);
+    res.status(500).json({ error: 'Failed to update customer' });
+  }
+});
+
+// ==========================================
+// Sale endpoints (admin-only)
+// ==========================================
+
+app.post('/api/sales', authenticateToken, async (req, res) => {
+  const client = await pool.connect();
+  try {
+    await client.query('BEGIN');
+    const { customer, items, notes } = req.body;
+
+    if (!customer || !customer.name) {
+      await client.query('ROLLBACK');
+      return res.status(400).json({ error: 'Customer name is required' });
+    }
+    if (!items || items.length === 0) {
+      await client.query('ROLLBACK');
+      return res.status(400).json({ error: 'At least one item is required' });
+    }
+
+    // Find-or-create customer by phone
+    let customerId;
+    if (customer.phone) {
+      const existing = await client.query(
+        'SELECT id FROM customers WHERE phone = $1', [customer.phone]
+      );
+      if (existing.rows.length > 0) {
+        customerId = existing.rows[0].id;
+        // Update name/city if provided
+        await client.query(
+          `UPDATE customers SET name = $1, city = COALESCE($2, city), notes = COALESCE($3, notes), updated_at = CURRENT_TIMESTAMP WHERE id = $4`,
+          [customer.name, customer.city, customer.notes, customerId]
+        );
+      }
+    }
+    if (!customerId) {
+      const newCust = await client.query(
+        'INSERT INTO customers (name, phone, city, notes) VALUES ($1, $2, $3, $4) RETURNING id',
+        [customer.name, customer.phone || null, customer.city || null, customer.notes || null]
+      );
+      customerId = newCust.rows[0].id;
+    }
+
+    // Process items
+    let totalAmount = 0;
+    const saleItems = [];
+
+    for (const item of items) {
+      const { filament_id, item_type, quantity } = item;
+      if (!['refill', 'spulna'].includes(item_type)) {
+        await client.query('ROLLBACK');
+        return res.status(400).json({ error: `Invalid item_type: ${item_type}` });
+      }
+
+      // Get filament with stock check
+      const filamentResult = await client.query(
+        'SELECT f.*, c.cena_refill, c.cena_spulna FROM filaments f JOIN colors c ON f.boja = c.name WHERE f.id = $1 FOR UPDATE',
+        [filament_id]
+      );
+      if (filamentResult.rows.length === 0) {
+        await client.query('ROLLBACK');
+        return res.status(400).json({ error: `Filament ${filament_id} not found` });
+      }
+
+      const filament = filamentResult.rows[0];
+      if (filament[item_type] < quantity) {
+        await client.query('ROLLBACK');
+        return res.status(400).json({
+          error: `Insufficient stock for ${filament.boja} ${item_type}: have ${filament[item_type]}, need ${quantity}`
+        });
+      }
+
+      // Determine price (apply sale discount if active)
+      let unitPrice = item_type === 'refill' ? (filament.cena_refill || 3499) : (filament.cena_spulna || 3999);
+      if (filament.sale_active && filament.sale_percentage > 0) {
+        unitPrice = Math.round(unitPrice * (1 - filament.sale_percentage / 100));
+      }
+
+      // Decrement inventory
+      const updateField = item_type === 'refill' ? 'refill' : 'spulna';
+      await client.query(
+        `UPDATE filaments SET ${updateField} = ${updateField} - $1, kolicina = kolicina - $1, updated_at = CURRENT_TIMESTAMP WHERE id = $2`,
+        [quantity, filament_id]
+      );
+
+      totalAmount += unitPrice * quantity;
+      saleItems.push({ filament_id, item_type, quantity, unit_price: unitPrice });
+    }
+
+    // Insert sale
+    const saleResult = await client.query(
+      'INSERT INTO sales (customer_id, total_amount, notes) VALUES ($1, $2, $3) RETURNING *',
+      [customerId, totalAmount, notes || null]
+    );
+    const sale = saleResult.rows[0];
+
+    // Insert sale items
+    for (const si of saleItems) {
+      await client.query(
+        'INSERT INTO sale_items (sale_id, filament_id, item_type, quantity, unit_price) VALUES ($1, $2, $3, $4, $5)',
+        [sale.id, si.filament_id, si.item_type, si.quantity, si.unit_price]
+      );
+    }
+
+    await client.query('COMMIT');
+
+    // Fetch full sale with items
+    const fullSale = await pool.query(
+      `SELECT s.*, c.name as customer_name, c.phone as customer_phone
+       FROM sales s LEFT JOIN customers c ON s.customer_id = c.id WHERE s.id = $1`,
+      [sale.id]
+    );
+    const fullItems = await pool.query(
+      `SELECT si.*, f.tip as filament_tip, f.finish as filament_finish, f.boja as filament_boja
+       FROM sale_items si JOIN filaments f ON si.filament_id = f.id WHERE si.sale_id = $1`,
+      [sale.id]
+    );
+    res.json({ ...fullSale.rows[0], items: fullItems.rows });
+  } catch (error) {
+    await client.query('ROLLBACK');
+    console.error('Error creating sale:', error);
+    res.status(500).json({ error: 'Failed to create sale' });
+  } finally {
+    client.release();
+  }
+});
+
+app.get('/api/sales', authenticateToken, async (req, res) => {
+  try {
+    const page = parseInt(req.query.page) || 1;
+    const limit = parseInt(req.query.limit) || 50;
+    const offset = (page - 1) * limit;
+
+    const countResult = await pool.query('SELECT COUNT(*) FROM sales');
+    const total = parseInt(countResult.rows[0].count);
+
+    const result = await pool.query(
+      `SELECT s.*, c.name as customer_name, c.phone as customer_phone,
+        (SELECT COUNT(*) FROM sale_items si WHERE si.sale_id = s.id) as item_count
+       FROM sales s LEFT JOIN customers c ON s.customer_id = c.id
+       ORDER BY s.created_at DESC LIMIT $1 OFFSET $2`,
+      [limit, offset]
+    );
+    res.json({ sales: result.rows, total });
+  } catch (error) {
+    console.error('Error fetching sales:', error);
+    res.status(500).json({ error: 'Failed to fetch sales' });
+  }
+});
+
+app.get('/api/sales/:id', authenticateToken, async (req, res) => {
+  try {
+    const { id } = req.params;
+    const saleResult = await pool.query(
+      `SELECT s.*, c.name as customer_name, c.phone as customer_phone, c.city as customer_city
+       FROM sales s LEFT JOIN customers c ON s.customer_id = c.id WHERE s.id = $1`,
+      [id]
+    );
+    if (saleResult.rows.length === 0) return res.status(404).json({ error: 'Sale not found' });
+
+    const itemsResult = await pool.query(
+      `SELECT si.*, f.tip as filament_tip, f.finish as filament_finish, f.boja as filament_boja
+       FROM sale_items si JOIN filaments f ON si.filament_id = f.id WHERE si.sale_id = $1 ORDER BY si.created_at`,
+      [id]
+    );
+    res.json({ ...saleResult.rows[0], items: itemsResult.rows });
+  } catch (error) {
+    console.error('Error fetching sale:', error);
+    res.status(500).json({ error: 'Failed to fetch sale' });
+  }
+});
+
+app.delete('/api/sales/:id', authenticateToken, async (req, res) => {
+  const client = await pool.connect();
+  try {
+    await client.query('BEGIN');
+    const { id } = req.params;
+
+    // Get sale items to restore inventory
+    const itemsResult = await client.query('SELECT * FROM sale_items WHERE sale_id = $1', [id]);
+    if (itemsResult.rows.length === 0) {
+      await client.query('ROLLBACK');
+      return res.status(404).json({ error: 'Sale not found' });
+    }
+
+    // Restore inventory for each item
+    for (const item of itemsResult.rows) {
+      const updateField = item.item_type === 'refill' ? 'refill' : 'spulna';
+      await client.query(
+        `UPDATE filaments SET ${updateField} = ${updateField} + $1, kolicina = kolicina + $1, updated_at = CURRENT_TIMESTAMP WHERE id = $2`,
+        [item.quantity, item.filament_id]
+      );
+    }
+
+    // Delete sale (cascade deletes sale_items)
+    await client.query('DELETE FROM sales WHERE id = $1', [id]);
+    await client.query('COMMIT');
+    res.json({ success: true });
+  } catch (error) {
+    await client.query('ROLLBACK');
+    console.error('Error deleting sale:', error);
+    res.status(500).json({ error: 'Failed to delete sale' });
+  } finally {
+    client.release();
+  }
+});
+
+// ==========================================
+// Analytics endpoints (admin-only)
+// ==========================================
+
+function getPeriodInterval(period) {
+  const map = {
+    '7d': '7 days', '30d': '30 days', '90d': '90 days',
+    '6m': '6 months', '1y': '1 year', 'all': '100 years'
+  };
+  return map[period] || '30 days';
+}
+
+app.get('/api/analytics/overview', authenticateToken, async (req, res) => {
+  try {
+    const interval = getPeriodInterval(req.query.period);
+    const result = await pool.query(
+      `SELECT
+        COALESCE(SUM(total_amount), 0) as revenue,
+        COUNT(*) as sales_count,
+        COALESCE(ROUND(AVG(total_amount)), 0) as avg_order_value,
+        COUNT(DISTINCT customer_id) as unique_customers
+       FROM sales WHERE created_at >= NOW() - $1::interval`,
+      [interval]
+    );
+    res.json(result.rows[0]);
+  } catch (error) {
+    console.error('Error fetching analytics overview:', error);
+    res.status(500).json({ error: 'Failed to fetch analytics' });
+  }
+});
+
+app.get('/api/analytics/top-sellers', authenticateToken, async (req, res) => {
+  try {
+    const interval = getPeriodInterval(req.query.period);
+    const result = await pool.query(
+      `SELECT f.boja, f.tip, f.finish,
+        SUM(si.quantity) as total_qty,
+        SUM(si.quantity * si.unit_price) as total_revenue
+       FROM sale_items si
+       JOIN filaments f ON si.filament_id = f.id
+       JOIN sales s ON si.sale_id = s.id
+       WHERE s.created_at >= NOW() - $1::interval
+       GROUP BY f.boja, f.tip, f.finish
+       ORDER BY total_qty DESC LIMIT 10`,
+      [interval]
+    );
+    res.json(result.rows);
+  } catch (error) {
+    console.error('Error fetching top sellers:', error);
+    res.status(500).json({ error: 'Failed to fetch top sellers' });
+  }
+});
+
+app.get('/api/analytics/inventory-alerts', authenticateToken, async (req, res) => {
+  try {
+    const result = await pool.query(
+      `SELECT f.id, f.boja, f.tip, f.finish, f.refill, f.spulna, f.kolicina,
+        COALESCE(
+          (SELECT SUM(si.quantity)::float / GREATEST(EXTRACT(EPOCH FROM (NOW() - MIN(s.created_at))) / 86400, 1)
+           FROM sale_items si JOIN sales s ON si.sale_id = s.id
+           WHERE si.filament_id = f.id AND s.created_at >= NOW() - INTERVAL '90 days'),
+          0
+        ) as avg_daily_sales
+       FROM filaments f
+       WHERE f.kolicina <= 5
+       ORDER BY f.kolicina ASC, f.boja`
+    );
+    const rows = result.rows.map(r => ({
+      ...r,
+      avg_daily_sales: parseFloat(r.avg_daily_sales) || 0,
+      days_until_stockout: r.avg_daily_sales > 0
+        ? Math.round(r.kolicina / r.avg_daily_sales)
+        : null
+    }));
+    res.json(rows);
+  } catch (error) {
+    console.error('Error fetching inventory alerts:', error);
+    res.status(500).json({ error: 'Failed to fetch inventory alerts' });
+  }
+});
+
+app.get('/api/analytics/revenue-chart', authenticateToken, async (req, res) => {
+  try {
+    const interval = getPeriodInterval(req.query.period || '6m');
+    const group = req.query.group || 'month';
+    const truncTo = group === 'day' ? 'day' : group === 'week' ? 'week' : 'month';
+
+    const result = await pool.query(
+      `SELECT DATE_TRUNC($1, created_at) as period,
+        SUM(total_amount) as revenue,
+        COUNT(*) as count
+       FROM sales
+       WHERE created_at >= NOW() - $2::interval
+       GROUP BY DATE_TRUNC($1, created_at)
+       ORDER BY period`,
+      [truncTo, interval]
+    );
+    res.json(result.rows);
+  } catch (error) {
+    console.error('Error fetching revenue chart:', error);
+    res.status(500).json({ error: 'Failed to fetch revenue chart' });
+  }
+});
+
+app.get('/api/analytics/type-breakdown', authenticateToken, async (req, res) => {
+  try {
+    const interval = getPeriodInterval(req.query.period);
+    const result = await pool.query(
+      `SELECT si.item_type,
+        SUM(si.quantity) as total_qty,
+        SUM(si.quantity * si.unit_price) as total_revenue
+       FROM sale_items si
+       JOIN sales s ON si.sale_id = s.id
+       WHERE s.created_at >= NOW() - $1::interval
+       GROUP BY si.item_type`,
+      [interval]
+    );
+    res.json(result.rows);
+  } catch (error) {
+    console.error('Error fetching type breakdown:', error);
+    res.status(500).json({ error: 'Failed to fetch type breakdown' });
+  }
+});
+
+app.listen(PORT, () => {
+  console.log(`Server running on port ${PORT}`);
+});

api/vercel.json

@@ -0,0 +1,18 @@
+{
+  "version": 2,
+  "builds": [
+    {
+      "src": "server.js",
+      "use": "@vercel/node"
+    }
+  ],
+  "routes": [
+    {
+      "src": "/(.*)",
+      "dest": "server.js"
+    }
+  ],
+  "env": {
+    "NODE_TLS_REJECT_UNAUTHORIZED": "0"
+  }
+}

app/admin/dashboard/page.tsx

@@ -1,386 +0,0 @@
-'use client'
-
-import { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-import axios from 'axios';
-import { Filament } from '../../../src/types/filament';
-
-interface FilamentWithId extends Filament {
-  id: string;
-  createdAt?: string;
-  updatedAt?: string;
-}
-
-export default function AdminDashboard() {
-  const router = useRouter();
-  const [filaments, setFilaments] = useState<FilamentWithId[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState('');
-  const [editingFilament, setEditingFilament] = useState<FilamentWithId | null>(null);
-  const [showAddForm, setShowAddForm] = useState(false);
-
-  // Check authentication
-  useEffect(() => {
-    const token = localStorage.getItem('authToken');
-    const expiry = localStorage.getItem('tokenExpiry');
-    
-    if (!token || !expiry || Date.now() > parseInt(expiry)) {
-      router.push('/admin');
-    }
-  }, [router]);
-
-  // Fetch filaments
-  const fetchFilaments = async () => {
-    try {
-      setLoading(true);
-      const response = await axios.get(`${process.env.NEXT_PUBLIC_API_URL}/filaments`);
-      setFilaments(response.data);
-    } catch (err) {
-      setError('Greška pri učitavanju filamenata');
-      console.error('Fetch error:', err);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    fetchFilaments();
-  }, []);
-
-  const getAuthHeaders = () => ({
-    headers: {
-      Authorization: `Bearer ${localStorage.getItem('authToken')}`
-    }
-  });
-
-  const handleDelete = async (id: string) => {
-    if (!confirm('Da li ste sigurni da želite obrisati ovaj filament?')) return;
-
-    try {
-      await axios.delete(`${process.env.NEXT_PUBLIC_API_URL}/filaments/${id}`, getAuthHeaders());
-      await fetchFilaments();
-    } catch (err) {
-      alert('Greška pri brisanju filamenta');
-      console.error('Delete error:', err);
-    }
-  };
-
-  const handleSave = async (filament: Partial<FilamentWithId>) => {
-    try {
-      if (filament.id) {
-        // Update existing
-        await axios.put(
-          `${process.env.NEXT_PUBLIC_API_URL}/filaments/${filament.id}`,
-          filament,
-          getAuthHeaders()
-        );
-      } else {
-        // Create new
-        await axios.post(
-          `${process.env.NEXT_PUBLIC_API_URL}/filaments`,
-          filament,
-          getAuthHeaders()
-        );
-      }
-      
-      setEditingFilament(null);
-      setShowAddForm(false);
-      await fetchFilaments();
-    } catch (err) {
-      alert('Greška pri čuvanju filamenta');
-      console.error('Save error:', err);
-    }
-  };
-
-  const handleLogout = () => {
-    localStorage.removeItem('authToken');
-    localStorage.removeItem('tokenExpiry');
-    router.push('/admin');
-  };
-
-  if (loading) {
-    return (
-      <div className="min-h-screen flex items-center justify-center">
-        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900 dark:border-gray-100"></div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
-      <header className="bg-white dark:bg-gray-800 shadow">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-          <div className="flex justify-between items-center">
-            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
-              Admin Dashboard
-            </h1>
-            <div className="flex gap-4">
-              <button
-                onClick={() => setShowAddForm(true)}
-                className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
-              >
-                Dodaj novi filament
-              </button>
-              <button
-                onClick={handleLogout}
-                className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
-              >
-                Odjava
-              </button>
-            </div>
-          </div>
-        </div>
-      </header>
-
-      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        {error && (
-          <div className="mb-4 p-4 bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-400 rounded">
-            {error}
-          </div>
-        )}
-
-        {/* Add/Edit Form */}
-        {(showAddForm || editingFilament) && (
-          <FilamentForm
-            filament={editingFilament || {}}
-            onSave={handleSave}
-            onCancel={() => {
-              setEditingFilament(null);
-              setShowAddForm(false);
-            }}
-          />
-        )}
-
-        {/* Filaments Table */}
-        <div className="overflow-x-auto">
-          <table className="min-w-full bg-white dark:bg-gray-800 shadow rounded">
-            <thead>
-              <tr className="bg-gray-100 dark:bg-gray-700">
-                <th className="px-4 py-2 text-left">Brand</th>
-                <th className="px-4 py-2 text-left">Tip</th>
-                <th className="px-4 py-2 text-left">Finish</th>
-                <th className="px-4 py-2 text-left">Boja</th>
-                <th className="px-4 py-2 text-left">Refill</th>
-                <th className="px-4 py-2 text-left">Vakum</th>
-                <th className="px-4 py-2 text-left">Otvoreno</th>
-                <th className="px-4 py-2 text-left">Količina</th>
-                <th className="px-4 py-2 text-left">Cena</th>
-                <th className="px-4 py-2 text-left">Akcije</th>
-              </tr>
-            </thead>
-            <tbody>
-              {filaments.map((filament) => (
-                <tr key={filament.id} className="border-t dark:border-gray-700">
-                  <td className="px-4 py-2">{filament.brand}</td>
-                  <td className="px-4 py-2">{filament.tip}</td>
-                  <td className="px-4 py-2">{filament.finish}</td>
-                  <td className="px-4 py-2">{filament.boja}</td>
-                  <td className="px-4 py-2">{filament.refill}</td>
-                  <td className="px-4 py-2">{filament.vakum}</td>
-                  <td className="px-4 py-2">{filament.otvoreno}</td>
-                  <td className="px-4 py-2">{filament.kolicina}</td>
-                  <td className="px-4 py-2">{filament.cena}</td>
-                  <td className="px-4 py-2">
-                    <button
-                      onClick={() => setEditingFilament(filament)}
-                      className="text-blue-600 hover:text-blue-800 mr-2"
-                    >
-                      Izmeni
-                    </button>
-                    <button
-                      onClick={() => handleDelete(filament.id)}
-                      className="text-red-600 hover:text-red-800"
-                    >
-                      Obriši
-                    </button>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </main>
-    </div>
-  );
-}
-
-// Filament Form Component
-function FilamentForm({ 
-  filament, 
-  onSave, 
-  onCancel 
-}: { 
-  filament: Partial<FilamentWithId>, 
-  onSave: (filament: Partial<FilamentWithId>) => void,
-  onCancel: () => void 
-}) {
-  const [formData, setFormData] = useState({
-    brand: filament.brand || '',
-    tip: filament.tip || '',
-    finish: filament.finish || '',
-    boja: filament.boja || '',
-    refill: filament.refill || '',
-    vakum: filament.vakum || '',
-    otvoreno: filament.otvoreno || '',
-    kolicina: filament.kolicina || '',
-    cena: filament.cena || '',
-  });
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
-    setFormData({
-      ...formData,
-      [e.target.name]: e.target.value
-    });
-  };
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    onSave({
-      ...filament,
-      ...formData
-    });
-  };
-
-  return (
-    <div className="mb-8 p-6 bg-white dark:bg-gray-800 rounded shadow">
-      <h2 className="text-xl font-bold mb-4">
-        {filament.id ? 'Izmeni filament' : 'Dodaj novi filament'}
-      </h2>
-      <form onSubmit={handleSubmit} className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div>
-          <label className="block text-sm font-medium mb-1">Brand</label>
-          <input
-            type="text"
-            name="brand"
-            value={formData.brand}
-            onChange={handleChange}
-            required
-            className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600"
-          />
-        </div>
-        
-        <div>
-          <label className="block text-sm font-medium mb-1">Tip</label>
-          <select
-            name="tip"
-            value={formData.tip}
-            onChange={handleChange}
-            required
-            className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600"
-          >
-            <option value="">Izaberi tip</option>
-            <option value="PLA">PLA</option>
-            <option value="PETG">PETG</option>
-            <option value="ABS">ABS</option>
-            <option value="TPU">TPU</option>
-            <option value="Silk PLA">Silk PLA</option>
-            <option value="PLA Matte">PLA Matte</option>
-          </select>
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium mb-1">Finish</label>
-          <select
-            name="finish"
-            value={formData.finish}
-            onChange={handleChange}
-            required
-            className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600"
-          >
-            <option value="">Izaberi finish</option>
-            <option value="Basic">Basic</option>
-            <option value="Matte">Matte</option>
-            <option value="Silk">Silk</option>
-            <option value="Metal">Metal</option>
-            <option value="Glow">Glow</option>
-          </select>
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium mb-1">Boja</label>
-          <input
-            type="text"
-            name="boja"
-            value={formData.boja}
-            onChange={handleChange}
-            required
-            className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600"
-          />
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium mb-1">Refill</label>
-          <select
-            name="refill"
-            value={formData.refill}
-            onChange={handleChange}
-            className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600"
-          >
-            <option value="">Ne</option>
-            <option value="Da">Da</option>
-          </select>
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium mb-1">Vakum</label>
-          <input
-            type="text"
-            name="vakum"
-            value={formData.vakum}
-            onChange={handleChange}
-            className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600"
-          />
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium mb-1">Otvoreno</label>
-          <input
-            type="text"
-            name="otvoreno"
-            value={formData.otvoreno}
-            onChange={handleChange}
-            className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600"
-          />
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium mb-1">Količina</label>
-          <input
-            type="text"
-            name="kolicina"
-            value={formData.kolicina}
-            onChange={handleChange}
-            className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600"
-          />
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium mb-1">Cena</label>
-          <input
-            type="text"
-            name="cena"
-            value={formData.cena}
-            onChange={handleChange}
-            className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600"
-          />
-        </div>
-
-        <div className="md:col-span-2 flex gap-4">
-          <button
-            type="submit"
-            className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
-          >
-            Sačuvaj
-          </button>
-          <button
-            type="button"
-            onClick={onCancel}
-            className="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700"
-          >
-            Otkaži
-          </button>
-        </div>
-      </form>
-    </div>
-  );
-}

app/layout.tsx

@@ -1,5 +1,7 @@
 import type { Metadata } from 'next'
 import '../src/styles/index.css'
+import { BackToTop } from '../src/components/BackToTop'
+import { MatomoAnalytics } from '../src/components/MatomoAnalytics'
 
 export const metadata: Metadata = {
   title: 'Filamenteka',
@@ -12,8 +14,46 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <html lang="sr">
+    <html lang="sr" suppressHydrationWarning>
-      <body>{children}</body>
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                document.documentElement.classList.add('no-transitions');
+                // Apply dark mode immediately for admin pages
+                if (window.location.pathname.startsWith('/upadaj')) {
+                  document.documentElement.classList.add('dark');
+                } else {
+                  // For non-admin pages, check localStorage
+                  try {
+                    const darkMode = localStorage.getItem('darkMode');
+                    if (darkMode === 'true') {
+                      document.documentElement.classList.add('dark');
+                    }
+                  } catch (e) {}
+                }
+                // Remove no-transitions class after a short delay
+                window.addEventListener('load', function() {
+                  setTimeout(function() {
+                    document.documentElement.classList.remove('no-transitions');
+                  }, 100);
+                });
+              })();
+            `,
+          }}
+        />
+      </head>
+      <body suppressHydrationWarning>
+        {children}
+        <BackToTop />
+        {process.env.NEXT_PUBLIC_MATOMO_URL && process.env.NEXT_PUBLIC_MATOMO_SITE_ID && (
+          <MatomoAnalytics 
+            matomoUrl={process.env.NEXT_PUBLIC_MATOMO_URL}
+            siteId={process.env.NEXT_PUBLIC_MATOMO_SITE_ID}
+          />
+        )}
+      </body>
     </html>
   )
 }

app/page.tsx

@@ -1,17 +1,22 @@
 'use client'
 
 import { useState, useEffect } from 'react';
-import { FilamentTable } from '../src/components/FilamentTable';
+import { FilamentTableV2 } from '../src/components/FilamentTableV2';
+import { SaleCountdown } from '../src/components/SaleCountdown';
+import ColorRequestModal from '../src/components/ColorRequestModal';
 import { Filament } from '../src/types/filament';
-import axios from 'axios';
+import { filamentService } from '../src/services/api';
+import { trackEvent } from '../src/components/MatomoAnalytics';
 
 export default function Home() {
   const [filaments, setFilaments] = useState<Filament[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [lastUpdate, setLastUpdate] = useState<Date | null>(null);
   const [darkMode, setDarkMode] = useState(false);
   const [mounted, setMounted] = useState(false);
+  const [resetKey, setResetKey] = useState(0);
+  const [showColorRequestModal, setShowColorRequestModal] = useState(false);
+  // Removed V1/V2 toggle - now only using V2
 
   // Initialize dark mode from localStorage after mounting
   useEffect(() => {
@@ -39,17 +44,21 @@ export default function Home() {
       setLoading(true);
       setError(null);
       
-      // Use API if available, fallback to static JSON
+      const filamentsData = await filamentService.getAll();
-      const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+      setFilaments(filamentsData);
-      const url = apiUrl ? `${apiUrl}/filaments` : '/data.json';
+    } catch (err: any) {
-      console.log('Fetching from:', url);
+      console.error('API Error:', err);
-      console.log('API URL configured:', apiUrl);
+      
-      const response = await axios.get(url);
+      // More descriptive error messages
-      console.log('Response data:', response.data);
+      if (err.code === 'ERR_NETWORK') {
-      setFilaments(response.data);
+        setError('Network Error - Unable to connect to API');
-      setLastUpdate(new Date());
+      } else if (err.response) {
-    } catch (err) {
+        setError(`Server error: ${err.response.status} - ${err.response.statusText}`);
-      setError(err instanceof Error ? err.message : 'Greška pri učitavanju filamenata');
+      } else if (err.request) {
+        setError('No response from server - check if API is running');
+      } else {
+        setError(err.message || 'Greška pri učitavanju filamenata');
+      }
     } finally {
       setLoading(false);
     }
@@ -58,41 +67,91 @@ export default function Home() {
   useEffect(() => {
     fetchFilaments();
     
-    // Refresh every 5 minutes
+    // Auto-refresh data every 30 seconds to stay in sync
-    const interval = setInterval(fetchFilaments, 5 * 60 * 1000);
+    const interval = setInterval(() => {
+      fetchFilaments();
+    }, 30000);
     
-    return () => clearInterval(interval);
+    // Also refresh when window regains focus
+    const handleFocus = () => {
+      fetchFilaments();
+    };
+    window.addEventListener('focus', handleFocus);
+    
+    return () => {
+      clearInterval(interval);
+      window.removeEventListener('focus', handleFocus);
+    };
   }, []);
 
+  const handleLogoClick = () => {
+    setResetKey(prev => prev + 1);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors">
-      <header className="bg-white dark:bg-gray-800 shadow transition-colors">
+      {/* Full-screen notice overlay - remove after March 8 */}
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-gradient-to-br from-gray-950 via-gray-900 to-gray-950 px-6 overflow-hidden">
-          <div className="flex justify-between items-center">
+        {/* Subtle background glow */}
-            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-amber-500/5 rounded-full blur-3xl" />
-              Filamenteka
+
+        <div className="relative max-w-xl w-full text-center space-y-10">
+          <img
+            src="/logo.png"
+            alt="Filamenteka"
+            className="h-32 sm:h-44 w-auto mx-auto drop-shadow-2xl"
+            onError={(e) => { (e.currentTarget as HTMLImageElement).style.display = 'none'; }}
+          />
+
+          <div className="space-y-6">
+            <div className="inline-flex items-center gap-2 px-4 py-1.5 bg-amber-500/10 border border-amber-500/20 rounded-full">
+              <span className="w-2 h-2 bg-amber-400 rounded-full animate-pulse" />
+              <span className="text-amber-400 text-sm font-medium tracking-wide uppercase">Obaveštenje</span>
+            </div>
+
+            <h1 className="text-3xl sm:text-4xl font-bold text-white tracking-tight">
+              Privremena pauza
             </h1>
-            <div className="flex items-center gap-4">
+
-              {lastUpdate && (
+            <p className="text-lg sm:text-xl text-gray-400 leading-relaxed max-w-md mx-auto">
-                <span className="text-sm text-gray-500 dark:text-gray-400">
+              Trenutno primamo porudžbine samo od postojećih kupaca. Redovna prodaja se vraća nakon <span className="text-amber-400 font-semibold">8. marta</span>.
-                  Poslednje ažuriranje: {lastUpdate.toLocaleTimeString('sr-RS')}
+            </p>
-                </span>
+          </div>
-              )}
+
-              <button
+          <div className="pt-6 border-t border-white/5">
-                onClick={fetchFilaments}
+            <p className="text-gray-600 text-sm">Hvala na razumevanju</p>
-                disabled={loading}
+          </div>
-                className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50"
+        </div>
-              >
+      </div>
-                {loading ? 'Ažuriranje...' : 'Osveži'}
+
-              </button>
+      <header className="bg-gradient-to-r from-blue-50 to-orange-50 dark:from-gray-800 dark:to-gray-900 shadow-lg transition-all duration-300">
-              {mounted && (
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3 sm:py-4">
+          <div className="flex flex-col sm:flex-row items-center justify-between gap-3 sm:gap-0">
+            <div className="flex-1 flex flex-col sm:flex-row justify-center items-center gap-1 sm:gap-3 text-sm sm:text-lg">
+              <span className="text-blue-700 dark:text-blue-300 font-medium animate-pulse text-center">
+                Kupovina po gramu dostupna
+              </span>
+              <span className="hidden sm:inline text-gray-400 dark:text-gray-600">•</span>
+              <span className="text-orange-700 dark:text-orange-300 font-medium animate-pulse text-center">
+                Popust za 5+ komada
+              </span>
+            </div>
+            
+            <div className="flex-shrink-0">
+              {mounted ? (
                 <button
-                  onClick={() => setDarkMode(!darkMode)}
+                  onClick={() => {
-                  className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
+                    setDarkMode(!darkMode);
+                    trackEvent('UI', 'Dark Mode Toggle', darkMode ? 'Light' : 'Dark');
+                  }}
+                  className="p-2 bg-white/50 dark:bg-gray-700/50 backdrop-blur text-gray-800 dark:text-gray-200 rounded-full hover:bg-white/80 dark:hover:bg-gray-600/80 transition-all duration-200 shadow-md"
                   title={darkMode ? 'Svetla tema' : 'Tamna tema'}
                 >
                   {darkMode ? '☀️' : '🌙'}
                 </button>
+              ) : (
+                <div className="w-10 h-10" />
               )}
             </div>
           </div>
@@ -100,13 +159,153 @@ export default function Home() {
       </header>
       
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <FilamentTable 
+        {/* Logo centered above content */}
+        <div className="flex justify-center mb-8">
+          <button
+            onClick={handleLogoClick}
+            className="group transition-transform duration-200"
+            title="Klikni za reset"
+          >
+            {/* Using next/image would cause preload, so we use regular img with loading="lazy" */}
+            <img 
+              src="/logo.png" 
+              alt="Filamenteka" 
+              loading="lazy"
+              decoding="async"
+              className="h-36 sm:h-44 md:h-52 w-auto drop-shadow-lg group-hover:drop-shadow-2xl transition-all duration-200"
+              onError={(e) => {
+                const target = e.currentTarget as HTMLImageElement;
+                target.style.display = 'none';
+              }}
+            />
+          </button>
+        </div>
+        
+        {/* Action Buttons */}
+        <div className="flex flex-col sm:flex-row justify-center items-center gap-4 mb-8">
+          <a 
+            href="https://www.kupujemprodajem.com/kompjuteri-desktop/3d-stampaci-i-oprema/originalni-bambu-lab-filamenti-na-stanju/oglas/182256246"
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={() => trackEvent('External Link', 'Kupujem Prodajem', 'Homepage')}
+            className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-105"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            Kupi na Kupujem Prodajem
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+            </svg>
+          </a>
+          
+          <a 
+            href="tel:+381631031048"
+            onClick={() => trackEvent('Contact', 'Phone Call', 'Homepage')}
+            className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-105"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+            </svg>
+            Pozovi +381 63 103 1048
+          </a>
+          
+          <button
+            onClick={() => {
+              setShowColorRequestModal(true);
+              trackEvent('Navigation', 'Request Color', 'Homepage');
+            }}
+            className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-105"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
+            </svg>
+            Zatraži Novu Boju
+          </button>
+        </div>
+        
+        <SaleCountdown
+          hasActiveSale={filaments.some(f => f.sale_active === true)}
+          maxSalePercentage={Math.max(...filaments.filter(f => f.sale_active === true).map(f => f.sale_percentage || 0), 0)}
+          saleEndDate={(() => {
+            const activeSales = filaments.filter(f => f.sale_active === true && f.sale_end_date);
+            if (activeSales.length === 0) return null;
+            const latestSale = activeSales.reduce((latest, current) => {
+              if (!latest.sale_end_date) return current;
+              if (!current.sale_end_date) return latest;
+              return new Date(current.sale_end_date) > new Date(latest.sale_end_date) ? current : latest;
+            }).sale_end_date;
+            return latestSale;
+          })()}
+        />
+
+        {/* Pricing Information */}
+        <div className="mb-6 space-y-4">
+          {/* Reusable Spool Price Notice */}
+          <div className="p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+            <div className="flex items-center justify-center gap-2">
+              <svg className="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              <span className="text-blue-800 dark:text-blue-200 font-medium">
+                Cena višekratne špulne: 499 RSD
+              </span>
+            </div>
+          </div>
+
+          {/* Selling by Grams Notice */}
+          <div className="p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
+            <div className="flex flex-col items-center gap-3 text-center">
+              <div className="flex items-center justify-center gap-2">
+                <svg className="w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
+                </svg>
+                <span className="text-green-800 dark:text-green-200 font-semibold">
+                  Prodaja filamenta na grame - idealno za testiranje materijala ili manje projekte
+                </span>
+              </div>
+              <div className="flex flex-wrap justify-center gap-4 text-sm">
+                <span className="text-green-700 dark:text-green-300 font-medium">50gr - 299 RSD</span>
+                <span className="text-gray-400 dark:text-gray-600">•</span>
+                <span className="text-green-700 dark:text-green-300 font-medium">100gr - 499 RSD</span>
+                <span className="text-gray-400 dark:text-gray-600">•</span>
+                <span className="text-green-700 dark:text-green-300 font-medium">200gr - 949 RSD</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <FilamentTableV2 
+          key={resetKey}
           filaments={filaments} 
-          loading={loading} 
-          error={error || undefined} 
         />
       </main>
       
+      <footer className="bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 mt-16">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+          <div className="flex flex-col justify-center items-center gap-6">
+            <div className="text-center">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Kontakt</h3>
+              <a
+                href="tel:+381631031048"
+                className="inline-flex items-center gap-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
+                onClick={() => trackEvent('Contact', 'Phone Call', 'Footer')}
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+                </svg>
+                +381 63 103 1048
+              </a>
+            </div>
+          </div>
+        </div>
+      </footer>
+      
+      {/* Color Request Modal */}
+      <ColorRequestModal 
+        isOpen={showColorRequestModal}
+        onClose={() => setShowColorRequestModal(false)}
+      />
     </div>
   );
 }

app/upadaj/analytics/page.tsx

@@ -0,0 +1,427 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import { analyticsService } from '@/src/services/api';
+import type { AnalyticsOverview, TopSeller, RevenueDataPoint, InventoryAlert, TypeBreakdown } from '@/src/types/sales';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar, PieChart, Pie, Cell, Legend } from 'recharts';
+import { AdminSidebar } from '@/src/components/AdminSidebar';
+
+type Period = '7d' | '30d' | '90d' | '6m' | '1y' | 'all';
+
+const PERIOD_LABELS: Record<Period, string> = {
+  '7d': '7d',
+  '30d': '30d',
+  '90d': '90d',
+  '6m': '6m',
+  '1y': '1y',
+  'all': 'Sve',
+};
+
+const PERIOD_GROUP: Record<Period, string> = {
+  '7d': 'day',
+  '30d': 'day',
+  '90d': 'week',
+  '6m': 'month',
+  '1y': 'month',
+  'all': 'month',
+};
+
+function formatRSD(value: number): string {
+  return new Intl.NumberFormat('sr-RS', {
+    style: 'currency',
+    currency: 'RSD',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  }).format(value);
+}
+
+export default function AnalyticsDashboard() {
+  const router = useRouter();
+  const [mounted, setMounted] = useState(false);
+  const [darkMode, setDarkMode] = useState(false);
+  const [period, setPeriod] = useState<Period>('30d');
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  const [overview, setOverview] = useState<AnalyticsOverview | null>(null);
+  const [topSellers, setTopSellers] = useState<TopSeller[]>([]);
+  const [revenueData, setRevenueData] = useState<RevenueDataPoint[]>([]);
+  const [inventoryAlerts, setInventoryAlerts] = useState<InventoryAlert[]>([]);
+  const [typeBreakdown, setTypeBreakdown] = useState<TypeBreakdown[]>([]);
+
+  // Initialize dark mode
+  useEffect(() => {
+    setMounted(true);
+    const saved = localStorage.getItem('darkMode');
+    setDarkMode(saved !== null ? JSON.parse(saved) : true);
+  }, []);
+
+  useEffect(() => {
+    if (!mounted) return;
+    localStorage.setItem('darkMode', JSON.stringify(darkMode));
+    if (darkMode) document.documentElement.classList.add('dark');
+    else document.documentElement.classList.remove('dark');
+  }, [darkMode, mounted]);
+
+  // Check authentication
+  useEffect(() => {
+    if (!mounted) return;
+    const token = localStorage.getItem('authToken');
+    const expiry = localStorage.getItem('tokenExpiry');
+    if (!token || !expiry || Date.now() > parseInt(expiry)) {
+      window.location.href = '/upadaj';
+    }
+  }, [mounted]);
+
+  const fetchData = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError('');
+      const [overviewData, topSellersData, revenueChartData, alertsData, breakdownData] = await Promise.all([
+        analyticsService.getOverview(period),
+        analyticsService.getTopSellers(period),
+        analyticsService.getRevenueChart(period, PERIOD_GROUP[period]),
+        analyticsService.getInventoryAlerts(),
+        analyticsService.getTypeBreakdown(period),
+      ]);
+      setOverview(overviewData);
+      setTopSellers(topSellersData);
+      setRevenueData(revenueChartData);
+      setInventoryAlerts(alertsData);
+      setTypeBreakdown(breakdownData);
+    } catch (err) {
+      setError('Greska pri ucitavanju analitike');
+      console.error('Analytics fetch error:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [period]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const handleLogout = () => {
+    localStorage.removeItem('authToken');
+    localStorage.removeItem('tokenExpiry');
+    router.push('/upadaj');
+  };
+
+  const PIE_COLORS = ['#22c55e', '#3b82f6'];
+
+  const getStockRowClass = (alert: InventoryAlert): string => {
+    if (alert.days_until_stockout === null) return '';
+    if (alert.days_until_stockout < 7) return 'bg-red-50 dark:bg-red-900/20';
+    if (alert.days_until_stockout < 14) return 'bg-yellow-50 dark:bg-yellow-900/20';
+    return 'bg-green-50 dark:bg-green-900/20';
+  };
+
+  if (!mounted) {
+    return (
+      <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
+        <div className="text-gray-600 dark:text-gray-400">Ucitavanje...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors">
+      <div className="flex">
+        <AdminSidebar />
+
+        {/* Main Content */}
+        <div className="flex-1">
+          <header className="bg-white dark:bg-gray-800 shadow transition-colors">
+            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+              <div className="flex justify-between items-center">
+                <div className="flex items-center gap-4">
+                  <img
+                    src="/logo.png"
+                    alt="Filamenteka"
+                    className="h-20 sm:h-32 w-auto drop-shadow-lg"
+                  />
+                  <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Analitika</h1>
+                </div>
+                <div className="flex gap-4 flex-wrap">
+                  <button
+                    onClick={() => router.push('/')}
+                    className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+                  >
+                    Nazad na sajt
+                  </button>
+                  {mounted && (
+                    <button
+                      onClick={() => setDarkMode(!darkMode)}
+                      className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
+                      title={darkMode ? 'Svetla tema' : 'Tamna tema'}
+                    >
+                      {darkMode ? '\u2600\uFE0F' : '\uD83C\uDF19'}
+                    </button>
+                  )}
+                  <button
+                    onClick={handleLogout}
+                    className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+                  >
+                    Odjava
+                  </button>
+                </div>
+              </div>
+            </div>
+          </header>
+
+          <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+            {error && (
+              <div className="mb-4 p-4 bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-400 rounded">
+                {error}
+              </div>
+            )}
+
+            {/* Period Selector */}
+            <div className="mb-6 flex gap-2">
+              {(Object.keys(PERIOD_LABELS) as Period[]).map((p) => (
+                <button
+                  key={p}
+                  onClick={() => setPeriod(p)}
+                  className={`px-4 py-2 rounded font-medium transition-colors ${
+                    period === p
+                      ? 'bg-blue-500 text-white'
+                      : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 shadow'
+                  }`}
+                >
+                  {PERIOD_LABELS[p]}
+                </button>
+              ))}
+            </div>
+
+            {loading ? (
+              <div className="flex items-center justify-center py-20">
+                <div className="text-gray-600 dark:text-gray-400">Ucitavanje analitike...</div>
+              </div>
+            ) : (
+              <>
+                {/* Overview Cards */}
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+                  <div className="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
+                    <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Prihod</h3>
+                    <p className="text-2xl font-bold text-gray-900 dark:text-white">
+                      {overview ? formatRSD(overview.revenue) : '-'}
+                    </p>
+                  </div>
+                  <div className="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
+                    <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Broj prodaja</h3>
+                    <p className="text-2xl font-bold text-gray-900 dark:text-white">
+                      {overview ? overview.sales_count : '-'}
+                    </p>
+                  </div>
+                  <div className="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
+                    <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Prosecna vrednost</h3>
+                    <p className="text-2xl font-bold text-gray-900 dark:text-white">
+                      {overview ? formatRSD(overview.avg_order_value) : '-'}
+                    </p>
+                  </div>
+                  <div className="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
+                    <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Jedinstveni kupci</h3>
+                    <p className="text-2xl font-bold text-gray-900 dark:text-white">
+                      {overview ? overview.unique_customers : '-'}
+                    </p>
+                  </div>
+                </div>
+
+                {/* Revenue Chart */}
+                <div className="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mb-8">
+                  <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Prihod po periodu</h2>
+                  <div className="h-80">
+                    {mounted && revenueData.length > 0 ? (
+                      <ResponsiveContainer width="100%" height="100%">
+                        <LineChart data={revenueData}>
+                          <CartesianGrid strokeDasharray="3 3" stroke={darkMode ? '#374151' : '#e5e7eb'} />
+                          <XAxis
+                            dataKey="period"
+                            stroke={darkMode ? '#9ca3af' : '#6b7280'}
+                            tick={{ fontSize: 12 }}
+                          />
+                          <YAxis
+                            stroke={darkMode ? '#9ca3af' : '#6b7280'}
+                            tickFormatter={(value) => formatRSD(value)}
+                            tick={{ fontSize: 12 }}
+                          />
+                          <Tooltip
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            formatter={((value: number) => [formatRSD(value), 'Prihod']) as any}
+                            contentStyle={{
+                              backgroundColor: darkMode ? '#1f2937' : '#ffffff',
+                              border: `1px solid ${darkMode ? '#374151' : '#e5e7eb'}`,
+                              borderRadius: '0.5rem',
+                              color: darkMode ? '#f3f4f6' : '#111827',
+                            }}
+                          />
+                          <Line
+                            type="monotone"
+                            dataKey="revenue"
+                            stroke="#3b82f6"
+                            strokeWidth={2}
+                            dot={{ fill: '#3b82f6', r: 4 }}
+                            activeDot={{ r: 6 }}
+                          />
+                        </LineChart>
+                      </ResponsiveContainer>
+                    ) : (
+                      <div className="flex items-center justify-center h-full text-gray-500 dark:text-gray-400">
+                        Nema podataka za prikaz
+                      </div>
+                    )}
+                  </div>
+                </div>
+
+                {/* Charts Row */}
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
+                  {/* Top Sellers */}
+                  <div className="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
+                    <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Najprodavanije boje</h2>
+                    <div className="h-80">
+                      {mounted && topSellers.length > 0 ? (
+                        <ResponsiveContainer width="100%" height="100%">
+                          <BarChart data={topSellers} layout="vertical" margin={{ left: 20 }}>
+                            <CartesianGrid strokeDasharray="3 3" stroke={darkMode ? '#374151' : '#e5e7eb'} />
+                            <XAxis type="number" stroke={darkMode ? '#9ca3af' : '#6b7280'} tick={{ fontSize: 12 }} />
+                            <YAxis
+                              type="category"
+                              dataKey="boja"
+                              stroke={darkMode ? '#9ca3af' : '#6b7280'}
+                              tick={{ fontSize: 11 }}
+                              width={120}
+                              tickFormatter={(value: string, index: number) => {
+                                const seller = topSellers[index];
+                                return seller ? `${value} (${seller.tip})` : value;
+                              }}
+                            />
+                            <Tooltip
+                              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                              formatter={((value: number) => [value, 'Kolicina']) as any}
+                              contentStyle={{
+                                backgroundColor: darkMode ? '#1f2937' : '#ffffff',
+                                border: `1px solid ${darkMode ? '#374151' : '#e5e7eb'}`,
+                                borderRadius: '0.5rem',
+                                color: darkMode ? '#f3f4f6' : '#111827',
+                              }}
+                            />
+                            <Bar dataKey="total_qty" fill="#8b5cf6" radius={[0, 4, 4, 0]} />
+                          </BarChart>
+                        </ResponsiveContainer>
+                      ) : (
+                        <div className="flex items-center justify-center h-full text-gray-500 dark:text-gray-400">
+                          Nema podataka za prikaz
+                        </div>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* Type Breakdown */}
+                  <div className="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
+                    <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Refill vs Spulna</h2>
+                    <div className="h-64">
+                      {mounted && typeBreakdown.length > 0 ? (
+                        <ResponsiveContainer width="100%" height="100%">
+                          <PieChart>
+                            <Pie
+                              data={typeBreakdown}
+                              dataKey="total_qty"
+                              nameKey="item_type"
+                              cx="50%"
+                              cy="50%"
+                              outerRadius={80}
+                              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                              label={({ name, percent }: any) => `${name} (${((percent ?? 0) * 100).toFixed(0)}%)`}
+                            >
+                              {typeBreakdown.map((_, index) => (
+                                <Cell key={`cell-${index}`} fill={PIE_COLORS[index % PIE_COLORS.length]} />
+                              ))}
+                            </Pie>
+                            <Tooltip
+                              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                              formatter={((value: number, name: string) => [
+                                `${value} kom | ${formatRSD(typeBreakdown.find(t => t.item_type === name)?.total_revenue ?? 0)}`,
+                                name,
+                              ]) as any}
+                              contentStyle={{
+                                backgroundColor: darkMode ? '#1f2937' : '#ffffff',
+                                border: `1px solid ${darkMode ? '#374151' : '#e5e7eb'}`,
+                                borderRadius: '0.5rem',
+                                color: darkMode ? '#f3f4f6' : '#111827',
+                              }}
+                            />
+                            <Legend />
+                          </PieChart>
+                        </ResponsiveContainer>
+                      ) : (
+                        <div className="flex items-center justify-center h-full text-gray-500 dark:text-gray-400">
+                          Nema podataka za prikaz
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+
+                {/* Inventory Alerts */}
+                <div className="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
+                  <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Upozorenja za zalihe</h2>
+                  {inventoryAlerts.length > 0 ? (
+                    <div className="overflow-x-auto">
+                      <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+                        <thead className="bg-gray-50 dark:bg-gray-900">
+                          <tr>
+                            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Boja</th>
+                            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Tip</th>
+                            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Finish</th>
+                            <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Refill</th>
+                            <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Spulna</th>
+                            <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Kolicina</th>
+                            <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Pros. dnevna prodaja</th>
+                            <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Dana do nestanka</th>
+                          </tr>
+                        </thead>
+                        <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+                          {inventoryAlerts.map((alert) => (
+                            <tr key={alert.id} className={getStockRowClass(alert)}>
+                              <td className="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">{alert.boja}</td>
+                              <td className="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">{alert.tip}</td>
+                              <td className="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">{alert.finish}</td>
+                              <td className="px-4 py-3 text-sm text-gray-900 dark:text-gray-100 text-right">{alert.refill}</td>
+                              <td className="px-4 py-3 text-sm text-gray-900 dark:text-gray-100 text-right">{alert.spulna}</td>
+                              <td className="px-4 py-3 text-sm text-gray-900 dark:text-gray-100 text-right font-medium">{alert.kolicina}</td>
+                              <td className="px-4 py-3 text-sm text-gray-900 dark:text-gray-100 text-right">
+                                {alert.avg_daily_sales > 0 ? alert.avg_daily_sales.toFixed(1) : 'N/A'}
+                              </td>
+                              <td className="px-4 py-3 text-sm text-right font-medium">
+                                {alert.days_until_stockout !== null ? (
+                                  <span className={
+                                    alert.days_until_stockout < 7
+                                      ? 'text-red-600 dark:text-red-400'
+                                      : alert.days_until_stockout < 14
+                                      ? 'text-yellow-600 dark:text-yellow-400'
+                                      : 'text-green-600 dark:text-green-400'
+                                  }>
+                                    {Math.round(alert.days_until_stockout)}
+                                  </span>
+                                ) : (
+                                  <span className="text-gray-500 dark:text-gray-400">N/A</span>
+                                )}
+                              </td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    </div>
+                  ) : (
+                    <p className="text-gray-500 dark:text-gray-400">Sve zalihe su na zadovoljavajucem nivou.</p>
+                  )}
+                </div>
+              </>
+            )}
+          </main>
+        </div>
+      </div>
+    </div>
+  );
+}

app/upadaj/colors/page.tsx

@@ -0,0 +1,552 @@
+'use client'
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { colorService } from '@/src/services/api';
+import { bambuLabColors, getColorHex } from '@/src/data/bambuLabColorsComplete';
+import { BulkPriceEditor } from '@/src/components/BulkPriceEditor';
+import { AdminSidebar } from '@/src/components/AdminSidebar';
+import '@/src/styles/select.css';
+
+interface Color {
+  id: string;
+  name: string;
+  hex: string;
+  cena_refill?: number;
+  cena_spulna?: number;
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+export default function ColorsManagement() {
+  const router = useRouter();
+  const [colors, setColors] = useState<Color[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [editingColor, setEditingColor] = useState<Color | null>(null);
+  const [showAddForm, setShowAddForm] = useState(false);
+  const [darkMode, setDarkMode] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedColors, setSelectedColors] = useState<Set<string>>(new Set());
+
+  // Initialize dark mode - default to true for admin
+  useEffect(() => {
+    setMounted(true);
+    const saved = localStorage.getItem('darkMode');
+    if (saved !== null) {
+      setDarkMode(JSON.parse(saved));
+    } else {
+      // Default to dark mode for admin
+      setDarkMode(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!mounted) return;
+    
+    localStorage.setItem('darkMode', JSON.stringify(darkMode));
+    if (darkMode) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }, [darkMode, mounted]);
+
+  // Check authentication
+  useEffect(() => {
+    // Wait for component to mount to avoid SSR issues with localStorage
+    if (!mounted) return;
+
+    const token = localStorage.getItem('authToken');
+    const expiry = localStorage.getItem('tokenExpiry');
+
+    if (!token || !expiry || Date.now() > parseInt(expiry)) {
+      window.location.href = '/upadaj';
+    }
+  }, [mounted]);
+
+  // Fetch colors
+  const fetchColors = async () => {
+    try {
+      setLoading(true);
+      const colors = await colorService.getAll();
+      setColors(colors.sort((a: Color, b: Color) => a.name.localeCompare(b.name)));
+    } catch (err) {
+      setError('Greška pri učitavanju boja');
+      console.error('Fetch error:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchColors();
+  }, []);
+
+
+  const handleSave = async (color: Partial<Color>) => {
+    try {
+      if (color.id) {
+        await colorService.update(color.id, { 
+          name: color.name!, 
+          hex: color.hex!,
+          cena_refill: color.cena_refill,
+          cena_spulna: color.cena_spulna
+        });
+      } else {
+        await colorService.create({ 
+          name: color.name!, 
+          hex: color.hex!,
+          cena_refill: color.cena_refill,
+          cena_spulna: color.cena_spulna
+        });
+      }
+      
+      setEditingColor(null);
+      setShowAddForm(false);
+      fetchColors();
+    } catch (err) {
+      setError('Greška pri čuvanju boje');
+      console.error('Save error:', err);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!confirm('Da li ste sigurni da želite obrisati ovu boju?')) {
+      return;
+    }
+
+    try {
+      await colorService.delete(id);
+      fetchColors();
+    } catch (err) {
+      setError('Greška pri brisanju boje');
+      console.error('Delete error:', err);
+    }
+  };
+
+  const handleBulkDelete = async () => {
+    if (selectedColors.size === 0) {
+      setError('Molimo izaberite boje za brisanje');
+      return;
+    }
+
+    if (!confirm(`Da li ste sigurni da želite obrisati ${selectedColors.size} boja?`)) {
+      return;
+    }
+
+    try {
+      // Delete all selected colors
+      await Promise.all(Array.from(selectedColors).map(id => colorService.delete(id)));
+      setSelectedColors(new Set());
+      fetchColors();
+    } catch (err) {
+      setError('Greška pri brisanju boja');
+      console.error('Bulk delete error:', err);
+    }
+  };
+
+  const toggleColorSelection = (colorId: string) => {
+    const newSelection = new Set(selectedColors);
+    if (newSelection.has(colorId)) {
+      newSelection.delete(colorId);
+    } else {
+      newSelection.add(colorId);
+    }
+    setSelectedColors(newSelection);
+  };
+
+  const toggleSelectAll = () => {
+    const filteredColors = colors.filter(color => 
+      color.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      color.hex.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+    
+    const allFilteredSelected = filteredColors.every(c => selectedColors.has(c.id));
+    
+    if (allFilteredSelected) {
+      // Deselect all
+      setSelectedColors(new Set());
+    } else {
+      // Select all filtered
+      setSelectedColors(new Set(filteredColors.map(c => c.id)));
+    }
+  };
+
+  const handleLogout = () => {
+    localStorage.removeItem('authToken');
+    localStorage.removeItem('tokenExpiry');
+    router.push('/upadaj');
+  };
+
+  if (loading) {
+    return <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
+      <div className="text-gray-600 dark:text-gray-400">Učitavanje...</div>
+    </div>;
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors">
+      <div className="flex">
+        <AdminSidebar />
+
+        {/* Main Content */}
+        <div className="flex-1">
+          <header className="bg-white dark:bg-gray-800 shadow transition-colors">
+            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+              <div className="flex justify-between items-center">
+                <div className="flex items-center gap-4">
+                  <img 
+                    src="/logo.png" 
+                    alt="Filamenteka" 
+                    className="h-20 sm:h-32 w-auto drop-shadow-lg"
+                  />
+                  <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Upravljanje bojama</h1>
+                </div>
+                <div className="flex gap-4 flex-wrap">
+                  {!showAddForm && !editingColor && (
+                    <button
+                      onClick={() => setShowAddForm(true)}
+                      className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
+                    >
+                      Dodaj novu boju
+                    </button>
+                  )}
+                  <BulkPriceEditor colors={colors} onUpdate={fetchColors} />
+                  {selectedColors.size > 0 && (
+                    <button
+                      onClick={handleBulkDelete}
+                      className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+                    >
+                      Obriši izabrane ({selectedColors.size})
+                    </button>
+                  )}
+                  <button
+                    onClick={() => router.push('/')}
+                    className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+                  >
+                    Nazad na sajt
+                  </button>
+                  {mounted && (
+                    <button
+                      onClick={() => setDarkMode(!darkMode)}
+                      className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
+                      title={darkMode ? 'Svetla tema' : 'Tamna tema'}
+                    >
+                      {darkMode ? '☀️' : '🌙'}
+                    </button>
+                  )}
+                  <button
+                    onClick={handleLogout}
+                    className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+                  >
+                    Odjava
+                  </button>
+                </div>
+              </div>
+            </div>
+          </header>
+
+          <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+            {error && (
+              <div className="mb-4 p-4 bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-400 rounded">
+                {error}
+              </div>
+            )}
+
+            {/* Add Form (stays at top) */}
+            {showAddForm && (
+              <ColorForm
+                color={{}}
+                onSave={handleSave}
+                onCancel={() => {
+                  setShowAddForm(false);
+                }}
+              />
+            )}
+
+            {/* Search Bar */}
+            <div className="mb-4">
+              <div className="relative">
+                <input
+                  type="text"
+                  placeholder="Pretraži boje..."
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  className="w-full px-4 py-2 pl-10 pr-4 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-blue-500"
+                />
+                <svg className="absolute left-3 top-2.5 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                </svg>
+              </div>
+            </div>
+
+            {/* Colors Table */}
+            <div className="overflow-x-auto bg-white dark:bg-gray-800 rounded-lg shadow">
+              <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+                <thead className="bg-gray-50 dark:bg-gray-700">
+                  <tr>
+                    <th className="px-6 py-3 text-left">
+                      <input
+                        type="checkbox"
+                        checked={(() => {
+                          const filtered = colors.filter(color => 
+                            color.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                            color.hex.toLowerCase().includes(searchTerm.toLowerCase())
+                          );
+                          return filtered.length > 0 && filtered.every(c => selectedColors.has(c.id));
+                        })()}
+                        onChange={toggleSelectAll}
+                        className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                      />
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Boja</th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Naziv</th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Hex kod</th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Cena Refil</th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Cena Spulna</th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Akcije</th>
+                  </tr>
+                </thead>
+                <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                  {colors
+                    .filter(color => 
+                      color.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                      color.hex.toLowerCase().includes(searchTerm.toLowerCase())
+                    )
+                    .map((color) => (
+                    <tr key={color.id} className="hover:bg-gray-50 dark:hover:bg-gray-700">
+                      <td className="px-6 py-4 whitespace-nowrap">
+                        <input
+                          type="checkbox"
+                          checked={selectedColors.has(color.id)}
+                          onChange={() => toggleColorSelection(color.id)}
+                          className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                        />
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap">
+                        <div 
+                          className="w-10 h-10 rounded border-2 border-gray-300 dark:border-gray-600" 
+                          style={{ backgroundColor: color.hex }}
+                        />
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{color.name}</td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{color.hex}</td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm font-bold text-green-600 dark:text-green-400">
+                        {(color.cena_refill || 3499).toLocaleString('sr-RS')} RSD
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm font-bold text-blue-500 dark:text-blue-400">
+                        {(color.cena_spulna || 3999).toLocaleString('sr-RS')} RSD
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                        <button
+                          onClick={() => setEditingColor(color)}
+                          className="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300 mr-3"
+                          title="Izmeni"
+                        >
+                          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                          </svg>
+                        </button>
+                        <button
+                          onClick={() => handleDelete(color.id)}
+                          className="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300"
+                          title="Obriši"
+                        >
+                          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                          </svg>
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </main>
+        </div>
+      </div>
+      
+      {/* Edit Modal */}
+      {editingColor && (
+        <div
+          className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4"
+          onClick={() => setEditingColor(null)}
+        >
+          <div
+            className="bg-white dark:bg-gray-800 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 max-w-md w-full max-h-[90vh] overflow-auto"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex justify-between items-center p-6 pb-0">
+              <h3 className="text-xl font-bold text-gray-900 dark:text-white">Izmeni boju</h3>
+              <button
+                onClick={() => setEditingColor(null)}
+                className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-2xl leading-none"
+              >
+                &times;
+              </button>
+            </div>
+            <div className="p-6">
+              <ColorForm
+                color={editingColor}
+                onSave={(color) => {
+                  handleSave(color);
+                  setEditingColor(null);
+                }}
+                onCancel={() => setEditingColor(null)}
+                isModal={true}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Color Form Component
+function ColorForm({ 
+  color, 
+  onSave, 
+  onCancel,
+  isModal = false
+}: { 
+  color: Partial<Color>, 
+  onSave: (color: Partial<Color>) => void,
+  onCancel: () => void,
+  isModal?: boolean
+}) {
+  const [formData, setFormData] = useState({
+    name: color.name || '',
+    hex: color.hex || '#000000',
+    cena_refill: color.cena_refill || 3499,
+    cena_spulna: color.cena_spulna || 3999,
+  });
+  
+  // Check if this is a Bambu Lab predefined color
+  const isBambuLabColor = !!(formData.name && bambuLabColors.hasOwnProperty(formData.name));
+  const bambuHex = formData.name ? getColorHex(formData.name) : null;
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value, type } = e.target;
+    setFormData({
+      ...formData,
+      [name]: type === 'number' ? parseInt(value) || 0 : value
+    });
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Use Bambu Lab hex if it's a predefined color
+    const hexToSave = isBambuLabColor && bambuHex ? bambuHex : formData.hex;
+    onSave({
+      ...color,
+      name: formData.name,
+      hex: hexToSave,
+      cena_refill: formData.cena_refill,
+      cena_spulna: formData.cena_spulna
+    });
+  };
+
+  return (
+    <div className={isModal ? "" : "mb-8 p-6 bg-white dark:bg-gray-800 rounded-lg shadow transition-colors"}>
+      {!isModal && (
+        <h2 className="text-xl font-bold mb-4 text-gray-900 dark:text-white">
+          {color.id ? 'Izmeni boju' : 'Dodaj novu boju'}
+        </h2>
+      )}
+      <form onSubmit={handleSubmit} className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Naziv boje</label>
+          <input
+            type="text"
+            name="name"
+            value={formData.name}
+            onChange={handleChange}
+            required
+            placeholder="npr. Crvena"
+            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Hex kod boje</label>
+          <div className="flex gap-2 items-center">
+            <input
+              type="color"
+              name="hex"
+              value={isBambuLabColor && bambuHex ? bambuHex : formData.hex}
+              onChange={handleChange}
+              disabled={isBambuLabColor}
+              className={`w-12 h-12 p-1 border-2 border-gray-300 dark:border-gray-600 rounded-md ${isBambuLabColor ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}`}
+              style={{ backgroundColor: isBambuLabColor && bambuHex ? bambuHex : formData.hex }}
+            />
+            <input
+              type="text"
+              name="hex"
+              value={isBambuLabColor && bambuHex ? bambuHex : formData.hex}
+              onChange={handleChange}
+              required
+              readOnly={isBambuLabColor}
+              pattern="^#[0-9A-Fa-f]{6}$"
+              placeholder="#000000"
+              className={`flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 ${isBambuLabColor ? 'bg-gray-100 dark:bg-gray-900 cursor-not-allowed' : 'bg-white dark:bg-gray-700'}`}
+            />
+          </div>
+          {isBambuLabColor && (
+            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+              Bambu Lab predefinisana boja - hex kod se ne može menjati
+            </p>
+          )}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Cena Refil</label>
+          <input
+            type="number"
+            name="cena_refill"
+            value={formData.cena_refill}
+            onChange={handleChange}
+            required
+            min="0"
+            step="1"
+            placeholder="3499"
+            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Cena Spulna</label>
+          <input
+            type="number"
+            name="cena_spulna"
+            value={formData.cena_spulna}
+            onChange={handleChange}
+            required
+            min="0"
+            step="1"
+            placeholder="3999"
+            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <div className="md:col-span-2 flex justify-end gap-4 mt-4">
+          <button
+            type="button"
+            onClick={onCancel}
+            className="px-4 py-2 bg-gray-300 dark:bg-gray-600 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition-colors"
+          >
+            Otkaži
+          </button>
+          <button
+            type="submit"
+            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
+          >
+            Sačuvaj
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}

app/upadaj/customers/page.tsx

@@ -0,0 +1,634 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import { customerService } from '@/src/services/api';
+import { Customer, Sale } from '@/src/types/sales';
+import { AdminSidebar } from '@/src/components/AdminSidebar';
+
+interface CustomerWithSales extends Customer {
+  sales?: Sale[];
+  total_purchases?: number;
+}
+
+export default function CustomersManagement() {
+  const router = useRouter();
+  const [customers, setCustomers] = useState<CustomerWithSales[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [searchTerm, setSearchTerm] = useState('');
+  const [expandedCustomerId, setExpandedCustomerId] = useState<string | null>(null);
+  const [expandedSales, setExpandedSales] = useState<Sale[]>([]);
+  const [loadingSales, setLoadingSales] = useState(false);
+  const [editingCustomer, setEditingCustomer] = useState<Customer | null>(null);
+  const [editForm, setEditForm] = useState<Partial<Customer>>({});
+  const [saving, setSaving] = useState(false);
+  const [darkMode, setDarkMode] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [addForm, setAddForm] = useState({ name: '', phone: '', city: '', notes: '' });
+  const [addError, setAddError] = useState('');
+  const [addSaving, setAddSaving] = useState(false);
+
+  // Initialize dark mode
+  useEffect(() => {
+    setMounted(true);
+    const saved = localStorage.getItem('darkMode');
+    if (saved !== null) {
+      setDarkMode(JSON.parse(saved));
+    } else {
+      setDarkMode(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!mounted) return;
+    localStorage.setItem('darkMode', JSON.stringify(darkMode));
+    if (darkMode) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }, [darkMode, mounted]);
+
+  // Check authentication
+  useEffect(() => {
+    if (!mounted) return;
+    const token = localStorage.getItem('authToken');
+    const expiry = localStorage.getItem('tokenExpiry');
+    if (!token || !expiry || Date.now() > parseInt(expiry)) {
+      window.location.href = '/upadaj';
+    }
+  }, [mounted]);
+
+  // Fetch customers
+  const fetchCustomers = useCallback(async () => {
+    try {
+      setLoading(true);
+      const data = await customerService.getAll();
+      setCustomers(data);
+    } catch (err) {
+      setError('Greska pri ucitavanju kupaca');
+      console.error('Fetch error:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchCustomers();
+  }, [fetchCustomers]);
+
+  // Search customers
+  const filteredCustomers = customers.filter((customer) => {
+    if (!searchTerm) return true;
+    const term = searchTerm.toLowerCase();
+    return (
+      customer.name.toLowerCase().includes(term) ||
+      (customer.phone && customer.phone.toLowerCase().includes(term)) ||
+      (customer.city && customer.city.toLowerCase().includes(term))
+    );
+  });
+
+  // Toggle expanded row to show purchase history
+  const handleToggleExpand = async (customerId: string) => {
+    if (expandedCustomerId === customerId) {
+      setExpandedCustomerId(null);
+      setExpandedSales([]);
+      return;
+    }
+
+    setExpandedCustomerId(customerId);
+    setLoadingSales(true);
+    try {
+      const data = await customerService.getById(customerId);
+      setExpandedSales(data.sales || []);
+    } catch (err) {
+      console.error('Error fetching customer sales:', err);
+      setExpandedSales([]);
+    } finally {
+      setLoadingSales(false);
+    }
+  };
+
+  // Edit customer
+  const handleStartEdit = (customer: Customer) => {
+    setEditingCustomer(customer);
+    setEditForm({
+      name: customer.name,
+      phone: customer.phone || '',
+      city: customer.city || '',
+      notes: customer.notes || '',
+    });
+  };
+
+  const handleCancelEdit = () => {
+    setEditingCustomer(null);
+    setEditForm({});
+  };
+
+  const handleSaveEdit = async () => {
+    if (!editingCustomer) return;
+    setSaving(true);
+    try {
+      await customerService.update(editingCustomer.id, editForm);
+      setEditingCustomer(null);
+      setEditForm({});
+      await fetchCustomers();
+    } catch (err) {
+      setError('Greska pri cuvanju izmena');
+      console.error('Save error:', err);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleAddCustomer = async () => {
+    if (!addForm.name.trim()) {
+      setAddError('Ime je obavezno');
+      return;
+    }
+    setAddSaving(true);
+    setAddError('');
+    try {
+      await customerService.create({
+        name: addForm.name.trim(),
+        phone: addForm.phone.trim() || undefined,
+        city: addForm.city.trim() || undefined,
+        notes: addForm.notes.trim() || undefined,
+      });
+      setShowAddModal(false);
+      setAddForm({ name: '', phone: '', city: '', notes: '' });
+      await fetchCustomers();
+    } catch (err: unknown) {
+      const error = err as { response?: { data?: { code?: string } } };
+      if (error.response?.data?.code === '23505') {
+        setAddError('Kupac sa ovim brojem telefona vec postoji');
+      } else {
+        setAddError('Greska pri dodavanju kupca');
+      }
+    } finally {
+      setAddSaving(false);
+    }
+  };
+
+  const handleLogout = () => {
+    localStorage.removeItem('authToken');
+    localStorage.removeItem('tokenExpiry');
+    router.push('/upadaj');
+  };
+
+  const formatDate = (dateStr?: string) => {
+    if (!dateStr) return '-';
+    return new Date(dateStr).toLocaleDateString('sr-Latn-RS', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+    });
+  };
+
+  const formatCurrency = (amount: number) => {
+    return new Intl.NumberFormat('sr-Latn-RS', {
+      style: 'decimal',
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    }).format(amount) + ' RSD';
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
+        <div className="text-gray-600 dark:text-gray-400">Ucitavanje...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors">
+      <div className="flex">
+        <AdminSidebar />
+
+        {/* Main Content */}
+        <div className="flex-1">
+          <header className="bg-white dark:bg-gray-800 shadow transition-colors">
+            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+              <div className="flex justify-between items-center">
+                <div className="flex items-center gap-4">
+                  <img
+                    src="/logo.png"
+                    alt="Filamenteka"
+                    className="h-20 sm:h-32 w-auto drop-shadow-lg"
+                  />
+                  <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+                    Upravljanje kupcima
+                  </h1>
+                </div>
+                <div className="flex gap-4 flex-wrap">
+                  <button
+                    onClick={() => router.push('/')}
+                    className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+                  >
+                    Nazad na sajt
+                  </button>
+                  {mounted && (
+                    <button
+                      onClick={() => setDarkMode(!darkMode)}
+                      className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
+                      title={darkMode ? 'Svetla tema' : 'Tamna tema'}
+                    >
+                      {darkMode ? '\u2600' : '\u263D'}
+                    </button>
+                  )}
+                  <button
+                    onClick={handleLogout}
+                    className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+                  >
+                    Odjava
+                  </button>
+                </div>
+              </div>
+            </div>
+          </header>
+
+          <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+            {error && (
+              <div className="mb-4 p-4 bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-400 rounded">
+                {error}
+                <button
+                  onClick={() => setError('')}
+                  className="ml-4 text-red-600 dark:text-red-300 underline text-sm"
+                >
+                  Zatvori
+                </button>
+              </div>
+            )}
+
+            {/* Search bar + Add button */}
+            <div className="mb-6 flex items-center gap-4">
+              <input
+                type="text"
+                placeholder="Pretrazi kupce..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="w-full max-w-md px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              />
+              <button
+                onClick={() => setShowAddModal(true)}
+                className="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 whitespace-nowrap font-medium"
+              >
+                + Dodaj kupca
+              </button>
+            </div>
+
+            {/* Customer count */}
+            <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
+              Ukupno kupaca: {filteredCustomers.length}
+            </p>
+
+            {/* Customer table */}
+            <div className="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
+              <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+                <thead className="bg-gray-50 dark:bg-gray-700">
+                  <tr>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+                      Ime
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+                      Telefon
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+                      Grad
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+                      Beleske
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+                      Datum registracije
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+                      Akcije
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                  {filteredCustomers.length === 0 ? (
+                    <tr>
+                      <td
+                        colSpan={6}
+                        className="px-6 py-8 text-center text-gray-500 dark:text-gray-400"
+                      >
+                        {searchTerm ? 'Nema rezultata pretrage' : 'Nema registrovanih kupaca'}
+                      </td>
+                    </tr>
+                  ) : (
+                    filteredCustomers.map((customer) => (
+                      <>
+                        <tr
+                          key={customer.id}
+                          className="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
+                        >
+                          {editingCustomer?.id === customer.id ? (
+                            <>
+                              <td className="px-6 py-4">
+                                <input
+                                  type="text"
+                                  value={editForm.name || ''}
+                                  onChange={(e) =>
+                                    setEditForm({ ...editForm, name: e.target.value })
+                                  }
+                                  className="w-full px-2 py-1 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm"
+                                />
+                              </td>
+                              <td className="px-6 py-4">
+                                <input
+                                  type="text"
+                                  value={editForm.phone || ''}
+                                  onChange={(e) =>
+                                    setEditForm({ ...editForm, phone: e.target.value })
+                                  }
+                                  className="w-full px-2 py-1 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm"
+                                />
+                              </td>
+                              <td className="px-6 py-4">
+                                <input
+                                  type="text"
+                                  value={editForm.city || ''}
+                                  onChange={(e) =>
+                                    setEditForm({ ...editForm, city: e.target.value })
+                                  }
+                                  className="w-full px-2 py-1 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm"
+                                />
+                              </td>
+                              <td className="px-6 py-4">
+                                <textarea
+                                  value={editForm.notes || ''}
+                                  onChange={(e) =>
+                                    setEditForm({ ...editForm, notes: e.target.value })
+                                  }
+                                  rows={2}
+                                  placeholder="npr. stampa figurice, obicno crna..."
+                                  className="w-full px-2 py-1 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm"
+                                />
+                              </td>
+                              <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                {formatDate(customer.created_at)}
+                              </td>
+                              <td className="px-6 py-4">
+                                <div className="flex gap-2">
+                                  <button
+                                    onClick={handleSaveEdit}
+                                    disabled={saving}
+                                    className="px-3 py-1 bg-green-500 text-white text-sm rounded hover:bg-green-600 disabled:opacity-50"
+                                  >
+                                    {saving ? '...' : 'Sacuvaj'}
+                                  </button>
+                                  <button
+                                    onClick={handleCancelEdit}
+                                    className="px-3 py-1 bg-gray-300 dark:bg-gray-600 text-gray-700 dark:text-gray-200 text-sm rounded hover:bg-gray-400 dark:hover:bg-gray-500"
+                                  >
+                                    Otkazi
+                                  </button>
+                                </div>
+                              </td>
+                            </>
+                          ) : (
+                            <>
+                              <td className="px-6 py-4 text-sm font-medium text-gray-900 dark:text-white">
+                                {customer.name}
+                              </td>
+                              <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                {customer.phone || '-'}
+                              </td>
+                              <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                {customer.city || '-'}
+                              </td>
+                              <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 max-w-xs whitespace-pre-wrap">
+                                {customer.notes || <span className="text-gray-400 dark:text-gray-600 italic">Nema beleski</span>}
+                              </td>
+                              <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                {formatDate(customer.created_at)}
+                              </td>
+                              <td className="px-6 py-4">
+                                <div className="flex gap-2">
+                                  <button
+                                    onClick={() => handleStartEdit(customer)}
+                                    className="px-3 py-1 bg-blue-500 text-white text-sm rounded hover:bg-blue-600"
+                                  >
+                                    Izmeni
+                                  </button>
+                                  <button
+                                    onClick={() => handleToggleExpand(customer.id)}
+                                    className={`px-3 py-1 text-sm rounded ${
+                                      expandedCustomerId === customer.id
+                                        ? 'bg-indigo-600 text-white hover:bg-indigo-700'
+                                        : 'bg-indigo-100 dark:bg-indigo-900 text-indigo-700 dark:text-indigo-300 hover:bg-indigo-200 dark:hover:bg-indigo-800'
+                                    }`}
+                                  >
+                                    Istorija kupovina
+                                  </button>
+                                </div>
+                              </td>
+                            </>
+                          )}
+                        </tr>
+
+                        {/* Expanded purchase history */}
+                        {expandedCustomerId === customer.id && (
+                          <tr key={`${customer.id}-sales`}>
+                            <td
+                              colSpan={6}
+                              className="px-6 py-4 bg-gray-50 dark:bg-gray-900/50"
+                            >
+                              <div className="ml-4">
+                                <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
+                                  Istorija kupovina - {customer.name}
+                                </h4>
+                                {loadingSales ? (
+                                  <p className="text-sm text-gray-500 dark:text-gray-400">
+                                    Ucitavanje...
+                                  </p>
+                                ) : expandedSales.length === 0 ? (
+                                  <p className="text-sm text-gray-500 dark:text-gray-400">
+                                    Nema evidentiranih kupovina
+                                  </p>
+                                ) : (
+                                  <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700 rounded overflow-hidden">
+                                    <thead className="bg-gray-100 dark:bg-gray-700">
+                                      <tr>
+                                        <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">
+                                          ID
+                                        </th>
+                                        <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">
+                                          Datum
+                                        </th>
+                                        <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">
+                                          Stavke
+                                        </th>
+                                        <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">
+                                          Iznos
+                                        </th>
+                                        <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">
+                                          Napomena
+                                        </th>
+                                      </tr>
+                                    </thead>
+                                    <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                                      {expandedSales.map((sale) => (
+                                        <tr key={sale.id}>
+                                          <td className="px-4 py-2 text-sm text-gray-600 dark:text-gray-400 font-mono">
+                                            {sale.id.substring(0, 8)}...
+                                          </td>
+                                          <td className="px-4 py-2 text-sm text-gray-600 dark:text-gray-400">
+                                            {formatDate(sale.created_at)}
+                                          </td>
+                                          <td className="px-4 py-2 text-sm text-gray-600 dark:text-gray-400">
+                                            {sale.item_count ?? '-'}
+                                          </td>
+                                          <td className="px-4 py-2 text-sm text-gray-900 dark:text-white font-medium">
+                                            {formatCurrency(sale.total_amount)}
+                                          </td>
+                                          <td className="px-4 py-2 text-sm text-gray-500 dark:text-gray-400">
+                                            {sale.notes || '-'}
+                                          </td>
+                                        </tr>
+                                      ))}
+                                    </tbody>
+                                    <tfoot className="bg-gray-50 dark:bg-gray-700/50">
+                                      <tr>
+                                        <td
+                                          colSpan={3}
+                                          className="px-4 py-2 text-sm font-semibold text-gray-700 dark:text-gray-300 text-right"
+                                        >
+                                          Ukupno ({expandedSales.length} kupovina):
+                                        </td>
+                                        <td className="px-4 py-2 text-sm font-bold text-gray-900 dark:text-white">
+                                          {formatCurrency(
+                                            expandedSales.reduce(
+                                              (sum, sale) => sum + sale.total_amount,
+                                              0
+                                            )
+                                          )}
+                                        </td>
+                                        <td />
+                                      </tr>
+                                    </tfoot>
+                                  </table>
+                                )}
+                              </div>
+                            </td>
+                          </tr>
+                        )}
+                      </>
+                    ))
+                  )}
+                </tbody>
+              </table>
+            </div>
+          </main>
+        </div>
+      </div>
+
+      {/* Add Customer Modal */}
+      {showAddModal && (
+        <div
+          className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
+          onClick={() => setShowAddModal(false)}
+        >
+          <div
+            className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-md mx-4 p-6"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-xl font-bold text-gray-900 dark:text-white">
+                Dodaj kupca
+              </h2>
+              <button
+                onClick={() => setShowAddModal(false)}
+                className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-2xl leading-none"
+              >
+                &times;
+              </button>
+            </div>
+
+            {addError && (
+              <div className="mb-4 p-3 bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-400 rounded text-sm">
+                {addError}
+              </div>
+            )}
+
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Ime *
+                </label>
+                <input
+                  type="text"
+                  value={addForm.name}
+                  onChange={(e) => setAddForm({ ...addForm, name: e.target.value })}
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-green-500 focus:border-transparent"
+                  placeholder="Ime i prezime"
+                  autoFocus
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Telefon
+                </label>
+                <input
+                  type="text"
+                  value={addForm.phone}
+                  onChange={(e) => setAddForm({ ...addForm, phone: e.target.value })}
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-green-500 focus:border-transparent"
+                  placeholder="Broj telefona"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Grad
+                </label>
+                <input
+                  type="text"
+                  value={addForm.city}
+                  onChange={(e) => setAddForm({ ...addForm, city: e.target.value })}
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-green-500 focus:border-transparent"
+                  placeholder="Grad"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Napomena
+                </label>
+                <textarea
+                  value={addForm.notes}
+                  onChange={(e) => setAddForm({ ...addForm, notes: e.target.value })}
+                  rows={3}
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-green-500 focus:border-transparent"
+                  placeholder="npr. stampa figurice, obicno crna..."
+                />
+              </div>
+            </div>
+
+            <div className="flex justify-end gap-3 mt-6">
+              <button
+                onClick={() => setShowAddModal(false)}
+                className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600"
+              >
+                Otkazi
+              </button>
+              <button
+                onClick={handleAddCustomer}
+                disabled={addSaving}
+                className="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 disabled:opacity-50 font-medium"
+              >
+                {addSaving ? 'Cuvanje...' : 'Dodaj'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

app/upadaj/page.tsx

@@ -1,8 +1,9 @@
 'use client'
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import axios from 'axios';
+import { authService } from '@/src/services/api';
+import { trackEvent } from '@/src/components/MatomoAnalytics';
 
 export default function AdminLogin() {
   const router = useRouter();
@@ -11,26 +12,41 @@ export default function AdminLogin() {
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
 
+  // Redirect to dashboard if already authenticated
+  useEffect(() => {
+    const token = localStorage.getItem('authToken');
+    const expiry = localStorage.getItem('tokenExpiry');
+    if (token && expiry && Date.now() < parseInt(expiry)) {
+      window.location.href = '/dashboard';
+    }
+  }, []);
+
+  // Set dark mode by default
+  useEffect(() => {
+    document.documentElement.classList.add('dark');
+  }, []);
+
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault();
     setError('');
     setLoading(true);
 
     try {
-      const response = await axios.post(`${process.env.NEXT_PUBLIC_API_URL}/auth/login`, {
+      const response = await authService.login(username, password);
-        username,
-        password
-      });
 
       // Store token in localStorage
-      localStorage.setItem('authToken', response.data.token);
+      localStorage.setItem('authToken', response.token);
-      localStorage.setItem('tokenExpiry', String(Date.now() + response.data.expiresIn * 1000));
+      localStorage.setItem('tokenExpiry', String(Date.now() + 24 * 60 * 60 * 1000)); // 24 hours
 
-      // Redirect to admin dashboard
+      // Track successful login
-      router.push('/admin/dashboard');
+      trackEvent('Admin', 'Login', 'Success');
-    } catch (err) {
+
+      // Redirect to admin dashboard using window.location for static export
+      window.location.href = '/dashboard';
+    } catch (err: any) {
       setError('Neispravno korisničko ime ili lozinka');
       console.error('Login error:', err);
+      trackEvent('Admin', 'Login', 'Failed');
     } finally {
       setLoading(false);
     }
@@ -39,8 +55,13 @@ export default function AdminLogin() {
   return (
     <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
       <div className="max-w-md w-full space-y-8">
-        <div>
+        <div className="flex flex-col items-center">
-          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
+          <img 
+            src="/logo.png" 
+            alt="Filamenteka" 
+            className="h-40 w-auto mb-6 drop-shadow-lg"
+          />
+          <h2 className="text-center text-3xl font-extrabold text-gray-900 dark:text-white">
             Admin Prijava
           </h2>
           <p className="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">

app/upadaj/requests/page.tsx

@@ -0,0 +1,350 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { colorRequestService } from '@/src/services/api';
+import Link from 'next/link';
+import { AdminSidebar } from '@/src/components/AdminSidebar';
+
+interface ColorRequest {
+  id: string;
+  color_name: string;
+  material_type: string;
+  finish_type: string;
+  user_email: string;
+  user_phone: string;
+  user_name: string;
+  description: string;
+  reference_url: string;
+  status: 'pending' | 'approved' | 'rejected' | 'completed';
+  admin_notes: string;
+  request_count: number;
+  created_at: string;
+  updated_at: string;
+  processed_at: string;
+  processed_by: string;
+}
+
+export default function ColorRequestsAdmin() {
+  const [requests, setRequests] = useState<ColorRequest[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editForm, setEditForm] = useState({ status: '', admin_notes: '' });
+  const router = useRouter();
+
+  useEffect(() => {
+    checkAuth();
+    fetchRequests();
+  }, []);
+
+  const checkAuth = () => {
+    const token = localStorage.getItem('authToken');
+    const expiry = localStorage.getItem('tokenExpiry');
+
+    if (!token || !expiry || new Date().getTime() > parseInt(expiry)) {
+      window.location.href = '/upadaj';
+    }
+  };
+
+  const fetchRequests = async () => {
+    try {
+      const data = await colorRequestService.getAll();
+      setRequests(data);
+    } catch (error) {
+      setError('Failed to fetch color requests');
+      console.error('Error:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleStatusUpdate = async (id: string) => {
+    try {
+      await colorRequestService.updateStatus(id, editForm.status, editForm.admin_notes);
+      await fetchRequests();
+      setEditingId(null);
+      setEditForm({ status: '', admin_notes: '' });
+    } catch (error) {
+      setError('Failed to update request');
+      console.error('Error:', error);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!confirm('Are you sure you want to delete this request?')) return;
+    
+    try {
+      await colorRequestService.delete(id);
+      await fetchRequests();
+    } catch (error) {
+      setError('Failed to delete request');
+      console.error('Error:', error);
+    }
+  };
+
+  const getStatusBadge = (status: string) => {
+    const colors = {
+      pending: 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300',
+      approved: 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300',
+      rejected: 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300',
+      completed: 'bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300'
+    };
+    return colors[status as keyof typeof colors] || 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300';
+  };
+
+  const getStatusLabel = (status: string) => {
+    const labels = {
+      pending: 'Na čekanju',
+      approved: 'Odobreno',
+      rejected: 'Odbijeno',
+      completed: 'Završeno'
+    };
+    return labels[status as keyof typeof labels] || status;
+  };
+
+  const formatDate = (dateString: string) => {
+    if (!dateString) return '-';
+    const date = new Date(dateString);
+    const month = date.toLocaleDateString('sr-RS', { month: 'short' });
+    const capitalizedMonth = month.charAt(0).toUpperCase() + month.slice(1);
+    return `${capitalizedMonth} ${date.getDate()}, ${date.getFullYear()}`;
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
+        <div className="text-gray-500 dark:text-gray-400">Učitavanje zahteva za boje...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      <div className="flex">
+        <AdminSidebar />
+        <div className="flex-1 p-8">
+        <div className="flex justify-between items-center mb-6">
+          <h1 className="text-3xl font-bold text-gray-800 dark:text-gray-100">Zahtevi za Boje</h1>
+        </div>
+
+        {error && (
+          <div className="mb-4 p-4 bg-red-100 text-red-700 rounded">
+            {error}
+          </div>
+        )}
+
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead className="bg-gray-100 dark:bg-gray-700">
+                <tr>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                    Boja
+                  </th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                    Materijal/Finiš
+                  </th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                    Broj Zahteva
+                  </th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                    Korisnik
+                  </th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                    Status
+                  </th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                    Datum
+                  </th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                    Akcije
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                {requests.map((request) => (
+                  <tr key={request.id} className="hover:bg-gray-50 dark:hover:bg-gray-700">
+                    <td className="px-4 py-3">
+                      <div>
+                        <div className="font-medium text-gray-900 dark:text-gray-100">{request.color_name}</div>
+                        {request.description && (
+                          <div className="text-sm text-gray-500 dark:text-gray-400 mt-1">{request.description}</div>
+                        )}
+                        {request.reference_url && (
+                          <a 
+                            href={request.reference_url} 
+                            target="_blank" 
+                            rel="noopener noreferrer"
+                            className="text-xs text-blue-600 dark:text-blue-400 hover:underline"
+                          >
+                            Pogledaj referencu
+                          </a>
+                        )}
+                      </div>
+                    </td>
+                    <td className="px-4 py-3">
+                      <div className="text-sm">
+                        <div className="text-gray-900 dark:text-gray-100">{request.material_type}</div>
+                        {request.finish_type && (
+                          <div className="text-gray-500 dark:text-gray-400">{request.finish_type}</div>
+                        )}
+                      </div>
+                    </td>
+                    <td className="px-4 py-3">
+                      <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300">
+                        {request.request_count || 1} {(request.request_count || 1) === 1 ? 'zahtev' : 'zahteva'}
+                      </span>
+                    </td>
+                    <td className="px-4 py-3">
+                      <div className="text-sm">
+                        {request.user_email ? (
+                          <a href={`mailto:${request.user_email}`} className="text-blue-600 dark:text-blue-400 hover:underline">
+                            {request.user_email}
+                          </a>
+                        ) : (
+                          <span className="text-gray-400 dark:text-gray-500">Anonimno</span>
+                        )}
+                        {request.user_phone && (
+                          <div className="mt-1">
+                            <a href={`tel:${request.user_phone}`} className="text-blue-600 dark:text-blue-400 hover:underline">
+                              {request.user_phone}
+                            </a>
+                          </div>
+                        )}
+                      </div>
+                    </td>
+                    <td className="px-4 py-3">
+                      {editingId === request.id ? (
+                        <div className="space-y-2">
+                          <select
+                            value={editForm.status}
+                            onChange={(e) => setEditForm({ ...editForm, status: e.target.value })}
+                            className="text-sm border rounded px-2 py-1"
+                          >
+                            <option value="">Izaberi status</option>
+                            <option value="pending">Na čekanju</option>
+                            <option value="approved">Odobreno</option>
+                            <option value="rejected">Odbijeno</option>
+                            <option value="completed">Završeno</option>
+                          </select>
+                          <textarea
+                            placeholder="Napomene..."
+                            value={editForm.admin_notes}
+                            onChange={(e) => setEditForm({ ...editForm, admin_notes: e.target.value })}
+                            className="text-sm border rounded px-2 py-1 w-full"
+                            rows={2}
+                          />
+                        </div>
+                      ) : (
+                        <div>
+                          <span className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getStatusBadge(request.status)}`}>
+                            {getStatusLabel(request.status)}
+                          </span>
+                          {request.admin_notes && (
+                            <div className="text-xs text-gray-500 mt-1">{request.admin_notes}</div>
+                          )}
+                          {request.processed_by && (
+                            <div className="text-xs text-gray-400 dark:text-gray-500 mt-1">
+                              od {request.processed_by}
+                            </div>
+                          )}
+                        </div>
+                      )}
+                    </td>
+                    <td className="px-4 py-3">
+                      <div className="text-sm text-gray-600 dark:text-gray-400">
+                        {formatDate(request.created_at)}
+                      </div>
+                      {request.processed_at && (
+                        <div className="text-xs text-gray-500 dark:text-gray-500">
+                          Obrađeno: {formatDate(request.processed_at)}
+                        </div>
+                      )}
+                    </td>
+                    <td className="px-4 py-3">
+                      {editingId === request.id ? (
+                        <div className="space-x-2">
+                          <button
+                            onClick={() => handleStatusUpdate(request.id)}
+                            className="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-300 text-sm"
+                          >
+                            Sačuvaj
+                          </button>
+                          <button
+                            onClick={() => {
+                              setEditingId(null);
+                              setEditForm({ status: '', admin_notes: '' });
+                            }}
+                            className="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-300 text-sm"
+                          >
+                            Otkaži
+                          </button>
+                        </div>
+                      ) : (
+                        <div className="space-x-2">
+                          <button
+                            onClick={() => {
+                              setEditingId(request.id);
+                              setEditForm({ 
+                                status: request.status, 
+                                admin_notes: request.admin_notes || '' 
+                              });
+                            }}
+                            className="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 text-sm"
+                          >
+                            Izmeni
+                          </button>
+                          <button
+                            onClick={() => handleDelete(request.id)}
+                            className="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 text-sm"
+                          >
+                            Obriši
+                          </button>
+                        </div>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          
+          {requests.length === 0 && (
+            <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+              Nema zahteva za boje
+            </div>
+          )}
+        </div>
+
+        <div className="mt-6 grid grid-cols-1 md:grid-cols-4 gap-4">
+          <div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
+            <div className="text-sm text-gray-500 dark:text-gray-400">Ukupno Zahteva</div>
+            <div className="text-2xl font-bold text-gray-800 dark:text-gray-100">
+              {requests.length}
+            </div>
+          </div>
+          <div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
+            <div className="text-sm text-gray-500 dark:text-gray-400">Na Čekanju</div>
+            <div className="text-2xl font-bold text-yellow-600 dark:text-yellow-400">
+              {requests.filter(r => r.status === 'pending').length}
+            </div>
+          </div>
+          <div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
+            <div className="text-sm text-gray-500 dark:text-gray-400">Odobreno</div>
+            <div className="text-2xl font-bold text-green-600 dark:text-green-400">
+              {requests.filter(r => r.status === 'approved').length}
+            </div>
+          </div>
+          <div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
+            <div className="text-sm text-gray-500 dark:text-gray-400">Završeno</div>
+            <div className="text-2xl font-bold text-blue-600 dark:text-blue-400">
+              {requests.filter(r => r.status === 'completed').length}
+            </div>
+          </div>
+        </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/upadaj/sales/page.tsx

@@ -0,0 +1,827 @@
+'use client'
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { saleService, customerService, filamentService, colorService } from '@/src/services/api';
+import { Customer, Sale, SaleItem, CreateSaleRequest } from '@/src/types/sales';
+import { Filament } from '@/src/types/filament';
+import { AdminSidebar } from '@/src/components/AdminSidebar';
+
+interface LineItem {
+  filament_id: string;
+  item_type: 'refill' | 'spulna';
+  quantity: number;
+}
+
+export default function SalesPage() {
+  const [mounted, setMounted] = useState(false);
+  const [darkMode, setDarkMode] = useState(false);
+
+  // Sales list state
+  const [sales, setSales] = useState<Sale[]>([]);
+  const [totalSales, setTotalSales] = useState(0);
+  const [page, setPage] = useState(1);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  // Modal state
+  const [showNewSaleModal, setShowNewSaleModal] = useState(false);
+  const [showDetailModal, setShowDetailModal] = useState(false);
+  const [selectedSale, setSelectedSale] = useState<Sale | null>(null);
+  const [detailLoading, setDetailLoading] = useState(false);
+
+  const LIMIT = 50;
+
+  // Dark mode init
+  useEffect(() => {
+    setMounted(true);
+    const saved = localStorage.getItem('darkMode');
+    setDarkMode(saved !== null ? JSON.parse(saved) : true);
+  }, []);
+
+  useEffect(() => {
+    if (!mounted) return;
+    localStorage.setItem('darkMode', JSON.stringify(darkMode));
+    if (darkMode) document.documentElement.classList.add('dark');
+    else document.documentElement.classList.remove('dark');
+  }, [darkMode, mounted]);
+
+  // Auth check
+  useEffect(() => {
+    if (!mounted) return;
+    const token = localStorage.getItem('authToken');
+    const expiry = localStorage.getItem('tokenExpiry');
+    if (!token || !expiry || Date.now() > parseInt(expiry)) {
+      window.location.href = '/upadaj';
+    }
+  }, [mounted]);
+
+  // Fetch sales
+  const fetchSales = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError('');
+      const data = await saleService.getAll(page, LIMIT);
+      setSales(data.sales);
+      setTotalSales(data.total);
+    } catch {
+      setError('Greska pri ucitavanju prodaja');
+    } finally {
+      setLoading(false);
+    }
+  }, [page]);
+
+  useEffect(() => {
+    if (!mounted) return;
+    fetchSales();
+  }, [mounted, fetchSales]);
+
+  const totalPages = Math.ceil(totalSales / LIMIT);
+
+  const handleViewDetail = async (sale: Sale) => {
+    try {
+      setDetailLoading(true);
+      setShowDetailModal(true);
+      const detail = await saleService.getById(sale.id);
+      setSelectedSale(detail);
+    } catch {
+      setError('Greska pri ucitavanju detalja prodaje');
+      setShowDetailModal(false);
+    } finally {
+      setDetailLoading(false);
+    }
+  };
+
+  const handleDeleteSale = async (id: string) => {
+    if (!window.confirm('Da li ste sigurni da zelite da obrisete ovu prodaju?')) return;
+    try {
+      await saleService.delete(id);
+      setShowDetailModal(false);
+      setSelectedSale(null);
+      fetchSales();
+    } catch {
+      setError('Greska pri brisanju prodaje');
+    }
+  };
+
+  const formatDate = (dateStr?: string) => {
+    if (!dateStr) return '-';
+    const date = new Date(dateStr);
+    return date.toLocaleDateString('sr-RS', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+    });
+  };
+
+  const formatPrice = (amount: number) => {
+    return amount.toLocaleString('sr-RS') + ' RSD';
+  };
+
+  if (!mounted) return null;
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex">
+      <AdminSidebar />
+
+      {/* Main Content */}
+      <div className="flex-1 p-8">
+        <div className="flex justify-between items-center mb-6">
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Prodaja</h1>
+          <div className="flex items-center gap-4">
+            <button
+              onClick={() => setDarkMode(!darkMode)}
+              className="px-3 py-2 text-sm bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
+            >
+              {darkMode ? 'Svetli mod' : 'Tamni mod'}
+            </button>
+            <button
+              onClick={() => setShowNewSaleModal(true)}
+              className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 transition-colors font-medium"
+            >
+              Nova prodaja
+            </button>
+          </div>
+        </div>
+
+        {error && (
+          <div className="mb-4 p-3 bg-red-100 dark:bg-red-900/30 border border-red-300 dark:border-red-700 text-red-700 dark:text-red-400 rounded">
+            {error}
+          </div>
+        )}
+
+        {/* Sales Table */}
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
+          {loading ? (
+            <div className="p-8 text-center text-gray-500 dark:text-gray-400">Ucitavanje...</div>
+          ) : sales.length === 0 ? (
+            <div className="p-8 text-center text-gray-500 dark:text-gray-400">Nema prodaja</div>
+          ) : (
+            <table className="w-full">
+              <thead className="bg-gray-50 dark:bg-gray-700">
+                <tr>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                    Datum
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                    Ime kupca
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                    Stavki
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                    Cena
+                  </th>
+                  <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                    Akcije
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+                {sales.map((sale) => (
+                  <tr key={sale.id} className="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
+                      {formatDate(sale.created_at)}
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
+                      {sale.customer_name || '-'}
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">
+                      {sale.item_count ?? 0}
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
+                      {formatPrice(sale.total_amount)}
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-right text-sm space-x-2">
+                      <button
+                        onClick={() => handleViewDetail(sale)}
+                        className="px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+                      >
+                        Detalji
+                      </button>
+                      <button
+                        onClick={() => handleDeleteSale(sale.id)}
+                        className="px-3 py-1 bg-red-600 text-white rounded hover:bg-red-700 transition-colors"
+                      >
+                        Obrisi
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </div>
+
+        {/* Pagination */}
+        {totalPages > 1 && (
+          <div className="mt-4 flex justify-center items-center gap-2">
+            <button
+              onClick={() => setPage((p) => Math.max(1, p - 1))}
+              disabled={page === 1}
+              className="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-300 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              Prethodna
+            </button>
+            <span className="text-sm text-gray-600 dark:text-gray-400">
+              Strana {page} od {totalPages}
+            </span>
+            <button
+              onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+              disabled={page === totalPages}
+              className="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-300 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              Sledeca
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* New Sale Modal */}
+      {showNewSaleModal && (
+        <NewSaleModal
+          onClose={() => setShowNewSaleModal(false)}
+          onCreated={() => {
+            setShowNewSaleModal(false);
+            fetchSales();
+          }}
+          formatPrice={formatPrice}
+        />
+      )}
+
+      {/* Sale Detail Modal */}
+      {showDetailModal && (
+        <SaleDetailModal
+          sale={selectedSale}
+          loading={detailLoading}
+          onClose={() => {
+            setShowDetailModal(false);
+            setSelectedSale(null);
+          }}
+          onDelete={(id) => handleDeleteSale(id)}
+          formatPrice={formatPrice}
+          formatDate={formatDate}
+        />
+      )}
+    </div>
+  );
+}
+
+// --- NewSaleModal ---
+
+function NewSaleModal({
+  onClose,
+  onCreated,
+  formatPrice,
+}: {
+  onClose: () => void;
+  onCreated: () => void;
+  formatPrice: (n: number) => string;
+}) {
+  const [customerName, setCustomerName] = useState('');
+  const [customerPhone, setCustomerPhone] = useState('');
+  const [customerCity, setCustomerCity] = useState('');
+  const [customerNotes, setCustomerNotes] = useState('');
+  const [notes, setNotes] = useState('');
+  const [items, setItems] = useState<LineItem[]>([{ filament_id: '', item_type: 'refill', quantity: 1 }]);
+  const [filaments, setFilaments] = useState<Filament[]>([]);
+  const [colorPrices, setColorPrices] = useState<Record<string, { cena_refill: number; cena_spulna: number }>>({});
+  const [customerSuggestions, setCustomerSuggestions] = useState<Customer[]>([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState('');
+  const searchTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const suggestionsRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        const [filamentData, colorData] = await Promise.all([
+          filamentService.getAll(),
+          colorService.getAll(),
+        ]);
+        setFilaments(filamentData);
+        const priceMap: Record<string, { cena_refill: number; cena_spulna: number }> = {};
+        for (const c of colorData) {
+          priceMap[c.name] = { cena_refill: c.cena_refill || 3499, cena_spulna: c.cena_spulna || 3999 };
+        }
+        setColorPrices(priceMap);
+      } catch {
+        // Data failed to load
+      }
+    };
+    loadData();
+  }, []);
+
+  // Close suggestions on outside click
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (suggestionsRef.current && !suggestionsRef.current.contains(e.target as Node)) {
+        setShowSuggestions(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, []);
+
+  const handleCustomerSearch = (value: string) => {
+    setCustomerName(value);
+    if (searchTimeout.current) clearTimeout(searchTimeout.current);
+    if (value.length < 2) {
+      setCustomerSuggestions([]);
+      setShowSuggestions(false);
+      return;
+    }
+    searchTimeout.current = setTimeout(async () => {
+      try {
+        const results = await customerService.search(value);
+        setCustomerSuggestions(results);
+        setShowSuggestions(results.length > 0);
+      } catch {
+        setCustomerSuggestions([]);
+        setShowSuggestions(false);
+      }
+    }, 300);
+  };
+
+  const selectCustomer = (customer: Customer) => {
+    setCustomerName(customer.name);
+    setCustomerPhone(customer.phone || '');
+    setCustomerCity(customer.city || '');
+    setCustomerNotes(customer.notes || '');
+    setShowSuggestions(false);
+  };
+
+  const getFilamentById = (id: string): Filament | undefined => {
+    return filaments.find((f) => String(f.id) === String(id));
+  };
+
+  const getFilamentPrice = (filament: Filament, type: 'refill' | 'spulna'): number => {
+    const prices = colorPrices[filament.boja];
+    const base = type === 'refill' ? (prices?.cena_refill || 3499) : (prices?.cena_spulna || 3999);
+    if (filament.sale_active && filament.sale_percentage) {
+      return Math.round(base * (1 - filament.sale_percentage / 100));
+    }
+    return base;
+  };
+
+  const getItemPrice = (item: LineItem): number => {
+    const filament = getFilamentById(item.filament_id);
+    if (!filament) return 0;
+    return getFilamentPrice(filament, item.item_type) * item.quantity;
+  };
+
+  const totalAmount = items.reduce((sum, item) => sum + getItemPrice(item), 0);
+
+  const getAvailableStock = (filament: Filament, type: 'refill' | 'spulna'): number => {
+    return type === 'refill' ? filament.refill : filament.spulna;
+  };
+
+  const updateItem = (index: number, updates: Partial<LineItem>) => {
+    setItems((prev) => {
+      const next = [...prev];
+      next[index] = { ...next[index], ...updates };
+      return next;
+    });
+  };
+
+  const removeItem = (index: number) => {
+    if (items.length <= 1) return;
+    setItems((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const addItem = () => {
+    setItems((prev) => [...prev, { filament_id: '', item_type: 'refill', quantity: 1 }]);
+  };
+
+  const handleSubmit = async () => {
+    if (!customerName.trim()) {
+      setSubmitError('Ime kupca je obavezno');
+      return;
+    }
+    const validItems = items.filter((item) => item.filament_id !== '' && item.quantity > 0);
+    if (validItems.length === 0) {
+      setSubmitError('Dodajte bar jednu stavku');
+      return;
+    }
+
+    // Validate stock
+    for (const item of validItems) {
+      const filament = getFilamentById(item.filament_id);
+      if (!filament) {
+        setSubmitError('Nevalidan filament');
+        return;
+      }
+      const available = getAvailableStock(filament, item.item_type);
+      if (item.quantity > available) {
+        setSubmitError(
+          `Nedovoljno zaliha za ${filament.boja} ${filament.tip} (${item.item_type}): dostupno ${available}, trazeno ${item.quantity}`
+        );
+        return;
+      }
+    }
+
+    const payload: CreateSaleRequest = {
+      customer: {
+        name: customerName.trim(),
+        phone: customerPhone.trim() || undefined,
+        city: customerCity.trim() || undefined,
+        notes: customerNotes.trim() || undefined,
+      },
+      items: validItems.map((item) => ({
+        filament_id: item.filament_id,
+        item_type: item.item_type,
+        quantity: item.quantity,
+      })),
+      notes: notes.trim() || undefined,
+    };
+
+    try {
+      setSubmitting(true);
+      setSubmitError('');
+      await saleService.create(payload);
+      onCreated();
+    } catch {
+      setSubmitError('Greska pri kreiranju prodaje');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-3xl max-h-[90vh] overflow-y-auto m-4">
+        <div className="p-6">
+          <div className="flex justify-between items-center mb-6">
+            <h2 className="text-xl font-bold text-gray-900 dark:text-white">Nova prodaja</h2>
+            <button
+              onClick={onClose}
+              className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 text-2xl leading-none"
+            >
+              &times;
+            </button>
+          </div>
+
+          {submitError && (
+            <div className="mb-4 p-3 bg-red-100 dark:bg-red-900/30 border border-red-300 dark:border-red-700 text-red-700 dark:text-red-400 rounded text-sm">
+              {submitError}
+            </div>
+          )}
+
+          {/* Customer Section */}
+          <div className="mb-6">
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Kupac</h3>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="relative" ref={suggestionsRef}>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Ime kupca *
+                </label>
+                <input
+                  type="text"
+                  value={customerName}
+                  onChange={(e) => handleCustomerSearch(e.target.value)}
+                  onFocus={() => customerSuggestions.length > 0 && setShowSuggestions(true)}
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  placeholder="Ime i prezime"
+                />
+                {showSuggestions && customerSuggestions.length > 0 && (
+                  <div className="absolute z-10 w-full mt-1 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded shadow-lg max-h-40 overflow-y-auto">
+                    {customerSuggestions.map((c) => (
+                      <button
+                        key={c.id}
+                        onClick={() => selectCustomer(c)}
+                        className="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 text-sm text-gray-900 dark:text-white"
+                      >
+                        <span className="font-medium">{c.name}</span>
+                        {c.city && (
+                          <span className="text-gray-500 dark:text-gray-400 ml-2">({c.city})</span>
+                        )}
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Telefon
+                </label>
+                <input
+                  type="text"
+                  value={customerPhone}
+                  onChange={(e) => setCustomerPhone(e.target.value)}
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  placeholder="Broj telefona"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Grad
+                </label>
+                <input
+                  type="text"
+                  value={customerCity}
+                  onChange={(e) => setCustomerCity(e.target.value)}
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  placeholder="Grad"
+                />
+              </div>
+            </div>
+            <div className="mt-3">
+              <div className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Beleske o kupcu</div>
+              <textarea
+                value={customerNotes}
+                onChange={(e) => setCustomerNotes(e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                placeholder="npr. stampa figurice, obicno koristi crnu..."
+                rows={2}
+              />
+            </div>
+          </div>
+
+          {/* Items Section */}
+          <div className="mb-6">
+            <div className="flex justify-between items-center mb-3">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Stavke</h3>
+              <button
+                onClick={addItem}
+                className="px-3 py-1 bg-green-600 text-white text-sm rounded hover:bg-green-700 transition-colors"
+              >
+                Dodaj stavku
+              </button>
+            </div>
+            <div className="space-y-3">
+              {items.map((item, index) => {
+                const filament = getFilamentById(item.filament_id);
+                const available = filament ? getAvailableStock(filament, item.item_type) : 0;
+                const itemPrice = getItemPrice(item);
+
+                return (
+                  <div
+                    key={index}
+                    className="flex flex-wrap gap-3 items-end p-3 bg-gray-50 dark:bg-gray-700/50 rounded border border-gray-200 dark:border-gray-600"
+                  >
+                    <div className="flex-1 min-w-[200px]">
+                      <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
+                        Filament
+                      </label>
+                      <select
+                        value={item.filament_id}
+                        onChange={(e) => updateItem(index, { filament_id: e.target.value })}
+                        className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                      >
+                        <option value={0}>-- Izaberite filament --</option>
+                        {filaments
+                          .filter((f) => f.kolicina > 0)
+                          .map((f) => (
+                            <option key={f.id} value={f.id}>
+                              {f.boja} - {f.tip} {f.finish} (refill: {f.refill}, spulna: {f.spulna})
+                            </option>
+                          ))}
+                      </select>
+                    </div>
+                    <div className="w-32">
+                      <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
+                        Tip
+                      </label>
+                      <select
+                        value={item.item_type}
+                        onChange={(e) =>
+                          updateItem(index, {
+                            item_type: e.target.value as 'refill' | 'spulna',
+                            quantity: 1,
+                          })
+                        }
+                        className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                      >
+                        <option value="refill">Refill</option>
+                        <option value="spulna">Spulna</option>
+                      </select>
+                    </div>
+                    <div className="w-24">
+                      <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
+                        Kolicina {filament ? `(max ${available})` : ''}
+                      </label>
+                      <input
+                        type="number"
+                        min={1}
+                        max={available || undefined}
+                        value={item.quantity}
+                        onChange={(e) => updateItem(index, { quantity: Math.max(1, Number(e.target.value)) })}
+                        className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                      />
+                    </div>
+                    <div className="w-32 text-right">
+                      <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
+                        Cena
+                      </label>
+                      <div className="px-3 py-2 text-sm font-medium text-gray-900 dark:text-white">
+                        {itemPrice > 0 ? formatPrice(itemPrice) : '-'}
+                      </div>
+                    </div>
+                    <div>
+                      <button
+                        onClick={() => removeItem(index)}
+                        disabled={items.length <= 1}
+                        className="px-3 py-2 bg-red-600 text-white text-sm rounded hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                      >
+                        Ukloni
+                      </button>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* Total */}
+          <div className="mb-6 p-4 bg-gray-100 dark:bg-gray-700 rounded flex justify-between items-center">
+            <span className="text-lg font-semibold text-gray-900 dark:text-white">Ukupno:</span>
+            <span className="text-xl font-bold text-gray-900 dark:text-white">{formatPrice(totalAmount)}</span>
+          </div>
+
+          {/* Notes */}
+          <div className="mb-6">
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              Beleske
+            </label>
+            <textarea
+              value={notes}
+              onChange={(e) => setNotes(e.target.value)}
+              rows={3}
+              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              placeholder="Napomena za prodaju..."
+            />
+          </div>
+
+          {/* Actions */}
+          <div className="flex justify-end gap-3">
+            <button
+              onClick={onClose}
+              className="px-4 py-2 bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors"
+            >
+              Otkazi
+            </button>
+            <button
+              onClick={handleSubmit}
+              disabled={submitting}
+              className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
+            >
+              {submitting ? 'Cuvanje...' : 'Sacuvaj'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// --- SaleDetailModal ---
+
+function SaleDetailModal({
+  sale,
+  loading,
+  onClose,
+  onDelete,
+  formatPrice,
+  formatDate,
+}: {
+  sale: Sale | null;
+  loading: boolean;
+  onClose: () => void;
+  onDelete: (id: string) => void;
+  formatPrice: (n: number) => string;
+  formatDate: (d?: string) => string;
+}) {
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto m-4">
+        <div className="p-6">
+          <div className="flex justify-between items-center mb-6">
+            <h2 className="text-xl font-bold text-gray-900 dark:text-white">Detalji prodaje</h2>
+            <button
+              onClick={onClose}
+              className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 text-2xl leading-none"
+            >
+              &times;
+            </button>
+          </div>
+
+          {loading ? (
+            <div className="p-8 text-center text-gray-500 dark:text-gray-400">Ucitavanje...</div>
+          ) : !sale ? (
+            <div className="p-8 text-center text-gray-500 dark:text-gray-400">Prodaja nije pronadjena</div>
+          ) : (
+            <>
+              {/* Customer Info */}
+              <div className="mb-6">
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Kupac</h3>
+                <div className="grid grid-cols-2 gap-4 text-sm">
+                  <div>
+                    <span className="text-gray-500 dark:text-gray-400">Ime: </span>
+                    <span className="text-gray-900 dark:text-white font-medium">
+                      {sale.customer_name || '-'}
+                    </span>
+                  </div>
+                  <div>
+                    <span className="text-gray-500 dark:text-gray-400">Telefon: </span>
+                    <span className="text-gray-900 dark:text-white">
+                      {sale.customer_phone || '-'}
+                    </span>
+                  </div>
+                  <div>
+                    <span className="text-gray-500 dark:text-gray-400">Datum: </span>
+                    <span className="text-gray-900 dark:text-white">{formatDate(sale.created_at)}</span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Items */}
+              <div className="mb-6">
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Stavke</h3>
+                {sale.items && sale.items.length > 0 ? (
+                  <div className="border border-gray-200 dark:border-gray-600 rounded overflow-hidden">
+                    <table className="w-full">
+                      <thead className="bg-gray-50 dark:bg-gray-700">
+                        <tr>
+                          <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
+                            Filament
+                          </th>
+                          <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
+                            Tip
+                          </th>
+                          <th className="px-4 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
+                            Kolicina
+                          </th>
+                          <th className="px-4 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
+                            Cena
+                          </th>
+                        </tr>
+                      </thead>
+                      <tbody className="divide-y divide-gray-200 dark:divide-gray-600">
+                        {sale.items.map((item: SaleItem) => (
+                          <tr key={item.id}>
+                            <td className="px-4 py-2 text-sm text-gray-900 dark:text-white">
+                              {item.filament_boja} - {item.filament_tip} {item.filament_finish}
+                            </td>
+                            <td className="px-4 py-2 text-sm text-gray-600 dark:text-gray-400 capitalize">
+                              {item.item_type}
+                            </td>
+                            <td className="px-4 py-2 text-sm text-gray-900 dark:text-white text-right">
+                              {item.quantity}
+                            </td>
+                            <td className="px-4 py-2 text-sm text-gray-900 dark:text-white text-right font-medium">
+                              {formatPrice(item.unit_price * item.quantity)}
+                            </td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                ) : (
+                  <p className="text-sm text-gray-500 dark:text-gray-400">Nema stavki</p>
+                )}
+              </div>
+
+              {/* Total */}
+              <div className="mb-6 p-4 bg-gray-100 dark:bg-gray-700 rounded flex justify-between items-center">
+                <span className="text-lg font-semibold text-gray-900 dark:text-white">Ukupno:</span>
+                <span className="text-xl font-bold text-gray-900 dark:text-white">
+                  {formatPrice(sale.total_amount)}
+                </span>
+              </div>
+
+              {/* Notes */}
+              {sale.notes && (
+                <div className="mb-6">
+                  <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Beleske</h3>
+                  <p className="text-sm text-gray-900 dark:text-white bg-gray-50 dark:bg-gray-700/50 p-3 rounded">
+                    {sale.notes}
+                  </p>
+                </div>
+              )}
+
+              {/* Actions */}
+              <div className="flex justify-between">
+                <button
+                  onClick={() => {
+                    if (window.confirm('Da li ste sigurni da zelite da obrisete ovu prodaju?')) {
+                      onDelete(sale.id);
+                    }
+                  }}
+                  className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition-colors"
+                >
+                  Obrisi prodaju
+                </button>
+                <button
+                  onClick={onClose}
+                  className="px-4 py-2 bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors"
+                >
+                  Zatvori
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

config/environments.js

@@ -0,0 +1,19 @@
+// Environment configuration
+const environments = {
+  development: {
+    name: 'development',
+    apiUrl: process.env.NEXT_PUBLIC_API_URL || 'https://api.filamenteka.rs/api'
+  },
+  production: {
+    name: 'production',
+    apiUrl: process.env.NEXT_PUBLIC_API_URL
+  }
+};
+
+const currentEnv = process.env.NODE_ENV || 'development';
+
+module.exports = {
+  env: environments[currentEnv] || environments.development,
+  isDev: currentEnv === 'development',
+  isProd: currentEnv === 'production'
+};

database/migrations/002_add_new_finishes.sql

@@ -0,0 +1,71 @@
+-- Migration: Add documentation for new finish types
+-- Date: 2025-06-20
+-- Description: Document all available finish types for filaments
+
+-- The finish column already supports VARCHAR(50) which is sufficient
+-- This migration serves as documentation for available finish values
+
+-- Standard finishes:
+-- 'Basic' - Standard finish
+-- 'Matte' - Matte/non-glossy finish
+-- 'Silk' - Silk/shiny finish
+-- 'Silk+' - Enhanced silk finish
+-- 'Translucent' - Semi-transparent finish
+-- 'Silk Multi-Color' - Multi-color silk finish
+-- 'Basic Gradient' - Gradient color transition
+-- 'Sparkle' - Sparkle/glitter finish
+-- 'Metal' - Metallic finish
+-- 'Marble' - Marble-like texture
+-- 'Galaxy' - Galaxy/space-like finish
+-- 'Glow' - Glow-in-the-dark
+-- 'Wood' - Wood-filled composite
+
+-- Technical materials:
+-- 'CF' - Carbon Fiber reinforced
+-- 'GF' - Glass Fiber reinforced
+-- 'GF Aero' - Glass Fiber Aerospace grade
+-- 'FR' - Flame Retardant
+-- 'HF' - High Flow
+
+-- TPU/Flexible grades:
+-- '95A HF' - Shore 95A High Flow
+-- '90A' - Shore 90A hardness
+-- '85A' - Shore 85A hardness
+
+-- Optional: Create a finish_types table for validation (not enforced by FK to allow flexibility)
+CREATE TABLE IF NOT EXISTS finish_types (
+  id SERIAL PRIMARY KEY,
+  code VARCHAR(50) NOT NULL UNIQUE,
+  name VARCHAR(100) NOT NULL,
+  category VARCHAR(50),
+  description TEXT,
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Insert all finish types for reference
+INSERT INTO finish_types (code, name, category, description) VALUES
+  ('Basic', 'Basic', 'Standard', 'Standard filament finish'),
+  ('Matte', 'Matte', 'Standard', 'Non-glossy matte finish'),
+  ('Silk', 'Silk', 'Standard', 'Shiny silk-like finish'),
+  ('Silk+', 'Silk Plus', 'Standard', 'Enhanced silk finish with extra shine'),
+  ('Translucent', 'Translucent', 'Standard', 'Semi-transparent finish'),
+  ('Silk Multi-Color', 'Silk Multi-Color', 'Special', 'Multi-color silk finish'),
+  ('Basic Gradient', 'Basic Gradient', 'Special', 'Gradient color transition'),
+  ('Sparkle', 'Sparkle', 'Special', 'Contains glitter particles'),
+  ('Metal', 'Metal', 'Special', 'Metallic appearance'),
+  ('Marble', 'Marble', 'Special', 'Marble-like texture and appearance'),
+  ('Galaxy', 'Galaxy', 'Special', 'Space/galaxy-like appearance'),
+  ('Glow', 'Glow', 'Special', 'Glow-in-the-dark properties'),
+  ('Wood', 'Wood', 'Composite', 'Wood-filled composite'),
+  ('CF', 'Carbon Fiber', 'Technical', 'Carbon fiber reinforced'),
+  ('GF', 'Glass Fiber', 'Technical', 'Glass fiber reinforced'),
+  ('GF Aero', 'Glass Fiber Aero', 'Technical', 'Aerospace grade glass fiber'),
+  ('FR', 'Flame Retardant', 'Technical', 'Flame retardant properties'),
+  ('HF', 'High Flow', 'Technical', 'High flow for detailed prints'),
+  ('95A HF', '95A High Flow', 'Flexible', 'Shore 95A hardness with high flow'),
+  ('90A', '90A', 'Flexible', 'Shore 90A hardness TPU'),
+  ('85A', '85A', 'Flexible', 'Shore 85A hardness TPU')
+ON CONFLICT (code) DO NOTHING;
+
+-- Add index for finish column if not exists
+CREATE INDEX IF NOT EXISTS idx_filaments_finish ON filaments(finish);

database/migrations/003_add_bambu_lab_colors.sql

@@ -0,0 +1,99 @@
+-- Migration: Add all Bambu Lab predefined colors
+-- Date: 2025-06-20
+-- Description: Import comprehensive Bambu Lab color palette
+
+-- Insert all Bambu Lab colors
+INSERT INTO colors (name, hex) VALUES
+  -- Basic Colors
+  ('Black', '#1A1A1A'),
+  ('White', '#FFFFFF'),
+  ('Red', '#E53935'),
+  ('Blue', '#1E88E5'),
+  ('Green', '#43A047'),
+  ('Yellow', '#FDD835'),
+  ('Orange', '#FB8C00'),
+  ('Purple', '#8E24AA'),
+  ('Pink', '#EC407A'),
+  ('Grey', '#757575'),
+  ('Brown', '#6D4C41'),
+  ('Light Blue', '#64B5F6'),
+  ('Light Green', '#81C784'),
+  ('Mint Green', '#4DB6AC'),
+  ('Lime Green', '#C0CA33'),
+  ('Sky Blue', '#81D4FA'),
+  ('Navy Blue', '#283593'),
+  ('Magenta', '#E91E63'),
+  ('Violet', '#7B1FA2'),
+  ('Beige', '#F5DEB3'),
+  ('Ivory', '#FFFFF0'),
+  
+  -- Matte Colors
+  ('Matte Black', '#212121'),
+  ('Matte White', '#FAFAFA'),
+  ('Matte Red', '#C62828'),
+  ('Matte Blue', '#1565C0'),
+  ('Matte Green', '#2E7D32'),
+  ('Matte Yellow', '#F9A825'),
+  ('Matte Orange', '#EF6C00'),
+  ('Matte Purple', '#6A1B9A'),
+  ('Matte Pink', '#D81B60'),
+  ('Matte Grey', '#616161'),
+  ('Matte Brown', '#4E342E'),
+  ('Matte Mint', '#26A69A'),
+  ('Matte Lime', '#9E9D24'),
+  ('Matte Navy', '#1A237E'),
+  ('Matte Coral', '#FF5252'),
+  
+  -- Silk Colors
+  ('Silk White', '#FEFEFE'),
+  ('Silk Black', '#0A0A0A'),
+  ('Silk Red', '#F44336'),
+  ('Silk Blue', '#2196F3'),
+  ('Silk Green', '#4CAF50'),
+  ('Silk Gold', '#FFD54F'),
+  ('Silk Silver', '#CFD8DC'),
+  ('Silk Purple', '#9C27B0'),
+  ('Silk Pink', '#F06292'),
+  ('Silk Orange', '#FF9800'),
+  ('Silk Bronze', '#A1887F'),
+  ('Silk Copper', '#BF6F3F'),
+  ('Silk Jade', '#00897B'),
+  ('Silk Rose Gold', '#E8A09A'),
+  ('Silk Pearl', '#F8F8FF'),
+  ('Silk Ruby', '#E91E63'),
+  ('Silk Sapphire', '#1976D2'),
+  ('Silk Emerald', '#00695C'),
+  
+  -- Metal Colors
+  ('Metal Grey', '#9E9E9E'),
+  ('Metal Silver', '#B0BEC5'),
+  ('Metal Gold', '#D4AF37'),
+  ('Metal Copper', '#B87333'),
+  ('Metal Bronze', '#CD7F32'),
+  
+  -- Sparkle Colors
+  ('Sparkle Red', '#EF5350'),
+  ('Sparkle Blue', '#42A5F5'),
+  ('Sparkle Green', '#66BB6A'),
+  ('Sparkle Purple', '#AB47BC'),
+  ('Sparkle Gold', '#FFCA28'),
+  ('Sparkle Silver', '#E0E0E0'),
+  
+  -- Glow Colors
+  ('Glow in the Dark Green', '#C8E6C9'),
+  ('Glow in the Dark Blue', '#BBDEFB'),
+  
+  -- Transparent Colors
+  ('Clear', '#FFFFFF'),
+  ('Transparent Red', '#EF5350'),
+  ('Transparent Blue', '#42A5F5'),
+  ('Transparent Green', '#66BB6A'),
+  ('Transparent Yellow', '#FFEE58'),
+  ('Transparent Orange', '#FFA726'),
+  ('Transparent Purple', '#AB47BC'),
+  
+  -- Support Materials
+  ('Natural', '#F5F5DC'),
+  ('Support White', '#F5F5F5'),
+  ('Support G', '#90CAF9')
+ON CONFLICT (name) DO UPDATE SET hex = EXCLUDED.hex;

database/migrations/004_remove_brand_column.sql

@@ -0,0 +1,2 @@
+-- Migration to remove brand column from filaments table
+ALTER TABLE filaments DROP COLUMN IF EXISTS brand CASCADE;

database/migrations/005_remove_serbian_colors.sql

@@ -0,0 +1,2 @@
+-- Migration to remove Serbian colors from boje table
+DELETE FROM boje WHERE name IN ('Bela', 'Crna', 'Crvena', 'Plava', 'Zelena', 'Žuta', 'Narandžasta', 'Ljubičasta', 'Siva', 'Braon');

database/migrations/006_add_basic_refill_filaments.sql

@@ -0,0 +1,29 @@
+-- Add 1 refill filament for each color as user owns all basic colors
+-- This creates PLA Basic filaments with 1 refill for each color in the database
+
+-- First, let's insert filaments for all existing colors
+INSERT INTO filaments (tip, finish, boja, boja_hex, refill, spulna, kolicina, cena)
+SELECT 
+    'PLA' as tip,
+    'Basic' as finish,
+    c.name as boja,
+    c.hex as boja_hex,
+    1 as refill,
+    0 as spulna,
+    1 as kolicina,
+    '3999' as cena
+FROM colors c
+WHERE NOT EXISTS (
+    -- Only insert if this exact combination doesn't already exist
+    SELECT 1 FROM filaments f 
+    WHERE f.tip = 'PLA' 
+    AND f.finish = 'Basic' 
+    AND f.boja = c.name
+);
+
+-- Update any existing PLA Basic filaments to have at least 1 refill
+UPDATE filaments
+SET refill = '1'
+WHERE tip = 'PLA' 
+AND finish = 'Basic'
+AND (refill IS NULL OR refill = '0' OR refill = '');

database/migrations/007_remove_otvoreno_column.sql

@@ -0,0 +1,2 @@
+-- Remove otvoreno column from filaments table
+ALTER TABLE filaments DROP COLUMN IF EXISTS otvoreno;

database/migrations/008_update_vakum_to_spulna.sql

@@ -0,0 +1,5 @@
+-- Rename vakum column to spulna
+ALTER TABLE filaments RENAME COLUMN vakum TO spulna;
+
+-- Update existing data to use 'spulna' instead of 'vakuum'
+UPDATE filaments SET spulna = REPLACE(spulna, 'vakuum', 'spulna') WHERE spulna LIKE '%vakuum%';

database/migrations/009_update_refill_only_colors.sql

@@ -0,0 +1,48 @@
+-- Update spulna to '0' for colors that only come as refills
+UPDATE filaments 
+SET spulna = '0' 
+WHERE boja IN (
+  'Beige',
+  'Light Gray',
+  'Yellow',
+  'Orange',
+  'Gold',
+  'Bright Green',
+  'Pink',
+  'Magenta',
+  'Maroon Red',
+  'Purple',
+  'Turquoise',
+  'Cobalt Blue',
+  'Brown',
+  'Bronze',
+  'Silver',
+  'Blue Grey',
+  'Dark Gray'
+);
+
+-- Also update their quantity to be based only on refill count
+UPDATE filaments 
+SET kolicina = CASE 
+  WHEN refill ~ '^\d+$' THEN CAST(refill AS INTEGER)
+  ELSE 0
+END
+WHERE boja IN (
+  'Beige',
+  'Light Gray',
+  'Yellow',
+  'Orange',
+  'Gold',
+  'Bright Green',
+  'Pink',
+  'Magenta',
+  'Maroon Red',
+  'Purple',
+  'Turquoise',
+  'Cobalt Blue',
+  'Brown',
+  'Bronze',
+  'Silver',
+  'Blue Grey',
+  'Dark Gray'
+);

database/migrations/010_fix_quantity_calculations.sql

@@ -0,0 +1,43 @@
+-- Fix quantity calculations to be the sum of refill + spulna counts
+UPDATE filaments 
+SET kolicina = 
+  COALESCE(
+    CASE 
+      WHEN refill ~ '^\d+$' THEN CAST(refill AS INTEGER)
+      ELSE 0
+    END, 0
+  ) + 
+  COALESCE(
+    CASE 
+      WHEN spulna ~ '^(\d+)\s*spuln' THEN 
+        CAST(SUBSTRING(spulna FROM '^(\d+)\s*spuln') AS INTEGER)
+      ELSE 0
+    END, 0
+  );
+
+-- Specifically fix refill-only colors to ensure quantity matches refill count
+UPDATE filaments 
+SET kolicina = 
+  CASE 
+    WHEN refill ~ '^\d+$' THEN CAST(refill AS INTEGER)
+    ELSE 0
+  END
+WHERE boja IN (
+  'Beige',
+  'Light Gray',
+  'Yellow',
+  'Orange',
+  'Gold',
+  'Bright Green',
+  'Pink',
+  'Magenta',
+  'Maroon Red',
+  'Purple',
+  'Turquoise',
+  'Cobalt Blue',
+  'Brown',
+  'Bronze',
+  'Silver',
+  'Blue Grey',
+  'Dark Gray'
+);

database/migrations/011_standardize_data_types.sql

@@ -0,0 +1,36 @@
+-- Standardize data types for refill and spulna columns
+-- First, convert existing string values to integers
+
+-- Create temporary columns
+ALTER TABLE filaments ADD COLUMN refill_new INTEGER DEFAULT 0;
+ALTER TABLE filaments ADD COLUMN spulna_new INTEGER DEFAULT 0;
+
+-- Convert refill values
+UPDATE filaments 
+SET refill_new = CASE 
+  WHEN refill ~ '^\d+$' THEN CAST(refill AS INTEGER)
+  WHEN LOWER(refill) = 'da' THEN 1
+  ELSE 0
+END;
+
+-- Convert spulna values (extract number from "X spulna" format)
+UPDATE filaments 
+SET spulna_new = CASE 
+  WHEN spulna ~ '^(\d+)\s*spuln' THEN 
+    CAST(SUBSTRING(spulna FROM '^(\d+)\s*spuln') AS INTEGER)
+  WHEN spulna ~ '^\d+$' THEN CAST(spulna AS INTEGER)
+  ELSE 0
+END;
+
+-- Drop old columns and rename new ones
+ALTER TABLE filaments DROP COLUMN refill;
+ALTER TABLE filaments DROP COLUMN spulna;
+ALTER TABLE filaments RENAME COLUMN refill_new TO refill;
+ALTER TABLE filaments RENAME COLUMN spulna_new TO spulna;
+
+-- Update kolicina to ensure it matches refill + spulna
+UPDATE filaments SET kolicina = refill + spulna;
+
+-- Add check constraint to ensure kolicina is always the sum of refill and spulna
+ALTER TABLE filaments ADD CONSTRAINT check_kolicina 
+  CHECK (kolicina = refill + spulna);

database/migrations/012_add_color_prices.sql

@@ -0,0 +1,7 @@
+-- Add price fields to colors table
+ALTER TABLE colors 
+ADD COLUMN cena_refill INTEGER DEFAULT 3499,
+ADD COLUMN cena_spulna INTEGER DEFAULT 3999;
+
+-- Update existing colors with default prices
+UPDATE colors SET cena_refill = 3499, cena_spulna = 3999;

database/migrations/013_add_pla_basic_colors.sql

@@ -0,0 +1,96 @@
+-- Migration: Add specific PLA Basic colors
+-- This migration adds the specific set of colors for PLA Basic filaments
+
+-- First, let's add any missing colors to the colors table
+INSERT INTO colors (name, hex) VALUES 
+    ('Jade White', '#FFFFFF'),
+    ('Beige', '#F7E6DE'),
+    ('Light Gray', '#D0D2D4'),
+    ('Yellow', '#F4EE2A'),
+    ('Sunflower Yellow', '#FEC601'),
+    ('Pumpkin Orange', '#FF8E16'),
+    ('Orange', '#FF6A13'),
+    ('Gold', '#E4BD68'),
+    ('Bright Green', '#BDCF00'),
+    ('Bambu Green', '#16C344'),
+    ('Mistletoe Green', '#3F8E43'),
+    ('Pink', '#F55A74'),
+    ('Hot Pink', '#F5547D'),
+    ('Magenta', '#EC008C'),
+    ('Red', '#C12E1F'),
+    ('Maroon Red', '#832140'),
+    ('Purple', '#5E43B7'),
+    ('Indigo Purple', '#482A60'),
+    ('Turquoise', '#00B1B7'),
+    ('Cyan', '#0086D6'),
+    ('Cobalt Blue', '#0055B8'),
+    ('Blue', '#0A2989'),
+    ('Brown', '#9D432C'),
+    ('Cocoa Brown', '#6F5034'),
+    ('Bronze', '#847D48'),
+    ('Gray', '#8E9089'),
+    ('Silver', '#A6A9AA'),
+    ('Blue Grey', '#5B6579'),
+    ('Dark Gray', '#555555'),
+    ('Black', '#000000'),
+    ('Latte Brown', '#D3B7A7')
+ON CONFLICT (name) 
+DO UPDATE SET hex = EXCLUDED.hex;
+
+-- Now add PLA Basic filaments for each of these colors
+-- We'll add them with 1 refill and 1 spool each
+INSERT INTO filaments (tip, finish, boja, boja_hex, refill, spulna, kolicina, cena)
+SELECT 
+    'PLA' as tip,
+    'Basic' as finish,
+    c.name as boja,
+    c.hex as boja_hex,
+    1 as refill,
+    1 as spulna,
+    2 as kolicina,
+    '3499/3999' as cena
+FROM colors c
+WHERE c.name IN (
+    'Jade White', 'Beige', 'Light Gray', 'Yellow', 'Sunflower Yellow',
+    'Pumpkin Orange', 'Orange', 'Gold', 'Bright Green', 'Bambu Green',
+    'Mistletoe Green', 'Pink', 'Hot Pink', 'Magenta', 'Red',
+    'Maroon Red', 'Purple', 'Indigo Purple', 'Turquoise', 'Cyan',
+    'Cobalt Blue', 'Blue', 'Brown', 'Cocoa Brown', 'Bronze',
+    'Gray', 'Silver', 'Blue Grey', 'Dark Gray', 'Black', 'Latte Brown'
+)
+AND NOT EXISTS (
+    SELECT 1 FROM filaments f 
+    WHERE f.tip = 'PLA' 
+    AND f.finish = 'Basic' 
+    AND f.boja = c.name
+);
+
+-- Update any existing PLA Basic filaments to ensure they have correct inventory
+UPDATE filaments 
+SET refill = 1, spulna = 1, kolicina = 2, cena = '3499/3999'
+WHERE tip = 'PLA' 
+AND finish = 'Basic'
+AND boja IN (
+    'Jade White', 'Beige', 'Light Gray', 'Yellow', 'Sunflower Yellow',
+    'Pumpkin Orange', 'Orange', 'Gold', 'Bright Green', 'Bambu Green',
+    'Mistletoe Green', 'Pink', 'Hot Pink', 'Magenta', 'Red',
+    'Maroon Red', 'Purple', 'Indigo Purple', 'Turquoise', 'Cyan',
+    'Cobalt Blue', 'Blue', 'Brown', 'Cocoa Brown', 'Bronze',
+    'Gray', 'Silver', 'Blue Grey', 'Dark Gray', 'Black', 'Latte Brown'
+);
+
+-- Zero out ALL other filaments (not PLA Basic with these specific colors)
+UPDATE filaments 
+SET refill = 0, spulna = 0, kolicina = 0
+WHERE NOT (
+    tip = 'PLA' 
+    AND finish = 'Basic'
+    AND boja IN (
+        'Jade White', 'Beige', 'Light Gray', 'Yellow', 'Sunflower Yellow',
+        'Pumpkin Orange', 'Orange', 'Gold', 'Bright Green', 'Bambu Green',
+        'Mistletoe Green', 'Pink', 'Hot Pink', 'Magenta', 'Red',
+        'Maroon Red', 'Purple', 'Indigo Purple', 'Turquoise', 'Cyan',
+        'Cobalt Blue', 'Blue', 'Brown', 'Cocoa Brown', 'Bronze',
+        'Gray', 'Silver', 'Blue Grey', 'Dark Gray', 'Black', 'Latte Brown'
+    )
+);

database/migrations/014_add_sale_fields.sql

@@ -0,0 +1,10 @@
+-- Add sale fields to filaments table
+ALTER TABLE filaments 
+ADD COLUMN IF NOT EXISTS sale_percentage INTEGER DEFAULT 0 CHECK (sale_percentage >= 0 AND sale_percentage <= 100),
+ADD COLUMN IF NOT EXISTS sale_active BOOLEAN DEFAULT FALSE,
+ADD COLUMN IF NOT EXISTS sale_start_date TIMESTAMP WITH TIME ZONE,
+ADD COLUMN IF NOT EXISTS sale_end_date TIMESTAMP WITH TIME ZONE;
+
+-- Add indexes for better performance
+CREATE INDEX IF NOT EXISTS idx_filaments_sale_active ON filaments(sale_active) WHERE sale_active = TRUE;
+CREATE INDEX IF NOT EXISTS idx_filaments_sale_dates ON filaments(sale_start_date, sale_end_date) WHERE sale_active = TRUE;

database/migrations/015_fix_refill_only_colors.sql

@@ -0,0 +1,83 @@
+-- Migration: Fix refill-only colors to have 0 spools instead of 1
+-- These colors should only be available as refills, not as regular spools
+
+-- First, add Nardo Gray to colors table if it doesn't exist
+INSERT INTO colors (name, hex) VALUES 
+    ('Nardo Gray', '#747474')
+ON CONFLICT (name) DO NOTHING;
+
+-- Update all refill-only colors to have spulna = 0
+-- This ensures they can only be purchased as refills
+UPDATE filaments 
+SET 
+    spulna = 0,
+    kolicina = refill  -- Total quantity should equal refill count only
+WHERE tip = 'PLA' 
+AND finish = 'Basic'
+AND boja IN (
+    -- Colors specified by user as refill-only
+    'Nardo Gray',
+    'Blue Grey',     -- Note: Database uses "Blue Grey" not "Blue Gray"
+    'Light Gray',
+    'Brown',
+    'Beige',
+    'Bronze',
+    'Purple',
+    'Cobalt Blue',
+    'Turquoise',
+    'Bright Green',
+    'Yellow',
+    'Gold',
+    'Orange',
+    'Maroon Red'
+);
+
+-- Also handle any existing entries with alternate spellings
+UPDATE filaments 
+SET 
+    spulna = 0,
+    kolicina = refill
+WHERE tip = 'PLA' 
+AND finish = 'Basic'
+AND (
+    boja = 'Blue Gray'  -- Handle alternate spelling if it exists
+);
+
+-- Ensure these colors maintain their refill-only status
+-- even if they don't exist yet (for future inserts)
+INSERT INTO filaments (tip, finish, boja, boja_hex, refill, spulna, kolicina, cena)
+SELECT 
+    'PLA' as tip,
+    'Basic' as finish,
+    c.name as boja,
+    c.hex as boja_hex,
+    0 as refill,      -- Start with 0 refills
+    0 as spulna,      -- Always 0 spools for refill-only
+    0 as kolicina,    -- Total is 0
+    '3499' as cena    -- Refill price only
+FROM colors c
+WHERE c.name IN (
+    'Nardo Gray',
+    'Blue Grey',
+    'Light Gray', 
+    'Brown',
+    'Beige',
+    'Bronze',
+    'Purple',
+    'Cobalt Blue',
+    'Turquoise',
+    'Bright Green',
+    'Yellow',
+    'Gold',
+    'Orange',
+    'Maroon Red'
+)
+AND NOT EXISTS (
+    SELECT 1 FROM filaments f 
+    WHERE f.tip = 'PLA' 
+    AND f.finish = 'Basic' 
+    AND f.boja = c.name
+);
+
+-- Add a comment to track which colors are refill-only
+COMMENT ON TABLE filaments IS 'Filament inventory. Note: The following PLA Basic colors are refill-only (spulna must always be 0): Nardo Gray, Blue Grey, Light Gray, Brown, Beige, Bronze, Purple, Cobalt Blue, Turquoise, Bright Green, Yellow, Gold, Orange, Maroon Red';

database/migrations/016_add_color_requests.sql

@@ -0,0 +1,35 @@
+-- Migration: Add color requests feature
+-- Allows users to request new colors and admins to view/manage requests
+
+-- Create color_requests table
+CREATE TABLE IF NOT EXISTS color_requests (
+    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+    color_name VARCHAR(100) NOT NULL,
+    material_type VARCHAR(50) NOT NULL,
+    finish_type VARCHAR(50),
+    user_email VARCHAR(255),
+    user_name VARCHAR(100),
+    description TEXT,
+    reference_url VARCHAR(500),
+    status VARCHAR(20) DEFAULT 'pending' CHECK (status IN ('pending', 'approved', 'rejected', 'completed')),
+    admin_notes TEXT,
+    request_count INTEGER DEFAULT 1,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+    processed_at TIMESTAMP WITH TIME ZONE,
+    processed_by VARCHAR(100)
+);
+
+-- Create indexes for better performance
+CREATE INDEX idx_color_requests_status ON color_requests(status);
+CREATE INDEX idx_color_requests_created_at ON color_requests(created_at DESC);
+CREATE INDEX idx_color_requests_color_name ON color_requests(LOWER(color_name));
+
+-- Apply updated_at trigger to color_requests table
+CREATE TRIGGER update_color_requests_updated_at BEFORE UPDATE
+    ON color_requests FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
+
+-- Add comment to describe the table
+COMMENT ON TABLE color_requests IS 'User requests for new filament colors to be added to inventory';
+COMMENT ON COLUMN color_requests.status IS 'Request status: pending (new), approved (will be ordered), rejected (won''t be added), completed (added to inventory)';
+COMMENT ON COLUMN color_requests.request_count IS 'Number of users who have requested this same color';

database/migrations/017_add_phone_to_color_requests.sql

@@ -0,0 +1,8 @@
+-- Migration: Add phone field to color_requests table
+-- Allows users to provide phone number for contact
+
+ALTER TABLE color_requests 
+ADD COLUMN IF NOT EXISTS user_phone VARCHAR(50);
+
+-- Add comment to describe the new column
+COMMENT ON COLUMN color_requests.user_phone IS 'User phone number for contact (optional)';

database/migrations/018_make_contact_fields_required.sql

@@ -0,0 +1,22 @@
+-- Migration: Make email and phone fields required in color_requests table
+-- These fields are now mandatory for all color requests
+
+-- First, update any existing NULL values to prevent constraint violation
+UPDATE color_requests 
+SET user_email = 'unknown@example.com' 
+WHERE user_email IS NULL;
+
+UPDATE color_requests 
+SET user_phone = 'unknown' 
+WHERE user_phone IS NULL;
+
+-- Now add NOT NULL constraints
+ALTER TABLE color_requests 
+ALTER COLUMN user_email SET NOT NULL;
+
+ALTER TABLE color_requests 
+ALTER COLUMN user_phone SET NOT NULL;
+
+-- Update comments to reflect the requirement
+COMMENT ON COLUMN color_requests.user_email IS 'User email address for contact (required)';
+COMMENT ON COLUMN color_requests.user_phone IS 'User phone number for contact (required)';

database/migrations/019_add_new_bambu_colors_2025.sql

@@ -0,0 +1,77 @@
+-- Migration: Add new Bambu Lab PLA Matte and PLA Wood colors (2025)
+-- This migration adds the new color offerings from Bambu Lab
+
+-- Add new PLA Matte colors to the colors table
+INSERT INTO colors (name, hex) VALUES
+    ('Matte Apple Green', '#C6E188'),
+    ('Matte Bone White', '#C8C5B6'),
+    ('Matte Caramel', '#A4845C'),
+    ('Matte Dark Blue', '#042F56'),
+    ('Matte Dark Brown', '#7D6556'),
+    ('Matte Dark Chocolate', '#4A3729'),
+    ('Matte Dark Green', '#68724D'),
+    ('Matte Dark Red', '#BB3D43'),
+    ('Matte Grass Green', '#7CB342'),
+    ('Matte Ice Blue', '#A3D8E1'),
+    ('Matte Lemon Yellow', '#F7D959'),
+    ('Matte Lilac Purple', '#AE96D4'),
+    ('Matte Plum', '#851A52'),
+    ('Matte Sakura Pink', '#E8AFCF'),
+    ('Matte Sky Blue', '#73B2E5'),
+    ('Matte Terracotta', '#A25A37')
+ON CONFLICT (name)
+DO UPDATE SET hex = EXCLUDED.hex;
+
+-- Add new PLA Wood colors to the colors table
+INSERT INTO colors (name, hex) VALUES
+    ('Ochre Yellow', '#BC8B39'),
+    ('White Oak', '#D2CCA2'),
+    ('Clay Brown', '#8E621A')
+ON CONFLICT (name)
+DO UPDATE SET hex = EXCLUDED.hex;
+
+-- Add PLA Matte filaments (all Refill only - 1 refill each, 0 spool)
+INSERT INTO filaments (tip, finish, boja, refill, spulna, kolicina, cena)
+SELECT
+    'PLA' as tip,
+    'Matte' as finish,
+    c.name as boja,
+    1 as refill,
+    0 as spulna,
+    1 as kolicina,
+    '3499' as cena
+FROM colors c
+WHERE c.name IN (
+    'Matte Apple Green', 'Matte Bone White', 'Matte Caramel',
+    'Matte Dark Blue', 'Matte Dark Brown', 'Matte Dark Chocolate',
+    'Matte Dark Green', 'Matte Dark Red', 'Matte Grass Green',
+    'Matte Ice Blue', 'Matte Lemon Yellow', 'Matte Lilac Purple',
+    'Matte Plum', 'Matte Sakura Pink', 'Matte Sky Blue', 'Matte Terracotta'
+)
+AND NOT EXISTS (
+    SELECT 1 FROM filaments f
+    WHERE f.tip = 'PLA'
+    AND f.finish = 'Matte'
+    AND f.boja = c.name
+);
+
+-- Add PLA Wood filaments (all Spool only - 0 refill, 1 spool each)
+INSERT INTO filaments (tip, finish, boja, refill, spulna, kolicina, cena)
+SELECT
+    'PLA' as tip,
+    'Wood' as finish,
+    c.name as boja,
+    0 as refill,
+    1 as spulna,
+    1 as kolicina,
+    '3999' as cena
+FROM colors c
+WHERE c.name IN (
+    'Ochre Yellow', 'White Oak', 'Clay Brown'
+)
+AND NOT EXISTS (
+    SELECT 1 FROM filaments f
+    WHERE f.tip = 'PLA'
+    AND f.finish = 'Wood'
+    AND f.boja = c.name
+);

database/migrations/020_add_missing_colors_2025.sql

@@ -0,0 +1,102 @@
+-- Migration: Add missing Bambu Lab colors (2025)
+-- Created: 2025-11-13
+-- Description: Adds missing color definitions from Bambu Lab catalog
+
+INSERT INTO colors (name, hex, cena_refill, cena_spulna) VALUES
+-- Basic/Matte Colors
+('Clear Black', '#1a1a1a', 3499, 3999),
+('Transparent', '#f0f0f0', 3499, 3999),
+('Brick Red', '#8b2e2e', 3499, 3999),
+('Titan Gray', '#5c6670', 3499, 3999),
+('Indigo Blue', '#4b0082', 3499, 3999),
+('Malachite Green', '#0bda51', 3499, 3999),
+('Violet Purple', '#8f00ff', 3499, 3999),
+('Iris Purple', '#5d3fd3', 3499, 3999),
+('Royal Blue', '#4169e1', 3499, 3999),
+('Lava Gray', '#4a4a4a', 3499, 3999),
+('Burgundy Red', '#800020', 3499, 3999),
+('Matcha Green', '#8db255', 3499, 3999),
+('Light Cyan', '#e0ffff', 3499, 3999),
+
+-- Glow Colors
+('Blaze', '#ff6347', 3499, 3999),
+('Glow Blue', '#00d4ff', 3499, 3999),
+('Glow Pink', '#ff69b4', 3499, 3999),
+('Glow Yellow', '#ffff00', 3499, 3999),
+('Glow Orange', '#ff8c00', 3499, 3999),
+('Nebulane', '#9b59b6', 3499, 3999),
+
+-- Metallic Colors
+('IronGray Metallic', '#71797e', 3499, 3999),
+('Copper Brown Metallic', '#b87333', 3499, 3999),
+('Iridium Gold Metallic', '#d4af37', 3499, 3999),
+('Oxide Green Metallic', '#6b8e23', 3499, 3999),
+('Cobalt Blue Metallic', '#0047ab', 3499, 3999),
+
+-- Marble Colors
+('White Marble', '#f5f5f5', 3499, 3999),
+('Red Granite', '#8b4513', 3499, 3999),
+
+-- Sparkle Colors
+('Classic Gold Sparkle', '#ffd700', 3499, 3999),
+('Onyx Black Sparkle', '#0f0f0f', 3499, 3999),
+('Crimson Red Sparkle', '#dc143c', 3499, 3999),
+('Royal Purple Sparkle', '#7851a9', 3499, 3999),
+('Slate Gray Sparkle', '#708090', 3499, 3999),
+('Alpine Green Sparkle', '#2e8b57', 3499, 3999),
+
+-- Gradient Colors
+('South Beach', '#ff69b4', 3499, 3999),
+('Dawn Radiance', '#ff7f50', 3499, 3999),
+('Blue Hawaii', '#1e90ff', 3499, 3999),
+('Gilded Rose', '#ff1493', 3499, 3999),
+('Midnight Blaze', '#191970', 3499, 3999),
+('Neon City', '#00ffff', 3499, 3999),
+('Velvet Eclipse', '#8b008b', 3499, 3999),
+('Solar Breeze', '#ffb347', 3499, 3999),
+('Arctic Whisper', '#b0e0e6', 3499, 3999),
+('Ocean to Meadow', '#40e0d0', 3499, 3999),
+('Dusk Glare', '#ff6347', 3499, 3999),
+('Mint Lime', '#98fb98', 3499, 3999),
+('Pink Citrus', '#ff69b4', 3499, 3999),
+('Blueberry Bubblegum', '#7b68ee', 3499, 3999),
+('Cotton Candy Cloud', '#ffb6c1', 3499, 3999),
+
+-- Pastel/Light Colors
+('Lavender', '#e6e6fa', 3499, 3999),
+('Ice Blue', '#d0e7ff', 3499, 3999),
+('Mellow Yellow', '#fff44f', 3499, 3999),
+('Teal', '#008080', 3499, 3999),
+
+-- ABS Colors
+('ABS Azure', '#007fff', 3499, 3999),
+('ABS Olive', '#808000', 3499, 3999),
+('ABS Blue', '#0000ff', 3499, 3999),
+('ABS Tangerine Yellow', '#ffcc00', 3499, 3999),
+('ABS Navy Blue', '#000080', 3499, 3999),
+('ABS Orange', '#ff8800', 3499, 3999),
+('ABS Bambu Green', '#00c853', 3499, 3999),
+('ABS Red', '#ff0000', 3499, 3999),
+('ABS White', '#ffffff', 3499, 3999),
+('ABS Black', '#000000', 3499, 3999),
+('ABS Silver', '#c0c0c0', 3499, 3999),
+
+-- Translucent Colors
+('Translucent Gray', '#9e9e9e', 3499, 3999),
+('Translucent Brown', '#8b4513', 3499, 3999),
+('Translucent Purple', '#9370db', 3499, 3999),
+('Translucent Orange', '#ffa500', 3499, 3999),
+('Translucent Olive', '#6b8e23', 3499, 3999),
+('Translucent Pink', '#ffb6c1', 3499, 3999),
+('Translucent Light Blue', '#add8e6', 3499, 3999),
+('Translucent Tea', '#d2b48c', 3499, 3999),
+
+-- Additional Colors
+('Mint', '#98ff98', 3499, 3999),
+('Champagne', '#f7e7ce', 3499, 3999),
+('Baby Blue', '#89cff0', 3499, 3999),
+('Cream', '#fffdd0', 3499, 3999),
+('Peanut Brown', '#b86f52', 3499, 3999),
+('Matte Ivory', '#fffff0', 3499, 3999)
+
+ON CONFLICT (name) DO NOTHING;

database/migrations/021_add_customers_table.sql

@@ -0,0 +1,16 @@
+-- Add customers table for tracking buyers
+CREATE EXTENSION IF NOT EXISTS "pgcrypto";
+
+CREATE TABLE customers (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    name VARCHAR(255) NOT NULL,
+    phone VARCHAR(50),
+    city VARCHAR(255),
+    notes TEXT,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Phone is the natural dedup key
+CREATE UNIQUE INDEX idx_customers_phone ON customers (phone) WHERE phone IS NOT NULL;
+CREATE INDEX idx_customers_name ON customers (name);

database/migrations/022_add_sales_tables.sql

@@ -0,0 +1,24 @@
+-- Add sales and sale_items tables for tracking transactions
+CREATE TABLE sales (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    customer_id UUID REFERENCES customers(id) ON DELETE SET NULL,
+    total_amount INTEGER NOT NULL DEFAULT 0,
+    notes TEXT,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE TABLE sale_items (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    sale_id UUID NOT NULL REFERENCES sales(id) ON DELETE CASCADE,
+    filament_id UUID NOT NULL REFERENCES filaments(id) ON DELETE RESTRICT,
+    item_type VARCHAR(10) NOT NULL CHECK (item_type IN ('refill', 'spulna')),
+    quantity INTEGER NOT NULL DEFAULT 1 CHECK (quantity > 0),
+    unit_price INTEGER NOT NULL,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE INDEX idx_sales_customer_id ON sales (customer_id);
+CREATE INDEX idx_sales_created_at ON sales (created_at);
+CREATE INDEX idx_sale_items_sale_id ON sale_items (sale_id);
+CREATE INDEX idx_sale_items_filament_id ON sale_items (filament_id);

database/schema.sql

@@ -0,0 +1,58 @@
+-- Filamenteka PostgreSQL Schema
+
+-- Enable UUID extension
+CREATE EXTENSION IF NOT EXISTS "uuid-ossp";
+
+-- Colors table
+CREATE TABLE IF NOT EXISTS colors (
+  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+  name VARCHAR(100) NOT NULL UNIQUE,
+  hex VARCHAR(7) NOT NULL,
+  cena_refill INTEGER DEFAULT 3499,
+  cena_spulna INTEGER DEFAULT 3999,
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Filaments table
+CREATE TABLE IF NOT EXISTS filaments (
+  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+  tip VARCHAR(50) NOT NULL,
+  finish VARCHAR(50) NOT NULL,
+  boja VARCHAR(100) NOT NULL,
+  boja_hex VARCHAR(7),
+  refill INTEGER DEFAULT 0,
+  spulna INTEGER DEFAULT 0,
+  kolicina INTEGER DEFAULT 0,
+  cena VARCHAR(50),
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+  CONSTRAINT fk_color FOREIGN KEY (boja) REFERENCES colors(name) ON UPDATE CASCADE,
+  CONSTRAINT check_kolicina CHECK (kolicina = refill + spulna)
+);
+
+-- Create indexes for better performance
+CREATE INDEX IF NOT EXISTS idx_filaments_tip ON filaments(tip);
+CREATE INDEX IF NOT EXISTS idx_filaments_boja ON filaments(boja);
+CREATE INDEX IF NOT EXISTS idx_filaments_created_at ON filaments(created_at);
+
+-- Create updated_at trigger function
+CREATE OR REPLACE FUNCTION update_updated_at_column()
+RETURNS TRIGGER AS $$
+BEGIN
+    NEW.updated_at = CURRENT_TIMESTAMP;
+    RETURN NEW;
+END;
+$$ language 'plpgsql';
+
+-- Apply trigger to filaments table
+DROP TRIGGER IF EXISTS update_filaments_updated_at ON filaments;
+CREATE TRIGGER update_filaments_updated_at BEFORE UPDATE
+    ON filaments FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
+
+-- Apply trigger to colors table
+DROP TRIGGER IF EXISTS update_colors_updated_at ON colors;
+CREATE TRIGGER update_colors_updated_at BEFORE UPDATE
+    ON colors FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
+
+-- Default colors are now inserted by Bambu Lab colors migration

jest.setup.js

@@ -1 +1,24 @@
 import '@testing-library/jest-dom'
+
+// Add TextEncoder/TextDecoder globals for Node.js environment
+const { TextEncoder, TextDecoder } = require('util');
+global.TextEncoder = TextEncoder;
+global.TextDecoder = TextDecoder;
+
+// Mock axios globally
+jest.mock('axios', () => ({
+  create: jest.fn(() => ({
+    get: jest.fn(),
+    post: jest.fn(),
+    put: jest.fn(),
+    delete: jest.fn(),
+    interceptors: {
+      request: {
+        use: jest.fn()
+      },
+      response: {
+        use: jest.fn()
+      }
+    }
+  }))
+}))

lambda/auth/index.js

@@ -1,110 +0,0 @@
-const jwt = require('jsonwebtoken');
-const bcrypt = require('bcryptjs');
-
-const JWT_SECRET = process.env.JWT_SECRET;
-const ADMIN_USERNAME = process.env.ADMIN_USERNAME;
-const ADMIN_PASSWORD_HASH = process.env.ADMIN_PASSWORD_HASH;
-
-// CORS headers
-const headers = {
-  'Content-Type': 'application/json',
-  'Access-Control-Allow-Origin': process.env.CORS_ORIGIN || '*',
-  'Access-Control-Allow-Headers': 'Content-Type,Authorization',
-  'Access-Control-Allow-Methods': 'POST,OPTIONS'
-};
-
-// Helper function to create response
-const createResponse = (statusCode, body) => ({
-  statusCode,
-  headers,
-  body: JSON.stringify(body)
-});
-
-// Login handler
-const login = async (event) => {
-  try {
-    const { username, password } = JSON.parse(event.body);
-
-    // Validate credentials
-    if (username !== ADMIN_USERNAME) {
-      return createResponse(401, { error: 'Invalid credentials' });
-    }
-
-    // Compare password with hash
-    const isValid = await bcrypt.compare(password, ADMIN_PASSWORD_HASH);
-    if (!isValid) {
-      return createResponse(401, { error: 'Invalid credentials' });
-    }
-
-    // Generate JWT token
-    const token = jwt.sign(
-      { username, role: 'admin' },
-      JWT_SECRET,
-      { expiresIn: '24h' }
-    );
-
-    return createResponse(200, {
-      token,
-      expiresIn: 86400 // 24 hours in seconds
-    });
-  } catch (error) {
-    console.error('Login error:', error);
-    return createResponse(500, { error: 'Authentication failed' });
-  }
-};
-
-// Verify token (for Lambda authorizer)
-const verifyToken = async (event) => {
-  try {
-    const token = event.authorizationToken?.replace('Bearer ', '');
-    
-    if (!token) {
-      throw new Error('Unauthorized');
-    }
-
-    const decoded = jwt.verify(token, JWT_SECRET);
-    
-    return {
-      principalId: decoded.username,
-      policyDocument: {
-        Version: '2012-10-17',
-        Statement: [
-          {
-            Action: 'execute-api:Invoke',
-            Effect: 'Allow',
-            Resource: event.methodArn
-          }
-        ]
-      },
-      context: {
-        username: decoded.username,
-        role: decoded.role
-      }
-    };
-  } catch (error) {
-    console.error('Token verification error:', error);
-    throw new Error('Unauthorized');
-  }
-};
-
-// Main handler
-exports.handler = async (event) => {
-  const { httpMethod, resource } = event;
-
-  // Handle CORS preflight
-  if (httpMethod === 'OPTIONS') {
-    return createResponse(200, {});
-  }
-
-  // Handle login
-  if (resource === '/auth/login' && httpMethod === 'POST') {
-    return login(event);
-  }
-
-  // Handle token verification (for Lambda authorizer)
-  if (event.type === 'TOKEN') {
-    return verifyToken(event);
-  }
-
-  return createResponse(404, { error: 'Not found' });
-};

lambda/auth/package-lock.json

@@ -1,161 +0,0 @@
-{
-  "name": "auth-api",
-  "version": "1.0.0",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "auth-api",
-      "version": "1.0.0",
-      "license": "ISC",
-      "dependencies": {
-        "bcryptjs": "^2.4.3",
-        "jsonwebtoken": "^9.0.2"
-      }
-    },
-    "node_modules/bcryptjs": {
-      "version": "2.4.3",
-      "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-2.4.3.tgz",
-      "integrity": "sha512-V/Hy/X9Vt7f3BbPJEi8BdVFMByHi+jNXrYkW3huaybV/kQ0KJg0Y6PkEMbn+zeT+i+SiKZ/HMqJGIIt4LZDqNQ==",
-      "license": "MIT"
-    },
-    "node_modules/buffer-equal-constant-time": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
-      "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==",
-      "license": "BSD-3-Clause"
-    },
-    "node_modules/ecdsa-sig-formatter": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
-      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "node_modules/jsonwebtoken": {
-      "version": "9.0.2",
-      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.2.tgz",
-      "integrity": "sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ==",
-      "license": "MIT",
-      "dependencies": {
-        "jws": "^3.2.2",
-        "lodash.includes": "^4.3.0",
-        "lodash.isboolean": "^3.0.3",
-        "lodash.isinteger": "^4.0.4",
-        "lodash.isnumber": "^3.0.3",
-        "lodash.isplainobject": "^4.0.6",
-        "lodash.isstring": "^4.0.1",
-        "lodash.once": "^4.0.0",
-        "ms": "^2.1.1",
-        "semver": "^7.5.4"
-      },
-      "engines": {
-        "node": ">=12",
-        "npm": ">=6"
-      }
-    },
-    "node_modules/jwa": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.2.tgz",
-      "integrity": "sha512-eeH5JO+21J78qMvTIDdBXidBd6nG2kZjg5Ohz/1fpa28Z4CcsWUzJ1ZZyFq/3z3N17aZy+ZuBoHljASbL1WfOw==",
-      "license": "MIT",
-      "dependencies": {
-        "buffer-equal-constant-time": "^1.0.1",
-        "ecdsa-sig-formatter": "1.0.11",
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "node_modules/jws": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz",
-      "integrity": "sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==",
-      "license": "MIT",
-      "dependencies": {
-        "jwa": "^1.4.1",
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "node_modules/lodash.includes": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
-      "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==",
-      "license": "MIT"
-    },
-    "node_modules/lodash.isboolean": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
-      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==",
-      "license": "MIT"
-    },
-    "node_modules/lodash.isinteger": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
-      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==",
-      "license": "MIT"
-    },
-    "node_modules/lodash.isnumber": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
-      "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==",
-      "license": "MIT"
-    },
-    "node_modules/lodash.isplainobject": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
-      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
-      "license": "MIT"
-    },
-    "node_modules/lodash.isstring": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
-      "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==",
-      "license": "MIT"
-    },
-    "node_modules/lodash.once": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
-      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
-      "license": "MIT"
-    },
-    "node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "license": "MIT"
-    },
-    "node_modules/safe-buffer": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/semver": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    }
-  }
-}

lambda/auth/package.json

@@ -1,17 +0,0 @@
-{
-  "name": "auth-api",
-  "version": "1.0.0",
-  "description": "Lambda function for authentication",
-  "main": "index.js",
-  "dependencies": {
-    "bcryptjs": "^2.4.3",
-    "jsonwebtoken": "^9.0.2"
-  },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "type": "commonjs"
-}

lambda/filaments/index.js

@@ -1,232 +0,0 @@
-const AWS = require('aws-sdk');
-const dynamodb = new AWS.DynamoDB.DocumentClient();
-const { v4: uuidv4 } = require('uuid');
-
-const TABLE_NAME = process.env.TABLE_NAME;
-
-// CORS headers
-const headers = {
-  'Content-Type': 'application/json',
-  'Access-Control-Allow-Origin': process.env.CORS_ORIGIN || '*',
-  'Access-Control-Allow-Headers': 'Content-Type,Authorization',
-  'Access-Control-Allow-Methods': 'GET,POST,PUT,DELETE,OPTIONS'
-};
-
-// Helper function to create response
-const createResponse = (statusCode, body) => ({
-  statusCode,
-  headers,
-  body: JSON.stringify(body)
-});
-
-// GET all filaments or filter by query params
-const getFilaments = async (event) => {
-  try {
-    const queryParams = event.queryStringParameters || {};
-    
-    let params = {
-      TableName: TABLE_NAME
-    };
-
-    // If filtering by brand, type, or status, use the appropriate index
-    if (queryParams.brand) {
-      params = {
-        ...params,
-        IndexName: 'brand-index',
-        KeyConditionExpression: 'brand = :brand',
-        ExpressionAttributeValues: {
-          ':brand': queryParams.brand
-        }
-      };
-      const result = await dynamodb.query(params).promise();
-      return createResponse(200, result.Items);
-    } else if (queryParams.tip) {
-      params = {
-        ...params,
-        IndexName: 'tip-index',
-        KeyConditionExpression: 'tip = :tip',
-        ExpressionAttributeValues: {
-          ':tip': queryParams.tip
-        }
-      };
-      const result = await dynamodb.query(params).promise();
-      return createResponse(200, result.Items);
-    } else if (queryParams.status) {
-      params = {
-        ...params,
-        IndexName: 'status-index',
-        KeyConditionExpression: 'status = :status',
-        ExpressionAttributeValues: {
-          ':status': queryParams.status
-        }
-      };
-      const result = await dynamodb.query(params).promise();
-      return createResponse(200, result.Items);
-    }
-
-    // Get all items
-    const result = await dynamodb.scan(params).promise();
-    return createResponse(200, result.Items);
-  } catch (error) {
-    console.error('Error getting filaments:', error);
-    return createResponse(500, { error: 'Failed to fetch filaments' });
-  }
-};
-
-// GET single filament by ID
-const getFilament = async (event) => {
-  try {
-    const { id } = event.pathParameters;
-    
-    const params = {
-      TableName: TABLE_NAME,
-      Key: { id }
-    };
-
-    const result = await dynamodb.get(params).promise();
-    
-    if (!result.Item) {
-      return createResponse(404, { error: 'Filament not found' });
-    }
-
-    return createResponse(200, result.Item);
-  } catch (error) {
-    console.error('Error getting filament:', error);
-    return createResponse(500, { error: 'Failed to fetch filament' });
-  }
-};
-
-// POST - Create new filament
-const createFilament = async (event) => {
-  try {
-    const body = JSON.parse(event.body);
-    const timestamp = new Date().toISOString();
-    
-    // Determine status based on vakum and otvoreno fields
-    let status = 'new';
-    if (body.otvoreno && body.otvoreno.toLowerCase().includes('otvorena')) {
-      status = 'opened';
-    } else if (body.refill && body.refill.toLowerCase() === 'da') {
-      status = 'refill';
-    }
-    
-    const item = {
-      id: uuidv4(),
-      ...body,
-      status,
-      createdAt: timestamp,
-      updatedAt: timestamp
-    };
-
-    const params = {
-      TableName: TABLE_NAME,
-      Item: item
-    };
-
-    await dynamodb.put(params).promise();
-    return createResponse(201, item);
-  } catch (error) {
-    console.error('Error creating filament:', error);
-    return createResponse(500, { error: 'Failed to create filament' });
-  }
-};
-
-// PUT - Update filament
-const updateFilament = async (event) => {
-  try {
-    const { id } = event.pathParameters;
-    const body = JSON.parse(event.body);
-    const timestamp = new Date().toISOString();
-    
-    // Determine status based on vakum and otvoreno fields
-    let status = 'new';
-    if (body.otvoreno && body.otvoreno.toLowerCase().includes('otvorena')) {
-      status = 'opened';
-    } else if (body.refill && body.refill.toLowerCase() === 'da') {
-      status = 'refill';
-    }
-
-    const params = {
-      TableName: TABLE_NAME,
-      Key: { id },
-      UpdateExpression: `SET 
-        brand = :brand,
-        tip = :tip,
-        finish = :finish,
-        boja = :boja,
-        refill = :refill,
-        vakum = :vakum,
-        otvoreno = :otvoreno,
-        kolicina = :kolicina,
-        cena = :cena,
-        #status = :status,
-        updatedAt = :updatedAt`,
-      ExpressionAttributeNames: {
-        '#status': 'status'
-      },
-      ExpressionAttributeValues: {
-        ':brand': body.brand,
-        ':tip': body.tip,
-        ':finish': body.finish,
-        ':boja': body.boja,
-        ':refill': body.refill,
-        ':vakum': body.vakum,
-        ':otvoreno': body.otvoreno,
-        ':kolicina': body.kolicina,
-        ':cena': body.cena,
-        ':status': status,
-        ':updatedAt': timestamp
-      },
-      ReturnValues: 'ALL_NEW'
-    };
-
-    const result = await dynamodb.update(params).promise();
-    return createResponse(200, result.Attributes);
-  } catch (error) {
-    console.error('Error updating filament:', error);
-    return createResponse(500, { error: 'Failed to update filament' });
-  }
-};
-
-// DELETE filament
-const deleteFilament = async (event) => {
-  try {
-    const { id } = event.pathParameters;
-    
-    const params = {
-      TableName: TABLE_NAME,
-      Key: { id }
-    };
-
-    await dynamodb.delete(params).promise();
-    return createResponse(200, { message: 'Filament deleted successfully' });
-  } catch (error) {
-    console.error('Error deleting filament:', error);
-    return createResponse(500, { error: 'Failed to delete filament' });
-  }
-};
-
-// Main handler
-exports.handler = async (event) => {
-  const { httpMethod, resource } = event;
-
-  // Handle CORS preflight
-  if (httpMethod === 'OPTIONS') {
-    return createResponse(200, {});
-  }
-
-  // Route requests
-  if (resource === '/filaments' && httpMethod === 'GET') {
-    return getFilaments(event);
-  } else if (resource === '/filaments' && httpMethod === 'POST') {
-    return createFilament(event);
-  } else if (resource === '/filaments/{id}' && httpMethod === 'GET') {
-    return getFilament(event);
-  } else if (resource === '/filaments/{id}' && httpMethod === 'PUT') {
-    return updateFilament(event);
-  } else if (resource === '/filaments/{id}' && httpMethod === 'DELETE') {
-    return deleteFilament(event);
-  }
-
-  return createResponse(404, { error: 'Not found' });
-};

lambda/filaments/package-lock.json

@@ -1,593 +0,0 @@
-{
-  "name": "filaments-api",
-  "version": "1.0.0",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "filaments-api",
-      "version": "1.0.0",
-      "license": "ISC",
-      "dependencies": {
-        "aws-sdk": "^2.1692.0",
-        "uuid": "^9.0.1"
-      }
-    },
-    "node_modules/available-typed-arrays": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
-      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
-      "license": "MIT",
-      "dependencies": {
-        "possible-typed-array-names": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/aws-sdk": {
-      "version": "2.1692.0",
-      "resolved": "https://registry.npmjs.org/aws-sdk/-/aws-sdk-2.1692.0.tgz",
-      "integrity": "sha512-x511uiJ/57FIsbgUe5csJ13k3uzu25uWQE+XqfBis/sB0SFoiElJWXRkgEAUh0U6n40eT3ay5Ue4oPkRMu1LYw==",
-      "hasInstallScript": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "buffer": "4.9.2",
-        "events": "1.1.1",
-        "ieee754": "1.1.13",
-        "jmespath": "0.16.0",
-        "querystring": "0.2.0",
-        "sax": "1.2.1",
-        "url": "0.10.3",
-        "util": "^0.12.4",
-        "uuid": "8.0.0",
-        "xml2js": "0.6.2"
-      },
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
-    "node_modules/aws-sdk/node_modules/uuid": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.0.0.tgz",
-      "integrity": "sha512-jOXGuXZAWdsTH7eZLtyXMqUb9EcWMGZNbL9YcGBJl4MH4nrxHmZJhEHvyLFrkxo+28uLb/NYRcStH48fnD0Vzw==",
-      "license": "MIT",
-      "bin": {
-        "uuid": "dist/bin/uuid"
-      }
-    },
-    "node_modules/base64-js": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
-      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/buffer": {
-      "version": "4.9.2",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz",
-      "integrity": "sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==",
-      "license": "MIT",
-      "dependencies": {
-        "base64-js": "^1.0.2",
-        "ieee754": "^1.1.4",
-        "isarray": "^1.0.0"
-      }
-    },
-    "node_modules/call-bind": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
-      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.0",
-        "es-define-property": "^1.0.0",
-        "get-intrinsic": "^1.2.4",
-        "set-function-length": "^1.2.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/call-bind-apply-helpers": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
-      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/call-bound": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
-      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.2",
-        "get-intrinsic": "^1.3.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/define-data-property": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
-      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
-      "license": "MIT",
-      "dependencies": {
-        "es-define-property": "^1.0.0",
-        "es-errors": "^1.3.0",
-        "gopd": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/dunder-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
-      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.1",
-        "es-errors": "^1.3.0",
-        "gopd": "^1.2.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-define-property": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
-      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-errors": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
-      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-object-atoms": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
-      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/events": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
-      "integrity": "sha512-kEcvvCBByWXGnZy6JUlgAp2gBIUjfCAV6P6TgT1/aaQKcmuAEC4OZTV1I4EWQLz2gxZw76atuVyvHhTxvi0Flw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.4.x"
-      }
-    },
-    "node_modules/for-each": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
-      "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
-      "license": "MIT",
-      "dependencies": {
-        "is-callable": "^1.2.7"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/function-bind": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
-      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/get-intrinsic": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
-      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.2",
-        "es-define-property": "^1.0.1",
-        "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.1.1",
-        "function-bind": "^1.1.2",
-        "get-proto": "^1.0.1",
-        "gopd": "^1.2.0",
-        "has-symbols": "^1.1.0",
-        "hasown": "^2.0.2",
-        "math-intrinsics": "^1.1.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/get-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
-      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
-      "license": "MIT",
-      "dependencies": {
-        "dunder-proto": "^1.0.1",
-        "es-object-atoms": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/gopd": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
-      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-property-descriptors": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
-      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
-      "license": "MIT",
-      "dependencies": {
-        "es-define-property": "^1.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-symbols": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
-      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-tostringtag": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
-      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
-      "license": "MIT",
-      "dependencies": {
-        "has-symbols": "^1.0.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/hasown": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
-      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "license": "MIT",
-      "dependencies": {
-        "function-bind": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/ieee754": {
-      "version": "1.1.13",
-      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
-      "integrity": "sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==",
-      "license": "BSD-3-Clause"
-    },
-    "node_modules/inherits": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "license": "ISC"
-    },
-    "node_modules/is-arguments": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.2.0.tgz",
-      "integrity": "sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bound": "^1.0.2",
-        "has-tostringtag": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-callable": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
-      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-generator-function": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz",
-      "integrity": "sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bound": "^1.0.3",
-        "get-proto": "^1.0.0",
-        "has-tostringtag": "^1.0.2",
-        "safe-regex-test": "^1.1.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-regex": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
-      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bound": "^1.0.2",
-        "gopd": "^1.2.0",
-        "has-tostringtag": "^1.0.2",
-        "hasown": "^2.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-typed-array": {
-      "version": "1.1.15",
-      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
-      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
-      "license": "MIT",
-      "dependencies": {
-        "which-typed-array": "^1.1.16"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
-      "license": "MIT"
-    },
-    "node_modules/jmespath": {
-      "version": "0.16.0",
-      "resolved": "https://registry.npmjs.org/jmespath/-/jmespath-0.16.0.tgz",
-      "integrity": "sha512-9FzQjJ7MATs1tSpnco1K6ayiYE3figslrXA72G2HQ/n76RzvYlofyi5QM+iX4YRs/pu3yzxlVQSST23+dMDknw==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">= 0.6.0"
-      }
-    },
-    "node_modules/math-intrinsics": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
-      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/possible-typed-array-names": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
-      "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/punycode": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-      "integrity": "sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw==",
-      "license": "MIT"
-    },
-    "node_modules/querystring": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
-      "integrity": "sha512-X/xY82scca2tau62i9mDyU9K+I+djTMUsvwf7xnUX5GLvVzgJybOJf4Y6o9Zx3oJK/LSXg5tTZBjwzqVPaPO2g==",
-      "deprecated": "The querystring API is considered Legacy. new code should use the URLSearchParams API instead.",
-      "engines": {
-        "node": ">=0.4.x"
-      }
-    },
-    "node_modules/safe-regex-test": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
-      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bound": "^1.0.2",
-        "es-errors": "^1.3.0",
-        "is-regex": "^1.2.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/sax": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.1.tgz",
-      "integrity": "sha512-8I2a3LovHTOpm7NV5yOyO8IHqgVsfK4+UuySrXU8YXkSRX7k6hCV9b3HrkKCr3nMpgj+0bmocaJJWpvp1oc7ZA==",
-      "license": "ISC"
-    },
-    "node_modules/set-function-length": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
-      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
-      "license": "MIT",
-      "dependencies": {
-        "define-data-property": "^1.1.4",
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.4",
-        "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/url": {
-      "version": "0.10.3",
-      "resolved": "https://registry.npmjs.org/url/-/url-0.10.3.tgz",
-      "integrity": "sha512-hzSUW2q06EqL1gKM/a+obYHLIO6ct2hwPuviqTTOcfFVc61UbfJ2Q32+uGL/HCPxKqrdGB5QUwIe7UqlDgwsOQ==",
-      "license": "MIT",
-      "dependencies": {
-        "punycode": "1.3.2",
-        "querystring": "0.2.0"
-      }
-    },
-    "node_modules/util": {
-      "version": "0.12.5",
-      "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
-      "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
-      "license": "MIT",
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "is-arguments": "^1.0.4",
-        "is-generator-function": "^1.0.7",
-        "is-typed-array": "^1.1.3",
-        "which-typed-array": "^1.1.2"
-      }
-    },
-    "node_modules/uuid": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
-      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
-      "funding": [
-        "https://github.com/sponsors/broofa",
-        "https://github.com/sponsors/ctavan"
-      ],
-      "license": "MIT",
-      "bin": {
-        "uuid": "dist/bin/uuid"
-      }
-    },
-    "node_modules/which-typed-array": {
-      "version": "1.1.19",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.19.tgz",
-      "integrity": "sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==",
-      "license": "MIT",
-      "dependencies": {
-        "available-typed-arrays": "^1.0.7",
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.4",
-        "for-each": "^0.3.5",
-        "get-proto": "^1.0.1",
-        "gopd": "^1.2.0",
-        "has-tostringtag": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/xml2js": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.6.2.tgz",
-      "integrity": "sha512-T4rieHaC1EXcES0Kxxj4JWgaUQHDk+qwHcYOCFHfiwKz7tOVPLq7Hjq9dM1WCMhylqMEfP7hMcOIChvotiZegA==",
-      "license": "MIT",
-      "dependencies": {
-        "sax": ">=0.6.0",
-        "xmlbuilder": "~11.0.0"
-      },
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
-    "node_modules/xmlbuilder": {
-      "version": "11.0.1",
-      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
-      "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4.0"
-      }
-    }
-  }
-}

lambda/filaments/package.json

@@ -1,17 +0,0 @@
-{
-  "name": "filaments-api",
-  "version": "1.0.0",
-  "description": "Lambda function for filaments CRUD operations",
-  "main": "index.js",
-  "dependencies": {
-    "aws-sdk": "^2.1692.0",
-    "uuid": "^9.0.1"
-  },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "type": "commonjs"
-}

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.js

@@ -2,6 +2,9 @@
 const nextConfig = {
   reactStrictMode: true,
   output: 'export',
+  images: {
+    unoptimized: true,
+  },
 }
 
 module.exports = nextConfig

package.json

@@ -3,13 +3,13 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "./scripts/kill-dev.sh && next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "eslint . --ext .ts,.tsx --ignore-path .gitignore",
     "test": "jest",
     "test:watch": "jest --watch",
-    "security:check": "node scripts/security-check.js",
+    "security:check": "node scripts/security/security-check.js",
     "test:build": "node scripts/test-build.js",
     "prepare": "husky",
     "migrate": "cd scripts && npm install && npm run migrate",
@@ -20,30 +20,32 @@
     "axios": "^1.6.2",
     "bcryptjs": "^3.0.2",
     "cheerio": "^1.1.0",
-    "next": "^15.3.4",
+    "next": "^16.1.6",
-    "react": "^19.1.0",
+    "pg": "^8.16.2",
-    "react-dom": "^19.1.0"
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "recharts": "^3.7.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",
-    "@types/react": "^18.2.43",
+    "@types/react": "^19.2.14",
-    "@types/react-dom": "^18.2.17",
+    "@types/react-dom": "^19.2.3",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "autoprefixer": "^10.4.16",
+    "autoprefixer": "^10.4.24",
     "eslint": "^8.55.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "husky": "^9.1.7",
     "jest": "^30.0.0",
     "jest-environment-jsdom": "^30.0.0",
-    "postcss": "^8.4.32",
+    "postcss": "^8.5.6",
     "tailwindcss": "^3.3.0",
-    "tsx": "^4.20.3",
+    "tsx": "^4.21.0",
-    "typescript": "^5.2.2",
+    "typescript": "^5.9.3",
     "vite": "^5.0.8"
   }
 }

public/data.json

@@ -1,167 +0,0 @@
-[
-  {
-    "brand": "Bambu Lab",
-    "tip": "PLA",
-    "finish": "Basic",
-    "boja": "Lavender Purple",
-    "refill": "",
-    "vakum": "u vakuumu",
-    "otvoreno": "",
-    "kolicina": "1kg",
-    "cena": "2500"
-  },
-  {
-    "brand": "Bambu Lab",
-    "tip": "PLA",
-    "finish": "Matte",
-    "boja": "Charcoal Black",
-    "refill": "",
-    "vakum": "",
-    "otvoreno": "otvorena",
-    "kolicina": "0.8kg",
-    "cena": "2800"
-  },
-  {
-    "brand": "Bambu Lab",
-    "tip": "PETG",
-    "finish": "Basic",
-    "boja": "Transparent",
-    "refill": "Da",
-    "vakum": "u vakuumu",
-    "otvoreno": "",
-    "kolicina": "1kg",
-    "cena": "3200"
-  },
-  {
-    "brand": "Azure Film",
-    "tip": "PLA",
-    "finish": "Basic",
-    "boja": "White",
-    "refill": "",
-    "vakum": "u vakuumu",
-    "otvoreno": "",
-    "kolicina": "1kg",
-    "cena": "2200"
-  },
-  {
-    "brand": "Azure Film",
-    "tip": "PETG",
-    "finish": "Basic",
-    "boja": "Orange",
-    "refill": "",
-    "vakum": "",
-    "otvoreno": "otvorena",
-    "kolicina": "0.5kg",
-    "cena": "2600"
-  },
-  {
-    "brand": "Bambu Lab",
-    "tip": "Silk PLA",
-    "finish": "Silk",
-    "boja": "Gold",
-    "refill": "Da",
-    "vakum": "",
-    "otvoreno": "",
-    "kolicina": "0.5kg",
-    "cena": "3500"
-  },
-  {
-    "brand": "Bambu Lab",
-    "tip": "PLA Matte",
-    "finish": "Matte",
-    "boja": "Forest Green",
-    "refill": "",
-    "vakum": "u vakuumu",
-    "otvoreno": "",
-    "kolicina": "1kg",
-    "cena": "2800"
-  },
-  {
-    "brand": "PanaChroma",
-    "tip": "PLA",
-    "finish": "Basic",
-    "boja": "Red",
-    "refill": "",
-    "vakum": "u vakuumu",
-    "otvoreno": "",
-    "kolicina": "1kg",
-    "cena": "2300"
-  },
-  {
-    "brand": "PanaChroma",
-    "tip": "PETG",
-    "finish": "Basic",
-    "boja": "Blue",
-    "refill": "",
-    "vakum": "",
-    "otvoreno": "otvorena",
-    "kolicina": "0.75kg",
-    "cena": "2700"
-  },
-  {
-    "brand": "Fiberlogy",
-    "tip": "PLA",
-    "finish": "Basic",
-    "boja": "Gray",
-    "refill": "",
-    "vakum": "u vakuumu",
-    "otvoreno": "",
-    "kolicina": "0.85kg",
-    "cena": "2400"
-  },
-  {
-    "brand": "Fiberlogy",
-    "tip": "ABS",
-    "finish": "Basic",
-    "boja": "Black",
-    "refill": "",
-    "vakum": "",
-    "otvoreno": "",
-    "kolicina": "1kg",
-    "cena": "2900"
-  },
-  {
-    "brand": "Fiberlogy",
-    "tip": "TPU",
-    "finish": "Basic",
-    "boja": "Lime Green",
-    "refill": "",
-    "vakum": "",
-    "otvoreno": "otvorena",
-    "kolicina": "0.3kg",
-    "cena": "4500"
-  },
-  {
-    "brand": "Azure Film",
-    "tip": "PLA",
-    "finish": "Silk",
-    "boja": "Silver",
-    "refill": "Da",
-    "vakum": "u vakuumu",
-    "otvoreno": "",
-    "kolicina": "1kg",
-    "cena": "2800"
-  },
-  {
-    "brand": "Bambu Lab",
-    "tip": "PLA",
-    "finish": "Basic",
-    "boja": "Jade White",
-    "refill": "",
-    "vakum": "",
-    "otvoreno": "otvorena",
-    "kolicina": "0.5kg",
-    "cena": "2500"
-  },
-  {
-    "brand": "PanaChroma",
-    "tip": "Silk PLA",
-    "finish": "Silk",
-    "boja": "Copper",
-    "refill": "",
-    "vakum": "u vakuumu",
-    "otvoreno": "",
-    "kolicina": "1kg",
-    "cena": "3200"
-  }
-]

scripts/README.md

@@ -1,84 +0,0 @@
-# Data Migration Scripts
-
-This directory contains scripts for migrating filament data from Confluence to DynamoDB.
-
-## Prerequisites
-
-1. AWS credentials configured (either via AWS CLI or environment variables)
-2. DynamoDB table created via Terraform
-3. Confluence API credentials (if migrating from Confluence)
-
-## Setup
-
-```bash
-cd scripts
-npm install
-```
-
-## Configuration
-
-Create a `.env.local` file in the project root with:
-
-```env
-# AWS Configuration
-AWS_REGION=eu-central-1
-DYNAMODB_TABLE_NAME=filamenteka-filaments
-
-# Confluence Configuration (optional)
-CONFLUENCE_API_URL=https://your-domain.atlassian.net
-CONFLUENCE_TOKEN=your-email:your-api-token
-CONFLUENCE_PAGE_ID=your-page-id
-```
-
-## Usage
-
-### Migrate from local data (data.json)
-
-```bash
-npm run migrate
-```
-
-### Clear existing data and migrate
-
-```bash
-npm run migrate:clear
-```
-
-### Manual execution
-
-```bash
-# Migrate without clearing
-node migrate-with-parser.js
-
-# Clear existing data first
-node migrate-with-parser.js --clear
-```
-
-## What the script does
-
-1. **Checks for Confluence credentials**
-   - If found: Fetches data from Confluence page
-   - If not found: Uses local `public/data.json` file
-
-2. **Parses the data**
-   - Extracts filament information from HTML table (Confluence)
-   - Or reads JSON directly (local file)
-
-3. **Prepares data for DynamoDB**
-   - Generates unique IDs for each filament
-   - Adds timestamps (createdAt, updatedAt)
-
-4. **Writes to DynamoDB**
-   - Writes in batches of 25 items (DynamoDB limit)
-   - Shows progress during migration
-
-5. **Verifies the migration**
-   - Counts total items in DynamoDB
-   - Shows a sample item for verification
-
-## Troubleshooting
-
-- **Table not found**: Make sure you've run `terraform apply` first
-- **Access denied**: Check your AWS credentials and permissions
-- **Confluence errors**: Verify your API token and page ID
-- **Empty migration**: Check that the Confluence page has a table with the expected format

scripts/add-basic-refills.sh

@@ -0,0 +1,74 @@
+#!/bin/bash
+# Script to add 1 refill for each color in the database
+# Run this on the API server or container with database access
+
+# Create temporary Node.js script
+cat > /tmp/add-refills.js << 'EOF'
+const { Pool } = require('pg');
+
+const pool = new Pool({
+  connectionString: process.env.DATABASE_URL,
+  ssl: process.env.DATABASE_URL?.includes('amazonaws.com') ? { rejectUnauthorized: false } : false
+});
+
+async function addRefills() {
+  try {
+    console.log('Adding 1 refill for each color as PLA Basic filaments...\n');
+    
+    // First, get all colors
+    const colorsResult = await pool.query('SELECT name, hex FROM colors ORDER BY name');
+    console.log(`Found ${colorsResult.rows.length} colors in database\n`);
+    
+    let inserted = 0;
+    let updated = 0;
+    
+    for (const color of colorsResult.rows) {
+      // Check if PLA Basic already exists for this color
+      const existing = await pool.query(
+        'SELECT id, refill FROM filaments WHERE tip = $1 AND finish = $2 AND boja = $3',
+        ['PLA', 'Basic', color.name]
+      );
+      
+      if (existing.rows.length === 0) {
+        // Insert new filament
+        await pool.query(
+          `INSERT INTO filaments (tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina, cena) 
+           VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9)`,
+          ['PLA', 'Basic', color.name, color.hex, '1', '0 vakuum', '0 otvorena', 1, '3999']
+        );
+        console.log(`✓ Added PLA Basic ${color.name}`);
+        inserted++;
+      } else if (!existing.rows[0].refill || existing.rows[0].refill === '0') {
+        // Update existing to have 1 refill
+        await pool.query(
+          'UPDATE filaments SET refill = $1 WHERE id = $2',
+          ['1', existing.rows[0].id]
+        );
+        console.log(`✓ Updated PLA Basic ${color.name} to have 1 refill`);
+        updated++;
+      } else {
+        console.log(`- PLA Basic ${color.name} already has ${existing.rows[0].refill} refill(s)`);
+      }
+    }
+    
+    console.log(`\nSummary:`);
+    console.log(`- Inserted ${inserted} new PLA Basic filaments`);
+    console.log(`- Updated ${updated} existing filaments to have 1 refill`);
+    console.log(`- Total colors processed: ${colorsResult.rows.length}`);
+    
+    await pool.end();
+    process.exit(0);
+  } catch (error) {
+    console.error('Error:', error);
+    process.exit(1);
+  }
+}
+
+addRefills();
+EOF
+
+# Run the script
+cd /app && node /tmp/add-refills.js
+
+# Clean up
+rm /tmp/add-refills.js

scripts/add-missing-colors.js

@@ -0,0 +1,92 @@
+const { Pool } = require('pg');
+
+const connectionString = "postgresql://filamenteka_admin:onrBjiAjHKQXBAJSVWU2t2kQ7HDil9re@filamenteka.ci7fsdlbzmag.eu-central-1.rds.amazonaws.com:5432/filamenteka";
+
+const pool = new Pool({
+  connectionString,
+  ssl: { rejectUnauthorized: false }
+});
+
+const missingColors = [
+  // PLA Matte - New colors with correct hex codes
+  { name: "Matte Dark Chocolate", hex: "#4A3729", cena_refill: 3499, cena_spulna: 3999 },
+  { name: "Matte Dark Brown", hex: "#7D6556", cena_refill: 3499, cena_spulna: 3999 },
+  { name: "Matte Terracotta", hex: "#A25A37", cena_refill: 3499, cena_spulna: 3999 },
+  { name: "Matte Caramel", hex: "#A4845C", cena_refill: 3499, cena_spulna: 3999 },
+  { name: "Matte Dark Blue", hex: "#042F56", cena_refill: 3499, cena_spulna: 3999 },
+  { name: "Matte Sky Blue", hex: "#73B2E5", cena_refill: 3499, cena_spulna: 3999 },
+  { name: "Matte Ice Blue", hex: "#A3D8E1", cena_refill: 3499, cena_spulna: 3999 },
+  { name: "Matte Dark Green", hex: "#68724D", cena_refill: 3499, cena_spulna: 3999 },
+  { name: "Matte Grass Green", hex: "#61C680", cena_refill: 3499, cena_spulna: 3999 },
+  { name: "Matte Apple Green", hex: "#C6E188", cena_refill: 3499, cena_spulna: 3999 },
+  { name: "Matte Dark Red", hex: "#BB3D43", cena_refill: 3499, cena_spulna: 3999 },
+  { name: "Matte Plum", hex: "#851A52", cena_refill: 3499, cena_spulna: 3999 },
+  { name: "Matte Lilac Purple", hex: "#AE96D4", cena_refill: 3499, cena_spulna: 3999 },
+  { name: "Matte Sakura Pink", hex: "#E8AFCF", cena_refill: 3499, cena_spulna: 3999 },
+  { name: "Matte Lemon Yellow", hex: "#F7D959", cena_refill: 3499, cena_spulna: 3999 },
+  { name: "Matte Bone White", hex: "#C8C5B6", cena_refill: 3499, cena_spulna: 3999 },
+
+  // PLA Wood colors
+  { name: "Ochre Yellow", hex: "#BC8B39", cena_refill: 3499, cena_spulna: 3999 },
+  { name: "White Oak", hex: "#D2CCA2", cena_refill: 3499, cena_spulna: 3999 },
+  { name: "Clay Brown", hex: "#8E621A", cena_refill: 3499, cena_spulna: 3999 }
+];
+
+async function addMissingColors() {
+  try {
+    console.log('🎨 Adding missing colors to database...\n');
+
+    let added = 0;
+    let updated = 0;
+    let skipped = 0;
+
+    for (const color of missingColors) {
+      try {
+        // Check if color already exists
+        const existingColor = await pool.query(
+          'SELECT * FROM colors WHERE name = $1',
+          [color.name]
+        );
+
+        if (existingColor.rows.length > 0) {
+          // Update existing color with correct hex code
+          const existing = existingColor.rows[0];
+          if (existing.hex !== color.hex) {
+            await pool.query(
+              'UPDATE colors SET hex = $1, cena_refill = $2, cena_spulna = $3 WHERE name = $4',
+              [color.hex, color.cena_refill, color.cena_spulna, color.name]
+            );
+            console.log(`✅ Updated: ${color.name} (${existing.hex} → ${color.hex})`);
+            updated++;
+          } else {
+            console.log(`⏭️  Skipped: ${color.name} (already exists with correct hex)`);
+            skipped++;
+          }
+        } else {
+          // Insert new color
+          await pool.query(
+            'INSERT INTO colors (name, hex, cena_refill, cena_spulna) VALUES ($1, $2, $3, $4)',
+            [color.name, color.hex, color.cena_refill, color.cena_spulna]
+          );
+          console.log(`✅ Added: ${color.name} (${color.hex})`);
+          added++;
+        }
+      } catch (error) {
+        console.error(`❌ Error with ${color.name}:`, error.message);
+      }
+    }
+
+    console.log(`\n📊 Summary:`);
+    console.log(`   Added: ${added}`);
+    console.log(`   Updated: ${updated}`);
+    console.log(`   Skipped: ${skipped}`);
+    console.log(`   Total: ${missingColors.length}`);
+
+  } catch (error) {
+    console.error('❌ Failed to add colors:', error.message);
+  } finally {
+    await pool.end();
+  }
+}
+
+addMissingColors();

scripts/add-pla-basic-colors.sh

@@ -0,0 +1,51 @@
+#!/bin/bash
+
+# Script to add specific PLA Basic colors to production database
+
+echo "🎨 Adding PLA Basic colors to production database..."
+
+# Get the RDS endpoint from terraform output
+DB_HOST=$(cat terraform-outputs.json | grep -A1 "rds_endpoint" | grep "value" | cut -d'"' -f4 | cut -d':' -f1)
+
+if [ -z "$DB_HOST" ]; then
+    echo "❌ Could not find RDS endpoint in terraform-outputs.json"
+    exit 1
+fi
+
+echo "📍 Database host: $DB_HOST"
+
+# Execute the migration
+echo "🚀 Running migration..."
+aws ssm send-command \
+    --document-name "AWS-RunShellScript" \
+    --targets "Key=tag:Name,Values=filamenteka-api-instance" \
+    --parameters commands="[\"PGPASSWORD=\$DB_PASSWORD psql -h $DB_HOST -U filamenteka -d filamenteka -f /tmp/add_pla_colors.sql\"]" \
+    --region eu-central-1 \
+    --query "Command.CommandId" \
+    --output text > /tmp/command-id.txt
+
+COMMAND_ID=$(cat /tmp/command-id.txt)
+echo "⏳ Command ID: $COMMAND_ID"
+
+# Wait for command to complete
+echo "⏳ Waiting for migration to complete..."
+sleep 5
+
+# Check command status
+aws ssm get-command-invocation \
+    --command-id "$COMMAND_ID" \
+    --instance-id $(aws ec2 describe-instances --filters "Name=tag:Name,Values=filamenteka-api-instance" --query "Reservations[0].Instances[0].InstanceId" --output text --region eu-central-1) \
+    --region eu-central-1 \
+    --query "Status" \
+    --output text
+
+echo "✅ Migration completed!"
+echo ""
+echo "📝 Summary of changes:"
+echo "- Added 30 specific PLA Basic colors"
+echo "- Each color has 1 refill AND 1 spool (total quantity: 2)"
+echo "- Price set to 3499/3999 RSD"
+echo "- Zeroed out ALL other filaments (they won't show in the table)"
+
+# Cleanup
+rm -f /tmp/command-id.txt

scripts/check-db.js

@@ -0,0 +1,62 @@
+const { Pool } = require('pg');
+
+const connectionString = "postgresql://filamenteka_admin:onrBjiAjHKQXBAJSVWU2t2kQ7HDil9re@filamenteka.ci7fsdlbzmag.eu-central-1.rds.amazonaws.com:5432/filamenteka";
+
+const pool = new Pool({
+  connectionString,
+  ssl: { rejectUnauthorized: false }
+});
+
+async function checkDatabase() {
+  try {
+    console.log('🔍 Checking database schema...\n');
+    
+    // Check columns
+    const columnsResult = await pool.query(`
+      SELECT column_name, data_type, is_nullable, column_default
+      FROM information_schema.columns 
+      WHERE table_name = 'filaments' 
+      ORDER BY ordinal_position
+    `);
+    
+    console.log('Filaments table columns:');
+    console.table(columnsResult.rows);
+    
+    // Check if brand column exists
+    const brandExists = columnsResult.rows.some(col => col.column_name === 'brand');
+    console.log(`\n✅ Brand column exists: ${brandExists}`);
+    
+    // Get sample data
+    const sampleResult = await pool.query('SELECT * FROM filaments LIMIT 1');
+    console.log('\nSample filament data:');
+    console.log(sampleResult.rows[0] || 'No data in table');
+    
+    // Test insert without brand
+    console.log('\n🧪 Testing INSERT without brand field...');
+    try {
+      const testInsert = await pool.query(`
+        INSERT INTO filaments (tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina, cena)
+        VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9)
+        RETURNING *
+      `, ['TEST_PLA', 'Basic', 'Test Color', '#FF0000', 'Ne', 'Ne', 'Ne', '1', '3999']);
+      
+      console.log('✅ INSERT successful! Created filament:');
+      console.log(testInsert.rows[0]);
+      
+      // Clean up test data
+      await pool.query('DELETE FROM filaments WHERE id = $1', [testInsert.rows[0].id]);
+      console.log('🧹 Test data cleaned up');
+      
+    } catch (insertError) {
+      console.log('❌ INSERT failed:', insertError.message);
+      console.log('This means the database still expects the brand column!');
+    }
+    
+  } catch (error) {
+    console.error('Database check failed:', error.message);
+  } finally {
+    await pool.end();
+  }
+}
+
+checkDatabase();

scripts/deploy-api-update.sh

@@ -0,0 +1,39 @@
+#!/bin/bash
+
+echo "Deploying API update to EC2 instance..."
+
+# Get instance ID
+INSTANCE_ID="i-03956ecf32292d7d9"
+
+# Create update script
+cat > /tmp/update-api.sh << 'EOF'
+#!/bin/bash
+cd /home/ubuntu/filamenteka-api
+
+# Backup current server.js
+cp server.js server.js.backup
+
+# Download the updated server.js from Gitea
+curl -o server.js https://git.demirix.dev/dax/Filamenteka/raw/branch/main/api/server.js
+
+# Restart the service
+sudo systemctl restart node-api
+
+echo "API server updated and restarted"
+EOF
+
+# Send command to EC2 instance
+aws ssm send-command \
+    --region eu-central-1 \
+    --instance-ids "$INSTANCE_ID" \
+    --document-name "AWS-RunShellScript" \
+    --parameters "commands=[
+        'cd /home/ubuntu/filamenteka-api',
+        'cp server.js server.js.backup',
+        'curl -o server.js https://git.demirix.dev/dax/Filamenteka/raw/branch/main/api/server.js',
+        'sudo systemctl restart node-api',
+        'sudo systemctl status node-api'
+    ]" \
+    --output json
+
+echo "Command sent. Check AWS Systems Manager for execution status."

scripts/deploy-api.sh

@@ -0,0 +1,39 @@
+#!/bin/bash
+
+# Simple deployment script for API server
+# This updates the API server code on EC2
+
+API_SERVER_IP="3.71.161.51"
+API_SERVER_URL="https://api.filamenteka.rs"
+
+echo "🚀 Deploying API server updates..."
+
+# Create a temporary deployment package
+echo "📦 Creating deployment package..."
+mkdir -p tmp-deploy
+cp -r api/* tmp-deploy/
+cp package.json tmp-deploy/
+cp package-lock.json tmp-deploy/
+
+# Create tarball
+tar -czf api-deploy.tar.gz -C tmp-deploy .
+rm -rf tmp-deploy
+
+echo "📤 Package created: api-deploy.tar.gz"
+echo ""
+echo "⚠️  Manual deployment required:"
+echo "1. Copy api-deploy.tar.gz to your server"
+echo "2. SSH into the server at $API_SERVER_IP"
+echo "3. Extract and restart the API service:"
+echo "   tar -xzf api-deploy.tar.gz"
+echo "   npm install --production"
+echo "   sudo systemctl restart node-api"
+echo ""
+echo "4. Run database migration if needed:"
+echo "   psql -U filamenteka_admin -d filamenteka < database/migrations/004_remove_brand_column.sql"
+
+# Cleanup
+rm -f api-deploy.tar.gz
+
+echo ""
+echo "✅ Deployment package instructions complete!"

scripts/deploy-frontend.sh

@@ -0,0 +1,97 @@
+#!/bin/bash
+
+# Frontend deployment script for CloudFront + S3
+# This script builds the Next.js app and deploys it to S3 + CloudFront
+
+set -e
+
+echo "🚀 Starting frontend deployment..."
+
+# Colors for output
+GREEN='\033[0;32m'
+BLUE='\033[0;34m'
+RED='\033[0;31m'
+NC='\033[0m' # No Color
+
+# Configuration
+S3_BUCKET="filamenteka-frontend"
+REGION="eu-central-1"
+
+# Get CloudFront distribution ID from terraform output
+echo -e "${BLUE}📋 Getting CloudFront distribution ID...${NC}"
+DISTRIBUTION_ID=$(terraform -chdir=terraform output -raw cloudfront_distribution_id 2>/dev/null || terraform output -raw cloudfront_distribution_id)
+
+if [ -z "$DISTRIBUTION_ID" ]; then
+    echo -e "${RED}❌ Could not get CloudFront distribution ID${NC}"
+    exit 1
+fi
+
+echo -e "${GREEN}✓ Distribution ID: $DISTRIBUTION_ID${NC}"
+
+# Build the Next.js app
+echo -e "${BLUE}🔨 Building Next.js app...${NC}"
+npm run build
+
+if [ ! -d "out" ]; then
+    echo -e "${RED}❌ Build failed - 'out' directory not found${NC}"
+    exit 1
+fi
+
+echo -e "${GREEN}✓ Build completed${NC}"
+
+# Upload to S3 with proper cache headers
+echo -e "${BLUE}📤 Uploading to S3 with optimized cache headers...${NC}"
+
+# First, delete old files
+echo -e "${BLUE}  🗑️  Cleaning old files...${NC}"
+aws s3 sync out/ s3://$S3_BUCKET/ \
+  --region $REGION \
+  --delete \
+  --exclude "*"
+
+# Upload HTML files with no-cache (always revalidate)
+echo -e "${BLUE}  📄 Uploading HTML files (no-cache)...${NC}"
+aws s3 sync out/ s3://$S3_BUCKET/ \
+  --region $REGION \
+  --exclude "*" \
+  --include "*.html" \
+  --cache-control "public, max-age=0, must-revalidate" \
+  --content-type "text/html"
+
+# Upload _next static assets with long-term cache (immutable, 1 year)
+echo -e "${BLUE}  🎨 Uploading Next.js static assets (1 year cache)...${NC}"
+aws s3 sync out/_next/ s3://$S3_BUCKET/_next/ \
+  --region $REGION \
+  --cache-control "public, max-age=31536000, immutable"
+
+# Upload other static assets with moderate cache (1 day)
+echo -e "${BLUE}  📦 Uploading other assets (1 day cache)...${NC}"
+aws s3 sync out/ s3://$S3_BUCKET/ \
+  --region $REGION \
+  --exclude "*" \
+  --exclude "*.html" \
+  --exclude "_next/*" \
+  --include "*" \
+  --cache-control "public, max-age=86400"
+
+echo -e "${GREEN}✓ All files uploaded to S3 with optimized cache headers${NC}"
+
+# Invalidate CloudFront cache
+echo -e "${BLUE}🔄 Invalidating CloudFront cache...${NC}"
+INVALIDATION_ID=$(aws cloudfront create-invalidation \
+  --distribution-id $DISTRIBUTION_ID \
+  --paths "/*" \
+  --query 'Invalidation.Id' \
+  --output text)
+
+echo -e "${GREEN}✓ CloudFront invalidation created: $INVALIDATION_ID${NC}"
+
+# Get CloudFront URL
+CF_URL=$(terraform -chdir=terraform output -raw cloudfront_domain_name 2>/dev/null || terraform output -raw cloudfront_domain_name)
+
+echo ""
+echo -e "${GREEN}✅ Deployment complete!${NC}"
+echo -e "${BLUE}🌐 CloudFront URL: https://$CF_URL${NC}"
+echo -e "${BLUE}🌐 Custom Domain: https://filamenteka.rs (after DNS update)${NC}"
+echo ""
+echo -e "${BLUE}ℹ️  Note: CloudFront cache invalidation may take 5-10 minutes to propagate globally.${NC}"

scripts/fetch-data.js

@@ -1,36 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const { fetchFromConfluence } = require('../src/server/confluence.ts');
-
-async function fetchData() {
-  console.log('Fetching data from Confluence...');
-  
-  const env = {
-    CONFLUENCE_API_URL: process.env.CONFLUENCE_API_URL,
-    CONFLUENCE_TOKEN: process.env.CONFLUENCE_TOKEN,
-    CONFLUENCE_PAGE_ID: process.env.CONFLUENCE_PAGE_ID
-  };
-
-  try {
-    const data = await fetchFromConfluence(env);
-    
-    // Create public directory if it doesn't exist
-    const publicDir = path.join(__dirname, '..', 'public');
-    if (!fs.existsSync(publicDir)) {
-      fs.mkdirSync(publicDir, { recursive: true });
-    }
-    
-    // Write data to public directory
-    fs.writeFileSync(
-      path.join(publicDir, 'data.json'),
-      JSON.stringify(data, null, 2)
-    );
-    
-    console.log(`✅ Fetched ${data.length} filaments`);
-  } catch (error) {
-    console.error('❌ Failed to fetch data:', error.message);
-    process.exit(1);
-  }
-}
-
-fetchData();

scripts/fix-refill-only-colors.sh

@@ -0,0 +1,66 @@
+#!/bin/bash
+
+# Script to fix refill-only colors that incorrectly have spool availability
+# These colors should have spulna = 0 (no regular spools available)
+
+echo "🔧 Fixing refill-only colors to have 0 spools..."
+
+# Colors that should be refill-only
+REFILL_ONLY_COLORS=(
+    "Nardo Gray"
+    "Blue Grey"
+    "Light Gray"
+    "Brown"
+    "Beige"
+    "Bronze"
+    "Purple"
+    "Cobalt Blue"
+    "Turquoise"
+    "Bright Green"
+    "Yellow"
+    "Gold"
+    "Orange"
+    "Maroon Red"
+)
+
+# Database connection details
+DB_HOST="filamenteka.ci7fsdlbzmag.eu-central-1.rds.amazonaws.com"
+DB_NAME="filamenteka"
+DB_USER="filamenteka_admin"
+DB_PASSWORD="onrBjiAjHKQXBAJSVWU2t2kQ7HDil9re"
+
+echo "📊 Current status of refill-only colors:"
+PGPASSWORD=$DB_PASSWORD psql -h $DB_HOST -U $DB_USER -d $DB_NAME -c "
+SELECT boja, refill, spulna, kolicina 
+FROM filaments 
+WHERE tip = 'PLA' 
+AND finish = 'Basic'
+AND boja IN (
+    'Nardo Gray', 'Blue Grey', 'Light Gray', 'Brown', 'Beige',
+    'Bronze', 'Purple', 'Cobalt Blue', 'Turquoise', 'Bright Green',
+    'Yellow', 'Gold', 'Orange', 'Maroon Red'
+)
+ORDER BY boja;"
+
+echo ""
+echo "🔄 Applying fix..."
+
+# Apply the migration
+PGPASSWORD=$DB_PASSWORD psql -h $DB_HOST -U $DB_USER -d $DB_NAME < database/migrations/015_fix_refill_only_colors.sql
+
+echo ""
+echo "✅ Fix applied! New status:"
+PGPASSWORD=$DB_PASSWORD psql -h $DB_HOST -U $DB_USER -d $DB_NAME -c "
+SELECT boja, refill, spulna, kolicina 
+FROM filaments 
+WHERE tip = 'PLA' 
+AND finish = 'Basic'
+AND boja IN (
+    'Nardo Gray', 'Blue Grey', 'Light Gray', 'Brown', 'Beige',
+    'Bronze', 'Purple', 'Cobalt Blue', 'Turquoise', 'Bright Green',
+    'Yellow', 'Gold', 'Orange', 'Maroon Red'
+)
+ORDER BY boja;"
+
+echo ""
+echo "🎉 Refill-only colors have been fixed!"

scripts/kill-dev.sh

@@ -0,0 +1,26 @@
+#!/bin/bash
+
+# Kill any processes running on ports 3000 and 3001
+echo "🔍 Checking for processes on ports 3000 and 3001..."
+PIDS=$(lsof -ti:3000,3001 2>/dev/null)
+if [ -n "$PIDS" ]; then
+  echo "$PIDS" | xargs kill -9 2>/dev/null
+  echo "✅ Killed processes on ports 3000/3001"
+else
+  echo "ℹ️  No processes found on ports 3000/3001"
+fi
+
+# Kill any old Next.js dev server processes (but not the current script)
+echo "🔍 Checking for Next.js dev processes..."
+OLD_PIDS=$(ps aux | grep -i "next dev" | grep -v grep | grep -v "kill-dev.sh" | awk '{print $2}')
+if [ -n "$OLD_PIDS" ]; then
+  echo "$OLD_PIDS" | xargs kill -9 2>/dev/null
+  echo "✅ Killed Next.js dev processes"
+else
+  echo "ℹ️  No Next.js dev processes found"
+fi
+
+# Give it a moment to clean up
+sleep 0.5
+
+echo "✨ Ready to start fresh dev server!"

scripts/migrate-confluence-to-dynamo.js

@@ -1,194 +0,0 @@
-#!/usr/bin/env node
-
-require('dotenv').config({ path: '.env.local' });
-const axios = require('axios');
-const AWS = require('aws-sdk');
-const { v4: uuidv4 } = require('uuid');
-
-// Configure AWS
-AWS.config.update({
-  region: process.env.AWS_REGION || 'eu-central-1'
-});
-
-const dynamodb = new AWS.DynamoDB.DocumentClient();
-const TABLE_NAME = process.env.DYNAMODB_TABLE_NAME || 'filamenteka-filaments';
-
-// Confluence configuration
-const CONFLUENCE_API_URL = process.env.CONFLUENCE_API_URL;
-const CONFLUENCE_TOKEN = process.env.CONFLUENCE_TOKEN;
-const CONFLUENCE_PAGE_ID = process.env.CONFLUENCE_PAGE_ID;
-
-async function fetchConfluenceData() {
-  try {
-    console.log('Fetching data from Confluence...');
-    
-    const response = await axios.get(
-      `${CONFLUENCE_API_URL}/wiki/rest/api/content/${CONFLUENCE_PAGE_ID}?expand=body.storage`,
-      {
-        headers: {
-          'Authorization': `Basic ${Buffer.from(CONFLUENCE_TOKEN).toString('base64')}`,
-          'Accept': 'application/json'
-        }
-      }
-    );
-
-    const htmlContent = response.data.body.storage.value;
-    return parseConfluenceTable(htmlContent);
-  } catch (error) {
-    console.error('Error fetching from Confluence:', error.message);
-    throw error;
-  }
-}
-
-function parseConfluenceTable(html) {
-  // Simple HTML table parser - in production, use a proper HTML parser like cheerio
-  const rows = [];
-  const tableRegex = /<tr[^>]*>(.*?)<\/tr>/gs;
-  const cellRegex = /<t[dh][^>]*>(.*?)<\/t[dh]>/gs;
-  
-  let match;
-  let isHeader = true;
-  
-  while ((match = tableRegex.exec(html)) !== null) {
-    const rowHtml = match[1];
-    const cells = [];
-    let cellMatch;
-    
-    while ((cellMatch = cellRegex.exec(rowHtml)) !== null) {
-      // Remove HTML tags from cell content
-      const cellContent = cellMatch[1]
-        .replace(/<[^>]*>/g, '')
-        .replace(/&nbsp;/g, ' ')
-        .replace(/&amp;/g, '&')
-        .replace(/&lt;/g, '<')
-        .replace(/&gt;/g, '>')
-        .trim();
-      cells.push(cellContent);
-    }
-    
-    if (!isHeader && cells.length > 0) {
-      rows.push(cells);
-    }
-    isHeader = false;
-  }
-  
-  // Map rows to filament objects
-  return rows.map(row => ({
-    brand: row[0] || '',
-    tip: row[1] || '',
-    finish: row[2] || '',
-    boja: row[3] || '',
-    refill: row[4] || '',
-    vakum: row[5] || '',
-    otvoreno: row[6] || '',
-    kolicina: row[7] || '',
-    cena: row[8] || ''
-  }));
-}
-
-async function migrateToLocalJSON() {
-  try {
-    console.log('Migrating to local JSON file for testing...');
-    
-    // For now, use the mock data we created
-    const fs = require('fs');
-    const data = JSON.parse(fs.readFileSync('./public/data.json', 'utf8'));
-    
-    const filaments = data.map(item => ({
-      id: uuidv4(),
-      ...item,
-      createdAt: new Date().toISOString(),
-      updatedAt: new Date().toISOString()
-    }));
-    
-    console.log(`Found ${filaments.length} filaments to migrate`);
-    return filaments;
-  } catch (error) {
-    console.error('Error reading local data:', error);
-    throw error;
-  }
-}
-
-async function migrateToDynamoDB(filaments) {
-  console.log(`Migrating ${filaments.length} filaments to DynamoDB...`);
-  
-  // Check if table exists
-  try {
-    const dynamo = new AWS.DynamoDB();
-    await dynamo.describeTable({ TableName: TABLE_NAME }).promise();
-    console.log(`Table ${TABLE_NAME} exists`);
-  } catch (error) {
-    if (error.code === 'ResourceNotFoundException') {
-      console.error(`Table ${TABLE_NAME} does not exist. Please run Terraform first.`);
-      process.exit(1);
-    }
-    throw error;
-  }
-  
-  // Batch write items
-  const chunks = [];
-  for (let i = 0; i < filaments.length; i += 25) {
-    chunks.push(filaments.slice(i, i + 25));
-  }
-  
-  for (const chunk of chunks) {
-    const params = {
-      RequestItems: {
-        [TABLE_NAME]: chunk.map(item => ({
-          PutRequest: { Item: item }
-        }))
-      }
-    };
-    
-    try {
-      await dynamodb.batchWrite(params).promise();
-      console.log(`Migrated ${chunk.length} items`);
-    } catch (error) {
-      console.error('Error writing batch:', error);
-      throw error;
-    }
-  }
-  
-  console.log('Migration completed successfully!');
-}
-
-async function main() {
-  try {
-    let filaments;
-    
-    if (CONFLUENCE_API_URL && CONFLUENCE_TOKEN && CONFLUENCE_PAGE_ID) {
-      // Fetch from Confluence
-      const confluenceData = await fetchConfluenceData();
-      filaments = confluenceData.map(item => ({
-        id: uuidv4(),
-        ...item,
-        createdAt: new Date().toISOString(),
-        updatedAt: new Date().toISOString()
-      }));
-    } else {
-      console.log('Confluence credentials not found, using local data...');
-      filaments = await migrateToLocalJSON();
-    }
-    
-    // Migrate to DynamoDB
-    await migrateToDynamoDB(filaments);
-    
-    // Verify migration
-    const params = {
-      TableName: TABLE_NAME,
-      Select: 'COUNT'
-    };
-    
-    const result = await dynamodb.scan(params).promise();
-    console.log(`\nVerification: ${result.Count} items in DynamoDB`);
-    
-  } catch (error) {
-    console.error('Migration failed:', error);
-    process.exit(1);
-  }
-}
-
-// Run migration
-if (require.main === module) {
-  main();
-}

scripts/migrate-with-parser.js

@@ -1,241 +0,0 @@
-#!/usr/bin/env node
-
-require('dotenv').config({ path: '.env.local' });
-const axios = require('axios');
-const AWS = require('aws-sdk');
-const { v4: uuidv4 } = require('uuid');
-const cheerio = require('cheerio');
-
-// Configure AWS
-AWS.config.update({
-  region: process.env.AWS_REGION || 'eu-central-1'
-});
-
-const dynamodb = new AWS.DynamoDB.DocumentClient();
-const TABLE_NAME = process.env.DYNAMODB_TABLE_NAME || 'filamenteka-filaments';
-
-// Confluence configuration
-const CONFLUENCE_API_URL = process.env.CONFLUENCE_API_URL;
-const CONFLUENCE_TOKEN = process.env.CONFLUENCE_TOKEN;
-const CONFLUENCE_PAGE_ID = process.env.CONFLUENCE_PAGE_ID;
-
-async function fetchConfluenceData() {
-  try {
-    console.log('Fetching data from Confluence...');
-    
-    const response = await axios.get(
-      `${CONFLUENCE_API_URL}/wiki/rest/api/content/${CONFLUENCE_PAGE_ID}?expand=body.storage`,
-      {
-        headers: {
-          'Authorization': `Basic ${Buffer.from(CONFLUENCE_TOKEN).toString('base64')}`,
-          'Accept': 'application/json'
-        }
-      }
-    );
-
-    const htmlContent = response.data.body.storage.value;
-    return parseConfluenceTable(htmlContent);
-  } catch (error) {
-    console.error('Error fetching from Confluence:', error.message);
-    throw error;
-  }
-}
-
-function parseConfluenceTable(html) {
-  const $ = cheerio.load(html);
-  const filaments = [];
-  
-  // Find the table and iterate through rows
-  $('table').find('tr').each((index, row) => {
-    // Skip header row
-    if (index === 0) return;
-    
-    const cells = $(row).find('td');
-    if (cells.length >= 9) {
-      const filament = {
-        brand: $(cells[0]).text().trim(),
-        tip: $(cells[1]).text().trim(),
-        finish: $(cells[2]).text().trim(),
-        boja: $(cells[3]).text().trim(),
-        refill: $(cells[4]).text().trim(),
-        vakum: $(cells[5]).text().trim(),
-        otvoreno: $(cells[6]).text().trim(),
-        kolicina: $(cells[7]).text().trim(),
-        cena: $(cells[8]).text().trim()
-      };
-      
-      // Only add if row has valid data
-      if (filament.brand || filament.boja) {
-        filaments.push(filament);
-      }
-    }
-  });
-  
-  return filaments;
-}
-
-async function clearDynamoTable() {
-  console.log('Clearing existing data from DynamoDB...');
-  
-  // Scan all items
-  const scanParams = {
-    TableName: TABLE_NAME,
-    ProjectionExpression: 'id'
-  };
-  
-  try {
-    const scanResult = await dynamodb.scan(scanParams).promise();
-    
-    if (scanResult.Items.length === 0) {
-      console.log('Table is already empty');
-      return;
-    }
-    
-    // Delete in batches
-    const deleteRequests = scanResult.Items.map(item => ({
-      DeleteRequest: { Key: { id: item.id } }
-    }));
-    
-    // DynamoDB batchWrite supports max 25 items
-    for (let i = 0; i < deleteRequests.length; i += 25) {
-      const batch = deleteRequests.slice(i, i + 25);
-      const params = {
-        RequestItems: {
-          [TABLE_NAME]: batch
-        }
-      };
-      
-      await dynamodb.batchWrite(params).promise();
-      console.log(`Deleted ${batch.length} items`);
-    }
-    
-    console.log('Table cleared successfully');
-  } catch (error) {
-    console.error('Error clearing table:', error);
-    throw error;
-  }
-}
-
-async function migrateToDynamoDB(filaments) {
-  console.log(`Migrating ${filaments.length} filaments to DynamoDB...`);
-  
-  // Check if table exists
-  try {
-    const dynamo = new AWS.DynamoDB();
-    await dynamo.describeTable({ TableName: TABLE_NAME }).promise();
-    console.log(`Table ${TABLE_NAME} exists`);
-  } catch (error) {
-    if (error.code === 'ResourceNotFoundException') {
-      console.error(`Table ${TABLE_NAME} does not exist. Please run Terraform first.`);
-      process.exit(1);
-    }
-    throw error;
-  }
-  
-  // Add IDs and timestamps
-  const itemsToInsert = filaments.map(item => ({
-    id: uuidv4(),
-    ...item,
-    createdAt: new Date().toISOString(),
-    updatedAt: new Date().toISOString()
-  }));
-  
-  // Batch write items (max 25 per batch)
-  const chunks = [];
-  for (let i = 0; i < itemsToInsert.length; i += 25) {
-    chunks.push(itemsToInsert.slice(i, i + 25));
-  }
-  
-  let totalMigrated = 0;
-  for (const chunk of chunks) {
-    const params = {
-      RequestItems: {
-        [TABLE_NAME]: chunk.map(item => ({
-          PutRequest: { Item: item }
-        }))
-      }
-    };
-    
-    try {
-      await dynamodb.batchWrite(params).promise();
-      totalMigrated += chunk.length;
-      console.log(`Migrated ${totalMigrated}/${itemsToInsert.length} items`);
-    } catch (error) {
-      console.error('Error writing batch:', error);
-      throw error;
-    }
-  }
-  
-  console.log('Migration completed successfully!');
-  return totalMigrated;
-}
-
-async function main() {
-  try {
-    let filaments;
-    
-    // Check for --clear flag
-    const shouldClear = process.argv.includes('--clear');
-    
-    if (shouldClear) {
-      await clearDynamoTable();
-    }
-    
-    if (CONFLUENCE_API_URL && CONFLUENCE_TOKEN && CONFLUENCE_PAGE_ID) {
-      // Fetch from Confluence
-      console.log('Using Confluence as data source');
-      filaments = await fetchConfluenceData();
-    } else {
-      console.log('Confluence credentials not found, using local mock data...');
-      const fs = require('fs');
-      const data = JSON.parse(fs.readFileSync('../public/data.json', 'utf8'));
-      filaments = data;
-    }
-    
-    console.log(`Found ${filaments.length} filaments to migrate`);
-    
-    // Show sample data
-    if (filaments.length > 0) {
-      console.log('\nSample data:');
-      console.log(JSON.stringify(filaments[0], null, 2));
-    }
-    
-    // Migrate to DynamoDB
-    const migrated = await migrateToDynamoDB(filaments);
-    
-    // Verify migration
-    const params = {
-      TableName: TABLE_NAME,
-      Select: 'COUNT'
-    };
-    
-    const result = await dynamodb.scan(params).promise();
-    console.log(`\nVerification: ${result.Count} total items now in DynamoDB`);
-    
-    // Show sample from DynamoDB
-    const sampleParams = {
-      TableName: TABLE_NAME,
-      Limit: 1
-    };
-    
-    const sampleResult = await dynamodb.scan(sampleParams).promise();
-    if (sampleResult.Items.length > 0) {
-      console.log('\nSample from DynamoDB:');
-      console.log(JSON.stringify(sampleResult.Items[0], null, 2));
-    }
-    
-  } catch (error) {
-    console.error('Migration failed:', error);
-    process.exit(1);
-  }
-}
-
-// Run migration
-if (require.main === module) {
-  console.log('Confluence to DynamoDB Migration Tool');
-  console.log('=====================================');
-  console.log('Usage: node migrate-with-parser.js [--clear]');
-  console.log('  --clear: Clear existing data before migration\n');
-  
-  main();
-}

scripts/package.json

@@ -1,16 +0,0 @@
-{
-  "name": "filamenteka-scripts",
-  "version": "1.0.0",
-  "description": "Migration and utility scripts for Filamenteka",
-  "scripts": {
-    "migrate": "node migrate-with-parser.js",
-    "migrate:clear": "node migrate-with-parser.js --clear"
-  },
-  "dependencies": {
-    "aws-sdk": "^2.1472.0",
-    "axios": "^1.6.2",
-    "cheerio": "^1.0.0-rc.12",
-    "dotenv": "^16.3.1",
-    "uuid": "^9.0.1"
-  }
-}

scripts/pre-commit.sh

@@ -2,6 +2,12 @@
 
 echo "🔍 Running pre-commit checks..."
 
+# Check for forbidden author mentions
+/Users/dax/Documents/GitHub/Filamenteka/.git/hooks/pre-commit-author-check
+if [ $? -ne 0 ]; then
+    exit 1
+fi
+
 # Run security check
 echo "🔐 Checking for credential leaks..."
 npm run security:check

scripts/run-migration.js

@@ -0,0 +1,57 @@
+const { Pool } = require('pg');
+const fs = require('fs');
+const path = require('path');
+
+// Parse connection string from environment or command line
+const connectionString = process.env.DATABASE_URL || process.argv[2];
+
+if (!connectionString) {
+  console.error('Please provide DATABASE_URL as environment variable or command line argument');
+  console.error('Example: node run-migration.js "postgresql://user:pass@host:port/db"');
+  process.exit(1);
+}
+
+const pool = new Pool({
+  connectionString,
+  ssl: {
+    rejectUnauthorized: false // For AWS RDS
+  }
+});
+
+async function runMigration() {
+  try {
+    // Read the migration file
+    const migrationPath = path.join(__dirname, '../database/migrations/004_remove_brand_column.sql');
+    const migrationSQL = fs.readFileSync(migrationPath, 'utf8');
+    
+    console.log('Running migration: 004_remove_brand_column.sql');
+    console.log('SQL:', migrationSQL);
+    
+    // Execute the migration
+    await pool.query(migrationSQL);
+    
+    console.log('✅ Migration completed successfully!');
+    
+    // Verify the column was removed
+    const result = await pool.query(`
+      SELECT column_name 
+      FROM information_schema.columns 
+      WHERE table_name = 'filaments' 
+      AND column_name = 'brand'
+    `);
+    
+    if (result.rows.length === 0) {
+      console.log('✅ Verified: brand column has been removed');
+    } else {
+      console.log('⚠️  Warning: brand column still exists');
+    }
+    
+  } catch (error) {
+    console.error('❌ Migration failed:', error.message);
+    process.exit(1);
+  } finally {
+    await pool.end();
+  }
+}
+
+runMigration();

scripts/run-specific-migration.js

@@ -0,0 +1,37 @@
+const { Pool } = require('pg');
+
+// Parse connection string from environment or command line
+const connectionString = process.env.DATABASE_URL || process.argv[2];
+const migrationSQL = process.argv[3];
+
+if (!connectionString || !migrationSQL) {
+  console.error('Usage: node run-specific-migration.js "postgresql://..." "SQL"');
+  process.exit(1);
+}
+
+const pool = new Pool({
+  connectionString,
+  ssl: {
+    rejectUnauthorized: false // For AWS RDS
+  }
+});
+
+async function runMigration() {
+  try {
+    console.log('Running migration SQL:', migrationSQL);
+    
+    // Execute the migration
+    const result = await pool.query(migrationSQL);
+    
+    console.log('✅ Migration completed successfully!');
+    console.log('Rows affected:', result.rowCount);
+    
+  } catch (error) {
+    console.error('❌ Migration failed:', error.message);
+    process.exit(1);
+  } finally {
+    await pool.end();
+  }
+}
+
+runMigration();

scripts/security/security-check.js

@@ -16,12 +16,14 @@ const excludePatterns = [
   /node_modules/,
   /\.git/,
   /\.next/,
+  /\.claude/,
   /dist/,
   /build/,
   /out/,
   /terraform\.tfvars$/,
   /\.env/,
   /security-check\.js$/,
+  /__tests__/,  // Exclude test files which may contain test credentials
 ];
 
 function scanFile(filePath) {
@@ -33,7 +35,12 @@ function scanFile(filePath) {
     if (matches) {
       matches.forEach(match => {
         // Only flag if it's not a placeholder or example
-        if (!match.includes('example') && !match.includes('YOUR_') && !match.includes('xxx')) {
+        if (!match.includes('example') && 
+            !match.includes('YOUR_') && 
+            !match.includes('xxx') &&
+            !match.includes('your-password') &&
+            !match.includes('process.env') &&
+            !match.includes('<set-in-environment>')) {
           issues.push({
             file: filePath,
             pattern: pattern.source,

scripts/update-api-server.sh

@@ -0,0 +1,25 @@
+#!/bin/bash
+
+# Script to update API server via Gitea
+# Since we can't SSH directly, we'll use the API server to pull latest code
+
+echo "🚀 Updating API server with latest code..."
+
+# Create a deployment trigger endpoint
+curl -X POST https://api.filamenteka.rs/deploy \
+  -H "Content-Type: application/json" \
+  -H "X-Deploy-Secret: ${DEPLOY_SECRET}" \
+  -d '{"action": "pull_latest"}' \
+  2>/dev/null || echo "Deploy endpoint not available"
+
+echo ""
+echo "⚠️  Manual update required:"
+echo "The API server needs to be updated with the latest code that removes brand references."
+echo ""
+echo "The server file api/server.js needs these changes:"
+echo "1. Remove 'brand' from the INSERT statement on line ~115"
+echo "2. Remove 'brand' from the UPDATE statement on line ~140"
+echo "3. Remove 'brand' from the destructuring on lines ~111 and ~136"
+echo ""
+echo "Current server expects: (brand, tip, finish, boja, ...)"
+echo "Should be: (tip, finish, boja, ...)"