Recipe-app main

frontend/app/inventory/InventoryForm.tsx

@@ -0,0 +1,139 @@
+'use client';
+
+import { useState } from 'react';
+import { createInventoryItem } from './actions';
+import type { Product } from '../../features/inventory/types';
+
+type Props = {
+  products: Product[];
+};
+
+export default function InventoryForm({ products }: Props) {
+  const [isPending, setIsPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  return (
+    <form
+      onSubmit={async (e) => {
+        e.preventDefault();
+        setError(null);
+        setIsPending(true);
+
+        const form = e.currentTarget;
+        const formData = new FormData(form);
+
+        try {
+          await createInventoryItem(formData);
+          form.reset();
+        } catch (err) {
+          setError(err instanceof Error ? err.message : 'Okänt fel');
+        } finally {
+          setIsPending(false);
+        }
+      }}
+      style={{
+        display: 'grid',
+        gap: '0.75rem',
+        padding: '1rem',
+        border: '1px solid #ddd',
+        borderRadius: '8px',
+        marginBottom: '1.5rem',
+      }}
+    >
+      <h2 style={{ margin: 0 }}>Lägg till hemmavara</h2>
+
+      <label>
+        Produkt
+        <br />
+        <select name="productId" required style={{ width: '100%', padding: '0.5rem' }}>
+          <option value="">Välj produkt</option>
+          {products.map((product) => (
+            <option key={product.id} value={product.id}>
+              {product.canonicalName || product.name}
+            </option>
+          ))}
+        </select>
+      </label>
+
+      <label>
+        Mängd
+        <br />
+        <input
+          name="quantity"
+          type="number"
+          step="0.01"
+          min="0"
+          required
+          style={{ width: '100%', padding: '0.5rem' }}
+        />
+      </label>
+
+      <label>
+        Enhet
+        <br />
+        <input
+          name="unit"
+          type="text"
+          required
+          placeholder="g, kg, st, dl..."
+          style={{ width: '100%', padding: '0.5rem' }}
+        />
+      </label>
+
+      <label>
+        Plats
+        <br />
+        <select name="location" required style={{ width: '100%', padding: '0.5rem' }}>
+          <option value="">Välj plats</option>
+          <option value="Kyl">Kyl</option>
+          <option value="Frys">Frys</option>
+          <option value="Skafferi">Skafferi</option>
+          <option value="Annat">Annat</option>
+        </select>
+      </label>
+      
+       <label>
+        Varumärke
+        <br />
+        <input
+          name="brand"
+          type="text"
+          placeholder="t.ex. Eldorado, Kronfågel, Garant, ICA Basic, Motti"
+          style={{ width: '100%', padding: '0.5rem' }}
+        />
+      </label>
+
+      <label>
+        Passar till
+        <br />
+        <input
+          name="suitableFor"
+          type="text"
+          placeholder="Wok, Gryta..."
+          style={{ width: '100%', padding: '0.5rem' }}
+        />
+      </label>
+
+      <label>
+        Bäst före
+        <br />
+        <input
+          name="bestBeforeDate"
+          type="date"
+          style={{ width: '100%', padding: '0.5rem' }}
+        />
+      </label>
+
+      <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+        <input name="opened" type="checkbox" />
+        Öppnad
+      </label>
+
+      <button type="submit" disabled={isPending} style={{ padding: '0.75rem' }}>
+        {isPending ? 'Sparar...' : 'Lägg till'}
+      </button>
+
+      {error ? <p style={{ color: 'crimson', margin: 0 }}>{error}</p> : null}
+    </form>
+  );
+}