Moving files and rename some of them.

src/components/wrappers/dashboard/organization/create-organisation-modal.tsx

@@ -0,0 +1,77 @@
+"use client"
+
+import {useMutation} from "@tanstack/react-query";
+
+import {Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger} from "@/components/ui/dialog";
+import {Button} from "@/components/ui/button";
+import {Form, FormControl, FormField, FormItem, FormLabel, FormMessage, useZodForm} from "@/components/ui/form";
+import {Input} from "@/components/ui/input";
+import {OrganizationSchema} from "@/components/wrappers/dashboard/organization/organization.schema";
+
+export type createOrganizationModalProps = {
+    children: any
+}
+
+
+export function CreateOrganizationModal(props: createOrganizationModalProps) {
+
+    const {children} = props;
+
+    const form = useZodForm({
+        schema: OrganizationSchema,
+    });
+
+    const mutation = useMutation({
+        mutationFn: async (values: OrganizationSchema) => {
+        }
+    })
+
+
+    return (
+        <Dialog>
+
+            <DialogTrigger asChild>
+                {children}
+            </DialogTrigger>
+
+            <DialogContent className="sm:max-w-[425px] w-full">
+
+                <DialogHeader>
+                    <DialogTitle>Create a new organization</DialogTitle>
+                </DialogHeader>
+
+                <div className="sm:max-w-[375px] w-full">
+                    <Form form={form}
+                          className="flex flex-col gap-4"
+                          onSubmit={async (values) => {
+                              await mutation.mutateAsync(values);
+                          }}
+                    >
+                        <FormField
+                            control={form.control}
+                            name="name"
+                            defaultValue=""
+                            render={({field}) => (
+                                <FormItem>
+                                    <FormLabel>Name</FormLabel>
+                                    <FormControl>
+                                        <Input {...field} />
+                                    </FormControl>
+                                    <FormMessage/>
+                                </FormItem>
+                            )}
+                        />
+                    </Form>
+                </div>
+
+                <DialogFooter>
+                    <div className="flex items-center justify-between w-full">
+                        <Button type="submit">Create</Button>
+                    </div>
+                </DialogFooter>
+
+            </DialogContent>
+
+        </Dialog>
+    )
+}

src/components/wrappers/dashboard/organization/organization-combobox.tsx

@@ -0,0 +1,71 @@
+"use client"
+
+import {useEffect, useState} from "react";
+
+import {ComboBox} from "@/components/wrappers/common/combobox";
+import {Organization} from "@prisma/client";
+import {getCurrentOrganizationSlug, setCurrentOrganizationSlug} from "@/features/dashboard/organization-cookie";
+import {useSidebar} from "@/components/ui/sidebar";
+
+export type organizationComboBoxProps = {
+    organizations: Organization[]
+    defaultOrganization: Organization
+}
+
+
+export function OrganizationCombobox(props: organizationComboBoxProps) {
+
+    // const {organizationId, moveToAnotherOrganization} = useStore((state) => state);
+
+    const [organizationSlug, setOrganizationSlug] = useState<string>()
+
+    const {organizations, defaultOrganization} = props
+
+    useEffect(() => {
+        getCurrentOrganizationSlug().then(slug => {
+
+            if (slug == "") {
+                setOrganizationSlug(defaultOrganization.slug)
+                setCurrentOrganizationSlug(defaultOrganization.slug)
+            } else {
+                setOrganizationSlug(slug)
+                const organization = organizations.find(organization => organization.slug === slug)
+                if (!organization) {
+                    setOrganizationSlug(defaultOrganization.slug)
+                    setCurrentOrganizationSlug(defaultOrganization.slug)
+                }
+            }
+        })
+
+    }, [organizationSlug])
+
+    const values = organizations.map(organization => {
+        return ({
+            value: organization.slug,
+            label: organization.name,
+        })
+    })
+
+    const onValueChange = (slug: string) => {
+        if (organizationSlug !== slug) {
+            setOrganizationSlug(slug)
+            setCurrentOrganizationSlug(slug)
+        }
+    }
+    const { state, isMobile } = useSidebar();
+
+
+    return (
+        <>
+            {state === 'expanded' && (
+                <ComboBox
+                    sideBar
+                    values={values}
+                    defaultValue={organizationSlug}
+                    onValueChange={onValueChange}/>
+            )}
+
+        </>
+
+    )
+}

src/components/wrappers/dashboard/organization/organization.schema.ts

@@ -0,0 +1,8 @@
+import {z} from "zod";
+
+
+export const OrganizationSchema = z.object({
+    name: z.string(),
+});
+
+export type OrganizationSchema = z.infer<typeof OrganizationSchema>;