190 lines
9.0 KiB
HTML
190 lines
9.0 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>CRM – Accounts</title>
|
||
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link rel="stylesheet" href="/css/app.css" />
|
||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.1/dist/cdn.min.js"></script>
|
||
|
||
<script type="module" src="/js/store.js"></script>
|
||
<script type="module" src="/js/components/notifications.js"></script>
|
||
<script type="module" src="/components/account-list.js"></script>
|
||
</head>
|
||
<body class="min-h-screen bg-slate-50">
|
||
|
||
<!-- Toast container -->
|
||
<div x-data="toastContainer()" class="crm-toast-container" x-cloak>
|
||
<template x-for="n in items" :key="n.id">
|
||
<div class="crm-toast" :class="'toast-' + n.type"
|
||
@click="dismiss(n.id)" x-text="n.message"></div>
|
||
</template>
|
||
</div>
|
||
|
||
<!-- Layout shell -->
|
||
<div x-data="{ init: () => Alpine.store('auth').init() }" x-init="init()" class="flex min-h-screen">
|
||
|
||
<aside class="crm-sidebar">
|
||
<div class="px-6 py-4 text-white text-lg font-bold border-b border-slate-700">
|
||
<a href="/app.html" class="!text-white !border-0">CRM</a>
|
||
</div>
|
||
<nav class="mt-2">
|
||
<a href="/app.html">Dashboard</a>
|
||
<a href="/accounts.html" class="active">Accounts</a>
|
||
<a href="/contacts.html">Contacts</a>
|
||
<a href="/pipeline.html">Pipeline</a>
|
||
<a href="/activities.html">Activities</a>
|
||
<a href="/settings-profile.html">Profil</a>
|
||
<a href="/settings-users.html" x-show="$store.auth.isAdmin">Users (Admin)</a>
|
||
<a href="/settings-org.html" x-show="$store.auth.isAdmin">Org (Admin)</a>
|
||
</nav>
|
||
</aside>
|
||
|
||
<div class="flex-1 flex flex-col">
|
||
<header class="bg-white border-b border-slate-200 px-6 py-3 flex items-center justify-between">
|
||
<h1 class="text-xl font-semibold text-slate-800">Accounts</h1>
|
||
<div class="flex items-center gap-3 text-sm">
|
||
<span class="text-slate-600">
|
||
<strong class="text-slate-900"
|
||
x-text="$store.auth.user ? $store.auth.user.name : '…'"></strong>
|
||
</span>
|
||
<button class="btn-secondary" @click="$store.auth.logout()">Logout</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="flex-1 p-6" x-data="accountList()" x-init="init()">
|
||
|
||
<!-- Toolbar -->
|
||
<div class="crm-card mb-4 flex flex-wrap items-end gap-3">
|
||
<div class="flex-1 min-w-[12rem]">
|
||
<label class="crm-label" for="q">Suche (Name)</label>
|
||
<input id="q" type="text" x-model="q" @keyup.enter="search()"
|
||
class="crm-input" placeholder="z.B. Acme Corp" />
|
||
</div>
|
||
<div>
|
||
<label class="crm-label" for="industry">Branche</label>
|
||
<select id="industry" x-model="industry" class="crm-input">
|
||
<option value="">Alle</option>
|
||
<template x-for="i in industries" :key="i">
|
||
<option :value="i" x-text="i"></option>
|
||
</template>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="crm-label" for="size">Größe</label>
|
||
<select id="size" x-model="size" class="crm-input">
|
||
<option value="">Alle</option>
|
||
<template x-for="s in sizes" :key="s">
|
||
<option :value="s" x-text="s"></option>
|
||
</template>
|
||
</select>
|
||
</div>
|
||
<button @click="search()" class="btn-primary">Suchen</button>
|
||
<button @click="openCreate()" class="btn-primary ml-auto">+ New Account</button>
|
||
</div>
|
||
|
||
<!-- Loading -->
|
||
<div x-show="loading" class="crm-card text-center py-8">
|
||
<div class="crm-spinner mx-auto"></div>
|
||
<p class="text-slate-500 mt-2 text-sm">Lade Accounts …</p>
|
||
</div>
|
||
|
||
<!-- Table -->
|
||
<div x-show="!loading" class="overflow-x-auto">
|
||
<table class="crm-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Branche</th>
|
||
<th>Größe</th>
|
||
<th>Website</th>
|
||
<th>Owner</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<template x-for="a in accounts" :key="a.id">
|
||
<tr class="cursor-pointer"
|
||
@click="window.location.href = '/accounts-detail.html?id=' + a.id">
|
||
<td class="font-medium" x-text="a.name"></td>
|
||
<td><span class="crm-badge badge-blue" x-text="a.industry || '–'"></span></td>
|
||
<td x-text="a.size || '–'"></td>
|
||
<td class="text-blue-600 underline" x-text="a.website || '–'"></td>
|
||
<td x-text="a.owner_id"></td>
|
||
</tr>
|
||
</template>
|
||
<tr x-show="!loading && accounts.length === 0">
|
||
<td colspan="5" class="text-center text-slate-500 py-6">
|
||
Keine Accounts gefunden.
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- Pagination -->
|
||
<div class="flex items-center justify-between mt-4 text-sm text-slate-600"
|
||
x-show="!loading">
|
||
<span x-text="pageInfo"></span>
|
||
<div class="flex gap-2">
|
||
<button @click="prevPage()" :disabled="skip === 0" class="btn-secondary">← Zurück</button>
|
||
<button @click="nextPage()" :disabled="skip + limit >= total" class="btn-secondary">Weiter →</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Create modal -->
|
||
<div x-show="showCreate" x-cloak class="crm-modal-backdrop"
|
||
@click.self="closeCreate()">
|
||
<div class="crm-modal p-6">
|
||
<h2 class="text-lg font-semibold mb-4">Neuer Account</h2>
|
||
<form @submit.prevent="submitCreate()">
|
||
<div class="mb-3">
|
||
<label class="crm-label">Name *</label>
|
||
<input type="text" required minlength="1" maxlength="255"
|
||
x-model="createForm.name" class="crm-input" />
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="crm-label">Website</label>
|
||
<input type="text" maxlength="512"
|
||
x-model="createForm.website" class="crm-input" />
|
||
</div>
|
||
<div class="grid grid-cols-2 gap-3 mb-3">
|
||
<div>
|
||
<label class="crm-label">Branche</label>
|
||
<select x-model="createForm.industry" class="crm-input">
|
||
<option value="">(keine)</option>
|
||
<template x-for="i in industries" :key="i">
|
||
<option :value="i" x-text="i"></option>
|
||
</template>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="crm-label">Größe</label>
|
||
<select x-model="createForm.size" class="crm-input">
|
||
<option value="">(keine)</option>
|
||
<template x-for="s in sizes" :key="s">
|
||
<option :value="s" x-text="s"></option>
|
||
</template>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div x-show="createError" class="mb-3 p-2 bg-red-50 text-red-700 text-sm rounded"
|
||
x-text="createError"></div>
|
||
<div class="flex gap-2 justify-end">
|
||
<button type="button" @click="closeCreate()" class="btn-secondary">Abbrechen</button>
|
||
<button type="submit" :disabled="creating" class="btn-primary">
|
||
<span x-text="creating ? 'Speichere …' : 'Anlegen'"></span>
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|