diff --git a/logs/out-0.log b/logs/out-0.log index c030243..2a4ee4e 100644 --- a/logs/out-0.log +++ b/logs/out-0.log @@ -1337,3 +1337,174 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime] 2025-11-07T14:45:59: Middleware - Token value: eyJhbGciOiJIUzI1NiIs... 2025-11-07T14:45:59: Middleware - Token valid, user: brotha 2025-11-07T14:45:59: Middleware - Token valid, user: brotha +2025-11-07T14:46:50: Middleware - Path: /admin/menus +2025-11-07T14:46:50: Middleware - Token present: true +2025-11-07T14:46:50: Middleware - Token value: eyJhbGciOiJIUzI1NiIs... +2025-11-07T14:46:50: Middleware - Token valid, user: brotha +2025-11-07T14:48:25: Middleware - Path: /admin/menus +2025-11-07T14:48:25: Middleware - Token present: true +2025-11-07T14:48:25: Middleware - Token value: eyJhbGciOiJIUzI1NiIs... +2025-11-07T14:48:25: Middleware - Token valid, user: brotha +2025-11-07T14:48:25: === API: GET /api/menus === +2025-11-07T14:48:25: ✓ Menus fetched: 17 +2025-11-07T14:48:25: Middleware - Path: /admin/menus +2025-11-07T14:48:25: Middleware - Token present: true +2025-11-07T14:48:25: Middleware - Token value: eyJhbGciOiJIUzI1NiIs... +2025-11-07T14:48:25: Middleware - Token valid, user: brotha +2025-11-07T14:48:25: === API: GET /api/menus === +2025-11-07T14:48:25: ✓ Menus fetched: 17 +2025-11-07T14:48:26: Middleware - Path: /admin/menus +2025-11-07T14:48:26: Middleware - Token present: true +2025-11-07T14:48:26: Middleware - Token value: eyJhbGciOiJIUzI1NiIs... +2025-11-07T14:48:26: Middleware - Token valid, user: brotha +2025-11-07T14:48:26: === API: GET /api/menus === +2025-11-07T14:48:26: ✓ Menus fetched: 17 +2025-11-07T14:48:26: Middleware - Path: /admin/menus +2025-11-07T14:48:26: Middleware - Token present: true +2025-11-07T14:48:26: Middleware - Token value: eyJhbGciOiJIUzI1NiIs... +2025-11-07T14:48:26: Middleware - Token valid, user: brotha +2025-11-07T14:48:26: Middleware - Path: /admin/menus +2025-11-07T14:48:26: Middleware - Token present: true +2025-11-07T14:48:26: Middleware - Token value: eyJhbGciOiJIUzI1NiIs... +2025-11-07T14:48:26: Middleware - Token valid, user: brotha +2025-11-07T14:48:26: === API: GET /api/menus === +2025-11-07T14:48:26: ✓ Menus fetched: 17 +2025-11-07T14:48:47: Middleware - Path: /admin/menus +2025-11-07T14:48:47: Middleware - Token present: true +2025-11-07T14:48:47: Middleware - Token value: eyJhbGciOiJIUzI1NiIs... +2025-11-07T14:48:47: Middleware - Token valid, user: brotha +2025-11-07T14:48:47: === API: GET /api/menus === +2025-11-07T14:48:47: ✓ Menus fetched: 17 +2025-11-07T14:48:48: Middleware - Path: /admin/menus +2025-11-07T14:48:48: Middleware - Token present: true +2025-11-07T14:48:48: Middleware - Token value: eyJhbGciOiJIUzI1NiIs... +2025-11-07T14:48:48: Middleware - Token valid, user: brotha +2025-11-07T14:48:48: === API: GET /api/menus === +2025-11-07T14:48:48: ✓ Menus fetched: 17 +2025-11-07T14:48:48: Middleware - Path: /admin/menus +2025-11-07T14:48:48: Middleware - Token present: true +2025-11-07T14:48:48: Middleware - Token value: eyJhbGciOiJIUzI1NiIs... +2025-11-07T14:48:48: Middleware - Token valid, user: brotha +2025-11-07T14:48:48: === API: GET /api/menus === +2025-11-07T14:48:48: ✓ Menus fetched: 17 +2025-11-07T14:48:48: Middleware - Path: /admin/menus +2025-11-07T14:48:48: Middleware - Token present: true +2025-11-07T14:48:48: Middleware - Token value: eyJhbGciOiJIUzI1NiIs... +2025-11-07T14:48:48: Middleware - Token valid, user: brotha +2025-11-07T14:48:48: === API: GET /api/menus === +2025-11-07T14:48:48: ✓ Menus fetched: 17 +2025-11-07T14:49:56: > Ready on http://localhost:3000 +2025-11-07T14:50:13: Middleware - Path: /admin/menus +2025-11-07T14:50:13: Middleware - Token present: true +2025-11-07T14:50:13: Middleware - Token value: eyJhbGciOiJIUzI1NiIs... +2025-11-07T14:50:13: Middleware - Token valid, user: brotha +2025-11-07T14:50:13: === API: GET /api/menus === +2025-11-07T14:50:13: ✓ Menus fetched: 17 +2025-11-07T14:50:14: Middleware - Path: /admin/menus +2025-11-07T14:50:14: Middleware - Token present: true +2025-11-07T14:50:14: Middleware - Token value: eyJhbGciOiJIUzI1NiIs... +2025-11-07T14:50:14: Middleware - Token valid, user: brotha +2025-11-07T14:50:14: === API: GET /api/menus === +2025-11-07T14:50:14: ✓ Menus fetched: 17 +2025-11-07T14:51:31: Middleware - Path: /admin/menus +2025-11-07T14:51:31: Middleware - Token present: true +2025-11-07T14:51:31: Middleware - Token value: eyJhbGciOiJIUzI1NiIs... +2025-11-07T14:51:31: Middleware - Token valid, user: brotha +2025-11-07T14:51:31: === API: GET /api/menus === +2025-11-07T14:51:31: ✓ Menus fetched: 17 +2025-11-07T14:51:37: === API: GET /api/availability/weekly === +2025-11-07T14:51:37: === API: GET /api/availability/blocked === +2025-11-07T14:51:37: ✓ Weekly availability fetched: 3 slots +2025-11-07T14:51:37: ✓ Blocked dates fetched: 3 dates +2025-11-07T14:51:37: === API: GET /api/availability/weekly === +2025-11-07T14:51:37: === API: GET /api/availability/blocked === +2025-11-07T14:51:37: ✓ Weekly availability fetched: 3 slots +2025-11-07T14:51:37: ✓ Blocked dates fetched: 3 dates +2025-11-07T14:52:44: > Ready on http://localhost:3000 +2025-11-07T14:52:49: Middleware - Path: /admin/menus +2025-11-07T14:52:49: Middleware - Token present: true +2025-11-07T14:52:49: Middleware - Token value: eyJhbGciOiJIUzI1NiIs... +2025-11-07T14:52:49: Middleware - Token valid, user: brotha +2025-11-07T14:52:50: === API: GET /api/menus === +2025-11-07T14:52:50: ✓ Menus fetched: 17 +2025-11-07T14:52:55: Middleware - Path: /admin/menus +2025-11-07T14:52:55: Middleware - Token present: true +2025-11-07T14:52:55: Middleware - Token value: eyJhbGciOiJIUzI1NiIs... +2025-11-07T14:52:55: Middleware - Token valid, user: brotha +2025-11-07T14:53:35: Middleware - Path: /admin/menus +2025-11-07T14:53:35: Middleware - Token present: true +2025-11-07T14:53:35: Middleware - Token value: eyJhbGciOiJIUzI1NiIs... +2025-11-07T14:53:35: Middleware - Token valid, user: brotha +2025-11-07T14:53:35: === API: GET /api/menus === +2025-11-07T14:53:35: ✓ Menus fetched: 17 +2025-11-07T14:53:36: Middleware - Path: /admin/menus +2025-11-07T14:53:36: Middleware - Token present: true +2025-11-07T14:53:36: Middleware - Token value: eyJhbGciOiJIUzI1NiIs... +2025-11-07T14:53:36: Middleware - Token valid, user: brotha +2025-11-07T14:53:36: === API: GET /api/menus === +2025-11-07T14:53:36: ✓ Menus fetched: 17 +2025-11-07T14:53:54: Middleware - Path: /admin/menu-generator +2025-11-07T14:53:54: Middleware - Token present: true +2025-11-07T14:53:54: Middleware - Token value: eyJhbGciOiJIUzI1NiIs... +2025-11-07T14:53:54: Middleware - Token valid, user: brotha +2025-11-07T14:53:57: Middleware - Path: /admin/menus +2025-11-07T14:53:57: Middleware - Token present: true +2025-11-07T14:53:57: Middleware - Token value: eyJhbGciOiJIUzI1NiIs... +2025-11-07T14:53:57: Middleware - Token valid, user: brotha +2025-11-07T14:53:59: > Ready on http://localhost:3000 +2025-11-07T14:54:26: Middleware - Path: /admin/menus +2025-11-07T14:54:26: Middleware - Token present: true +2025-11-07T14:54:26: Middleware - Token value: eyJhbGciOiJIUzI1NiIs... +2025-11-07T14:54:26: Middleware - Token valid, user: brotha +2025-11-07T14:54:26: === API: GET /api/menus === +2025-11-07T14:54:26: ✓ Menus fetched: 17 +2025-11-07T14:55:05: Middleware - Path: /admin/menus +2025-11-07T14:55:05: Middleware - Token present: true +2025-11-07T14:55:05: Middleware - Token value: eyJhbGciOiJIUzI1NiIs... +2025-11-07T14:55:05: Middleware - Token valid, user: brotha +2025-11-07T14:55:05: === API: GET /api/menus === +2025-11-07T14:55:05: ✓ Menus fetched: 17 +2025-11-07T14:55:05: Middleware - Path: /admin/menus +2025-11-07T14:55:05: Middleware - Token present: true +2025-11-07T14:55:05: Middleware - Token value: eyJhbGciOiJIUzI1NiIs... +2025-11-07T14:55:05: Middleware - Token valid, user: brotha +2025-11-07T14:55:05: === API: GET /api/menus === +2025-11-07T14:55:05: ✓ Menus fetched: 17 +2025-11-07T14:55:05: Middleware - Path: /admin/menus +2025-11-07T14:55:05: Middleware - Token present: true +2025-11-07T14:55:05: Middleware - Token value: eyJhbGciOiJIUzI1NiIs... +2025-11-07T14:55:05: Middleware - Token valid, user: brotha +2025-11-07T14:55:05: === API: GET /api/menus === +2025-11-07T14:55:05: ✓ Menus fetched: 17 +2025-11-07T14:55:22: Middleware - Path: /admin/menu-ingredients +2025-11-07T14:55:22: Middleware - Token present: true +2025-11-07T14:55:22: Middleware - Token value: eyJhbGciOiJIUzI1NiIs... +2025-11-07T14:55:22: Middleware - Token valid, user: brotha +2025-11-07T14:55:23: Middleware - Path: /admin/menus +2025-11-07T14:55:23: Middleware - Token present: true +2025-11-07T14:55:23: Middleware - Token value: eyJhbGciOiJIUzI1NiIs... +2025-11-07T14:55:23: Middleware - Token valid, user: brotha +2025-11-07T14:55:23: Middleware - Path: /admin/menu-generator +2025-11-07T14:55:23: Middleware - Token present: true +2025-11-07T14:55:23: Middleware - Token value: eyJhbGciOiJIUzI1NiIs... +2025-11-07T14:55:23: Middleware - Token valid, user: brotha +2025-11-07T14:55:23: Middleware - Path: /admin/bookings +2025-11-07T14:55:23: Middleware - Token present: true +2025-11-07T14:55:23: Middleware - Token value: eyJhbGciOiJIUzI1NiIs... +2025-11-07T14:55:23: Middleware - Token valid, user: brotha +2025-11-07T14:56:02: > Ready on http://localhost:3000 +2025-11-07T14:59:25: Middleware - Path: /admin/menu-ingredients +2025-11-07T14:59:25: Middleware - Token present: true +2025-11-07T14:59:25: Middleware - Token value: eyJhbGciOiJIUzI1NiIs... +2025-11-07T14:59:25: Middleware - Token valid, user: brotha +2025-11-07T15:00:03: > Ready on http://localhost:3000 +2025-11-07T15:00:11: Middleware - Path: /admin/menu-ingredients +2025-11-07T15:00:11: Middleware - Token present: true +2025-11-07T15:00:11: Middleware - Token value: eyJhbGciOiJIUzI1NiIs... +2025-11-07T15:00:11: Middleware - Token valid, user: brotha +2025-11-07T15:00:11: Middleware - Path: /admin/ingredients +2025-11-07T15:00:11: Middleware - Token present: true +2025-11-07T15:00:11: Middleware - Token value: eyJhbGciOiJIUzI1NiIs... +2025-11-07T15:00:11: Middleware - Token valid, user: brotha +2025-11-07T15:00:12: === API: GET /api/ingredients === +2025-11-07T15:00:12: ✓ Ingredients fetched: 13 diff --git a/package-lock.json b/package-lock.json index 7ffaf37..4088268 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,6 +31,7 @@ "@eslint/config-array": "^0.21.1", "@eslint/object-schema": "^2.1.7", "@playwright/test": "^1.56.1", + "@tailwindcss/line-clamp": "^0.4.4", "@tailwindcss/postcss": "^4.1.17", "@types/node": "^20", "@types/react": "^18", @@ -1074,6 +1075,16 @@ "tslib": "^2.4.0" } }, + "node_modules/@tailwindcss/line-clamp": { + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/@tailwindcss/line-clamp/-/line-clamp-0.4.4.tgz", + "integrity": "sha512-5U6SY5z8N42VtrCrKlsTAA35gy2VSyYtHWCsg1H87NU1SXnEfekTVlrga9fzUDrrHcGi2Lb5KenUWb4lRQT5/g==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1" + } + }, "node_modules/@tailwindcss/node": { "version": "4.1.17", "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.17.tgz", diff --git a/package.json b/package.json index 86ae7ce..53bed20 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "@eslint/config-array": "^0.21.1", "@eslint/object-schema": "^2.1.7", "@playwright/test": "^1.56.1", + "@tailwindcss/line-clamp": "^0.4.4", "@tailwindcss/postcss": "^4.1.17", "@types/node": "^20", "@types/react": "^18", diff --git a/scripts/db-ingredients-migration.mjs b/scripts/db-ingredients-migration.mjs new file mode 100644 index 0000000..1642df3 --- /dev/null +++ b/scripts/db-ingredients-migration.mjs @@ -0,0 +1,84 @@ +import mysql from 'mysql2/promise'; +import dotenv from 'dotenv'; + +dotenv.config(); + +const pool = mysql.createPool({ + host: process.env.DB_HOST, + user: process.env.DB_USER, + password: process.env.DB_PASSWORD, + database: process.env.DB_NAME, + waitForConnections: true, + connectionLimit: 10, +}); + +async function migrateIngredients() { + console.log('=== Creating ingredients table ==='); + + try { + // Create ingredients table + await pool.query(` + CREATE TABLE IF NOT EXISTS ingredients ( + id VARCHAR(100) PRIMARY KEY, + name VARCHAR(255) NOT NULL, + category VARCHAR(100), + unit VARCHAR(50) NOT NULL, + price_per_unit DECIMAL(10, 2) NOT NULL, + supplier VARCHAR(255), + notes TEXT, + created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, + updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP + ) + `); + + console.log('✓ Ingredients table created'); + + // Add some default ingredients + const defaultIngredients = [ + { id: 'kartofler', name: 'Kartofler', category: 'Grøntsager', unit: 'kg', price: 15.00, supplier: 'Lokal' }, + { id: 'tomat', name: 'Tomater', category: 'Grøntsager', unit: 'kg', price: 25.00, supplier: 'Lokal' }, + { id: 'loeg', name: 'Løg', category: 'Grøntsager', unit: 'kg', price: 12.00, supplier: 'Lokal' }, + { id: 'hvidloeg', name: 'Hvidløg', category: 'Grøntsager', unit: 'stk', price: 3.00, supplier: 'Lokal' }, + { id: 'oksekoed', name: 'Oksekød', category: 'Kød', unit: 'kg', price: 120.00, supplier: 'Slagter' }, + { id: 'kylling', name: 'Kylling', category: 'Kød', unit: 'kg', price: 60.00, supplier: 'Slagter' }, + { id: 'laks', name: 'Laks', category: 'Fisk', unit: 'kg', price: 180.00, supplier: 'Fiskehandler' }, + { id: 'smor', name: 'Smør', category: 'Mejeriprodukter', unit: 'kg', price: 50.00, supplier: 'Supermarked' }, + { id: 'fløde', name: 'Fløde', category: 'Mejeriprodukter', unit: 'liter', price: 25.00, supplier: 'Supermarked' }, + { id: 'parmesan', name: 'Parmesan', category: 'Mejeriprodukter', unit: 'kg', price: 150.00, supplier: 'Supermarked' }, + { id: 'olivenolie', name: 'Olivenolie', category: 'Olier & Eddiker', unit: 'liter', price: 60.00, supplier: 'Supermarked' }, + { id: 'salt', name: 'Salt', category: 'Krydderier', unit: 'kg', price: 15.00, supplier: 'Supermarked' }, + { id: 'peber', name: 'Peber', category: 'Krydderier', unit: 'kg', price: 120.00, supplier: 'Supermarked' }, + ]; + + for (const ing of defaultIngredients) { + await pool.query(` + INSERT INTO ingredients (id, name, category, unit, price_per_unit, supplier) + VALUES (?, ?, ?, ?, ?, ?) + ON DUPLICATE KEY UPDATE + name = VALUES(name), + category = VALUES(category), + unit = VALUES(unit), + price_per_unit = VALUES(price_per_unit), + supplier = VALUES(supplier) + `, [ing.id, ing.name, ing.category, ing.unit, ing.price, ing.supplier]); + } + + console.log(`✓ ${defaultIngredients.length} default ingredients inserted`); + + } catch (error) { + console.error('❌ Migration error:', error); + throw error; + } finally { + await pool.end(); + } +} + +migrateIngredients() + .then(() => { + console.log('✅ Migration complete'); + process.exit(0); + }) + .catch((error) => { + console.error('❌ Migration failed:', error); + process.exit(1); + }); diff --git a/src/app/admin/ingredients/page.tsx b/src/app/admin/ingredients/page.tsx new file mode 100644 index 0000000..653784e --- /dev/null +++ b/src/app/admin/ingredients/page.tsx @@ -0,0 +1,414 @@ +'use client' + +import { useState, useEffect } from 'react' +import { ShoppingBasket, Edit2, Trash2, Plus, Save, X, Search } from 'lucide-react' + +type Ingredient = { + id: string + name: string + category: string + unit: string + pricePerUnit: number + supplier?: string + notes?: string +} + +const CATEGORIES = [ + 'Grøntsager', + 'Kød', + 'Fisk', + 'Mejeriprodukter', + 'Olier & Eddiker', + 'Krydderier', + 'Mel & Bagning', + 'Pasta & Ris', + 'Konserves', + 'Andet' +] + +const UNITS = [ + 'kg', + 'g', + 'liter', + 'dl', + 'ml', + 'stk', + 'bundt', + 'pose', + 'dåse' +] + +export default function IngredientsPage() { + const [ingredients, setIngredients] = useState([]) + const [loading, setLoading] = useState(true) + const [editingId, setEditingId] = useState(null) + const [editedIngredient, setEditedIngredient] = useState(null) + const [isCreating, setIsCreating] = useState(false) + const [saving, setSaving] = useState(false) + const [searchTerm, setSearchTerm] = useState('') + const [filterCategory, setFilterCategory] = useState('all') + + useEffect(() => { + fetchIngredients() + }, []) + + async function fetchIngredients() { + setLoading(true) + try { + const response = await fetch('/api/ingredients') + const data = await response.json() + setIngredients(data) + } catch (error) { + console.error('Error fetching ingredients:', error) + } finally { + setLoading(false) + } + } + + async function deleteIngredient(id: string) { + if (!confirm('Er du sikker på du vil slette denne råvare?')) return + + try { + const response = await fetch('/api/ingredients', { + method: 'DELETE', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ id }) + }) + + if (response.ok) { + setIngredients(ingredients.filter(i => i.id !== id)) + alert('✅ Råvare slettet!') + } + } catch (error) { + console.error('Error deleting ingredient:', error) + alert('❌ Kunne ikke slette råvare') + } + } + + async function saveIngredient() { + if (!editedIngredient) return + + setSaving(true) + try { + const method = isCreating ? 'POST' : 'PUT' + const response = await fetch('/api/ingredients', { + method, + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(editedIngredient) + }) + + if (response.ok) { + await fetchIngredients() + setEditingId(null) + setEditedIngredient(null) + setIsCreating(false) + alert(`✅ Råvare ${isCreating ? 'oprettet' : 'opdateret'}!`) + } else { + alert('❌ Kunne ikke gemme råvare') + } + } catch (error) { + console.error('Error saving ingredient:', error) + alert('❌ Fejl ved gemning') + } finally { + setSaving(false) + } + } + + function startCreate() { + setIsCreating(true) + setEditedIngredient({ + id: '', + name: '', + category: 'Andet', + unit: 'kg', + pricePerUnit: 0, + supplier: '', + notes: '' + }) + } + + function startEdit(ingredient: Ingredient) { + setIsCreating(false) + setEditingId(ingredient.id) + setEditedIngredient({...ingredient}) + } + + const filteredIngredients = ingredients + .filter(ing => { + const matchesSearch = ing.name.toLowerCase().includes(searchTerm.toLowerCase()) || + ing.category.toLowerCase().includes(searchTerm.toLowerCase()) + const matchesCategory = filterCategory === 'all' || ing.category === filterCategory + return matchesSearch && matchesCategory + }) + + // Group by category + const groupedIngredients = filteredIngredients.reduce((acc, ing) => { + if (!acc[ing.category]) acc[ing.category] = [] + acc[ing.category].push(ing) + return acc + }, {} as Record) + + if (loading) { + return ( +
+
+
+
+

