@raketa-cloud/admin 1.8.18 → 1.8.20

package/src/views/resources/_shared/_toolbar.ejs

@@ -5,21 +5,17 @@
       !resource.activeContentTask.completedAt &&
       !resource.activeContentTask.failedAt;
   %>
-  <div class="actions-toolbar">
-    <form method="POST" action="<%= `/${_context.locale}/${_context.resourceConfig.resourceTypePlural}/${resource.id}/${_context.resourceConfig.resourceType}_revisions` %>" class="inline-block">
-      <% if (resource.revisionsCount >= _context?.maxOpenRevisions || hasActiveContentTask) { %>
-      <button type="submit" class="btn-primary" disabled style="opacity: 50%;">
-        Start revision
-      </button>
-      <% } else {%>
-      <button type="submit" class="btn-primary">
-        Start revision
-      </button>
-      <% } %>
-    </form>
+  <% if (_context.query?.revisions_count_error) { %>
+  <div class="text-red-600">Cannot open a new revision. Current limit is <%= _context.maxOpenRevisions %>. </div>
+  <% } %>
+
+  <% if (hasActiveContentTask) { %>
+  <div class="mt-2 text-orange-700 dark:text-orange-300">Actions are disabled while a translation task is in progress.</div>
+  <% } %>
 
+  <div class="actions-toolbar">
     <% if (hasActiveContentTask) { %>
-    <button type="button" class="btn-text has-icon" disabled style="opacity: 50%; cursor: not-allowed;">
+    <button type="button" class="btn-secondary has-icon" disabled style="opacity: 50%; cursor: not-allowed;">
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
         <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" />
       </svg>
@@ -27,7 +23,7 @@
       Change URL
     </button>
     <% } else { %>
-    <a href="<%= `/${_context.locale}/${_context.resourceConfig.resourceTypePlural}/${resource.id}/urls/new` %>" class="btn-text has-icon">
+    <a href="<%= `/${_context.locale}/${_context.resourceConfig.resourceTypePlural}/${resource.id}/urls/new` %>" class="btn-secondary has-icon">
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
         <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" />
       </svg>
@@ -37,7 +33,7 @@
     <% } %>
 
     <form action="<%= `/${_context.locale}/${_context.resourceConfig.resourceTypePlural}/${resource.id}/clones` %>" method="post" class="inline-block">
-      <button type="submit" class="btn-text has-icon" <%= hasActiveContentTask ? 'disabled style="opacity: 50%;"' : '' %>>
+      <button type="submit" class="btn-secondary has-icon" <%= hasActiveContentTask ? 'disabled style="opacity: 50%;"' : '' %>>
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
           <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75" />
         </svg>
@@ -65,11 +61,5 @@
     <% } %>
   </div>
 
-  <% if (_context.query?.revisions_count_error) { %>
-  <div class="text-red-600">Cannot open a new revision. Current limit is <%= _context.maxOpenRevisions %>. </div>
-  <% } %>
 
-  <% if (hasActiveContentTask) { %>
-  <div class="text-orange-700 mt-2 dark:text-orange-300">Actions are disabled while a translation task is in progress.</div>
-  <% } %>
 </div>

package/src/views/resources/_shared/_traffic_chart.ejs

@@ -0,0 +1,27 @@
+<div class="pb-8">
+  <div class="p-6 transition-all border rounded-xl border-neutral-200 dark:border-neutral-700" data-report="chart-card">
+    <div class="flex flex-wrap items-center justify-between gap-4 mb-6">
+      <h3 class="heading-3">Traffic Trends</h3>
+
+      <div class="flex flex-wrap items-center gap-4">
+        <div class="flex items-center gap-2">
+          <span class="inline-block rounded-full size-3 bg-raketa-primary"></span>
+          <span class="body-3 text-raketa-foreground/50">Page Views</span>
+        </div>
+
+        <div class="flex items-center gap-2">
+          <span class="inline-block bg-yellow-400 border-2 border-yellow-500 rounded-full size-3"></span>
+          <span class="body-3 text-raketa-foreground/50">Published revision</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="relative w-full h-[320px]">
+      <canvas id="ga-traffic-chart"></canvas>
+
+      <div class="absolute inset-0 flex items-center justify-center" data-report="chart-loader">
+        <span data-loader class="inline-block border-2 rounded-full size-8 border-raketa-primary/20 border-t-raketa-primary animate-spin"></span>
+      </div>
+    </div>
+  </div>
+</div>

package/src/views/resources/_shared/_translations_strip.ejs

