PenParse/penparse/webui/templates/dashboard.html

{% extends "main.html" %} 
{% load markdown_deux_tags %}
{% block content %}
<section class="mb-16">
  <h1 class="text-4xl font-bold text-gray-800 mb-4">Your Dashboard</h1>
  <p class="text-xl text-gray-600 mb-8">
    View and manage your analyzed documents
  </p>

  <div class="mb-8">
    <a href="{% url 'settings' %}" class="text-blue-500 hover:text-blue-600"
      >Go to Settings</a
    >
  </div>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    {% for document in documents %}
<div
      class="bg-white p-6 rounded-lg shadow border-2 border-dotted border-gray-300"
    >
      <img
        src="{% url 'document_thumbnail' pk=document.id %}"
        alt="{{ document.title }} thumbnail"
        class="w-full h-48 object-cover mb-4 rounded"
      />
      <table class="w-full text-sm">
        <tr>
          <td class="font-medium pr-4">Status:</td>
          <td>
            <span
              class="px-3 py-1 text-sm font-medium rounded-full {% if document.status == 'pending' %} bg-gray-200 text-gray-800 {% elif document.status == 'processing' %} bg-blue-200 text-blue-800 {% elif document.status == 'done' %} bg-green-200 text-green-800 {% elif document.status == 'error' %} bg-red-200 text-red-800 {% endif %}"
            >
              {{ document.status|title }}
            </span>
          </td>
        </tr>
        <tr>
          <td class="font-medium pr-4">Created:</td>
          <td class="text-gray-600">{{ document.created_at|date:"d/m/Y H:i:s" }}</td>
        </tr>
        <tr>
          <td class="font-medium pr-4">Updated:</td>
          <td class="text-gray-600">{{ document.updated_at|date:"d/m/Y H:i:s" }}</td>
        </tr>
      </table>
  {% if document.content %}
  <div class="text-gray-700 mb-4">
    <h4 class="font-semibold mb-2">Content Preview:</h4>
    <div class="prose prose-sm">
      {{ document.content|truncatechars_html:100|markdown }}
      </div>
    </div>
  {% endif %}
  <div class="flex justify-between items-center">
    <a
      href="{% url 'view_document' document.id %}"
      class="text-blue-500 hover:text-blue-600"
      >View</a
    >
    <a
      href="{% url 'download_document' document.id %}"
      class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-green-600 transition duration-300"
      >Export</a
    >
    <form
      action="{% url 'delete_document' document.id %}"
      method="post"
      onsubmit="return confirm('Are you sure you want to delete this document?');"
    >
      {% csrf_token %}
      <button
        type="submit"
        class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 transition duration-300"
      >
        Delete
      </button>
    </form>
  </div>
</div>
    {% empty %}
    <p class="col-span-full text-center text-gray-600">
      You haven't uploaded any documents yet.
    </p>
    {% endfor %}
  </div>
</section>
<section class="text-center">
  <h2 class="text-3xl font-bold text-gray-800 mb-6">Upload a New Document</h2>
  <form
    action="{% url 'upload_document' %}"
    method="post"
    enctype="multipart/form-data"
    id="upload-form"
  >
    {% csrf_token %}
    <div 
      id="drop-area"
      class="border-2 border-dashed border-gray-300 rounded-lg p-8 mb-4 transition-colors duration-300 ease-in-out hover:border-blue-500 cursor-pointer"
    >
      <input
        type="file"
        name="document"
        id="fileElem"
        class="hidden"
        accept=".png,.jpg,.jpeg"
      />
      <label for="fileElem" class="cursor-pointer">
        <div class="text-gray-500 mb-2">
          <svg class="w-12 h-12 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
          </svg>
          <p class="text-lg font-medium">Drag & drop your file here</p>
          <p class="text-sm">or click to select a file</p>
        </div>
      </label>
    </div>
    <p id="file-name" class="text-gray-600 mb-4 hidden"></p>
    <button
      type="submit"
      id="upload-button"
      class="bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600 transition duration-300 hidden"
    >
      Upload Document
    </button>
  </form>
</section>

<script>
  const dropArea = document.getElementById('drop-area');
  const fileInput = document.getElementById('fileElem');
  const fileName = document.getElementById('file-name');
  const uploadButton = document.getElementById('upload-button');

  ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, preventDefaults, false);
  });

  function preventDefaults(e) {
    e.preventDefault();
    e.stopPropagation();
  }

  ['dragenter', 'dragover'].forEach(eventName => {
    dropArea.addEventListener(eventName, highlight, false);
  });

  ['dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, unhighlight, false);
  });

  function highlight() {
    dropArea.classList.add('border-blue-500', 'bg-blue-50');
  }

  function unhighlight() {
    dropArea.classList.remove('border-blue-500', 'bg-blue-50');
  }

  dropArea.addEventListener('drop', handleDrop, false);

  function handleDrop(e) {
    const dt = e.dataTransfer;
    const files = dt.files;
    handleFiles(files);
  }

  fileInput.addEventListener('change', function() {
    handleFiles(this.files);
  });

  function handleFiles(files) {
    if (files.length > 0) {
      fileName.textContent = `Selected file: ${files[0].name}`;
      fileName.classList.remove('hidden');
      uploadButton.classList.remove('hidden');
    }
  }
</script>

{% endblock %}