Some layout improvements

This commit is contained in:
2024-08-14 19:56:41 +02:00
parent 6990fa7e82
commit 241c5019c0
5 changed files with 135 additions and 133 deletions

View File

@@ -1,63 +1,63 @@
<tr id="<%= dom_id job %>" class="bg-status-<%= job.status %>-light odd:bg-opacity-20 even:bg-opacity-15">
<td class="p-3 text-sm text-hsrm-gray whitespace-nowrap">
<span class="p-1.5 text-sm font-medium uppercase tracking-wider bg-opacity-50 text-status-<%= job.status %> bg-status-<%= job.status %>-light rounded-lg">
<td class="p-3 text-hsrm-gray whitespace-nowrap">
<span class="p-1.5 text-lg font-bold uppercase tracking-wider bg-opacity-50 text-status-<%= job.status %> bg-status-<%= job.status %>-light rounded-lg shadow">
<%= job.id %>
</span>
</td>
<td class="p-3 text-sm text-center text-hsrm-gray">
<td class="p-3 text-center text-hsrm-gray">
<% if job.pdf.attached? %>
<%= image_tag(url_for(job.pdf.blob.preview(resize_to_limit: [100, 100]))) %>
<%= image_tag(url_for(job.pdf.blob.preview(resize_to_limit: [100, 100])), class: "shadow") %>
<%#= image_tag job.pdf.preview(resize_to_limit: [50, 50]), class: "mx-auto" %>
<% end %>
</td>
<td class="p-3 text-sm text-hsrm-gray whitespace-nowrap">
<td class="p-3 text-hsrm-gray whitespace-nowrap">
<%= job.costumer_fullname %>
</td>
<td class="p-3 text-sm text-hsrm-gray whitespace-nowrap">
<td class="p-3 text-hsrm-gray whitespace-nowrap">
<% if job.pdf.attached? %>
<%= job.pdf.filename %>
<%= truncate(job.pdf.filename.to_s, length: 45) %>
<% end %>
</td>
<td class="p-3 text-sm text-left text-hsrm-gray whitespace-nowrap">
<span class="p-1.5 bg-gray-300 bg-opacity-50 font-medium rounded-lg">
<td class="p-3 text-left text-hsrm-gray whitespace-nowrap">
<span class="p-1.5 bg-gray-300 bg-opacity-50 font-medium rounded-lg shadow">
<%= job.number_of_plans_a0 %>
</span>
</td>
<td class="p-3 text-sm text-left text-hsrm-gray whitespace-nowrap">
<span class="p-1.5 bg-gray-300 bg-opacity-50 font-medium rounded-lg">
<td class="p-3 text-left text-hsrm-gray whitespace-nowrap">
<span class="p-1.5 bg-gray-300 bg-opacity-50 font-medium rounded-lg shadow">
<%= job.number_of_plans_a1 %>
</span>
</td>
<td class="p-3 text-sm text-left text-hsrm-gray whitespace-nowrap">
<span class="p-1.5 bg-gray-300 bg-opacity-50 font-medium rounded-lg">
<td class="p-3 text-left text-hsrm-gray whitespace-nowrap">
<span class="p-1.5 bg-gray-300 bg-opacity-50 font-medium rounded-lg shadow">
<%= job.number_of_plans_a2 %>
</span>
</td>
<td class="p-3 text-sm text-left text-hsrm-gray whitespace-nowrap">
<span class="p-1.5 bg-gray-300 bg-opacity-50 font-medium rounded-lg">
<td class="p-3 text-left text-hsrm-gray whitespace-nowrap">
<span class="p-1.5 bg-gray-300 bg-opacity-50 font-medium rounded-lg shadow">
<%= job.number_of_plans_a3 %>
</span>
</td>
<td class="p-3 text-sm text-right text-hsrm-gray whitespace-nowrap">
<span class="p-1.5 bg-gray-300 bg-opacity-50 font-medium rounded-lg">
<td class="p-3 text-right text-hsrm-gray whitespace-nowrap">
<span class="p-1.5 bg-gray-300 bg-opacity-50 font-medium rounded-lg shadow">
<%= job.costum_qm_plan.round(2) %> m²
</span>
</td>
<td class="p-3 text-sm text-right text-hsrm-gray whitespace-nowrap">
<span class="p-1.5 bg-gray-300 bg-opacity-50 font-medium rounded-lg">
<td class="p-3 text-right text-hsrm-gray whitespace-nowrap">
<span class="p-1.5 bg-gray-300 bg-opacity-50 font-medium rounded-lg shadow">
<%= job.cost.round(2) %> €
</span>
</td>
<td class="p-3 text-sm text-left text-hsrm-gray whitespace-nowrap">
<span class="p-1.5 block text-xs font-medium uppercase tracking-wider bg-opacity-50 w-20 text-center text-status-<%= job.status.to_sym %> bg-status-<%= job.status %>-light rounded-lg">
<td class="p-3 text-left text-hsrm-gray whitespace-nowrap">
<span class="p-1.5 block text-xs font-medium uppercase tracking-wider bg-opacity-50 w-20 text-center text-status-<%= job.status.to_sym %> bg-status-<%= job.status %>-light rounded-lg shadow">
<%= job.status %>
</span>
</td>
<td class="p-3 text-sm text-right text-hsrm-gray whitespace-nowrap">
<td class="p-3 text-right text-hsrm-gray whitespace-nowrap">
<% if job.open? %>
<%= button_to icon("x-circle", class: "text-hsrm-red size-8 inline", title: "Abbrechen"), cancel_job_path(job), method: :patch, form: {data: {turbo_confirm: 'Den Plottauftrag wirklich abbrechen?'}}, form_class: "inline" %>
<% else %>
<%= icon("x-circle", class: "text-hsrm-gray text-opacity-50 size-8 inline", title: "Kann nicht mehr abgebrochen werden") %>
<%= icon("x-circle", class: "text-hsrm-gray text-opacity-50 size-8 inline drop-shadow", title: "Kann nicht mehr abgebrochen werden") %>
<% end %>
</td>
</tr>