@@ -1,4 +1,4 @@
-<div class="flex flex-wrap items-center gap-1 mb-6 -my-4">
+<div class="flex flex-wrap items-center gap-1">
   <%
       const availableLocales = Object.keys(_context.locales);
       const totalPossibleTranslations = availableLocales.length - 1;
@@ -19,39 +19,25 @@
   %>
 
   <span class="relative inline-block" title="<%= currentHasActiveTask ? contentTaskMessage : "" %>">
-    <img
-      title="<%= currentHasActiveTask ? contentTaskMessage : name %>"
-      src="<%= flag %>"
-      alt="<%= name %>"
-      class="border rounded-full size-6 dark:border-neutral-700"
-    />
+    <img title="<%= currentHasActiveTask ? contentTaskMessage : name %>" src="<%= flag %>" alt="<%= name %>" class="border rounded-full size-6 dark:border-neutral-700" />
 
     <% if (currentHasActiveTask) { %>
     <span class="absolute -top-0.5 -right-0.5 flex h-3 w-3">
-      <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-raketa-primary opacity-75"></span>
-      <span class="relative inline-flex rounded-full h-3 w-3 bg-raketa-primary"></span>
+      <span class="absolute inline-flex w-full h-full rounded-full opacity-75 animate-ping bg-raketa-primary"></span>
+      <span class="relative inline-flex w-3 h-3 rounded-full bg-raketa-primary"></span>
     </span>
     <% } %>
   </span>
   <% } else if (resource.translations[key]) { %>
   <% const hasActiveTask = resource.translations[key].active_content_task; %>
   <% const contentTaskMessage = hasActiveTask ? `${name}: ${Inflector.capitalize(resource.translations[key].active_content_task.workflow)} task in progress` : ""; %>
-  <a
-    href="<%= `/${key}/${_context.resourceConfig.resourceTypePlural}/${resource.translations[key].id}` %>"
-    class="relative inline-block"
-    title="<%= hasActiveTask ? contentTaskMessage : "" %>"
-  >
-    <img
-      title="<%= hasActiveTask ? contentTaskMessage : name %>"
-      src="<%= flag %>"
-      alt="<%= name %>"
-      class="border rounded-full size-6 dark:border-neutral-700"
-    />
+  <a href="<%= `/${key}/${_context.resourceConfig.resourceTypePlural}/${resource.translations[key].id}` %>" class="relative inline-block" title="<%= hasActiveTask ? contentTaskMessage : "" %>">
+    <img title="<%= hasActiveTask ? contentTaskMessage : name %>" src="<%= flag %>" alt="<%= name %>" class="border rounded-full size-6 dark:border-neutral-700" />
 
     <% if (hasActiveTask) { %>
     <span class="absolute -top-0.5 -right-0.5 flex h-3 w-3">
-      <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-raketa-primary opacity-75"></span>
-      <span class="relative inline-flex rounded-full h-3 w-3 bg-raketa-primary"></span>
+      <span class="absolute inline-flex w-full h-full rounded-full opacity-75 animate-ping bg-raketa-primary"></span>
+      <span class="relative inline-flex w-3 h-3 rounded-full bg-raketa-primary"></span>
     </span>
     <% } %>
   </a>
@@ -63,8 +49,10 @@
   <% }); %>
 
   <% if (canBeTranslated) { %>
-  <a href="<%= `/${_context.locale}/${_context.resourceConfig.resourceTypePlural}/${resource.id}/translations/new` %>" class="ml-2 btn-text">
-    Translate
+  <a href="<%= `/${_context.locale}/${_context.resourceConfig.resourceTypePlural}/${resource.id}/translations/new` %>" title="Translate" aria-label="Translate" class="flex items-center justify-center transition-all duration-300 ease-in-out rounded-full size-6 text-raketa-primary bg-raketa-primary/10 hover:bg-raketa-primary/20">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="size-3.5">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+    </svg>
   </a>
   <% } %>
-</div>
+</div>

package/src/views/resources/_shared/_vital_meter.ejs

