@tekkare/romulus 0.1.231 → 0.1.233

package/dist/runtime/components/ProjectCreateDialog.vue

@@ -0,0 +1,117 @@
+<!--
+  RmProjectCreateDialog - creer un projet : un nom, une description facultative.
+
+  Fermer apres avoir commence a remplir (croix, clic a cote, Echap) ne doit
+  pas perdre ce qui a ete tape : une seconde question « Quitter sans
+  enregistrer ? » se pose par-dessus. Le formulaire se vide quand l'app le
+  ferme apres une creation reussie, ou quand on confirme l'abandon.
+-->
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    loading?: boolean
+    /** Refus de l'API, affiche sous le formulaire. */
+    error?: string
+    lang?: 'fr' | 'en'
+  }>(),
+  { loading: false, error: '', lang: 'fr' },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'create': [value: { title: string, description: string }]
+}>()
+
+const WORDS = {
+  fr: {
+    heading: 'Nouveau projet', name: 'Nom', placeholder: 'Veille oncologie', description: 'Description (facultative)',
+    required: 'Un nom est requis', cancel: 'Annuler', create: 'Créer',
+    leave: 'Quitter sans enregistrer ?', lost: 'Ce que vous avez saisi sera perdu.', keep: 'Continuer la saisie', quit: 'Quitter',
+  },
+  en: {
+    heading: 'New project', name: 'Name', placeholder: 'Oncology watch', description: 'Description (optional)',
+    required: 'A name is required', cancel: 'Cancel', create: 'Create',
+    leave: 'Leave without saving?', lost: 'What you entered will be lost.', keep: 'Keep editing', quit: 'Leave',
+  },
+}
+const T = computed(() => WORDS[props.lang] ?? WORDS.fr)
+
+const title = ref('')
+const description = ref('')
+const missing = ref(false)
+const confirming = ref(false)
+
+function reset() {
+  title.value = ''
+  description.value = ''
+  missing.value = false
+}
+
+// Ferme par l'app (creation faite) : le prochain projet repart de zero.
+watch(() => props.modelValue, (open, was) => {
+  if (was && !open && !confirming.value) reset()
+})
+
+function requestClose() {
+  if (title.value.trim() || description.value.trim()) confirming.value = true
+  else emit('update:modelValue', false)
+}
+
+function discard() {
+  confirming.value = false
+  reset()
+  emit('update:modelValue', false)
+}
+
+function submit() {
+  const name = title.value.trim()
+  if (!name) {
+    missing.value = true
+    return
+  }
+  emit('create', { title: name, description: description.value.trim() })
+}
+</script>
+
+<template>
+  <RmModal
+    :model-value="modelValue"
+    size="sm"
+    mode="free"
+    :label="T.heading"
+    @update:model-value="$event ? emit('update:modelValue', true) : requestClose()"
+  >
+    <template #header>
+      <p class="rm-project-dialog__title">{{ T.heading }}</p>
+    </template>
+    <form class="rm-project-dialog__form" @submit.prevent="submit">
+      <RmInput v-model="title" :label="T.name" :placeholder="T.placeholder" :error="missing ? T.required : ''" />
+      <RmInput v-model="description" :label="T.description" />
+      <p v-if="error" class="rm-project-dialog__error">{{ error }}</p>
+      <!-- Entree valide le formulaire. -->
+      <button type="submit" hidden />
+    </form>
+    <template #footer>
+      <RmButton variant="tertiary" @click="requestClose">{{ T.cancel }}</RmButton>
+      <RmButton variant="primary" :loading="loading" @click="submit">{{ T.create }}</RmButton>
+    </template>
+  </RmModal>
+
+  <RmModal v-model="confirming" size="sm" mode="free" :label="T.leave">
+    <template #header>
+      <p class="rm-project-dialog__title">{{ T.leave }}</p>
+    </template>
+    <p class="rm-project-dialog__text">{{ T.lost }}</p>
+    <template #footer>
+      <RmButton variant="tertiary" @click="confirming = false">{{ T.keep }}</RmButton>
+      <RmButton variant="danger" @click="discard">{{ T.quit }}</RmButton>
+    </template>
+  </RmModal>
+</template>
+
+<style scoped>
+.rm-project-dialog__title{font-size:15px;font-weight:600;margin:0}.rm-project-dialog__form{display:flex;flex-direction:column;gap:16px}.rm-project-dialog__text{font-size:var(--font-14);line-height:1.5;margin:0}.rm-project-dialog__error{color:var(--color-danger);font-size:var(--font-13);margin:0}
+</style>