Henter råvarer...

+
+
+
+ ) + } + + return ( +
+
+
+
+

+ + Råvarer & Priser +

+

+ Administrer råvarer, enheder og priser til kalkulationer +

+
+ +
+ + {/* Search and Filter */} +
+
+
+ + setSearchTerm(e.target.value)} + className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent focus:border-transparent" + /> +
+ +
+
+ + {/* Ingredients by Category */} +
+ {Object.entries(groupedIngredients).map(([category, items]) => ( +
+
+

{category} ({items.length})

+
+
+ + + + + + + + + + + + {items.map((ingredient) => ( + + + + + + + + ))} + +
NavnEnhedPris/enhedLeverandørHandlinger
{ingredient.name}{ingredient.unit}{ingredient.pricePerUnit.toFixed(2)} kr{ingredient.supplier || '-'} +
+ + +
+
+
+
+ ))} +
+ + {filteredIngredients.length === 0 && ( +
+ +

Ingen råvarer fundet

+ {searchTerm && ( + + )} +
+ )} + +
+ Total: {ingredients.length} råvarer i databasen +
+
+ + {/* Edit/Create Modal */} + {(editingId || isCreating) && editedIngredient && ( +
+
+
+

+ {isCreating ? 'Opret ny råvare' : 'Rediger råvare'} +

+ +
+ +
+
+ + setEditedIngredient({...editedIngredient, name: e.target.value})} + className="w-full px-4 py-2 border border-gray-300 rounded-lg" + placeholder="F.eks. Kartofler" + /> +
+ +
+
+ + +
+ +
+ + +
+
+ +
+ + setEditedIngredient({...editedIngredient, pricePerUnit: parseFloat(e.target.value) || 0})} + className="w-full px-4 py-2 border border-gray-300 rounded-lg" + placeholder="0.00" + /> +
+ +
+ + setEditedIngredient({...editedIngredient, supplier: e.target.value})} + className="w-full px-4 py-2 border border-gray-300 rounded-lg" + placeholder="F.eks. Lokal, Supermarked, Slagter..." + /> +
+ +
+ +