@@ -0,0 +1,54 @@
+<%
+  // One Core Web Vitals metric as a banded gauge: green up to the "good" bound,
+  // amber up to the "poor" bound, red beyond it. Expects `metric` metadata only
+  // (key, label, title, unit, thresholds) — bands and bounds need no
+  // measurement, so they render at first paint.
+  //
+  // /report/reports.js positions the arrow, writes the p75 value and colours
+  // both once the JSON feed lands; data-* below is what it reads.
+  const vital = locals.metric;
+
+  // Milliseconds read as seconds past 1s; CLS is unitless.
+  const vValue = (value, unit) =>
+    unit === 'ms'
+      ? (value >= 1000 ? `${(value / 1000).toFixed(2)}s` : `${Math.round(value)}ms`)
+      : Number(value).toFixed(2);
+
+  const goodBound = vital.thresholds?.good ?? 0;
+  const poorBound = vital.thresholds?.poor ?? 0;
+
+  // The track runs past the poor bound so the red band is visible rather than a
+  // hairline at the far edge.
+  const scaleMax = poorBound ? poorBound * 1.5 : 1;
+  const asPct = (value) => `${((value / scaleMax) * 100).toFixed(2)}%`;
+%>
+
+<div class="lg:px-5 lg:first:pl-0 lg:last:pr-0" data-report="vital" data-metric="<%= vital.key %>" data-scale-max="<%= scaleMax %>" data-unit="<%= vital.unit %>">
+  <div class="text-sm font-bold leading-tight text-raketa-foreground">
+    <%= vital.title %> (<%= vital.label %>)
+  </div>
+
+  <div class="relative pt-6 mt-4">
+    <div class="absolute top-0 flex flex-col items-center invisible -translate-x-1/2" style="left: 0%" data-report="marker">
+      <span class="text-[11px] font-bold whitespace-nowrap" data-report="vital-value"></span>
+
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8" fill="currentColor" class="w-2.5" aria-hidden="true" data-report="vital-arrow">
+        <path d="M6 8 0 0h12Z" />
+      </svg>
+    </div>
+
+    <span class="absolute top-0 left-0 inline-block border-2 rounded-full size-3 border-raketa-primary/20 border-t-raketa-primary animate-spin" data-loader data-report="vital-loader"></span>
+
+    <div class="flex w-full h-2 overflow-hidden rounded-full bg-mono-25 dark:bg-neutral-800">
+      <div class="h-full bg-emerald-500" style="width: <%= asPct(goodBound) %>"></div>
+      <div class="h-full bg-amber-500" style="width: <%= asPct(poorBound - goodBound) %>"></div>
+      <div class="h-full bg-red-500" style="width: <%= asPct(scaleMax - poorBound) %>"></div>
+    </div>
+
+    <div class="relative h-4 mt-1 text-[10px] font-medium text-raketa-foreground/50">
+      <span class="absolute left-0">0</span>
+      <span class="absolute -translate-x-1/2 whitespace-nowrap" style="left: <%= asPct(goodBound) %>"><%= vValue(goodBound, vital.unit) %></span>
+      <span class="absolute -translate-x-1/2 whitespace-nowrap" style="left: <%= asPct(poorBound) %>"><%= vValue(poorBound, vital.unit) %></span>
+    </div>
+  </div>
+</div>

package/src/views/resources/show.ejs

@@ -1,11 +1,8 @@
 <div class="page-wrapper">
   <div class="page-title">
-    <%- render_partial('./_shared/_title.ejs') %>
-    <%- render_partial('./_shared/_toolbar.ejs') %>
+    <%- render_partial('./_shared/_title.ejs', { withTranslations: true, render_partial }) %>
   </div>
 
-  <%- render_partial('./_shared/_translations_strip.ejs') %>
-
   <%
     const openedRevisions = []
     const scheduledRevisions = []
@@ -19,7 +16,15 @@
     })
   %>
 
-  <% if (openedRevisions.length) { %>
+  <%
+    const hasActiveContentTask = utils.feature("contentTasks", _context) &&
+      resource.activeContentTask &&
+      !resource.activeContentTask.completedAt &&
+      !resource.activeContentTask.failedAt;
+  %>
+
+
+
   <div class="pb-8">
     <h4 class="flex items-center gap-2 pb-4 heading-3">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 text-raketa-primary">
@@ -27,9 +32,32 @@
         <path d="M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z" />
       </svg>
 
-      Open revisions
+      Revisions
     </h4>
 
+    <%
+    const atRevisionLimit =
+      resource.revisionsCount >= _context?.maxOpenRevisions;
+    const canStartRevision = !atRevisionLimit && !hasActiveContentTask;
+  %>
+
+    <div class="pb-4">
+      <% if (_context.query?.revisions_count_error) { %>
+      <div class="text-red-600">Cannot open a new revision. Current limit is <%= _context.maxOpenRevisions %>. </div>
+      <% } %>
+
+      <% if (hasActiveContentTask) { %>
+      <div class="mb-2 text-orange-700 dark:text-orange-300">Actions are disabled while a translation task is in progress.</div>
+      <% } %>
+
+      <form method="POST" action="<%= `/${_context.locale}/${_context.resourceConfig.resourceTypePlural}/${resource.id}/${_context.resourceConfig.resourceType}_revisions` %>" class="inline-block">
+        <button type="submit" class="btn-primary" <%- canStartRevision ? '' : 'disabled style="opacity: 50%;"' %> <% if (atRevisionLimit && !hasActiveContentTask) { %> title="Open revision limit reached (<%= _context.maxOpenRevisions %>)" <% } %>>
+          Start revision
+        </button>
+      </form>
+    </div>
+
+    <% if (openedRevisions.length) { %>
     <table class="data-grid alt">
       <thead>
         <tr>
@@ -80,109 +108,46 @@
         <% }); %>
       </tbody>
     </table>
