feat: подготовил дизайн (изменения из другого репозитория)

frontend/src/components/ui/StatusBadge.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+defineProps<{
+  status: 'pending' | 'active' | 'done' | 'cancelled' | 'approved' | 'rejected' | string
+}>()
+
+const statusMap: Record<string, { label: string; cls: string }> = {
+  pending:   { label: 'Ожидание', cls: 'warning' },
+  active:    { label: 'Активно', cls: 'success' },
+  done:      { label: 'Завершено', cls: 'info' },
+  cancelled: { label: 'Отменено', cls: 'danger' },
+  approved:  { label: 'Одобрено', cls: 'success' },
+  rejected:  { label: 'Отклонено', cls: 'danger' },
+  open:      { label: 'Открыта', cls: 'success' },
+  closed:    { label: 'Закрыта', cls: 'danger' },
+  full:      { label: 'Нет мест', cls: 'warning' },
+  upcoming:  { label: 'Будущая', cls: 'info' },
+  ongoing:   { label: 'Идет', cls: 'success' },
+  completed: { label: 'Завершена', cls: 'info' },
+  registered:{ label: 'Записан', cls: 'success' },
+  attended:  { label: 'Посещено', cls: 'info' },
+  needsReview: { label: 'Нужен отзыв', cls: 'warning' },
+}
+</script>
+
+<template>
+  <span class="status-badge" :class="statusMap[status]?.cls ?? 'info'">
+    {{ statusMap[status]?.label ?? status }}
+  </span>
+</template>
+
+<style scoped>
+.status-badge {
+  display: inline-block;
+  padding: 3px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+}
+.success  { background: rgba(220,252,231,0.9); color: #166534; border: 1px solid #86EFAC; }
+.warning  { background: rgba(254,243,199,0.9); color: #92400E; border: 1px solid #FDE68A; }
+.danger   { background: rgba(254,226,226,0.9); color: #991B1B; border: 1px solid #FCA5A5; }
+.info     { background: rgba(224,242,254,0.9); color: #1E40AF; border: 1px solid #93C5FD; }
+</style>