diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..5d14b7f --- /dev/null +++ b/.env.example @@ -0,0 +1,15 @@ +# Appwrite – für Frontend (Vite) und Setup-Skript +# Erstelle eine Kopie: .env (wird von Git ignoriert) + +# Öffentliche Werte (werden im Frontend verwendet – nur VITE_* wird eingebunden) +VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1 +VITE_APPWRITE_PROJECT_ID=dein-projekt-id +VITE_APPWRITE_DATABASE_ID=defekttrack_db + +# Nur für das Setup-Skript (npm run setup) und API-Server – nicht im Frontend +APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1 +APPWRITE_API_KEY=dein-api-key-hier + +# Admin-API: Nur für POST /api/admin/create-user (Frontend sendet diesen Wert im Header) +ADMIN_SECRET=dein-geheimes-admin-token +VITE_ADMIN_SECRET=dein-geheimes-admin-token diff --git a/LOCAL_SETUP.md b/LOCAL_SETUP.md new file mode 100644 index 0000000..06dc877 --- /dev/null +++ b/LOCAL_SETUP.md @@ -0,0 +1,134 @@ +# DefektTrack / AssetsTracker – lokal starten (Schritt für Schritt) + +## Voraussetzungen + +- **Node.js** (z. B. v18 oder v20) – [nodejs.org](https://nodejs.org) +- **Appwrite** – entweder: + - **Appwrite Cloud**: [cloud.appwrite.io](https://cloud.appwrite.io) (kostenloser Account), oder + - **Appwrite lokal** mit Docker (siehe unten) + +--- + +## Schritt 1: Abhängigkeiten installieren + +Im Projektordner im Terminal ausführen: + +```bash +npm install +``` + +--- + +## Schritt 2: Umgebungsvariablen einrichten + +1. **Datei `.env` anlegen** (im Projektroot, neben `package.json`): + + ```bash + copy .env.example .env + ``` + (Unter Linux/macOS: `cp .env.example .env`) + +2. **`.env` bearbeiten** und die Platzhalter ersetzen: + + - **VITE_APPWRITE_ENDPOINT** + - Appwrite Cloud: `https://cloud.appwrite.io/v1` + - Lokal mit Docker: `http://localhost/v1` (oder deine Appwrite-URL) + - **VITE_APPWRITE_PROJECT_ID** + Projekt-ID aus der Appwrite Console (Projekt → Settings). + - **VITE_APPWRITE_DATABASE_ID** + Optional; Standard: `defekttrack_db`. + - **APPWRITE_ENDPOINT** + Gleich wie `VITE_APPWRITE_ENDPOINT` (wird nur für `npm run setup` genutzt). + - **APPWRITE_API_KEY** + API-Key aus Appwrite: Projekt → Settings → API Keys → „Create API Key“ (mit Scopes z. B. für Databases, Users, Teams). + **Wichtig:** Den Key nur für Setup verwenden und nicht im Frontend oder in Git committen. + - **ADMIN_SECRET** / **VITE_ADMIN_SECRET** (gleicher Wert) + Nur nötig, wenn du im Admin-Panel **Benutzer hinzufügen** nutzen willst. Beliebiges geheimes Token; das Backend prüft es beim Aufruf von `POST /api/admin/create-user`. + +--- + +## Schritt 3: Appwrite-Projekt und Datenbank einrichten (einmalig) + +Damit die App funktioniert, müssen Datenbank, Collections und ein Admin-User angelegt werden: + +```bash +npm run setup +``` + +Das Skript legt u. a. an: + +- Datenbank und Collections (locations, users_meta, lagerstandorte, assets, audit_logs) +- Teams (admin, firmenleiter, filialleiter, service, lager) +- Standard-Filiale „Hauptfiliale“ +- Admin-User: **admin@defekttrack.local** / **Admin1234!** + +Nach dem Setup den API-Key aus der `.env` entfernen oder durch einen eingeschränkten Key ersetzen, wenn du ihn nicht mehr brauchst. + +--- + +## Schritt 4: Entwicklungsserver starten + +```bash +npm run dev +``` + +Die App läuft dann z. B. unter **http://localhost:5173** (oder der in der Konsole angezeigten URL). + +**Benutzer aus dem Admin-Panel anlegen:** Dafür muss zusätzlich der API-Server laufen (in einem zweiten Terminal): + +```bash +npm run dev:api +``` + +Vite leitet Anfragen an `/api` an diesen Server weiter. In der `.env` müssen `ADMIN_SECRET` und `VITE_ADMIN_SECRET` (gleicher Wert) gesetzt sein. + +--- + +## Kurzüberblick + +| Befehl | Beschreibung | +|-------------------|--------------------------------------| +| `npm install` | Abhängigkeiten installieren | +| `npm run setup` | Appwrite-Datenbank & Admin einrichten (einmalig) | +| `npm run dev` | App lokal starten (Vite Dev-Server) | +| `npm run dev:api` | API-Server für „Benutzer hinzufügen“ (zweites Terminal) | +| `npm run build` | Produktions-Build erstellen | +| `npm run preview` | Build lokal ansehen | + +--- + +## Optional: Appwrite komplett lokal mit Docker + +Wenn du **keinen** Appwrite-Cloud-Account nutzen willst: + +1. [Docker](https://www.docker.com/products/docker-desktop/) installieren. +2. Appwrite starten (offizielle Anleitung: [appwrite.io/docs/installation](https://appwrite.io/docs/installation)). + + Beispiel mit Docker Compose im Projektordner: + + ```bash + curl -o docker-compose.yml https://appwrite.io/docker-compose.yml + docker compose up -d + ``` + +3. Im Browser **http://localhost** (oder die angegebene URL) öffnen und ein neues Projekt anlegen. +4. In der `.env` eintragen: + - `VITE_APPWRITE_ENDPOINT` = `http://localhost/v1` (oder deine Appwrite-URL) + - `APPWRITE_ENDPOINT` = gleicher Wert + - `VITE_APPWRITE_PROJECT_ID` = ID des neu angelegten Projekts + - `APPWRITE_API_KEY` = API-Key aus dem Projekt (Settings → API Keys) + +Dann wie oben **Schritt 3** (`npm run setup`) und **Schritt 4** (`npm run dev`) ausführen. + +--- + +## Häufige Probleme + +- **„Bitte APPWRITE_ENDPOINT, VITE_APPWRITE_PROJECT_ID und APPWRITE_API_KEY in .env setzen“** + → `.env` anlegen (aus `.env.example`) und alle drei Werte eintragen. + +- **CORS / Verbindungsfehler** + → Endpoint-URL in `.env` prüfen (z. B. `https://cloud.appwrite.io/v1` ohne abschließenden Schrägstrich außer `/v1`). Bei lokalem Appwrite: korrekte Docker-URL und ggf. Host in Appwrite konfigurieren. + +- **Login funktioniert nicht** + → Nach `npm run setup` mit **admin@defekttrack.local** / **Admin1234!** einloggen. Bei Cloud: ggf. E-Mail-Verifizierung in den Appwrite-Projekteinstellungen anpassen. diff --git a/package-lock.json b/package-lock.json index 9a080eb..293685a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,9 @@ "appwrite": "^21.2.1", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", + "cors": "^2.8.6", + "dotenv": "^17.3.1", + "express": "^5.2.1", "lucide-react": "^0.577.0", "next-themes": "^0.4.6", "react": "^19.0.0", diff --git a/package.json b/package.json index f9fa307..9e3f497 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "type": "module", "scripts": { "dev": "vite", + "dev:api": "node server/index.js", "build": "vite build", "lint": "eslint .", "preview": "vite preview", @@ -18,6 +19,9 @@ "appwrite": "^21.2.1", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", + "cors": "^2.8.6", + "dotenv": "^17.3.1", + "express": "^5.2.1", "lucide-react": "^0.577.0", "next-themes": "^0.4.6", "react": "^19.0.0", @@ -27,6 +31,7 @@ "sonner": "^2.0.7", "tailwind-merge": "^3.5.0", "tailwindcss": "^4.0.14", + "node-appwrite": "^22.1.3", "tw-animate-css": "^1.4.0" }, "devDependencies": { @@ -39,7 +44,6 @@ "eslint-plugin-react-hooks": "^5.0.0", "eslint-plugin-react-refresh": "^0.4.18", "globals": "^15.14.0", - "node-appwrite": "^22.1.3", "prettier": "3.5.3", "vite": "^6.1.0" } diff --git a/server/index.js b/server/index.js new file mode 100644 index 0000000..994f0cd --- /dev/null +++ b/server/index.js @@ -0,0 +1,131 @@ +import dotenv from 'dotenv'; +import { fileURLToPath } from 'url'; +import { dirname, resolve } from 'path'; + +const __dirname = dirname(fileURLToPath(import.meta.url)); +dotenv.config({ path: resolve(__dirname, '..', '.env') }); + +import express from 'express'; +import cors from 'cors'; +import { Client, Users, Teams, Databases, ID, Query } from 'node-appwrite'; + +const ENDPOINT = process.env.APPWRITE_ENDPOINT; +const PROJECT_ID = process.env.VITE_APPWRITE_PROJECT_ID; +const API_KEY = process.env.APPWRITE_API_KEY; +const DATABASE_ID = process.env.VITE_APPWRITE_DATABASE_ID || 'defekttrack_db'; +const ADMIN_SECRET = process.env.ADMIN_SECRET; + +const TEAM_ROLES = ['admin', 'firmenleiter', 'filialleiter', 'service', 'lager']; + +// #region agent log +function debugLog(location, message, data, hypothesisId) { + const payload = { sessionId: '405dbc', location, message, data: data || {}, timestamp: Date.now(), hypothesisId }; + fetch('http://127.0.0.1:7886/ingest/990166f5-529c-4789-bcc2-9ebbe976f059', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-Debug-Session-Id': '405dbc' }, body: JSON.stringify(payload) }).catch(() => {}); +} +// #endregion + +const app = express(); +app.use(cors({ origin: true, credentials: true })); +app.use(express.json()); + +function requireAdminSecret(req, res, next) { + const secret = req.headers['x-admin-secret']; + if (!ADMIN_SECRET || secret !== ADMIN_SECRET) { + // #region agent log + debugLog('server/index.js:middleware', '403 admin secret mismatch', { hasServerSecret: !!ADMIN_SECRET, hasHeader: !!secret, headerLength: typeof secret === 'string' ? secret.length : 0 }, 'C'); + // #endregion + return res.status(403).json({ error: 'Forbidden – ADMIN_SECRET und VITE_ADMIN_SECRET in .env müssen identisch sein. Beide Dev-Server (Vite + npm run dev:api) nach .env-Änderung neu starten.' }); + } + next(); +} + +app.post('/api/admin/create-user', requireAdminSecret, async (req, res) => { + // #region agent log + debugLog('server/index.js:route', 'create-user route hit', { bodyKeys: Object.keys(req.body || {}) }, 'A'); + // #endregion + try { + const { email, password, name, locationId, role, mustChangePassword } = req.body || {}; + if (!email || !password || !name || !locationId || !role) { + return res.status(400).json({ + error: 'Fehlende Felder', + required: ['email', 'password', 'name', 'locationId', 'role'], + }); + } + if (!TEAM_ROLES.includes(role)) { + return res.status(400).json({ + error: 'Ungültige Rolle', + allowed: TEAM_ROLES, + }); + } + if (!ENDPOINT || !PROJECT_ID || !API_KEY) { + // #region agent log + debugLog('server/index.js:env', 'env missing', { hasEndpoint: !!ENDPOINT, hasProjectId: !!PROJECT_ID, hasApiKey: !!API_KEY }, 'B'); + // #endregion + return res.status(500).json({ error: 'Server-Konfiguration unvollständig (APPWRITE_ENDPOINT, VITE_APPWRITE_PROJECT_ID, APPWRITE_API_KEY in .env prüfen)' }); + } + // #region agent log + debugLog('server/index.js:env', 'env check passed', { hasEndpoint: true, hasProjectId: true, hasApiKey: true }, 'B'); + // #endregion + + const client = new Client().setEndpoint(ENDPOINT).setProject(PROJECT_ID).setKey(API_KEY); + const users = new Users(client); + const teams = new Teams(client); + const databases = new Databases(client); + + let userId; + // #region agent log + debugLog('server/index.js:users', 'before users.create', { email: !!email, role }, 'D'); + // #endregion + try { + const user = await users.create(ID.unique(), email, undefined, password, name); + userId = user.$id; + } catch (err) { + // #region agent log + debugLog('server/index.js:users', 'users.create failed', { code: err.code, message: err.message }, 'D'); + // #endregion + if (err.code === 409) { + const list = await users.list([Query.equal('email', [email])]); + if (list.users.length > 0) userId = list.users[0].$id; + } + if (!userId) { + return res.status(400).json({ error: err.message || 'User anlegen fehlgeschlagen' }); + } + } + + try { + await teams.createMembership(role, [], email, userId, undefined, `${ENDPOINT}/auth/confirm`); + } catch (err) { + if (err.code !== 409) { + console.warn('Team-Membership:', err.message); + } + } + + try { + await databases.createDocument(DATABASE_ID, 'users_meta', ID.unique(), { + userId, + locationId: locationId || '', + userName: name, + role, + mustChangePassword: mustChangePassword !== false, + }); + } catch (err) { + if (err.code !== 409) { + console.warn('users_meta:', err.message); + } + } + + return res.status(201).json({ userId, email, name, role, locationId }); + } catch (err) { + // #region agent log + debugLog('server/index.js:outer', 'outer catch 500', { message: err.message, code: err?.code, name: err?.name }, 'E'); + // #endregion + console.error('create-user error:', err); + const message = err.message || err.toString?.() || 'Interner Serverfehler'; + return res.status(500).json({ error: message }); + } +}); + +const PORT = process.env.API_PORT || 3001; +app.listen(PORT, () => { + console.log(`API server http://localhost:${PORT}`); +}); diff --git a/src/components/AdminPanel.jsx b/src/components/AdminPanel.jsx index 6f0bf9b..b9a8181 100644 --- a/src/components/AdminPanel.jsx +++ b/src/components/AdminPanel.jsx @@ -3,9 +3,7 @@ import { databases, DATABASE_ID } from '@/lib/appwrite'; import { ID, Query } from 'appwrite'; import Header from './Header'; import { useToast } from '@/hooks/useToast'; -import { useAuth } from '@/context/AuthContext'; -import LagerstandortManager from './LagerstandortManager'; -import { useLagerstandorte } from '@/hooks/useLagerstandorte'; +import FilialDetail from './FilialDetail'; import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Button } from '@/components/ui/button'; @@ -13,16 +11,10 @@ import { Badge } from '@/components/ui/badge'; import { Separator } from '@/components/ui/separator'; export default function AdminPanel() { - const { user, userMeta } = useAuth(); const { showToast } = useToast(); - const locationId = userMeta?.locationId || ''; - const { lagerstandorte, addLagerstandort, toggleLagerstandort, deleteLagerstandort } = useLagerstandorte(locationId); - const [stats, setStats] = useState({ users: 0, locations: 0, assets: 0, lagerstandorte: 0 }); + const [stats, setStats] = useState({ users: 0, locations: 0, assets: 0, lagerstandorte: 0, locationsWithoutFilialleiter: 0 }); const [locations, setLocations] = useState([]); - const [usersList, setUsersList] = useState([]); - const [showLsManager, setShowLsManager] = useState(false); - const [newFiliale, setNewFiliale] = useState({ name: '', address: '' }); const [addingFiliale, setAddingFiliale] = useState(false); const [editingId, setEditingId] = useState(null); @@ -37,12 +29,15 @@ export default function AdminPanel() { databases.listDocuments(DATABASE_ID, 'lagerstandorte', [Query.limit(1)]), ]); setLocations(locsRes.documents); - setUsersList(usersRes.documents); + const locationsWithoutFilialleiter = locsRes.documents.filter( + (loc) => !usersRes.documents.some((u) => u.locationId === loc.$id && u.role === 'filialleiter') + ).length; setStats({ users: usersRes.total, locations: locsRes.total, assets: assetsRes.total, lagerstandorte: lsRes.total, + locationsWithoutFilialleiter, }); } catch (err) { console.error('Admin-Daten laden fehlgeschlagen:', err); @@ -93,6 +88,7 @@ export default function AdminPanel() { await databases.deleteDocument(DATABASE_ID, 'locations', id); setLocations((prev) => prev.filter((l) => l.$id !== id)); setStats((s) => ({ ...s, locations: s.locations - 1 })); + setEditingId((current) => (current === id ? null : current)); showToast(`Filiale "${loc.name}" gelöscht`, '#607D8B'); } catch (err) { showToast('Fehler beim Löschen: ' + (err.message || err), '#C62828'); @@ -112,7 +108,7 @@ export default function AdminPanel() { address: editForm.address.trim(), }); setLocations((prev) => prev.map((l) => l.$id === editingId ? updated : l)); - setEditingId(null); + setEditForm((f) => ({ ...f, name: updated.name, address: updated.address || '' })); showToast(`Filiale "${updated.name}" gespeichert`); } catch (err) { showToast('Fehler beim Speichern: ' + (err.message || err), '#C62828'); @@ -124,6 +120,7 @@ export default function AdminPanel() { { label: 'Filialen', value: stats.locations }, { label: 'Assets gesamt', value: stats.assets }, { label: 'Lagerstandorte', value: stats.lagerstandorte }, + { label: 'Filialen ohne Filialleiter', value: stats.locationsWithoutFilialleiter ?? 0 }, ]; return ( @@ -135,7 +132,7 @@ export default function AdminPanel() {