package/dist/runtime/components/ProjectDeleteDialog.vue

@@ -0,0 +1,60 @@
+<!--
+  RmProjectDeleteDialog - supprimer un projet, pour de bon.
+
+  La suppression emporte tout ce que le projet rassemble, pour tous ses
+  membres : la modale le dit, nomme le projet, et attend un second clic.
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    title: string
+    loading?: boolean
+    error?: string
+    lang?: 'fr' | 'en'
+  }>(),
+  { loading: false, error: '', lang: 'fr' },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'confirm': []
+}>()
+
+const WORDS = {
+  fr: {
+    heading: 'Supprimer le projet', cancel: 'Annuler', confirm: 'Supprimer définitivement',
+    text: (t: string) => `« ${t} » sera supprimé définitivement, avec ses ressources, ses commentaires et ses documents déposés, pour tous ses membres. Cette action est irréversible.`,
+  },
+  en: {
+    heading: 'Delete the project', cancel: 'Cancel', confirm: 'Delete for good',
+    text: (t: string) => `« ${t} » will be deleted for good, with its resources, comments and uploaded documents, for every member. This cannot be undone.`,
+  },
+}
+const T = computed(() => WORDS[props.lang] ?? WORDS.fr)
+
+const open = computed({
+  get: () => props.modelValue,
+  set: (value: boolean) => emit('update:modelValue', value),
+})
+</script>
+
+<template>
+  <RmModal v-model="open" size="sm" :label="T.heading">
+    <template #header>
+      <h2 class="rm-project-dialog__title">{{ T.heading }}</h2>
+    </template>
+    <p class="rm-project-dialog__text">{{ T.text(title) }}</p>
+    <p v-if="error" class="rm-project-dialog__error">{{ error }}</p>
+    <template #footer>
+      <RmButton variant="tertiary" @click="open = false">{{ T.cancel }}</RmButton>
+      <RmButton variant="danger" prefix-icon="Trash" :loading="loading" @click="emit('confirm')">{{ T.confirm }}</RmButton>
+    </template>
+  </RmModal>
+</template>
+
+<style scoped>
+.rm-project-dialog__title{font-size:var(--font-18);font-weight:var(--weight-bold);margin:0}.rm-project-dialog__text{font-size:var(--font-14);line-height:1.5;margin:0}.rm-project-dialog__error{color:var(--color-danger);font-size:var(--font-13);margin:8px 0 0}
+</style>

package/dist/runtime/components/ProjectList.vue

