WIP - twilio integration

frontend/pages/settings/integrations.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="max-w-4xl mx-auto space-y-6">
+    <div>
+      <h1 class="text-3xl font-bold">Integrations</h1>
+      <p class="text-muted-foreground mt-2">
+        Configure third-party service integrations for your tenant
+      </p>
+    </div>
+
+    <!-- Twilio Configuration -->
+    <Card>
+      <CardHeader>
+        <CardTitle class="flex items-center gap-2">
+          <Phone class="w-5 h-5" />
+          Twilio Voice
+        </CardTitle>
+        <CardDescription>
+          Configure Twilio for voice calling capabilities
+        </CardDescription>
+      </CardHeader>
+      <CardContent class="space-y-4">
+        <div class="space-y-2">
+          <Label for="twilio-account-sid">Account SID</Label>
+          <Input
+            id="twilio-account-sid"
+            v-model="twilioConfig.accountSid"
+            placeholder="ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+          />
+        </div>
+        <div class="space-y-2">
+          <Label for="twilio-auth-token">Auth Token</Label>
+          <Input
+            id="twilio-auth-token"
+            v-model="twilioConfig.authToken"
+            type="password"
+            placeholder="Enter your Twilio auth token"
+          />
+        </div>
+        <div class="space-y-2">
+          <Label for="twilio-phone-number">Phone Number</Label>
+          <Input
+            id="twilio-phone-number"
+            v-model="twilioConfig.phoneNumber"
+            placeholder="+1234567890"
+          />
+        </div>
+      </CardContent>
+    </Card>
+
+    <!-- OpenAI Configuration -->
+    <Card>
+      <CardHeader>
+        <CardTitle class="flex items-center gap-2">
+          <Bot class="w-5 h-5" />
+          OpenAI Realtime
+        </CardTitle>
+        <CardDescription>
+          Configure OpenAI for AI-assisted calling features
+        </CardDescription>
+      </CardHeader>
+      <CardContent class="space-y-4">
+        <div class="space-y-2">
+          <Label for="openai-api-key">API Key</Label>
+          <Input
+            id="openai-api-key"
+            v-model="openaiConfig.apiKey"
+            type="password"
+            placeholder="sk-..."
+          />
+        </div>
+        <div class="space-y-2">
+          <Label for="openai-model">Model</Label>
+          <Input
+            id="openai-model"
+            v-model="openaiConfig.model"
+            placeholder="gpt-4o-realtime-preview"
+          />
+          <p class="text-xs text-muted-foreground">
+            Default: gpt-4o-realtime-preview
+          </p>
+        </div>
+        <div class="space-y-2">
+          <Label for="openai-voice">Voice</Label>
+          <Input
+            id="openai-voice"
+            v-model="openaiConfig.voice"
+            placeholder="alloy"
+          />
+          <p class="text-xs text-muted-foreground">
+            Options: alloy, echo, fable, onyx, nova, shimmer
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+
+    <!-- Save Button -->
+    <div class="flex justify-end">
+      <Button @click="saveConfig" :disabled="saving">
+        <Save class="w-4 h-4 mr-2" />
+        {{ saving ? 'Saving...' : 'Save Configuration' }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '~/components/ui/card';
+import { Input } from '~/components/ui/input';
+import { Label } from '~/components/ui/label';
+import { Button } from '~/components/ui/button';
+import { Phone, Bot, Save } from 'lucide-vue-next';
+import { useApi } from '~/composables/useApi';
+import { toast } from 'vue-sonner';
+
+const { api } = useApi();
+
+const twilioConfig = ref({
+  accountSid: '',
+  authToken: '',
+  phoneNumber: '',
+});
+
+const openaiConfig = ref({
+  apiKey: '',
+  model: 'gpt-4o-realtime-preview',
+  voice: 'alloy',
+});
+
+const saving = ref(false);
+const loading = ref(true);
+
+onMounted(async () => {
+  try {
+    const response = await api.get('/tenant/integrations');
+    if (response.data) {
+      if (response.data.twilio) {
+        twilioConfig.value = { ...twilioConfig.value, ...response.data.twilio };
+      }
+      if (response.data.openai) {
+        openaiConfig.value = { ...openaiConfig.value, ...response.data.openai };
+      }
+    }
+  } catch (error: any) {
+    console.error('Failed to load configuration:', error);
+  } finally {
+    loading.value = false;
+  }
+});
+
+const saveConfig = async () => {
+  saving.value = true;
+
+  try {
+    const integrationsConfig = {
+      twilio: twilioConfig.value,
+      openai: openaiConfig.value,
+    };
+
+    await api.put('/tenant/integrations', { integrationsConfig });
+
+    toast.success('Configuration saved successfully');
+  } catch (error: any) {
+    toast.error(error.message || 'Failed to save configuration');
+  } finally {
+    saving.value = false;
+  }
+};
+</script>