A project is going on, where a section needs to be developed like the image.


where you can see to section one left side and one in right side. I have theme already purchased, which is in bootstrap 4, so task must look good in mobile as well. I will share it with you as zip, you need to implement in such way it match the design. You can see the hierarchy. in left side root will be few producer, may be its one or two, but it will be more that one in 99% of the cases. and then under the producer will be category and under that sub category and under sub category there will be products and that its last on tree. but sub category may have multiple sub category. in the right side you will see category is the root, there is no producer. as left side category can have multiple category and sub category can have multiple sub category as well. and product is the last in tree as usual. Now a user can a drag a product from left side to right under any sub category when creation, but when edit, already dragged item need to be in right. you can skip that portion but need to be scoped to perform that. lets say, a user want to create a sub category under a category, a button our team will create. for eaxmple lets I have a object in left side,

### Left Side

{
	id: 23,
	label: "Producer 1",
	children: [
		{
			id: 1,
			label: "Category 1",
			children: [
				{
					id: 1,
					label: "Sub Category 1",
					children: [
						{
							id: 1,
							label: "Product 1",
						},
						{
							id: 2,
							label: "Product 2",
						}
					]
				},
				{
					id: 2,
					label: "Sub Category 2",
					children: [
						{
							id: 3,
							label: "Product 3",
						},
						{
							id: 4,
							label: "Product 4",
						}
					]
				}
			]
		}
	]
}

### Right Side

In the same way in left side implemented,

Now user can drag a product or a category from left side to right side under any category.

But let's say, when user finish all the task. when API need to fire, need to be access which new keys are added, let say like

{
	local_id: 3,
	parent_id: 4
}

where parent_id will under which category or sub category it was dragged.