View File

@@ -6,22 +6,22 @@
<h1 class="font-bold text-hsrm-gray text-4xl">Aktuelle Plottaufträge <span class="font-semibold text-sm"><%= Date.today.strftime("%d.%m.%Y") %></span></h1>
<%= link_to "Plottauftrag aufgeben", new_job_path, class: "px-3 py-2 bg-hsrm-red drop-shadow-lg transition-colors hover:bg-hsrm-red-light text-white block font-medium" %>
</div>
<div class="overflow-auto min-w-full shadow-lg">
<div class="min-w-full overflow-auto shadow-lg">
<table class="w-full py-8 table-auto">
<thead class="bg-gray-200 text-hsrm-gray border-b-2 border-gray-300 shadow">
<thead class="font-semibold tracking-wide bg-gray-200 border-b-2 border-gray-300 text text-hsrm-gray">
<tr>
<th class="p-3 text-sm font-semibold tracking-wide text-center w-1"> ID </th>
<th class="p-3 text-sm font-semibold tracking-wide text-center w-1"> Vorschau </th>
<th class="p-3 text-sm font-semibold tracking-wide text-left"> Auftraggeber </th>
<th class="p-3 text-sm font-semibold tracking-wide text-left"> PDF </th>
<th class="p-3 text-sm font-semibold tracking-wide text-left w-1"> A0 </th>
<th class="p-3 text-sm font-semibold tracking-wide text-left w-1"> A1 </th>
<th class="p-3 text-sm font-semibold tracking-wide text-left w-1"> A2 </th>
<th class="p-3 text-sm font-semibold tracking-wide text-left w-1"> A3 </th>
<th class="p-3 text-sm font-semibold tracking-wide text-center w-1"> no DIN </th>
<th class="p-3 text-sm font-semibold tracking-wide text-center w-1"> Kosten </th>
<th class="p-3 text-sm font-semibold tracking-wide text-center w-1"> Status </th>
<th class="p-3 text-sm font-semibold tracking-wide text-center w-1"></th>
<th class="w-1 p-3 text-center"> ID </th>
<th class="w-1 p-3 text-center"> Vorschau </th>
<th class="p-3 text-left"> Auftraggeber </th>
<th class="p-3 text-left"> PDF </th>
<th class="w-1 p-3 text-left"> A0 </th>
<th class="w-1 p-3 text-left"> A1 </th>
<th class="w-1 p-3 text-left"> A2 </th>
<th class="w-1 p-3 text-left"> A3 </th>
<th class="w-1 p-3 text-center text-nowrap"> no DIN </th>
<th class="w-1 p-3 text-center"> Kosten </th>
<th class="w-1 p-3 text-center"> Status </th>
<th class="w-1 p-3 text-center">Action</th>
</tr>
</thead>
<tbody id='jobs' class="divide-y divivde-gray-300">

