clientsflow/frontend/app/components/workspace/documents/CrmDocumentsPanel.vue

<script setup lang="ts">
import ContactCollaborativeEditor from "~~/app/components/ContactCollaborativeEditor.client.vue";

type DocumentSortOption = {
  value: string;
  label: string;
};

type DocumentListItem = {
  id: string;
  title: string;
  scope: string;
  summary: string;
  updatedAt: string;
};

type SelectedDocument = {
  id: string;
  title: string;
  scope: string;
  owner: string;
  summary: string;
  body: string;
};

const props = defineProps<{
  documentSearch: string;
  documentSortMode: string;
  documentSortOptions: DocumentSortOption[];
  filteredDocuments: DocumentListItem[];
  selectedDocumentId: string;
  selectedDocument: SelectedDocument | null;
  formatDocumentScope: (scope: string) => string;
  formatStamp: (iso: string) => string;
}>();

const emit = defineEmits<{
  (e: "update:documentSearch", value: string): void;
  (e: "update:documentSortMode", value: string): void;
  (e: "select-document", documentId: string): void;
  (e: "update-selected-document-body", value: string): void;
}>();
</script>

<template>
  <section class="flex h-full min-h-0 flex-col gap-0">
    <div class="grid h-full min-h-0 flex-1 gap-0 md:grid-cols-[248px_minmax(0,1fr)]">
      <aside class="h-full min-h-0 border-r border-base-300 flex flex-col">
        <div class="sticky top-0 z-20 border-b border-base-300 bg-base-100 p-2">
          <div class="flex items-center gap-1">
            <input
              :value="props.documentSearch"
              type="text"
              class="input input-bordered input-sm w-full"
              placeholder="Search documents"
              @input="emit('update:documentSearch', ($event.target as HTMLInputElement).value)"
            >

            <div class="dropdown dropdown-end">
              <button
                tabindex="0"
                class="btn btn-ghost btn-sm btn-square"
                title="Sort documents"
              >
                <svg viewBox="0 0 24 24" class="h-4 w-4 fill-current">
                  <path d="M3 5h18v2H3zm3 6h12v2H6zm4 6h4v2h-4z" />
                </svg>
              </button>

              <div tabindex="0" class="dropdown-content z-20 mt-2 w-44 rounded-xl border border-base-300 bg-base-100 p-2 shadow-lg">
                <p class="px-2 pb-1 text-[11px] font-semibold uppercase tracking-wide text-base-content/55">Sort docs</p>
                <button
                  v-for="option in props.documentSortOptions"
                  :key="`document-sort-${option.value}`"
                  class="btn btn-ghost btn-sm w-full justify-between"
                  @click="emit('update:documentSortMode', option.value)"
                >
                  <span>{{ option.label }}</span>
                  <span v-if="props.documentSortMode === option.value">✓</span>
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="min-h-0 flex-1 overflow-y-auto p-0">
          <button
            v-for="doc in props.filteredDocuments"
            :key="doc.id"
            class="w-full border-b border-base-300 px-3 py-2 text-left transition hover:bg-base-200/40"
            :class="props.selectedDocumentId === doc.id ? 'bg-primary/10' : ''"
            @click="emit('select-document', doc.id)"
          >
            <div class="flex items-start justify-between gap-2">
              <p class="min-w-0 flex-1 truncate text-xs font-semibold">{{ doc.title }}</p>
            </div>
            <p class="mt-0.5 truncate text-[11px] text-base-content/75">{{ props.formatDocumentScope(doc.scope) }}</p>
            <p class="mt-0.5 line-clamp-2 text-[11px] text-base-content/70">{{ doc.summary }}</p>
            <p class="mt-1 text-[10px] text-base-content/55">Updated {{ props.formatStamp(doc.updatedAt) }}</p>
          </button>
          <p v-if="props.filteredDocuments.length === 0" class="px-2 py-2 text-xs text-base-content/55">
            No documents found.
          </p>
        </div>
      </aside>

      <article class="h-full min-h-0 flex flex-col">
        <div v-if="props.selectedDocument" class="flex h-full min-h-0 flex-col p-3 md:p-4">
          <div class="border-b border-base-300 pb-2">
            <p class="font-medium">{{ props.selectedDocument.title }}</p>
            <p class="text-xs text-base-content/60">
              {{ props.formatDocumentScope(props.selectedDocument.scope) }} · {{ props.selectedDocument.owner }}
            </p>
            <p class="mt-1 text-sm text-base-content/80">{{ props.selectedDocument.summary }}</p>
          </div>

          <div class="mt-3 min-h-0 flex-1 overflow-y-auto">
            <ContactCollaborativeEditor
              :key="`doc-editor-${props.selectedDocument.id}`"
              :model-value="props.selectedDocument.body"
              :room="`crm-doc-${props.selectedDocument.id}`"
              placeholder="Describe policy, steps, rules, and exceptions..."
              @update:model-value="emit('update-selected-document-body', $event)"
            />
          </div>
        </div>

        <div v-else class="flex h-full items-center justify-center text-sm text-base-content/60">
          No document selected.
        </div>
      </article>
    </div>
  </section>
</template>