fishy/Dynavera
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Tentative changes

Browse source
This commit is contained in:
Viswamedha Nalabotu 2025-12-18 23:27:24 +00:00
parent b9252068c4
commit efc794381f
17 changed files with 2083 additions and 652 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
apps/agents/migrations/0002_alter_agent_options_alter_agentexecution_options.py Normal file
View file

@ -0,0 +1,21 @@
# Generated by Django 5.2.8 on 2025-12-17 17:27
from django.db import migrations
class Migration(migrations.Migration):
dependencies = [
('agents', '0001_initial'),
]
operations = [
migrations.AlterModelOptions(
name='agent',
options={'verbose_name': 'Agent', 'verbose_name_plural': 'Agents'},
),
migrations.AlterModelOptions(
name='agentexecution',
options={'verbose_name': 'Agent Execution', 'verbose_name_plural': 'Agent Executions'},
),
]

81
apps/domains/admin.py
View file

@ -1,38 +1,65 @@
from django.contrib import admin
from apps.domains.models import Domain, Organisation, Dataset
from apps.domains.models import Domain, Organization, Dataset, OrganizationMembership, InviteToken, DomainMembership
@admin.register(Organization)
class OrganizationAdmin(admin.ModelAdmin):
list_display = ('name', 'owner', 'uuid', 'created_at', 'updated_at')
search_fields = ('name', 'owner__email_address')
readonly_fields = ('uuid', 'created_at', 'updated_at')
fieldsets = (
(None, {'fields': ('name', 'uuid', 'description')}),
('Ownership', {'fields': ('owner',)}),
('Dates', {'fields': ('created_at', 'updated_at')}),
)
@admin.register(OrganizationMembership)
class OrganizationMembershipAdmin(admin.ModelAdmin):
list_display = ('user', 'organization', 'role', 'created_at')
list_filter = ('role', 'created_at')
search_fields = ('user__email_address', 'organization__name')
readonly_fields = ('created_at', 'updated_at')
@admin.register(InviteToken)
class InviteTokenAdmin(admin.ModelAdmin):
list_display = ('organization', 'created_by', 'expires_at', 'is_active', 'used_by', 'used_at')
list_filter = ('is_active', 'created_at', 'expires_at')
search_fields = ('organization__name', 'created_by__email_address', 'token')
readonly_fields = ('token', 'created_at', 'updated_at')
@admin.register(Domain)
class DomainAdmin(admin.ModelAdmin):
list_display = ('name', 'uuid')
search_fields = ('name',)
readonly_fields = ('uuid',)
fieldsets = (
(None, {'fields': ('name', 'uuid')}),
('Description', {'fields': ('description',)}),
)
list_display = ('name', 'organization', 'uuid')
list_filter = ('organization',)
search_fields = ('name', 'organization__name')
readonly_fields = ('uuid',)
fieldsets = (
(None, {'fields': ('name', 'uuid')}),
('Description', {'fields': ('description',)}),
('Organization', {'fields': ('organization',)}),
)
@admin.register(Organisation)
class OrganisationAdmin(admin.ModelAdmin):
list_display = ('name', 'uuid', 'created_at', 'updated_at')
search_fields = ('name',)
readonly_fields = ('uuid', 'created_at', 'updated_at')
fieldsets = (
(None, {'fields': ('name', 'uuid')}),
('Relations', {'fields': ('managers', 'employees', 'domains')}),
('Dates', {'fields': ('created_at', 'updated_at')}),
)
@admin.register(DomainMembership)
class DomainMembershipAdmin(admin.ModelAdmin):
list_display = ('user', 'domain', 'created_at')
list_filter = ('created_at',)
search_fields = ('user__email_address', 'domain__name')
readonly_fields = ('created_at', 'updated_at')
@admin.register(Dataset)
class DatasetAdmin(admin.ModelAdmin):
list_display = ('name', 'domain', 'uuid', 'created_by', 'created_at')
search_fields = ('name', 'domain__name')
readonly_fields = ('uuid', 'created_at', 'updated_at')
fieldsets = (
(None, {'fields': ('name', 'uuid')}),
('Details', {'fields': ('domain', 'description', 'created_by')}),
('File', {'fields': ('datafile',)}),
('Dates', {'fields': ('created_at', 'updated_at')}),
)
list_display = ('name', 'domain', 'uuid', 'created_by', 'created_at')
search_fields = ('name', 'domain__name')
readonly_fields = ('uuid', 'created_at', 'updated_at')
fieldsets = (
(None, {'fields': ('name', 'uuid')}),
('Details', {'fields': ('domain', 'description', 'created_by')}),
('File', {'fields': ('datafile',)}),
('Dates', {'fields': ('created_at', 'updated_at')}),
)

105
apps/domains/migrations/0002_alter_domain_options_domainmembership_domain_members_and_more.py Normal file
View file

@ -0,0 +1,105 @@
# Generated by Django 5.2.8 on 2025-12-17 17:27
import django.db.models.deletion
import uuid
from django.conf import settings
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
('domains', '0001_initial'),
migrations.swappable_dependency(settings.AUTH_USER_MODEL),
]
operations = [
migrations.AlterModelOptions(
name='domain',
options={'verbose_name': 'Domain', 'verbose_name_plural': 'Domains'},
),
migrations.CreateModel(
name='DomainMembership',
fields=[
('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
('created_at', models.DateTimeField(auto_now_add=True, verbose_name='Created At')),
('updated_at', models.DateTimeField(auto_now=True, verbose_name='Updated At')),
('domain', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='memberships', to='domains.domain')),
('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='domain_memberships', to=settings.AUTH_USER_MODEL)),
],
options={
'verbose_name': 'Domain Membership',
'verbose_name_plural': 'Domain Memberships',
'unique_together': {('user', 'domain')},
},
),
migrations.AddField(
model_name='domain',
name='members',
field=models.ManyToManyField(related_name='domains', through='domains.DomainMembership', to=settings.AUTH_USER_MODEL),
),
migrations.CreateModel(
name='Organization',
fields=[
('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
('created_at', models.DateTimeField(auto_now_add=True, verbose_name='Created At')),
('updated_at', models.DateTimeField(auto_now=True, verbose_name='Updated At')),
('name', models.CharField(max_length=255, unique=True)),
('uuid', models.UUIDField(default=uuid.uuid4, editable=False, unique=True)),
('description', models.TextField(blank=True, default='')),
('owner', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='owned_organizations', to=settings.AUTH_USER_MODEL)),
],
options={
'verbose_name': 'Organization',
'verbose_name_plural': 'Organizations',
},
),
migrations.CreateModel(
name='InviteToken',
fields=[
('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
('created_at', models.DateTimeField(auto_now_add=True, verbose_name='Created At')),
('updated_at', models.DateTimeField(auto_now=True, verbose_name='Updated At')),
('token', models.UUIDField(default=uuid.uuid4, editable=False, unique=True)),
('expires_at', models.DateTimeField()),
('used_at', models.DateTimeField(blank=True, null=True)),
('is_active', models.BooleanField(default=True)),
('created_by', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='created_invites', to=settings.AUTH_USER_MODEL)),
('used_by', models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, related_name='used_invites', to=settings.AUTH_USER_MODEL)),
('organization', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='invite_tokens', to='domains.organization')),
],
options={
'verbose_name': 'Invite Token',
'verbose_name_plural': 'Invite Tokens',
},
),
migrations.AddField(
model_name='domain',
name='organization',
field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, related_name='domains', to='domains.organization'),
),
migrations.CreateModel(
name='OrganizationMembership',
fields=[
('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
('created_at', models.DateTimeField(auto_now_add=True, verbose_name='Created At')),
('updated_at', models.DateTimeField(auto_now=True, verbose_name='Updated At')),
('role', models.CharField(choices=[('employer', 'Employer'), ('employee', 'Employee')], default='employee', max_length=50)),
('organization', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='memberships', to='domains.organization')),
('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='organization_memberships', to=settings.AUTH_USER_MODEL)),
],
options={
'verbose_name': 'Organization Membership',
'verbose_name_plural': 'Organization Memberships',
'unique_together': {('user', 'organization')},
},
),
migrations.AddField(
model_name='organization',
name='members',
field=models.ManyToManyField(related_name='organizations', through='domains.OrganizationMembership', to=settings.AUTH_USER_MODEL),
),
migrations.DeleteModel(
name='Organisation',
),
]

97
apps/domains/models.py
View file