View File

@@ -13,7 +13,7 @@
<body>
<%= render "layouts/flash" %>
<header class="container flex items-center justify-between px-4 py-6 mx-auto border-b-2 border-gray-300">
<a href="/" class="text-4xl font-bold text-black">Plottservice Fachbereich AB</a>
<a href="/" class="text-4xl font-bold text-hsrm-gray">Plottservice Fachbereich AB</a>
<nav>
<ul class="flex justify-center font-semibold items-color">
<li class="relative">

View File

@@ -1,63 +1,63 @@
<tr id="<%= dom_id job %>" class="bg-status-<%= job.status %>-light odd:bg-opacity-20 even:bg-opacity-10">
<td class="p-3 text-sm text-hsrm-gray whitespace-nowrap">
<span class="p-1.5 text-xs font-medium uppercase tracking-wider bg-opacity-50 text-status-<%= job.status %> bg-status-<%= job.status %>-light rounded-lg">
<td class="p-3 text-hsrm-gray whitespace-nowrap">
<span class="p-1.5 text-lg font-bold uppercase tracking-wider bg-opacity-50 text-status-<%= job.status %> bg-status-<%= job.status %>-light rounded-lg shadow">
<%= job.id %>
</span>
</td>
<td class="w-6 p-3 text-sm text-hsrm-gray whitespace-nowrap">
<td class="w-6 p-3 text-hsrm-gray whitespace-nowrap">
<% if job.pdf.attached? %>
<%= link_to_if job.printing?, image_tag(url_for(job.pdf.preview(resize_to_limit: [100, 100]))), job.pdf, target: "_blank", class: "shadow-lg" %>
<%= link_to_if job.printing?, image_tag(url_for(job.pdf.preview(resize_to_limit: [100, 100])), class:"shadow-lg"), job.pdf, target: "_blank" %>
<!--<iframe src=<%= url_for(job.pdf) %> width="500" height="700" style="border: none;"></iframe>-->
<% end %>
</td>
<td class="p-3 text-sm text-hsrm-gray whitespace-nowrap">
<td class="p-3 text-hsrm-gray whitespace-nowrap">
<%= job.costumer_fullname %>
</td>
<td class="p-3 text-sm text-hsrm-gray whitespace-nowrap">
<td class="p-3 text-hsrm-gray whitespace-nowrap">
<% if job.pdf.attached? %>
<%= link_to_if job.printing?, icon("document-arrow-down", class: "text-hsrm-gray #{ unless job.printing?; 'text-opacity-25' else; 'hover:text-opacity-75'; end} size-6 inline", title: "Download"), job.pdf, download:true %>
<%#= link_to job.pdf.filename, rails_blob_path(job.pdf, disposition: "attachment") %>
<%= link_to_if job.printing?, job.pdf.filename, job.pdf, download:true %>
<%= link_to_if job.printing?, truncate(job.pdf.filename.to_s, length: 45), job.pdf, download:true %>
<span class="p-1.5 bg-gray-300 bg-opacity-50 text-hsrm-gray font-medium rounded-lg ml-2">
<%=number_to_human_size job.pdf.blob.byte_size%>
</span>
<% end %>
</td>
<% Job::AVAILABLE_PAGE_FORMATS.each do |din| %>
<td class="p-3 text-sm text-left text-hsrm-gray whitespace-nowrap">
<td class="p-3 text-left text-hsrm-gray whitespace-nowrap">
<% if job.printing? %>
<div class="flex flex-col items-center">
<span class="inline-block p-1 font-medium bg-gray-300 bg-opacity-50 rounded-lg">
<span class="inline-block p-1 font-medium bg-gray-300 bg-opacity-50 rounded-lg shadow hover:bg-opacity-75">
<%= button_to icon("chevron-up", class: "size-5 inline", title: "erhöhen"), increment_page_operator_job_path(job, din:), method: :patch, form_class: "inline" %>
</span>
<% end %>
<span class="p-1.5 bg-gray-300 bg-opacity-50 font-medium rounded-lg text-center">
<span class="p-1.5 bg-gray-300 bg-opacity-50 font-medium rounded-lg text-center shadow">
<%= job.public_send("number_of_plans_#{din}") if job.respond_to? "number_of_plans_#{din}" %>
</span>
<% if job.printing? %>
<span class="inline-block p-1 font-medium bg-gray-300 bg-opacity-50 rounded-lg">
<span class="inline-block p-1 font-medium bg-gray-300 bg-opacity-50 rounded-lg shadow hover:bg-opacity-75">
<%= button_to icon("chevron-down", class: "size-5 inline", title: "verringern"), decrement_page_operator_job_path(job, din:), method: :patch, form_class: "inline" %>
</span>
</div>
<% end %>
</td>
<% end %>
<td class="p-3 text-sm text-right text-hsrm-gray whitespace-nowrap">
<span class="p-1.5 bg-gray-300 bg-opacity-50 font-medium rounded-lg">
<td class="p-3 text-right text-hsrm-gray whitespace-nowrap">
<span class="p-1.5 bg-gray-300 bg-opacity-50 font-medium rounded-lg shadow">
<%= job.costum_qm_plan.round(2) %> m²
</span>
</td>
<td class="p-3 text-sm text-right text-hsrm-gray whitespace-nowrap">
<span class="p-1.5 bg-gray-300 bg-opacity-50 font-medium rounded-lg">
<td class="p-3 text-right text-hsrm-gray whitespace-nowrap">
<span class="p-1.5 bg-gray-300 bg-opacity-50 font-medium rounded-lg shadow">
<%= job.cost.round(2) %> €
</span>
</td>
<td class="p-3 text-sm text-left text-hsrm-gray whitespace-nowrap">
<span class="p-1.5 block text-xs font-medium uppercase tracking-wider bg-opacity-50 w-20 text-center text-status-<%= job.status.to_sym %> bg-status-<%= job.status %>-light rounded-lg">
<td class="p-3 text-left text-hsrm-gray whitespace-nowrap">
<span class="p-1.5 block text-xs font-medium uppercase tracking-wider bg-opacity-50 w-20 text-center text-status-<%= job.status.to_sym %> bg-status-<%= job.status %>-light rounded-lg shadow">
<%= job.status %>
</span>
</td>
<td class="p-3 text-sm text-right text-hsrm-gray whitespace-nowrap">
<td class="p-3 text-right text-hsrm-gray whitespace-nowrap">
<!-- TODO: move logic to model -->
<% if job.printing? || job.canceled? || job.paid? %>
<%= button_to icon("inbox-stack", class: "text-hsrm-gray size-6 inline drop-shadow hover:text-opacity-75", title: "Zurück in die Warteschlange"), operator_job_path(job), method: :patch, params: {:job => {status: :open}}, form_class: "inline" %>

