mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-20 06:31:13 -05:00
217 lines
8.4 KiB
TypeScript
217 lines
8.4 KiB
TypeScript
import { useForm } from 'react-hook-form';
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import * as z from 'zod';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import { Label } from '@/components/ui/label';
|
|
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { SlugField } from '@/components/ui/slug-field';
|
|
import { Building2, Save, X } from 'lucide-react';
|
|
import { Combobox } from '@/components/ui/combobox';
|
|
import { useCompanyHeadquarters } from '@/hooks/useAutocompleteData';
|
|
import { useUserRole } from '@/hooks/useUserRole';
|
|
import { EntityImageUploader } from '@/components/upload/EntityImageUploader';
|
|
|
|
const propertyOwnerSchema = z.object({
|
|
name: z.string().min(1, 'Name is required'),
|
|
slug: z.string().min(1, 'Slug is required'),
|
|
description: z.string().optional(),
|
|
person_type: z.enum(['company', 'individual', 'firm', 'organization']),
|
|
website_url: z.string().url().optional().or(z.literal('')),
|
|
founded_year: z.number().min(1800).max(new Date().getFullYear()).optional(),
|
|
headquarters_location: z.string().optional(),
|
|
logo_url: z.string().optional(),
|
|
banner_image_id: z.string().optional(),
|
|
banner_image_url: z.string().optional(),
|
|
card_image_id: z.string().optional(),
|
|
card_image_url: z.string().optional()
|
|
});
|
|
|
|
type PropertyOwnerFormData = z.infer<typeof propertyOwnerSchema>;
|
|
|
|
interface PropertyOwnerFormProps {
|
|
onSubmit: (data: PropertyOwnerFormData) => void;
|
|
onCancel: () => void;
|
|
initialData?: Partial<PropertyOwnerFormData>;
|
|
}
|
|
|
|
export function PropertyOwnerForm({ onSubmit, onCancel, initialData }: PropertyOwnerFormProps) {
|
|
const { isModerator } = useUserRole();
|
|
const { headquarters } = useCompanyHeadquarters();
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
setValue,
|
|
watch,
|
|
formState: { errors }
|
|
} = useForm<PropertyOwnerFormData>({
|
|
resolver: zodResolver(propertyOwnerSchema),
|
|
defaultValues: {
|
|
name: initialData?.name || '',
|
|
slug: initialData?.slug || '',
|
|
description: initialData?.description || '',
|
|
person_type: initialData?.person_type || 'company',
|
|
website_url: initialData?.website_url || '',
|
|
founded_year: initialData?.founded_year || undefined,
|
|
headquarters_location: initialData?.headquarters_location || '',
|
|
logo_url: initialData?.logo_url || '',
|
|
banner_image_id: initialData?.banner_image_id || '',
|
|
banner_image_url: initialData?.banner_image_url || '',
|
|
card_image_id: initialData?.card_image_id || '',
|
|
card_image_url: initialData?.card_image_url || ''
|
|
}
|
|
});
|
|
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Building2 className="w-5 h-5" />
|
|
{initialData ? 'Edit Property Owner' : 'Create New Property Owner'}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
|
|
{/* Basic Information */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="name">Name *</Label>
|
|
<Input
|
|
id="name"
|
|
{...register('name')}
|
|
placeholder="Enter property owner name"
|
|
/>
|
|
{errors.name && (
|
|
<p className="text-sm text-destructive">{errors.name.message}</p>
|
|
)}
|
|
</div>
|
|
|
|
<SlugField
|
|
name={watch('name')}
|
|
slug={watch('slug')}
|
|
onSlugChange={(slug) => setValue('slug', slug)}
|
|
isModerator={isModerator()}
|
|
/>
|
|
</div>
|
|
|
|
{/* Description */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="description">Description</Label>
|
|
<Textarea
|
|
id="description"
|
|
{...register('description')}
|
|
placeholder="Describe the property owner..."
|
|
rows={3}
|
|
/>
|
|
</div>
|
|
|
|
{/* Person Type */}
|
|
<div className="space-y-2">
|
|
<Label>Entity Type *</Label>
|
|
<RadioGroup
|
|
value={watch('person_type')}
|
|
onValueChange={(value) => setValue('person_type', value as any)}
|
|
className="grid grid-cols-2 md:grid-cols-4 gap-4"
|
|
>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="company" id="company" />
|
|
<Label htmlFor="company" className="cursor-pointer">Company</Label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="individual" id="individual" />
|
|
<Label htmlFor="individual" className="cursor-pointer">Individual</Label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="firm" id="firm" />
|
|
<Label htmlFor="firm" className="cursor-pointer">Firm</Label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="organization" id="organization" />
|
|
<Label htmlFor="organization" className="cursor-pointer">Organization</Label>
|
|
</div>
|
|
</RadioGroup>
|
|
</div>
|
|
|
|
{/* Additional Details */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="founded_year">Founded Year</Label>
|
|
<Input
|
|
id="founded_year"
|
|
type="number"
|
|
min="1800"
|
|
max={new Date().getFullYear()}
|
|
{...register('founded_year', { valueAsNumber: true })}
|
|
placeholder="e.g. 1972"
|
|
/>
|
|
{errors.founded_year && (
|
|
<p className="text-sm text-destructive">{errors.founded_year.message}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="headquarters_location">Headquarters Location</Label>
|
|
<Combobox
|
|
options={headquarters}
|
|
value={watch('headquarters_location')}
|
|
onValueChange={(value) => setValue('headquarters_location', value)}
|
|
placeholder="Select or type location"
|
|
searchPlaceholder="Search locations..."
|
|
emptyText="No locations found"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Website */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="website_url">Website URL</Label>
|
|
<Input
|
|
id="website_url"
|
|
type="url"
|
|
{...register('website_url')}
|
|
placeholder="https://example.com"
|
|
/>
|
|
{errors.website_url && (
|
|
<p className="text-sm text-destructive">{errors.website_url.message}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Images */}
|
|
<EntityImageUploader
|
|
images={{
|
|
logo: { url: watch('logo_url') },
|
|
banner: { url: watch('banner_image_url'), id: watch('banner_image_id') },
|
|
card: { url: watch('card_image_url'), id: watch('card_image_id') }
|
|
}}
|
|
onImagesChange={(images) => {
|
|
if (images.logo_url !== undefined) setValue('logo_url', images.logo_url);
|
|
if (images.banner_image_id !== undefined) setValue('banner_image_id', images.banner_image_id);
|
|
if (images.banner_image_url !== undefined) setValue('banner_image_url', images.banner_image_url);
|
|
if (images.card_image_id !== undefined) setValue('card_image_id', images.card_image_id);
|
|
if (images.card_image_url !== undefined) setValue('card_image_url', images.card_image_url);
|
|
}}
|
|
showLogo={true}
|
|
entityType="property_owner"
|
|
/>
|
|
|
|
{/* Actions */}
|
|
<div className="flex gap-3 justify-end">
|
|
<Button type="button" variant="outline" onClick={onCancel}>
|
|
<X className="w-4 h-4 mr-2" />
|
|
Cancel
|
|
</Button>
|
|
<Button type="submit">
|
|
<Save className="w-4 h-4 mr-2" />
|
|
Save Property Owner
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|