notebook/app/views/data/documents.html.erb

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
  <div class="flex items-center mb-8">
    <%= link_to data_vault_path, class: 'text-gray-500 hover:text-gray-700 mr-3', title: "Back to your Data Vault" do %>
      <i class="material-icons">arrow_back</i>
    <% end %>
    <h1 class="text-3xl font-bold text-gray-700">Document statistics</h1>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
    <div class="bg-indigo-600 rounded-lg shadow-md p-6 text-center text-white">
      <h2 class="text-4xl font-bold mb-2">
        <%= number_with_delimiter @documents.sum { |doc| doc.cached_word_count || 0 } %>
      </h2>
      <p class="text-indigo-100">total words written</p>
    </div>
    
    <%= link_to documents_path, class: "block" do %>
      <div class="bg-indigo-600 rounded-lg shadow-md p-6 text-center text-white hover:bg-indigo-700 transition-colors">
        <h2 class="text-4xl font-bold mb-2">
          <%= number_with_delimiter @documents.count %>
        </h2>
        <p class="text-indigo-100">total documents</p>
      </div>
    <% end %>
    
    <div class="bg-indigo-600 rounded-lg shadow-md p-6 text-center text-white">
      <h2 class="text-4xl font-bold mb-2">
        <%= number_with_delimiter @revisions.count %>
      </h2>
      <p class="text-indigo-100">document versions</p>
    </div>
  </div>

  <div class="bg-white rounded-lg shadow-md mb-8 overflow-hidden">
    <div class="p-6 border-b border-gray-200">
      <h2 class="text-xl font-semibold text-gray-800">You've written <%= pluralize @documents.count, 'document' %> on Notebook.ai</h2>
    </div>

    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Title</th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Word count</th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">History</th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Analyzed?</th>
          </tr>
        </thead>

        <tbody class="bg-white divide-y divide-gray-200">
          <% @documents.each do |document| %>
            <tr class="hover:bg-gray-50">
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <i class="material-icons <%= Document.text_color %> mr-2"><%= Document.icon %></i>
                  <%= link_to document.title, document, class: "#{Document.text_color} hover:underline" %>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-gray-700">
                <%= number_with_delimiter(document.cached_word_count || 0) %>
                <%= 'word'.pluralize(document.cached_word_count || 0) %>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm text-gray-700">
                  Created <%= time_ago_in_words document.created_at %> ago
                  <span class="text-gray-500">
                    (<%= document.created_at.strftime("%m/%d/%Y") %>)
                  </span>
                </div>
                <div class="text-sm text-gray-700">
                  Last updated <%= time_ago_in_words document.updated_at %> ago
                  <span class="text-gray-500">
                    (<%= document.updated_at.strftime("%m/%d/%Y") %>)
                  </span>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <% if document.document_analysis.where.not(completed_at: nil).any? %>
                  <span class="font-medium">
                    <%= link_to 'Yes', analysis_document_path(document), class: 'text-orange-500 hover:text-orange-600 hover:underline' %>
                  </span>
                <% else %>
                  <%= link_to 'No', analysis_document_path(document), class: 'text-gray-600 hover:text-gray-800 hover:underline' %>
                <% end %>
              </td>
            </tr>
          <% end %>
        </tbody>
      </table>
    </div>
  </div>

  <div class="bg-white rounded-lg shadow-md mb-8">
    <div class="p-6 border-b border-gray-200">
      <h2 class="text-xl font-semibold text-gray-800 mb-4">Writing activity over time</h2>
      <p class="text-gray-600">
        Notebook.ai automatically creates backups of your documents as often as every five minutes as you're writing.
        The following charts estimate approximately how much time you spend writing in Notebook.ai each day
        based on how many of those automatic backups were created.
      </p>
    </div>
    
    <div class="p-6">
      <%=
        line_chart @revisions.where('created_at > ?', Date.current - 30.days).group_by_day(:created_at).map { |ts, c|
          [ts.split(' ').first, c * 5]
        },
        title: "Last 30 days",
        ytitle: "minutes",
        colors: [Document.color],
        suffix: " minutes",
        download: true
      %>
      
      <div class="my-8"></div>
      
      <%=
        line_chart @revisions.group_by_day(:created_at).map { |ts, c|
          [ts.split(' ').first, c * 5]
        },
        title: "All time",
        ytitle: "minutes",
        colors: [Document.color],
        suffix: " minutes",
        download: true
      %>
      
      <div class="text-center mt-8 text-gray-700">
        You have written something in a Notebook.ai document on
        <span class="font-bold">
          <%= @revisions.group_by_day(:created_at).keys.count %>
          different days!
        </span>
      </div>
    </div>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
    <div class="bg-white rounded-lg shadow-md">
      <div class="p-6 border-b border-gray-200 text-center">
        <h2 class="text-xl font-semibold text-gray-800">Words-written distribution per document</h2>
        <p class="text-gray-500 text-sm">(for your 10 longest documents)</p>
      </div>
      <div class="p-6">
        <%=
          pie_chart current_user.documents.where.not(cached_word_count: [0, nil]).order('cached_word_count DESC').limit(10).pluck(:title, :cached_word_count),
            suffix: ' words',
            legend: 'right',
            download: true
        %>
      </div>
    </div>
    
    <div class="bg-white rounded-lg shadow-md">
      <div class="p-6 border-b border-gray-200 text-center">
        <h2 class="text-xl font-semibold text-gray-800">Words-written distribution per document</h2>
        <p class="text-gray-500 text-sm">(for your 10 most recent documents)</p>
      </div>
      <div class="p-6">
        <%=
          pie_chart current_user.documents.where.not(cached_word_count: [0, nil]).order('documents.updated_at DESC').limit(10).pluck(:title, :cached_word_count),
            suffix: ' words',
            legend: 'left',
            download: true
        %>
      </div>
    </div>
  </div>

  <div class="bg-white rounded-lg shadow-md">
    <div class="p-6 border-b border-gray-200">
      <h2 class="text-xl font-semibold text-gray-800">Revisions per document</h2>
    </div>
    <div class="p-6">
      <%=
        bar_chart @revisions_per_document_data,
          suffix: ' revisions',
          colors: [Document.color],
          download: true
      %>
    </div>
  </div>
</div>