From f0f051615af832a0cad644e248109fa925904c8b Mon Sep 17 00:00:00 2001
From: Will Sheldon <114631109+wssheldon@users.noreply.github.com>
Date: Thu, 9 Nov 2023 14:59:30 -0800
Subject: [PATCH] [WIP] - First pass at migrating case page to Vue 3

---
 .../src/case/CaseStatusSelectGroup.vue        | 179 +++++
 .../static/dispatch/src/case/Page.vue         | 758 ++++++++++++++++++
 .../dispatch/src/case/ParticipantChips.vue    | 270 +++++++
 .../dispatch/src/case/ParticipantSelect.vue   | 141 ++++
 .../static/dispatch/src/case/Table.vue        |  10 +-
 .../static/dispatch/src/case/TagChips.vue     | 170 ++++
 .../case/priority/CasePrioritySelectChip.vue  |  93 +++
 .../case/severity/CaseSeveritySelectChip.vue  |  95 +++
 .../src/case/type/CaseTypeSelectChip.vue      | 116 +++
 .../dispatch/src/components/RichEditor.vue    |  56 ++
 .../src/project/ProjectSelectChip.vue         | 104 +++
 .../static/dispatch/src/router/config.js      |   9 +-
 .../src/signal/NewRawSignalViewer.vue         |  82 ++
 .../src/signal/SignalInstanceCardViewer.vue   |  82 ++
 14 files changed, 2163 insertions(+), 2 deletions(-)
 create mode 100644 src/dispatch/static/dispatch/src/case/CaseStatusSelectGroup.vue
 create mode 100644 src/dispatch/static/dispatch/src/case/Page.vue
 create mode 100644 src/dispatch/static/dispatch/src/case/ParticipantChips.vue
 create mode 100644 src/dispatch/static/dispatch/src/case/ParticipantSelect.vue
 create mode 100644 src/dispatch/static/dispatch/src/case/TagChips.vue
 create mode 100644 src/dispatch/static/dispatch/src/case/priority/CasePrioritySelectChip.vue
 create mode 100644 src/dispatch/static/dispatch/src/case/severity/CaseSeveritySelectChip.vue
 create mode 100644 src/dispatch/static/dispatch/src/case/type/CaseTypeSelectChip.vue
 create mode 100644 src/dispatch/static/dispatch/src/components/RichEditor.vue
 create mode 100644 src/dispatch/static/dispatch/src/project/ProjectSelectChip.vue
 create mode 100644 src/dispatch/static/dispatch/src/signal/NewRawSignalViewer.vue
 create mode 100644 src/dispatch/static/dispatch/src/signal/SignalInstanceCardViewer.vue

