docuseal/app/views/submissions/show.html.erb

<div style="max-width: 1600px" class="mx-auto pl-4">
  <div class="flex justify-between py-1.5 items-center pr-4">
    <div class="flex space-x-3">
      <a href="/"><%= render 'shared/logo' %></a>
      <span class="text-3xl font-semibold focus:text-clip"><%= @submission.template.name %></span>
    </div>
    <div class="space-x-3 flex items-center">
      <% if last_submitter = @submission.submitters.select(&:completed_at?).max_by(&:completed_at) %>
        <download-button data-src="<%= submitter_download_index_path(last_submitter.slug) %>" class="base-button">
          <span class="flex items-center justify-center space-x-2" data-target="download-button.defaultButton">
            <%= svg_icon('download', class: 'w-6 h-6') %>
            <span>Download</span>
          </span>
          <span class="flex items-center justify-center space-x-2 hidden" data-target="download-button.loadingButton">
            <%= svg_icon('loader', class: 'w-6 h-6 animate-spin') %>
            <span>Downloading</span>
          </span>
        </download-button>
      <% end %>
    </div>
  </div>
  <div class="flex" style="max-height: calc(100vh - 60px)">
    <div class="overflow-y-auto overflow-x-hidden w-52 flex-none pr-3 mt-0.5 pt-0.5">
      <% @submission.template.schema.each do |item| %>
        <% document = @submission.template.documents.find { |a| item['attachment_uuid'] == a.uuid } %>
        <a href="#<%= "page-#{document.uuid}-0" %>" onclick="[event.preventDefault(), window[event.target.closest('a').href.split('#')[1]].scrollIntoView({ behavior: 'smooth', block: 'start' })]" class="block cursor-pointer">
          <img src="<%= document.preview_images.first.url %>" width="<%= document.preview_images.first.metadata['width'] %>" height="<%= document.preview_images.first.metadata['height'] %>" class="rounded border" loading="lazy" >
          <div class="pb-2 pt-1.5 text-center">
            <%= item['name'].presence || document.filename.base %>
          </div>
        </a>
      <% end %>
    </div>
    <div class="w-full overflow-y-auto overflow-x-hidden mt-0.5 pt-0.5">
      <div class="pr-3.5 pl-0.5">
        <% fields_index = Templates.build_field_areas_index(@submission.template) %>
        <% values = @submission.submitters.reduce({}) { |acc, sub| acc.merge(sub.values) } %>
        <% attachments_index = ActiveStorage::Attachment.where(record: @submission.submitters, name: :attachments).preload(:blob).index_by(&:uuid) %>
        <% @submission.template.schema.each do |item| %>
          <% document = @submission.template.documents.find { |e| e.uuid == item['attachment_uuid'] } %>
          <% document.preview_images.sort_by { |a| a.filename.base.to_i }.each_with_index do |page, index| %>
            <div id="<%= "page-#{document.uuid}-#{index}" %>" class="relative">
              <img src="<%= page.url %>" width="<%= page.metadata['width'] %>" class="shadow-md mb-4" height="<%= page.metadata['height'] %>" loading="lazy">
              <div class="top-0 bottom-0 left-0 right-0 absolute">
                <% fields_index.dig(document.uuid, index)&.each do |(area, field)| %>
                  <% value = values[field['uuid']] %>
                  <% next if value.blank? %>
                  <%= render 'submissions/value', area:, field:, attachments_index:, value: %>
                <% end %>
              </div>
            </div>
          <% end %>
        <% end %>
      </div>
    </div>
    <div class="relative w-80 flex-none pt-0.5 pr-4 pl-0.5 overflow-auto space">
      <% colors = ['bg-red-500', 'bg-sky-500', 'bg-emerald-500', 'bg-yellow-300', 'bg-purple-600'] %>
      <% submitter_fields_index = @submission.template.fields.group_by { |f| f['submitter_uuid'] } %>
      <% @submission.template.submitters.each_with_index do |item, index| %>
        <% submitter = @submission.submitters.find { |e| e.uuid == item['uuid'] } %>
        <div class="sticky -top-1 bg-base-100 pt-1 -mt-1 z-10">
          <div class="border border-base-300 rounded-md px-2 py-1 mb-1">
            <div class="flex items-center space-x-1 ">
              <span class="mx-1 w-3 h-3 rounded-full <%= colors[index] %>"></span>
              <span class="text-lg">
                <%= @submission.template.submitters.find { |e| e['uuid'] == submitter&.uuid }&.dig('name') || "#{(index + 1).ordinalize} Submitter" %>
              </span>
            </div>
            <div class="flex items-center space-x-1 mt-1">
              <%= svg_icon('mail', class: 'w-5 h-5') %>
              <span>
                <%= submitter&.email || 'N/A' %>
              </span>
            </div>
            <div class="flex items-center space-x-1 mt-1">
              <%= svg_icon('writing', class: 'w-5 h-5') %>
              <span>
                <%= submitter&.completed_at? ? l(submitter.completed_at, format: :long) : 'Not completed yet' %>
              </span>
            </div>
            <% if submitter && !submitter.completed_at? %>
              <div class="mt-2 mb-1">
                <a class="btn btn-xs btn-primary w-full" target="_blank" href="<%= submit_form_url(slug: submitter.slug) %>">
                  Submit Form
                </a>
              </div>
            <% end %>
          </div>
        </div>
        <div class="px-1.5 mb-4">
          <% submitter_field_counters = Hash.new { 0 } %>
          <% submitter_fields_index[item['uuid']].to_a.each_with_index do |field, index| %>
            <% submitter_field_counters[field['type']] += 1 %>
            <% value = values[field['uuid']] %>
            <% next if value.blank? %>
            <div class="pt-2.5 border-b border-base-300">
              <div class="text-xs font-medium uppercase mb-0.5">
                <%= field['name'].presence || "#{field['type'].titleize} Field #{submitter_field_counters[field['type']]}" %>
              </div>
              <div>
                <% if field['type'] == 'signature' %>
                  <div class="w-full bg-base-300">
                    <img class="object-contain mx-auto" height="<%= attachments_index[value].metadata['height'] %>" width="<%= attachments_index[value].metadata['width'] %>" src="<%= attachments_index[value].url %>" loading="lazy">
                  </div>
                <% elsif field['type'] == 'image' %>
                  <img class="object-contain mx-auto max-h-28" height="<%= attachments_index[value].metadata['height'] %>" width="<%= attachments_index[value].metadata['width'] %>" src="<%= attachments_index[value].url %>" loading="lazy">
                <% elsif field['type'] == 'file' %>
                  <div class="flex flex-col justify-center">
                    <% Array.wrap(value).each do |val| %>
                      <a target="_blank" class="flex items-center space-x-1" href="<%= attachments_index[val].url %>">
                        <%= svg_icon('paperclip', class: "w-4 h-4") %>
                        <span>
                          <%= attachments_index[val].filename %>
                        </span>
                      </a>
                    <% end %>
                  </div>
                <% elsif field['type'] == 'checkbox' %>
                  <%= svg_icon('check', class: "w-6 h-6") %>
                <% elsif field['type'] == 'date' %>
                  <%= l(Date.parse(value)) %>
                <% else %>
                  <%= Array.wrap(value).join(', ') %>
                <% end %>
              </div>
            </div>
          <% end %>
        </div>
      <% end %>
    </div>
  </div>
</div>