UI enhancements

app/DataTables/WorklistDataTable.php

@@ -45,8 +45,8 @@ public function dataTable(QueryBuilder $query): EloquentDataTable
         $rawColumns = [
             'priority_icon',
         ];
-        foreach ($this->customColumns() as $column => $content) {
+        foreach ($this->renderCustomColumns() as $column => $content) {
-            $data_table->editColumn($column, $content);
+            $data_table->addColumn($column, $content);
             $rawColumns[] = $column;
         }
         $data_table
@@ -154,7 +154,11 @@ public function getColumns(): array
                         ->title('Read By');
                     break;
                 case WorklistColumn::ActionButtons:
-                    $columns[] = Column::computed('action')
+                case WorklistColumn::ViewerButtons:
+                case WorklistColumn::ReportingButtons:
+                    $columns[] = Column::computed($col->value)
+                        ->searchable(false)
+                        ->orderable(false)
                         ->exportable(false)
                         ->printable(false)
                         ->width(60)
@@ -202,7 +206,7 @@ private function physicianColumn(?User $user, Carbon|CarbonImmutable|null $dt):
     /**
      * @return array<string, Closure>
      */
-    private function customColumns(): array
+    private function renderCustomColumns(): array
     {
         $columns = [];
 
@@ -239,22 +243,34 @@ private function customColumns(): array
                     break;
                 case WorklistColumn::History:
                     $columns[$col->value] = fn (Study $study) => sprintf('
-   <a href="#" data-id="' . _h($study->id) . '" class="btn btn-sm btn-outline-light show-attach">
+   <a href="#" data-id="%s" class="btn btn-sm btn-outline-light show-attach">
     <i class="fa-light fa-file-prescription %s"></i>
     </a>
-', blank($study->body_part_examined) ? 'text-muted' : 'text-primary');
+',
+                        $study->hash,
+                        ($study->body_part_examined) ? 'text-muted' : 'text-primary');
                     break;
                 case WorklistColumn::ActionButtons:
-                    $columns[$col->value] = fn (Study $study) => $this->generateButtons($study);
+                    $columns[$col->value] = fn (Study $study) => $this->generateActionButtons($study);
+                    break;
+                case WorklistColumn::ViewerButtons:
                     $columns[$col->value] = fn (Study $study) => $this->generateViewerButtons($study);
                     break;
+                case WorklistColumn::ReportingButtons:
+                    $columns[$col->value] = fn (Study $study) => $this->generateReportingButtons($study);
+                    break;
             }
         }
 
         return $columns;
     }
 
-    private function renderButton(string $data_id, string $fa_icon, string $data_class, string $text, string $url = '#', bool $blank=false): string
+    private function generateReportingButtons(Study $study): string
+    {
+        return 'x';
+    }
+
+    private function renderButton(string $data_id, string $fa_icon, string $data_class, string $text, string $url = '#', bool $blank = false): string
     {
         return Blade::render('staff.worklist.partials._column-button',
             [
@@ -288,7 +304,7 @@ private function generateViewerButtons(Study $study): string
         return implode("\r", $btns);
     }
 
-    private function generateButtons(Study $study): string
+    private function generateActionButtons(Study $study): string
     {
         $btns = [];
         foreach (WorklistGuard::worklistButtons() as $button) {

app/Http/Controllers/Staff/StudyViewerController.php

@@ -25,7 +25,7 @@ private function loadViewer(Closure $callback)
         $study = Study::findOrFail($this->key);
         $url = $callback($study);
         abort_if(blank($url), 404);
-        $title = Str::limit($study->patient_name, 20) . ' | ' . config('app.name');
+        $title = Str::limit($study->getPatientDemographic(), 40);
 
         return view('staff.studies.viewer', compact('url', 'title'));
     }

app/Models/Study.php

@@ -339,6 +339,20 @@ public function getGenderNameAttribute(): string
         };
     }
 
+    public function getPatientDemographic(): string
+    {
+        $parts = array_purge([
+            Str::limit($this->sanitizedPatientName(), 20),
+            $this->patient_sex,
+            $this->patient_id,
+        ]);
+        if (! empty($parts)) {
+            return implode(' ^ ', $parts);
+        }
+
+        return '';
+    }
+
     protected function casts(): array
     {
         return [

app/Services/ACL/WorklistColumn.php

@@ -32,4 +32,6 @@ enum WorklistColumn: string
     case CreatedAt = 'created_at';
     case UpdatedAt = 'updated_at';
     case ActionButtons = 'action';
+    case ViewerButtons = 'viewers';
+    case ReportingButtons = 'reporting';
 }

app/Services/ACL/WorklistGuard.php

@@ -26,6 +26,8 @@ public static function worklistColumns(?int $user_id = null): Collection
             WorklistColumn::Series,
             WorklistColumn::ReceiveDate,
             WorklistColumn::ActionButtons,
+            WorklistColumn::ViewerButtons,
+            WorklistColumn::ReportingButtons,
         ]);
 
         return $columns;

resources/views/staff/studies/viewer.blade.php

@@ -1,10 +1,66 @@
 <html>
 <head>
-    <title>{{ $title }}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>{{ $title }} | {{ config('app.name') }}</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300@75&display=swap');
+        body {
+            margin: 0;
+            font-family: Inter, Arial, Helvetica, sans-serif;
+            font-size: 0.75rem;
+            font-weight: 400;
+            color: #9fa1b8;
+        }
+
+        .container {
+            display: grid;
+            grid-template-areas:
+    "header"
+    "content";
+            background-color: rgb(57, 57, 67);
+            grid-template-columns: 1fr;
+            gap: 3px;
+            padding: 3px;
+        }
+
+        .container > * {
+            background-color: rgb(48, 51, 78);
+        }
+
+        .container > .header {
+            grid-area: header;
+            height: 2vh;
+
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .container > .header > p {
+            text-align: center;
+        }
+
+        .container > .header > img {
+            width: 24px;
+        }
+
+        .container > div.content {
+            grid-area: content;
+            height: 97vh;
+        }
+    </style>
 </head>
 <body style="background-color:black;">
-    <iframe src="{{ $url }}" frameborder="0" width="100%" height="100%"
+<div class="container">
-            allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">
+    <header class="header">
-    </iframe>
+        <img src="https://placehold.co/24">
+        <p>{{ $title }}</p>
+    </header>
+    <div class="content">
+        <iframe src="{{ $url }}" frameborder="0" width="100%" height="100%"
+                allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">
+        </iframe>
+    </div>
+</div>
 </body>
 </html>