first commit
This commit is contained in:
Your NamebaishaliHolocron
@@ -0,0 +1,238 @@
|
||||
"use client";
|
||||
|
||||
import { X } from "lucide-react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
|
||||
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
Button,
|
||||
Form,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormControl,
|
||||
FormMessage,
|
||||
Input,
|
||||
Textarea,
|
||||
Select,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
} from "ikoncomponents";
|
||||
|
||||
/* ---------------- Schema ---------------- */
|
||||
const integrationSchema = z.object({
|
||||
name: z.string().min(1, "Integration name is required"),
|
||||
systemType: z.string().min(1, "System type is required"),
|
||||
connectionMethod: z.string().min(1, "Connection method is required"),
|
||||
endpointUrl: z.string().url("Invalid URL").optional().or(z.literal("")),
|
||||
description: z.string().optional(),
|
||||
});
|
||||
|
||||
type IntegrationFormValues = z.infer<typeof integrationSchema>;
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onSubmit: (data: IntegrationFormValues) => void;
|
||||
}
|
||||
|
||||
/* ---------------- Component ---------------- */
|
||||
export default function AddIntegrationModal({
|
||||
open,
|
||||
onClose,
|
||||
onSubmit,
|
||||
}: Props) {
|
||||
const form = useForm<IntegrationFormValues>({
|
||||
resolver: zodResolver(integrationSchema),
|
||||
defaultValues: {
|
||||
name: "",
|
||||
systemType: "",
|
||||
connectionMethod: "",
|
||||
endpointUrl: "",
|
||||
description: "",
|
||||
},
|
||||
});
|
||||
|
||||
const handleClose = () => {
|
||||
form.reset();
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleCreateIntegration = (data: IntegrationFormValues) => {
|
||||
console.log("Integration form data:", {
|
||||
...data,
|
||||
});
|
||||
|
||||
onSubmit(data); // pass to parent if needed
|
||||
handleClose(); // close + reset modal
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={handleClose}>
|
||||
<DialogContent className="max-w-lg">
|
||||
{/* Header */}
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add External Integration</DialogTitle>
|
||||
<DialogDescription>
|
||||
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{/* Form */}
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={form.handleSubmit(handleCreateIntegration)}
|
||||
className="space-y-4"
|
||||
>
|
||||
{/* Integration Name */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
Integration Name <span className="text-red-500">*</span>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="e.g., Company HRMS"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* System Type */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="systemType"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
System Type <span className="text-red-500">*</span>
|
||||
</FormLabel>
|
||||
<Select
|
||||
onValueChange={field.onChange}
|
||||
value={field.value}
|
||||
>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select system type" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="HRMS">HRMS</SelectItem>
|
||||
<SelectItem value="CRM">Sales CRM</SelectItem>
|
||||
{/* <SelectItem value="ERP">ERP</SelectItem> */}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Connection Method */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="connectionMethod"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
Connection Method{" "}
|
||||
<span className="text-red-500">*</span>
|
||||
</FormLabel>
|
||||
<Select
|
||||
onValueChange={field.onChange}
|
||||
value={field.value}
|
||||
>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select data" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="Grade">Grade</SelectItem>
|
||||
<SelectItem value="Role">Role</SelectItem>
|
||||
<SelectItem value="Working Days">Working Days</SelectItem>
|
||||
<SelectItem value="Employee">Employee</SelectItem>
|
||||
<SelectItem value="FX rates">FX rates</SelectItem>
|
||||
{/* <SelectItem value="Risk">Risk</SelectItem> */}
|
||||
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Endpoint URL */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="endpointUrl"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Endpoint URL</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="https://api.example.com/v1"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Description */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="description"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Description</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
rows={3}
|
||||
placeholder="Describe what this integration does..."
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex justify-end gap-3 pt-4">
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
onClick={handleClose}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
|
||||
>
|
||||
Create Integration
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user