+    <% } else { %>
+    <span>There are no open revisions.</span>
+    <% }  %>
   </div>
-  <% } %>
-
-  <% if (scheduledRevisions.length) { %>
-  <div class="pb-8">
-    <h4 class="flex items-center gap-2 pb-4 heading-3">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 text-raketa-primary">
-        <path fill-rule="evenodd" d="M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625ZM7.5 15a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 7.5 15Zm.75 2.25a.75.75 0 0 0 0 1.5H12a.75.75 0 0 0 0-1.5H8.25Z" clip-rule="evenodd" />
-        <path d="M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z" />
-      </svg>
-
-      Scheduled for publication
-    </h4>
-
-    <table class="data-grid alt">
-      <thead>
-        <tr>
-          <th>Title</th>
-          <th>Created by</th>
-          <th>Scheduled by</th>
-          <th>Publish on</th>
-          <th>&nbsp;</th>
-        </tr>
-      </thead>
-
-      <tbody>
-        <% scheduledRevisions.forEach((revision, idx)=> { %>
-        <tr class="border-b border-mono-25">
-          <td class="w-1/2 py-4 pl-2">
-            <div class="flex items-center gap-1">
-              <%= revision.title %>
-            </div>
-          </td>
-
-          <td class="whitespace-nowrap">
-            <%- render_partial('./_shared/_revision_operator.ejs', { revision }) %>
-          </td>
+  <% const reports = locals.reports || {}; %>
 
-          <td class="whitespace-nowrap">
-            <div class="body-3 text-raketa-foreground/50">
-              <div class="flex items-center gap-1" title="<%= revision.schedule.operatorMeta.name %>">
-                <% if (revision.schedule.operatorMeta.avatar) { %>
-                <img src="<%= revision.schedule.operatorMeta.avatar %>" class="rounded-full size-4">
-                <% } %>
-                <%= revision.schedule.operatorMeta.name %>
-              </div>
-            </div>
-          </td>
-
-          <td class="whitespace-nowrap">
-            <div class="body-3 text-raketa-foreground/50">
-              <div class="flex items-center gap-1">
-                <svg xmlns="http://www.w3.org/2000/svg" class="size-4 text-raketa-foreground" viewBox="0 0 512 512">
-                  <path d="M112.91 128A191.85 191.85 0 0064 254c-1.18 106.35 85.65 193.8 192 194 106.2.2 192-85.83 192-192 0-104.54-83.55-189.61-187.5-192a4.36 4.36 0 00-4.5 4.37V152" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
-                  <path d="M233.38 278.63l-79-113a8.13 8.13 0 0111.32-11.32l113 79a32.5 32.5 0 01-37.25 53.26 33.21 33.21 0 01-8.07-7.94z" />
-                </svg>
-
-
-                <time data-pretty-expiration-time datetime="<%= revision.schedule.mergeAt %>"><%= revision.schedule.mergeAt %></time>
-              </div>
-            </div>
-          </td>
-
-          <td class="whitespace-nowrap">
-            <div class="justify-end actions-toolbar">
-              <form action="<%= `/${_context.locale}/${_context.resourceConfig.resourceType}_revisions/${revision.id}/cancel_schedules` %>" method="post" class="inline-flex items-center gap-2">
-                <%- f.submit('Remove schedule', { class: 'btn-text' }) %>
-              </form>
-
-              <a href="/remote/login?redirect_to=/<%= _context.locale %>/admin/<%= _context.resourceConfig.resourceType %>-revisions/<%= revision.id %>/preview" target="_blank" class="btn-text has-icon">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
-                </svg>
+  <% if (reports.insights) { %>
+  <%- render_partial('./_shared/_quick_insights.ejs') %>
+  <%- render_partial('./_shared/_traffic_chart.ejs') %>
+  <% } %>
 
-                Preview
-              </a>
-            </div>
-          </td>
-        </tr>
-        <% }); %>
-      </tbody>
-    </table>
-  </div>
+  <% if (reports.webVitals) { %>
+  <%- render_partial('./_shared/_core_web_vitals.ejs', {
+    vitalsMeta: reports.vitalsMeta,
+    render_partial,
+  }) %>
   <% } %>
 
   <% if (utils.feature("contentTasks", _context) && resource.activeContentTask) { %>
-    <div class="mb-4">
-      <h4 class="flex items-center gap-2 pb-4 heading-3">
-        <svg class="size-4 text-raketa-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-        </svg>
+  <div class="mb-4">
+    <h4 class="flex items-center gap-2 pb-4 heading-3">
+      <svg class="size-4 text-raketa-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+      </svg>
 
-        Active tasks
-      </h4>
+      Active tasks
+    </h4>
 
-      <%- render_partial('../_shared/_content_tasks.ejs', {
+    <%- render_partial('../_shared/_content_tasks.ejs', {
         tasks: [{...resource.activeContentTask, resource: resource}],
         showAllDetails: false }
       ) %>
-    </div>
+  </div>
   <% } %>
 
+  <%- render_partial('./_shared/_scheduled_revisions.ejs', {
+    scheduledRevisions,
+    render_partial,
+  }) %>
+
   <%- render_partial('./_shared/_addons.ejs') %>
 
   <div class="mb-4">
@@ -204,8 +169,33 @@
       toolbarPath: './_shared/_history_toolbar.ejs'
     }) %>
 
-    <a href="<%= `/${_context.locale}/${_context.resourceConfig.resourceTypePlural}/${resource.id}/history` %>" class="my-8 ml-2 btn-text">
+    <a href="<%= `/${_context.locale}/${_context.resourceConfig.resourceTypePlural}/${resource.id}/history` %>" class="mt-2 mb-4 ml-2 btn-text">
       Full page history
     </a>
   </div>
-</div>
+
+
+  <div class="pb-8">
+
+    <h4 class="flex items-center gap-2 pb-4 heading-3">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5 text-raketa-primary">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28ZM15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+      </svg>
+
+      Actions
+    </h4>
+
+    <%- render_partial('./_shared/_toolbar.ejs') %>
+  </div>
+</div>
+
+<% if (reports.path) { %>
+<script>
+  window.RAKETA_REPORTS = {
+    path: '<%= reports.path %>'
+  };
+</script>
+<script src="/report/chart.js"></script>
+<script src="/report/analytics.js"></script>
+<script src="/report/reports.js"></script>
+<% } %>

package/src/views/resources/translations/create_form.ejs

@@ -33,7 +33,7 @@
       <% if (utils.feature("contentTasks", _context) && _context.locale === _context.defaultLocale) { %>
       <div class="mb-4">
         <label for="workflow" class="font-semibold hover:cursor-pointer body-3">Translation workflow</label>
-        <select name="resource[workflow]" id="workflow">
+        <select name="resource[workflow][type]" id="workflow">
           <option value="">Default (no workflow)</option>
 
           <option value="LOKALISE_TO_AI_RT_HUM" <%= resource.workflow === 'LOKALISE_TO_AI_RT_HUM' ? 'selected' : '' %>>
@@ -52,6 +52,36 @@
           Select a workflow for the translation process. Lokalise workflow initiates a translation task for external translation.
         </p>
       </div>
+
+      <div class="mb-4" id="due_date_wrapper">
+        <label for="due_date" class="font-semibold hover:cursor-pointer body-3">Due date (UTC)</label>
+        <input type="datetime-local" name="resource[workflow][due_date]" id="due_date" />
+        <p class="text-sm text-raketa-foreground/50 mt-1">
+          Select a workflow for the translation process. Lokalise workflow initiates a translation task for external translation.
+        </p>
+      </div>
+
+      <script>
+        (function () {
+          const workflowSelect = document.getElementById("workflow");
+          const dueDateWrapper = document.getElementById("due_date_wrapper");
+          const dueDateInput = document.getElementById("due_date");
+
+          function toggleDueDate() {
+            if (!workflowSelect || !dueDateWrapper || !dueDateInput) return;
+            const isDefault = !workflowSelect.value;
+            dueDateWrapper.style.display = isDefault ? "none" : "block";
+            if (isDefault) {
+              dueDateInput.value = "";
+            }
+          }
+
+          if (workflowSelect) {
+            workflowSelect.addEventListener("change", toggleDueDate);
+            toggleDueDate();
+          }
+        })();
+      </script>
       <% } %>
 
       <% if (errors?.resource && targetLocale) { %>