DaX/Filamenteka
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update documentation and clean up component code

Browse Source
This commit is contained in:
DaX
2025-09-24 18:15:19 +02:00
parent 59304a88f4
commit f1f3a65dfd
3 changed files with 129 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
CLAUDE.md
View File

@@ -1,13 +1,13 @@
# CLAUDE.md # CLAUDE.md
This file provides guidance for AI-assisted development in this repository. This file provides guidance when working with code in this repository.
## Project Overview ## Project Overview
Filamenteka is a 3D printing filament inventory management system for tracking Bambu Lab filaments. It consists of: Filamenteka is a 3D printing filament inventory management system for tracking Bambu Lab filaments with:
- **Frontend**: Next.js app with React, TypeScript, and Tailwind CSS (static export) - **Frontend**: Next.js 15 app with React 19, TypeScript 5.2.2, and Tailwind CSS (static export)
- **Backend**: Node.js API server with PostgreSQL database - **Backend**: Node.js Express API server with PostgreSQL database
- **Infrastructure**: AWS (Amplify for frontend, EC2 for API, RDS for database) - **Infrastructure**: AWS (Amplify for frontend, EC2 for API, RDS for database), managed via Terraform
## Critical Rules ## Critical Rules
@@ -16,6 +16,7 @@ Filamenteka is a 3D printing filament inventory management system for tracking B
- Keep commit messages clean and professional with NO attribution - Keep commit messages clean and professional with NO attribution
- Build for AMD64 Linux when deploying (development is on ARM macOS) - Build for AMD64 Linux when deploying (development is on ARM macOS)
- Always run security checks before commits - Always run security checks before commits
- NEVER use mock data - all tests must use real APIs/data
## Common Commands ## Common Commands
@@ -24,57 +25,75 @@ Filamenteka is a 3D printing filament inventory management system for tracking B
npm run dev # Start Next.js development server (port 3000) npm run dev # Start Next.js development server (port 3000)
npm run build # Build static export to /out directory npm run build # Build static export to /out directory
npm run lint # Run ESLint npm run lint # Run ESLint
npm test # Run Jest tests npm test # Run Jest tests (includes no-mock-data validation)
# Security & Quality # Security & Quality
npm run security:check # Check for credential leaks npm run security:check # Check for credential leaks
npm run test:build # Test if build succeeds npm run test:build # Test if build succeeds
./scripts/pre-commit.sh # Full pre-commit validation (security, build, tests)
# Database Migrations # Database Migrations
npm run migrate # Run pending migrations npm run migrate # Run pending migrations
npm run migrate:clear # Clear migration history npm run migrate:clear # Clear migration history
# Pre-commit Hook # API Server Development
./scripts/pre-commit.sh # Runs security, build, and test checks cd api && npm start # Start API server locally (port 3001)
cd api && npm run dev # Start API server with nodemon
# Deployment
./scripts/deploy-api.sh # Deploy API to EC2 (builds AMD64 Docker image)
``` ```
## Architecture ## Architecture
### Frontend Structure (Next.js App Router) ### Frontend Structure (Next.js App Router)
- `/app` - Next.js 13+ app directory structure ```
- `/page.tsx` - Public filament inventory table /app
- `/upadaj` - Admin panel (password protected) ├── page.tsx # Public filament inventory table
- `/page.tsx` - Admin login ├── layout.tsx # Root layout with providers
- `/dashboard/page.tsx` - Filament CRUD operations └── upadaj/ # Admin panel (JWT protected)
- `/colors/page.tsx` - Color management ├── page.tsx # Admin login
├── dashboard/page.tsx # Filament CRUD operations
├── colors/page.tsx # Color management
└── requests/page.tsx # Color request management
```
### API Structure ### API Structure
- `/api` - Node.js Express server (runs on EC2) ```
- `/server.js` - Main server file /api
- `/routes` - API endpoints for filaments, colors, auth ├── server.js # Express server (port 3001)
- Database: PostgreSQL on AWS RDS ├── routes/
│ ├── filaments.js # Filament CRUD + bulk operations
│ ├── colors.js # Color management
│ ├── colorRequests.js # Color request system
│ └── auth.js # JWT authentication
└── middleware/
└── auth.js # JWT verification middleware
```
### Key Components ### Key Components
- `FilamentTableV2` - Main inventory display with sorting/filtering - `FilamentTableV2` - Main inventory display with sorting/filtering/searching
- `SaleManager` - Bulk sale management interface - `SaleManager` - Bulk sale management with countdown timers
- `ColorCell` - Smart color rendering with gradient support - `ColorCell` - Smart color rendering with gradient support
- `EnhancedFilters` - Advanced filtering system - `EnhancedFilters` - Multi-criteria filtering system
- `ColorRequestModal` - Public color request form
### Data Models ### Data Models
#### Filament Schema (PostgreSQL) #### Filament Schema (PostgreSQL)
```sql ```sql
filaments: { filaments: {
id: UUID, id: UUID PRIMARY KEY,
tip: VARCHAR(50), # Material type (PLA, PETG, ABS) tip: VARCHAR(50), # Material type (PLA, PETG, ABS)
finish: VARCHAR(50), # Finish type (Basic, Matte, Silk) finish: VARCHAR(50), # Finish type (Basic, Matte, Silk)
boja: VARCHAR(100), # Color name boja: VARCHAR(100), # Color name (links to colors.name)
boja_hex: VARCHAR(7), # Color hex code
refill: INTEGER, # Refill spool count refill: INTEGER, # Refill spool count
spulna: INTEGER, # Regular spool count spulna: INTEGER, # Regular spool count
kolicina: INTEGER, # Total quantity (refill + spulna) kolicina: INTEGER, # Total quantity (refill + spulna)
cena: VARCHAR(50), # Price cena: VARCHAR(50), # Price string
sale_active: BOOLEAN, # Sale status sale_active: BOOLEAN, # Sale status
sale_percentage: INTEGER,# Sale discount sale_percentage: INTEGER,# Sale discount percentage
sale_end_date: TIMESTAMP # Sale expiry sale_end_date: TIMESTAMP # Sale expiry
} }
``` ```
@@ -82,52 +101,74 @@ filaments: {
#### Color Schema #### Color Schema
```sql ```sql
colors: { colors: {
id: UUID, id: UUID PRIMARY KEY,
name: VARCHAR(100), # Color name (must match filament.boja) name: VARCHAR(100) UNIQUE, # Color name (must match filament.boja)
hex: VARCHAR(7), # Hex color code hex: VARCHAR(7), # Hex color code
cena_refill: INTEGER, # Refill price (default: 3499) cena_refill: INTEGER, # Refill price (default: 3499)
cena_spulna: INTEGER # Regular price (default: 3999) cena_spulna: INTEGER # Regular price (default: 3999)
} }
``` ```
#### Color Requests Schema
```sql
color_requests: {
id: UUID PRIMARY KEY,
color_name: VARCHAR(100),
email: VARCHAR(255),
message: TEXT,
status: VARCHAR(50), # pending/approved/rejected
created_at: TIMESTAMP
}
```
## Deployment ## Deployment
### Frontend (AWS Amplify) ### Frontend (AWS Amplify)
- Automatic deployment on push to main branch - Automatic deployment on push to main branch
- Build output: Static files in `/out` directory - Build output: Static files in `/out` directory
- Build command: `npm run build`
- Config: `amplify.yml`, `next.config.js` (output: 'export') - Config: `amplify.yml`, `next.config.js` (output: 'export')
### API Server (EC2) ### API Server (EC2)
- Manual deployment via `scripts/deploy-api.sh` - Manual deployment via `./scripts/deploy-api.sh`
- Docker containerized (Node.js 18 Alpine)
- Server: `3.71.161.51` - Server: `3.71.161.51`
- Domain: `api.filamenteka.rs` - Domain: `api.filamenteka.rs`
- **Important**: Build for AMD64 architecture when deploying from ARM Mac
### Database (RDS PostgreSQL) ### Database (RDS PostgreSQL)
- Host: `filamenteka.ci7fsdlbzmag.eu-central-1.rds.amazonaws.com` - Host: `filamenteka.ci7fsdlbzmag.eu-central-1.rds.amazonaws.com`
- Migrations in `/database/migrations/` - Migrations in `/database/migrations/` (numbered sequence)
- Schema in `/database/schema.sql` - Schema in `/database/schema.sql`
- Connection via `DATABASE_URL` environment variable
## Important Patterns ## Important Patterns
### API Communication ### API Communication
- All API calls use axios interceptors for auth (`src/services/api.ts`) - All API calls use axios with interceptors (`src/services/api.ts`)
- Auth token stored in localStorage - Auth token stored in localStorage as 'adminToken'
- Automatic redirect on 401/403 in admin routes - Automatic redirect on 401/403 in admin routes
- Base URL from `NEXT_PUBLIC_API_URL` env variable
### Color Management ### Color Management
- Colors defined in `src/data/bambuLabColors.ts` and `bambuLabColorsComplete.ts` - Primary source: `src/data/bambuLabColors.ts` (hex mappings)
- Automatic row coloring based on filament color - Extended data: `src/data/bambuLabColorsComplete.ts`
- Special handling for gradient filaments - Refill-only colors: `src/data/refillOnlyColors.ts`
- Automatic row coloring based on filament.boja_hex
- Special gradient handling for multi-color filaments
### State Management ### State Management
- React hooks for local state - React hooks for local state (no global state library)
- No global state management library - Data fetching with useEffect in components
- Data fetching in components with useEffect - Form state managed with controlled components
- Admin auth state in localStorage
### Testing ### Testing Strategy
- Jest + React Testing Library - Jest + React Testing Library for component tests
- Tests in `__tests__/` directory - Special `no-mock-data.test.ts` enforces real API usage
- Coverage goal: >80% - Integration tests connect to real database
- Coverage reports in `/coverage/`
- Test files in `__tests__/` directories
## Environment Variables ## Environment Variables
@@ -135,34 +176,56 @@ colors: {
# Frontend (.env.local) # Frontend (.env.local)
NEXT_PUBLIC_API_URL=https://api.filamenteka.rs/api NEXT_PUBLIC_API_URL=https://api.filamenteka.rs/api
# API Server # API Server (.env)
DATABASE_URL=postgresql://... DATABASE_URL=postgresql://username:password@host/database
JWT_SECRET=... JWT_SECRET=your-secret-key
NODE_ENV=production NODE_ENV=production
PORT=3001
``` ```
## Security Considerations ## Security Considerations
- Admin routes protected by JWT authentication - JWT authentication for admin routes (24h expiry)
- Password hashing with bcrypt - Password hashing with bcryptjs (10 rounds)
- SQL injection prevention via parameterized queries - SQL injection prevention via parameterized queries
- Credential leak detection in pre-commit hooks - Credential leak detection in pre-commit hooks
- CORS configured for production domains only - CORS configured for production domains only
- Author mention detection prevents attribution in commits
## Database Operations ## Database Operations
When modifying the database: When modifying the database:
1. Create migration file in `/database/migrations/` 1. Create numbered migration file in `/database/migrations/`
2. Test locally first 2. Test locally with `npm run migrate`
3. Run migration on production via scripts 3. Deploy to production via SSH or migration script
4. Update corresponding TypeScript types 4. Update TypeScript interfaces in `src/types/`
5. Update relevant data files in `src/data/`
## Terraform Infrastructure ## Terraform Infrastructure
Infrastructure as Code in `/terraform/`: Infrastructure as Code in `/terraform/`:
- VPC and networking setup - VPC with public/private subnets
- EC2 instance for API - EC2 instance with Application Load Balancer
- RDS PostgreSQL database - RDS PostgreSQL instance
- Application Load Balancer - ECR for Docker image registry
- ECR for Docker images
- Cloudflare DNS integration - Cloudflare DNS integration
- Environment separation (dev/prod)
## Special Considerations
### ARM to AMD64 Builds
When deploying from ARM Mac to AMD64 Linux:
- Docker builds must specify `--platform linux/amd64`
- Deployment scripts handle architecture conversion
- Test builds locally with `docker buildx`
### Color Data Synchronization
- Colors must exist in both database and frontend data files
- Use migration scripts to sync color data
- Validate consistency with data consistency tests
### Sale Management
- Bulk sale operations affect multiple filaments
- Sale countdown timers update in real-time
- Prices automatically calculated with discounts
- Sale end dates trigger automatic deactivation

16
app/page.tsx
View File

@@ -193,15 +193,6 @@ export default function Home() {
</svg> </svg>
) )
}, },
{
id: 'color-request',
label: 'Zatraži Boju',
icon: (
<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>
)
},
{ {
id: 'printers', id: 'printers',
label: 'Štampači', label: 'Štampači',
@@ -249,11 +240,14 @@ export default function Home() {
key={resetKey} key={resetKey}
filaments={filaments} filaments={filaments}
/> />
{/* Color Request Section Below Table */}
<div className="mt-16">
<ColorRequestSection />
</div>
</> </>
)} )}
{activeTab === 'color-request' && <ColorRequestSection />}
{activeTab === 'printers' && <PrintersTable />} {activeTab === 'printers' && <PrintersTable />}
{activeTab === 'gear' && <GearTable />} {activeTab === 'gear' && <GearTable />}

5
src/components/ColorRequestSection.tsx
View File

@@ -58,11 +58,6 @@ export default function ColorRequestSection() {
</div> </div>
</div> </div>
<div className="mt-8 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
<p className="text-sm text-blue-800 dark:text-blue-300">
<strong>Napomena:</strong> Minimalna količina za naručivanje novih boja je 2 rolne.
</p>
</div>
</div> </div>
</div> </div>