diff --git a/src/dispatch/static/dispatch/src/case/CaseStatusSelectGroup.vue b/src/dispatch/static/dispatch/src/case/CaseStatusSelectGroup.vue
new file mode 100644
index 000000000000..1b55d19464f2
--- /dev/null
+++ b/src/dispatch/static/dispatch/src/case/CaseStatusSelectGroup.vue
@@ -0,0 +1,179 @@
+<template>
+  <v-item-group mandatory>
+    <v-dialog v-model="dialogVisable" max-width="600">
+      <v-card>
+        <v-card-title>Update Case Status</v-card-title>
+        <v-card-text
+          >Are you sure you want to change the case status from {{ _case.status }} to
+          {{ selectedStatus }}</v-card-text
+        >
+
+        <v-btn
+          class="ml-6 mb-4"
+          small
+          color="info"
+          elevation="1"
+          @click="changeStatus(selectedStatus)"
+        >
+          Submit
+        </v-btn>
+      </v-card>
+    </v-dialog>
+
+    <v-container fluid>
+      <v-row no-gutters>
+        <v-col v-for="status in statuses" :key="status.name" cols="6" md="2">
+          <v-item v-slot="{ active, toggle }">
+            <div class="overlap-card" :class="status.hoverClass" @click="openDialog(status.name)">
+              <v-tooltip bottom>
+                <template v-slot:activator="{ on, attrs }">
+                  <v-sheet outlined color="grey lighten-1" :class="status.sheetClass">
+                    <v-card
+                      class="d-flex align-center"
+                      :class="status.sheetClass"
+                      height="30"
+                      width="100%"
+                      @click="toggle"
+                      flat
+                      color="grey lighten-4"
+                      v-bind="attrs"
+                      v-on="on"
+                    >
+                      <v-scroll-y-transition>
+                        <div v-if="isActiveStatus(status.name)" class="flex-grow-1 text-center">
+                          <v-badge
+                            :color="status.color"
+                            bordered
+                            dot
+                            left
+                            offset-x="-10"
+                            offset-y="0"
+                          >
+                          </v-badge
+                          >{{ status.label }}
+                        </div>
+
+                        <div v-else class="flex-grow-1 text-center text--disabled">
+                          {{ status.label }}
+                        </div>
+                        <span>{{
+                          status.tooltip ? status.tooltip : `Not yet ${status.label.toLowerCase()}`
+                        }}</span>
+                      </v-scroll-y-transition>
+                    </v-card>
+                  </v-sheet>
+                </template>
+                <span>{{
+                  status.tooltip ? status.tooltip : `Not yet ${status.label.toLowerCase()}`
+                }}</span>
+              </v-tooltip>
+            </div>
+          </v-item>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-item-group>
+</template>
+
+<script>
+import { mapActions } from "vuex"
+export default {
+  name: "CaseStatusSelectGroup",
+  props: {
+    _case: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      selectedStatus: null,
+      dialogVisable: false,
+    }
+  },
+  computed: {
+    statuses() {
+      return [
+        {
+          name: "New",
+          label: "New",
+          color: "red",
+          hoverClass: "hover-card-three",
+          sheetClass: "rounded-l-xl arrow",
+          tooltip: this._case.created_at,
+        },
+        {
+          name: "Triage",
+          label: "Triaged",
+          color: "red",
+          hoverClass: "hover-card-two",
+          sheetClass: "arrow",
+          tooltip: this._case.triage_at,
+        },
+        {
+          name: "Closed",
+          label: "Resolved",
+          color: "green",
+          hoverClass: "hover-card",
+          sheetClass: "arrow",
+          tooltip: this._case.closed_at,
+        },
+        {
+          name: "Escalated",
+          label: "Escalated",
+          color: "red",
+          hoverClass: "",
+          sheetClass: "rounded-r-xl",
+          tooltip: this._case.escalated_at,
+        },
+      ]
+    },
+  },
+  methods: {
+    ...mapActions("case_management", ["save_page"]),
+    changeStatus(newStatus) {
+      this._case.status = newStatus
+      this.save_page()
+      this.dialogVisable = false
+      this.selectedStatus = null
+    },
+    openDialog(newStatus) {
+      this.selectedStatus = newStatus
+      this.dialogVisable = true
+    },
+    isActiveStatus(status) {
+      return this._case.status === status
+    },
+  },
+}
+</script>
+
+<style scoped>
+.arrow {
+  clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%);
+}
+.overlap-card {
+  margin-left: -15px;
+  border-radius: 75%;
+  box-shadow: 0 1px 6px 0px rgba(0, 0, 0, 0.1);
+}
+.overlap-card:first-child {
+  margin-left: 0;
+}
+.overlap-card:last-child {
+  margin-right: -15px;
+}
+.hover-card {
+  position: relative;
+  z-index: 1;
+}
+.hover-card-two {
+  position: relative;
+  z-index: 2;
+}
+.hover-card-three {
+  position: relative;
+  z-index: 3;
+}
+</style>
diff --git a/src/dispatch/static/dispatch/src/case/Page.vue b/src/dispatch/static/dispatch/src/case/Page.vue
new file mode 100644
index 000000000000..75ad2a8508d7
--- /dev/null
+++ b/src/dispatch/static/dispatch/src/case/Page.vue
@@ -0,0 +1,758 @@
+<template>
+  <v-container fluid class="pt-6" style="width: 1920px">
+    <v-row no-gutters align="start">
+      <v-col cols="9">
+        <v-breadcrumbs :items="breadcrumbItems"> </v-breadcrumbs>
+
+        <v-row align="center">
+          <v-col cols="auto">
+            <v-responsive :width="getTextWidth(selected.title) + 'px'">
+              <!-- variant="flat" is currently undocumented-->
+              <v-text-field
+                variant="flat"
+                background-color="transparent"
+                class="hover-outline ml-2 mr-4"
+                v-model="selected.title"
+                hide-details="auto"
+              >
+              </v-text-field>
+            </v-responsive>
+          </v-col>
+
+          <!-- <v-col cols="auto">
+            <v-chip small text-color="black" color="#edf2f7">
+              {{ selected.project.name }}
+            </v-chip>
+            <v-chip small text-color="black" color="#edf2f7" class="ml-4">
+              {{ selected.case_type.name }}
+            </v-chip>
+          </v-col> -->
+        </v-row>
+
+        <div class="pt-2">
+          <v-row>
+            <v-col cols="12" sm="12">
+              <div class="pt-2 mr-16 pr-16 subtitle font-weight-light">
+                <v-textarea
+                  v-model="selected.description"
+                  variant="flat"
+                  auto-grow
+                  rows="1"
+                  hide-details="auto"
+                  background-color="transparent"
+                  @input="autosave"
+                  class="pl-1 mb-4 mr-16 pr-16 hover-outline"
+                >
+                </v-textarea>
+              </div>
+
+              <div>
+                <v-row no-gutters align="center">
+                  <v-col cols="6" md="9">
+                    <!-- <case-status-select-group :_case="selected"></case-status-select-group> -->
+                  </v-col>
+                </v-row>
+              </div>
+
+              <div class="pl-4">
+                <v-tabs v-model="tab" class="ml-n3" background-color="transparent">
+                  <v-tab key="main" c>
+                    <v-icon dense small class="pr-2"> mdi-clock-outline </v-icon>
+                    Timeline
+                  </v-tab>
+                  <v-tab key="resources">
+                    <v-icon dense small class="pr-2"> mdi-semantic-web </v-icon>
+                    Resources
+                  </v-tab>
+                  <v-tab key="signals" :disabled="signal_instances?.length === 0">
+                    <v-icon dense small class="pr-2"> mdi-broadcast </v-icon>
+                    <template v-if="totalSignalInstances">
+                      <v-badge color="rgb(43, 51, 67)" inline :content="totalSignalInstances">
+                        Signals
+                      </v-badge>
+                    </template>
+                    <template v-else> Signals </template>
+                  </v-tab>
+                  <v-tab key="entities">
+                    <v-icon dense small class="pr-2"> mdi-account-group </v-icon>
+                    <template v-if="totalEntities > 0">
+                      <v-badge color="rgb(43, 51, 67)" inline :content="totalEntities">
+                        Entities
+                      </v-badge>
+                    </template>
+                    <template v-else> Entities </template>
+                  </v-tab>
+                </v-tabs>
+              </div>
+              <v-divider class="ml-2"></v-divider>
+              <v-window v-model="tab">
+                <v-window-item key="main" class="tab">
+                  <div class="pb-12 pr-12 pl-12">
+                    <v-card elevation="0" class="rounded-lg">
+                      <!-- <CaseTimeline class="pl-8 mr-4" /> -->
+                    </v-card>
+                  </div>
+                </v-window-item>
+                <v-window-item key="main" class="tab">
+                  <div class="pb-12 pr-12 pl-12">
+                    <case-resources-tab></case-resources-tab>
+                  </div>
+                </v-window-item>
+                <v-window-item key="signals" class="tab">
+                  <signal-instance-card-viewer :caseId="selected.id" />
+                </v-window-item>
+                <v-window-item key="entities">
+                  <entities-tab :selected="selected" v-model="signal_instances" />
+                </v-window-item>
+              </v-window>
+            </v-col>
+          </v-row>
+        </div>
+      </v-col>
+      <v-col cols="3">
+        <div>
+          <v-row no-gutters align="center" justify="end">
+            <v-col cols="3" md="auto">
+              <div class="last-updated-text grey--text">
+                <v-icon small left v-if="selected.loading" class="loading-icon">mdi-loading</v-icon>
+                <v-icon small left v-else>mdi-update</v-icon>
+                <span class="subtitle-2 mr-4">{{ lastUpdatedTime }}</span>
+              </div>
+            </v-col>
+            <v-spacer></v-spacer>
+            <v-col cols="4" md="auto">
+              <participant-chips
+                v-if="selected.participants && selected.participants.length > 0"
+                :participants="selected.participants"
+              >
+              </participant-chips>
+            </v-col>
+            <v-col cols="5" md="auto" class="pr-2">
+              <v-btn class="ml-2" variant="text" icon @click="toggleVisibility()">
+                <v-icon dense v-if="this.selected.visibility == 'Open'">mdi-lock-open</v-icon>
+                <v-icon v-else>mdi-lock</v-icon>
+              </v-btn>
+              <v-dialog v-model="visibilityDialog" max-width="600">
+                <v-card>
+                  <v-card-title>Update Case Visibility</v-card-title>
+                  <v-card-text
+                    >Are you sure you want to change the case visibility from
+                    <b>{{ this.selected.visibility }}</b> to <b>{{ newVisibility }}</b></v-card-text
+                  >
+                  <v-btn
+                    class="ml-6 mb-4"
+                    small
+                    color="info"
+                    elevation="1"
+                    @click="changeVisibility(newVisibility)"
+                  >
+                    Submit
+                  </v-btn>
+                </v-card>
+              </v-dialog>
+              <v-btn
+                v-if="selected.status == 'New' || selected.status == 'Triage'"
+                @click="showEscalateDialog(selected)"
+                variant="text"
+                icon
+              >
+                <v-icon dense>mdi-fire</v-icon>
+              </v-btn>
+              <v-menu offset-y>
+                <template v-slot:activator="{ on, attrs }">
+                  <v-btn v-bind="attrs" v-on="on" variant="text" icon>
+                    <v-icon dense>mdi-dots-vertical</v-icon>
+                  </v-btn>
+                </template>
+                <v-list>
+                  <v-list-item> <v-icon left dense>mdi-delete</v-icon> Delete </v-list-item>
+                </v-list>
+              </v-menu>
+            </v-col>
+          </v-row>
+          <v-card class="px-6 pb-6 mr-4 rounded-lg mt-8 refactoring-ui-shadow" outlined>
+            <v-row no-gutters align="center" class="pt-6">
+              <v-col cols="4">
+                <div class="subtitle-2">Assigned to</div>
+              </v-col>
+              <v-col cols="8">
+                <!-- <participant-select
+                  v-model="selected.assignee"
+                  :project="selected.project"
+                  :value="selected.assignee"
+                  @participant-change="onValueChange"
+                /> -->
+              </v-col>
+            </v-row>
+            <v-row no-gutters align="center" class="pt-5">
+              <v-col cols="4">
+                <div class="subtitle-2">Reported by</div>
+              </v-col>
+              <v-col cols="8">
+                <!-- <participant-select
+                  v-model="selected.reporter"
+                  :project="selected.project"
+                  :value="selected.reporter"
+                  @participant-change="onValueChange"
+                /> -->
+              </v-col>
+            </v-row>
+            <v-row no-gutters align="center" class="pt-6">
+              <v-col cols="4">
+                <div class="subtitle-2">Priority</div>
+              </v-col>
+              <v-col cols="8">
+                <!-- <case-priority-select-chip :_case="selected" v-bind="attrs" v-on="on" /> -->
+              </v-col>
+            </v-row>
+            <v-row no-gutters align="center" class="pt-8">
+              <v-col cols="4">
+                <div class="subtitle-2">Severity</div>
+              </v-col>
+              <v-col cols="8">
+                <!-- <case-severity-select-chip :_case="selected" v-bind="attrs" v-on="on" /> -->
+              </v-col>
+            </v-row>
+            <v-row no-gutters align="center" class="pt-8">
+              <v-col cols="4">
+                <div class="subtitle-2">Type</div>
+              </v-col>
+              <v-col cols="8">
+                <!-- <case-type-select-chip
+                  v-model="selected.case_type"
+                  :project="selected.project"
+                  @input="onValueChange"
+                /> -->
+              </v-col>
+            </v-row>
+            <v-row no-gutters align="center" class="pt-8">
+              <v-col cols="4">
+                <div class="subtitle-2">Project</div>
+              </v-col>
+              <v-col cols="8">
+                <project-select-chip v-model="selected.project" @input="onValueChange" />
+              </v-col>
+            </v-row>
+            <v-divider class="mt-8"></v-divider>
+            <div class="subtitle">Resolution Details</div>
+            <v-card flat color="grey lighten-5" class="rounded-lg mt-8 hover-outline">
+              <!-- <rich-editor></rich-editor> -->
+              <v-row class="pb-2 pr-2 pl-2">
+                <v-col cols="8" class="d-flex align-center">
+                  <v-menu offset-y bottom>
+                    <template v-slot:activator="{ on }">
+                      <v-chip v-on="on" small color="grey lighten-2">
+                        <v-icon small left> mdi-pencil </v-icon>
+                        {{
+                          selected.resolution_reason
+                            ? selected.resolution_reason
+                            : "Select a resolution reason"
+                        }}
+                      </v-chip>
+                    </template>
+                    <v-list>
+                      <v-list-item
+                        v-for="reason in resolutionReasons"
+                        :key="reason"
+                        @click="onSelectReason(reason)"
+                      >
+                        <v-list-item-title>{{ reason }}</v-list-item-title>
+                      </v-list-item>
+                    </v-list>
+                  </v-menu>
+                </v-col>
+                <v-col cols="4" class="d-flex justify-end align-center">
+                  <v-btn
+                    small
+                    class="lower-btn white--text"
+                    color="info"
+                    elevation="1"
+                    @click="onSubmit()"
+                  >
+                    Submit
+                  </v-btn>
+                </v-col>
+              </v-row>
+            </v-card>
+          </v-card>
+          <v-dialog v-model="tagDialogVisable" max-width="800">
+            <v-card>
+              <v-btn disabled class="ml-4 mt-6" color="grey lighten-5" elevation="0">
+                <v-icon color="grey darken-1"> mdi-tag </v-icon>
+              </v-btn>
+              <tag-filter-auto-complete
+                label="Tags"
+                v-model="tags"
+                model="case"
+                :model-id="id"
+                class="pl-6 pr-6"
+              />
+              <v-btn class="mt-6 ml-6 mb-4" small color="info" elevation="1" @click="onSubmit">
+                Submit
+              </v-btn>
+            </v-card>
+          </v-dialog>
+          <v-dialog v-model="dupeDialogVisable" max-width="800">
+            <v-card>
+              <v-card-title>Duplicates</v-card-title>
+              <case-filter-combobox
+                label="Duplicates"
+                v-model="duplicates"
+                :project="project"
+                class="pl-6 pr-6"
+              />
+              <v-btn class="ml-6 mb-4" small color="info" elevation="1"> Submit </v-btn>
+            </v-card>
+          </v-dialog>
+          <v-dialog v-model="relatedDialogVisable" max-width="800">
+            <v-card>
+              <v-card-title>Related</v-card-title>
+              <case-filter-combobox
+                label="Related"
+                v-model="related"
+                :project="project"
+                class="pl-6 pr-6"
+              />
+              <v-btn class="ml-6 mb-4" small color="info" elevation="1"> Submit </v-btn>
+            </v-card>
+          </v-dialog>
+          <v-dialog v-model="incidentDialogVisable" max-width="800">
+            <v-card>
+              <v-card-title>Incidents</v-card-title>
+              <incident-filter-combobox
+                label="Incidents"
+                v-model="incidents"
+                :project="project"
+                class="pl-6 pr-6"
+              />
+              <v-btn class="ml-6 mb-4" small color="info" elevation="1"> Submit </v-btn>
+            </v-card>
+          </v-dialog>
+          <v-row no-gutters align="center" class="pt-2">
+            <v-col cols="24" md="9">
+              <v-chip
+                small
+                text-color="black"
+                color="#edf2f7"
+                class="ml-2 mt-4 chip-hover-outline"
+                @click="dupeDialogVisable = true"
+              >
+                <v-icon dense small class="pr-2"> mdi-content-duplicate </v-icon>
+                Duplicates
+                <v-icon small right>mdi-plus</v-icon>
+              </v-chip>
+              <v-badge
+                color="rgb(43, 51, 67)"
+                :content="duplicates?.length ? duplicates?.length : '0'"
+                class="mr-4"
+              ></v-badge>
+              <v-chip
+                small
+                text-color="black"
+                color="#edf2f7"
+                class="ml-4 mt-4 chip-hover-outline"
+                @click="openIncidentDialog"
+              >
+                <v-icon dense small class="pr-2"> mdi-fire </v-icon>
+                Incidents
+                <v-icon small right>mdi-plus</v-icon>
+              </v-chip>
+              <v-badge
+                color="rgb(43, 51, 67)"
+                :content="incidents?.length ? incidents?.length : '0'"
+                class="mr-4"
+              ></v-badge>
+              <v-chip
+                small
+                text-color="black"
+                color="#edf2f7"
+                class="ml-2 mt-4 chip-hover-outline"
+                @click="openRelatedDialog"
+              >
+                <v-icon dense small class="pr-2"> mdi-animation </v-icon>
+                Related
+                <v-icon small right>mdi-plus</v-icon>
+              </v-chip>
+              <v-badge
+                small
+                color="rgb(43, 51, 67)"
+                :content="related?.length ? related?.length : '0'"
+                class="mr-4"
+              ></v-badge>
+              <v-chip
+                small
+                text-color="black"
+                color="#edf2f7"
+                class="ml-4 mt-4 chip-hover-outline"
+                @click="openTagDialog"
+              >
+                <v-icon dense small class="pr-2"> mdi-tag </v-icon>
+                Tags
+                <v-icon small right>mdi-plus</v-icon>
+              </v-chip>
+              <v-badge
+                small
+                color="rgb(43, 51, 67)"
+                :content="tags?.length ? tags?.length : '0'"
+              ></v-badge>
+            </v-col>
+          </v-row>
+        </div>
+      </v-col>
+    </v-row>
+    <div>
+      <!-- other elements... -->
+      <escalate-dialog />
+    </div>
+  </v-container>
+</template>
+<script>
+import moment from "moment-timezone"
+import { mapFields } from "vuex-map-fields"
+import { mapActions } from "vuex"
+import CaseResourcesTab from "@/case/ResourcesTab.vue"
+import CaseFilterCombobox from "@/case/CaseFilterCombobox.vue"
+import IncidentFilterCombobox from "@/incident/IncidentFilterCombobox.vue"
+// import CaseTypeSelectChip from "@/case/type/CaseTypeSelectChip.vue"
+// import CaseSeveritySelectChip from "@/case/severity/CaseSeveritySelectChip.vue"
+// import CaseStatusSelectGroup from "@/case/CaseStatusSelectGroup.vue"
+// import CasePrioritySelectChip from "@/case/priority/CasePrioritySelectChip.vue"
+import CaseTimelineTab from "@/case/TimelineTab.vue"
+import TagChips from "@/case/TagChips.vue"
+import EscalateDialog from "@/case/EscalateDialog.vue"
+import Participant from "@/case/Participant.vue"
+import CasePrioritySelect from "@/case/priority/CasePrioritySelect.vue"
+import ParticipantChips from "@/case/ParticipantChips.vue"
+import SignalInstanceTab from "@/signal/SignalInstanceTab.vue"
+import SignalInstanceCardViewer from "@/signal/SignalInstanceCardViewer.vue"
+// import RichEditor from "@/components/RichEditor.vue"
+import EntitiesTab from "@/entity/EntitiesTab.vue"
+import TagFilterAutoComplete from "@/tag/TagFilterAutoComplete.vue"
+import ProjectSelectChip from "@/project/ProjectSelectChip.vue"
+export default {
+  name: "CasePage",
+  components: {
+    EscalateDialog,
+    // CaseSeveritySelectChip,
+    // CaseTypeSelectChip,
+    CaseFilterCombobox,
+    // CaseStatusSelectGroup,
+    IncidentFilterCombobox,
+    CaseTimelineTab,
+    CaseResourcesTab,
+    // CasePrioritySelectChip,
+    Participant,
+    CasePrioritySelect,
+    ParticipantChips,
+    SignalInstanceTab,
+    SignalInstanceCardViewer,
+    EntitiesTab,
+    TagFilterAutoComplete,
+    TagChips,
+    // RichEditor,
+    ProjectSelectChip,
+  },
+  props: {
+    _case: {
+      type: Object,
+      required: false,
+      default: () => ({}), // returns an empty object if _case is not provided
+    },
+  },
+  data() {
+    const canvas = document.createElement("canvas")
+    const context = canvas.getContext("2d")
+    return {
+      canvas,
+      context,
+      tab: null,
+      show: false,
+      editing: false,
+      tagDialogVisable: false,
+      dupeDialogVisable: false,
+      incidentDialogVisable: false,
+      relatedDialogVisable: false,
+      visibilityDialog: false,
+      fullText: false,
+      selectedLoading: false,
+      clientlastUpdatedTime: null,
+      currentReason: "Resolution Reason",
+      visibilities: ["Open", "Restricted"],
+      priorities: ["High", "Medium", "Low"],
+      statuses: ["New", "Triage", "Escalated", "Closed"],
+      resolutionReasons: ["False Positive", "User Acknowledged", "Mitigated", "Escalated"],
+    }
+  },
+  created() {
+    this.fetchDetails()
+    console.log("selected %O", this.selected)
+  },
+  watch: {
+    "$route.params.name": function () {
+      this.fetchDetails()
+    },
+  },
+  computed: {
+    ...mapFields("case_management", [
+      "selected",
+      "selected.id",
+      "selected.name",
+      "selected.project",
+      "selected.reported_at",
+      "selected.created_at",
+      "selected.triage_at",
+      "selected.closed_at",
+      "selected.escalated_at",
+      "selected.case_type",
+      "selected.status",
+      "selected.loading",
+      "selected.incidents",
+      "selected.related",
+      "selected.duplicates",
+      "selected.tags",
+      "selected.signal_instances",
+      "selected.workflow_instances",
+      "dialogs.showEditSheet",
+    ]),
+    breadcrumbItems() {
+      let items = [
+        {
+          title: "Cases",
+          disabled: false,
+          href: `/${this.$route.params.organization}/cases`,
+        },
+        {
+          title: this.selected.name,
+          disabled: true,
+        },
+      ]
+      console.log("Items: ", items)
+      return items
+    },
+    lastUpdatedTime() {
+      if (this.selected.updated_at) {
+        if (this.clientlastUpdatedTime) {
+          const timestamp = moment(this.clientlastUpdatedTime)
+          return timestamp.fromNow()
+        }
+        const timestamp = moment(this.selected.updated_at)
+        return timestamp.fromNow()
+      } else {
+        return "N/A"
+      }
+    },
+    totalSignalInstances() {
+      return this.selected?.signal_instances?.length
+    },
+    totalEntities() {
+      /*
+        Walk through each signal instance and add the length of its entities
+        array to a running sum, which is returned as the total number of entities.
+        The 0 passed as the second argument to reduce is the initial value of the sum.
+      */
+      return this.selected?.signal_instances?.reduce((sum, instance) => {
+        return sum + instance.entities?.length
+      }, 0)
+    },
+  },
+  methods: {
+    updateClientUpdateTime() {
+      this.clientlastUpdatedTime = new Date()
+    },
+    getTextWidth(text, font) {
+      const canvas = document.createElement("canvas")
+      const context = canvas.getContext("2d")
+      context.font = "400 2rem Roboto"
+      return context.measureText(text).width
+    },
+    fetchDetails() {
+      this.getDetails({ name: this.$route.params.name })
+    },
+    toggleVisibility() {
+      const newVisibility = this.selected.visibility === "Open" ? "Restricted" : "Open"
+      this.openVisibilityDialog(newVisibility)
+    },
+    openVisibilityDialog(newVisibility) {
+      this.newVisibility = newVisibility
+      this.visibilityDialog = true
+    },
+    changeVisibility(newVisibility) {
+      this.visibilityDialog = false
+      console.log(newVisibility)
+      this.selected.visibility = newVisibility
+      console.log(this.selected)
+      this.save_page()
+    },
+    onValueChange() {
+      console.log("this selected assignee %O", this.selected.assignee)
+      this.save_page()
+    },
+    onTypeChange() {
+      console.log("this selected type %O", this.selected.case_type)
+      this.save_page()
+    },
+    onSubmit(resolution_reason, resolution) {
+      this.save_page()
+    },
+    autosave() {
+      this.selectedLoading = true
+      this.save_page()
+      this.updateClientUpdateTime()
+      this.selectedLoading = false
+    },
+    changePriority(priority) {
+      this.selected.case_priority = priority // Update the selected priority.
+      // Here, you may want to call an API to update the priority in the backend.
+      // this.updateCasePriority(this.selected.case_priority);
+    },
+    onSelectReason(reason) {
+      this.selected.resolution_reason = reason
+      this.save_page()
+      // other logic as necessary
+    },
+    ...mapActions("case_management", ["save", "getDetails", "save_page", "showEscalateDialog"]),
+    toggleText() {
+      this.fullText = !this.fullText
+    },
+    openRelatedDialog() {
+      this.relatedDialogVisable = true
+    },
+    openDuplicateDialog() {
+      this.dupeDialogVisable = true
+    },
+    openIncidentDialog() {
+      this.incidentDialogVisable = true
+    },
+    openTagDialog() {
+      this.tagDialogVisable = true
+    },
+    getPriorityColor(priority) {
+      if (priority) {
+        switch (priority.name) {
+          case "Low":
+            return "green lighten-1"
+          case "Medium":
+            return "orange"
+          case "High":
+            return "red darken-2"
+          case "Critical":
+            return "red darken-4"
+        }
+      }
+      return "red darken-2"
+    },
+    formatRelativeDate(date) {
+      return moment(date).fromNow()
+    },
+    formatToTimeZones(date) {
+      if (!date) return ""
+      let m = moment(date)
+      return `UTC: ${date}<br> PST: ${m
+        .tz("America/Los_Angeles")
+        .format("YYYY-MM-DD HH:mm:ss")}<br>EST: ${m
+        .tz("America/New_York")
+        .format("YYYY-MM-DD HH:mm:ss")}`
+    },
+  },
+}
+</script>
+
+<style scoped>
+.lower-btn {
+  text-transform: none !important;
+  /* color: rgb(39, 39, 39) !important; */
+  font-weight: bold !important;
+  letter-spacing: normal !important;
+}
+.v-tab {
+  text-transform: initial; /* Keeping the text's original state */
+  color: #272727; /* Slightly darker shade of gray for better contrast and readability */
+  font-weight: 400; /* Normal text-weight */
+  letter-spacing: normal;
+  line-height: 1.5; /* Spacing for better readability */
+  font-family: "Inter", sans-serif; /* A modern, readable typeface */
+}
+.tab {
+  transition: all 0.2s ease;
+}
+.v-tooltip__content {
+  background-color: rgba(211, 211, 211, 0.8) !important;
+  color: black !important;
+  border: 1px dotted black !important;
+}
+
+.v-text-field input {
+  font-size: 40px;
+}
+
+.hover-outline {
+  border: 1px dashed transparent;
+  border-radius: 0px;
+}
+
+.hover-outline:hover {
+  border: 1px dashed rgba(148, 148, 148, 0.87);
+  border-radius: 20px;
+}
+
+.chip-hover-outline:hover {
+  border: 1px dashed rgba(148, 148, 148, 0.87) !important;
+  border-radius: 20px;
+}
+
+.refactoring-ui-shadow {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.sticky-col {
+  position: sticky;
+  top: 80px;
+}
+
+.arrow {
+  clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%);
+}
+
+.overlap-card {
+  margin-left: -15px;
+}
+
+.overlap-card:first-child {
+  margin-left: 0;
+}
+
+.overlap-card:last-child {
+  margin-right: -15px;
+}
+
+.hover-card {
+  position: relative;
+  z-index: 1;
+}
+
+.hover-card-two {
+  position: relative;
+  z-index: 2;
+}
+
+.hover-card-three {
+  position: relative;
+  z-index: 3;
+}
+
+.last-updated-text {
+  display: flex;
+  align-items: center;
+}
+.loading-icon {
+  animation: spin 1s infinite linear;
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/src/dispatch/static/dispatch/src/case/ParticipantChips.vue b/src/dispatch/static/dispatch/src/case/ParticipantChips.vue
new file mode 100644
index 000000000000..fb5eb40dc773
--- /dev/null
+++ b/src/dispatch/static/dispatch/src/case/ParticipantChips.vue
@@ -0,0 +1,270 @@
+<template>
+  <div class="participant-chips">
+    <!-- Display Visible Participants -->
+    <div v-for="(participant, index) in visibleParticipants" :key="index" class="chip-container">
+      <v-menu v-model="menu" bottom rounded offset-y>
+        <template v-slot:activator="{ on }">
+          <v-btn icon v-on="on">
+            <v-avatar
+              size="40px"
+              color="black"
+              :class="chipClasses(participant.individual.name)"
+              :style="{ zIndex: calculateZIndex(index) }"
+              v-on="on"
+            >
+              <img
+                v-if="userAvatarUrl(participant)"
+                :src="userAvatarUrl(participant)"
+                :alt="participant.individual.name"
+              />
+              <span v-else class="white--text">{{ initials(participant.individual.name) }}</span>
+            </v-avatar>
+          </v-btn>
+        </template>
+        <v-card width="300">
+          <v-list dark>
+            <v-list-item v-if="participant.individual">
+              <v-list-item-avatar class="highlighted-chip">
+                <span class="white--text">{{ initials(participant.individual.name) }}</span>
+              </v-list-item-avatar>
+              <v-list-item-content>
+                <v-list-item-title>{{ participant.individual.name }}</v-list-item-title>
+                <v-list-item-subtitle>{{
+                  participant.participant_roles | activeRoles
+                }}</v-list-item-subtitle>
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-btn icon @click="menu = false">
+                  <v-icon>mdi-close-circle</v-icon>
+                </v-btn>
+              </v-list-item-action>
+            </v-list-item>
+          </v-list>
+          <v-list>
+            <v-list-item>
+              <v-list-item-action>
+                <v-icon>mdi-email</v-icon>
+              </v-list-item-action>
+              <v-list-item-subtitle>{{ participant.individual.email }}</v-list-item-subtitle>
+            </v-list-item>
+
+            <v-list-item v-if="participant.individual.company">
+              <v-list-item-action>
+                <v-icon>business</v-icon>
+              </v-list-item-action>
+              <v-list-item-subtitle>{{ participant.individual.company }}</v-list-item-subtitle>
+            </v-list-item>
+            <v-list-item v-if="participant.department">
+              <v-list-item-action>
+                <v-icon>groups</v-icon>
+              </v-list-item-action>
+              <v-list-item-subtitle>{{ participant.department }}</v-list-item-subtitle>
+            </v-list-item>
+            <v-list-item v-if="participant.team">
+              <v-list-item-action>
+                <v-icon>group</v-icon>
+              </v-list-item-action>
+              <v-list-item-subtitle>{{ participant.team }}</v-list-item-subtitle>
+            </v-list-item>
+            <v-list-item v-if="participant.location">
+              <v-list-item-action>
+                <v-icon>mdi-map-marker</v-icon>
+              </v-list-item-action>
+              <v-list-item-subtitle>{{ participant.location }}</v-list-item-subtitle>
+            </v-list-item>
+
+            <v-list-item
+              v-if="participant.individual.weblink"
+              :href="participant.individual.weblink"
+              target="_blank"
+            >
+              <v-list-item-action>
+                <v-icon>open_in_new</v-icon>
+              </v-list-item-action>
+              <v-list-item-subtitle>External Profile</v-list-item-subtitle>
+            </v-list-item>
+          </v-list>
+        </v-card>
+      </v-menu>
+    </div>
+
+    <v-dialog v-model="participantDialogVisible" max-width="800">
+      <v-card>
+        <v-card-title>Other Participants</v-card-title>
+        <v-divider></v-divider>
+        <div class="ml-2">
+          <div v-if="hiddenParticipants && hiddenParticipants.length">
+            <span v-for="participant in hiddenParticipants" :key="participant.id">
+              <v-list-item :href="participant.individual.weblink" target="_blank">
+                <v-list-item-content>
+                  <v-list-item-title ref="participants">
+                    {{ participant.individual.name }} ({{
+                      participant.participant_roles | activeRoles
+                    }})
+                  </v-list-item-title>
+                  <v-list-item-subtitle>
+                    {{ participant.team }} - {{ participant.location }}
+                  </v-list-item-subtitle>
+                </v-list-item-content>
+                <v-list-item-action>
+                  <v-list-item-icon>
+                    <v-icon>open_in_new</v-icon>
+                  </v-list-item-icon>
+                </v-list-item-action>
+              </v-list-item>
+              <v-divider />
+            </span>
+          </div>
+          <div v-else>
+            <p class="text-center">No participant data available.</p>
+          </div>
+        </div>
+      </v-card>
+    </v-dialog>
+    <!-- Display Hidden Participants Chip -->
+    <div v-if="hiddenParticipants.length" class="chip-container">
+      <v-btn icon @click="participantDialogVisible = true">
+        <v-avatar size="32" color="grey lighten-3">
+          <span class="grey--text">+{{ hiddenParticipants.length }}</span>
+        </v-avatar>
+      </v-btn>
+    </div>
+
+    <!-- Add new participant button, saving for future release -->
+    <!-- <v-tooltip bottom>
+      <template v-slot:activator="{ on, attrs }">
+        <v-btn
+          small
+          icon
+          outlined
+          elevation="1"
+          color="grey lighten-2"
+          class="ml-4 plus-btn"
+          @click="addParticipant"
+          v-bind="attrs"
+          v-on="on"
+        >
+          <v-icon small dense color="black">mdi-plus</v-icon>
+        </v-btn>
+      </template>
+      <span>Add new participant</span>
+    </v-tooltip>
+    <v-dialog v-model="addParticipantDialog" max-width="600">
+      <v-card>
+        <v-card-title>Add Case Participant</v-card-title>
+        <v-card-text>
+          By adding a new participant, they gain access to all Case resources. They'll also be able
+          to view the case, even when visibility is restricted.
+        </v-card-text>
+        <v-card-text> <new-participant-select /> </v-card-text>
+        <v-btn class="ml-6 mb-4" small color="info" elevation="1"> Submit </v-btn>
+      </v-card>
+    </v-dialog> -->
+  </div>
+</template>
+
+<script>
+import ParticipantSelect from "@/case/ParticipantSelect.vue"
+export default {
+  components: { ParticipantSelect },
+  name: "ParticipantChips",
+  props: {
+    participants: {
+      type: Array,
+      required: true,
+    },
+    highlightedParticipants: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  computed: {
+    calculateZIndex() {
+      return (index) => 1000 - index
+    },
+    visibleParticipants() {
+      return this.orderedParticipants.slice(0, 2)
+    },
+    hiddenParticipants() {
+      return this.orderedParticipants.slice(2)
+    },
+    orderedParticipants() {
+      console.log("Got participants", this.participants)
+      const assignee = this.participants.find((participant) =>
+        this.highlightedParticipants.includes(participant.individual.name)
+      )
+      const otherParticipants = this.participants.filter(
+        (participant) => !this.highlightedParticipants.includes(participant.individual.name)
+      )
+      if (assignee) {
+        return [assignee, ...otherParticipants]
+      } else {
+        return this.participants
+      }
+    },
+  },
+  data() {
+    return {
+      addParticipantDialog: false,
+      hoverIndex: -1,
+      participantDialogVisible: false,
+    }
+  },
+  methods: {
+    openAddParticipantDialog() {
+      this.addParticipantDialog = true
+    },
+    addParticipant() {
+      this.openAddParticipantDialog()
+    },
+    chipClasses(name) {
+      return {
+        bordered: true,
+        "highlighted-chip": this.highlightedParticipants.includes(name),
+      }
+    },
+    initials(name) {
+      return name
+        .split(" ")
+        .map((n) => n[0])
+        .join("")
+        .toUpperCase()
+    },
+    userAvatarUrl(participant) {
+      const avatarTemplate = import.meta.env.VITE_DISPATCH_AVATAR_TEMPLATE
+      if (!avatarTemplate) return null
+
+      const email = participant.individual.email || ""
+      const userId = email.split("@")[0]
+      if (userId) {
+        const avatarUrl = avatarTemplate.replace("*", userId)
+        // Assume isAvatarUrlValid() is a method that checks if the URL is valid
+        // This method needs to be implemented according to how you determine URL validity
+        return this.isAvatarUrlValid(avatarUrl) ? avatarUrl : null
+      }
+      return null
+    },
+  },
+}
+</script>
+
+<style scoped>
+.chip-container {
+  display: inline-block;
+  margin-right: -3px;
+  transition: all 0.2s ease-in-out;
+}
+.border {
+  border: 4px solid rgba(255, 0, 0, 0.87);
+  border-radius: 50%;
+}
+.plus-btn {
+  vertical-align: middle;
+}
+.bordered {
+  border: 2px solid white !important;
+}
+.highlighted-chip {
+  background: linear-gradient(45deg, #5252ff 0%, #fad0c4 99%, #fad0c4 100%) !important;
+}
+</style>
diff --git a/src/dispatch/static/dispatch/src/case/ParticipantSelect.vue b/src/dispatch/static/dispatch/src/case/ParticipantSelect.vue
new file mode 100644
index 000000000000..812688d56af7
--- /dev/null
+++ b/src/dispatch/static/dispatch/src/case/ParticipantSelect.vue
@@ -0,0 +1,141 @@
+<template>
+  <v-combobox
+    :items="items"
+    :label="label"
+    :loading="loading"
+    :search-input.sync="search"
+    @update:search-input="getFilteredData()"
+    chips
+    clearable
+    deletable-chips
+    hide-selected
+    item-text="individual.name"
+    no-filter
+    return-object
+    v-model="participant"
+  >
+    <template v-slot:no-data>
+      <v-list-item>
+        <v-list-item-content>
+          <v-list-item-title>
+            No individuals matching "
+            <strong>{{ search }}</strong
+            >".
+          </v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
+    </template>
+    <template v-slot:item="data">
+      <v-list-item-content>
+        <v-list-item-title v-text="data.item.individual.name" />
+        <v-list-item-subtitle v-text="data.item.individual.email" />
+      </v-list-item-content>
+    </template>
+    <template v-slot:selection="{ attr, on, item, selected }">
+      <v-chip v-bind="attr" :input-value="selected" v-on="on">
+        <span v-text="item.individual.name" />
+      </v-chip>
+    </template>
+    <template v-slot:append-item>
+      <v-list-item v-if="more" @click="loadMore()">
+        <v-list-item-content>
+          <v-list-item-subtitle> Load More </v-list-item-subtitle>
+        </v-list-item-content>
+      </v-list-item>
+    </template>
+  </v-combobox>
+</template>
+
+<script>
+import { cloneDeep, debounce } from "lodash"
+
+import SearchUtils from "@/search/utils"
+import IndividualApi from "@/individual/api"
+
+export default {
+  name: "ParticipantSelect",
+  props: {
+    value: {
+      type: Object,
+      default: function () {
+        return null
+      },
+    },
+    label: {
+      type: String,
+      default: function () {
+        return "Participant"
+      },
+    },
+  },
+
+  data() {
+    return {
+      loading: false,
+      items: [],
+      more: false,
+      numItems: 5,
+      search: null,
+    }
+  },
+
+  computed: {
+    participant: {
+      get() {
+        return cloneDeep(this.value)
+      },
+      set(value) {
+        this.$emit("input", value)
+      },
+    },
+  },
+
+  created() {
+    this.fetchData()
+  },
+
+  methods: {
+    loadMore() {
+      this.numItems = this.numItems + 5
+      this.fetchData()
+    },
+    fetchData() {
+      this.loading = "error"
+      let filterOptions = {
+        q: this.search,
+        sortBy: ["name"],
+        descending: [false],
+        itemsPerPage: this.numItems,
+      }
+
+      if (this.project) {
+        filterOptions = {
+          ...filterOptions,
+          filters: {
+            project: [this.project],
+          },
+        }
+        filterOptions = SearchUtils.createParametersFromTableOptions({ ...filterOptions })
+      }
+
+      IndividualApi.getAll(filterOptions).then((response) => {
+        this.items = response.data.items.map(function (x) {
+          return { individual: x }
+        })
+        this.total = response.data.total
+
+        if (this.items.length < this.total) {
+          this.more = true
+        } else {
+          this.more = false
+        }
+
+        this.loading = false
+      })
+    },
+    getFilteredData: debounce(function () {
+      this.fetchData()
+    }, 500),
+  },
+}
+</script>
diff --git a/src/dispatch/static/dispatch/src/case/Table.vue b/src/dispatch/static/dispatch/src/case/Table.vue
index 7b5ec121faea..2fd4d4445d6b 100644
--- a/src/dispatch/static/dispatch/src/case/Table.vue
+++ b/src/dispatch/static/dispatch/src/case/Table.vue
@@ -89,13 +89,21 @@
                   </v-btn>
                 </template>
                 <v-list>
+                  <v-list-item
+                    :to="{
+                      name: 'CasePage',
+                      params: { name: item.name },
+                    }"
+                  >
+                    <v-list-item-title>View</v-list-item-title>
+                  </v-list-item>
                   <v-list-item
                     :to="{
                       name: 'CaseTableEdit',
                       params: { name: item.name },
                     }"
                   >
-                    <v-list-item-title>View / Edit</v-list-item-title>
+                    <v-list-item-title>Edit</v-list-item-title>
                   </v-list-item>
                   <v-list-item
                     @click="showRun({ type: 'case', data: item })"
diff --git a/src/dispatch/static/dispatch/src/case/TagChips.vue b/src/dispatch/static/dispatch/src/case/TagChips.vue
new file mode 100644
index 000000000000..422e15542049
--- /dev/null
+++ b/src/dispatch/static/dispatch/src/case/TagChips.vue
@@ -0,0 +1,170 @@
+<template>
+  <v-chip-group active-class="primary--text" column>
+    <v-chip flat close small v-for="tag in _case.tags" :key="tag" @click:close="removeTag(tag)">
+      {{ tag }}
+    </v-chip>
+    <v-chip flat small @click="toggleTagInput">
+      <span v-if="!isAddingTag">Add tag <v-icon class="ml-1" small>mdi-plus</v-icon></span>
+      <span v-else>Close <v-icon class="ml-1" small>mdi-close</v-icon></span>
+    </v-chip>
+    <v-dialog v-model="isAddingTag" max-width="500">
+      <v-card>
+        <v-card-title>Update Case Tags</v-card-title>
+
+        <v-autocomplete
+          v-if="isAddingTag"
+          v-model="selectedTag"
+          :items="availableTags"
+          item-text="name"
+          item-value="name"
+          prepend-inner-icon="search"
+          return-object
+          clearable
+          dense
+          small
+          rounded
+          solo
+          multiple
+          @change="addTag"
+          placeholder="Search tags..."
+          cache-items
+          class="autocomplete-menu pt-2 mx-2"
+        >
+        </v-autocomplete>
+
+        <v-btn class="ml-6 mb-4" small color="info" elevation="1" @click="changeStatus(newStatus)">
+          Update
+        </v-btn>
+      </v-card>
+    </v-dialog>
+  </v-chip-group>
+</template>
+
+<!-- ... Rest of your component -->
+
+<script>
+import { cloneDeep, debounce } from "lodash"
+import { mapFields } from "vuex-map-fields"
+import { mapActions } from "vuex"
+import SearchUtils from "@/search/utils"
+import TagApi from "@/tag/api"
+export default {
+  name: "TagChips",
+  props: {
+    _case: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      selectedTag: null,
+      availableTags: [], // Fetch available tags from your API.
+      isAddingTag: false,
+    }
+  },
+  created() {
+    this.fetchData()
+    this.$watch(
+      (vm) => [vm.project],
+      () => {
+        this.fetchData()
+      }
+    )
+  },
+  methods: {
+    ...mapActions("case_management", ["save_page"]),
+    toggleTagInput() {
+      this.isAddingTag = !this.isAddingTag
+      if (!this.isAddingTag) {
+        this.selectedTag = null
+      }
+    },
+    addTag() {
+      if (this.selectedTag && !this._case.tags.includes(this.selectedTag.name)) {
+        this._case.tags.push(this.selectedTag.name)
+        // Remove the added tag from availableTags
+        this.availableTags = this.availableTags.filter((tag) => tag.name !== this.selectedTag.name)
+        this.selectedTag = null
+        this.save_page(this._case)
+      }
+    },
+    removeTag(tag) {
+      const index = this._case.tags.indexOf(tag)
+      if (index !== -1) {
+        this._case.tags.splice(index, 1)
+        // Add the removed tag back to availableTags
+        const removedTag = this.items.find((item) => item.name === tag)
+        if (removedTag) {
+          this.availableTags.push(removedTag)
+        }
+        this.save_page(this._case)
+      }
+    },
+    loadMore() {
+      this.numItems = this.numItems + 5
+      this.fetchData()
+    },
+    fetchData() {
+      this.error = null
+      this.loading = "error"
+      let filterOptions = {
+        q: this.search,
+        itemsPerPage: -1,
+        sortBy: ["tag_type.name"],
+        descending: [false],
+      }
+      let filters = {}
+      if (this.project) {
+        // we add a project filter
+        filters["project"] = [this.project]
+      }
+      // we add a filter to only retrun discoverable tags
+      filters["tagFilter"] = [{ model: "Tag", field: "discoverable", op: "==", value: "true" }]
+      if (filterOptions.q) {
+        if (filterOptions.q.indexOf("/") != -1) {
+          // we modify the query and add a tag type filter
+          let [tagType, query] = filterOptions.q.split("/")
+          filterOptions.q = query
+          filters["tagTypeFilter"] = [{ model: "TagType", field: "name", op: "==", value: tagType }]
+        }
+      }
+      filterOptions = {
+        ...filterOptions,
+        filters: filters,
+      }
+      filterOptions = SearchUtils.createParametersFromTableOptions({ ...filterOptions })
+      TagApi.getAll(filterOptions).then((response) => {
+        this.items = response.data.items
+        this.total = response.data.total
+        if (this.items.length < this.total) {
+          this.more = true
+        } else {
+          this.more = false
+        }
+        // Here, we filter the availableTags to only include those not already in _case.tags
+        this.availableTags = response.data.items.filter(
+          (item) => !this._case.tags.includes(item.name)
+        )
+        this.loading = false
+      })
+    },
+    getFilteredData: debounce(function () {
+      this.fetchData()
+    }, 500),
+  },
+}
+</script>
+
+<style scoped>
+.autocomplete-menu .v-input__slot {
+  position: relative;
+}
+.autocomplete-menu .v-autocomplete__content {
+  position: absolute;
+  width: 100%;
+  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14),
+    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
+  border-radius: 4px;
+}
+</style>
diff --git a/src/dispatch/static/dispatch/src/case/priority/CasePrioritySelectChip.vue b/src/dispatch/static/dispatch/src/case/priority/CasePrioritySelectChip.vue
new file mode 100644
index 000000000000..c711f3cd73b8
--- /dev/null
+++ b/src/dispatch/static/dispatch/src/case/priority/CasePrioritySelectChip.vue
@@ -0,0 +1,93 @@
+<template>
+  <v-menu offset-y>
+    <template v-slot:activator="{ on, attrs }">
+      <v-chip
+        v-bind="attrs"
+        v-on="on"
+        small
+        class="mr-2 hover-outline"
+        :text-color="getPriorityMetaColor(_case.case_priority)"
+        :color="getPriorityColor(_case.case_priority)"
+      >
+        <v-icon dense small class="pr-2" :color="getPriorityMetaColor(_case.case_priority)">
+          mdi-alert-plus-outline
+        </v-icon>
+        <b>{{ _case.case_priority.name }}</b>
+      </v-chip>
+    </template>
+    <v-list>
+      <v-list-item
+        v-for="(priority, index) in priorities"
+        :key="index"
+        @click="changePriority(priority)"
+      >
+        {{ priority }}
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>
+
+<script>
+import { mapFields } from "vuex-map-fields"
+import { mapActions } from "vuex"
+export default {
+  name: "CasePrioritySelectChip",
+  props: {
+    _case: {
+      type: Object,
+      required: false,
+      default: () => ({}), // returns an empty object if _case is not provided
+    },
+  },
+  data() {
+    return {
+      priorities: ["High", "Medium", "Low"],
+    }
+  },
+  methods: {
+    ...mapActions("case_management", ["save_page"]),
+    changePriority(priority) {
+      this._case.case_priority.name = priority
+      this.save_page()
+    },
+    getPriorityColor(priority) {
+      if (priority) {
+        switch (priority.name) {
+          case "Low":
+            return "green lighten-5"
+          case "Medium":
+            return "orange lighten-5"
+          case "High":
+            return "red lighten-5"
+          case "Critical":
+            return "red lighten-5"
+        }
+      }
+      return "red darken-2"
+    },
+    getPriorityMetaColor(priority) {
+      console.log("Got priority %O", priority.name)
+      if (priority) {
+        switch (priority.name) {
+          case "Low":
+            return "green"
+          case "Medium":
+            return "orange"
+          case "High":
+            return "red"
+          case "Critical":
+            return "red"
+        }
+      }
+      return "green"
+    },
+  },
+}
+</script>
+
+<style scoped>
+.hover-outline:hover {
+  border: 1px dashed rgba(148, 148, 148, 0.87) !important;
+  border-radius: 20px;
+}
+</style>
diff --git a/src/dispatch/static/dispatch/src/case/severity/CaseSeveritySelectChip.vue b/src/dispatch/static/dispatch/src/case/severity/CaseSeveritySelectChip.vue
new file mode 100644
index 000000000000..60350de878bb
--- /dev/null
+++ b/src/dispatch/static/dispatch/src/case/severity/CaseSeveritySelectChip.vue
@@ -0,0 +1,95 @@
+<template>
+  <v-menu offset-y>
+    <template v-slot:activator="{ on, attrs }">
+      <v-chip
+        v-bind="attrs"
+        v-on="on"
+        small
+        class="mr-2 hover-outline"
+        :text-color="getSeverityMetaColor(_case.case_severity)"
+        :color="getSeverityColor(_case.case_severity)"
+      >
+        <v-icon dense small class="pr-2" :color="getSeverityMetaColor(_case.case_severity)">
+          mdi-alert-plus-outline
+        </v-icon>
+        <b>{{ _case.case_severity.name }}</b>
+      </v-chip>
+    </template>
+    <v-list>
+      <v-list-item
+        v-for="(severity, index) in severities"
+        :key="index"
+        @click="changeSeverity(severity)"
+      >
+        {{ severity }}
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>
+
+<script>
+import { mapFields } from "vuex-map-fields"
+import { mapActions } from "vuex"
+export default {
+  name: "CaseSeveritySelectChip",
+  props: {
+    _case: {
+      type: Object,
+      required: false,
+      default: () => ({}), // returns an empty object if _case is not provided
+    },
+  },
+  data() {
+    return {
+      severities: ["Critical", "High", "Medium", "Low"],
+    }
+  },
+  methods: {
+    ...mapActions("case_management", ["save_page"]),
+    changeSeverity(severity) {
+      this._case.case_severity.name = severity // Update the selected severity.
+      this.save_page()
+      // Here, you may want to call an API to update the severity in the backend.
+      // this.updateCaseSeverity(this.selected.case_priority);
+    },
+    getSeverityColor(severity) {
+      if (severity) {
+        switch (severity.name) {
+          case "Low":
+            return "green lighten-5"
+          case "Medium":
+            return "orange lighten-5"
+          case "High":
+            return "red lighten-5"
+          case "Critical":
+            return "red lighten-5"
+        }
+      }
+      return "red darken-2"
+    },
+    getSeverityMetaColor(severity) {
+      console.log("Got severity %O", severity.name)
+      if (severity) {
+        switch (severity.name) {
+          case "Low":
+            return "green"
+          case "Medium":
+            return "orange"
+          case "High":
+            return "red"
+          case "Critical":
+            return "red"
+        }
+      }
+      return "green"
+    },
+  },
+}
+</script>
+
+<style scoped>
+.hover-outline:hover {
+  border: 1px dashed rgba(148, 148, 148, 0.87) !important;
+  border-radius: 20px;
+}
+</style>
diff --git a/src/dispatch/static/dispatch/src/case/type/CaseTypeSelectChip.vue b/src/dispatch/static/dispatch/src/case/type/CaseTypeSelectChip.vue
new file mode 100644
index 000000000000..2a1e06e67111
--- /dev/null
+++ b/src/dispatch/static/dispatch/src/case/type/CaseTypeSelectChip.vue
@@ -0,0 +1,116 @@
+<template>
+  <v-menu offset-y>
+    <template v-slot:activator="{ on, attrs }">
+      <v-chip v-bind="attrs" v-on="on" small class="mr-2 hover-outline" color="#edf2f7">
+        {{ value ? value.name : "None" }}
+      </v-chip>
+    </template>
+    <v-list>
+      <v-list-item v-for="(item, index) in items" :key="index" @click="changeCaseType(item)">
+        {{ item.name }}
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>
+
+<script>
+import { cloneDeep, debounce } from "lodash"
+import { mapActions } from "vuex"
+import SearchUtils from "@/search/utils"
+import CaseTypeApi from "@/case/type/api"
+export default {
+  name: "CaseTypeSelectChip",
+  props: {
+    value: {
+      type: Object,
+      default: function () {
+        return {}
+      },
+    },
+    project: {
+      type: [Object],
+      default: null,
+    },
+    hint: {
+      type: String,
+      default: function () {
+        return "Case Type to associate"
+      },
+    },
+    label: {
+      type: String,
+      default: function () {
+        return "Case Type"
+      },
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      items: [],
+      numItems: 5,
+      more: false,
+      search: null,
+    }
+  },
+  computed: {
+    case_type: {
+      get() {
+        return cloneDeep(this.value)
+      },
+      set(value) {
+        this.$emit("input", value)
+      },
+    },
+  },
+  methods: {
+    ...mapActions("case_management", ["save_page"]),
+    changeCaseType(type) {
+      this.value = type // Update the selected case type.
+      this.$emit("input", type) // Emit the new value
+    },
+    fetchData() {
+      this.error = null
+      this.loading = true
+      let filterOptions = {
+        q: this.search,
+        sortBy: ["name"],
+        descending: [false],
+      }
+      if (this.project) {
+        filterOptions = {
+          ...filterOptions,
+          filters: {
+            project: [this.project],
+            enabled: ["true"],
+          },
+        }
+      }
+      filterOptions = SearchUtils.createParametersFromTableOptions({ ...filterOptions })
+      CaseTypeApi.getAll(filterOptions).then((response) => {
+        this.items = response.data.items
+        if (this.case_type) {
+          // check to see if the current selection is available in the list and if not we add it
+          if (!this.items.find((match) => match.id === this.case_type.id)) {
+            this.items = [this.case_type].concat(this.items)
+          }
+        }
+        this.loading = false
+      })
+    },
+    getFilteredData: debounce(function () {
+      this.fetchData()
+    }, 500),
+  },
+  created() {
+    this.fetchData()
+  },
+}
+</script>
+
+<style scoped>
+.hover-outline:hover {
+  border: 1px dashed rgba(148, 148, 148, 0.87) !important;
+  border-radius: 20px;
+}
+</style>
diff --git a/src/dispatch/static/dispatch/src/components/RichEditor.vue b/src/dispatch/static/dispatch/src/components/RichEditor.vue
new file mode 100644
index 000000000000..3e2246d5bd17
--- /dev/null
+++ b/src/dispatch/static/dispatch/src/components/RichEditor.vue
@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <!-- Use the component in the right place of the template -->
+    <tiptap-vuetify
+      v-model="content"
+      :extensions="extensions"
+      :card-props="{ flat: true, color: 'grey lighten-5', rounded: true }"
+    />
+  </div>
+</template>
+
+<script>
+// import the component and the necessary extensions
+import {
+  TiptapVuetify,
+  Heading,
+  Bold,
+  Italic,
+  Underline,
+  Code,
+  Paragraph,
+  BulletList,
+  OrderedList,
+  ListItem,
+  Link,
+  Blockquote,
+  HardBreak,
+  HorizontalRule,
+  History,
+} from "tiptap-vuetify"
+export default {
+  name: "RichEditor",
+  // specify TiptapVuetify component in "components"
+  components: { TiptapVuetify },
+  data: () => ({
+    // declare extensions you want to use
+    extensions: [
+      Bold,
+      Italic,
+      ListItem,
+      BulletList,
+      OrderedList,
+      Blockquote,
+      Link,
+      Code,
+      HardBreak,
+    ],
+    // starting editor's content
+    content: `
+      <blockquote>Document your findings and provide the rationale for any decisions you made as part of this investigation...</blockquote>
+      <br></br>
+      <br></br>
+    `,
+  }),
+}
+</script>
diff --git a/src/dispatch/static/dispatch/src/project/ProjectSelectChip.vue b/src/dispatch/static/dispatch/src/project/ProjectSelectChip.vue
new file mode 100644
index 000000000000..8f808a5317eb
--- /dev/null
+++ b/src/dispatch/static/dispatch/src/project/ProjectSelectChip.vue
@@ -0,0 +1,104 @@
+<template>
+  <v-menu offset-y>
+    <template v-slot:activator="{ on, attrs }">
+      <v-chip v-bind="attrs" v-on="on" small class="mr-2 hover-outline" color="#edf2f7">
+        {{ project ? project.name : "None" }}
+      </v-chip>
+    </template>
+    <v-list>
+      <v-list-item v-for="(item, index) in items" :key="index" @click="changeProject(item)">
+        {{ item.name }}
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>
+
+<script>
+import { cloneDeep, debounce } from "lodash"
+import ProjectApi from "@/project/api"
+export default {
+  name: "ProjectSelectChip",
+  props: {
+    value: {
+      type: Object,
+      default: function () {
+        return {}
+      },
+    },
+    label: {
+      type: String,
+      default: "Project",
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      items: [],
+      numItems: 5,
+      more: false,
+      search: null,
+    }
+  },
+  computed: {
+    project: {
+      get() {
+        return cloneDeep(this.value)
+      },
+      set(value) {
+        this.$emit("input", value)
+      },
+    },
+  },
+  methods: {
+    // Other methods
+    changeProject(project) {
+      this.value = project // Update the selected case type.
+      this.$emit("input", project) // Emit the new value
+    },
+    updateProject(project) {
+      // Call an API to update the project on the backend.
+      // Adjust this method to suit your API structure.
+      ProjectApi.update(project.id, project)
+        .then((response) => {
+          // Handle the response as needed
+        })
+        .catch((error) => {
+          // Handle the error as needed
+        })
+    },
+    fetchData() {
+      this.error = null
+      this.loading = true
+      // Remove the itemsPerPage from the filterOptions to fetch all items
+      let filterOptions = {
+        q: this.search,
+        sortBy: ["name"],
+        descending: [false],
+      }
+      ProjectApi.getAll(filterOptions).then((response) => {
+        this.items = response.data.items
+        if (this.project) {
+          // Check to see if the current selection is available in the list, if not, we add it
+          if (!this.items.find((match) => match.id === this.project.id)) {
+            this.items = [this.project].concat(this.items)
+          }
+        }
+        this.loading = false
+      })
+    },
+    getFilteredData: debounce(function () {
+      this.fetchData()
+    }, 500),
+  },
+  created() {
+    this.fetchData()
+  },
+}
+</script>
+
+<style scoped>
+.hover-outline:hover {
+  border: 1px dashed rgba(148, 148, 148, 0.87) !important;
+  border-radius: 20px;
+}
+</style>
diff --git a/src/dispatch/static/dispatch/src/router/config.js b/src/dispatch/static/dispatch/src/router/config.js
index df77f94e7bea..d9b47543bbd0 100644
--- a/src/dispatch/static/dispatch/src/router/config.js
+++ b/src/dispatch/static/dispatch/src/router/config.js
@@ -194,7 +194,7 @@ export const protectedRoute = [
           component: () => import("@/case/Table.vue"),
           children: [
             {
-              path: "/:organization/cases/:name",
+              path: "/:organization/cases/:name/edit",
               name: "CaseTableEdit",
               component: () => import("@/case/EditSheet.vue"),
               props: true,
@@ -204,6 +204,13 @@ export const protectedRoute = [
             },
           ],
         },
+        {
+          path: "/:organization/cases/:name/page",
+          name: "CasePage",
+          meta: { title: "Page" },
+          component: () => import("@/case/Page.vue"),
+          props: true,
+        },
       ],
     },
     {
diff --git a/src/dispatch/static/dispatch/src/signal/NewRawSignalViewer.vue b/src/dispatch/static/dispatch/src/signal/NewRawSignalViewer.vue
new file mode 100644
index 000000000000..4af376a73e57
--- /dev/null
+++ b/src/dispatch/static/dispatch/src/signal/NewRawSignalViewer.vue
@@ -0,0 +1,82 @@
+<template>
+  <v-skeleton-loader :loading="isLoading" type="table" height="500px">
+    <v-row>
+      <v-col cols="3">
+        <template v-if="!signalInstances.length">
+          No example signals are currently available for this definition.
+        </template>
+        <v-virtual-scroll v-else :items="signalInstances" height="800" item-height="50">
+          <template v-slot="{ item, index }">
+            <v-list-item class="mb-n1">
+              <v-list-item-content>
+                <v-list-item-subtitle>
+                  <b>{{ index + 1 }} </b> {{ item.created_at }}</v-list-item-subtitle
+                >
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-btn icon @click="updateEditorValue(item)">
+                  <v-icon small>mdi-arrow-right</v-icon>
+                </v-btn>
+              </v-list-item-action>
+            </v-list-item>
+            <v-divider v-if="index < signalInstances.length - 1"></v-divider>
+          </template>
+        </v-virtual-scroll>
+        <template v-else> </template>
+      </v-col>
+      <v-divider vertical></v-divider>
+      <v-col cols="9">
+        <new-raw-signal-viewer v-if="selectedSignalInstance" :item="selectedSignalInstance" />
+      </v-col>
+    </v-row>
+  </v-skeleton-loader>
+</template>
+
+<script>
+import SignalInstanceTab from "@/signal/SignalInstanceTab.vue"
+import NewRawSignalViewer from "@/signal/NewRawSignalViewer.vue"
+import CaseApi from "@/case/api"
+export default {
+  name: "SignalInstanceCardViewer",
+  components: {
+    NewRawSignalViewer,
+    SignalInstanceTab,
+  },
+  props: {
+    caseId: {
+      type: Number,
+    },
+  },
+  data() {
+    return {
+      menu: false,
+      workflowRunDialog: false,
+      signalInstances: [],
+      selectedSignalInstance: null, // add this line
+      isLoading: true,
+    }
+  },
+  methods: {
+    fetchSignalInstances(caseId) {
+      this.isLoading = true
+      return CaseApi.getAllSignalInstances(caseId).then((response) => {
+        this.signalInstances = response.data.instances.flat()
+        this.updateEditorValue(this.signalInstances[0])
+        this.isLoading = false
+      })
+    },
+    updateEditorValue(instance) {
+      console.log(instance)
+      this.selectedSignalInstance = instance
+    },
+  },
+  watch: {
+    caseId(newCaseId) {
+      this.fetchSignalInstances(newCaseId)
+    },
+  },
+  created() {
+    this.fetchSignalInstances(this.caseId)
+  },
+}
+</script>
diff --git a/src/dispatch/static/dispatch/src/signal/SignalInstanceCardViewer.vue b/src/dispatch/static/dispatch/src/signal/SignalInstanceCardViewer.vue
new file mode 100644
index 000000000000..3faa035e16b7
--- /dev/null
+++ b/src/dispatch/static/dispatch/src/signal/SignalInstanceCardViewer.vue
@@ -0,0 +1,82 @@
+<template>
+  <v-skeleton-loader :loading="isLoading" type="table" height="500px">
+    <v-row>
+      <v-col cols="3">
+        <template v-if="!signalInstances.length">
+          No example signals are currently available for this definition.
+        </template>
+        <v-virtual-scroll v-else :items="signalInstances" height="800" item-height="50">
+          <template v-slot="{ item, index }">
+            <v-list-item class="mb-n1">
+              <v-list-item-content>
+                <v-list-item-subtitle>
+                  <b>{{ index + 1 }} </b> {{ item.created_at }}</v-list-item-subtitle
+                >
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-btn icon @click="updateEditorValue(item)">
+                  <v-icon small>mdi-arrow-right</v-icon>
+                </v-btn>
+              </v-list-item-action>
+            </v-list-item>
+            <v-divider v-if="index < signalInstances.length - 1"></v-divider>
+          </template>
+        </v-virtual-scroll>
+        <template v-else> </template>
+      </v-col>
+      <v-divider vertical></v-divider>
+      <v-col cols="9">
+        <!-- <new-raw-signal-viewer v-if="selectedSignalInstance" :item="selectedSignalInstance" /> -->
+      </v-col>
+    </v-row>
+  </v-skeleton-loader>
+</template>
+
+<script>
+import SignalInstanceTab from "@/signal/SignalInstanceTab.vue"
+// import NewRawSignalViewer from "@/signal/NewRawSignalViewer.vue"
+import CaseApi from "@/case/api"
+export default {
+  name: "SignalInstanceCardViewer",
+  components: {
+    // NewRawSignalViewer,
+    SignalInstanceTab,
+  },
+  props: {
+    caseId: {
+      type: Number,
+    },
+  },
+  data() {
+    return {
+      menu: false,
+      workflowRunDialog: false,
+      signalInstances: [],
+      selectedSignalInstance: null, // add this line
+      isLoading: true,
+    }
+  },
+  methods: {
+    fetchSignalInstances(caseId) {
+      this.isLoading = true
+      return CaseApi.getAllSignalInstances(caseId).then((response) => {
+        this.signalInstances = response.data.instances.flat()
+        this.updateEditorValue(this.signalInstances[0])
+        this.isLoading = false
+      })
+    },
+    updateEditorValue(instance) {
+      console.log(instance)
+      this.selectedSignalInstance = instance
+    },
+  },
+  watch: {
+    caseId(newCaseId) {
+      this.fetchSignalInstances(newCaseId)
+    },
+  },
+  created() {
+    this.fetchSignalInstances(this.caseId)
+  },
+}
+</script>