Skip to content
This repository was archived by the owner on May 29, 2026. It is now read-only.

feat: Widget-based case detail page #80

Merged
rubenvdlinde merged 1 commit into from
Mar 22, 2026
Merged

feat: Widget-based case detail page #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
848 changes: 259 additions & 589 deletions src/views/cases/CaseDetail.vue
View file
Open in desktop

Large diffs are not rendered by default.

146 changes: 146 additions & 0 deletions src/views/cases/widgets/CaseDecisionsWidget.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
<template>
<div class="case-decisions-widget">
<div v-if="decisions.length === 0" class="decisions-empty">
{{ t('procest', 'No decisions recorded') }}
</div>
<div v-else class="decisions-list">
<div
v-for="decision in decisions"
:key="decision.id"
class="decision-row">
<div class="decision-icon">
<span :class="decision.outcome === 'approved' ? 'icon--approved' : 'icon--default'">
{{ decision.outcome === 'approved' ? '&#10003;' : '&#9679;' }}
</span>
</div>
<div class="decision-info">
<span class="decision-title">{{ decision.title || decision.name || '---' }}</span>
<span v-if="decision.outcome" class="decision-outcome">
{{ decision.outcome }}
</span>
<span v-if="decision.date" class="decision-date">
{{ formatDate(decision.date) }}
</span>
</div>
</div>
</div>

<!-- Result section for final-status cases -->
<ResultSection
v-if="caseResult"
:result="caseResult"
:result-types="resultTypes" />
</div>
</template>

<script>
import { formatDate } from '../../../utils/caseHelpers.js'
import ResultSection from '../components/ResultSection.vue'

export default {
name: 'CaseDecisionsWidget',
components: {
ResultSection,
},
props: {
caseId: {
type: String,
default: null,
},
decisions: {
type: Array,
default: () => [],
},
caseResult: {
type: Object,
default: null,
},
resultTypes: {
type: Array,
default: () => [],
},
},
methods: {
formatDate,
},
}
</script>

<style scoped>
.case-decisions-widget {
padding: 12px;
height: 100%;
overflow: auto;
}

.decisions-empty {
text-align: center;
color: var(--color-text-maxcontrast);
padding: 24px;
}

.decisions-list {
display: flex;
flex-direction: column;
gap: 4px;
}

.decision-row {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 8px;
border-radius: var(--border-radius);
}

.decision-row:hover {
background: var(--color-background-hover);
}

.decision-icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 14px;
}

.icon--approved {
color: var(--color-success);
font-weight: bold;
}

.icon--default {
color: var(--color-text-maxcontrast);
}

.decision-info {
flex: 1;
min-width: 0;
}

.decision-title {
display: block;
font-size: 13px;
font-weight: 500;
}

.decision-outcome {
display: inline-block;
padding: 1px 6px;
border-radius: var(--border-radius-pill);
font-size: 11px;
background: var(--color-background-dark);
color: var(--color-text-maxcontrast);
margin-top: 2px;
}

.decision-date {
display: block;
font-size: 11px;
color: var(--color-text-maxcontrast);
margin-top: 2px;
}
</style>
106 changes: 106 additions & 0 deletions src/views/cases/widgets/CaseDocumentsWidget.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
<template>
<div class="case-documents-widget">
<div v-if="documents.length === 0" class="documents-empty">
{{ t('procest', 'No documents attached') }}
</div>
<div v-else class="documents-list">
<div
v-for="doc in documents"
:key="doc.id"
class="document-row">
<span class="document-icon">{{ getFileIcon(doc.mimeType || doc.type) }}</span>
<div class="document-info">
<span class="document-name">{{ doc.title || doc.name || '---' }}</span>
<span v-if="doc.createdAt" class="document-date">
{{ formatDate(doc.createdAt) }}
</span>
</div>
</div>
</div>
</div>
</template>

<script>
import { formatDate } from '../../../utils/caseHelpers.js'

