mirror of
https://github.com/InvoiceShelf/InvoiceShelf.git
synced 2026-04-15 17:24:10 +00:00
88adfe0e50
Define 13 semantic color tokens (surface, text, border, hover) with light/dark values in themes.css. Register with Tailwind via @theme inline. Migrate all 335 Vue files from hardcoded gray/white classes to semantic tokens. Add theme toggle (sun/moon/system) in user avatar dropdown. Replace @tailwindcss/forms with custom form reset using theme vars. Add status badge and alert tokens for dark mode. Theme-aware chart grid/labels, skeleton placeholders, and editor. Inline script in <head> prevents flash of wrong theme on load. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
85 lines
2.6 KiB
Vue
85 lines
2.6 KiB
Vue
<template>
|
|
<div class="flex items-center justify-center min-h-[70vh]">
|
|
<div class="w-full max-w-xl p-8">
|
|
<div class="text-center mb-8">
|
|
<BaseIcon
|
|
name="BuildingOfficeIcon"
|
|
class="w-16 h-16 mx-auto text-subtle mb-4"
|
|
/>
|
|
<h1 class="text-2xl font-semibold text-heading">
|
|
{{ $t('general.welcome') }}, {{ userStore.currentUser.name }}
|
|
</h1>
|
|
<p class="mt-2 text-sm text-muted">
|
|
{{ $t('general.no_company_description') }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Pending Invitations -->
|
|
<div v-if="invitationStore.pendingInvitations.length > 0">
|
|
<h2
|
|
class="text-sm font-semibold uppercase tracking-wide text-subtle mb-3"
|
|
>
|
|
{{ $t('members.pending_invitations') }}
|
|
</h2>
|
|
<div class="space-y-3">
|
|
<div
|
|
v-for="invitation in invitationStore.pendingInvitations"
|
|
:key="invitation.id"
|
|
class="flex items-center justify-between p-4 bg-surface rounded-lg border border-line-default"
|
|
>
|
|
<div>
|
|
<p class="font-medium text-heading">
|
|
{{ invitation.company?.name }}
|
|
</p>
|
|
<p class="text-sm text-muted">
|
|
{{ invitation.role?.title }} ·
|
|
{{ $t('members.invited_by') }}:
|
|
{{ invitation.invited_by?.name }}
|
|
</p>
|
|
</div>
|
|
<div class="flex space-x-2 ml-4 shrink-0">
|
|
<BaseButton
|
|
size="sm"
|
|
@click="acceptInvitation(invitation.token)"
|
|
>
|
|
{{ $t('general.accept') }}
|
|
</BaseButton>
|
|
<BaseButton
|
|
variant="white"
|
|
size="sm"
|
|
@click="declineInvitation(invitation.token)"
|
|
>
|
|
{{ $t('general.decline') }}
|
|
</BaseButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useInvitationStore } from '@/scripts/admin/stores/invitation'
|
|
import { useUserStore } from '@/scripts/admin/stores/user'
|
|
|
|
const invitationStore = useInvitationStore()
|
|
const userStore = useUserStore()
|
|
const router = useRouter()
|
|
|
|
onMounted(async () => {
|
|
await invitationStore.fetchPending()
|
|
})
|
|
|
|
async function acceptInvitation(token) {
|
|
await invitationStore.accept(token)
|
|
router.push('/admin/dashboard')
|
|
}
|
|
|
|
async function declineInvitation(token) {
|
|
await invitationStore.decline(token)
|
|
}
|
|
</script>
|