62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
|
'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>
|
||
|
|
);
|
||
|
|
}
|