export default {
name: 'CaseDocumentsWidget',
props: {
caseId: {
type: String,
default: null,
},
documents: {
type: Array,
default: () => [],
},
},
methods: {
formatDate,
getFileIcon(mimeType) {
if (!mimeType) return '📄'
if (mimeType.includes('pdf')) return '📕'
if (mimeType.includes('image')) return '🖼'
if (mimeType.includes('spreadsheet') || mimeType.includes('excel')) return '📊'
return '📄'
},
},
}
</script>

<style scoped>
.case-documents-widget {
padding: 12px;
height: 100%;
overflow: auto;
}

.documents-empty {
text-align: center;
color: var(--color-text-maxcontrast);
padding: 24px;
}

.documents-list {
display: flex;
flex-direction: column;
gap: 2px;
}

.document-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px;
border-radius: var(--border-radius);
}

.document-row:hover {
background: var(--color-background-hover);
}

.document-icon {
font-size: 20px;
flex-shrink: 0;
}

.document-info {
flex: 1;
min-width: 0;
}

.document-name {
display: block;
font-size: 13px;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.document-date {
display: block;
font-size: 11px;
color: var(--color-text-maxcontrast);
}
</style>
145 changes: 145 additions & 0 deletions src/views/cases/widgets/CaseMilestonesWidget.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
<template>
<div class="case-milestones-widget">
<!-- Deadline panel reuse -->
<DeadlinePanel
v-if="caseTypeData"
:start-date="caseData.startDate"
:deadline="caseData.deadline"
:processing-deadline="caseTypeData.processingDeadline"
:extension-allowed="caseTypeData.extensionAllowed === true || caseTypeData.extensionAllowed === 'true'"
:extension-period="caseTypeData.extensionPeriod"
:extension-count="caseData.extensionCount || 0"
:is-final="isFinal"
@extend="$emit('extend')" />

<!-- Milestones list -->
<div v-if="milestones.length > 0" class="milestones-list">
<div
v-for="milestone in milestones"
:key="milestone.id"
class="milestone-row"
:class="{ 'milestone-row--completed': milestone.completed }">
<span class="milestone-check">
{{ milestone.completed ? '&#10003;' : '&#9675;' }}
</span>
<div class="milestone-info">
<span class="milestone-name">{{ milestone.title || milestone.name || '---' }}</span>
<span v-if="milestone.dueDate" class="milestone-date">
{{ formatDate(milestone.dueDate) }}
</span>
</div>
</div>
</div>

<div v-else-if="!caseTypeData" class="milestones-empty">
{{ t('procest', 'No deadline information available') }}
</div>
</div>
</template>

<script>
import { formatDate } from '../../../utils/caseHelpers.js'
import DeadlinePanel from '../components/DeadlinePanel.vue'

export default {
name: 'CaseMilestonesWidget',
components: {
DeadlinePanel,
},
props: {
caseData: {
type: Object,
default: () => ({}),
},
caseTypeData: {
type: Object,
default: null,
},
milestones: {
type: Array,
default: () => [],
},
isFinal: {
type: Boolean,
default: false,
},
},
emits: ['extend'],
methods: {
formatDate,
},
}
</script>

<style scoped>
.case-milestones-widget {
padding: 12px;
height: 100%;
overflow: auto;
}

/* Reset DeadlinePanel internal margins for widget context */
.case-milestones-widget :deep(.deadline-panel) {
margin-bottom: 12px;
}

.milestones-list {
display: flex;
flex-direction: column;
gap: 4px;
}

.milestone-row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
border-radius: var(--border-radius);
}

.milestone-row:hover {
background: var(--color-background-hover);
}

.milestone-row--completed {
opacity: 0.7;
}

.milestone-check {
font-size: 16px;
flex-shrink: 0;
width: 20px;
text-align: center;
}

.milestone-row--completed .milestone-check {
color: var(--color-success);
}

.milestone-info {
flex: 1;
min-width: 0;
}

.milestone-name {
display: block;
font-size: 13px;
font-weight: 500;
}

.milestone-row--completed .milestone-name {
text-decoration: line-through;
}

.milestone-date {
display: block;
font-size: 11px;
color: var(--color-text-maxcontrast);
}

.milestones-empty {
text-align: center;
color: var(--color-text-maxcontrast);
padding: 24px;
}
</style>
Loading
Loading