fix: improve collection creation page

front/app/_orgs/[orgslug]/(withmenu)/collections/new/page.tsx

@@ -8,7 +8,7 @@ import { getAPIUrl, getUriWithOrg } from "@services/config/config";
 import { swrFetcher } from "@services/utils/ts/requests";
 import { getOrganizationContextInfo } from "@services/organizations/orgs";
 
-function NewCollection(params : any) {
+function NewCollection(params: any) {
   const orgslug = params.params.orgslug;
   const [name, setName] = React.useState("");
   const [org, setOrg] = React.useState({}) as any;
@@ -50,38 +50,64 @@ function NewCollection(params : any) {
 
   return (
     <>
-      <Title>Add new</Title>
-      <br />
-      <input type="text" placeholder="Name" value={name} onChange={handleNameChange} />
-      {!courses ? (
-        <p>Loading...</p>
-      ) : (
-        <div>
-          {courses.map((course: any) => (
-            <div key={course.course_id}>
-              <input
-                type="checkbox"
-                id={course.course_id}
-                name={course.course_id}
-                value={course.course_id}
-                onChange={(e) => {
-                  if (e.target.checked) {
-                    setSelectedCourses([...selectedCourses, e.target.value]);
-                  } else {
-                    setSelectedCourses(selectedCourses.filter((item: any) => item !== e.target.value));
-                  }
-                }}
-              />
-              <label htmlFor={course.course_id}>{course.name}</label>
-            </div>
-          ))}
-        </div>
-      )}
+      <div className="w-64 m-auto py-20">
+      <Title className="mb-4">Add new</Title>
+
+<input
+  type="text"
+  placeholder="Name"
+  value={name}
+  onChange={handleNameChange}
+  className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+/>
+
+{!courses ? (
+  <p className="text-gray-500">Loading...</p>
+) : (
+  <div>
+    {courses.map((course: any) => (
+      <div key={course.course_id} className="flex items-center mb-2">
+        <input
+          type="checkbox"
+          id={course.course_id}
+          name={course.course_id}
+          value={course.course_id}
+          checked={selectedCourses.includes(course.course_id)}
+          onChange={(e) => {
+            const courseId = e.target.value;
+            setSelectedCourses((prevSelectedCourses: string[]) => {
+              if (e.target.checked) {
+                return [...prevSelectedCourses, courseId];
+              } else {
+                return prevSelectedCourses.filter((selectedCourse) => selectedCourse !== courseId);
+              }
+            });
+          }}
+          className="mr-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+        <label htmlFor={course.course_id} className="text-sm">{course.name}</label>
+      </div>
+    ))}
+
+  </div>
+)}
+
+<input
+  type="text"
+  placeholder="Description"
+  value={description}
+  onChange={handleDescriptionChange}
+  className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+/>
+
+<button
+  onClick={handleSubmit}
+  className="px-6 py-3 text-white bg-black rounded-lg shadow-md hover:bg-black focus:outline-none focus:ring-2 focus:ring-blue-500"
+>
+  Submit
+</button>
+      </div>
 
-      <br />
-      <input type="text" placeholder="Description" value={description} onChange={handleDescriptionChange} />
-      <br />
-      <button onClick={handleSubmit}>Submit</button>
     </>
   );
 }

front/app/organizations/page.tsx

@@ -9,38 +9,47 @@ import { getAPIUrl, getUriWithOrg } from "@services/config/config";
 import AuthProvider from "@components/Security/AuthProvider";
 
 const Organizations = () => {
-  const { data : organizations , error } = useSWR(`${getAPIUrl()}orgs/user/page/1/limit/10`, swrFetcher)
+  const { data: organizations, error } = useSWR(`${getAPIUrl()}orgs/user/page/1/limit/10`, swrFetcher)
 
   async function deleteOrganization(org_id: any) {
     const response = await deleteOrganizationFromBackend(org_id);
-    response && mutate(`${getAPIUrl()}orgs/user/page/1/limit/10`, organizations.filter((org: any) => org.org_id !== org_id)); 
+    response && mutate(`${getAPIUrl()}orgs/user/page/1/limit/10`, organizations.filter((org: any) => org.org_id !== org_id));
   }
 
   return (
     <>
-    <AuthProvider/>
+      <AuthProvider />
       <Title>
         Your Organizations{" "}
-        <Link href={"/organizations/new"}>
-          <button>+</button>
+        <Link href="/organizations/new">
+          <button className="bg-blue-500 text-white px-2 py-1 rounded-md hover:bg-blue-600 focus:outline-none">
+            +
+          </button>
         </Link>
       </Title>
       <hr />
-      {error && <p>Failed to load</p>}
+
+      {error && <p className="text-red-500">Failed to load</p>}
       {!organizations ? (
-        <p>Loading...</p>
+        <p className="text-gray-500">Loading...</p>
       ) : (
         <div>
           {organizations.map((org: any) => (
-            <div key={org.org_id}>
-              <Link href={getUriWithOrg(org.slug,"/")}>
-                <h3>{org.name}</h3>
+            <div key={org.org_id} className="flex items-center justify-between mb-4">
+              <Link href={getUriWithOrg(org.slug, "/")}>
+                <h3 className="text-blue-500 cursor-pointer hover:underline">{org.name}</h3>
               </Link>
-              <button onClick={() => deleteOrganization(org.org_id)}>Delete</button>
+              <button
+                onClick={() => deleteOrganization(org.org_id)}
+                className="px-3 py-1 text-white bg-red-500 rounded-md hover:bg-red-600 focus:outline-none"
+              >
+                Delete
+              </button>
             </div>
           ))}
         </div>
       )}
+
     </>
   );
 };