System-Übersicht und Verwaltung

-
+
{statItems.map((item) => ( @@ -146,38 +143,36 @@ export default function AdminPanel() { ))}
-
- {/* Filialen */} - - - Filialen verwalten - - -
- setNewFiliale((f) => ({ ...f, name: e.target.value }))} - placeholder="Filialname (z.B. Kaiserslautern)" - /> - setNewFiliale((f) => ({ ...f, address: e.target.value }))} - placeholder="Adresse (optional)" - /> - -
+ + + Filialen verwalten + + +
+ setNewFiliale((f) => ({ ...f, name: e.target.value }))} + placeholder="Filialname (z.B. Kaiserslautern)" + /> + setNewFiliale((f) => ({ ...f, address: e.target.value }))} + placeholder="Adresse (optional)" + /> + +
- + -
- {locations.length === 0 && ( -

Keine Filialen vorhanden

- )} - {locations.map((loc) => ( +
+ {locations.length === 0 && ( +

Keine Filialen vorhanden

+ )} + {locations.map((loc) => ( +
{editingId === loc.$id ? ( @@ -218,70 +213,20 @@ export default function AdminPanel() { )}
- ))} -
- - - - {/* Benutzer */} - - - Benutzer - - -
- {usersList.length === 0 && ( -

Keine Benutzer vorhanden

- )} - {usersList.map((u) => { - const loc = locations.find((l) => l.$id === u.locationId); - return ( -
-
- {u.userName || u.userId} - {u.role} -
- {loc?.name || '–'} -
- ); - })} -
- - - - {/* Lagerstandorte */} - - - Lagerstandorte - - - -
- {lagerstandorte.map((l) => ( -
- {l.name} - - {l.isActive ? 'Aktiv' : 'Inaktiv'} - -
- ))} -
- - -
+ {editingId === loc.$id && ( + setEditingId(null)} + showToast={showToast} + onUserAdded={loadData} + /> + )} +
+ ))} +
+ +
- - {showLsManager && ( - setShowLsManager(false)} - /> - )} ); } diff --git a/src/components/DefektTable.jsx b/src/components/DefektTable.jsx index c90277f..fa781c0 100644 --- a/src/components/DefektTable.jsx +++ b/src/components/DefektTable.jsx @@ -39,6 +39,12 @@ const STATUS_BADGE_CONFIG = { entsorgt: { variant: 'secondary' }, }; +const STATUS_BUTTON_CONFIG = { + offen: { variant: 'destructive', className: '' }, + in_bearbeitung: { variant: 'default', className: 'bg-amber-100 text-amber-800 hover:bg-amber-200 dark:bg-amber-900/30 dark:text-amber-400 dark:hover:bg-amber-800/40' }, + entsorgt: { variant: 'secondary', className: '' }, +}; + function resolveStandortName(asset, lagerstandorte) { if (!asset.lagerstandortId) return '–'; const ls = lagerstandorte.find((l) => l.$id === asset.lagerstandortId); @@ -221,7 +227,7 @@ export default function DefektTable({ assets, onChangeStatus, showToast, lagerst { setFilter('sortBy', v || 'prio'); closeFilter(); }} options={SORT_OPTIONS} /> - Aktionen + Aktionen @@ -231,6 +237,7 @@ export default function DefektTable({ assets, onChangeStatus, showToast, lagerst const overdue = isOverdue(a); const ageText = days === 0 ? 'Heute' : days === 1 ? '1 Tag' : `${days} Tage`; const badgeCfg = STATUS_BADGE_CONFIG[a.status] || STATUS_BADGE_CONFIG.offen; + const statusBtnCfg = STATUS_BUTTON_CONFIG[a.status] || STATUS_BUTTON_CONFIG.offen; return ( - -
- - {a.kommentar && ( - - )} - + +
+ {a.zustaendig || '–'} +
diff --git a/src/components/FilialDetail.jsx b/src/components/FilialDetail.jsx new file mode 100644 index 0000000..4f70e72 --- /dev/null +++ b/src/components/FilialDetail.jsx @@ -0,0 +1,138 @@ +import { useState, useEffect, useCallback } from 'react'; +import { databases, DATABASE_ID } from '@/lib/appwrite'; +import { Query } from 'appwrite'; +import { useLagerstandorte } from '@/hooks/useLagerstandorte'; +import LagerstandortManager from './LagerstandortManager'; +import UserCreateForm from './UserCreateForm'; +import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'; +import { Button } from '@/components/ui/button'; +import { Badge } from '@/components/ui/badge'; +import { Separator } from '@/components/ui/separator'; +import { AlertCircle } from 'lucide-react'; + +const ROLE_LABELS = { + admin: 'Admin', + firmenleiter: 'Firmenleiter', + filialleiter: 'Filialleiter', + service: 'Service', + lager: 'Lager', +}; + +export default function FilialDetail({ location: loc, onClose, showToast, onUserAdded }) { + const [users, setUsers] = useState([]); + const [showUserForm, setShowUserForm] = useState(false); + const [showLsManager, setShowLsManager] = useState(false); + + const { lagerstandorte, addLagerstandort, toggleLagerstandort, deleteLagerstandort } = useLagerstandorte(loc?.$id || ''); + + const loadUsers = useCallback(async () => { + if (!loc?.$id) return; + try { + const res = await databases.listDocuments(DATABASE_ID, 'users_meta', [ + Query.equal('locationId', [loc.$id]), + Query.limit(200), + ]); + setUsers(res.documents); + } catch (err) { + console.error('Benutzer laden fehlgeschlagen:', err); + } + }, [loc?.$id]); + + useEffect(() => { + loadUsers(); + }, [loadUsers]); + + const hasFilialleiter = users.some((u) => u.role === 'filialleiter'); + + return ( +
+
+

Details: {loc?.name}

+ +
+ + {!hasFilialleiter && ( +
+ + + Filialleiter fehlt + +
+ )} + +
+ + + Lagerstandorte + + + +
+ {lagerstandorte.length === 0 ? ( +

Keine Lagerstandorte

+ ) : ( + lagerstandorte.map((ls) => ( +
+ {ls.name} + {ls.isActive ? 'Aktiv' : 'Inaktiv'} +
+ )) + )} +
+ + + + + + Benutzer dieser Filiale + + + +
+ {users.length === 0 ? ( +

Keine Benutzer

+ ) : ( + users.map((u) => ( +
+ {u.userName || u.userId} + {ROLE_LABELS[u.role] || u.role} +
+ )) + )} +
+ + +
+ + {showLsManager && ( + setShowLsManager(false)} + /> + )} + + {showUserForm && ( + { + loadUsers(); + setShowUserForm(false); + onUserAdded?.(); + }} + onCancel={() => setShowUserForm(false)} + showToast={showToast} + /> + )} +
+ ); +} diff --git a/src/components/UserCreateForm.jsx b/src/components/UserCreateForm.jsx new file mode 100644 index 0000000..e567c7d --- /dev/null +++ b/src/components/UserCreateForm.jsx @@ -0,0 +1,145 @@ +import { useState } from 'react'; +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogDescription, +} from '@/components/ui/dialog'; +import { Input } from '@/components/ui/input'; +import { Button } from '@/components/ui/button'; +import { Label } from '@/components/ui/label'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select'; + +const ROLE_OPTIONS = [ + { value: 'filialleiter', label: 'Filialleiter' }, + { value: 'service', label: 'Service' }, + { value: 'lager', label: 'Lager' }, + { value: 'firmenleiter', label: 'Firmenleiter' }, +]; + +const API_BASE = import.meta.env.VITE_API_URL || ''; + +export default function UserCreateForm({ locationId, locationName, onSuccess, onCancel, showToast }) { + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [name, setName] = useState(''); + const [role, setRole] = useState('service'); + const [submitting, setSubmitting] = useState(false); + + async function handleSubmit(e) { + e.preventDefault(); + if (!email.trim() || !password || !name.trim() || !locationId) return; + setSubmitting(true); + try { + const res = await fetch(`${API_BASE}/api/admin/create-user`, { + method: 'POST', + headers: { 'Content-Type': 'application/json', 'X-Admin-Secret': import.meta.env.VITE_ADMIN_SECRET || '' }, + body: JSON.stringify({ + email: email.trim(), + password, + name: name.trim(), + locationId, + role, + mustChangePassword: false, + }), + }); + const data = await res.json().catch(() => ({})); + if (!res.ok) { + const msg = data?.error || (res.status === 500 ? 'API-Server prüfen (npm run dev:api) und .env (ADMIN_SECRET, APPWRITE_*)' : 'Fehler beim Anlegen'); + showToast(msg, '#C62828'); + return; + } + showToast(`Benutzer ${name.trim()} angelegt`); + onSuccess(); + } catch (err) { + showToast(err.message || 'Fehler beim Anlegen', '#C62828'); + } finally { + setSubmitting(false); + } + } + + return ( + !open && onCancel()}> + + + Benutzer hinzufügen + + Neuer Benutzer für Filiale {locationName || locationId} + + +
+
+ + setEmail(e.target.value)} + placeholder="name@beispiel.de" + required + autoComplete="off" + className="mt-1" + /> +
+
+ + setPassword(e.target.value)} + placeholder="••••••••" + required + minLength={8} + autoComplete="new-password" + className="mt-1" + /> +
+
+ + setName(e.target.value)} + placeholder="Max Mustermann" + required + autoComplete="off" + className="mt-1" + /> +
+
+ + +
+
+ + +
+
+ + + ); +} diff --git a/vite.config.js b/vite.config.js index fc908eb..a23a5b8 100644 --- a/vite.config.js +++ b/vite.config.js @@ -12,6 +12,10 @@ export default defineConfig({ }, server: { proxy: { + '/api': { + target: 'http://localhost:3001', + changeOrigin: true, + }, '/v1': { target: 'https://appwrite.webklar.com', changeOrigin: true,