Getting organization by slug, adding this in url. And working on permissions.

src/components/wrappers/dashboard/organization/DeleteOrganization/DeleteOrganizationButton.tsx

@@ -4,21 +4,21 @@ import {
     deleteOrganizationAction,
 } from "@/components/wrappers/dashboard/organization/organization.action";
 import {useMutation} from "@tanstack/react-query";
-import {setCurrentOrganizationId} from "@/features/dashboard/organization-cookie";
+import {setCurrentOrganizationSlug} from "@/features/dashboard/organization-cookie";
 import {useRouter} from "next/navigation";
 
 export type DeleteOrganizationButtonProps = {
-    organizationId: string;
+    organizationSlug: string;
 }
 
 export const DeleteOrganizationButton = (props: DeleteOrganizationButtonProps) => {
     const router = useRouter();
     const mutation = useMutation({
-        mutationFn: () => deleteOrganizationAction(props.organizationId),
+        mutationFn: () => deleteOrganizationAction(props.organizationSlug),
         onSuccess: async (result) => {
             console.log(result);
             if(result.data.success) {
-                await setCurrentOrganizationId("default")
+                await setCurrentOrganizationSlug("default")
                 router.push("/dashboard")
             }
         },

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

@@ -80,7 +80,12 @@ export function CreateOrganizationModal(props: createOrganizationModalProps) {
                                 <FormItem>
                                     <FormLabel>Slug</FormLabel>
                                     <FormControl>
-                                        <Input {...field} />
+                                        <Input {...field}
+                                               onChange={(e) => {
+                                                   const value = e.target.value.replaceAll(" ", "-").toLowerCase()
+                                                   field.onChange(value)
+                                               }}
+                                        />
                                     </FormControl>
                                     <FormMessage/>
                                 </FormItem>

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

@@ -4,8 +4,12 @@ import {useEffect, useState} from "react";
 
 import {ComboBox} from "@/components/wrappers/common/combobox";
 import {Organization} from "@prisma/client";
-import {getCurrentOrganizationId, setCurrentOrganizationId} from "@/features/dashboard/organization-cookie";
+import {
+    getCurrentOrganizationSlug,
+    setCurrentOrganizationSlug
+} from "@/features/dashboard/organization-cookie";
 import {useSidebar} from "@/components/ui/sidebar";
+import {useRouter} from "next/navigation";
 
 export type organizationComboBoxProps = {
     organizations: Organization[]
@@ -14,42 +18,43 @@ export type organizationComboBoxProps = {
 
 
 export function OrganizationCombobox(props: organizationComboBoxProps) {
-
+    const router = useRouter()
     // const {organizationId, moveToAnotherOrganization} = useStore((state) => state);
 
-    const [organizationId, setOrganizationId] = useState<string>()
+    const [organizationSlug, setOrganizationSlug] = useState<string>()
 
     const {organizations, defaultOrganization} = props
 
     useEffect(() => {
-        getCurrentOrganizationId().then(id => {
+        getCurrentOrganizationSlug().then(slug => {
 
-            if (id == "") {
-                setOrganizationId(defaultOrganization.id)
-                setCurrentOrganizationId(defaultOrganization.id)
+            if (slug == "") {
+                setOrganizationSlug(defaultOrganization.id)
+                setCurrentOrganizationSlug(defaultOrganization.slug)
             } else {
-                setOrganizationId(id)
-                const organization = organizations.find(organization => organization.id === id)
+                setOrganizationSlug(slug)
+                const organization = organizations.find(organization => organization.slug === slug)
                 if (!organization) {
-                    setOrganizationId(defaultOrganization.id)
-                    setCurrentOrganizationId(defaultOrganization.id)
+                    setOrganizationSlug(defaultOrganization.id)
+                    setCurrentOrganizationSlug(defaultOrganization.slug)
                 }
             }
         })
 
-    }, [organizationId])
+    }, [organizationSlug])
 
     const values = organizations.map(organization => {
         return ({
-            value: organization.id,
+            value: organization.slug,
             label: organization.name,
         })
     })
 
-    const onValueChange = (id: string) => {
-        if (organizationId !== id) {
-            setOrganizationId(id)
-            setCurrentOrganizationId(id)
+    const onValueChange = (slug: string) => {
+        if (organizationSlug !== slug) {
+            setOrganizationSlug(slug)
+            setCurrentOrganizationSlug(slug)
+            router.replace("/dashboard")
         }
     }
     const {state, isMobile} = useSidebar();
@@ -61,7 +66,7 @@ export function OrganizationCombobox(props: organizationComboBoxProps) {
                 <ComboBox
                     sideBar
                     values={values}
-                    defaultValue={organizationId}
+                    defaultValue={organizationSlug}
                     onValueChange={onValueChange}/>
             )}
 

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

@@ -80,7 +80,7 @@ export const deleteOrganizationAction = userAction
             const uuid = uuidv4()
             const organization = await db.organization.findFirst({
                 where: {
-                    id: parsedInput,
+                    slug: parsedInput,
                 }
             })
             console.log(organization);

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

@@ -2,9 +2,11 @@ import {z} from "zod";
 
 
 export const OrganizationSchema = z.object({
-    name: z.string().min(5).max(40),
-    slug: z.string().regex(/^[a-zA-Z0-9_-]*$/).min(5).max(20),
-
+    name: z.string().min(5, 'Name must be at least 5 characters long').max(40, 'Name must be at most 40 characters long'),
+    slug: z.string()
+        .regex(/^[a-zA-Z0-9_-]*$/, 'Slug can only contain letters, numbers, underscores, and hyphens')
+        .min(5, 'Slug must be at least 5 characters long')
+        .max(20, 'Slug must be at most 20 characters long'),
 });
 
 export type OrganizationSchema = z.infer<typeof OrganizationSchema>;