View File

@@ -1,46 +1,48 @@
<%= turbo_stream_from 'operator_jobs' %>
<% content_for :title, "Current Print Jobs" %>
<div class="flex space-x-4">
<%= link_to "#openjobs-h" do %>
<div class="flex-1 bg-opacity-50 shadow-lg bg-status-open-light text-status-open w-72 min-h-28 ">
<h3 class="p-5 text-4xl">
<%= icon("inbox-stack", class: "text-status-open size-10 inline drop-shadow") %>
<div class="grid gap-4 grids-cols-2">
</div>
<div class="flex space-x-4 justify-items-center">
<%= link_to "#openjobs-h", class: "flex-1" do %>
<div class="flex-1 bg-opacity-50 shadow-lg bg-status-open-light text-status-open min-h-28 hover:bg-opacity-70">
<h3 class="p-4 text-3xl font-bold">
<%= icon("inbox-stack", class: "text-status-open size-8 inline drop-shadow -translate-y-1") %>
Open
<span class="block text-right"><%= @openjobs.count %></span>
</h3>
</div>
<% end %>
<%= link_to "#printingjobs-h" do %>
<div class="flex-1 bg-opacity-50 shadow-lg bg-status-printing-light text-status-printing w-72 min-h-28">
<h3 class="p-5 text-4xl">
<%= icon("printer", class: "text-status-printing size-10 inline drop-shadow") %>
<%= link_to "#printingjobs-h", class: "flex-1" do %>
<div class="flex-1 bg-opacity-50 shadow-lg bg-status-printing-light text-status-printing min-h-28 hover:bg-opacity-70">
<h3 class="p-4 text-3xl font-bold">
<%= icon("printer", class: "text-status-printing size-8 inline drop-shadow -translate-y-1") %>
Printing
<span class="block text-right"><%= @printingjobs.count %></span>
</h3>
</div>
<% end %>
<%= link_to "#pickupjobs-h" do %>
<div class="flex-1 bg-opacity-50 shadow-lg bg-status-pickup-light text-status-pickup w-72 min-h-28">
<h3 class="p-5 text-4xl">
<%= icon("arrow-up-tray", class: "text-status-pickup size-10 inline drop-shadow") %>
<%= link_to "#pickupjobs-h", class: "flex-1" do %>
<div class="flex-1 bg-opacity-50 shadow-lg bg-status-pickup-light text-status-pickup min-h-28 hover:bg-opacity-70">
<h3 class="p-4 text-3xl font-bold">
<%= icon("arrow-up-tray", class: "text-status-pickup size-8 inline drop-shadow -translate-y-1") %>
Pickup
<span class="block text-right"><%= @pickupjobs.count %></span>
</h3>
</div>
<% end %>
<%= link_to "#paidcanceledjobs-h" do %>
<div class="flex-1 bg-opacity-50 shadow-lg bg-status-paid-light text-status-paid w-72 min-h-28">
<h3 class="p-5 text-4xl">
<%= icon("banknotes", class: "text-status-paid size-10 inline drop-shadow") %>
<%= link_to "#paidcanceledjobs-h", class: "flex-1" do %>
<div class="flex-1 bg-opacity-50 shadow-lg bg-status-paid-light text-status-paid min-h-28 hover:bg-opacity-70">
<h3 class="p-4 text-3xl font-bold">
<%= icon("banknotes", class: "text-status-paid size-8 inline drop-shadow -translate-y-1") %>
Paid
<span class="block text-right"><%= @paidjobs.count %></span>
</h3>
</div>
<% end %>
<%= link_to "#paidcanceledjobs-h" do %>
<div class="flex-1 bg-opacity-50 shadow-lg bg-status-canceled-light text-status-canceled w-72 min-h-28">
<h3 class="p-5 text-4xl">
<%= icon("x-circle", class: "text-status-canceled size-10 inline drop-shadow") %>
<%= link_to "#paidcanceledjobs-h", class: "flex-1" do %>
<div class="flex-1 bg-opacity-50 shadow-lg bg-status-canceled-light text-status-canceled min-h-28 hover:bg-opacity-70">
<h3 class="p-4 text-3xl font-bold">
<%= icon("x-circle", class: "text-status-canceled size-8 inline drop-shadow -translate-y-1") %>
Canceled
<span class="block text-right"><%= @canceledjobs.count %></span>
</h3>
@@ -49,7 +51,7 @@
</div>
<div class="w-full">
<div id="printingjobs-h" class="flex items-center justify-between py-4">
<h1 class="text-4xl font-bold text-hsrm-gray">
<h1 class="text-3xl font-bold text-hsrm-gray">
Printing
</h1>
<% if @openjobs.any? %>
@@ -69,20 +71,20 @@
<%# render partial: "job_card", collection: @printingjobs, as: :job %>
<div class="min-w-full overflow-auto shadow-lg">
<table class="w-full py-8 table-auto">
<thead class="bg-gray-200 border-b-2 border-gray-300 text-hsrm-gray">
<thead class="font-semibold tracking-wide bg-gray-200 border-b-2 border-gray-300 text text-hsrm-gray">
<tr>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-center"> ID </th>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-center"> Vorschau </th>
<th class="p-3 text-sm font-semibold tracking-wide text-left"> Auftraggeber </th>
<th class="p-3 text-sm font-semibold tracking-wide text-left"> PDF </th>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-center"> A0 </th>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-center"> A1 </th>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-center"> A2 </th>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-center"> A3 </th>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-center text-nowrap"> no DIN </th>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-center"> Kosten </th>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-center"> Status </th>
<th class="w-40 p-3 text-sm font-semibold tracking-wide text-center">Action</th>
<th class="w-1 p-3 text-center"> ID </th>
<th class="w-1 p-3 text-center"> Vorschau </th>
<th class="p-3 text-left"> Auftraggeber </th>
<th class="p-3 text-left"> PDF </th>
<th class="w-1 p-3 text-left"> A0 </th>
<th class="w-1 p-3 text-left"> A1 </th>
<th class="w-1 p-3 text-left"> A2 </th>
<th class="w-1 p-3 text-left"> A3 </th>
<th class="w-1 p-3 text-center text-nowrap"> no DIN </th>
<th class="w-1 p-3 text-center"> Kosten </th>
<th class="w-1 p-3 text-center"> Status </th>
<th class="w-1 p-3 text-center">Action</th>
</tr>
</thead>
<tbody id='printingjobs' class="divide-y divivde-gray-300">
@@ -92,26 +94,26 @@
</table>
</div>
<div id="pickupjobs-h" class="flex items-center justify-between py-4">
<h1 class="text-4xl font-bold text-hsrm-gray">
<h1 class="text-3xl font-bold text-hsrm-gray">
Pickup
</h1>
</div>
<div class="min-w-full overflow-auto shadow-lg">
<table class="w-full py-8 table-auto">
<thead class="bg-gray-200 border-b-2 border-gray-300 text-hsrm-gray">
<thead class="font-semibold tracking-wide bg-gray-200 border-b-2 border-gray-300 text text-hsrm-gray">
<tr>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-center"> ID </th>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-center"> Vorschau </th>
<th class="p-3 text-sm font-semibold tracking-wide text-left"> Auftraggeber </th>
<th class="p-3 text-sm font-semibold tracking-wide text-left"> PDF </th>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-left"> A0 </th>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-left"> A1 </th>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-left"> A2 </th>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-left"> A3 </th>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-center text-nowrap"> no DIN </th>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-center"> Kosten </th>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-center"> Status </th>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-center">Action</th>
<th class="w-1 p-3 text-center"> ID </th>
<th class="w-1 p-3 text-center"> Vorschau </th>
<th class="p-3 text-left"> Auftraggeber </th>
<th class="p-3 text-left"> PDF </th>
<th class="w-1 p-3 text-left"> A0 </th>
<th class="w-1 p-3 text-left"> A1 </th>
<th class="w-1 p-3 text-left"> A2 </th>
<th class="w-1 p-3 text-left"> A3 </th>
<th class="w-1 p-3 text-center text-nowrap"> no DIN </th>
<th class="w-1 p-3 text-center"> Kosten </th>
<th class="w-1 p-3 text-center"> Status </th>
<th class="w-1 p-3 text-center">Action</th>
</tr>
</thead>
<tbody id='pickupjobs' class="divide-y divivde-gray-300">
@@ -121,26 +123,26 @@
</table>
</div>
<div id="openjobs-h" class="flex items-center justify-between py-4">
<h1 class="text-4xl font-bold text-hsrm-gray">
<h1 class="text-3xl font-bold text-hsrm-gray">
Open
</h1>
</div>
<div class="min-w-full overflow-auto shadow-lg">
<table class="w-full py-8 table-auto">
<thead class="bg-gray-200 border-b-2 border-gray-300 text-hsrm-gray">
<thead class="font-semibold tracking-wide bg-gray-200 border-b-2 border-gray-300 text text-hsrm-gray">
<tr>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-center"> ID </th>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-center"> Vorschau </th>
<th class="p-3 text-sm font-semibold tracking-wide text-left"> Auftraggeber </th>
<th class="p-3 text-sm font-semibold tracking-wide text-left"> PDF </th>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-left"> A0 </th>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-left"> A1 </th>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-left"> A2 </th>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-left"> A3 </th>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-center text-nowrap"> no DIN </th>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-center"> Kosten </th>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-center"> Status </th>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-center">Action</th>
<th class="w-1 p-3 text-center"> ID </th>
<th class="w-1 p-3 text-center"> Vorschau </th>
<th class="p-3 text-left"> Auftraggeber </th>
<th class="p-3 text-left"> PDF </th>
<th class="w-1 p-3 text-left"> A0 </th>
<th class="w-1 p-3 text-left"> A1 </th>
<th class="w-1 p-3 text-left"> A2 </th>
<th class="w-1 p-3 text-left"> A3 </th>
<th class="w-1 p-3 text-center text-nowrap"> no DIN </th>
<th class="w-1 p-3 text-center"> Kosten </th>
<th class="w-1 p-3 text-center"> Status </th>
<th class="w-1 p-3 text-center">Action</th>
</tr>
</thead>
<tbody id='openjobs' class="divide-y divivde-gray-300">
@@ -150,26 +152,26 @@
</table>
</div>
<div id="paidcanceledjobs-h" class="flex items-center justify-between py-4">
<h1 class="text-4xl font-bold text-hsrm-gray">
<h1 class="text-3xl font-bold text-hsrm-gray">
Paid/Canceled
</h1>
</div>
<div class="min-w-full overflow-auto shadow-lg">
<table class="w-full py-8 table-auto">
<thead class="bg-gray-200 border-b-2 border-gray-300 text-hsrm-gray">
<thead class="font-semibold tracking-wide bg-gray-200 border-b-2 border-gray-300 text text-hsrm-gray">
<tr>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-center"> ID </th>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-center"> Vorschau </th>
<th class="p-3 text-sm font-semibold tracking-wide text-left"> Auftraggeber </th>
<th class="p-3 text-sm font-semibold tracking-wide text-left"> PDF </th>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-left"> A0 </th>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-left"> A1 </th>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-left"> A2 </th>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-left"> A3 </th>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-center text-nowrap"> no DIN </th>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-center"> Kosten </th>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-center"> Status </th>
<th class="w-1 p-3 text-sm font-semibold tracking-wide text-center"></th>
<th class="w-1 p-3 text-center"> ID </th>
<th class="w-1 p-3 text-center"> Vorschau </th>
<th class="p-3 text-left"> Auftraggeber </th>
<th class="p-3 text-left"> PDF </th>
<th class="w-1 p-3 text-left"> A0 </th>
<th class="w-1 p-3 text-left"> A1 </th>
<th class="w-1 p-3 text-left"> A2 </th>
<th class="w-1 p-3 text-left"> A3 </th>
<th class="w-1 p-3 text-center text-nowrap"> no DIN </th>
<th class="w-1 p-3 text-center"> Kosten </th>
<th class="w-1 p-3 text-center"> Status </th>
<th class="w-1 p-3 text-center">Action</th>
</tr>
</thead>
<tbody id='paidcanceledjobs' class="divide-y divivde-gray-300">