timetracking/httpdocs/templates/client/index.html.twig

{# templates/client/index.html.twig #}
{% extends 'base.html.twig' %}

{% block title %}Kunden{% endblock %}

{% block body %}

<script>
window.CRUD = {
  apiBase: '/api/clients',
  clients: null,
};
</script>

<div class="crud-page">

  <div class="crud-page__header">
    <h1 class="crud-page__title">Kunden</h1>
    <button class="btn btn-primary" id="btn-new">Neuer Kunde</button>
  </div>

  <div class="crud-create" id="crud-create">
    <div class="entry-form__grid">

      <label class="entry-form__label">Name</label>
      <div class="entry-form__field">
        <input type="text" id="create-name" class="input" placeholder="Kundenname" />
      </div>

      <label class="entry-form__label">Stundensatz</label>
      <div class="entry-form__field" style="gap: 8px">
        <input type="number" id="create-rate" class="input" style="width:100px" placeholder="0,00" step="0.01" min="0" />
        <span style="color: var(--color-text-muted, #7a8a9a); font-size: 0.875rem">€</span>
      </div>

      <label class="entry-form__label">Bemerkung</label>
      <div class="entry-form__field">
        <textarea id="create-note" class="textarea" rows="2"></textarea>
      </div>

      <div class="entry-form__actions">
        <button type="button" class="btn btn-primary" id="btn-create-save">Erstellen</button>
        <button type="button" class="btn btn-secondary" id="btn-create-cancel">Abbrechen</button>
      </div>

    </div>
  </div>

  <div class="crud-tabs">
    <button class="crud-tab crud-tab--active" data-tab="active">Aktiv</button>
    <button class="crud-tab" data-tab="archived">Archiviert</button>
  </div>

  <div class="crud-list" id="crud-list">
    {% for client in clients %}
      <div class="crud-row{% if client.isArchived() %} crud-row--archived{% endif %}"
           id="client-{{ client.id }}"
           data-id="{{ client.id }}"
           data-archived="{{ client.isArchived() ? '1' : '0' }}"
           data-name="{{ client.name|e('html_attr') }}"
           data-rate="{{ client.hourlyRate|default('') }}"
           data-note="{{ client.note|default('')|e('html_attr') }}">

        <div class="crud-row__display">
          <div class="crud-row__info">
            <span class="crud-row__name">{{ client.name }}</span>
            <span class="crud-row__meta">
              {% set count = client.projects|length %}
              {{ count }} {{ count == 1 ? 'Projekt' : 'Projekte' }}
            </span>
          </div>
          <div class="crud-row__actions">
            {% if client.isArchived() %}
              <button class="crud-row__btn crud-row__btn--restore" data-action="unarchive" title="Wiederherstellen">
                <svg viewBox="0 0 16 16" fill="none"><path d="M2 8a6 6 0 1 1 1.5 3.5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/><path d="M2 13V9h4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
              </button>
            {% else %}
              <button class="crud-row__btn crud-row__btn--edit" data-action="edit" title="Bearbeiten">
                <svg viewBox="0 0 16 16" fill="none"><path d="M11 2l3 3L5 14H2v-3L11 2z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
              </button>
              <button class="crud-row__btn crud-row__btn--delete" data-action="delete" title="Löschen">
                <svg viewBox="0 0 16 16" fill="none"><path d="M3 4h10M6 4V2h4v2M5 4l.5 9h5l.5-9" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
              </button>
            {% endif %}
          </div>
        </div>

        {% if not client.isArchived() %}
        <div class="crud-row__edit" hidden>
          <div class="entry-form__grid entry-form__grid--inline">

            <label class="entry-form__label">Name</label>
            <div class="entry-form__field">
              <input type="text" class="input edit-name" value="{{ client.name }}" />
            </div>

            <label class="entry-form__label">Stundensatz</label>
            <div class="entry-form__field" style="gap: 8px">
              <input type="number" class="input edit-rate" style="width:100px"
                     value="{{ client.hourlyRate|default('') }}" step="0.01" min="0" />
              <span style="color: var(--color-text-muted, #7a8a9a); font-size: 0.875rem">€</span>
            </div>

            <label class="entry-form__label">Bemerkung</label>
            <div class="entry-form__field">
              <textarea class="textarea edit-note" rows="2">{{ client.note|default('') }}</textarea>
            </div>

            <div class="entry-form__actions">
              <button type="button" class="btn btn-primary" data-action="save">Sichern</button>
              <button type="button" class="btn btn-secondary" data-action="cancel">Abbrechen</button>
            </div>

          </div>
        </div>
        {% endif %}

      </div>
    {% else %}
      <div class="empty-state" style="padding: 2rem">
        <p class="empty-state__title">Noch keine Kunden angelegt.</p>
      </div>
    {% endfor %}
  </div>

</div>

{% endblock %}

{% block javascripts %}
  {{ parent() }}
  {{ encore_entry_script_tags('crud') }}
{% endblock %}