@@ -0,0 +1,115 @@
+<!--
+  RmProjectList - la page « Mes projets » : les projets en cartes, groupes.
+
+  Les epingles d'abord, puis les miens, puis ceux qu'on m'a partages (cf.
+  rmProjectGroups). Une carte mene au projet (`to`) ; l'epingle est posee sur
+  la carte, hors du lien, pour qu'epingler n'ouvre rien. Les epingles sont un
+  choix de lecture : l'app les garde ou elle veut et les rend dans `pinned`.
+
+  Chargement, echec et liste vide se disent ici. Le bouton de creation de
+  l'etat vide vient de l'app (slot `empty-action`) : elle seule sait si la
+  creation est libre ou assistee.
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+import { rmProjectGroups, rmProjectSummary, type RmProject } from '../utils/projects'
+
+const props = withDefaults(
+  defineProps<{
+    projects: RmProject[]
+    /** Projet qui recoit les ajouts. */
+    activeId?: string | null
+    loading?: boolean
+    failed?: boolean
+    /** Texte de l'etat vide : ce qu'un projet rassemble dans cette app. */
+    emptyText?: string
+    lang?: 'fr' | 'en'
+  }>(),
+  { activeId: null, loading: false, failed: false, emptyText: '', lang: 'fr' },
+)
+
+const emit = defineEmits<{ pin: [projectId: string] }>()
+
+const WORDS = {
+  fr: {
+    active: 'Actif', pin: 'Épingler en haut', unpin: 'Désépingler',
+    failedTitle: 'Projets indisponibles', failedText: 'Le service des projets n\'a pas répondu. Réessayez dans un instant.',
+    emptyTitle: 'Aucun projet', emptyText: 'Un projet rassemble ce que vous mettez de côté au fil des pages.',
+  },
+  en: {
+    active: 'Active', pin: 'Pin to the top', unpin: 'Unpin',
+    failedTitle: 'Projects unavailable', failedText: 'The project service did not answer. Try again in a moment.',
+    emptyTitle: 'No project yet', emptyText: 'A project gathers what you set aside across the pages.',
+  },
+}
+const T = computed(() => WORDS[props.lang] ?? WORDS.fr)
+
+const groups = computed(() => rmProjectGroups(props.projects, props.lang))
+</script>
+
+<template>
+  <div class="rm-project-list">
+    <RmLoadingState v-if="loading && !projects.length" />
+
+    <RmErrorState v-else-if="failed" :title="T.failedTitle" :text="T.failedText" action-label="" />
+
+    <div v-else-if="!projects.length" class="rm-project-list__empty">
+      <RmEmptyState icon="FolderSimplePlus" tone="primary" :title="T.emptyTitle" :text="emptyText || T.emptyText" />
+      <slot name="empty-action" />
+    </div>
+
+    <section v-for="group in groups" v-else :key="group.key" class="rm-project-list__group">
+      <p class="rm-project-list__group-title">
+        <RmIcon v-if="group.key === 'pinned'" name="PushPin" weight="fill" :size="12" />
+        {{ group.label }}
+      </p>
+      <div class="rm-project-list__grid">
+        <RmSectionCard v-for="project in group.projects" :key="project.id" position="none" action class="rm-project-list__card">
+          <!-- Deux branches en dur : `<component :is="'NuxtLink'">` ne resout rien. -->
+          <NuxtLink v-if="project.to" :to="project.to" class="rm-project-list__link">
+            <div class="rm-project-list__head">
+              <RmIcon name="FolderSimple" :size="18" />
+              <span class="rm-project-list__title">{{ project.title }}</span>
+              <RmTag v-if="project.id === activeId" variant="teal">{{ T.active }}</RmTag>
+            </div>
+            <p v-if="project.description" class="rm-project-list__text">{{ project.description }}</p>
+            <p class="rm-project-list__meta">{{ rmProjectSummary(project, lang) }}</p>
+            <p v-if="project.createdAt" class="rm-project-list__meta">
+              <RmDate :date="project.createdAt" :lang="lang" />
+            </p>
+          </NuxtLink>
+          <div v-else class="rm-project-list__link">
+            <div class="rm-project-list__head">
+              <RmIcon name="FolderSimple" :size="18" />
+              <span class="rm-project-list__title">{{ project.title }}</span>
+              <RmTag v-if="project.id === activeId" variant="teal">{{ T.active }}</RmTag>
+            </div>
+            <p v-if="project.description" class="rm-project-list__text">{{ project.description }}</p>
+            <p class="rm-project-list__meta">{{ rmProjectSummary(project, lang) }}</p>
+            <p v-if="project.createdAt" class="rm-project-list__meta">
+              <RmDate :date="project.createdAt" :lang="lang" />
+            </p>
+          </div>
+          <RmButton
+            variant="tertiary"
+            size="sm"
+            icon-only
+            ghost
+            class="rm-project-list__pin"
+            :class="{ 'is-on': project.pinned }"
+            :aria-pressed="!!project.pinned"
+            :aria-label="project.pinned ? T.unpin : T.pin"
+            :title="project.pinned ? T.unpin : T.pin"
+            @click="emit('pin', project.id)"
+          >
+            <RmIcon name="PushPin" :weight="project.pinned ? 'fill' : 'regular'" :size="14" />
+          </RmButton>
+        </RmSectionCard>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.rm-project-list{display:flex;flex-direction:column;gap:24px}.rm-project-list__group{display:flex;flex-direction:column;gap:12px}.rm-project-list__group-title{align-items:center;color:var(--rm-shell-text-muted);display:flex;font-size:11px;font-weight:700;gap:6px;letter-spacing:.06em;margin:0;text-transform:uppercase}.rm-project-list__grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}.rm-project-list__card{display:flex;flex-direction:column;position:relative}.rm-project-list__link{color:inherit;display:flex;flex-direction:column;gap:6px;text-decoration:none}.rm-project-list__head{align-items:center;display:flex;gap:8px;padding-right:32px}.rm-project-list__title{font-size:15px;font-weight:600}.rm-project-list__text{color:var(--rm-shell-text-muted);font-size:13px;margin:0}.rm-project-list__meta{color:var(--rm-shell-text-muted);display:flex;font-size:12px;gap:6px;margin:0}.rm-project-list__pin{position:absolute;right:10px;top:10px}.rm-project-list__pin.is-on{color:var(--color-primary)}.rm-project-list__empty{align-items:center;display:flex;flex-direction:column;gap:16px}
+</style>

