Restructure: rename to Pulse and move app to root
- Renamed project from PSA-Utils to Pulse - Moved all app files from autotask-app/ to root - Updated package.json name to 'pulse' - Updated Docker container names to pulse-app and pulse-redis - Updated Docker network name to pulse-network
This commit is contained in:
parent
f429f3af54
commit
3c3124d8c9
117 changed files with 8433 additions and 239 deletions
61
components/companies/company-selector-enhanced.tsx
Normal file
61
components/companies/company-selector-enhanced.tsx
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Company } from '@/lib/types/autotask';
|
||||
import { useApi } from '@/lib/hooks/use-api';
|
||||
import { Building2 } from 'lucide-react';
|
||||
|
||||
interface CompanySelectorEnhancedProps {
|
||||
value?: number;
|
||||
onValueChange: (value: number | undefined, companyName?: string) => void;
|
||||
label?: string;
|
||||
}
|
||||
|
||||
export function CompanySelectorEnhanced({
|
||||
value,
|
||||
onValueChange,
|
||||
label = 'Select Company'
|
||||
}: CompanySelectorEnhancedProps) {
|
||||
const { data, loading, error } = useApi<{ companies: Company[] }>('/api/companies');
|
||||
|
||||
const companies = data?.companies || [];
|
||||
|
||||
const handleChange = (val: string) => {
|
||||
const companyId = parseInt(val);
|
||||
const company = companies.find(c => c.id === companyId);
|
||||
onValueChange(companyId, company?.companyName);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="company-select" className="flex items-center gap-2">
|
||||
<Building2 className="w-4 h-4" />
|
||||
{label}
|
||||
</Label>
|
||||
<Select
|
||||
value={value?.toString()}
|
||||
onValueChange={handleChange}
|
||||
disabled={loading || !!error}
|
||||
>
|
||||
<SelectTrigger id="company-select">
|
||||
<SelectValue placeholder={loading ? 'Loading...' : 'Select a company'} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{companies.map((company) => (
|
||||
<SelectItem key={company.id} value={company.id.toString()}>
|
||||
{company.companyName}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
60
components/companies/company-selector.tsx
Normal file
60
components/companies/company-selector.tsx
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Company } from '@/lib/types/autotask';
|
||||
import { useApi } from '@/lib/hooks/use-api';
|
||||
import { Building2 } from 'lucide-react';
|
||||
|
||||
interface CompanySelectorProps {
|
||||
value?: number;
|
||||
onValueChange: (value: number) => void;
|
||||
label?: string;
|
||||
}
|
||||
|
||||
export function CompanySelector({
|
||||
value,
|
||||
onValueChange,
|
||||
label = 'Select Company'
|
||||
}: CompanySelectorProps) {
|
||||
const { data, loading, error } = useApi<{ companies: Company[] }>('/api/companies');
|
||||
|
||||
const companies = data?.companies || [];
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="company-select" className="flex items-center gap-2">
|
||||
<Building2 className="w-4 h-4" />
|
||||
{label}
|
||||
</Label>
|
||||
<Select
|
||||
value={value?.toString()}
|
||||
onValueChange={(val) => onValueChange(parseInt(val))}
|
||||
disabled={loading || !!error}
|
||||
>
|
||||
<SelectTrigger id="company-select">
|
||||
<SelectValue placeholder={loading ? 'Loading...' : 'Select a company'} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{companies.map((company) => (
|
||||
<SelectItem key={company.id} value={company.id.toString()}>
|
||||
{company.companyName}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{error && (
|
||||
<p className="text-sm text-red-500">
|
||||
Error loading companies: {error}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
153
components/configuration-items/config-item-modal.tsx
Normal file
153
components/configuration-items/config-item-modal.tsx
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { PSATab } from './psa-tab';
|
||||
import { RMMTab } from './rmm-tab';
|
||||
import { StatusCards } from './status-cards';
|
||||
import {
|
||||
Server,
|
||||
Monitor,
|
||||
AlertCircle
|
||||
} from 'lucide-react';
|
||||
import { ConfigurationItem } from '@/lib/types/autotask';
|
||||
import { DattoRMMDevice } from '@/lib/types/datto-rmm';
|
||||
|
||||
interface ConfigItemDetail {
|
||||
autotaskDevice?: ConfigurationItem;
|
||||
rmmDevice?: DattoRMMDevice;
|
||||
companyName?: string;
|
||||
}
|
||||
|
||||
interface ConfigItemModalProps {
|
||||
itemId: string | number | null;
|
||||
type?: 'autotask' | 'rmm';
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
export function ConfigItemModal({ itemId, type = 'autotask', open, onOpenChange }: ConfigItemModalProps) {
|
||||
const [data, setData] = useState<ConfigItemDetail>({});
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open || !itemId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const fetchData = async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/configuration-items/${itemId}?type=${type}`);
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch configuration item');
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
setData(result);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'An error occurred');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, [itemId, type, open]);
|
||||
|
||||
const handleUpdate = (updatedDevice: ConfigurationItem) => {
|
||||
setData({ ...data, autotaskDevice: updatedDevice });
|
||||
};
|
||||
|
||||
const device = data.autotaskDevice;
|
||||
const rmmDevice = data.rmmDevice;
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent
|
||||
className="w-[95vw] sm:w-[90vw] md:w-[85vw] lg:w-[80vw] xl:w-[75vw] h-[90vh] overflow-y-auto"
|
||||
style={{ maxWidth: '1400px' }}
|
||||
>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-3">
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-purple-600 to-purple-700 text-white">
|
||||
<Server className="h-4 w-4" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-lg font-semibold">
|
||||
{device?.referenceTitle || rmmDevice?.hostname || 'Configuration Item'}
|
||||
</div>
|
||||
{data.companyName && (
|
||||
<div className="text-sm font-normal text-muted-foreground">
|
||||
{data.companyName}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{loading ? (
|
||||
<div className="space-y-4 py-4">
|
||||
<Skeleton className="h-24 w-full" />
|
||||
<Skeleton className="h-96 w-full" />
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="py-8">
|
||||
<div className="flex items-center gap-2 text-red-500 justify-center">
|
||||
<AlertCircle className="w-5 h-5" />
|
||||
<p>Error: {error}</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{/* Status Cards */}
|
||||
<StatusCards device={device} rmmDevice={rmmDevice} />
|
||||
|
||||
{/* Tabs */}
|
||||
<Tabs defaultValue="psa" className="space-y-4">
|
||||
<TabsList className="grid w-full grid-cols-2">
|
||||
<TabsTrigger value="psa" className="flex items-center gap-2">
|
||||
<Server className="w-4 h-4" />
|
||||
PSA Data
|
||||
{device && (
|
||||
<Badge variant="outline" className="ml-1">
|
||||
{device.isActive ? 'Active' : 'Inactive'}
|
||||
</Badge>
|
||||
)}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="rmm" className="flex items-center gap-2">
|
||||
<Monitor className="w-4 h-4" />
|
||||
RMM Data
|
||||
{rmmDevice && (
|
||||
<Badge variant="outline" className="ml-1">
|
||||
{rmmDevice.online ? 'Online' : 'Offline'}
|
||||
</Badge>
|
||||
)}
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="psa">
|
||||
<PSATab device={device} onUpdate={handleUpdate} />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="rmm">
|
||||
<RMMTab device={rmmDevice} />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
59
components/configuration-items/contact-cell.tsx
Normal file
59
components/configuration-items/contact-cell.tsx
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { User } from 'lucide-react';
|
||||
|
||||
interface ContactCellProps {
|
||||
contactId?: number;
|
||||
}
|
||||
|
||||
export function ContactCell({ contactId }: ContactCellProps) {
|
||||
const [contactName, setContactName] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!contactId) {
|
||||
setContactName(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const fetchContact = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await fetch(`/api/contacts/${contactId}`);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
if (data.contact) {
|
||||
setContactName(`${data.contact.firstName} ${data.contact.lastName}`);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch contact:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchContact();
|
||||
}, [contactId]);
|
||||
|
||||
if (loading) {
|
||||
return <span className="text-xs text-muted-foreground">Loading...</span>;
|
||||
}
|
||||
|
||||
if (!contactId) {
|
||||
return <span className="text-xs text-muted-foreground">-</span>;
|
||||
}
|
||||
|
||||
if (contactName) {
|
||||
return (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
<User className="w-3 h-3 mr-1" />
|
||||
{contactName}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
|
||||
return <span className="text-xs text-muted-foreground">ID: {contactId}</span>;
|
||||
}
|
||||
456
components/configuration-items/psa-tab.tsx
Normal file
456
components/configuration-items/psa-tab.tsx
Normal file
|
|
@ -0,0 +1,456 @@
|
|||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
AlertDialogTrigger,
|
||||
} from '@/components/ui/alert-dialog';
|
||||
import {
|
||||
Server,
|
||||
Edit,
|
||||
Save,
|
||||
Power,
|
||||
Info,
|
||||
Cpu,
|
||||
RefreshCw,
|
||||
User,
|
||||
Receipt,
|
||||
Ticket as TicketIcon
|
||||
} from 'lucide-react';
|
||||
import { format } from 'date-fns';
|
||||
import { ConfigurationItem } from '@/lib/types/autotask';
|
||||
import { PurchaseHistoryModal } from './purchase-history-modal';
|
||||
import { RelatedTicketsModal } from './related-tickets-modal';
|
||||
|
||||
interface PSATabProps {
|
||||
device?: ConfigurationItem;
|
||||
onUpdate: (device: ConfigurationItem) => void;
|
||||
}
|
||||
|
||||
export function PSATab({ device, onUpdate }: PSATabProps) {
|
||||
const [editMode, setEditMode] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [editedData, setEditedData] = useState<Partial<ConfigurationItem>>(device || {});
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [contactName, setContactName] = useState<string | null>(null);
|
||||
const [loadingContact, setLoadingContact] = useState(false);
|
||||
const [purchaseHistoryOpen, setPurchaseHistoryOpen] = useState(false);
|
||||
const [relatedTicketsOpen, setRelatedTicketsOpen] = useState(false);
|
||||
|
||||
// Fetch contact information if contactID exists
|
||||
useEffect(() => {
|
||||
if (!device?.contactID) {
|
||||
setContactName(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const fetchContact = async () => {
|
||||
setLoadingContact(true);
|
||||
try {
|
||||
const response = await fetch(`/api/contacts/${device.contactID}`);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setContactName(data.contact ? `${data.contact.firstName} ${data.contact.lastName}` : null);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch contact:', err);
|
||||
} finally {
|
||||
setLoadingContact(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchContact();
|
||||
}, [device?.contactID]);
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!device) return;
|
||||
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
try {
|
||||
const response = await fetch(`/api/configuration-items/${device.id}`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(editedData),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to update configuration item');
|
||||
}
|
||||
|
||||
const updated = await response.json();
|
||||
onUpdate(updated.configurationItem);
|
||||
setEditMode(false);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to save changes');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleMakeInactive = async () => {
|
||||
if (!device) return;
|
||||
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
try {
|
||||
const response = await fetch(`/api/configuration-items/${device.id}`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ isActive: false }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to update configuration item');
|
||||
}
|
||||
|
||||
const updated = await response.json();
|
||||
onUpdate(updated.configurationItem);
|
||||
setEditedData({ ...editedData, isActive: false });
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to make inactive');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card className="border-0 shadow-lg">
|
||||
<CardHeader className="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 rounded-t-lg">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-lg">PSA Configuration Item</CardTitle>
|
||||
<div className="flex items-center gap-2">
|
||||
{!editMode ? (
|
||||
<>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setPurchaseHistoryOpen(true)}
|
||||
>
|
||||
<Receipt className="w-4 h-4 mr-2" />
|
||||
Purchase History
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setRelatedTicketsOpen(true)}
|
||||
>
|
||||
<TicketIcon className="w-4 h-4 mr-2" />
|
||||
Related Tickets
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setEditMode(true);
|
||||
setEditedData(device || {});
|
||||
}}
|
||||
disabled={!device}
|
||||
>
|
||||
<Edit className="w-4 h-4 mr-2" />
|
||||
Edit
|
||||
</Button>
|
||||
{device?.isActive && (
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button variant="destructive" size="sm">
|
||||
<Power className="w-4 h-4 mr-2" />
|
||||
Make Inactive
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Make Configuration Item Inactive?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
This will mark the configuration item as inactive in Autotask PSA.
|
||||
You can reactivate it later if needed.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={handleMakeInactive}>
|
||||
Make Inactive
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setEditMode(false);
|
||||
setEditedData(device || {});
|
||||
setError(null);
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={handleSave}
|
||||
disabled={saving}
|
||||
>
|
||||
{saving ? (
|
||||
<RefreshCw className="w-4 h-4 mr-2 animate-spin" />
|
||||
) : (
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
)}
|
||||
Save
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-6">
|
||||
{error && (
|
||||
<div className="mb-4 p-3 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-md">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{device ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Basic Information */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold flex items-center gap-2">
|
||||
<Info className="w-4 h-4" />
|
||||
Basic Information
|
||||
</h3>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<Label>Reference Title</Label>
|
||||
{editMode ? (
|
||||
<Input
|
||||
value={editedData.referenceTitle || ''}
|
||||
onChange={(e) => setEditedData({...editedData, referenceTitle: e.target.value})}
|
||||
className="mt-1"
|
||||
/>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground mt-1">{device.referenceTitle}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Reference Number</Label>
|
||||
{editMode ? (
|
||||
<Input
|
||||
value={editedData.referenceNumber || ''}
|
||||
onChange={(e) => setEditedData({...editedData, referenceNumber: e.target.value})}
|
||||
className="mt-1"
|
||||
/>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground font-mono mt-1">
|
||||
{device.referenceNumber || '-'}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Serial Number</Label>
|
||||
{editMode ? (
|
||||
<Input
|
||||
value={editedData.serialNumber || ''}
|
||||
onChange={(e) => setEditedData({...editedData, serialNumber: e.target.value})}
|
||||
className="mt-1"
|
||||
/>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground font-mono mt-1">
|
||||
{device.serialNumber || '-'}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Location</Label>
|
||||
{editMode ? (
|
||||
<Input
|
||||
value={editedData.location || ''}
|
||||
onChange={(e) => setEditedData({...editedData, location: e.target.value})}
|
||||
className="mt-1"
|
||||
/>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{device.location || '-'}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Active Status</Label>
|
||||
{editMode ? (
|
||||
<div className="flex items-center space-x-2 mt-1">
|
||||
<Switch
|
||||
checked={editedData.isActive}
|
||||
onCheckedChange={(checked) => setEditedData({...editedData, isActive: checked})}
|
||||
/>
|
||||
<Label>{editedData.isActive ? 'Active' : 'Inactive'}</Label>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-1">
|
||||
{device.isActive ? (
|
||||
<Badge variant="default" className="bg-green-600">Active</Badge>
|
||||
) : (
|
||||
<Badge variant="secondary">Inactive</Badge>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Associated Contact</Label>
|
||||
{loadingContact ? (
|
||||
<p className="text-sm text-muted-foreground mt-1">Loading...</p>
|
||||
) : contactName ? (
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<Badge variant="default" className="bg-blue-600">
|
||||
<User className="w-3 h-3 mr-1" />
|
||||
{contactName}
|
||||
</Badge>
|
||||
</div>
|
||||
) : device.contactID ? (
|
||||
<p className="text-sm text-muted-foreground mt-1">Contact ID: {device.contactID}</p>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground mt-1">No contact assigned</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Technical Details */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold flex items-center gap-2">
|
||||
<Cpu className="w-4 h-4" />
|
||||
Technical Details
|
||||
</h3>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<Label>Model Number</Label>
|
||||
{editMode ? (
|
||||
<Input
|
||||
value={editedData.modelNumber || ''}
|
||||
onChange={(e) => setEditedData({...editedData, modelNumber: e.target.value})}
|
||||
className="mt-1"
|
||||
/>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{device.modelNumber || '-'}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>MAC Address</Label>
|
||||
{editMode ? (
|
||||
<Input
|
||||
value={editedData.macAddress || ''}
|
||||
onChange={(e) => setEditedData({...editedData, macAddress: e.target.value})}
|
||||
className="mt-1"
|
||||
/>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground font-mono mt-1">
|
||||
{device.macAddress || '-'}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Install Date</Label>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{device.installDate ?
|
||||
format(new Date(device.installDate), 'MMM d, yyyy') :
|
||||
'-'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Warranty Expiration</Label>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{device.warrantyExpirationDate ?
|
||||
format(new Date(device.warrantyExpirationDate), 'MMM d, yyyy') :
|
||||
'-'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>RMM Device UID</Label>
|
||||
<p className="text-sm text-muted-foreground font-mono mt-1">
|
||||
{device.rmmDeviceUID || '-'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Notes */}
|
||||
<div className="md:col-span-2 space-y-4">
|
||||
<h3 className="font-semibold">Notes</h3>
|
||||
{editMode ? (
|
||||
<Textarea
|
||||
value={editedData.notes || ''}
|
||||
onChange={(e) => setEditedData({...editedData, notes: e.target.value})}
|
||||
rows={4}
|
||||
placeholder="Add notes..."
|
||||
/>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground whitespace-pre-wrap">
|
||||
{device.notes || 'No notes available'}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-12 text-muted-foreground">
|
||||
<Server className="w-12 h-12 mx-auto mb-4 opacity-50" />
|
||||
<p>No PSA data available for this device</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Purchase History Modal */}
|
||||
{device && (
|
||||
<PurchaseHistoryModal
|
||||
configItemId={device.id}
|
||||
serialNumber={device.serialNumber}
|
||||
createDate={device.createDate}
|
||||
open={purchaseHistoryOpen}
|
||||
onOpenChange={setPurchaseHistoryOpen}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Related Tickets Modal */}
|
||||
{device && (
|
||||
<RelatedTicketsModal
|
||||
configItemId={device.id}
|
||||
open={relatedTicketsOpen}
|
||||
onOpenChange={setRelatedTicketsOpen}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
571
components/configuration-items/purchase-history-modal.tsx
Normal file
571
components/configuration-items/purchase-history-modal.tsx
Normal file
|
|
@ -0,0 +1,571 @@
|
|||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import { DollarSign, FileText, AlertCircle, Receipt } from 'lucide-react';
|
||||
import { format } from 'date-fns';
|
||||
|
||||
interface PurchaseHistoryModalProps {
|
||||
configItemId: number;
|
||||
serialNumber?: string;
|
||||
createDate?: string;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
interface PurchaseHistoryData {
|
||||
billingItems: any[];
|
||||
invoices?: any[];
|
||||
}
|
||||
|
||||
export function PurchaseHistoryModal({
|
||||
configItemId,
|
||||
serialNumber,
|
||||
createDate,
|
||||
open,
|
||||
onOpenChange,
|
||||
}: PurchaseHistoryModalProps) {
|
||||
const [data, setData] = useState<PurchaseHistoryData | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [searchAttempt, setSearchAttempt] = useState(0); // 0 = initial, 1 = before, 2 = after
|
||||
const [selectedInvoice, setSelectedInvoice] = useState<any>(null);
|
||||
const [selectedTicket, setSelectedTicket] = useState<any>(null);
|
||||
const [loadingTicket, setLoadingTicket] = useState(false);
|
||||
const [timeEntries, setTimeEntries] = useState<any[]>([]);
|
||||
const [loadingTimeEntries, setLoadingTimeEntries] = useState(false);
|
||||
const [showTimeEntries, setShowTimeEntries] = useState(false);
|
||||
const [invoiceLineItems, setInvoiceLineItems] = useState<any[]>([]);
|
||||
const [loadingInvoiceItems, setLoadingInvoiceItems] = useState(false);
|
||||
const [showInvoiceItems, setShowInvoiceItems] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (open && configItemId) {
|
||||
setSearchAttempt(0); // Reset search attempt
|
||||
fetchPurchaseHistory(0);
|
||||
}
|
||||
}, [open, configItemId]);
|
||||
|
||||
const fetchPurchaseHistory = async (attempt: number) => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
// Calculate date range based on creation date and attempt
|
||||
let startDate: Date;
|
||||
let endDate: Date;
|
||||
|
||||
if (!createDate) {
|
||||
// Fallback if no creation date: search last 120 days
|
||||
endDate = new Date();
|
||||
startDate = new Date();
|
||||
startDate.setDate(startDate.getDate() - 120);
|
||||
} else {
|
||||
const created = new Date(createDate);
|
||||
|
||||
if (attempt === 0) {
|
||||
// Initial: 60 days before to 60 days after creation
|
||||
startDate = new Date(created);
|
||||
startDate.setDate(startDate.getDate() - 60);
|
||||
endDate = new Date(created);
|
||||
endDate.setDate(endDate.getDate() + 60);
|
||||
console.log('Initial search: 60 days before/after creation date');
|
||||
} else if (attempt === 1) {
|
||||
// Second attempt: 120 days before the initial window
|
||||
startDate = new Date(created);
|
||||
startDate.setDate(startDate.getDate() - 180); // 60 + 120
|
||||
endDate = new Date(created);
|
||||
endDate.setDate(endDate.getDate() - 60);
|
||||
console.log('Extended search: 120 days BEFORE initial window');
|
||||
} else {
|
||||
// Third attempt: 120 days after the initial window
|
||||
startDate = new Date(created);
|
||||
startDate.setDate(startDate.getDate() + 60);
|
||||
endDate = new Date(created);
|
||||
endDate.setDate(endDate.getDate() + 180); // 60 + 120
|
||||
console.log('Extended search: 120 days AFTER initial window');
|
||||
}
|
||||
}
|
||||
|
||||
const url = `/api/config-enrichment?configItemId=${configItemId}&startDate=${startDate.toISOString().split('T')[0]}&endDate=${endDate.toISOString().split('T')[0]}`;
|
||||
console.log('Fetching from:', url);
|
||||
const response = await fetch(url);
|
||||
console.log('Response status:', response.status);
|
||||
|
||||
if (!response.ok) {
|
||||
const errorText = await response.text();
|
||||
console.error('Error response:', errorText);
|
||||
throw new Error('Failed to fetch purchase history');
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
console.log('Purchase history result:', result);
|
||||
|
||||
// If no results and we haven't tried all attempts yet, try next window
|
||||
if (result.billingItems.length === 0 && attempt < 2) {
|
||||
console.log('No results found, trying extended search...');
|
||||
setSearchAttempt(attempt + 1);
|
||||
await fetchPurchaseHistory(attempt + 1);
|
||||
} else {
|
||||
setData(result);
|
||||
setSearchAttempt(attempt);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Purchase history error:', err);
|
||||
setError(err instanceof Error ? err.message : 'An error occurred');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchTicketDetails = async (ticketId: number) => {
|
||||
console.log('Fetching ticket details for ID:', ticketId);
|
||||
setLoadingTicket(true);
|
||||
setShowTimeEntries(false);
|
||||
setTimeEntries([]);
|
||||
try {
|
||||
const url = `/api/tickets/${ticketId}`;
|
||||
console.log('Fetching from:', url);
|
||||
const response = await fetch(url);
|
||||
console.log('Response status:', response.status);
|
||||
|
||||
if (!response.ok) {
|
||||
const errorText = await response.text();
|
||||
console.error('Error response:', errorText);
|
||||
throw new Error('Failed to fetch ticket details');
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
console.log('Ticket result:', result);
|
||||
setSelectedTicket(result.ticket);
|
||||
} catch (err) {
|
||||
console.error('Error fetching ticket:', err);
|
||||
setSelectedTicket({ ticketNumber: ticketId, title: 'Error loading ticket details' });
|
||||
} finally {
|
||||
setLoadingTicket(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchTimeEntries = async (ticketId: number) => {
|
||||
setLoadingTimeEntries(true);
|
||||
try {
|
||||
const response = await fetch(`/api/tickets/${ticketId}/time-entries`);
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch time entries');
|
||||
}
|
||||
const result = await response.json();
|
||||
setTimeEntries(result.timeEntries || []);
|
||||
setShowTimeEntries(true);
|
||||
} catch (err) {
|
||||
console.error('Error fetching time entries:', err);
|
||||
setTimeEntries([]);
|
||||
} finally {
|
||||
setLoadingTimeEntries(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchInvoiceLineItems = async (invoiceId: number) => {
|
||||
setLoadingInvoiceItems(true);
|
||||
try {
|
||||
const response = await fetch(`/api/invoices/${invoiceId}/line-items`);
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch invoice line items');
|
||||
}
|
||||
const result = await response.json();
|
||||
setInvoiceLineItems(result.lineItems || []);
|
||||
setShowInvoiceItems(true);
|
||||
} catch (err) {
|
||||
console.error('Error fetching invoice line items:', err);
|
||||
setInvoiceLineItems([]);
|
||||
} finally {
|
||||
setLoadingInvoiceItems(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="!max-w-[95vw] !w-[95vw] max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex-1">
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<Receipt className="w-5 h-5" />
|
||||
Purchase History
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
Hardware purchase history for this device
|
||||
{serialNumber && ` - Serial: ${serialNumber}`}
|
||||
{createDate && (
|
||||
<span className="block text-xs mt-1">
|
||||
Searching around creation date: {format(new Date(createDate), 'MMM d, yyyy')}
|
||||
{searchAttempt > 0 && ` (Extended search ${searchAttempt}/2)`}
|
||||
</span>
|
||||
)}
|
||||
</DialogDescription>
|
||||
</div>
|
||||
{/* Summary Cards - Compact */}
|
||||
{!loading && !error && data && data.billingItems.length > 0 && (
|
||||
<div className="flex gap-3 mr-8">
|
||||
<div className="px-3 py-2 bg-gradient-to-br from-green-50 to-green-100 dark:from-green-950 dark:to-green-900 rounded-lg">
|
||||
<p className="text-xs text-muted-foreground">Sale Price</p>
|
||||
<p className="text-sm font-bold">
|
||||
${data.billingItems.reduce((sum: number, item: any) => sum + (item.totalAmount || 0), 0).toFixed(2)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="px-3 py-2 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-950 dark:to-blue-900 rounded-lg">
|
||||
<p className="text-xs text-muted-foreground">Cost</p>
|
||||
<p className="text-sm font-bold">
|
||||
${data.billingItems.reduce((sum: number, item: any) => sum + (item.ourCost || 0), 0).toFixed(2)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="px-3 py-2 bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-950 dark:to-purple-900 rounded-lg">
|
||||
<p className="text-xs text-muted-foreground">Profit</p>
|
||||
<p className="text-sm font-bold">
|
||||
${data.billingItems.reduce((sum: number, item: any) => sum + (item.profit || 0), 0).toFixed(2)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DialogHeader>
|
||||
|
||||
{loading && (
|
||||
<div className="space-y-4 py-4">
|
||||
<Skeleton className="h-24 w-full" />
|
||||
<Skeleton className="h-64 w-full" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="flex items-center gap-2 text-red-500 p-4 bg-red-50 dark:bg-red-950/20 rounded-lg">
|
||||
<AlertCircle className="w-5 h-5" />
|
||||
<p>Error: {error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && !error && data && (
|
||||
<div className="space-y-6 py-4">
|
||||
{/* Billing Items */}
|
||||
{data.billingItems.length > 0 ? (
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
|
||||
<FileText className="w-5 h-5" />
|
||||
Purchase Details
|
||||
</h3>
|
||||
<div className="border rounded-lg overflow-hidden overflow-x-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-28">Date</TableHead>
|
||||
<TableHead className="min-w-[300px] max-w-[400px]">Description</TableHead>
|
||||
<TableHead className="w-32">Serial</TableHead>
|
||||
<TableHead className="w-24">Cost</TableHead>
|
||||
<TableHead className="w-24">Sale Price</TableHead>
|
||||
<TableHead className="w-24">Profit</TableHead>
|
||||
<TableHead className="w-24">Invoice</TableHead>
|
||||
<TableHead className="w-24">Ticket</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{data.billingItems.map((item: any, index: number) => (
|
||||
<TableRow key={index}>
|
||||
<TableCell className="whitespace-nowrap">
|
||||
{item.itemDate ? format(new Date(item.itemDate), 'MMM d, yyyy') : '-'}
|
||||
</TableCell>
|
||||
<TableCell className="min-w-[300px] max-w-[400px]">
|
||||
<div className="text-sm font-medium whitespace-normal break-words">{item.description}</div>
|
||||
{item.purchaseOrderNumber && (
|
||||
<div className="text-xs text-muted-foreground">PO: {item.purchaseOrderNumber}</div>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{item.extractedSerialNumber && (
|
||||
<span className="font-mono text-xs bg-green-100 dark:bg-green-900 px-2 py-1 rounded">
|
||||
{item.extractedSerialNumber}
|
||||
</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="whitespace-nowrap">
|
||||
${(item.ourCost || 0).toFixed(2)}
|
||||
</TableCell>
|
||||
<TableCell className="whitespace-nowrap font-medium">
|
||||
${(item.totalAmount || 0).toFixed(2)}
|
||||
</TableCell>
|
||||
<TableCell className="whitespace-nowrap">
|
||||
<span className={item.profit > 0 ? 'text-green-600' : 'text-red-600'}>
|
||||
${(item.profit || 0).toFixed(2)}
|
||||
</span>
|
||||
<Badge variant="secondary" className="ml-2">
|
||||
{item.profitMargin}%
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{item.invoiceID ? (
|
||||
<Button
|
||||
variant="link"
|
||||
size="sm"
|
||||
className="h-auto p-0 font-mono text-blue-600 hover:text-blue-800"
|
||||
onClick={() => {
|
||||
const invoice = data.invoices?.find((inv: any) => inv.id === item.invoiceID);
|
||||
setSelectedInvoice(invoice || { id: item.invoiceID });
|
||||
}}
|
||||
>
|
||||
{item.invoiceID}
|
||||
</Button>
|
||||
) : '-'}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{item.ticketID ? (
|
||||
<Button
|
||||
variant="link"
|
||||
size="sm"
|
||||
className="h-auto p-0 font-mono text-blue-600 hover:text-blue-800"
|
||||
onClick={() => fetchTicketDetails(item.ticketID)}
|
||||
>
|
||||
{item.ticketID}
|
||||
</Button>
|
||||
) : '-'}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-12 text-muted-foreground">
|
||||
<AlertCircle className="w-12 h-12 mx-auto mb-4 opacity-50" />
|
||||
<p className="font-medium">No purchase records found for this serial number</p>
|
||||
<p className="text-sm mt-2">
|
||||
Serial number: {serialNumber || 'Not set'}
|
||||
</p>
|
||||
<p className="text-sm mt-4">This device may have been:</p>
|
||||
<ul className="text-sm mt-2 space-y-1">
|
||||
<li>• Purchased more than 90 days ago</li>
|
||||
<li>• Added manually without an invoice</li>
|
||||
<li>• Serial number not found in invoice line items</li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Invoice Details Section */}
|
||||
{selectedInvoice && (
|
||||
<div className="mt-6 border-t pt-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold flex items-center gap-2">
|
||||
<FileText className="w-5 h-5" />
|
||||
Invoice #{selectedInvoice.id} Details
|
||||
</h3>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setSelectedInvoice(null)}
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Invoice Date</p>
|
||||
<p className="font-medium">
|
||||
{selectedInvoice.invoiceDateTime ? format(new Date(selectedInvoice.invoiceDateTime), 'MMM d, yyyy') : '-'}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Total</p>
|
||||
<p className="font-medium">${(selectedInvoice.invoiceTotal || 0).toFixed(2)}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Status</p>
|
||||
<Badge variant={selectedInvoice.isPaid ? 'default' : 'secondary'}>
|
||||
{selectedInvoice.isPaid ? 'Paid' : 'Unpaid'}
|
||||
</Badge>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Due Date</p>
|
||||
<p className="font-medium">
|
||||
{selectedInvoice.dueDateTime ? format(new Date(selectedInvoice.dueDateTime), 'MMM d, yyyy') : '-'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Invoice Line Items */}
|
||||
<div className="mt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
if (!showInvoiceItems && invoiceLineItems.length === 0) {
|
||||
fetchInvoiceLineItems(selectedInvoice.id);
|
||||
} else {
|
||||
setShowInvoiceItems(!showInvoiceItems);
|
||||
}
|
||||
}}
|
||||
className="w-full"
|
||||
>
|
||||
{showInvoiceItems ? 'Hide' : 'Show'} Line Items
|
||||
{invoiceLineItems.length > 0 && ` (${invoiceLineItems.length})`}
|
||||
</Button>
|
||||
|
||||
{loadingInvoiceItems && (
|
||||
<div className="mt-4">
|
||||
<Skeleton className="h-32 w-full" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showInvoiceItems && invoiceLineItems.length > 0 && (
|
||||
<div className="mt-4 overflow-x-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="min-w-[300px] max-w-[500px]">Description</TableHead>
|
||||
<TableHead className="text-right w-20">Qty</TableHead>
|
||||
<TableHead className="text-right w-28">Unit Price</TableHead>
|
||||
<TableHead className="text-right w-28">Total</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{invoiceLineItems.map((item: any, index: number) => (
|
||||
<TableRow key={index}>
|
||||
<TableCell className="min-w-[300px] max-w-[500px]">
|
||||
<div className="text-sm font-medium whitespace-normal break-words">{item.description || '-'}</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-right whitespace-nowrap">{item.quantity || 0}</TableCell>
|
||||
<TableCell className="text-right whitespace-nowrap">${(item.unitPrice || 0).toFixed(2)}</TableCell>
|
||||
<TableCell className="text-right font-medium whitespace-nowrap">${(item.totalAmount || 0).toFixed(2)}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showInvoiceItems && invoiceLineItems.length === 0 && !loadingInvoiceItems && (
|
||||
<p className="text-sm text-muted-foreground mt-4 text-center">No line items found</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Ticket Details Section */}
|
||||
{selectedTicket && (
|
||||
<div className="mt-6 border-t pt-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold flex items-center gap-2">
|
||||
<FileText className="w-5 h-5" />
|
||||
Ticket #{selectedTicket.ticketNumber} Details
|
||||
</h3>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setSelectedTicket(null)}
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
</div>
|
||||
{loadingTicket ? (
|
||||
<Skeleton className="h-24 w-full" />
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Ticket Number</p>
|
||||
<p className="font-medium">{selectedTicket.ticketNumber}</p>
|
||||
</div>
|
||||
<div className="md:col-span-2">
|
||||
<p className="text-sm text-muted-foreground">Description</p>
|
||||
<p className="font-medium">{selectedTicket.title || '-'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Primary Resource</p>
|
||||
<p className="font-medium">{selectedTicket.assignedResourceName || '-'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Status</p>
|
||||
<Badge>{selectedTicket.status || '-'}</Badge>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Created</p>
|
||||
<p className="font-medium">
|
||||
{selectedTicket.createDate ? format(new Date(selectedTicket.createDate), 'MMM d, yyyy') : '-'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Time Entries Timeline */}
|
||||
<div className="mt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
if (!showTimeEntries && timeEntries.length === 0) {
|
||||
fetchTimeEntries(selectedTicket.id);
|
||||
} else {
|
||||
setShowTimeEntries(!showTimeEntries);
|
||||
}
|
||||
}}
|
||||
className="w-full"
|
||||
>
|
||||
{showTimeEntries ? 'Hide' : 'Show'} Time Entries Timeline
|
||||
{timeEntries.length > 0 && ` (${timeEntries.length})`}
|
||||
</Button>
|
||||
|
||||
{loadingTimeEntries && (
|
||||
<div className="mt-4">
|
||||
<Skeleton className="h-32 w-full" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showTimeEntries && timeEntries.length > 0 && (
|
||||
<div className="mt-4 space-y-3">
|
||||
{timeEntries.map((entry: any, index: number) => (
|
||||
<div key={index} className="flex gap-3 p-3 bg-white dark:bg-gray-800 rounded-lg border">
|
||||
<div className="flex-shrink-0 w-1 bg-blue-500 rounded"></div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<p className="font-medium text-sm">{entry.resourceName || 'Unknown Resource'}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{entry.dateWorked ? format(new Date(entry.dateWorked), 'MMM d, yyyy') : '-'}
|
||||
</p>
|
||||
</div>
|
||||
<Badge variant="secondary">{entry.hoursWorked || 0}h</Badge>
|
||||
</div>
|
||||
{entry.summaryNotes && (
|
||||
<p className="text-sm mt-2 text-muted-foreground">{entry.summaryNotes}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showTimeEntries && timeEntries.length === 0 && !loadingTimeEntries && (
|
||||
<p className="text-sm text-muted-foreground mt-4 text-center">No time entries found</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
198
components/configuration-items/related-tickets-modal.tsx
Normal file
198
components/configuration-items/related-tickets-modal.tsx
Normal file
|
|
@ -0,0 +1,198 @@
|
|||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import { Ticket, AlertCircle, Filter } from 'lucide-react';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { format } from 'date-fns';
|
||||
|
||||
interface RelatedTicketsModalProps {
|
||||
configItemId: number;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
export function RelatedTicketsModal({
|
||||
configItemId,
|
||||
open,
|
||||
onOpenChange,
|
||||
}: RelatedTicketsModalProps) {
|
||||
const [tickets, setTickets] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [hideRmmAlerts, setHideRmmAlerts] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
if (open && configItemId) {
|
||||
fetchRelatedTickets();
|
||||
}
|
||||
}, [open, configItemId]);
|
||||
|
||||
const fetchRelatedTickets = async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/config-items/${configItemId}/tickets`);
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch related tickets');
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
setTickets(result.tickets || []);
|
||||
} catch (err) {
|
||||
console.error('Error fetching related tickets:', err);
|
||||
setError(err instanceof Error ? err.message : 'An error occurred');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="!max-w-[95vw] !w-[95vw] max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<Ticket className="w-5 h-5" />
|
||||
Related Tickets
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
Tickets associated with this configuration item
|
||||
</DialogDescription>
|
||||
</div>
|
||||
{!loading && !error && tickets.length > 0 && (
|
||||
<div className="flex gap-3 mr-8">
|
||||
<div className="px-3 py-2 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-950 dark:to-blue-900 rounded-lg">
|
||||
<p className="text-xs text-muted-foreground">Total Tickets</p>
|
||||
<p className="text-sm font-bold">{tickets.length}</p>
|
||||
</div>
|
||||
<div className="px-3 py-2 bg-gradient-to-br from-green-50 to-green-100 dark:from-green-950 dark:to-green-900 rounded-lg">
|
||||
<p className="text-xs text-muted-foreground">Open</p>
|
||||
<p className="text-sm font-bold">
|
||||
{tickets.filter((t: any) => t.status !== 'Complete' && t.status !== 'Closed').length}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DialogHeader>
|
||||
|
||||
{loading && (
|
||||
<div className="space-y-4 py-4">
|
||||
<Skeleton className="h-64 w-full" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="flex items-center gap-2 text-red-500 p-4 bg-red-50 dark:bg-red-950/20 rounded-lg">
|
||||
<AlertCircle className="w-5 h-5" />
|
||||
<p>Error: {error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && !error && (
|
||||
<div className="py-4">
|
||||
{/* Filter Toggle */}
|
||||
<div className="flex items-center gap-2 mb-4 p-3 bg-muted/50 rounded-lg">
|
||||
<Filter className="w-4 h-4 text-muted-foreground" />
|
||||
<Label htmlFor="hide-rmm-alerts" className="text-sm cursor-pointer flex-1">
|
||||
Hide RMM Alert Tickets
|
||||
</Label>
|
||||
<Switch
|
||||
id="hide-rmm-alerts"
|
||||
checked={hideRmmAlerts}
|
||||
onCheckedChange={setHideRmmAlerts}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{tickets.filter((ticket: any) => !hideRmmAlerts || ticket.source !== 'RMM Alert').length > 0 ? (
|
||||
<div className="border rounded-lg overflow-hidden shadow-sm">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-muted/50">
|
||||
<TableHead className="w-28">Ticket #</TableHead>
|
||||
<TableHead className="min-w-[300px]">Title</TableHead>
|
||||
<TableHead className="w-32">Status</TableHead>
|
||||
<TableHead className="w-32">Priority</TableHead>
|
||||
<TableHead className="w-40">Assigned To</TableHead>
|
||||
<TableHead className="w-32">Created</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{tickets
|
||||
.filter((ticket: any) => !hideRmmAlerts || ticket.source !== 'RMM Alert')
|
||||
.map((ticket: any) => (
|
||||
<TableRow key={ticket.id} className="hover:bg-muted/50 transition-colors">
|
||||
<TableCell className="font-mono font-semibold text-blue-600 dark:text-blue-400">
|
||||
{ticket.ticketNumber}
|
||||
</TableCell>
|
||||
<TableCell className="min-w-[300px]">
|
||||
<div className="text-sm font-medium whitespace-normal break-words">
|
||||
{ticket.title || '-'}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge
|
||||
variant={ticket.status === 'Complete' || ticket.status === 'Closed' ? 'secondary' : 'default'}
|
||||
>
|
||||
{ticket.status || '-'}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge
|
||||
variant={ticket.priority === 'High' || ticket.priority === 'Critical' ? 'destructive' : 'secondary'}
|
||||
>
|
||||
{ticket.priority || '-'}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-sm">{ticket.assignedResourceName || '-'}</TableCell>
|
||||
<TableCell className="whitespace-nowrap text-sm text-muted-foreground">
|
||||
{ticket.createDate ? format(new Date(ticket.createDate), 'MMM d, yyyy') : '-'}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-12 text-muted-foreground">
|
||||
<AlertCircle className="w-12 h-12 mx-auto mb-4 opacity-50" />
|
||||
<p className="font-medium">
|
||||
{hideRmmAlerts && tickets.length > 0
|
||||
? 'All tickets are RMM Alerts (filtered out)'
|
||||
: 'No related tickets found'
|
||||
}
|
||||
</p>
|
||||
<p className="text-sm mt-2">
|
||||
{hideRmmAlerts && tickets.length > 0
|
||||
? 'Toggle the filter above to show RMM Alert tickets'
|
||||
: 'This configuration item has no associated tickets'
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
337
components/configuration-items/rmm-tab.tsx
Normal file
337
components/configuration-items/rmm-tab.tsx
Normal file
|
|
@ -0,0 +1,337 @@
|
|||
'use client';
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import {
|
||||
Monitor,
|
||||
Info,
|
||||
Network,
|
||||
HardDrive,
|
||||
Shield,
|
||||
Wifi,
|
||||
XCircle
|
||||
} from 'lucide-react';
|
||||
import { format } from 'date-fns';
|
||||
import { DattoRMMDevice } from '@/lib/types/datto-rmm';
|
||||
import { lookupDeviceBySerial, formatDeviceInfo } from '@/lib/utils/device-lookup';
|
||||
|
||||
interface RMMTabProps {
|
||||
device?: DattoRMMDevice;
|
||||
}
|
||||
|
||||
export function RMMTab({ device }: RMMTabProps) {
|
||||
if (!device) {
|
||||
return (
|
||||
<Card className="border-0 shadow-lg">
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-center py-12 text-muted-foreground">
|
||||
<Monitor className="w-12 h-12 mx-auto mb-4 opacity-50" />
|
||||
<p>No RMM data available for this device</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="border-0 shadow-lg">
|
||||
<CardHeader className="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 rounded-t-lg">
|
||||
<CardTitle className="text-lg">RMM Device Information</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Basic Information */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold flex items-center gap-2">
|
||||
<Info className="w-4 h-4" />
|
||||
Basic Information
|
||||
</h3>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<Label>Hostname</Label>
|
||||
<p className="text-sm text-muted-foreground mt-1">{device.hostname}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Description</Label>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{device.description || '-'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Serial Number</Label>
|
||||
<p className="text-sm text-muted-foreground font-mono mt-1">
|
||||
{device.serialNumber || '-'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Device Type</Label>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{device.deviceType?.type || '-'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Status</Label>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
{device.online ? (
|
||||
<Badge variant="default" className="bg-green-600">
|
||||
<Wifi className="w-3 h-3 mr-1" />
|
||||
Online
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="secondary">
|
||||
<XCircle className="w-3 h-3 mr-1" />
|
||||
Offline
|
||||
</Badge>
|
||||
)}
|
||||
{device.rebootRequired && (
|
||||
<Badge variant="outline" className="text-orange-600">
|
||||
Reboot Required
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Network Information */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold flex items-center gap-2">
|
||||
<Network className="w-4 h-4" />
|
||||
Network Information
|
||||
</h3>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<Label>Internal IP</Label>
|
||||
<p className="text-sm text-muted-foreground font-mono mt-1">
|
||||
{device.intIpAddress || '-'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>External IP</Label>
|
||||
<p className="text-sm text-muted-foreground font-mono mt-1">
|
||||
{device.extIpAddress || '-'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>MAC Addresses</Label>
|
||||
<div className="text-sm text-muted-foreground font-mono mt-1">
|
||||
{device.macAddresses && device.macAddresses.length > 0 ? (
|
||||
device.macAddresses.map((mac, i) => (
|
||||
<div key={i}>{mac}</div>
|
||||
))
|
||||
) : (
|
||||
'-'
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Domain</Label>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{device.domain || '-'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Last Seen</Label>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{device.lastSeen ?
|
||||
format(new Date(device.lastSeen), 'MMM d, yyyy h:mm a') :
|
||||
'-'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Last User</Label>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{device.lastLoggedInUser || '-'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* System Information */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold flex items-center gap-2">
|
||||
<HardDrive className="w-4 h-4" />
|
||||
System Information
|
||||
</h3>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<Label>Operating System</Label>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{device.operatingSystem || '-'}
|
||||
</p>
|
||||
{device.a64Bit !== undefined && (
|
||||
<Badge variant="outline" className="text-xs mt-1">
|
||||
{device.a64Bit ? '64-bit' : '32-bit'}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Device Category</Label>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{device.deviceType?.category || '-'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Manufacturer</Label>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{(() => {
|
||||
if (device.manufacturer) return device.manufacturer;
|
||||
const deviceInfo = lookupDeviceBySerial(device.serialNumber);
|
||||
return deviceInfo?.manufacturer || '-';
|
||||
})()}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Model</Label>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{(() => {
|
||||
if (device.model) return device.model;
|
||||
const deviceInfo = lookupDeviceBySerial(device.serialNumber);
|
||||
return deviceInfo?.estimatedModel || deviceInfo?.modelFamily || '-';
|
||||
})()}
|
||||
</p>
|
||||
{!device.model && device.serialNumber && (
|
||||
<p className="text-xs text-muted-foreground mt-1 italic">
|
||||
Estimated from serial: {device.serialNumber}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>CPU</Label>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{device.cpuName || '-'} {device.cpuCores ? `(${device.cpuCores} cores)` : ''}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Memory</Label>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{device.memory ? `${(device.memory / 1024).toFixed(2)} GB` : '-'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Total Disk Size</Label>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{device.diskSize ? `${(device.diskSize / (1024 * 1024 * 1024)).toFixed(2)} GB` : '-'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Agent Version</Label>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{device.displayVersion || device.cagVersion || '-'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Last Reboot</Label>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{device.lastReboot ?
|
||||
format(new Date(device.lastReboot), 'MMM d, yyyy h:mm a') :
|
||||
'-'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Created Date</Label>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{device.creationDate ?
|
||||
format(new Date(device.creationDate), 'MMM d, yyyy') :
|
||||
'-'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{device.warrantyDate && (
|
||||
<div>
|
||||
<Label>Warranty Expiration</Label>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{format(new Date(device.warrantyDate), 'MMM d, yyyy')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Security Information */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold flex items-center gap-2">
|
||||
<Shield className="w-4 h-4" />
|
||||
Security Information
|
||||
</h3>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<Label>Antivirus</Label>
|
||||
<div className="space-y-1 mt-1">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{device.antivirus?.antivirusProduct || 'Not detected'}
|
||||
</p>
|
||||
{device.antivirus?.antivirusStatus && (
|
||||
<Badge
|
||||
variant={device.antivirus.antivirusStatus === 'RunningAndUpToDate' ? 'default' : 'secondary'}
|
||||
className={device.antivirus.antivirusStatus === 'RunningAndUpToDate' ? 'bg-green-600' : ''}
|
||||
>
|
||||
{device.antivirus.antivirusStatus.replace(/([A-Z])/g, ' $1').trim()}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Patch Management</Label>
|
||||
<div className="space-y-2 mt-1">
|
||||
{device.patchManagement?.patchStatus && (
|
||||
<Badge
|
||||
variant={device.patchManagement.patchStatus === 'FullyPatched' ? 'default' : 'secondary'}
|
||||
className={device.patchManagement.patchStatus === 'FullyPatched' ? 'bg-green-600' : ''}
|
||||
>
|
||||
{device.patchManagement.patchStatus.replace(/([A-Z])/g, ' $1').trim()}
|
||||
</Badge>
|
||||
)}
|
||||
<div className="flex gap-4">
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground">Pending</p>
|
||||
<p className="text-lg font-semibold text-orange-600">
|
||||
{device.patchManagement?.patchesApprovedPending || 0}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground">Installed</p>
|
||||
<p className="text-lg font-semibold text-green-600">
|
||||
{device.patchManagement?.patchesInstalled || 0}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground">Not Approved</p>
|
||||
<p className="text-lg font-semibold text-gray-600">
|
||||
{device.patchManagement?.patchesNotApproved || 0}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
110
components/configuration-items/status-cards.tsx
Normal file
110
components/configuration-items/status-cards.tsx
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
'use client';
|
||||
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import {
|
||||
Server,
|
||||
Monitor,
|
||||
Power,
|
||||
Clock,
|
||||
CheckCircle,
|
||||
XCircle
|
||||
} from 'lucide-react';
|
||||
import { format } from 'date-fns';
|
||||
import { ConfigurationItem } from '@/lib/types/autotask';
|
||||
import { DattoRMMDevice } from '@/lib/types/datto-rmm';
|
||||
|
||||
interface StatusCardsProps {
|
||||
device?: ConfigurationItem;
|
||||
rmmDevice?: DattoRMMDevice;
|
||||
}
|
||||
|
||||
export function StatusCards({ device, rmmDevice }: StatusCardsProps) {
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<Card className="border-0 shadow-lg">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Status</p>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
{device?.isActive ? (
|
||||
<Badge variant="default" className="bg-green-600">
|
||||
<CheckCircle className="w-3 h-3 mr-1" />
|
||||
Active
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="secondary">
|
||||
<XCircle className="w-3 h-3 mr-1" />
|
||||
Inactive
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Power className={`h-5 w-5 ${device?.isActive ? 'text-green-600' : 'text-gray-400'}`} />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-0 shadow-lg">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">PSA</p>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
{device ? (
|
||||
<CheckCircle className="w-4 h-4 text-green-600" />
|
||||
) : (
|
||||
<XCircle className="w-4 h-4 text-gray-400" />
|
||||
)}
|
||||
<span className="text-sm font-medium">
|
||||
{device ? 'Connected' : 'Not Found'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Server className="h-5 w-5 text-purple-600" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-0 shadow-lg">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">RMM</p>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
{rmmDevice ? (
|
||||
<CheckCircle className="w-4 h-4 text-green-600" />
|
||||
) : (
|
||||
<XCircle className="w-4 h-4 text-gray-400" />
|
||||
)}
|
||||
<span className="text-sm font-medium">
|
||||
{rmmDevice ? 'Connected' : 'Not Found'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Monitor className="h-5 w-5 text-blue-600" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-0 shadow-lg">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Last Seen</p>
|
||||
<p className="text-sm font-medium mt-1">
|
||||
{device?.lastModifiedTime ?
|
||||
format(new Date(device.lastModifiedTime), 'MMM d, yyyy') :
|
||||
rmmDevice?.lastSeen ?
|
||||
format(new Date(rmmDevice.lastSeen), 'MMM d, yyyy') :
|
||||
'-'}
|
||||
</p>
|
||||
</div>
|
||||
<Clock className="h-5 w-5 text-orange-600" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
208
components/tasks/task-list.tsx
Normal file
208
components/tasks/task-list.tsx
Normal file
|
|
@ -0,0 +1,208 @@
|
|||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { format } from 'date-fns';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Task, TaskStatus, Priority } from '@/lib/types/autotask';
|
||||
import { useApi } from '@/lib/hooks/use-api';
|
||||
import { ChevronRight, AlertCircle, Clock, CheckCircle, ListTodo } from 'lucide-react';
|
||||
|
||||
interface TaskListProps {
|
||||
resourceId?: number;
|
||||
projectId?: number;
|
||||
}
|
||||
|
||||
export function TaskList({ resourceId, projectId }: TaskListProps) {
|
||||
const [statusLabels, setStatusLabels] = useState<Record<number, string>>({});
|
||||
|
||||
let url = '/api/tasks';
|
||||
if (resourceId) url += `?resourceId=${resourceId}`;
|
||||
else if (projectId) url += `?projectId=${projectId}`;
|
||||
|
||||
const { data, loading, error, refetch } = useApi<{ tasks: Task[] }>(url);
|
||||
|
||||
// Fetch picklist values for status
|
||||
useEffect(() => {
|
||||
fetch('/api/picklists?entity=Tasks&field=status')
|
||||
.then(res => res.json())
|
||||
.then(data => setStatusLabels(data.picklistValues || {}))
|
||||
.catch(console.error);
|
||||
}, []);
|
||||
|
||||
const getStatusBadge = (status: number) => {
|
||||
const label = statusLabels[status] || `Status ${status}`;
|
||||
let variant: 'default' | 'secondary' | 'destructive' | 'outline' = 'default';
|
||||
let icon = null;
|
||||
|
||||
switch (status) {
|
||||
case TaskStatus.New:
|
||||
variant = 'destructive';
|
||||
icon = <AlertCircle className="w-3 h-3 mr-1" />;
|
||||
break;
|
||||
case TaskStatus.InProgress:
|
||||
variant = 'default';
|
||||
icon = <Clock className="w-3 h-3 mr-1" />;
|
||||
break;
|
||||
case TaskStatus.Complete:
|
||||
variant = 'secondary';
|
||||
icon = <CheckCircle className="w-3 h-3 mr-1" />;
|
||||
break;
|
||||
default:
|
||||
variant = 'outline';
|
||||
}
|
||||
|
||||
return (
|
||||
<Badge variant={variant} className="flex items-center">
|
||||
{icon}
|
||||
{label}
|
||||
</Badge>
|
||||
);
|
||||
};
|
||||
|
||||
const getPriorityBadge = (priority: number) => {
|
||||
let variant: 'default' | 'secondary' | 'destructive' | 'outline' = 'default';
|
||||
let label = 'Normal';
|
||||
|
||||
switch (priority) {
|
||||
case Priority.Critical:
|
||||
variant = 'destructive';
|
||||
label = 'Critical';
|
||||
break;
|
||||
case Priority.High:
|
||||
variant = 'default';
|
||||
label = 'High';
|
||||
break;
|
||||
case Priority.Medium:
|
||||
variant = 'secondary';
|
||||
label = 'Medium';
|
||||
break;
|
||||
case Priority.Low:
|
||||
variant = 'outline';
|
||||
label = 'Low';
|
||||
break;
|
||||
}
|
||||
|
||||
return <Badge variant={variant}>{label}</Badge>;
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tasks</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
{[1, 2, 3].map(i => (
|
||||
<Skeleton key={i} className="h-12 w-full" />
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tasks</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-red-500 flex items-center gap-2">
|
||||
<AlertCircle className="w-4 h-4" />
|
||||
Error loading tasks: {error}
|
||||
</div>
|
||||
<Button onClick={refetch} className="mt-4">
|
||||
Retry
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const tasks = data?.tasks || [];
|
||||
|
||||
return (
|
||||
<Card className="border-0 shadow-lg">
|
||||
<CardHeader className="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 rounded-t-lg">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-lg flex items-center gap-2">
|
||||
<ListTodo className="w-5 h-5 text-purple-600" />
|
||||
Tasks
|
||||
<Badge variant="secondary" className="ml-2">{tasks.length}</Badge>
|
||||
</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-6">
|
||||
{tasks.length === 0 ? (
|
||||
<div className="text-muted-foreground text-center py-8">
|
||||
No tasks found
|
||||
</div>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Title</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Priority</TableHead>
|
||||
<TableHead>Progress</TableHead>
|
||||
<TableHead>Created</TableHead>
|
||||
<TableHead>Due</TableHead>
|
||||
<TableHead></TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{tasks.map((task) => (
|
||||
<TableRow key={task.id}>
|
||||
<TableCell className="max-w-md truncate">
|
||||
{task.title}
|
||||
</TableCell>
|
||||
<TableCell>{getStatusBadge(task.status)}</TableCell>
|
||||
<TableCell>{getPriorityBadge(task.priority)}</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-20 bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
className="bg-blue-500 h-2 rounded-full"
|
||||
style={{ width: `${task.percentComplete || 0}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{task.percentComplete || 0}%
|
||||
</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{format(new Date(task.createDateTime), 'MMM d, yyyy')}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{task.endDateTime
|
||||
? format(new Date(task.endDateTime), 'MMM d, yyyy')
|
||||
: '-'}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Button variant="ghost" size="sm">
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
8
components/theme-provider.tsx
Normal file
8
components/theme-provider.tsx
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { ThemeProvider as NextThemesProvider, type ThemeProviderProps } from "next-themes"
|
||||
|
||||
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
|
||||
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
|
||||
}
|
||||
43
components/theme-toggle.tsx
Normal file
43
components/theme-toggle.tsx
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Moon, Sun, Monitor } from "lucide-react"
|
||||
import { useTheme } from "next-themes"
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu"
|
||||
|
||||
export function ThemeToggle() {
|
||||
const { setTheme, theme } = useTheme()
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="relative">
|
||||
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
||||
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
||||
<span className="sr-only">Toggle theme</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => setTheme("light")}>
|
||||
<Sun className="mr-2 h-4 w-4" />
|
||||
<span>Light</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setTheme("dark")}>
|
||||
<Moon className="mr-2 h-4 w-4" />
|
||||
<span>Dark</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setTheme("system")}>
|
||||
<Monitor className="mr-2 h-4 w-4" />
|
||||
<span>System</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)
|
||||
}
|
||||
221
components/tickets/ticket-list.tsx
Normal file
221
components/tickets/ticket-list.tsx
Normal file
|
|
@ -0,0 +1,221 @@
|
|||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { format } from 'date-fns';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Ticket as TicketType, TicketStatus, Priority } from '@/lib/types/autotask';
|
||||
import { useApi } from '@/lib/hooks/use-api';
|
||||
import { ChevronRight, AlertCircle, Clock, CheckCircle, Ticket } from 'lucide-react';
|
||||
|
||||
interface TicketListProps {
|
||||
resourceId?: number;
|
||||
companyId?: number;
|
||||
}
|
||||
|
||||
export function TicketList({ resourceId, companyId }: TicketListProps) {
|
||||
const [statusLabels, setStatusLabels] = useState<Record<number, string>>({});
|
||||
const [priorityLabels, setPriorityLabels] = useState<Record<number, string>>({});
|
||||
|
||||
let url = '/api/tickets';
|
||||
if (resourceId) url += `?resourceId=${resourceId}`;
|
||||
else if (companyId) url += `?companyId=${companyId}`;
|
||||
|
||||
const { data, loading, error, refetch } = useApi<{ tickets: TicketType[] }>(url);
|
||||
|
||||
// Fetch picklist values for status and priority
|
||||
useEffect(() => {
|
||||
fetch('/api/picklists?entity=Tickets&field=status')
|
||||
.then(res => res.json())
|
||||
.then(data => setStatusLabels(data.picklistValues || {}))
|
||||
.catch(console.error);
|
||||
|
||||
fetch('/api/picklists?entity=Tickets&field=priority')
|
||||
.then(res => res.json())
|
||||
.then(data => setPriorityLabels(data.picklistValues || {}))
|
||||
.catch(console.error);
|
||||
}, []);
|
||||
|
||||
const getStatusBadge = (status: number) => {
|
||||
const label = statusLabels[status] || `Status ${status}`;
|
||||
let variant: 'default' | 'secondary' | 'destructive' | 'outline' = 'default';
|
||||
let icon = null;
|
||||
|
||||
switch (status) {
|
||||
case TicketStatus.New:
|
||||
variant = 'destructive';
|
||||
icon = <AlertCircle className="w-3 h-3 mr-1" />;
|
||||
break;
|
||||
case TicketStatus.InProgress:
|
||||
variant = 'default';
|
||||
icon = <Clock className="w-3 h-3 mr-1" />;
|
||||
break;
|
||||
case TicketStatus.Complete:
|
||||
variant = 'secondary';
|
||||
icon = <CheckCircle className="w-3 h-3 mr-1" />;
|
||||
break;
|
||||
default:
|
||||
variant = 'outline';
|
||||
}
|
||||
|
||||
return (
|
||||
<Badge variant={variant} className="flex items-center">
|
||||
{icon}
|
||||
{label}
|
||||
</Badge>
|
||||
);
|
||||
};
|
||||
|
||||
const getPriorityBadge = (priority: number) => {
|
||||
const label = priorityLabels[priority] || `Priority ${priority}`;
|
||||
let variant: 'default' | 'secondary' | 'destructive' | 'outline' = 'default';
|
||||
|
||||
switch (priority) {
|
||||
case Priority.Critical:
|
||||
variant = 'destructive';
|
||||
break;
|
||||
case Priority.High:
|
||||
variant = 'default';
|
||||
break;
|
||||
case Priority.Medium:
|
||||
variant = 'secondary';
|
||||
break;
|
||||
case Priority.Low:
|
||||
variant = 'outline';
|
||||
break;
|
||||
}
|
||||
|
||||
return <Badge variant={variant}>{label}</Badge>;
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tickets</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
{[1, 2, 3].map(i => (
|
||||
<Skeleton key={i} className="h-12 w-full" />
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
const isConfigError = error.includes('not configured') || error.includes('configuration');
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tickets</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div className="text-red-500 flex items-center gap-2">
|
||||
<AlertCircle className="w-4 h-4" />
|
||||
{isConfigError ? 'API Configuration Required' : `Error loading tickets: ${error}`}
|
||||
</div>
|
||||
{isConfigError && (
|
||||
<div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
|
||||
<p className="text-sm mb-3">
|
||||
The Autotask API is not configured. Please set up your credentials to start using the dashboard.
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<Button asChild size="sm">
|
||||
<a href="/setup">Go to Setup</a>
|
||||
</Button>
|
||||
<Button onClick={refetch} variant="outline" size="sm">
|
||||
Retry
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{!isConfigError && (
|
||||
<Button onClick={refetch} className="mt-4">
|
||||
Retry
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const tickets = data?.tickets || [];
|
||||
|
||||
return (
|
||||
<Card className="border-0 shadow-lg">
|
||||
<CardHeader className="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 rounded-t-lg">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-lg flex items-center gap-2">
|
||||
<Ticket className="w-5 h-5 text-blue-600" />
|
||||
Tickets
|
||||
<Badge variant="secondary" className="ml-2">{tickets.length}</Badge>
|
||||
</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-6">
|
||||
{tickets.length === 0 ? (
|
||||
<div className="text-muted-foreground text-center py-8">
|
||||
No tickets found
|
||||
</div>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Number</TableHead>
|
||||
<TableHead>Title</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Priority</TableHead>
|
||||
<TableHead>Created</TableHead>
|
||||
<TableHead>Due</TableHead>
|
||||
<TableHead></TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{tickets.map((ticket) => (
|
||||
<TableRow key={ticket.id}>
|
||||
<TableCell className="font-mono">
|
||||
{ticket.ticketNumber}
|
||||
</TableCell>
|
||||
<TableCell className="max-w-md truncate">
|
||||
{ticket.title}
|
||||
</TableCell>
|
||||
<TableCell>{getStatusBadge(ticket.status)}</TableCell>
|
||||
<TableCell>{getPriorityBadge(ticket.priority)}</TableCell>
|
||||
<TableCell>
|
||||
{format(new Date(ticket.createDate), 'MMM d, yyyy')}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{ticket.dueDateTime
|
||||
? format(new Date(ticket.dueDateTime), 'MMM d, yyyy')
|
||||
: '-'}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Button variant="ghost" size="sm">
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
157
components/ui/alert-dialog.tsx
Normal file
157
components/ui/alert-dialog.tsx
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { buttonVariants } from "@/components/ui/button"
|
||||
|
||||
function AlertDialog({
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
|
||||
return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
|
||||
}
|
||||
|
||||
function AlertDialogTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogOverlay({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Overlay
|
||||
data-slot="alert-dialog-overlay"
|
||||
className={cn(
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
|
||||
return (
|
||||
<AlertDialogPortal>
|
||||
<AlertDialogOverlay />
|
||||
<AlertDialogPrimitive.Content
|
||||
data-slot="alert-dialog-content"
|
||||
className={cn(
|
||||
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</AlertDialogPortal>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogHeader({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-dialog-header"
|
||||
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogFooter({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-dialog-footer"
|
||||
className={cn(
|
||||
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogTitle({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Title
|
||||
data-slot="alert-dialog-title"
|
||||
className={cn("text-lg font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Description
|
||||
data-slot="alert-dialog-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogAction({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Action
|
||||
className={cn(buttonVariants(), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogCancel({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Cancel
|
||||
className={cn(buttonVariants({ variant: "outline" }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
AlertDialog,
|
||||
AlertDialogPortal,
|
||||
AlertDialogOverlay,
|
||||
AlertDialogTrigger,
|
||||
AlertDialogContent,
|
||||
AlertDialogHeader,
|
||||
AlertDialogFooter,
|
||||
AlertDialogTitle,
|
||||
AlertDialogDescription,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
}
|
||||
46
components/ui/badge.tsx
Normal file
46
components/ui/badge.tsx
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const badgeVariants = cva(
|
||||
"inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
|
||||
secondary:
|
||||
"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
|
||||
destructive:
|
||||
"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||
outline:
|
||||
"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Badge({
|
||||
className,
|
||||
variant,
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"span"> &
|
||||
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
|
||||
const Comp = asChild ? Slot : "span"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="badge"
|
||||
className={cn(badgeVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants }
|
||||
60
components/ui/button.tsx
Normal file
60
components/ui/button.tsx
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||
destructive:
|
||||
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||
outline:
|
||||
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
ghost:
|
||||
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
||||
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
||||
icon: "size-9",
|
||||
"icon-sm": "size-8",
|
||||
"icon-lg": "size-10",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Button({
|
||||
className,
|
||||
variant,
|
||||
size,
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"button"> &
|
||||
VariantProps<typeof buttonVariants> & {
|
||||
asChild?: boolean
|
||||
}) {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="button"
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Button, buttonVariants }
|
||||
216
components/ui/calendar.tsx
Normal file
216
components/ui/calendar.tsx
Normal file
|
|
@ -0,0 +1,216 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import {
|
||||
ChevronDownIcon,
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
} from "lucide-react"
|
||||
import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button, buttonVariants } from "@/components/ui/button"
|
||||
|
||||
function Calendar({
|
||||
className,
|
||||
classNames,
|
||||
showOutsideDays = true,
|
||||
captionLayout = "label",
|
||||
buttonVariant = "ghost",
|
||||
formatters,
|
||||
components,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DayPicker> & {
|
||||
buttonVariant?: React.ComponentProps<typeof Button>["variant"]
|
||||
}) {
|
||||
const defaultClassNames = getDefaultClassNames()
|
||||
|
||||
return (
|
||||
<DayPicker
|
||||
showOutsideDays={showOutsideDays}
|
||||
className={cn(
|
||||
"bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
|
||||
String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
|
||||
String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
|
||||
className
|
||||
)}
|
||||
captionLayout={captionLayout}
|
||||
formatters={{
|
||||
formatMonthDropdown: (date) =>
|
||||
date.toLocaleString("default", { month: "short" }),
|
||||
...formatters,
|
||||
}}
|
||||
classNames={{
|
||||
root: cn("w-fit", defaultClassNames.root),
|
||||
months: cn(
|
||||
"flex gap-4 flex-col md:flex-row relative",
|
||||
defaultClassNames.months
|
||||
),
|
||||
month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
|
||||
nav: cn(
|
||||
"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
|
||||
defaultClassNames.nav
|
||||
),
|
||||
button_previous: cn(
|
||||
buttonVariants({ variant: buttonVariant }),
|
||||
"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
|
||||
defaultClassNames.button_previous
|
||||
),
|
||||
button_next: cn(
|
||||
buttonVariants({ variant: buttonVariant }),
|
||||
"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
|
||||
defaultClassNames.button_next
|
||||
),
|
||||
month_caption: cn(
|
||||
"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
|
||||
defaultClassNames.month_caption
|
||||
),
|
||||
dropdowns: cn(
|
||||
"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
|
||||
defaultClassNames.dropdowns
|
||||
),
|
||||
dropdown_root: cn(
|
||||
"relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
|
||||
defaultClassNames.dropdown_root
|
||||
),
|
||||
dropdown: cn(
|
||||
"absolute bg-popover inset-0 opacity-0",
|
||||
defaultClassNames.dropdown
|
||||
),
|
||||
caption_label: cn(
|
||||
"select-none font-medium",
|
||||
captionLayout === "label"
|
||||
? "text-sm"
|
||||
: "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
|
||||
defaultClassNames.caption_label
|
||||
),
|
||||
table: "w-full border-collapse",
|
||||
weekdays: cn("flex", defaultClassNames.weekdays),
|
||||
weekday: cn(
|
||||
"text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
|
||||
defaultClassNames.weekday
|
||||
),
|
||||
week: cn("flex w-full mt-2", defaultClassNames.week),
|
||||
week_number_header: cn(
|
||||
"select-none w-(--cell-size)",
|
||||
defaultClassNames.week_number_header
|
||||
),
|
||||
week_number: cn(
|
||||
"text-[0.8rem] select-none text-muted-foreground",
|
||||
defaultClassNames.week_number
|
||||
),
|
||||
day: cn(
|
||||
"relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
|
||||
props.showWeekNumber
|
||||
? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
|
||||
: "[&:first-child[data-selected=true]_button]:rounded-l-md",
|
||||
defaultClassNames.day
|
||||
),
|
||||
range_start: cn(
|
||||
"rounded-l-md bg-accent",
|
||||
defaultClassNames.range_start
|
||||
),
|
||||
range_middle: cn("rounded-none", defaultClassNames.range_middle),
|
||||
range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
|
||||
today: cn(
|
||||
"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
|
||||
defaultClassNames.today
|
||||
),
|
||||
outside: cn(
|
||||
"text-muted-foreground aria-selected:text-muted-foreground",
|
||||
defaultClassNames.outside
|
||||
),
|
||||
disabled: cn(
|
||||
"text-muted-foreground opacity-50",
|
||||
defaultClassNames.disabled
|
||||
),
|
||||
hidden: cn("invisible", defaultClassNames.hidden),
|
||||
...classNames,
|
||||
}}
|
||||
components={{
|
||||
Root: ({ className, rootRef, ...props }) => {
|
||||
return (
|
||||
<div
|
||||
data-slot="calendar"
|
||||
ref={rootRef}
|
||||
className={cn(className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
},
|
||||
Chevron: ({ className, orientation, ...props }) => {
|
||||
if (orientation === "left") {
|
||||
return (
|
||||
<ChevronLeftIcon className={cn("size-4", className)} {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
if (orientation === "right") {
|
||||
return (
|
||||
<ChevronRightIcon
|
||||
className={cn("size-4", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<ChevronDownIcon className={cn("size-4", className)} {...props} />
|
||||
)
|
||||
},
|
||||
DayButton: CalendarDayButton,
|
||||
WeekNumber: ({ children, ...props }) => {
|
||||
return (
|
||||
<td {...props}>
|
||||
<div className="flex size-(--cell-size) items-center justify-center text-center">
|
||||
{children}
|
||||
</div>
|
||||
</td>
|
||||
)
|
||||
},
|
||||
...components,
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CalendarDayButton({
|
||||
className,
|
||||
day,
|
||||
modifiers,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DayButton>) {
|
||||
const defaultClassNames = getDefaultClassNames()
|
||||
|
||||
const ref = React.useRef<HTMLButtonElement>(null)
|
||||
React.useEffect(() => {
|
||||
if (modifiers.focused) ref.current?.focus()
|
||||
}, [modifiers.focused])
|
||||
|
||||
return (
|
||||
<Button
|
||||
ref={ref}
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
data-day={day.date.toLocaleDateString()}
|
||||
data-selected-single={
|
||||
modifiers.selected &&
|
||||
!modifiers.range_start &&
|
||||
!modifiers.range_end &&
|
||||
!modifiers.range_middle
|
||||
}
|
||||
data-range-start={modifiers.range_start}
|
||||
data-range-end={modifiers.range_end}
|
||||
data-range-middle={modifiers.range_middle}
|
||||
className={cn(
|
||||
"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
|
||||
defaultClassNames.day,
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Calendar, CalendarDayButton }
|
||||
92
components/ui/card.tsx
Normal file
92
components/ui/card.tsx
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card"
|
||||
className={cn(
|
||||
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn(
|
||||
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-title"
|
||||
className={cn("leading-none font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-action"
|
||||
className={cn(
|
||||
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-content"
|
||||
className={cn("px-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
}
|
||||
32
components/ui/checkbox.tsx
Normal file
32
components/ui/checkbox.tsx
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
|
||||
import { CheckIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Checkbox({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
|
||||
return (
|
||||
<CheckboxPrimitive.Root
|
||||
data-slot="checkbox"
|
||||
className={cn(
|
||||
"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<CheckboxPrimitive.Indicator
|
||||
data-slot="checkbox-indicator"
|
||||
className="grid place-content-center text-current transition-none"
|
||||
>
|
||||
<CheckIcon className="size-3.5" />
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
export { Checkbox }
|
||||
33
components/ui/collapsible.tsx
Normal file
33
components/ui/collapsible.tsx
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
"use client"
|
||||
|
||||
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
|
||||
|
||||
function Collapsible({
|
||||
...props
|
||||
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
|
||||
return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
|
||||
}
|
||||
|
||||
function CollapsibleTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
|
||||
return (
|
||||
<CollapsiblePrimitive.CollapsibleTrigger
|
||||
data-slot="collapsible-trigger"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CollapsibleContent({
|
||||
...props
|
||||
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
|
||||
return (
|
||||
<CollapsiblePrimitive.CollapsibleContent
|
||||
data-slot="collapsible-content"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Collapsible, CollapsibleTrigger, CollapsibleContent }
|
||||
143
components/ui/dialog.tsx
Normal file
143
components/ui/dialog.tsx
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
||||
import { XIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Dialog({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
|
||||
return <DialogPrimitive.Root data-slot="dialog" {...props} />
|
||||
}
|
||||
|
||||
function DialogTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
|
||||
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
|
||||
}
|
||||
|
||||
function DialogPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
|
||||
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
|
||||
}
|
||||
|
||||
function DialogClose({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
|
||||
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
|
||||
}
|
||||
|
||||
function DialogOverlay({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
|
||||
return (
|
||||
<DialogPrimitive.Overlay
|
||||
data-slot="dialog-overlay"
|
||||
className={cn(
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogContent({
|
||||
className,
|
||||
children,
|
||||
showCloseButton = true,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
|
||||
showCloseButton?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DialogPortal data-slot="dialog-portal">
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Content
|
||||
data-slot="dialog-content"
|
||||
className={cn(
|
||||
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<DialogPrimitive.Close
|
||||
data-slot="dialog-close"
|
||||
className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
|
||||
>
|
||||
<XIcon />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-header"
|
||||
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-footer"
|
||||
className={cn(
|
||||
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogTitle({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
|
||||
return (
|
||||
<DialogPrimitive.Title
|
||||
data-slot="dialog-title"
|
||||
className={cn("text-lg leading-none font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
|
||||
return (
|
||||
<DialogPrimitive.Description
|
||||
data-slot="dialog-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogOverlay,
|
||||
DialogPortal,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
}
|
||||
257
components/ui/dropdown-menu.tsx
Normal file
257
components/ui/dropdown-menu.tsx
Normal file
|
|
@ -0,0 +1,257 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
|
||||
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function DropdownMenu({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
|
||||
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Trigger
|
||||
data-slot="dropdown-menu-trigger"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuContent({
|
||||
className,
|
||||
sideOffset = 4,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Portal>
|
||||
<DropdownMenuPrimitive.Content
|
||||
data-slot="dropdown-menu-content"
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</DropdownMenuPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuItem({
|
||||
className,
|
||||
inset,
|
||||
variant = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
|
||||
inset?: boolean
|
||||
variant?: "default" | "destructive"
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Item
|
||||
data-slot="dropdown-menu-item"
|
||||
data-inset={inset}
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuCheckboxItem({
|
||||
className,
|
||||
children,
|
||||
checked,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.CheckboxItem
|
||||
data-slot="dropdown-menu-checkbox-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<CheckIcon className="size-4" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.CheckboxItem>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuRadioGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.RadioGroup
|
||||
data-slot="dropdown-menu-radio-group"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuRadioItem({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.RadioItem
|
||||
data-slot="dropdown-menu-radio-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<CircleIcon className="size-2 fill-current" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.RadioItem>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuLabel({
|
||||
className,
|
||||
inset,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Label
|
||||
data-slot="dropdown-menu-label"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Separator
|
||||
data-slot="dropdown-menu-separator"
|
||||
className={cn("bg-border -mx-1 my-1 h-px", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuShortcut({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="dropdown-menu-shortcut"
|
||||
className={cn(
|
||||
"text-muted-foreground ml-auto text-xs tracking-widest",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSub({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
|
||||
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuSubTrigger({
|
||||
className,
|
||||
inset,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
data-slot="dropdown-menu-sub-trigger"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRightIcon className="ml-auto size-4" />
|
||||
</DropdownMenuPrimitive.SubTrigger>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSubContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
data-slot="dropdown-menu-sub-content"
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
DropdownMenu,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuSubContent,
|
||||
}
|
||||
167
components/ui/form.tsx
Normal file
167
components/ui/form.tsx
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as LabelPrimitive from "@radix-ui/react-label"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import {
|
||||
Controller,
|
||||
FormProvider,
|
||||
useFormContext,
|
||||
useFormState,
|
||||
type ControllerProps,
|
||||
type FieldPath,
|
||||
type FieldValues,
|
||||
} from "react-hook-form"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Label } from "@/components/ui/label"
|
||||
|
||||
const Form = FormProvider
|
||||
|
||||
type FormFieldContextValue<
|
||||
TFieldValues extends FieldValues = FieldValues,
|
||||
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
|
||||
> = {
|
||||
name: TName
|
||||
}
|
||||
|
||||
const FormFieldContext = React.createContext<FormFieldContextValue>(
|
||||
{} as FormFieldContextValue
|
||||
)
|
||||
|
||||
const FormField = <
|
||||
TFieldValues extends FieldValues = FieldValues,
|
||||
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
|
||||
>({
|
||||
...props
|
||||
}: ControllerProps<TFieldValues, TName>) => {
|
||||
return (
|
||||
<FormFieldContext.Provider value={{ name: props.name }}>
|
||||
<Controller {...props} />
|
||||
</FormFieldContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
const useFormField = () => {
|
||||
const fieldContext = React.useContext(FormFieldContext)
|
||||
const itemContext = React.useContext(FormItemContext)
|
||||
const { getFieldState } = useFormContext()
|
||||
const formState = useFormState({ name: fieldContext.name })
|
||||
const fieldState = getFieldState(fieldContext.name, formState)
|
||||
|
||||
if (!fieldContext) {
|
||||
throw new Error("useFormField should be used within <FormField>")
|
||||
}
|
||||
|
||||
const { id } = itemContext
|
||||
|
||||
return {
|
||||
id,
|
||||
name: fieldContext.name,
|
||||
formItemId: `${id}-form-item`,
|
||||
formDescriptionId: `${id}-form-item-description`,
|
||||
formMessageId: `${id}-form-item-message`,
|
||||
...fieldState,
|
||||
}
|
||||
}
|
||||
|
||||
type FormItemContextValue = {
|
||||
id: string
|
||||
}
|
||||
|
||||
const FormItemContext = React.createContext<FormItemContextValue>(
|
||||
{} as FormItemContextValue
|
||||
)
|
||||
|
||||
function FormItem({ className, ...props }: React.ComponentProps<"div">) {
|
||||
const id = React.useId()
|
||||
|
||||
return (
|
||||
<FormItemContext.Provider value={{ id }}>
|
||||
<div
|
||||
data-slot="form-item"
|
||||
className={cn("grid gap-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
</FormItemContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
function FormLabel({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||
const { error, formItemId } = useFormField()
|
||||
|
||||
return (
|
||||
<Label
|
||||
data-slot="form-label"
|
||||
data-error={!!error}
|
||||
className={cn("data-[error=true]:text-destructive", className)}
|
||||
htmlFor={formItemId}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
|
||||
const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
|
||||
|
||||
return (
|
||||
<Slot
|
||||
data-slot="form-control"
|
||||
id={formItemId}
|
||||
aria-describedby={
|
||||
!error
|
||||
? `${formDescriptionId}`
|
||||
: `${formDescriptionId} ${formMessageId}`
|
||||
}
|
||||
aria-invalid={!!error}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
|
||||
const { formDescriptionId } = useFormField()
|
||||
|
||||
return (
|
||||
<p
|
||||
data-slot="form-description"
|
||||
id={formDescriptionId}
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
|
||||
const { error, formMessageId } = useFormField()
|
||||
const body = error ? String(error?.message ?? "") : props.children
|
||||
|
||||
if (!body) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<p
|
||||
data-slot="form-message"
|
||||
id={formMessageId}
|
||||
className={cn("text-destructive text-sm", className)}
|
||||
{...props}
|
||||
>
|
||||
{body}
|
||||
</p>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
useFormField,
|
||||
Form,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormMessage,
|
||||
FormField,
|
||||
}
|
||||
21
components/ui/input.tsx
Normal file
21
components/ui/input.tsx
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
data-slot="input"
|
||||
className={cn(
|
||||
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
||||
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Input }
|
||||
24
components/ui/label.tsx
Normal file
24
components/ui/label.tsx
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as LabelPrimitive from "@radix-ui/react-label"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Label({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||
return (
|
||||
<LabelPrimitive.Root
|
||||
data-slot="label"
|
||||
className={cn(
|
||||
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Label }
|
||||
48
components/ui/popover.tsx
Normal file
48
components/ui/popover.tsx
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as PopoverPrimitive from "@radix-ui/react-popover"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Popover({
|
||||
...props
|
||||
}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
|
||||
return <PopoverPrimitive.Root data-slot="popover" {...props} />
|
||||
}
|
||||
|
||||
function PopoverTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
|
||||
return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
|
||||
}
|
||||
|
||||
function PopoverContent({
|
||||
className,
|
||||
align = "center",
|
||||
sideOffset = 4,
|
||||
...props
|
||||
}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
|
||||
return (
|
||||
<PopoverPrimitive.Portal>
|
||||
<PopoverPrimitive.Content
|
||||
data-slot="popover-content"
|
||||
align={align}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</PopoverPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function PopoverAnchor({
|
||||
...props
|
||||
}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
|
||||
return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
|
||||
}
|
||||
|
||||
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
|
||||
187
components/ui/select.tsx
Normal file
187
components/ui/select.tsx
Normal file
|
|
@ -0,0 +1,187 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as SelectPrimitive from "@radix-ui/react-select"
|
||||
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Select({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
|
||||
return <SelectPrimitive.Root data-slot="select" {...props} />
|
||||
}
|
||||
|
||||
function SelectGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
|
||||
return <SelectPrimitive.Group data-slot="select-group" {...props} />
|
||||
}
|
||||
|
||||
function SelectValue({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
|
||||
return <SelectPrimitive.Value data-slot="select-value" {...props} />
|
||||
}
|
||||
|
||||
function SelectTrigger({
|
||||
className,
|
||||
size = "default",
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
|
||||
size?: "sm" | "default"
|
||||
}) {
|
||||
return (
|
||||
<SelectPrimitive.Trigger
|
||||
data-slot="select-trigger"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<SelectPrimitive.Icon asChild>
|
||||
<ChevronDownIcon className="size-4 opacity-50" />
|
||||
</SelectPrimitive.Icon>
|
||||
</SelectPrimitive.Trigger>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectContent({
|
||||
className,
|
||||
children,
|
||||
position = "popper",
|
||||
align = "center",
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
|
||||
return (
|
||||
<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Content
|
||||
data-slot="select-content"
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
|
||||
position === "popper" &&
|
||||
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
||||
className
|
||||
)}
|
||||
position={position}
|
||||
align={align}
|
||||
{...props}
|
||||
>
|
||||
<SelectScrollUpButton />
|
||||
<SelectPrimitive.Viewport
|
||||
className={cn(
|
||||
"p-1",
|
||||
position === "popper" &&
|
||||
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</SelectPrimitive.Viewport>
|
||||
<SelectScrollDownButton />
|
||||
</SelectPrimitive.Content>
|
||||
</SelectPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectLabel({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
|
||||
return (
|
||||
<SelectPrimitive.Label
|
||||
data-slot="select-label"
|
||||
className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectItem({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
|
||||
return (
|
||||
<SelectPrimitive.Item
|
||||
data-slot="select-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute right-2 flex size-3.5 items-center justify-center">
|
||||
<SelectPrimitive.ItemIndicator>
|
||||
<CheckIcon className="size-4" />
|
||||
</SelectPrimitive.ItemIndicator>
|
||||
</span>
|
||||
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||
</SelectPrimitive.Item>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
|
||||
return (
|
||||
<SelectPrimitive.Separator
|
||||
data-slot="select-separator"
|
||||
className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectScrollUpButton({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
|
||||
return (
|
||||
<SelectPrimitive.ScrollUpButton
|
||||
data-slot="select-scroll-up-button"
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronUpIcon className="size-4" />
|
||||
</SelectPrimitive.ScrollUpButton>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectScrollDownButton({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
|
||||
return (
|
||||
<SelectPrimitive.ScrollDownButton
|
||||
data-slot="select-scroll-down-button"
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronDownIcon className="size-4" />
|
||||
</SelectPrimitive.ScrollDownButton>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectScrollDownButton,
|
||||
SelectScrollUpButton,
|
||||
SelectSeparator,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
}
|
||||
13
components/ui/skeleton.tsx
Normal file
13
components/ui/skeleton.tsx
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="skeleton"
|
||||
className={cn("bg-accent animate-pulse rounded-md", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Skeleton }
|
||||
40
components/ui/sonner.tsx
Normal file
40
components/ui/sonner.tsx
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
"use client"
|
||||
|
||||
import {
|
||||
CircleCheckIcon,
|
||||
InfoIcon,
|
||||
Loader2Icon,
|
||||
OctagonXIcon,
|
||||
TriangleAlertIcon,
|
||||
} from "lucide-react"
|
||||
import { useTheme } from "next-themes"
|
||||
import { Toaster as Sonner, type ToasterProps } from "sonner"
|
||||
|
||||
const Toaster = ({ ...props }: ToasterProps) => {
|
||||
const { theme = "system" } = useTheme()
|
||||
|
||||
return (
|
||||
<Sonner
|
||||
theme={theme as ToasterProps["theme"]}
|
||||
className="toaster group"
|
||||
icons={{
|
||||
success: <CircleCheckIcon className="size-4" />,
|
||||
info: <InfoIcon className="size-4" />,
|
||||
warning: <TriangleAlertIcon className="size-4" />,
|
||||
error: <OctagonXIcon className="size-4" />,
|
||||
loading: <Loader2Icon className="size-4 animate-spin" />,
|
||||
}}
|
||||
style={
|
||||
{
|
||||
"--normal-bg": "var(--popover)",
|
||||
"--normal-text": "var(--popover-foreground)",
|
||||
"--normal-border": "var(--border)",
|
||||
"--border-radius": "var(--radius)",
|
||||
} as React.CSSProperties
|
||||
}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Toaster }
|
||||
31
components/ui/switch.tsx
Normal file
31
components/ui/switch.tsx
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as SwitchPrimitive from "@radix-ui/react-switch"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Switch({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
|
||||
return (
|
||||
<SwitchPrimitive.Root
|
||||
data-slot="switch"
|
||||
className={cn(
|
||||
"peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<SwitchPrimitive.Thumb
|
||||
data-slot="switch-thumb"
|
||||
className={cn(
|
||||
"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
|
||||
)}
|
||||
/>
|
||||
</SwitchPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
export { Switch }
|
||||
116
components/ui/table.tsx
Normal file
116
components/ui/table.tsx
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Table({ className, ...props }: React.ComponentProps<"table">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="table-container"
|
||||
className="relative w-full overflow-x-auto"
|
||||
>
|
||||
<table
|
||||
data-slot="table"
|
||||
className={cn("w-full caption-bottom text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
|
||||
return (
|
||||
<thead
|
||||
data-slot="table-header"
|
||||
className={cn("[&_tr]:border-b", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
|
||||
return (
|
||||
<tbody
|
||||
data-slot="table-body"
|
||||
className={cn("[&_tr:last-child]:border-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
|
||||
return (
|
||||
<tfoot
|
||||
data-slot="table-footer"
|
||||
className={cn(
|
||||
"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
|
||||
return (
|
||||
<tr
|
||||
data-slot="table-row"
|
||||
className={cn(
|
||||
"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableHead({ className, ...props }: React.ComponentProps<"th">) {
|
||||
return (
|
||||
<th
|
||||
data-slot="table-head"
|
||||
className={cn(
|
||||
"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableCell({ className, ...props }: React.ComponentProps<"td">) {
|
||||
return (
|
||||
<td
|
||||
data-slot="table-cell"
|
||||
className={cn(
|
||||
"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableCaption({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"caption">) {
|
||||
return (
|
||||
<caption
|
||||
data-slot="table-caption"
|
||||
className={cn("text-muted-foreground mt-4 text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Table,
|
||||
TableHeader,
|
||||
TableBody,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TableCell,
|
||||
TableCaption,
|
||||
}
|
||||
66
components/ui/tabs.tsx
Normal file
66
components/ui/tabs.tsx
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as TabsPrimitive from "@radix-ui/react-tabs"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Tabs({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
|
||||
return (
|
||||
<TabsPrimitive.Root
|
||||
data-slot="tabs"
|
||||
className={cn("flex flex-col gap-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsList({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.List>) {
|
||||
return (
|
||||
<TabsPrimitive.List
|
||||
data-slot="tabs-list"
|
||||
className={cn(
|
||||
"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsTrigger({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
|
||||
return (
|
||||
<TabsPrimitive.Trigger
|
||||
data-slot="tabs-trigger"
|
||||
className={cn(
|
||||
"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
|
||||
return (
|
||||
<TabsPrimitive.Content
|
||||
data-slot="tabs-content"
|
||||
className={cn("flex-1 outline-none", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Tabs, TabsList, TabsTrigger, TabsContent }
|
||||
18
components/ui/textarea.tsx
Normal file
18
components/ui/textarea.tsx
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
|
||||
return (
|
||||
<textarea
|
||||
data-slot="textarea"
|
||||
className={cn(
|
||||
"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Textarea }
|
||||
Loading…
Add table
Add a link
Reference in a new issue