- {children}
+
+
+
+
+ {children}
+
+
)
);
diff --git a/src/app/page.jsx b/src/app/page.jsx
index 1b5808e..de178e3 100644
--- a/src/app/page.jsx
+++ b/src/app/page.jsx
@@ -17,6 +17,7 @@ export default function Home() {
+ {/* we should be using the modmail tickets thing although i would like find a way to link this up with discord, would be cool
+ />
+ */}
)
}
diff --git a/src/components/dashboard/QuickActionsCard.jsx b/src/components/dashboard/QuickActionsCard.jsx
new file mode 100644
index 0000000..01b227c
--- /dev/null
+++ b/src/components/dashboard/QuickActionsCard.jsx
@@ -0,0 +1,114 @@
+"use client";
+
+import { useState } from 'react';
+import { useAuth } from '@/contexts/AuthContext';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Phone } from 'lucide-react';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import { DndToggle } from './dnd-toggle';
+import { Skeleton } from '@/components/ui/skeleton';
+
+export function QuickActionsCard({ details, loading }) {
+ const { token } = useAuth();
+ const [isCalling, setIsCalling] = useState(false);
+ const [callMode, setCallMode] = useState('hold');
+ const [callerId, setCallerId] = useState('');
+ const [isCallMeDialogOpen, setIsCallMeDialogOpen] = useState(false);
+
+ const handleCallMe = async () => {
+ if (!token) return;
+ setIsCalling(true);
+ try {
+ let url = `${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001'}/extensions/me/callme?mode=${callMode}`;
+ if (callerId) {
+ url += `&callerId=${encodeURIComponent(callerId)}`;
+ }
+ await fetch(url, {
+ method: 'POST',
+ headers: { 'Authorization': `Bearer ${token}` }
+ });
+ setIsCallMeDialogOpen(false);
+ } catch (error) {
+ console.error("Failed to initiate call", error);
+ alert('Failed to initiate call.');
+ } finally {
+ setIsCalling(false);
+ }
+ };
+
+ if (loading) {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ return (
+
+
+ Quick Actions
+ Common actions for your extension.
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/dashboard/SipCredentialsCard.jsx b/src/components/dashboard/SipCredentialsCard.jsx
new file mode 100644
index 0000000..34522b6
--- /dev/null
+++ b/src/components/dashboard/SipCredentialsCard.jsx
@@ -0,0 +1,137 @@
+"use client";
+
+import { useState } from 'react';
+import { useAuth } from '@/contexts/AuthContext';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Copy, KeyRound, Server, User } from 'lucide-react';
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+ AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
+import { Skeleton } from '@/components/ui/skeleton';
+
+function CredentialRow({ icon, label, value, onCopy }) {
+ return (
+
+ );
+}
+
+export function SipCredentialsCard({ details, loading }) {
+ const { token } = useAuth();
+ const [newSecret, setNewSecret] = useState(null);
+ const [isResetting, setIsResetting] = useState(false);
+
+ const handleResetSecret = async () => {
+ if (!token) return;
+ setIsResetting(true);
+ try {
+ const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001'}/extensions/me/resetsecret`, {
+ method: 'POST',
+ headers: { 'Authorization': `Bearer ${token}` }
+ });
+ const data = await res.json();
+ setNewSecret(data.newSecret);
+ } catch (error) {
+ console.error("Failed to reset secret", error);
+ alert('Failed to reset secret.');
+ } finally {
+ setIsResetting(false);
+ }
+ };
+
+ const copyToClipboard = (text) => {
+ navigator.clipboard.writeText(text);
+ alert('Copied to clipboard!');
+ };
+
+ if (loading) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ return (
+
+
+ SIP Credentials
+ Use these details to connect your SIP client.
+
+
+ } label="SIP Server" value="pbx.litenet.tel" onCopy={() => copyToClipboard('pbx.litenet.tel')} />
+ } label="SIP Username" value={details?.extensionId} onCopy={() => copyToClipboard(details?.extensionId)} />
+
+
+
+
+ );
+}
diff --git a/src/components/dashboard/StatCard.jsx b/src/components/dashboard/StatCard.jsx
new file mode 100644
index 0000000..d28142b
--- /dev/null
+++ b/src/components/dashboard/StatCard.jsx
@@ -0,0 +1,20 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+
+export function StatCard({ title, value, icon, loading }) {
+ if (loading) {
+ return
;
+ }
+
+ return (
+
+
+ {title}
+ {icon}
+
+
+ {value || '...'}
+
+
+ );
+}
diff --git a/src/components/dashboard/actions-card.jsx b/src/components/dashboard/actions-card.jsx
new file mode 100644
index 0000000..d39d118
--- /dev/null
+++ b/src/components/dashboard/actions-card.jsx
@@ -0,0 +1,173 @@
+"use client";
+
+import { useState } from 'react';
+import { useAuth } from '@/contexts/AuthContext';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Copy, Phone, KeyRound } from 'lucide-react';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+ AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
+
+export function ActionsCard({ details }) {
+ const { token } = useAuth();
+ const [isCalling, setIsCalling] = useState(false);
+ const [callMode, setCallMode] = useState('hold');
+ const [callerId, setCallerId] = useState('');
+ const [isCallMeDialogOpen, setIsCallMeDialogOpen] = useState(false);
+ const [newSecret, setNewSecret] = useState(null);
+ const [isResetting, setIsResetting] = useState(false);
+
+ const handleCallMe = async () => {
+ if (!token) return;
+ setIsCalling(true);
+ try {
+ let url = `${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001'}/extensions/me/callme?mode=${callMode}`;
+ if (callerId) {
+ url += `&callerId=${encodeURIComponent(callerId)}`;
+ }
+ await fetch(url, {
+ method: 'POST',
+ headers: { 'Authorization': `Bearer ${token}` }
+ });
+ setIsCallMeDialogOpen(false);
+ } catch (error) {
+ console.error("Failed to initiate call", error);
+ alert('Failed to initiate call.');
+ } finally {
+ setIsCalling(false);
+ }
+ };
+
+ const handleResetSecret = async () => {
+ if (!token) return;
+ setIsResetting(true);
+ try {
+ const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001'}/extensions/me/resetsecret`, {
+ method: 'POST',
+ headers: { 'Authorization': `Bearer ${token}` }
+ });
+ const data = await res.json();
+ setNewSecret(data.newSecret);
+ } catch (error) {
+ console.error("Failed to reset secret", error);
+ alert('Failed to reset secret.');
+ } finally {
+ setIsResetting(false);
+ }
+ };
+
+ const copyToClipboard = () => {
+ navigator.clipboard.writeText(newSecret);
+ alert('Secret copied to clipboard!');
+ };
+
+ return (
+
+
+ Quick Actions
+ Perform common actions for your extension.
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/dashboard/active-calls.jsx b/src/components/dashboard/active-calls.jsx
new file mode 100644
index 0000000..b7fe833
--- /dev/null
+++ b/src/components/dashboard/active-calls.jsx
@@ -0,0 +1,128 @@
+"use client";
+
+import { useState, useEffect, useCallback } from 'react';
+import { useAuth } from '@/contexts/AuthContext';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Skeleton } from '@/components/ui/skeleton';
+import { RefreshCw, PhoneOff, PhoneIncoming, ArrowLeftRight, Clock } from 'lucide-react';
+
+function CallCard({ call }) {
+ return (
+
+
+
+
{call.caller.name}
+
{call.caller.number}
+
+
+
+
{call.connectedLine.name}
+
{call.connectedLine.number}
+
+
+
+
+
+ {call.duration}s
+
+
{call.state}
+
+
+ )
+}
+
+export function ActiveCalls() {
+ const { token } = useAuth();
+ const [calls, setCalls] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [isInitialLoad, setIsInitialLoad] = useState(true);
+
+ const fetchCalls = useCallback(async (isManualRefresh = false) => {
+ if (!token) return;
+ if (isManualRefresh) {
+ setLoading(true);
+ }
+ try {
+ const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001'}/extensions/me/calls`, {
+ headers: { 'Authorization': `Bearer ${token}` }
+ });
+ const data = await res.json();
+ setCalls(Array.isArray(data) ? data : []);
+ } catch (error) {
+ console.error("Failed to fetch active calls", error);
+ setCalls([]);
+ } finally {
+ if (isInitialLoad || isManualRefresh) {
+ setLoading(false);
+ }
+ if (isInitialLoad) {
+ setIsInitialLoad(false);
+ }
+ }
+ }, [token, isInitialLoad]);
+
+ useEffect(() => {
+ if (token) {
+ fetchCalls();
+ const interval = setInterval(() => fetchCalls(false), 5000); // Refresh every 5 seconds
+ return () => clearInterval(interval);
+ } else {
+ setLoading(false);
+ }
+ }, [token, fetchCalls]);
+
+ const handleHangup = async () => {
+ if (!token) return;
+ try {
+ await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001'}/extensions/me/calls`, {
+ method: 'DELETE',
+ headers: { 'Authorization': `Bearer ${token}` }
+ });
+ fetchCalls(true); // Refresh immediately and show loading state
+ } catch (error) {
+ console.error("Failed to hangup calls", error);
+ }
+ };
+
+ return (
+
+
+
+ Active Calls
+ A list of your current calls.
+
+
+ {calls.length > 0 && (
+
+ )}
+
+
+
+
+
+ ) : calls.length > 0 ? (
+
+ {calls.map(call => (
+
+ ))}
+
+ ) : (
+
+
+
No Active Calls
+
When you are in a call, it will appear here.
+
+ );
+}
diff --git a/src/components/dashboard/api-keys.jsx b/src/components/dashboard/api-keys.jsx
new file mode 100644
index 0000000..e23bbef
--- /dev/null
+++ b/src/components/dashboard/api-keys.jsx
@@ -0,0 +1,252 @@
+"use client";
+
+import { useState, useEffect, useCallback } from 'react';
+import { useAuth } from '@/contexts/AuthContext';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Trash2, PlusCircle, Copy, KeyRound } from 'lucide-react';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { format } from 'date-fns';
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import { Badge } from "@/components/ui/badge"
+
+export default function ApiKeys() {
+ const { token } = useAuth();
+ const [keys, setKeys] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [newKey, setNewKey] = useState(null);
+ const [expiresInDays, setExpiresInDays] = useState(90);
+ const [filterType, setFilterType] = useState('all');
+ const [searchTerm, setSearchTerm] = useState('');
+ const [keyToDelete, setKeyToDelete] = useState(null);
+ const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+ const [isCreating, setIsCreating] = useState(false);
+
+ const fetchKeys = useCallback(async () => {
+ if (!token) return;
+ setLoading(true);
+ try {
+ const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001'}/keys`, {
+ headers: { 'Authorization': `Bearer ${token}` }
+ });
+ const data = await res.json();
+ setKeys(data);
+ } catch (error) {
+ console.error("Failed to fetch API keys", error);
+ } finally {
+ setLoading(false);
+ }
+ }, [token]);
+
+ useEffect(() => {
+ fetchKeys();
+ }, [fetchKeys]);
+
+ const handleCreateKey = async () => {
+ if (!token) return;
+ setIsCreating(true);
+ try {
+ const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001'}/keys`, {
+ method: 'POST',
+ headers: {
+ 'Authorization': `Bearer ${token}`,
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({ expiresInDays })
+ });
+ const data = await res.json();
+ setNewKey(data.key);
+ fetchKeys();
+ } catch (error) {
+ console.error("Failed to create key", error);
+ } finally {
+ setIsCreating(false);
+ }
+ };
+
+ const handleDeleteKey = async (keyToDelete) => {
+ if (!token) return;
+ try {
+ await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001'}/keys/${keyToDelete}`, {
+ method: 'DELETE',
+ headers: { 'Authorization': `Bearer ${token}` }
+ });
+ fetchKeys();
+ } catch (error) {
+ console.error("Failed to delete key", error);
+ }
+ };
+
+ const copyToClipboard = (text) => {
+ navigator.clipboard.writeText(text);
+ alert('Key copied to clipboard!');
+ };
+
+ const filteredKeys = keys
+ .filter(key => filterType === 'all' || key.type === filterType)
+ .filter(key => key.key.toLowerCase().includes(searchTerm.toLowerCase()));
+
+ return (
+
+
+
+
+ API Keys
+ Manage your API keys for programmatic access.
+
+
+
+
setSearchTerm(e.target.value)}
+ className="max-w-xs bg-gray-900 border-gray-700"
+ />
+
+
+
+
+
+
+
+
+
+
+ ) : filteredKeys.length > 0 ? (
+
+
+
+ Key
+ Type
+ IP Address
+ Created
+ Expires
+ Actions
+
+
+
+ {filteredKeys.map(key => {
+ const isCurrentSession = key.type === 'session' && token?.startsWith(key.key);
+ return (
+
+
+ {key.type === 'api' ? `${key.key.substring(0, 12)}...` : key.key}
+ {isCurrentSession && (this session)}
+
+
+
+ {key.type}
+
+
+ {key.ipAddress || 'N/A'}
+ {format(new Date(key.createdAt), 'PP')}
+ {key.expiresAt ? format(new Date(key.expiresAt), 'PP') : 'Never'}
+
+ {!isCurrentSession && (
+
+ )}
+
+
+ );
+ })}
+
+
+ ) : (
+
+
+
+ {searchTerm || filterType !== 'all' ? 'No Matching Keys' : 'No API Keys'}
+
+
+ {searchTerm || filterType !== 'all'
+ ? 'Try adjusting your search or filter.'
+ : 'Create your first API key to get started with integrations.'}
+
+
+ {keyToDelete?.type === 'api' ? `${keyToDelete?.key.substring(0, 12)}...` : keyToDelete?.key}
+
+ and revoke its access.
+
+
+
+ Cancel
+ {
+ if (keyToDelete) {
+ handleDeleteKey(keyToDelete.key);
+ }
+ setKeyToDelete(null);
+ }}
+ >
+ Delete
+
+
+
+
+
+ );
+}
diff --git a/src/components/dashboard/call-history.jsx b/src/components/dashboard/call-history.jsx
new file mode 100644
index 0000000..bcad253
--- /dev/null
+++ b/src/components/dashboard/call-history.jsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { History } from 'lucide-react';
+
+export default function CallHistory() {
+ return (
+
+
+ Call History
+ A log of your recent calls.
+
+
+
+
+
Coming Soon!
+
This feature is currently under development. Check back later!
+
+ );
+}
diff --git a/src/components/dashboard/dashboard-client.jsx b/src/components/dashboard/dashboard-client.jsx
new file mode 100644
index 0000000..51d3733
--- /dev/null
+++ b/src/components/dashboard/dashboard-client.jsx
@@ -0,0 +1,243 @@
+"use client";
+
+import { useState, useEffect } from 'react';
+import { useAuth } from '@/contexts/AuthContext';
+import { Button } from '@/components/ui/button';
+import { Skeleton } from '@/components/ui/skeleton';
+import ExtensionDetails from './extension-details';
+import ApiKeys from './api-keys';
+import CallHistory from './call-history';
+import { LogOut, User, Phone, Voicemail } from 'lucide-react';
+import { ActiveCalls } from './active-calls';
+import { SipCredentialsCard } from './SipCredentialsCard';
+import { QuickActionsCard } from './QuickActionsCard';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+
+function OverviewCard({ details, deviceStatus, loading }) {
+ const Stat = ({ icon, label, value, loading }) => (
+
+
{icon}
+
+
{label}
+ {loading ?
:
{value}
}
+
+
+ );
+
+ return (
+
+
+ } label="Extension" value={details?.extensionId || '...'} loading={loading} />
+ } label="Device Status" value={deviceStatus?.deviceState || 'Unknown'} loading={loading} />
+ } label="Voicemail" value={details?.user?.voicemail === 'default' ? 'Enabled' : 'Disabled'} loading={loading} />
+
+
+ );
+}
+
+
+export default function DashboardClient() {
+ const { isLoggedIn, loading, logout, token, noExtension } = useAuth();
+ const [details, setDetails] = useState(null);
+ const [detailsLoading, setDetailsLoading] = useState(true);
+ const [deviceStatus, setDeviceStatus] = useState(null);
+ const [deviceStatusLoading, setDeviceStatusLoading] = useState(true);
+
+ useEffect(() => {
+ if (!token) {
+ setDetailsLoading(false);
+ return;
+ }
+
+ const fetchDetails = async () => {
+ setDetailsLoading(true);
+ try {
+ const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001'}/extensions/me`, {
+ headers: { 'Authorization': `Bearer ${token}` }
+ });
+ if (res.ok) {
+ const data = await res.json();
+ setDetails(data);
+ } else {
+ setDetails(null);
+ }
+ } catch (err) {
+ console.error("Failed to fetch details", err);
+ setDetails(null);
+ } finally {
+ setDetailsLoading(false);
+ }
+ };
+
+ fetchDetails();
+ }, [token]);
+
+ useEffect(() => {
+ if (!token) {
+ setDeviceStatusLoading(false);
+ return;
+ }
+
+ const fetchDeviceStatus = async () => {
+ // No need to set loading to true every time for a silent refresh
+ try {
+ const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001'}/extensions/me/devicestatus`, {
+ headers: { 'Authorization': `Bearer ${token}` }
+ });
+ if (res.ok) {
+ const data = await res.json();
+ setDeviceStatus(data);
+ } else {
+ setDeviceStatus(null);
+ }
+ } catch (err) {
+ console.error("Failed to fetch device status", err);
+ setDeviceStatus(null);
+ } finally {
+ if (deviceStatusLoading) setDeviceStatusLoading(false);
+ }
+ };
+
+ fetchDeviceStatus();
+ const interval = setInterval(fetchDeviceStatus, 5000); // Poll every 5 seconds
+ return () => clearInterval(interval);
+ }, [token, deviceStatusLoading]);
+
+ const handleLogin = () => {
+ window.location.href = `${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001'}/auth/discord`;
+ };
+
+ if (loading) {
+ return (
+
+ );
+ }
+
+ if (noExtension) {
+ return (
+
+
No Extension Found
+
+ It looks like you don't have a LiteNet extension yet. Please join our Discord server and use the /new command to register for one.
+
+
+
+ );
+ }
+
+ if (!isLoggedIn) {
+ return (
+
+
Welcome to your Dashboard
+
Please log in to manage your extension.
+
+
+ );
+ }
+
+ return (
+
+
+
+ {detailsLoading ? (
+
+ ) : (
+
+
+ {details?.user?.name?.[0]}
+
+ )}
+
+
My Dashboard
+ {detailsLoading ? (
+
+ ) : details ? (
+
Welcome back, {details.user?.name}!
+ ) : (
+
Could not load your details. Please try again later.
+ )}
+
+
+
+
+
+ {/* Overview Card */}
+
+
+
+
+ {/* Main Grid */}
+
+ {/* Main Content */}
+
+
+
+
+
+
+ {/* Sidebar */}
+
+
+
+ );
+}
diff --git a/src/components/dashboard/dnd-toggle.jsx b/src/components/dashboard/dnd-toggle.jsx
new file mode 100644
index 0000000..8657d8b
--- /dev/null
+++ b/src/components/dashboard/dnd-toggle.jsx
@@ -0,0 +1,78 @@
+"use client";
+
+import { useState, useEffect, useCallback } from 'react';
+import { useAuth } from '@/contexts/AuthContext';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
+import { Skeleton } from '@/components/ui/skeleton';
+
+export function DndToggle() {
+ const { token } = useAuth();
+ const [dndStatus, setDndStatus] = useState(false);
+ const [loading, setLoading] = useState(true);
+
+ const fetchDndStatus = useCallback(async () => {
+ if (!token) return;
+ setLoading(true);
+ try {
+ const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001'}/extensions/me/dnd`, {
+ headers: { 'Authorization': `Bearer ${token}` }
+ });
+ const data = await res.json();
+ setDndStatus(data.dndStatus);
+ } catch (error) {
+ console.error("Failed to fetch DND status", error);
+ } finally {
+ setLoading(false);
+ }
+ }, [token]);
+
+ useEffect(() => {
+ fetchDndStatus();
+ }, [fetchDndStatus]);
+
+ const handleToggle = async (checked) => {
+ if (!token) return;
+ setDndStatus(checked); // Optimistic update
+ try {
+ await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001'}/extensions/me/dnd`, {
+ method: 'POST',
+ headers: {
+ 'Authorization': `Bearer ${token}`,
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({ dndStatus: checked })
+ });
+ } catch (error) {
+ console.error("Failed to update DND status", error);
+ setDndStatus(!checked); // Revert on failure
+ }
+ };
+
+ return (
+
+
+ Do Not Disturb
+ When enabled, calls will not ring your extension.
+
+
+ {loading ? (
+
+
+
+
+ ) : (
+
+
+
+
+ )}
+
+
+ );
+}
diff --git a/src/components/dashboard/extension-details.jsx b/src/components/dashboard/extension-details.jsx
new file mode 100644
index 0000000..c561ccc
--- /dev/null
+++ b/src/components/dashboard/extension-details.jsx
@@ -0,0 +1,62 @@
+"use client";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+
+function DetailRow({ label, value, isMono = false }) {
+ return (
+
+ {label}
+ {value}
+
+ );
+}
+
+export default function ExtensionDetails({ details, loading }) {
+ if (loading) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ if (!details) {
+ return (
+
+
+ Extension Details
+ Your user and device information.
+
+
+ Could not load extension details.
+
+
+ );
+ }
+
+ return (
+
+
+ Extension Details
+ Your user and device information.
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/directory-modal.jsx b/src/components/directory-modal.jsx
index 5b28ab3..29d0c93 100644
--- a/src/components/directory-modal.jsx
+++ b/src/components/directory-modal.jsx
@@ -1,112 +1,373 @@
"use client";
import React, { useState, useEffect } from 'react'
-import {
- Dialog,
- DialogContent,
- DialogDescription,
- DialogHeader,
- DialogTitle,
- DialogTrigger,
-} from "@/components/ui/dialog"
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { ScrollArea } from "@/components/ui/scroll-area"
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
-import { List } from 'lucide-react'
+import { List, RefreshCw, Crown } from 'lucide-react'
+import { TbPlugConnectedX } from 'react-icons/tb'
+import { MdPhoneInTalk, MdCheck } from 'react-icons/md'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Skeleton } from "@/components/ui/skeleton"
+import { AnimatePresence, motion } from "framer-motion"
+import { Switch } from "@/components/ui/switch"
+import { Label } from "@/components/ui/label"
export function DirectoryModal() {
const [extensions, setExtensions] = useState([]);
- const [summary, setSummary] = useState({ total: 0, connected: 0, avgLatency: 0 });
- const [lastUpdated, setLastUpdated] = useState('');
+ const [summary, setSummary] = useState({ total: 0, connected: 0, online: 0, inUse: 0, avgLatency: 0 });
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [open, setOpen] = useState(false);
+ const [showConnectedOnly, setShowConnectedOnly] = useState(false);
+ const [topUserExt, setTopUserExt] = useState(null);
- useEffect(() => {
- const fetchDirectory = async () => {
- try {
- const response = await fetch('https://corsproxy.io/?url=https://pbx.litenet.tel/status/');
- const text = await response.text();
- const parser = new DOMParser();
- const doc = parser.parseFromString(text, 'text/html');
+ const fetchDirectory = async () => {
+ setLoading(true);
+ setTopUserExt(null);
+ try {
+ const response = await fetch('https://corsproxy.io/?url=https://pbx.litenet.tel/status/');
+ if (!response.ok) {
+ throw new Error('Failed to fetch directory');
+ }
+
+ const text = await response.text();
+ const parser = new DOMParser();
+ const doc = parser.parseFromString(text, 'text/html');
- // Parse summary data
- const summaryText = doc.querySelector('h2.text-center')?.textContent;
- if (summaryText) {
- const match = summaryText.match(/(\d+) Endpoints connected to (\d+) Extensions. With an average latency of ([\d.]+)ms/);
- if (match) {
- setSummary({
- total: parseInt(match[1]),
- connected: parseInt(match[2]),
- avgLatency: parseFloat(match[3])
- });
+ // Improved parsing logic
+ // Parse summary data - look for all h2 and h3 elements
+ const h2Elements = Array.from(doc.querySelectorAll('h2.text-center'));
+ const h3Elements = Array.from(doc.querySelectorAll('h3.text-center'));
+
+ let totalEndpoints = 0;
+ let connectedExtensions = 0;
+ let onlineCount = 0;
+ let totalCount = 0;
+ let inUseCount = 0;
+ let avgLatency = 0;
+
+ // Check all h2 elements for endpoint/extension info
+ h2Elements.forEach(el => {
+ const text = el.textContent || '';
+ const endpointMatch = text.match(/(\d+)\s+Endpoints/i);
+ const extensionMatch = text.match(/connected to\s+(\d+)\s+Extensions/i);
+ const latencyMatch = text.match(/average latency of\s+([\d.]+)ms/i);
+
+ if (endpointMatch) totalEndpoints = parseInt(endpointMatch[1]);
+ if (extensionMatch) connectedExtensions = parseInt(extensionMatch[1]);
+ if (latencyMatch) avgLatency = parseFloat(latencyMatch[1]);
+ });
+
+ // Check all h3 elements for online/total/in-use info
+ h3Elements.forEach(el => {
+ const text = el.textContent || '';
+ const onlineMatch = text.match(/(\d+)\s+online\s*\/\s*(\d+)\s+total/i);
+ const inUseMatch = text.match(/(\d+)\s+In-use/i);
+
+ if (onlineMatch) {
+ onlineCount = parseInt(onlineMatch[1]);
+ totalCount = parseInt(onlineMatch[2]);
+ }
+ if (inUseMatch) inUseCount = parseInt(inUseMatch[1]);
+ });
+
+ // Check if we need to do direct DOM inspection for values
+ if (totalEndpoints === 0 || connectedExtensions === 0) {
+ // Try another approach - directly find specific elements by position/context
+ const mainContentDiv = doc.querySelector('.container .row .col-md-12');
+ if (mainContentDiv) {
+ const contentText = mainContentDiv.textContent || '';
+
+ // Try more flexible regex patterns
+ const fullMatch = contentText.match(/(\d+)\s+Endpoints\s+connected\s+to\s+(\d+)\s+Extensions/i);
+ if (fullMatch) {
+ totalEndpoints = parseInt(fullMatch[1]);
+ connectedExtensions = parseInt(fullMatch[2]);
+ }
+
+ // Search for online/total pattern
+ const statusMatch = contentText.match(/(\d+)\s+online\s*\/\s*(\d+)\s+total/i);
+ if (statusMatch) {
+ onlineCount = parseInt(statusMatch[1]);
+ totalCount = parseInt(statusMatch[2]);
}
}
-
- // Parse last updated time
- const timestampElement = doc.getElementById('timestamp');
- if (timestampElement) {
- setLastUpdated(timestampElement.textContent || '');
- }
-
- // Parse extensions
- const rows = doc.querySelectorAll('table tbody tr');
- const parsedExtensions = Array.from(rows).map(row => {
- const cells = row.querySelectorAll('td');
- return {
- number: cells[0].textContent?.replace('●', '').trim() || '',
- name: cells[1].textContent || '',
- status: cells[2].textContent || '',
- endpoints: cells[3].textContent || '',
- latency: cells[4].textContent || '',
- };
- });
- setExtensions(parsedExtensions);
- } catch (error) {
- console.error('Error fetching directory:', error);
}
- };
+
+ // Console log for debugging
+ console.log("Parsed values:", {
+ totalEndpoints,
+ connectedExtensions,
+ onlineCount,
+ inUseCount,
+ avgLatency
+ });
+
+ setSummary({
+ total: totalEndpoints,
+ connected: connectedExtensions,
+ online: onlineCount,
+ inUse: inUseCount,
+ avgLatency: avgLatency
+ });
- fetchDirectory();
- }, []);
+ // Parse extensions
+ const rows = doc.querySelectorAll('table tbody tr');
+ const parsedExtensions = Array.from(rows).map(row => {
+ const cells = row.querySelectorAll('td');
+ const extCell = cells[0].textContent || '';
+ const statusColor = cells[0].getAttribute('style') || '';
+
+ let statusType = 'offline';
+ if (statusColor.includes('green')) statusType = 'online';
+ else if (statusColor.includes('orange')) statusType = 'in-use';
+
+ return {
+ number: extCell.replace('●', '').trim(),
+ name: cells[1].textContent || '',
+ status: cells[2].textContent || '',
+ statusType: statusType,
+ endpoints: cells[3].textContent || '0',
+ latency: cells[4].textContent || 'No Data',
+ };
+ });
+
+ if (parsedExtensions.length > 0) {
+ const topUser = parsedExtensions.reduce((max, current) => {
+ const maxEndpoints = parseInt(max.endpoints, 10) || 0;
+ const currentEndpoints = parseInt(current.endpoints, 10) || 0;
+ return currentEndpoints > maxEndpoints ? current : max;
+ });
+ if (parseInt(topUser.endpoints, 10) > 0) {
+ setTopUserExt(topUser.number);
+ }
+ }
+
+ setExtensions(parsedExtensions);
+ setError(null);
+ } catch (error) {
+ console.error('Error fetching directory:', error);
+ setError('Failed to load directory. Please try again later.');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ if (open) {
+ fetchDirectory();
+ }
+ }, [open]);
+
+ const getStatusIcon = (statusType) => {
+ switch (statusType) {
+ case 'online':
+ return
;
+ case 'in-use':
+ return
;
+ default:
+ return
;
+ }
+ };
+
+ // Filter extensions based on the switch state
+ const filteredExtensions = showConnectedOnly
+ ? extensions.filter(ext => ext.statusType === 'online' || ext.statusType === 'in-use')
+ : extensions;
return (
-