package/dist/runtime/components/ProjectOverview.vue

@@ -0,0 +1,294 @@
+<!--
+  RmProjectOverview - la vue d'ensemble d'un projet, d'un coup d'oeil.
+
+  Tout se calcule sur ce que la page a deja relu (lignes, commentaires). En
+  tete, les chiffres ; puis le cadrage (la description, que les membres
+  ecrivent, et les rangees que l'app deduit de ses ressources : marques,
+  maladies, pays...) avec les informations du projet en pied ; a droite les
+  facons d'avancer (`steps`, un lien par onglet) et la repartition par
+  famille ; en bas, les derniers ajouts.
+
+  La description s'edite sur place : `describe` part avec le texte, l'app
+  l'enregistre et repasse `saving` a faux. Sans `saveError`, l'editeur se
+  referme.
+-->
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { rmProjectFamilies, type RmProjectResource, type RmProjectScopeRow, type RmProjectStep } from '../utils/projects'
+
+const props = withDefaults(
+  defineProps<{
+    project: {
+      title: string
+      description?: string
+      createdAt?: string
+      ownerName?: string
+      /** Ouvert a tout l'espace de travail. */
+      shared?: boolean
+    } | null
+    rows: RmProjectResource[]
+    /** Personnes a qui le projet est ouvert nommement, proprietaire exclu. */
+    sharedCount?: number
+    /** Documents deposes. `null` : inconnu, la tuile n'est pas montree. */
+    documentsCount?: number | null
+    scopeRows?: RmProjectScopeRow[]
+    steps?: RmProjectStep[]
+    /** Le lecteur peut modifier la description. */
+    editable?: boolean
+    loading?: boolean
+    saving?: boolean
+    saveError?: string
+    /** Texte des derniers ajouts quand le projet est vide. */
+    emptyText?: string
+    lang?: 'fr' | 'en'
+  }>(),
+  {
+    sharedCount: 0,
+    documentsCount: null,
+    scopeRows: () => [],
+    steps: () => [],
+    editable: true,
+    loading: false,
+    saving: false,
+    saveError: '',
+    emptyText: '',
+    lang: 'fr',
+  },
+)
+
+const emit = defineEmits<{
+  tab: [key: string]
+  describe: [description: string]
+  open: [row: RmProjectResource]
+}>()
+
+const WORDS = {
+  fr: {
+    resources: 'Ressources', families: 'Familles', documents: 'Documents déposés', comments: 'Commentaires',
+    scope: 'Cadrage du projet', scopeText: 'Déduit des ressources rangées dans le projet. La description reste modifiable.',
+    edit: 'Modifier', placeholder: 'De quoi parle ce projet, à quoi il sert, ce qu\'il reste à faire',
+    cancel: 'Annuler', save: 'Enregistrer', fill: 'À renseigner',
+    created: 'Créé le', owner: 'Propriétaire', visibility: 'Visibilité', last: 'Dernier ajout',
+    workspace: 'Tout l\'espace de travail', private: 'Privé', people: (n: number) => `${n} ${n > 1 ? 'personnes' : 'personne'}`,
+    start: 'Démarrer', startText: 'Pour faire avancer ce projet.', startEmpty: 'Le projet est vide pour l\'instant. Pour le remplir :',
+    breakdown: 'Répartition par famille', nothing: 'Rien n\'est encore rangé.',
+    latest: 'Derniers ajouts', all: 'Toutes les ressources', unknown: 'Élément inconnu',
+    empty: 'Parcourez les pages et utilisez le bouton Projet d\'une carte pour la ranger ici.',
+  },
+  en: {
+    resources: 'Resources', families: 'Families', documents: 'Documents', comments: 'Comments',
+    scope: 'Project scope', scopeText: 'Drawn from the resources filed in the project. The description can be edited.',
+    edit: 'Edit', placeholder: 'What is this project about, what is it for, what is left to do',
+    cancel: 'Cancel', save: 'Save', fill: 'To fill in',
+    created: 'Created', owner: 'Owner', visibility: 'Visibility', last: 'Last addition',
+    workspace: 'Whole workspace', private: 'Private', people: (n: number) => `${n} ${n > 1 ? 'people' : 'person'}`,
+    start: 'Get started', startText: 'Ways to move this project forward.', startEmpty: 'The project is empty for now. To fill it:',
+    breakdown: 'Breakdown by family', nothing: 'Nothing filed yet.',
+    latest: 'Latest additions', all: 'All resources', unknown: 'Unknown item',
+    empty: 'Browse the pages and use the Project button on a card to file it here.',
+  },
+}
+const T = computed(() => WORDS[props.lang] ?? WORDS.fr)
+
+const families = computed(() => rmProjectFamilies(props.rows))
+const commentTotal = computed(() => props.rows.reduce((sum, row) => sum + (row.comments ?? 0), 0))
+
+const kpis = computed(() => [
+  { icon: 'Stack', value: props.rows.length, legend: T.value.resources },
+  { icon: 'SquaresFour', value: families.value.length, legend: T.value.families },
+  ...(props.documentsCount == null ? [] : [{ icon: 'FileText', value: props.documentsCount, legend: T.value.documents }]),
+  { icon: 'ChatCircle', value: commentTotal.value, legend: T.value.comments },
+])
+
+const breakdown = computed(() =>
+  [...families.value].sort((a, b) => b.count - a.count).map(f => ({ name: f.label, value: f.count })))
+
+const visibility = computed(() => {
+  if (props.project?.shared) return T.value.workspace
+  return props.sharedCount ? T.value.people(props.sharedCount) : T.value.private
+})
+
+const lastAdded = computed(() =>
+  props.rows.map(row => row.createdAt ?? '').filter(Boolean).sort().at(-1) ?? '')
+
+const latest = computed(() =>
+  [...props.rows].sort((a, b) => String(b.createdAt ?? '').localeCompare(String(a.createdAt ?? ''))).slice(0, 5))
+
+function formatDate(value?: string) {
+  const date = new Date(value ?? '')
+  if (Number.isNaN(date.getTime())) return ''
+  return date.toLocaleDateString(props.lang === 'en' ? 'en-GB' : 'fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })
+}
+
+const editing = ref(false)
+const draft = ref('')
+
+function startEdit() {
+  draft.value = props.project?.description ?? ''
+  editing.value = true
+}
+
+watch(() => props.saving, (now, was) => {
+  if (was && !now && !props.saveError) editing.value = false
+})
+
+/** Le reste d'une rangee du cadrage, au survol de sa pastille « +X ». */
+const SCOPE_MAX = 8
+const moreOpen = ref(false)
+const moreAnchor = ref<HTMLElement | null>(null)
+const moreRow = ref<RmProjectScopeRow | null>(null)
+
+function showMore(row: RmProjectScopeRow, event: Event) {
+  moreAnchor.value = event.currentTarget as HTMLElement
+  moreRow.value = row
+  moreOpen.value = true
+}
+
+function onLatest(event: MouseEvent, row: RmProjectResource) {
+  if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) return
+  event.preventDefault()
+  emit('open', row)
+}
+</script>
+
+<template>
+  <div class="rm-project-ov">
+    <RmKpiBar v-if="loading" loading :tiles="kpis.length" />
+    <RmKpiBar v-else :kpis="kpis" />
+
+    <div class="rm-project-ov__top">
+      <RmCard padding="lg" class="rm-project-ov__card is-scope">
+        <div class="rm-project-ov__card-head">
+          <div class="rm-project-ov__titles">
+            <h2 class="rm-project-ov__title">{{ T.scope }}</h2>
+            <p class="rm-project-ov__context">{{ T.scopeText }}</p>
+          </div>
+          <RmButton v-if="editable && !editing" variant="secondary" size="sm" prefix-icon="PencilSimple" @click="startEdit">
+            {{ T.edit }}
+          </RmButton>
+        </div>
+
+        <ul class="rm-project-ov__scope">
+          <li class="rm-project-ov__scope-row">
+            <RmIcon name="TextAlignLeft" :size="16" class="rm-project-ov__scope-icon" />
+            <div class="rm-project-ov__scope-body">
+              <p class="rm-project-ov__scope-key">Description</p>
+              <template v-if="editing">
+                <RmTextarea v-model="draft" :rows="4" :placeholder="T.placeholder" :error="saveError" />
+                <div class="rm-project-ov__edit-actions">
+                  <RmButton variant="tertiary" size="sm" @click="editing = false">{{ T.cancel }}</RmButton>
+                  <RmButton variant="primary" size="sm" :loading="saving" @click="emit('describe', draft.trim())">{{ T.save }}</RmButton>
+                </div>
+              </template>
+              <!-- Coupee a trois lignes : le cadrage se lit d'un coup d'oeil. -->
+              <RmClampText v-else-if="project?.description" class="rm-project-ov__scope-value" :text="project.description" :lines="3" :lang="lang" />
+              <button v-else-if="editable" type="button" class="rm-project-ov__placeholder" @click="startEdit">{{ T.fill }}</button>
+            </div>
+          </li>
+
+          <li v-for="row in scopeRows" :key="row.key" class="rm-project-ov__scope-row">
+            <RmIcon :name="row.icon" :size="16" class="rm-project-ov__scope-icon" />
+            <div class="rm-project-ov__scope-body">
+              <p class="rm-project-ov__scope-key">{{ row.label }}</p>
+              <div v-if="row.values.length" class="rm-project-ov__tags">
+                <RmTag v-for="value in row.values.slice(0, SCOPE_MAX)" :key="value" variant="gray" class="rm-project-ov__tag" :title="value">
+                  {{ value }}
+                </RmTag>
+                <RmTag
+                  v-if="row.values.length > SCOPE_MAX"
+                  variant="gray"
+                  tabindex="0"
+                  :aria-label="`${row.label} : ${row.values.slice(SCOPE_MAX).join(', ')}`"
+                  @mouseenter="showMore(row, $event)"
+                  @focus="showMore(row, $event)"
+                  @mouseleave="moreOpen = false"
+                  @blur="moreOpen = false"
+                >
+                  +{{ row.values.length - SCOPE_MAX }}
+                </RmTag>
+              </div>
+              <p v-else class="rm-project-ov__scope-none">{{ row.none ?? '' }}</p>
+            </div>
+          </li>
+        </ul>
+
+        <RmPopover v-model="moreOpen" :anchor="moreAnchor" :label="moreRow?.label" align="start">
+          <ul class="rm-project-ov__more">
+            <li v-for="value in moreRow?.values.slice(SCOPE_MAX) ?? []" :key="value">{{ value }}</li>
+          </ul>
+        </RmPopover>
+
+        <dl class="rm-project-ov__meta">
+          <div v-if="project?.createdAt">
+            <dt>{{ T.created }}</dt>
+            <dd>{{ formatDate(project.createdAt) }}</dd>
+          </div>
+          <div v-if="project?.ownerName">
+            <dt>{{ T.owner }}</dt>
+            <dd>{{ project.ownerName }}</dd>
+          </div>
+          <div>
+            <dt>{{ T.visibility }}</dt>
+            <dd>{{ visibility }}</dd>
+          </div>
+          <div v-if="lastAdded">
+            <dt>{{ T.last }}</dt>
+            <dd>{{ formatDate(lastAdded) }}</dd>
+          </div>
+        </dl>
+      </RmCard>
+
+      <div class="rm-project-ov__side">
+        <RmCard v-if="steps.length" padding="lg" class="rm-project-ov__card">
+          <div class="rm-project-ov__titles">
+            <h2 class="rm-project-ov__title">{{ T.start }}</h2>
+            <p class="rm-project-ov__context">{{ rows.length ? T.startText : T.startEmpty }}</p>
+          </div>
+          <ol class="rm-project-ov__start">
+            <li v-for="step in steps" :key="step.tab">
+              <button type="button" class="rm-project-ov__start-item" @click="emit('tab', step.tab)">
+                <span class="rm-project-ov__start-icon"><RmIcon :name="step.icon" :size="17" /></span>
+                <span class="rm-project-ov__start-text">
+                  <span class="rm-project-ov__start-title">{{ step.title }}</span>
+                  <span class="rm-project-ov__start-desc">{{ step.text }}</span>
+                </span>
+                <RmIcon name="ArrowRight" :size="14" class="rm-project-ov__start-arrow" />
+              </button>
+            </li>
+          </ol>
+        </RmCard>
+
+        <RmSectionCard class="rm-project-ov__card">
+          <template #header>{{ T.breakdown }}</template>
+          <RmDonutChart v-if="breakdown.length" :data="breakdown" :height="240" hide-legend />
+          <p v-else class="rm-project-ov__empty">{{ T.nothing }}</p>
+        </RmSectionCard>
+      </div>
+    </div>
+
+    <RmSectionCard class="rm-project-ov__card">
+      <template #header>
+        <div class="rm-project-ov__head">
+          <span>{{ T.latest }}</span>
+          <RmButton v-if="rows.length" variant="text" size="sm" suffix-icon="ArrowRight" @click="emit('tab', 'resources')">
+            {{ T.all }}
+          </RmButton>
+        </div>
+      </template>
+      <ul v-if="latest.length" class="rm-project-ov__list">
+        <li v-for="row in latest" :key="`${row.type}-${row.id}`" class="rm-project-ov__row">
+          <RmIcon :name="row.icon" :size="16" class="rm-project-ov__row-icon" />
+          <a v-if="row.path" :href="row.path" class="rm-project-ov__row-title" @click="onLatest($event, row)">{{ row.title || T.unknown }}</a>
+          <span v-else class="rm-project-ov__row-title">{{ row.title || T.unknown }}</span>
+          <span class="rm-project-ov__row-family">{{ row.family }}</span>
+          <span v-if="row.createdAt" class="rm-project-ov__row-date">{{ formatDate(row.createdAt) }}</span>
+        </li>
+      </ul>
+      <p v-else class="rm-project-ov__empty">{{ emptyText || T.empty }}</p>
+    </RmSectionCard>
+  </div>
+</template>
+
+<style scoped>
+.rm-project-ov{display:flex;flex-direction:column;gap:16px}.rm-project-ov__top{align-items:stretch;display:grid;gap:16px;grid-template-columns:minmax(0,3fr) minmax(0,2fr)}@media (max-width:1100px){.rm-project-ov__top{grid-template-columns:1fr}}.rm-project-ov__card{min-width:0}.rm-project-ov__card.is-scope,.rm-project-ov__card.is-scope :deep(.r-card__body){display:flex;flex-direction:column}.rm-project-ov__card.is-scope{height:100%}.rm-project-ov__card.is-scope :deep(.r-card__body){flex:1}.rm-project-ov__card-head{align-items:flex-start;display:flex;gap:12px;justify-content:space-between}.rm-project-ov__titles{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}.rm-project-ov__title{color:var(--text-primary);font-size:15px;font-weight:var(--weight-bold);margin:0}.rm-project-ov__context{color:var(--text-muted);font-size:12px;margin:0}.rm-project-ov__scope{display:flex;flex-direction:column;list-style:none;margin:0 0 16px;padding:0}.rm-project-ov__scope-row{align-items:flex-start;border-bottom:1px solid var(--border-soft,var(--border-default));display:flex;gap:12px;padding:8px 0}.rm-project-ov__scope-icon{color:var(--color-secondary);flex:none;margin-top:1px}.rm-project-ov__scope-body{flex:1;min-width:0}.rm-project-ov__scope-key{color:var(--text-muted);font-size:10.5px;font-weight:700;letter-spacing:.08em;margin:0 0 4px;text-transform:uppercase}.rm-project-ov__scope-value{color:var(--text-primary);font-size:13px;font-weight:600;margin:0;white-space:pre-line}.rm-project-ov__tags{display:flex;flex-wrap:wrap;gap:6px}.rm-project-ov__tag{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-project-ov__scope-none{color:var(--text-muted);font-size:13px;font-style:italic;margin:0}.rm-project-ov__more{font-size:13px;margin:0;padding-left:16px}.rm-project-ov__placeholder{background:none;border:none;color:var(--text-muted);cursor:pointer;font:inherit;font-size:13px;font-style:italic;margin:0;padding:0}.rm-project-ov__placeholder:hover{text-decoration:underline}.rm-project-ov__edit-actions{display:flex;gap:8px;justify-content:flex-end;margin:8px 0 12px}.rm-project-ov__meta{border-top:1px solid var(--border-default);display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin:auto 0 0;padding-top:16px}.rm-project-ov__meta dt{color:var(--text-secondary);font-size:12px}.rm-project-ov__meta dd{font-size:14px;font-weight:500;margin:2px 0 0}.rm-project-ov__side{display:flex;flex-direction:column;gap:16px;min-width:0}.rm-project-ov__side>:last-child{flex:1}.rm-project-ov__start{display:flex;flex-direction:column;gap:8px;list-style:none;margin:0;padding:0}.rm-project-ov__start-item{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-xl,12px);color:inherit;cursor:pointer;display:flex;font:inherit;gap:12px;padding:10px 12px;text-align:left;transition:border-color .15s,background .15s,box-shadow .15s;width:100%}.rm-project-ov__start-item:hover{background:var(--bg-hover,var(--bg-surface-2));border-color:var(--color-secondary);box-shadow:var(--shadow-sm)}.rm-project-ov__start-item:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.rm-project-ov__start-icon{align-items:center;background:var(--bg-hover,var(--bg-surface-2));border-radius:var(--radius-lg,8px);color:var(--color-secondary);display:flex;flex:none;height:34px;justify-content:center;width:34px}.rm-project-ov__start-text{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}.rm-project-ov__start-title{color:var(--text-primary);font-size:13px;font-weight:700}.rm-project-ov__start-desc{color:var(--text-muted);font-size:11px;line-height:1.45}.rm-project-ov__start-arrow{color:var(--text-muted);flex:none}.rm-project-ov__head{align-items:center;display:flex;justify-content:space-between;width:100%}.rm-project-ov__empty{color:var(--text-secondary);font-size:14px;margin:0}.rm-project-ov__list{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}.rm-project-ov__row{align-items:center;border-bottom:1px solid var(--border-default);display:flex;font-size:14px;gap:10px;padding:8px 0}.rm-project-ov__row:last-child{border-bottom:none}.rm-project-ov__row-icon{color:var(--text-secondary);flex:none}.rm-project-ov__row-title{color:var(--text-primary);flex:1;min-width:0;overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}a.rm-project-ov__row-title{color:var(--color-primary)}a.rm-project-ov__row-title:hover{text-decoration:underline}.rm-project-ov__row-date,.rm-project-ov__row-family{color:var(--text-muted);flex:none;font-size:12px}
+</style>