Worked on operator view

app/views/operator/jobs/index.html.erb

@@ -1,57 +1,73 @@
 <%= 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-status-open-light bg-opacity-50 text-status-open w-72 min-h-28 shadow-lg">
+      <h3 class="p-5 text-4xl">
+        Open
+        <span class="text-right block"><%= @openjobs.count %></span>
+      </h3>
+    </div>
+  <% end %>
+  <%= link_to "#printingjobs-h" do %>
+    <div class="flex-1 bg-status-printing-light bg-opacity-50 text-status-printing w-72 min-h-28 shadow-lg">
+      <h3 class="p-5 text-4xl">
+        Printing
+        <span class="text-right block"><%= @printingjobs.count  %></span>
+      </h3>
+    </div>
+  <% end %>
+  <%= link_to "#pickupjobs-h" do %>
+    <div class="flex-1 bg-status-pickup-light bg-opacity-50 text-status-pickup w-72 min-h-28 shadow-lg">
+      <h3 class="p-5 text-4xl">
+        Pickup
+        <span class="text-right block"><%= @pickupjobs.count %></span>
+      </h3>
+    </div>
+  <% end %>
+  <%= link_to "#paidcanceledjobs-h" do %>
+    <div class="flex-1 bg-status-paid-light bg-opacity-50 text-status-paid w-72 min-h-28 shadow-lg">
+      <h3 class="p-5 text-4xl">
+        Paid
+        <span class="text-right block"><%= @paidjobs.count %></span>
+      </h3>
+    </div>
+  <% end %>
+  <%= link_to "#paidcanceledjobs-h" do %>
+    <div class="flex-1 bg-status-canceled-light bg-opacity-50 text-status-canceled w-72 min-h-28 shadow-lg">
+      <h3 class="p-5 text-4xl">
+        Canceled
+        <span class="text-right block"><%= @canceledjobs.count %></span>
+      </h3>
+    </div>
+  <% end %>
+</div>
 <div class="w-full">
   <div class="flex justify-between items-center py-4">
     <h1 class="font-bold text-hsrm-gray text-4xl">
-      abholbereite Plottaufträge 
+      Printing
     </h1>
   </div>
-  <div class="overflow-auto min-w-full drop-shadow-lg">
+  <%# render partial: "job_card", collection: @printingjobs, as: :job %>
+  <div id="printingjobs-h" class="overflow-auto min-w-full shadow-lg">
     <table class="w-full py-8 table-auto">
       <thead class="bg-gray-200 text-hsrm-gray border-b-2 border-gray-300">
         <tr>
-          <th class="p-3 text-sm font-semibold tracking-wide text-left w-1"> ID </th>
+          <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 colspan="2" 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"> noDIN </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-center w-1"> A0 </th>
+          <th class="p-3 text-sm font-semibold tracking-wide text-center w-1"> A1 </th>
+          <th class="p-3 text-sm font-semibold tracking-wide text-center w-1"> A2 </th>
+          <th class="p-3 text-sm font-semibold tracking-wide text-center 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>
         </tr>
       </thead>
-      <tbody id='jobs' class="divide-y divivde-gray-300">
-        <%= render partial: "job_tr", collection: @pickupjobs, as: :job %>
-        <%#= link_to "Show this job", job, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
-      </tbody>
-    </table>
-  </div>
-  <div class="flex justify-between items-center py-4">
-    <h1 class="font-bold text-hsrm-gray text-4xl">
-      aktuell druckende Plottaufträge 
-    </h1>
-  </div>
-  <div class="overflow-auto min-w-full drop-shadow-lg">
-    <table class="w-full py-8 table-auto">
-      <thead class="bg-gray-200 text-hsrm-gray border-b-2 border-gray-300">
-        <tr>
-          <th class="p-3 text-sm font-semibold tracking-wide text-left w-1"> ID </th>
-          <th class="p-3 text-sm font-semibold tracking-wide text-left"> Auftraggeber </th>
-          <th colspan="2" 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"> noDIN </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>
-        </tr>
-      </thead>
-      <tbody id='jobs' class="divide-y divivde-gray-300">
+      <tbody id='printingjobs' class="divide-y divivde-gray-300">
         <%= render partial: "job_tr", collection: @printingjobs, as: :job %>
         <%#= link_to "Show this job", job, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
       </tbody>
@@ -59,30 +75,89 @@
   </div>
   <div class="flex justify-between items-center py-4">
     <h1 class="font-bold text-hsrm-gray text-4xl">
-      offene Plottaufträge 
+      Pickup 
     </h1>
   </div>
-  <div class="overflow-auto min-w-full drop-shadow-lg">
+  <div id="pickupjobs-h" class="overflow-auto min-w-full shadow-lg">
     <table class="w-full py-8 table-auto">
       <thead class="bg-gray-200 text-hsrm-gray border-b-2 border-gray-300">
         <tr>
-          <th class="p-3 text-sm font-semibold tracking-wide text-left w-1"> ID </th>
+          <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 colspan="2" 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"> 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"> noDIN </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>
         </tr>
       </thead>
-      <tbody id='jobs' class="divide-y divivde-gray-300">
+      <tbody id='pickupjobs' class="divide-y divivde-gray-300">
+        <%= render partial: "job_tr", collection: @pickupjobs, as: :job %>
+        <%#= link_to "Show this job", job, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+      </tbody>
+    </table>
+  </div>
+  <div class="flex justify-between items-center py-4">
+    <h1 class="font-bold text-hsrm-gray text-4xl">
+      open 
+    </h1>
+  </div>
+  <div id="openjobs-h" class="overflow-auto min-w-full shadow-lg">
+    <table class="w-full py-8 table-auto">
+      <thead class="bg-gray-200 text-hsrm-gray border-b-2 border-gray-300">
+        <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>
+        </tr>
+      </thead>
+      <tbody id='openjobs' class="divide-y divivde-gray-300">
         <%= render partial: "job_tr", collection: @openjobs, as: :job %>
         <%#= link_to "Show this job", job, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
       </tbody>
     </table>
   </div>
+  <div class="flex justify-between items-center py-4">
+    <h1 class="font-bold text-hsrm-gray text-4xl">
+      Paid/Canceled 
+    </h1>
+  </div>
+  <div id="paidcanceledjobs-h" class="overflow-auto min-w-full shadow-lg">
+    <table class="w-full py-8 table-auto">
+      <thead class="bg-gray-200 text-hsrm-gray border-b-2 border-gray-300">
+        <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>
+        </tr>
+      </thead>
+      <tbody id='paidcanceledjobs' class="divide-y divivde-gray-300">
+        <%= render partial: "job_tr", collection: @paidcanceledjobs, as: :job %>
+        <%#= link_to "Show this job", job, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+      </tbody>
+    </table>
+  </div>
 </div>