@ -6,31 +6,108 @@ from django.db.models import (
UUIDField,
Model,
TextField,
ManyToManyField,
DateTimeField,
BooleanField,
TextChoices,
)
from django.utils.translation import gettext_lazy as _
from uuid import uuid4
from datetime import timedelta
from django.utils import timezone
from apps.users.models import TimeStampMixin, User
class Organization(TimeStampMixin, Model):
name = CharField(max_length=255, unique=True)
uuid = UUIDField(default=uuid4, editable=False, unique=True)
description = TextField(blank=True, default="")
owner = ForeignKey(User, on_delete=CASCADE, related_name="owned_organizations")
members = ManyToManyField(User, through="OrganizationMembership", related_name="organizations")
class Meta:
verbose_name = _("Organization")
verbose_name_plural = _("Organizations")
def __str__(self) -> str:
return self.name
class OrganizationMembership(TimeStampMixin, Model):
class Role(TextChoices):
EMPLOYER = "employer", _("Employer")
EMPLOYEE = "employee", _("Employee")
user = ForeignKey(User, on_delete=CASCADE, related_name="organization_memberships")
organization = ForeignKey(Organization, on_delete=CASCADE, related_name="memberships")
role = CharField(max_length=50, choices=Role.choices, default=Role.EMPLOYEE)
class Meta:
verbose_name = _("Organization Membership")
verbose_name_plural = _("Organization Memberships")
unique_together = [["user", "organization"]]
def __str__(self) -> str:
return f"{self.user.full_name} - {self.organization.name} ({self.role})"
class InviteToken(TimeStampMixin, Model):
token = UUIDField(default=uuid4, unique=True, editable=False)
organization = ForeignKey(Organization, on_delete=CASCADE, related_name="invite_tokens")
created_by = ForeignKey(User, on_delete=CASCADE, related_name="created_invites")
expires_at = DateTimeField()
used_by = ForeignKey(User, on_delete=CASCADE, null=True, blank=True, related_name="used_invites")
used_at = DateTimeField(null=True, blank=True)
is_active = BooleanField(default=True)
class Meta:
verbose_name = _("Invite Token")
verbose_name_plural = _("Invite Tokens")
def save(self, *args, **kwargs):
if not self.expires_at:
self.expires_at = timezone.now() + timedelta(days=7)
super().save(*args, **kwargs)
def is_valid(self):
return self.is_active and not self.used_by and timezone.now() < self.expires_at
def __str__(self) -> str:
return f"Invite for {self.organization.name} (expires {self.expires_at})"
class Domain(Model):
name = CharField(max_length = 255, unique = True)
uuid = UUIDField(default = uuid4, editable = False, unique = True)
description = TextField(blank = True, default = "")
name = CharField(max_length=255, unique=True)
uuid = UUIDField(default=uuid4, editable=False, unique=True)
description = TextField(blank=True, default="")
organization = ForeignKey(Organization, on_delete=CASCADE, related_name="domains", null=True, blank=True)
members = ManyToManyField(User, through="DomainMembership", related_name="domains")
class Meta:
verbose_name = _("Domain")
verbose_name_plural = _("Domains")
def __str__(self) -> str:
return self.name
class Organisation(TimeStampMixin, Model):
name = CharField(max_length = 255, unique = True)
uuid = UUIDField(default = uuid4, editable = False, unique = True)
managers = ForeignKey(User, on_delete = CASCADE, related_name = "managed_organisations")
employees = ForeignKey(User, on_delete = CASCADE, related_name = "organisations")
domains = ForeignKey(Domain, on_delete = CASCADE, related_name = "organisations")
class DomainMembership(TimeStampMixin, Model):
user = ForeignKey(User, on_delete=CASCADE, related_name="domain_memberships")
domain = ForeignKey(Domain, on_delete=CASCADE, related_name="memberships")
class Meta:
verbose_name = _("Domain Membership")
verbose_name_plural = _("Domain Memberships")
unique_together = [["user", "domain"]]
def __str__(self) -> str:
return self.name
return f"{self.user.full_name} - {self.domain.name}"
class Dataset(TimeStampMixin, Model):

76
apps/domains/serializers.py
View file

@ -1,19 +1,79 @@
from rest_framework import serializers
from rest_framework.serializers import ModelSerializer
from apps.domains.models import Domain, Organisation, Dataset
from apps.domains.models import Domain, Organization, Dataset, OrganizationMembership, InviteToken, DomainMembership
from apps.users.serializers import UserSerializer
class OrganizationSerializer(serializers.ModelSerializer):
owner = UserSerializer(read_only=True)
member_count = serializers.SerializerMethodField()
domain_count = serializers.SerializerMethodField()
class Meta:
model = Organization
fields = ['id', 'uuid', 'name', 'description', 'owner', 'created_at', 'updated_at', 'member_count', 'domain_count']
read_only_fields = ['uuid', 'owner', 'created_at', 'updated_at']
def get_member_count(self, obj):
return obj.memberships.count()
def get_domain_count(self, obj):
return obj.domains.count()
class OrganizationMembershipSerializer(serializers.ModelSerializer):
user = UserSerializer(read_only=True)
user_id = serializers.IntegerField(write_only=True, required=False)
class Meta:
model = OrganizationMembership
fields = ['id', 'user', 'user_id', 'organization', 'role', 'created_at']
read_only_fields = ['organization', 'created_at']
class InviteTokenSerializer(serializers.ModelSerializer):
created_by = UserSerializer(read_only=True)
used_by = UserSerializer(read_only=True)
invite_url = serializers.SerializerMethodField()
is_valid = serializers.SerializerMethodField()
class Meta:
model = InviteToken
fields = ['id', 'token', 'organization', 'created_by', 'expires_at', 'used_by', 'used_at', 'is_active', 'invite_url', 'is_valid', 'created_at']
read_only_fields = ['token', 'organization', 'created_by', 'used_by', 'used_at', 'created_at']
def get_invite_url(self, obj):
request = self.context.get('request')
if request:
return request.build_absolute_uri(f'/invite/{obj.token}')
return f'/invite/{obj.token}'
def get_is_valid(self, obj):
return obj.is_valid()
class DomainMembershipSerializer(serializers.ModelSerializer):
user = UserSerializer(read_only=True)
domain_name = serializers.CharField(source='domain.name', read_only=True)
class Meta:
model = DomainMembership
fields = ['id', 'user', 'domain', 'domain_name', 'created_at']
read_only_fields = ['created_at']
class DomainSerializer(ModelSerializer):
organization = OrganizationSerializer(read_only=True)
organization_id = serializers.IntegerField(write_only=True, required=False, allow_null=True)
member_count = serializers.SerializerMethodField()
class Meta:
model = Domain
fields = ['id', 'name', 'description', 'uuid']
fields = ['id', 'uuid', 'name', 'description', 'organization', 'organization_id', 'member_count']
read_only_fields = ['uuid']
class OrganisationSerializer(ModelSerializer):
class Meta:
model = Organisation
fields = ['id', 'name', 'managers', 'employees', 'domains', 'uuid', 'created_at', 'updated_at']
def get_member_count(self, obj):
return obj.memberships.count()
class DatasetSerializer(ModelSerializer):

242
apps/domains/viewsets.py
View file

