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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
"use client";
|
||||
|
||||
import { ColumnDef } from "@tanstack/react-table";
|
||||
import {
|
||||
DataTable,
|
||||
DTExtraParamsProps,
|
||||
IconTextButtonWithTooltip,
|
||||
} from "ikoncomponents";
|
||||
import { RefreshCcw } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
/**
|
||||
* Type for Integration data
|
||||
*/
|
||||
export interface ConnectorData {
|
||||
connectorId: string;
|
||||
connectorName: string;
|
||||
appName: string;
|
||||
}
|
||||
|
||||
function IntegrationTable() {
|
||||
const [data, setData] = useState<ConnectorData[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
// Dummy fetch (replace with API call)
|
||||
useEffect(() => {
|
||||
const fetchConnectors = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// Replace this with your actual API
|
||||
const response: ConnectorData[] = [
|
||||
{
|
||||
connectorId: "1",
|
||||
connectorName: "Salesforce Connector",
|
||||
appName: "Sales CRM",
|
||||
},
|
||||
{
|
||||
connectorId: "2",
|
||||
connectorName: "Zoho Connector",
|
||||
appName: "Project Management",
|
||||
},
|
||||
];
|
||||
|
||||
setData(response);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch integrations", error);
|
||||
setData([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchConnectors();
|
||||
}, []);
|
||||
|
||||
const handleSync = () => {
|
||||
console.log("Sync button clicked");
|
||||
// Call sync API here
|
||||
};
|
||||
|
||||
const columns: ColumnDef<ConnectorData>[] = [
|
||||
{
|
||||
accessorKey: "connectorName",
|
||||
header: () => <div className="text-center">Connector Name</div>,
|
||||
cell: ({ row }) => (
|
||||
<span className="font-medium">
|
||||
{row.original.connectorName}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "appName",
|
||||
header: () => <div className="text-center">App Name</div>,
|
||||
cell: ({ row }) => <span>{row.original.appName}</span>,
|
||||
},
|
||||
];
|
||||
|
||||
const extraParams: DTExtraParamsProps = {
|
||||
extraTools: [
|
||||
<IconTextButtonWithTooltip
|
||||
key="sync"
|
||||
tooltipContent="Sync Data"
|
||||
variant="outline"
|
||||
onClick={handleSync}
|
||||
>
|
||||
<RefreshCcw className="h-4 w-4" />
|
||||
</IconTextButtonWithTooltip>,
|
||||
],
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex justify-center items-center h-[250px]">
|
||||
<div className="animate-spin rounded-full h-10 w-10 border-t-4 border-blue-500" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return <DataTable columns={columns} data={data} extraParams={extraParams} />;
|
||||
}
|
||||
|
||||
export default IntegrationTable;
|
||||
@@ -0,0 +1,73 @@
|
||||
"use client"
|
||||
|
||||
import { Plus, Database } from "lucide-react";
|
||||
import AddIntegrationModal from "./AddIntegrationModal";
|
||||
import IntegrationTable from "./IntegratinTable";
|
||||
import { useState } from "react";
|
||||
|
||||
function IntegrationMainPage() {
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold text-gray-500">
|
||||
External Integrations
|
||||
</h1>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
Connect to external systems like HRMS, CRM, and ERP
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium"
|
||||
onClick={() => setIsModalOpen(true)}
|
||||
>
|
||||
<Plus size={16} />
|
||||
Add Integration
|
||||
</button>
|
||||
</div>
|
||||
<div className="border border-dashed border-gray-300 rounded-lg p-12 flex flex-col items-center justify-center text-center">
|
||||
<div className="w-14 h-14 flex items-center justify-center rounded-full bg-gray-100 mb-4">
|
||||
<Database className="text-gray-500" size={28} />
|
||||
</div>
|
||||
|
||||
<h2 className="text-lg font-semibold text-gray-500">
|
||||
No integrations yet
|
||||
</h2>
|
||||
|
||||
<p className="text-sm text-gray-500 mt-2 max-w-md">
|
||||
Connect your external systems to sync data with your project
|
||||
management platform.
|
||||
</p>
|
||||
|
||||
<button
|
||||
className="mt-6 flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white px-5 py-2.5 rounded-md text-sm font-medium"
|
||||
onClick={() => setIsModalOpen(true)}
|
||||
>
|
||||
<Plus size={16} />
|
||||
Add Your First Integration
|
||||
</button>
|
||||
</div>
|
||||
{/* {isModalOpen && <AddIntegrationModal onClose={() => setIsModalOpen(false)} onSubmit={() => {
|
||||
setIsModalOpen(false);
|
||||
console.log("Integration created");
|
||||
} } open={false} />} */}
|
||||
<IntegrationTable />
|
||||
{isModalOpen && (
|
||||
<AddIntegrationModal
|
||||
open={isModalOpen}
|
||||
onClose={() => setIsModalOpen(false)}
|
||||
onSubmit={(data) => {
|
||||
console.log("Received in parent:", data);
|
||||
}}
|
||||
/>
|
||||
)}{" "}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default IntegrationMainPage;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user