@ -1,28 +1,246 @@
from rest_framework.viewsets import ModelViewSet
from rest_framework.permissions import IsAuthenticatedOrReadOnly
from apps.domains.models import Domain, Organisation, Dataset
from apps.domains.serializers import DomainSerializer, OrganisationSerializer, DatasetSerializer
from rest_framework.permissions import IsAuthenticated, IsAuthenticatedOrReadOnly
from rest_framework.decorators import action
from rest_framework.response import Response
from rest_framework import status
from django.shortcuts import get_object_or_404
from django.utils import timezone
from apps.domains.models import Domain, Organization, Dataset, OrganizationMembership, InviteToken, DomainMembership
from apps.domains.serializers import (
DomainSerializer,
OrganizationSerializer,
DatasetSerializer,
OrganizationMembershipSerializer,
InviteTokenSerializer,
DomainMembershipSerializer,
)
class OrganizationViewSet(ModelViewSet):
queryset = Organization.objects.all()
serializer_class = OrganizationSerializer
permission_classes = [IsAuthenticated]
lookup_field = 'uuid'
def get_queryset(self):
user = self.request.user
return Organization.objects.filter(memberships__user=user).distinct()
def perform_create(self, serializer):
org = serializer.save(owner=self.request.user)
OrganizationMembership.objects.create(
organization=org,
user=self.request.user,
role=OrganizationMembership.Role.EMPLOYER
)
def update(self, request, *args, **kwargs):
org = self.get_object()
membership = OrganizationMembership.objects.filter(
organization=org,
user=request.user,
role=OrganizationMembership.Role.EMPLOYER
).first()
if not membership:
return Response(
{"error": "Only employers can update organization details"},
status=status.HTTP_403_FORBIDDEN
)
return super().update(request, *args, **kwargs)
@action(detail=True, methods=['get'])
def members(self, request, uuid=None):
org = self.get_object()
memberships = org.memberships.all()
serializer = OrganizationMembershipSerializer(memberships, many=True)
return Response(serializer.data)
@action(detail=True, methods=['patch'], url_path='members/(?P<user_id>[^/.]+)')
def update_member(self, request, uuid=None, user_id=None):
org = self.get_object()
membership = OrganizationMembership.objects.filter(
organization=org,
user=request.user,
role=OrganizationMembership.Role.EMPLOYER
).first()
if not membership:
return Response(
{"error": "Only employers can update member roles"},
status=status.HTTP_403_FORBIDDEN
)
target_membership = get_object_or_404(OrganizationMembership, organization=org, user_id=user_id)
serializer = OrganizationMembershipSerializer(target_membership, data=request.data, partial=True)
if serializer.is_valid():
serializer.save()
return Response(serializer.data)
return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
@action(detail=True, methods=['delete'], url_path='members/(?P<user_id>[^/.]+)')
def remove_member(self, request, uuid=None, user_id=None):
org = self.get_object()
membership = OrganizationMembership.objects.filter(
organization=org,
user=request.user,
role=OrganizationMembership.Role.EMPLOYER
).first()
if not membership:
return Response(
{"error": "Only employers can remove members"},
status=status.HTTP_403_FORBIDDEN
)
target_membership = get_object_or_404(OrganizationMembership, organization=org, user_id=user_id)
if target_membership.user == org.owner:
return Response(
{"error": "Cannot remove the organization owner"},
status=status.HTTP_400_BAD_REQUEST
)
target_membership.delete()
return Response(status=status.HTTP_204_NO_CONTENT)
@action(detail=True, methods=['get', 'post'])
def invites(self, request, uuid=None):
org = self.get_object()
if request.method == 'GET':
tokens = org.invite_tokens.filter(is_active=True, used_by__isnull=True)
serializer = InviteTokenSerializer(tokens, many=True, context={'request': request})
return Response(serializer.data)
elif request.method == 'POST':
membership = OrganizationMembership.objects.filter(
organization=org,
user=request.user,
role=OrganizationMembership.Role.EMPLOYER
).first()
if not membership:
return Response(
{"error": "Only employers can create invites"},
status=status.HTTP_403_FORBIDDEN
)
token = InviteToken.objects.create(
organization=org,
created_by=request.user
)
serializer = InviteTokenSerializer(token, context={'request': request})
return Response(serializer.data, status=status.HTTP_201_CREATED)
@action(detail=True, methods=['delete'], url_path='invites/(?P<token>[^/.]+)')
def revoke_invite(self, request, uuid=None, token=None):
org = self.get_object()
membership = OrganizationMembership.objects.filter(
organization=org,
user=request.user,
role=OrganizationMembership.Role.EMPLOYER
).first()
if not membership:
return Response(
{"error": "Only employers can revoke invites"},
status=status.HTTP_403_FORBIDDEN
)
invite = get_object_or_404(InviteToken, organization=org, token=token)
invite.is_active = False
invite.save()
return Response(status=status.HTTP_204_NO_CONTENT)
@action(detail=True, methods=['get'])
def domains(self, request, uuid=None):
org = self.get_object()
domains = org.domains.all()
serializer = DomainSerializer(domains, many=True)
return Response(serializer.data)
@action(detail=True, methods=['get'], url_path='domains/(?P<domain_id>[^/.]+)/members')
def domain_members(self, request, uuid=None, domain_id=None):
org = self.get_object()
domain = get_object_or_404(Domain, organization=org, id=domain_id)
memberships = domain.memberships.all()
serializer = DomainMembershipSerializer(memberships, many=True)
return Response(serializer.data)
@action(detail=True, methods=['post'], url_path='domains/(?P<domain_id>[^/.]+)/members')
def add_domain_member(self, request, uuid=None, domain_id=None):
org = self.get_object()
domain = get_object_or_404(Domain, organization=org, id=domain_id)
user_id = request.data.get('user_id')
org_membership = OrganizationMembership.objects.filter(
organization=org,
user_id=user_id
).first()
if not org_membership:
return Response(
{"error": "User must be a member of the organization first"},
status=status.HTTP_400_BAD_REQUEST
)
domain_membership, created = DomainMembership.objects.get_or_create(
domain=domain,
user_id=user_id
)
serializer = DomainMembershipSerializer(domain_membership)
return Response(serializer.data, status=status.HTTP_201_CREATED if created else status.HTTP_200_OK)
class InviteViewSet(ModelViewSet):
queryset = InviteToken.objects.all()
serializer_class = InviteTokenSerializer
permission_classes = [IsAuthenticated]
lookup_field = 'token'
http_method_names = ['get', 'post']
def get_queryset(self):
return InviteToken.objects.filter(is_active=True, used_by__isnull=True)
@action(detail=True, methods=['post'])
def accept(self, request, token=None):
invite = self.get_object()
if not invite.is_valid():
return Response(
{"error": "This invite is no longer valid"},
status=status.HTTP_400_BAD_REQUEST
)
membership, created = OrganizationMembership.objects.get_or_create(
organization=invite.organization,
user=request.user,
defaults={'role': OrganizationMembership.Role.EMPLOYEE}
)
if created:
invite.used_by = request.user
invite.used_at = timezone.now()
invite.is_active = False
invite.save()
serializer = OrganizationSerializer(invite.organization)
return Response(serializer.data, status=status.HTTP_201_CREATED if created else status.HTTP_200_OK)
class DomainViewSet(ModelViewSet):
queryset = Domain.objects.all()
serializer_class = DomainSerializer
permission_classes = [IsAuthenticatedOrReadOnly]
lookup_field = 'uuid'
class OrganisationViewSet(ModelViewSet):
queryset = Organisation.objects.all()
serializer_class = OrganisationSerializer
permission_classes = [IsAuthenticatedOrReadOnly]
lookup_field = 'uuid'
def get_queryset(self):
user = self.request.user
if user.is_authenticated:
return Domain.objects.filter(
organization__memberships__user=user
).distinct()
return Domain.objects.none()
class DatasetViewSet(ModelViewSet):
queryset = Dataset.objects.all()
serializer_class = DatasetSerializer
permission_classes = [IsAuthenticatedOrReadOnly]
lookup_field = 'uuid'

BIN
config/__pycache__/__init__.cpython-313.pyc
View file

Binary file not shown.

BIN
config/__pycache__/settings.cpython-313.pyc
View file

Binary file not shown.

15
config/api.py
View file

@ -1,15 +1,16 @@
from rest_framework.routers import DefaultRouter
from apps.domains.viewsets import DomainViewSet, OrganisationViewSet, DatasetViewSet
from apps.domains.viewsets import DomainViewSet, OrganizationViewSet, DatasetViewSet, InviteViewSet
from apps.users.viewsets import UserViewSet
from apps.agents.viewsets import AgentViewSet, AgentExecutionViewSet
router = DefaultRouter()
router.register(r'domain', DomainViewSet, basename = 'domain')
router.register(r'organisation', OrganisationViewSet, basename = 'organisation')
router.register(r'dataset', DatasetViewSet, basename = 'dataset')
router.register(r'user', UserViewSet, basename = 'user')
router.register(r'agent', AgentViewSet, basename = 'agent')
router.register(r'agent-execution', AgentExecutionViewSet, basename = 'agent-execution')
router.register(r'organization', OrganizationViewSet, basename='organization')
router.register(r'invite', InviteViewSet, basename='invite')
router.register(r'domain', DomainViewSet, basename='domain')
router.register(r'dataset', DatasetViewSet, basename='dataset')
router.register(r'user', UserViewSet, basename='user')
router.register(r'agent', AgentViewSet, basename='agent')
router.register(r'agent-execution', AgentExecutionViewSet, basename='agent-execution')
urlpatterns = router.urls

360
src/app/App.vue
View file

@ -3,17 +3,18 @@ import { computed, onMounted } from 'vue';
import { Layout, Menu, Button, Space, Typography } from 'ant-design-vue';
import type { MenuProps } from 'ant-design-vue';
import {
HomeOutlined,
InfoCircleOutlined,
RocketOutlined,
ReadOutlined,
TeamOutlined,
RobotOutlined,
BulbOutlined,
AppstoreOutlined,
DashboardOutlined,
LoginOutlined,
UserAddOutlined,
HomeOutlined,
InfoCircleOutlined,
RocketOutlined,
ReadOutlined,
TeamOutlined,
RobotOutlined,
BulbOutlined,
AppstoreOutlined,
DashboardOutlined,
LoginOutlined,
UserAddOutlined,
BuildOutlined,
} from '@ant-design/icons-vue';
import { useRoute, useRouter } from 'vue-router';
import { useAuthStore } from '../stores/authStore';
@ -23,193 +24,206 @@ const route = useRoute();
const authStore = useAuthStore();
const navItems = [
{
key: '/',
label: 'Home',
icon: HomeOutlined,
path: '/',
},
{
key: '/about',
label: 'About',
icon: InfoCircleOutlined,
path: '/about',
},
{
key: '/onboarding',
label: 'Onboarding',
icon: RocketOutlined,
path: '/onboarding',
},
{
key: '/training',
label: 'Training',
icon: ReadOutlined,
path: '/training',
},
{
key: '/roles',
label: 'Roles',
icon: TeamOutlined,
path: '/roles',
roles: ['manager', 'admin'],
},
{
key: '/agents',
label: 'Agents',
icon: RobotOutlined,
path: '/agents',
roles: ['manager', 'admin'],
},
{
key: '/assessments',
label: 'Assessments',
icon: BulbOutlined,
path: '/assessments',
},
{
key: '/resources',
label: 'Resources',
icon: AppstoreOutlined,
path: '/resources',
},
{
key: '/progress',
label: 'Progress',
icon: DashboardOutlined,
path: '/progress',
},
{
key: '/',
label: 'Home',
icon: HomeOutlined,
path: '/',
},
{
key: '/about',
label: 'About',
icon: InfoCircleOutlined,
path: '/about',
},
{
key: '/onboarding',
label: 'Onboarding',
icon: RocketOutlined,
path: '/onboarding',
},
{
key: '/training',
label: 'Training',
icon: ReadOutlined,
path: '/training',
},
{
key: '/roles',
label: 'Roles',
icon: TeamOutlined,
path: '/roles',
roles: ['manager', 'admin'],
},
{
key: '/agents',
label: 'Agents',
icon: RobotOutlined,
path: '/agents',
roles: ['manager', 'admin'],
},
{
key: '/assessments',
label: 'Assessments',
icon: BulbOutlined,
path: '/assessments',
},
{
key: '/resources',
label: 'Resources',
icon: AppstoreOutlined,
path: '/resources',
},
{
key: '/progress',
label: 'Progress',
icon: DashboardOutlined,
path: '/progress',
},
{
key: '/organizations',
label: 'Organizations',
icon: BuildOutlined,
path: '/organizations',
},
];
const visibleNavItems = computed(() =>
navItems.filter((item) =>
item.roles ? authStore.hasRole(item.roles) : true
)
navItems.filter((item) =>
item.roles ? authStore.hasRole(item.roles) : true
)
);
const selectedKeys = computed(() => {
const match = visibleNavItems.value.find((item) =>
route.path.startsWith(item.key)
);
return match ? [match.key] : [];
const match = visibleNavItems.value.find((item) => {
if (item.key === '/') return route.path === '/';
return route.path.startsWith(item.key);
});
return match ? [match.key] : [];
});
const onSelect: MenuProps['onSelect'] = ({ key }) => {
const item = visibleNavItems.value.find((n) => n.key === key);
if (item) router.push(item.path);
const item = visibleNavItems.value.find((n) => n.key === key);
if (item) {
if (route.path !== item.path) {
router.push(item.path);
}
}
};
const handleLogout = async () => {
await authStore.logout();
router.push('/');
await authStore.logout();
router.push('/');
};
onMounted(() => {
authStore.fetchSession();
authStore.fetchSession();
});
</script>
<template>
<Layout class="shell">
<Layout.Header class="shell-header">
<div class="brand" @click="router.push('/')">Dynavera</div>
<Menu
mode="horizontal"
theme="dark"
:selectedKeys="selectedKeys"
class="shell-menu"
@select="onSelect"
>
<Menu.Item v-for="item in visibleNavItems" :key="item.key">
<Space size="small">
<component :is="item.icon" />
<span>{{ item.label }}</span>
</Space>
</Menu.Item>
</Menu>
<Space>
<template v-if="authStore.isAuthenticated">
<Typography.Text class="user-chip" strong>
{{ authStore.displayName || 'Account' }}
</Typography.Text>
<Button
ghost
:loading="authStore.loading"
@click="handleLogout"
>
Logout
</Button>
</template>
<template v-else>
<Button ghost @click="router.push('/login')">
<LoginOutlined /> Login
</Button>
<Button type="primary" @click="router.push('/register')">
<UserAddOutlined /> Register
</Button>
</template>
</Space>
</Layout.Header>
<Layout class="shell">
<Layout.Header class="shell-header">
<div class="brand" @click="route.path !== '/' && router.push('/')">
Dynavera
</div>
<Menu
mode="horizontal"
theme="dark"
:selectedKeys="selectedKeys"
class="shell-menu"
@select="onSelect"
>
<Menu.Item v-for="item in visibleNavItems" :key="item.key">
<Space size="small">
<component :is="item.icon" />
<span>{{ item.label }}</span>
</Space>
</Menu.Item>
</Menu>
<Space>
<template v-if="authStore.isAuthenticated">
<Typography.Text class="user-chip" strong>
{{ authStore.displayName || 'Account' }}
</Typography.Text>
<Button
ghost
:loading="authStore.loading"
@click="handleLogout"
>
Logout
</Button>
</template>
<template v-else>
<Button ghost @click="router.push('/login')">
<LoginOutlined /> Login
</Button>
<Button type="primary" @click="router.push('/register')">
<UserAddOutlined /> Register
</Button>
</template>
</Space>
</Layout.Header>
<Layout class="shell-body">
<Layout.Content class="shell-content">
<router-view />
</Layout.Content>
<Layout.Footer class="shell-footer">
<Typography.Text type="secondary">
<strong>Project Disclaimer:</strong> This is a
proof-of-concept demo project for educational purposes. All
testimonials, statistics, and company names are fictional
placeholders.
</Typography.Text>
</Layout.Footer>
</Layout>
</Layout>
<Layout class="shell-body">
<Layout.Content class="shell-content">
<router-view />
</Layout.Content>
<Layout.Footer class="shell-footer">
<Typography.Text type="secondary">
<strong>Project Disclaimer:</strong> This is a
proof-of-concept demo project for educational purposes. All
testimonials, statistics, and company names are fictional
placeholders.
</Typography.Text>
</Layout.Footer>
</Layout>
</Layout>
</template>
<style scoped>
.shell {
min-height: 100vh;
background: #0b1220;
min-height: 100vh;
background: #0b1220;
}
.shell-header {
display: flex;
align-items: center;
gap: 1rem;
padding: 0 1.25rem;
background: #0f172a;
display: flex;
align-items: center;
gap: 1rem;
padding: 0 1.25rem;
background: #0f172a;
}
.brand {
color: #e5e7eb;
font-weight: 700;
cursor: pointer;
font-size: 1.05rem;
color: #e5e7eb;
font-weight: 700;
cursor: pointer;
font-size: 1.05rem;
}
.shell-menu {
flex: 1;
background: transparent;
border-bottom: none;
flex: 1;
background: transparent;
border-bottom: none;
}
.shell-body {
background: #0b1220;
min-height: calc(100vh - 64px);
display: flex;
flex-direction: column;
background: #0b1220;
min-height: calc(100vh - 64px);
display: flex;
flex-direction: column;
}
.shell-content {
padding: 24px;
flex: 1;
min-height: calc(100vh - 64px - 64px);
padding: 24px;
flex: 1;
min-height: calc(100vh - 64px - 64px);
}
.shell-footer {
text-align: center;
background: #0f172a;
text-align: center;
background: #0f172a;
}
:deep(.ant-menu-dark) {
background: transparent;
background: transparent;
}
:deep(.ant-menu-dark .ant-menu-item-selected) {
background: transparent !important;
background: transparent !important;
}
:deep(.ant-typography),
:deep(.ant-typography p),
@ -221,41 +235,41 @@ onMounted(() => {
:deep(.ant-statistic-content),
:deep(.ant-card-meta-title),
:deep(.ant-card-meta-description) {
color: #e5e7eb;
color: #e5e7eb;
}
:deep(.ant-typography-secondary) {
color: #cbd5e1 !important;
color: #cbd5e1 !important;
}
:deep(.ant-form-item-label > label) {
color: #e5e7eb;
color: #e5e7eb;
}
:deep(.ant-input),
:deep(.ant-select-selector),
:deep(.ant-select-selection-item),
:deep(.ant-picker-input input) {
background: #111827;
color: #e5e7eb;
border-color: #334155;
background: #111827;
color: #e5e7eb;
border-color: #334155;
}
:deep(.ant-input::placeholder),
:deep(.ant-select-selection-placeholder),
:deep(.ant-picker-input input::placeholder) {
color: #9ca3af;
color: #9ca3af;
}
:deep(.ant-card) {
background: #0f172a;
border-color: #1f2937;
background: #0f172a;
border-color: #1f2937;
}
:deep(.ant-btn:not(.ant-btn-primary)) {
color: #e5e7eb;
border-color: #334155;
background: #111827;
color: #e5e7eb;
border-color: #334155;
background: #111827;
}
:deep(.ant-btn-primary) {
background: linear-gradient(90deg, #6366f1, #8b5cf6);
border: none;
background: linear-gradient(90deg, #6366f1, #8b5cf6);
border: none;
}
.user-chip {
color: #e5e7eb;
color: #e5e7eb;
}
</style>

18
src/router/index.ts
View file

@ -75,6 +75,24 @@ const router = createRouter({
component: () => import('../views/Resources.vue'),
meta: { requiresAuth: true },
},
{
path: '/organizations/:id',
name: 'organization-view',
component: () => import('../views/OrganizationView.vue'),
meta: { requiresAuth: true },
},
{
path: '/organizations/:id/manage',
name: 'organization-manage',
component: () => import('../views/OrganizationManage.vue'),
meta: { requiresAuth: true },
},
{
path: '/invite/:token',
name: 'invite-accept',
component: () => import('../views/InviteAccept.vue'),
meta: { requiresAuth: true },
},
],
});

574
src/views/AgentDetail.vue
View file

@ -2,15 +2,15 @@
import { ref, onMounted, onUnmounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import {
Card,
Typography,
Button,
List,
Space,
Spin,
Input,
message,
Tag,
Card,
Typography,
Button,
List,
Space,
Spin,
Input,
message,
Tag,
} from 'ant-design-vue';
import { useAgentStore } from '../stores/agentStore';
import { apiClient, isAxiosError } from '../lib/api';
@ -25,387 +25,387 @@ const agentId = route.params.id as string;
console.log('Agent ID:', agentId);
if (!agentId) {
console.error('ERROR: No agent ID in route params');
console.error('ERROR: No agent ID in route params');
}
const agent = ref<Record<string, unknown>>({
id: agentId,
name: 'Loading...',
description: '',
status: 'idle',
id: agentId,
name: 'Loading...',
description: '',
status: 'idle',
});
console.log('Initial agent state:', agent.value);
const queryInput = ref('');
const isRunning = computed(() => {
console.log(
'isRunning computed - executionStatus:',
agentStore.executionStatus
);
return agentStore.executionStatus === 'running';
console.log(
'isRunning computed - executionStatus:',
agentStore.executionStatus
);
return agentStore.executionStatus === 'running';
});
const isConnected = computed(() => {
console.log('isConnected computed - isConnected:', agentStore.isConnected);
return agentStore.isConnected ?? false;
console.log('isConnected computed - isConnected:', agentStore.isConnected);
return agentStore.isConnected ?? false;
});
const agentResponse = computed(() => {
const completedEvent = agentStore.eventLog?.find(
(event) => event.type === 'completed'
);
if (completedEvent?.content && typeof completedEvent.content === 'object') {
const output = completedEvent.content as Record<string, unknown>;
return (output.response as string) || null;
}
return null;
const completedEvent = agentStore.eventLog?.find(
(event) => event.type === 'completed'
);
if (completedEvent?.content && typeof completedEvent.content === 'object') {
const output = completedEvent.content as Record<string, unknown>;
return (output.response as string) || null;
}
return null;
});
const statusColor = (status: string) => {
const colors: Record<string, string> = {
idle: 'default',
running: 'processing',
completed: 'success',
failed: 'error',
stopped: 'warning',
};
return colors[status] || 'default';
const colors: Record<string, string> = {
idle: 'default',
running: 'processing',
completed: 'success',
failed: 'error',
stopped: 'warning',
};
return colors[status] || 'default';
};
const fetchAgent = async () => {
console.log('Fetching agent details for ID:', agentId);
try {
const response = await apiClient.get<Record<string, unknown>>(
`/api/agent/${agentId}/`
);
agent.value = response.data;
console.log('Agent fetched successfully:', agent.value);
} catch (error) {
console.error('ERROR - Failed to fetch agent:', error);
if (isAxiosError(error)) {
console.error('Axios error details:', {
status: error.response?.status,
data: error.response?.data,
message: error.message,
});
}
message.error('Failed to load agent details');
}
console.log('Fetching agent details for ID:', agentId);
try {
const response = await apiClient.get<Record<string, unknown>>(
`/api/agent/${agentId}/`
);
agent.value = response.data;
console.log('Agent fetched successfully:', agent.value);
} catch (error) {
console.error('ERROR - Failed to fetch agent:', error);
if (isAxiosError(error)) {
console.error('Axios error details:', {
status: error.response?.status,
data: error.response?.data,
message: error.message,
});
}
message.error('Failed to load agent details');
}
};
const startAgent = () => {
console.log('Starting agent execution');
console.log('Starting agent execution');
if (!agentStore.isConnected) {
console.warn('WARNING: WebSocket not connected');
console.log('Connection state:', {
isConnected: agentStore.isConnected,
});
message.error('WebSocket not connected');
return;
}
if (!agentStore.isConnected) {
console.warn('WARNING: WebSocket not connected');
console.log('Connection state:', {
isConnected: agentStore.isConnected,
});
message.error('WebSocket not connected');
return;
}
if (!queryInput.value.trim()) {
message.error('Please enter a query');
return;
}
if (!queryInput.value.trim()) {
message.error('Please enter a query');
return;
}
try {
const data = {
query: queryInput.value.trim(),
};
console.log('Sending data:', data);
try {
const data = {
query: queryInput.value.trim(),
};
console.log('Sending data:', data);
console.log('Calling startAgent on store');
agentStore.startAgent(data);
console.log('Agent execution initiated');
message.success('Agent execution started');
} catch (error) {
console.error('ERROR - Failed to start agent:', error);
message.error('Failed to start agent');
}
console.log('Calling startAgent on store');
agentStore.startAgent(data);
console.log('Agent execution initiated');
message.success('Agent execution started');
} catch (error) {
console.error('ERROR - Failed to start agent:', error);
message.error('Failed to start agent');
}
};
const stopAgent = () => {
console.log('Stopping agent execution');
console.log('Stopping agent execution');
try {
console.log('Calling stopAgent on store');
agentStore.stopAgent();
console.log('Agent stop signal sent');
message.success('Agent stop requested');
} catch (error) {
console.error('ERROR - Failed to stop agent:', error);
}
try {
console.log('Calling stopAgent on store');
agentStore.stopAgent();
console.log('Agent stop signal sent');
message.success('Agent stop requested');
} catch (error) {
console.error('ERROR - Failed to stop agent:', error);
}
};
onMounted(() => {
console.log('Component mounted');
console.log('Lifecycle: onMounted - starting initialization');
console.log('Component mounted');
console.log('Lifecycle: onMounted - starting initialization');
fetchAgent();
fetchAgent();
console.log('Attempting WebSocket connection for agent:', agentId);
try {
agentStore.connect(agentId);
console.log('WebSocket connection initiated');
} catch (error) {
console.error('ERROR - Failed to connect WebSocket:', error);
}
console.log('Attempting WebSocket connection for agent:', agentId);
try {
agentStore.connect(agentId);
console.log('WebSocket connection initiated');
} catch (error) {
console.error('ERROR - Failed to connect WebSocket:', error);
}
});
onUnmounted(() => {
console.log('Component unmounted');
console.log('Lifecycle: onUnmounted - cleaning up');
console.log('Component unmounted');
console.log('Lifecycle: onUnmounted - cleaning up');
try {
console.log('Disconnecting WebSocket');
agentStore.disconnect();
console.log('WebSocket disconnected successfully');
} catch (error) {
console.error('ERROR - Failed to disconnect WebSocket:', error);
}
try {
console.log('Disconnecting WebSocket');
agentStore.disconnect();
console.log('WebSocket disconnected successfully');
} catch (error) {
console.error('ERROR - Failed to disconnect WebSocket:', error);
}
});
</script>
<template>
<div class="page">
<Card class="panel" :bordered="false">
<div class="header">
<Typography.Title :level="2">{{ agent.name }}</Typography.Title>
<Tag
:color="
statusColor(
String(agentStore.executionStatus || 'idle')
)
"
>
{{
(agentStore.executionStatus || 'idle')
.toString()
.toUpperCase()
}}
</Tag>
</div>
<div class="page">
<Card class="panel" :bordered="false">
<div class="header">
<Typography.Title :level="2">{{ agent.name }}</Typography.Title>
<Tag
:color="
statusColor(
String(agentStore.executionStatus || 'idle')
)
"
>
{{
(agentStore.executionStatus || 'idle')
.toString()
.toUpperCase()
}}
</Tag>
</div>
<Typography.Paragraph type="secondary">{{
agent.description || 'No description available'
}}</Typography.Paragraph>
<Typography.Paragraph type="secondary">{{
agent.description || 'No description available'
}}</Typography.Paragraph>
<div class="connection-status">
<span>WebSocket Status:</span>
<Tag :color="agentStore.isConnected ? 'green' : 'red'">
{{ agentStore.isConnected ? 'CONNECTED' : 'DISCONNECTED' }}
</Tag>
</div>
<div class="connection-status">
<span>WebSocket Status:</span>
<Tag :color="agentStore.isConnected ? 'green' : 'red'">
{{ agentStore.isConnected ? 'CONNECTED' : 'DISCONNECTED' }}
</Tag>
</div>
<Typography.Title :level="4" class="section-title"
>Execution</Typography.Title
>
<Typography.Title :level="4" class="section-title"
>Execution</Typography.Title
>
<div class="execution-controls">
<Space direction="vertical" style="width: 100%">
<div>
<Typography.Text>Query:</Typography.Text>
<Input.TextArea
v-model:value="queryInput"
:disabled="isRunning"
placeholder="Enter your query here..."
:rows="4"
/>
</div>
<div class="execution-controls">
<Space direction="vertical" style="width: 100%">
<div>
<Typography.Text>Query:</Typography.Text>
<Input.TextArea
v-model:value="queryInput"
:disabled="isRunning"
placeholder="Enter your query here..."
:rows="4"
/>
</div>
<Space>
<Button
type="primary"
:disabled="isRunning || !isConnected"
@click="startAgent"
>
Run Agent
</Button>
<Button
danger
:disabled="!isRunning"
@click="stopAgent"
>
Stop Agent
</Button>
</Space>
</Space>
</div>
<Space>
<Button
type="primary"
:disabled="isRunning || !isConnected"
@click="startAgent"
>
Run Agent
</Button>
<Button
danger
:disabled="!isRunning"
@click="stopAgent"
>
Stop Agent
</Button>
</Space>
</Space>
</div>
<Typography.Title :level="4" class="section-title"
>Execution Log</Typography.Title
>
<Typography.Title :level="4" class="section-title"
>Execution Log</Typography.Title
>
<Spin :spinning="isRunning" tip="Agent running...">
<div class="log-container">
<List
v-if="(agentStore.eventLog?.length ?? 0) > 0"
:data-source="agentStore.eventLog || []"
:bordered="false"
>
<template #renderItem="{ item }">
<List.Item class="log-item">
<div class="log-entry">
<Tag class="log-type">{{ item.type }}</Tag>
<span class="log-time">{{
item.timestamp.toLocaleTimeString()
}}</span>
<div
v-if="item.message"
class="log-message"
>
{{ item.message }}
</div>
<div
v-if="
item.content &&
typeof item.content === 'object'
"
class="log-content"
>
<pre>{{
JSON.stringify(
item.content,
null,
2
)
}}</pre>
</div>
<div
v-else-if="item.content"
class="log-content"
>
{{ item.content }}
</div>
</div>
</List.Item>
</template>
</List>
<Typography.Paragraph v-else type="secondary">
No events yet. Start the agent to see execution logs.
</Typography.Paragraph>
</div>
</Spin>
<Spin :spinning="isRunning" tip="Agent running...">
<div class="log-container">
<List
v-if="(agentStore.eventLog?.length ?? 0) > 0"
:data-source="agentStore.eventLog || []"
:bordered="false"
>
<template #renderItem="{ item }">
<List.Item class="log-item">
<div class="log-entry">
<Tag class="log-type">{{ item.type }}</Tag>
<span class="log-time">{{
item.timestamp.toLocaleTimeString()
}}</span>
<div
v-if="item.message"
class="log-message"
>
{{ item.message }}
</div>
<div
v-if="
item.content &&
typeof item.content === 'object'
"
class="log-content"
>
<pre>{{
JSON.stringify(
item.content,
null,
2
)
}}</pre>
</div>
<div
v-else-if="item.content"
class="log-content"
>
{{ item.content }}
</div>
</div>
</List.Item>
</template>
</List>
<Typography.Paragraph v-else type="secondary">
No events yet. Start the agent to see execution logs.
</Typography.Paragraph>
</div>
</Spin>
<div v-if="agentResponse" class="response-section">
<Typography.Title :level="4" class="section-title"
>Response</Typography.Title
>
<Card class="response-card" :bordered="false">
<div class="response-content">
{{ agentResponse }}
</div>
</Card>
</div>
</Card>
</div>
<div v-if="agentResponse" class="response-section">
<Typography.Title :level="4" class="section-title"
>Response</Typography.Title
>
<Card class="response-card" :bordered="false">
<div class="response-content">
{{ agentResponse }}
</div>
</Card>
</div>
</Card>
</div>
</template>
<style scoped>
.page {
max-width: 1200px;
margin: 0 auto;
padding: 1rem;
max-width: 1200px;
margin: 0 auto;
padding: 1rem;
}
.panel {
background: #0f172a;
border: 1px solid #1f2937;
color: #e5e7eb;
background: #0f172a;
border: 1px solid #1f2937;
color: #e5e7eb;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.section-title {
margin-top: 2rem !important;
margin-bottom: 1rem !important;
margin-top: 2rem !important;
margin-bottom: 1rem !important;
}
.connection-status {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 1rem 0;
padding: 0.5rem;
background: #1f2937;
border-radius: 4px;
display: flex;
align-items: center;
gap: 0.5rem;
margin: 1rem 0;
padding: 0.5rem;
background: #1f2937;
border-radius: 4px;
}
.execution-controls {
background: #1f2937;
padding: 1rem;
border-radius: 4px;
margin: 1rem 0;
background: #1f2937;
padding: 1rem;
border-radius: 4px;
margin: 1rem 0;
}
.log-container {
background: #1f2937;
border-radius: 4px;
max-height: 500px;
overflow-y: auto;
background: #1f2937;
border-radius: 4px;
max-height: 500px;
overflow-y: auto;
}
.log-item {
border-bottom: 1px solid #374151 !important;
padding: 0.75rem !important;
border-bottom: 1px solid #374151 !important;
padding: 0.75rem !important;
}
.log-entry {
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 100%;
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 100%;
}
.log-type {
width: fit-content;
width: fit-content;
}
.log-time {
font-size: 0.75rem;
color: #9ca3af;
font-size: 0.75rem;
color: #9ca3af;
}
.log-message {
color: #e5e7eb;
font-size: 0.9rem;
color: #e5e7eb;
font-size: 0.9rem;
}
.log-content {
background: #111827;
padding: 0.5rem;
border-radius: 3px;
overflow-x: auto;
background: #111827;
padding: 0.5rem;
border-radius: 3px;
overflow-x: auto;
}
.log-content pre {
margin: 0;
font-size: 0.8rem;
color: #d1d5db;
margin: 0;
font-size: 0.8rem;
color: #d1d5db;
}
.response-section {
margin-top: 2rem;
margin-top: 2rem;
}
.response-card {
background: #1f2937;
border: 1px solid #374151;
background: #1f2937;
border: 1px solid #374151;
}
.response-content {
color: #e5e7eb;
font-size: 1rem;
line-height: 1.6;
white-space: pre-wrap;
word-wrap: break-word;
padding: 0.5rem;
color: #e5e7eb;
font-size: 1rem;
line-height: 1.6;
white-space: pre-wrap;
word-wrap: break-word;
padding: 0.5rem;
}
</style>

132
src/views/Agents.vue
View file

@ -4,11 +4,11 @@ import { List, Typography, Button, Card, Spin, message } from 'ant-design-vue';
import { apiClient } from '../lib/api';
interface Agent {
uuid: string;
id: string;
name: string;
description: string;
status: string;
uuid: string;
id: string;
name: string;
description: string;
status: string;
}
const agents = ref<Agent[]>([]);
@ -16,83 +16,83 @@ const loading = ref(false);
const loadError = ref(false);
const fetchAgents = async () => {
loading.value = true;
loadError.value = false;
try {
const response = await apiClient.get<Agent[]>('/api/agent/');
agents.value = Array.isArray(response.data) ? response.data : [];
} catch (error) {
console.error('Failed to fetch agents:', error);
message.error('Failed to load agents');
agents.value = [];
loadError.value = true;
} finally {
loading.value = false;
}
loading.value = true;
loadError.value = false;
try {
const response = await apiClient.get<Agent[]>('/api/agent/');
agents.value = Array.isArray(response.data) ? response.data : [];
} catch (error) {
console.error('Failed to fetch agents:', error);
message.error('Failed to load agents');
agents.value = [];
loadError.value = true;
} finally {
loading.value = false;
}
};
onMounted(() => {
fetchAgents();
fetchAgents();
});
</script>
<template>
<div class="page">
<Typography.Title :level="2">Agents</Typography.Title>
<Typography.Paragraph type="secondary"
>Manage and inspect the available AI agents.</Typography.Paragraph
>
<div class="page">
<Typography.Title :level="2">Agents</Typography.Title>
<Typography.Paragraph type="secondary"
>Manage and inspect the available AI agents.</Typography.Paragraph
>
<Card class="panel" :bordered="false">
<Spin :spinning="loading" tip="Loading agents...">
<div v-if="loadError" class="empty">
<Typography.Paragraph type="danger">
Failed to load agents.
</Typography.Paragraph>
</div>
<div v-else-if="!loading && agents.length === 0" class="empty">
<Typography.Paragraph type="secondary">
No agents found.
</Typography.Paragraph>
</div>
<List
v-else
:data-source="agents"
item-layout="horizontal"
:bordered="false"
>
<template #renderItem="{ item }">
<List.Item class="item">
<List.Item.Meta
:title="item.name"
:description="`${item.description} • Status: ${item.status}`"
/>
<RouterLink :to="`/agents/${item.uuid || item.id}`">
<Button type="primary" size="small"
>Open</Button
>
</RouterLink>
</List.Item>
</template>
</List>
</Spin>
</Card>
</div>
<Card class="panel" :bordered="false">
<Spin :spinning="loading" tip="Loading agents...">
<div v-if="loadError" class="empty">
<Typography.Paragraph type="danger">
Failed to load agents.
</Typography.Paragraph>
</div>
<div v-else-if="!loading && agents.length === 0" class="empty">
<Typography.Paragraph type="secondary">
No agents found.
</Typography.Paragraph>
</div>
<List
v-else
:data-source="agents"
item-layout="horizontal"
:bordered="false"
>
<template #renderItem="{ item }">
<List.Item class="item">
<List.Item.Meta
:title="item.name"
:description="`${item.description} • Status: ${item.status}`"
/>
<RouterLink :to="`/agents/${item.uuid || item.id}`">
<Button type="primary" size="small"
>Open</Button
>
</RouterLink>
</List.Item>
</template>
</List>
</Spin>
</Card>
</div>
</template>
<style scoped>
.page {
max-width: 900px;
margin: 0 auto;
padding: 1rem;
max-width: 900px;
margin: 0 auto;
padding: 1rem;
}
.panel {
background: #0f172a;
border: 1px solid #1f2937;
color: #e5e7eb;
background: #0f172a;
border: 1px solid #1f2937;
color: #e5e7eb;
}
.item :deep(.ant-list-item-meta-title),
.item :deep(.ant-list-item-meta-description) {
color: #e5e7eb;
color: #e5e7eb;
}
</style>

179
src/views/InviteAccept.vue Normal file
View file

@ -0,0 +1,179 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import {
Card,
Typography,
Button,
Spin,
message,
Result,
} from 'ant-design-vue';
import { apiClient, isAxiosError } from '../lib/api';
const route = useRoute();
const router = useRouter();
interface InviteToken {
id: number;
token: string;
organization: {
id: number;
uuid: string;
name: string;
description: string;
};
expires_at: string;
is_valid: boolean;
}
const token = route.params.token as string;
const invite = ref<InviteToken | null>(null);
const loading = ref(false);
const accepting = ref(false);
const accepted = ref(false);
const error = ref<string | null>(null);
const fetchInvite = async () => {
loading.value = true;
error.value = null;
try {
const response = await apiClient.get<InviteToken>(
`/api/invite/${token}/`
);
invite.value = response.data;
if (!response.data.is_valid) {
error.value = 'This invite is no longer valid or has expired.';
}
} catch (err) {
console.error('Failed to fetch invite:', err);
if (isAxiosError(err) && err.response?.status === 404) {
error.value = 'Invalid invite link.';
} else {
error.value = 'Failed to load invite details.';
}
} finally {
loading.value = false;
}
};
const acceptInvite = async () => {
accepting.value = true;
try {
await apiClient.post(`/api/invite/${token}/accept/`);
message.success('Successfully joined organization');
accepted.value = true;
setTimeout(() => {
router.push(`/organizations/${invite.value?.organization.uuid}`);
}, 2000);
} catch (err) {
console.error('Failed to accept invite:', err);
if (isAxiosError(err)) {
message.error(
err.response?.data?.error || 'Failed to accept invite'
);
}
} finally {
accepting.value = false;
}
};
onMounted(() => {
fetchInvite();
});
</script>
<template>
<div class="page">
<Spin :spinning="loading" tip="Loading invite...">
<Card class="panel" :bordered="false">
<div v-if="error">
<Result status="error" :title="error">
<template #extra>
<Button type="primary" @click="router.push('/')">
Go Home
</Button>
</template>
</Result>
</div>
<div v-else-if="accepted">
<Result
status="success"
title="Successfully Joined Organization"
sub-title="Redirecting to organization page..."
/>
</div>
<div v-else-if="invite" class="invite-content">
<Typography.Title :level="2">
Organization Invite
</Typography.Title>
<div class="org-info">
<Typography.Title :level="4">
{{ invite.organization.name }}
</Typography.Title>
<Typography.Paragraph>
{{
invite.organization.description ||
'No description provided'
}}
</Typography.Paragraph>
<Typography.Paragraph type="secondary">
Expires:
{{ new Date(invite.expires_at).toLocaleString() }}
</Typography.Paragraph>
</div>
<div class="actions">
<Typography.Paragraph>
You've been invited to join this organization. Click
accept to become a member.
</Typography.Paragraph>
<Button
type="primary"
size="large"
:loading="accepting"
@click="acceptInvite"
>
Accept Invite
</Button>
</div>
</div>
</Card>
</Spin>
</div>
</template>
<style scoped>
.page {
max-width: 800px;
margin: 0 auto;
padding: 2rem 1rem;
}
.panel {
background: #0f172a;
border: 1px solid #1f2937;
color: #e5e7eb;
}
.invite-content {
text-align: center;
padding: 2rem;
}
.org-info {
background: #1f2937;
border-radius: 8px;
padding: 1.5rem;
margin: 2rem 0;
}
.actions {
margin-top: 2rem;
}
</style>

124
src/views/OnboardingFlow.vue
View file

@ -3,85 +3,85 @@ import { ref } from 'vue';
import { Card, Typography, Timeline, Button, Space } from 'ant-design-vue';
const steps = ref([
{
id: 1,
title: 'Welcome & Orientation',
description: 'Intro to company, mission and tools.',
eta: 15,
},
{
id: 2,
title: 'Account Setup',
description: 'Set up accounts, access, and credentials.',
eta: 20,
},
{
id: 3,
title: 'Team Introductions',
description: 'Meet key stakeholders and team rituals.',
eta: 30,
},
{
id: 1,
title: 'Welcome & Orientation',
description: 'Intro to company, mission and tools.',
eta: 15,
},
{
id: 2,
title: 'Account Setup',
description: 'Set up accounts, access, and credentials.',
eta: 20,
},
{
id: 3,
title: 'Team Introductions',
description: 'Meet key stakeholders and team rituals.',
eta: 30,
},
]);
</script>
<template>
<div class="page">
<Card class="panel" :bordered="false">
<Typography.Title :level="2">Onboarding Flow</Typography.Title>
<Typography.Paragraph type="secondary">
Step-by-step AI-guided onboarding for new team members.
</Typography.Paragraph>
<div class="page">
<Card class="panel" :bordered="false">
<Typography.Title :level="2">Onboarding Flow</Typography.Title>
<Typography.Paragraph type="secondary">
Step-by-step AI-guided onboarding for new team members.
</Typography.Paragraph>
<Timeline mode="left" class="timeline">
<Timeline.Item
v-for="step in steps"
:key="step.id"
color="purple"
>
<Space direction="vertical" size="small">
<Typography.Title :level="4">{{
step.title
}}</Typography.Title>
<Typography.Text>{{
step.description
}}</Typography.Text>
<Typography.Text type="secondary"
>Est. time: {{ step.eta }} mins</Typography.Text
>
</Space>
</Timeline.Item>
</Timeline>
<Timeline mode="left" class="timeline">
<Timeline.Item
v-for="step in steps"
:key="step.id"
color="purple"
>
<Space direction="vertical" size="small">
<Typography.Title :level="4">{{
step.title
}}</Typography.Title>
<Typography.Text>{{
step.description
}}</Typography.Text>
<Typography.Text type="secondary"
>Est. time: {{ step.eta }} mins</Typography.Text
>
</Space>
</Timeline.Item>
</Timeline>
<Space class="actions" wrap>
<RouterLink to="/training"
><Button type="primary">Start Training</Button></RouterLink
>
<RouterLink to="/agents"
><Button ghost>View Agents</Button></RouterLink
>
</Space>
</Card>
</div>
<Space class="actions" wrap>
<RouterLink to="/training"
><Button type="primary">Start Training</Button></RouterLink
>
<RouterLink to="/agents"
><Button ghost>View Agents</Button></RouterLink
>
</Space>
</Card>
</div>
</template>
<style scoped>
.page {
max-width: 1100px;
margin: 0 auto;
padding: 1rem;
max-width: 1100px;
margin: 0 auto;
padding: 1rem;
}
.panel {
background: #0f172a;
border: 1px solid #1f2937;
color: #e5e7eb;
background: #0f172a;
border: 1px solid #1f2937;
color: #e5e7eb;
}
.timeline :deep(.ant-timeline-item-head) {
background: #8b5cf6;
background: #8b5cf6;
}
.timeline :deep(.ant-typography) {
color: #e5e7eb;
color: #e5e7eb;
}
.actions {
margin-top: 1rem;
margin-top: 1rem;
}
</style>

485
src/views/OrganizationManage.vue Normal file
View file

@ -0,0 +1,485 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import {
Card,
Typography,
Button,
List,
Space,
Spin,
Input,
message,
Tag,
Divider,
Modal,
Select,
Tabs,
} from 'ant-design-vue';
import { apiClient, isAxiosError } from '../lib/api';
const route = useRoute();
interface Organization {
id: number;
uuid: string;
name: string;
description: string;
owner: {
id: number;
full_name: string;
};
member_count: number;
domain_count: number;
}
interface Member {
id: number;
user: {
id: number;
full_name: string;
email_address: string;
};
role: string;
created_at: string;
}
interface InviteToken {
id: number;
token: string;
invite_url: string;
created_by: {
full_name: string;
};
expires_at: string;
is_valid: boolean;
}
interface Domain {
id: number;
uuid: string;
name: string;
description: string;
member_count: number;
}
const orgId = route.params.id as string;
const organization = ref<Organization | null>(null);
const members = ref<Member[]>([]);
const invites = ref<InviteToken[]>([]);
const domains = ref<Domain[]>([]);
const loading = ref(false);
const inviteModalVisible = ref(false);
const newInviteUrl = ref('');
const editingDescription = ref(false);
const newDescription = ref('');
const fetchOrganization = async () => {
loading.value = true;
try {
const response = await apiClient.get<Organization>(
`/api/organization/${orgId}/`
);
organization.value = response.data;
newDescription.value = response.data.description;
} catch (error) {
console.error('Failed to fetch organization:', error);
message.error('Failed to load organization details');
} finally {
loading.value = false;
}
};
const fetchMembers = async () => {
try {
const response = await apiClient.get<Member[]>(
`/api/organization/${orgId}/members/`
);
members.value = response.data;
} catch (error) {
console.error('Failed to fetch members:', error);
}
};
const fetchInvites = async () => {
try {
const response = await apiClient.get<InviteToken[]>(
`/api/organization/${orgId}/invites/`
);
invites.value = response.data;
} catch (error) {
console.error('Failed to fetch invites:', error);
}
};
const fetchDomains = async () => {
try {
const response = await apiClient.get<Domain[]>(
`/api/organization/${orgId}/domains/`
);
domains.value = response.data;
} catch (error) {
console.error('Failed to fetch domains:', error);
}
};
const createInvite = async () => {
try {
const response = await apiClient.post<InviteToken>(
`/api/organization/${orgId}/invites/`
);
newInviteUrl.value = response.data.invite_url;
inviteModalVisible.value = true;
fetchInvites();
} catch (error) {
console.error('Failed to create invite:', error);
message.error('Failed to create invite');
}
};
const copyInviteUrl = () => {
window.navigator.clipboard.writeText(newInviteUrl.value);
message.success('Invite URL copied to clipboard');
};
const copyUrl = (url: string) => {
window.navigator.clipboard.writeText(url);
message.success('Copied to clipboard');
};
const revokeInvite = async (token: string) => {
try {
await apiClient.delete(`/api/organization/${orgId}/invites/${token}/`);
message.success('Invite revoked');
fetchInvites();
} catch (error) {
console.error('Failed to revoke invite:', error);
message.error('Failed to revoke invite');
}
};
const updateMemberRole = async (userId: number, newRole: string) => {
try {
await apiClient.patch(`/api/organization/${orgId}/members/${userId}/`, {
role: newRole,
});
message.success('Member role updated');
fetchMembers();
} catch (error) {
console.error('Failed to update member role:', error);
if (isAxiosError(error)) {
message.error(
error.response?.data?.error || 'Failed to update member role'
);
}
}
};
const removeMember = async (userId: number) => {
try {
await apiClient.delete(`/api/organization/${orgId}/members/${userId}/`);
message.success('Member removed');
fetchMembers();
} catch (error) {
console.error('Failed to remove member:', error);
if (isAxiosError(error)) {
message.error(
error.response?.data?.error || 'Failed to remove member'
);
}
}
};
const saveDescription = async () => {
try {
await apiClient.patch(`/api/organization/${orgId}/`, {
description: newDescription.value,
});
message.success('Description updated');
editingDescription.value = false;
fetchOrganization();
} catch (error) {
console.error('Failed to update description:', error);
message.error('Failed to update description');
}
};
onMounted(() => {
fetchOrganization();
fetchMembers();
fetchInvites();
fetchDomains();
});
</script>
<template>
<div class="page">
<Spin :spinning="loading" tip="Loading organization...">
<Card v-if="organization" class="panel" :bordered="false">
<Typography.Title :level="2">
Manage {{ organization.name }}
</Typography.Title>
<Tabs>
<Tabs.TabPane key="details" tab="Details">
<div class="section">
<Typography.Title :level="4">
Description
</Typography.Title>
<div v-if="!editingDescription">
<Typography.Paragraph>
{{
organization.description ||
'No description provided'
}}
</Typography.Paragraph>
<Button
@click="editingDescription = true"
size="small"
>
Edit Description
</Button>
</div>
<div v-else>
<Input.TextArea
v-model:value="newDescription"
:rows="4"
placeholder="Enter organization description"
/>
<Space style="margin-top: 0.5rem">
<Button
type="primary"
@click="saveDescription"
>
Save
</Button>
<Button @click="editingDescription = false">
Cancel
</Button>
</Space>
</div>
</div>
</Tabs.TabPane>
<Tabs.TabPane key="members" tab="Members">
<div class="section">
<div class="section-header">
<Typography.Title :level="4">
Members ({{ members.length }})
</Typography.Title>
</div>
<List :data-source="members" :bordered="false">
<template #renderItem="{ item }">
<List.Item class="member-item">
<List.Item.Meta
:title="item.user.full_name"
:description="
item.user.email_address
"
/>
<Space>
<Select
:value="item.role"
style="width: 120px"
@change="
(value) =>
updateMemberRole(
item.user.id,
value
)
"
>
<Select.Option value="employee">
Employee
</Select.Option>
<Select.Option value="employer">
Employer
</Select.Option>
</Select>
<Button
v-if="
item.user.id !==
organization.owner.id
"
danger
size="small"
@click="
removeMember(item.user.id)
"
>
Remove
</Button>
<Tag v-else color="blue">Owner</Tag>
</Space>
</List.Item>
</template>
</List>
</div>
</Tabs.TabPane>
<Tabs.TabPane key="invites" tab="Invites">
<div class="section">
<div class="section-header">
<Typography.Title :level="4">
Invite Tokens
</Typography.Title>
<Button type="primary" @click="createInvite">
Create Invite
</Button>
</div>
<List
v-if="invites.length > 0"
:data-source="invites"
:bordered="false"
>
<template #renderItem="{ item }">
<List.Item class="invite-item">
<List.Item.Meta
:title="`Created by ${item.created_by.full_name}`"
:description="`Expires: ${new Date(
item.expires_at
).toLocaleDateString()}`"
/>
<Space>
<Tag
:color="
item.is_valid
? 'green'
: 'red'
"
>
{{
item.is_valid
? 'Valid'
: 'Expired'
}}
</Tag>
<Button
size="small"
@click="
copyUrl(item.invite_url)
"
>
Copy URL
</Button>
<Button
danger
size="small"
@click="
revokeInvite(item.token)
"
>
Revoke
</Button>
</Space>
</List.Item>
</template>
</List>
<Typography.Paragraph v-else type="secondary">
No active invites. Create one to invite new
members.
</Typography.Paragraph>
</div>
</Tabs.TabPane>
<Tabs.TabPane key="domains" tab="Domains">
<div class="section">
<Typography.Title :level="4">
Domains ({{ domains.length }})
</Typography.Title>
<List
v-if="domains.length > 0"
:data-source="domains"
:bordered="false"
>
<template #renderItem="{ item }">
<List.Item class="domain-item">
<List.Item.Meta
:title="item.name"
:description="
item.description ||
'No description'
"
/>
<Tag
>{{
item.member_count
}}
members</Tag
>
</List.Item>
</template>
</List>
<Typography.Paragraph v-else type="secondary">
No domains in this organization yet.
</Typography.Paragraph>
</div>
</Tabs.TabPane>
</Tabs>
</Card>
</Spin>
<Modal
v-model:open="inviteModalVisible"
title="Invite Created"
@ok="inviteModalVisible = false"
>
<div>
<Typography.Paragraph>
Share this URL with people you want to invite:
</Typography.Paragraph>
<Input
:value="newInviteUrl"
readonly
@click="copyInviteUrl"
style="cursor: pointer"
/>
<Button
type="primary"
block
style="margin-top: 1rem"
@click="copyInviteUrl"
>
Copy to Clipboard
</Button>
</div>
</Modal>
</div>
</template>
<style scoped>
.page {
max-width: 1200px;
margin: 0 auto;
padding: 1rem;
}
.panel {
background: #0f172a;
border: 1px solid #1f2937;
color: #e5e7eb;
}
.section {
margin: 2rem 0;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.member-item :deep(.ant-list-item-meta-title),
.member-item :deep(.ant-list-item-meta-description),
.invite-item :deep(.ant-list-item-meta-title),
.invite-item :deep(.ant-list-item-meta-description),
.domain-item :deep(.ant-list-item-meta-title),
.domain-item :deep(.ant-list-item-meta-description) {
color: #e5e7eb;
}
</style>

226
src/views/OrganizationView.vue Normal file
View file

@ -0,0 +1,226 @@
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import {
Card,
Typography,
Button,
List,
Space,
Spin,
message,
Tag,
Divider,
} from 'ant-design-vue';
import { apiClient, isAxiosError } from '../lib/api';
const route = useRoute();
const router = useRouter();
interface Organization {
id: number;
uuid: string;
name: string;
description: string;
owner: {
id: number;
full_name: string;
email_address: string;
};
member_count: number;
domain_count: number;
created_at: string;
}
interface Domain {
id: number;
uuid: string;
name: string;
description: string;
member_count: number;
}
interface DomainMembership {
id: number;
domain: {
id: number;
name: string;
};
}
const orgId = route.params.id as string;
const organization = ref<Organization | null>(null);
const domains = ref<Domain[]>([]);
const userDomains = ref<number[]>([]);
const loading = ref(false);
const isOwner = computed(() => {
return false;
});
const fetchOrganization = async () => {
loading.value = true;
try {
const response = await apiClient.get<Organization>(
`/api/organization/${orgId}/`
);
organization.value = response.data;
} catch (error) {
console.error('Failed to fetch organization:', error);
message.error('Failed to load organization details');
} finally {
loading.value = false;
}
};
const fetchDomains = async () => {
try {
const response = await apiClient.get<Domain[]>(
`/api/organization/${orgId}/domains/`
);
domains.value = response.data;
} catch (error) {
console.error('Failed to fetch domains:', error);
}
};
const selectDomain = async (domainId: number) => {
try {
await apiClient.post(
`/api/organization/${orgId}/domains/${domainId}/members/`,
{ user_id: 'current' }
);
message.success('Successfully joined domain');
userDomains.value.push(domainId);
} catch (error) {
console.error('Failed to join domain:', error);
if (isAxiosError(error)) {
message.error(
error.response?.data?.error || 'Failed to join domain'
);
}
}
};
onMounted(() => {
fetchOrganization();
fetchDomains();
});
</script>
<template>
<div class="page">
<Spin :spinning="loading" tip="Loading organization...">
<Card v-if="organization" class="panel" :bordered="false">
<div class="header">
<Typography.Title :level="2">{{
organization.name
}}</Typography.Title>
<Button
v-if="isOwner"
type="primary"
@click="
router.push(
`/organizations/${organization.uuid}/manage`
)
"
>
Manage Organization
</Button>
</div>
<Typography.Paragraph v-if="organization.description">
{{ organization.description }}
</Typography.Paragraph>
<Typography.Paragraph v-else type="secondary">
No description provided
</Typography.Paragraph>
<Space direction="vertical" :size="4" style="margin: 1rem 0">
<div>
<Typography.Text strong>Owner:</Typography.Text>
{{ organization.owner.full_name }} ({{
organization.owner.email_address
}})
</div>
<div>
<Typography.Text strong>Members:</Typography.Text>
{{ organization.member_count }}
</div>
<div>
<Typography.Text strong>Domains:</Typography.Text>
{{ organization.domain_count }}
</div>
</Space>
<Divider />
<Typography.Title :level="4" class="section-title">
Available Domains
</Typography.Title>
<div v-if="domains.length > 0">
<List :data-source="domains" :bordered="false">
<template #renderItem="{ item }">
<List.Item class="domain-item">
<List.Item.Meta
:title="item.name"
:description="
item.description ||
'No description available'
"
/>
<Space>
<Tag>{{ item.member_count }} members</Tag>
<Button
v-if="!userDomains.includes(item.id)"
type="primary"
size="small"
@click="selectDomain(item.id)"
>
Join Domain
</Button>
<Tag v-else color="success">Joined</Tag>
</Space>
</List.Item>
</template>
</List>
</div>
<Typography.Paragraph v-else type="secondary">
No domains available in this organization.
</Typography.Paragraph>
</Card>
</Spin>
</div>
</template>
<style scoped>
.page {
max-width: 1200px;
margin: 0 auto;
padding: 1rem;
}
.panel {
background: #0f172a;
border: 1px solid #1f2937;
color: #e5e7eb;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.section-title {
margin-top: 1.5rem !important;
margin-bottom: 1rem !important;
}
.domain-item :deep(.ant-list-item-meta-title),
.domain-item :deep(.ant-list-item-meta-description) {
color: #e5e7eb;
}
</style>