From b4d06d86ccb06d71c62e7c56dbc28583d6074fca Mon Sep 17 00:00:00 2001
From: Shahrukh Khan <srkbannu@gmail.com>
Date: Mon, 24 Jun 2024 19:43:10 +0500
Subject: [PATCH 1/2] datasets added

---
 .../settings/datasets/[id]/DatasetCard.tsx    | 229 ++++++++++++++++++
 client/app/settings/datasets/[id]/page.tsx    |  41 ++++
 client/app/settings/datasets/add/page.tsx     | 141 +++++++++++
 .../settings/datasets/datasets-interface.ts   |  38 +++
 client/app/settings/datasets/page.tsx         |  78 ++++++
 client/app/settings/layout.tsx                |  43 ++++
 client/app/settings/page.tsx                  |   4 +
 .../AddFormsDataSets/CsvDataSets.tsx          | 143 +++++++++++
 client/components/Buttons/Button.tsx          |  21 --
 client/components/CardConnector/index.tsx     |  79 +-----
 client/components/Icons/AddWorkSpaceLarge.tsx |  20 ++
 client/components/Icons/UploadIcon.tsx        |  21 ++
 client/components/SettingsLayout/LeftBar.tsx  |  63 +++++
 client/components/SettingsMenu/index.tsx      |  20 ++
 client/components/Skeletons/index.tsx         |  25 ++
 client/components/card/index.tsx              |  19 ++
 client/components/ui/textarea.tsx             |  24 ++
 client/hooks/useDatasets.tsx                  |  62 +++++
 client/services/datasets.ts                   |  57 +++++
 client/utils/apiUtils.ts                      |  11 +-
 server/api/v1/__init__.py                     |   2 +-
 server/api/v1/datasets/datasets.py            |  58 ++++-
 server/app/controllers/datasets.py            | 109 ++++++++-
 server/app/repositories/dataset.py            |  12 +-
 server/app/repositories/workspace.py          |  16 +-
 server/app/schemas/requests/datasets.py       |  14 ++
 server/app/schemas/responses/datasets.py      |   5 +-
 27 files changed, 1248 insertions(+), 107 deletions(-)
 create mode 100644 client/app/settings/datasets/[id]/DatasetCard.tsx
 create mode 100644 client/app/settings/datasets/[id]/page.tsx
 create mode 100644 client/app/settings/datasets/add/page.tsx
 create mode 100644 client/app/settings/datasets/datasets-interface.ts
 create mode 100644 client/app/settings/datasets/page.tsx
 create mode 100644 client/app/settings/layout.tsx
 create mode 100644 client/app/settings/page.tsx
 create mode 100644 client/components/AddFormsDataSets/CsvDataSets.tsx
 delete mode 100644 client/components/Buttons/Button.tsx
 create mode 100644 client/components/Icons/AddWorkSpaceLarge.tsx
 create mode 100644 client/components/Icons/UploadIcon.tsx
 create mode 100644 client/components/SettingsLayout/LeftBar.tsx
 create mode 100644 client/components/card/index.tsx
 create mode 100644 client/components/ui/textarea.tsx
 create mode 100644 client/hooks/useDatasets.tsx
 create mode 100644 client/services/datasets.ts
 create mode 100644 server/app/schemas/requests/datasets.py

diff --git a/client/app/settings/datasets/[id]/DatasetCard.tsx b/client/app/settings/datasets/[id]/DatasetCard.tsx
new file mode 100644
index 000000000..5dcf5eade
--- /dev/null
+++ b/client/app/settings/datasets/[id]/DatasetCard.tsx
@@ -0,0 +1,229 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import ConfirmationDialog from "components/ConfirmationDialog";
+import Card from "components/card";
+import { useRouter } from "next/navigation";
+import React, { useState } from "react";
+import { toast } from "react-toastify";
+import { IDatasetDetails } from "../datasets-interface";
+import { convertToCSV } from "@/utils/convertToCSV";
+import { useDeleteDataset, useUpdateDatasetCard } from "@/hooks/useDatasets";
+import { Loader } from "@/components/loader/Loader";
+import { DeleteDataset } from "@/services/datasets";
+import { axiosInstance } from "@/utils/apiUtils";
+
+interface IProps {
+  dataframe: IDatasetDetails;
+}
+
+const DatasetCard = ({ dataframe }: IProps) => {
+  const [isEditFormOpen, setIsEditFormOpen] = useState(false);
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [isDownloadLoading, setIsDownloadLoading] = useState(false);
+
+  const { mutateAsync: editDatasetCard, isPending: isEditDatasetLoading } =
+    useUpdateDatasetCard();
+  const { mutateAsync: deleteDatasetCard, isPending: isDeleteDatasetLoading } =
+    useDeleteDataset();
+
+  const [datasetForm, setDatasetForm] = useState({
+    name: dataframe?.name,
+    description: dataframe?.description,
+  });
+
+  const router = useRouter();
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setDatasetForm({
+      ...datasetForm,
+      [name]: value,
+    });
+  };
+
+  const onSuccess = (response: any) => {
+    toast.success(response?.data?.message);
+    setIsEditFormOpen(false);
+    setIsDeleteModalOpen(false);
+  };
+
+  const onError = (error: any) => {
+    toast.error(
+      error?.response?.data?.message
+        ? error?.response?.data?.message
+        : error.message
+    );
+  };
+
+  const handleSubmit = async () => {
+    const dataSet = {
+      name: datasetForm.name,
+      description: datasetForm.description,
+    };
+    editDatasetCard(
+      {
+        id: dataframe.id,
+        body: dataSet,
+      },
+      { onSuccess, onError }
+    );
+  };
+
+  const handleDownload = async () => {
+    setIsDownloadLoading(true);
+    await axiosInstance
+      .get(`/v1/datasets/download/${dataframe.id}`, {
+        responseType: "blob",
+      })
+      .then((response) => {
+        const url = window.URL.createObjectURL(new Blob([response.data]));
+        const link = document.createElement("a");
+        link.href = url;
+        link.setAttribute("download", `${dataframe.id}.csv`);
+        document.body.appendChild(link);
+        link.click();
+        // Cleanup
+        link.parentNode.removeChild(link);
+        window.URL.revokeObjectURL(url);
+      })
+      .catch((error) => {
+        toast.error(
+          error?.response?.data?.message
+            ? error?.response?.data?.message
+            : error?.message
+        );
+      });
+  };
+
+  const handleDelete = async () => {
+    deleteDatasetCard(
+      {
+        id: dataframe.id,
+      },
+      {
+        onSuccess(response) {
+          toast.success(response?.data?.message);
+          setIsDeleteModalOpen(false);
+          router.push("/settings/datasets");
+        },
+        onError(error: any) {
+          toast.error(
+            error?.response?.data?.message
+              ? error?.response?.data?.message
+              : error?.message
+          );
+        },
+      }
+    );
+  };
+
+  return (
+    <>
+      {!isEditFormOpen ? (
+        <Card extra={"w-full py-4 px-6 h-full mb-4"}>
+          <div className="flex flex-col justify-between min-h-[170px]">
+            <div>
+              <h3 className="font-bold text-[20px] mb-1">
+                {datasetForm?.name}
+              </h3>
+              <h3 className="font-bold text-sm mb-1">
+                <span className="font-normal">{datasetForm?.description}</span>
+              </h3>
+            </div>
+            <div className="flex justify-start gap-4 items-center">
+              <Button
+                type="button"
+                onClick={() => {
+                  setIsEditFormOpen(true);
+                }}
+                disabled={isEditDatasetLoading || isDeleteDatasetLoading}
+              >
+                Edit
+              </Button>
+              <Button
+                type="button"
+                onClick={() => {
+                  handleDownload();
+                }}
+                disabled={isEditDatasetLoading || isDeleteDatasetLoading}
+              >
+                Download
+              </Button>
+              <Button
+                type="button"
+                variant="destructive"
+                disabled={isEditDatasetLoading || isDeleteDatasetLoading}
+                onClick={() => setIsDeleteModalOpen(true)}
+              >
+                Delete
+              </Button>
+            </div>
+          </div>
+        </Card>
+      ) : (
+        <Card extra={"w-full py-4 px-6 h-full mb-4"}>
+          <div className="flex flex-col justify-between min-h-[170px]">
+            <div className="mt-2">
+              <Input
+                name="name"
+                type="text"
+                placeholder="Add Dataset name"
+                autoComplete="off"
+                value={datasetForm.name}
+                onChange={handleChange}
+              />
+            </div>
+            <div className="mt-1">
+              <Textarea
+                name="description"
+                placeholder="Add Dataset name"
+                autoComplete="off"
+                value={datasetForm.description}
+                onChange={handleChange}
+              />
+            </div>
+
+            <div className="flex justify-start gap-4 items-center flex-wrap">
+              <Button
+                type="button"
+                onClick={() => {
+                  handleSubmit();
+                }}
+                disabled={isEditDatasetLoading || isDeleteDatasetLoading}
+              >
+                {isEditDatasetLoading ? (
+                  <Loader height="h-6" width="w-10" />
+                ) : (
+                  "Save"
+                )}
+              </Button>
+              <Button
+                type="button"
+                variant="destructive"
+                disabled={isEditDatasetLoading || isDeleteDatasetLoading}
+                onClick={() => setIsEditFormOpen(false)}
+              >
+                Cancel
+              </Button>
+            </div>
+          </div>
+        </Card>
+      )}
+
+      {isDeleteModalOpen && (
+        <ConfirmationDialog
+          text={`Are you sure you want to delete this Datasets?`}
+          onCancel={() => {
+            setIsDeleteModalOpen(false);
+          }}
+          isLoading={isDeleteLoading}
+          onSubmit={handleDelete}
+        />
+      )}
+    </>
+  );
+};
+
+export default DatasetCard;
diff --git a/client/app/settings/datasets/[id]/page.tsx b/client/app/settings/datasets/[id]/page.tsx
new file mode 100644
index 000000000..86de7d888
--- /dev/null
+++ b/client/app/settings/datasets/[id]/page.tsx
@@ -0,0 +1,41 @@
+"use client";
+import React from "react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import DatasetCard from "./DatasetCard";
+import { DatasetCardLoading } from "@/components/Skeletons";
+import { useGetDatasetDetails } from "@/hooks/useDatasets";
+
+const DatasetDetailsPage = () => {
+  const parmas: { id: string } = useParams();
+
+  const {
+    data: datasetDetailsResponse,
+    isLoading: isDatasetDetailsResponseLoading,
+  } = useGetDatasetDetails(parmas.id);
+
+  const dataframe = datasetDetailsResponse?.data?.dataset;
+
+  return (
+    <>
+      <div className="w-full h-full overflow-y-auto custom-scroll mt-5 px-2 md:px-4">
+        <h1 className="text-2xl font-bold dark:text-white mb-10">
+          <Link href="/settings/datasets">Datasets</Link>
+          <small>{` › ${dataframe?.name || ""}`}</small>
+        </h1>
+
+        <div className="flex flex-col p-2 md:p-4 font-montserrat">
+          <div className="flex items-center justify-center w-[50%]">
+            {isDatasetDetailsResponseLoading ? (
+              <DatasetCardLoading />
+            ) : (
+              <DatasetCard dataframe={dataframe} />
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default DatasetDetailsPage;
diff --git a/client/app/settings/datasets/add/page.tsx b/client/app/settings/datasets/add/page.tsx
new file mode 100644
index 000000000..c2dd9e63c
--- /dev/null
+++ b/client/app/settings/datasets/add/page.tsx
@@ -0,0 +1,141 @@
+"use client";
+import React, { useState } from "react";
+import { Loader } from "components/loader/Loader";
+import { FaFileCsv } from "react-icons/fa";
+import Link from "next/link";
+import CsvDataset from "@/components/AddFormsDataSets/CsvDataSets";
+import { ValidationErrorsAddForm } from "../datasets-interface";
+import { Button } from "@/components/ui/button";
+import { useCreateDataset } from "@/hooks/useDatasets";
+import { toast } from "react-toastify";
+import { useRouter } from "next/navigation";
+
+const AddDataSet = () => {
+  const [inputFile, setInputFile] = useState(null);
+  const [validationErrors, setValidationErrors] =
+    useState<ValidationErrorsAddForm>({});
+  const [fileError, setFileError] = useState("");
+
+  const { mutateAsync: createDataset, isPending } = useCreateDataset();
+  const router = useRouter();
+
+  const handleFormOnChange = (e) => {
+    const file = e.target.files[0];
+    const fileType = file?.name?.split(".").pop().toLowerCase();
+    if (fileType !== "csv") {
+      setFileError("Please upload a CSV file.");
+      return;
+    }
+
+    setInputFile(e.target.files[0]);
+  };
+
+  const [formData, setFormData] = useState({
+    name: "",
+    description: "",
+  });
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({
+      ...formData,
+      [name]: value,
+    });
+  };
+
+  const dataSetsRequiredFields = {
+    CSV: ["name"],
+  };
+
+  const validateForm = () => {
+    const errors = {};
+    const requiredFields = dataSetsRequiredFields["CSV"] || [];
+
+    for (const field of requiredFields) {
+      if (formData[field]?.trim() === "") {
+        errors[field] = `${
+          field.charAt(0).toUpperCase() + field.slice(1)
+        } field is required`;
+      }
+    }
+
+    setValidationErrors(errors);
+    return Object.keys(errors)?.length === 0;
+  };
+
+  const resetForm = () => {
+    setFormData({
+      name: "",
+      description: "",
+    });
+  };
+  const handleAdd = async () => {
+    if (!validateForm()) {
+      return;
+    }
+    if (!inputFile) {
+      setFileError("No file selected. Please select a file.");
+      return;
+    }
+
+    const formBody = new FormData();
+    formBody.append("name", formData.name);
+    formBody.append("description", formData.description);
+    formBody.append("file", inputFile);
+
+    createDataset({ formBody }, { onSuccess, onError });
+  };
+  const onSuccess = (response: any) => {
+    toast.success(response?.data?.message);
+    router.push("/settings/datasets");
+  };
+
+  const onError = (error: any) => {
+    toast.error(
+      error?.response?.data?.message
+        ? error?.response?.data?.message
+        : error.message
+    );
+  };
+
+  return (
+    <div className="w-full h-full overflow-y-auto custom-scroll mt-5 px-2 md:px-4">
+      <h1 className="text-2xl font-bold dark:text-white mb-10">
+        <Link href="/settings/datasets">Datasets</Link>
+        <small> › New</small>
+      </h1>
+      {isPending ? (
+        <Loader />
+      ) : (
+        <div className="!z-5 relative rounded-[20px] bg-white bg-clip-border shadow-3xl shadow-shadow-100 dark:shadow-none dark:bg-darkMain dark:text-white max-w-3xl p-4 mb-4 m-5 mt-10">
+          <div className="flex w-full items-center gap-2 flex-wrap md:flex-nowrap">
+            <div className="border flex items-center justify-center md:h-20 md:w-24 md:p-2 py-2 px-4 rounded cursor-pointer bg-black text-white">
+              <div className="flex gap-1 justify-center flex-col">
+                <span className="m-auto">
+                  <FaFileCsv size="2em" />
+                </span>
+                CSV
+              </div>
+            </div>
+          </div>
+
+          <CsvDataset
+            handleChange={handleChange}
+            handleOnChange={handleFormOnChange}
+            nameError={validationErrors.name}
+            formData={formData}
+            descriptionError={validationErrors.description}
+            csvFileNameSet={inputFile?.name}
+            setCsvFileNameSet={setInputFile}
+            fileError={fileError}
+          />
+
+          <div className="text-center">
+            <Button onClick={handleAdd}>Add dataset</Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+export default AddDataSet;
diff --git a/client/app/settings/datasets/datasets-interface.ts b/client/app/settings/datasets/datasets-interface.ts
new file mode 100644
index 000000000..6a0465e41
--- /dev/null
+++ b/client/app/settings/datasets/datasets-interface.ts
@@ -0,0 +1,38 @@
+export interface IDatasetDetails {
+  id?: string;
+  name?: string;
+  table_name?: string;
+  description?: string | null;
+  created_at?: string;
+  head?: {
+    headers?: string[];
+    rows?: (string | number | null)[][];
+  };
+  user_id?: string;
+  organization_id?: string;
+  connector_id?: string;
+  field_descriptions?: string | null;
+  filterable_columns?: string[] | null;
+}
+
+
+export interface ValidationErrorsAddForm {
+  name?: string;
+  description?: string;
+  table?: string;
+  database?: string;
+  host?: string;
+  port?: string;
+  userName?: string;
+  password?: string;
+  account?: string;
+  dbSchema?: string;
+  token?: string;
+  apiKey?: string;
+  baseId?: string;
+  httpPath?: string;
+  warehouse?: string;
+  tableName?: string;
+  tableDescription?: string;
+  projectID?: string;
+}
diff --git a/client/app/settings/datasets/page.tsx b/client/app/settings/datasets/page.tsx
new file mode 100644
index 000000000..280168a46
--- /dev/null
+++ b/client/app/settings/datasets/page.tsx
@@ -0,0 +1,78 @@
+"use client";
+import React from "react";
+import { Loader } from "components/loader/Loader";
+import Link from "next/link";
+import AddWorkSpaceLarge from "components/Icons/AddWorkSpaceLarge";
+import { useAppStore } from "store";
+import Card from "@/components/card";
+import { useGetAllDataSets } from "@/hooks/useDatasets";
+import AppTooltip from "@/components/AppTooltip";
+import { FaFileCsv } from "react-icons/fa";
+import { Button } from "@/components/ui/button";
+
+const Datasets = () => {
+  const darkMode = useAppStore((state) => state.darkMode);
+  const { data: datasetsResponse, isLoading } = useGetAllDataSets();
+
+  return (
+    <div className="w-full h-full overflow-y-auto custom-scroll mt-5 px-2 md:px-4">
+      <h1 className="text-2xl font-bold dark:text-white mb-10">Datasets</h1>
+      {isLoading ? (
+        <Loader />
+      ) : (
+        <>
+          <div className="grid 2xl:grid-cols-4 xl:grid-cols-3 lg:grid-cols-2 gap-4">
+            {datasetsResponse?.data?.datasets?.map((item) => (
+              <Card
+                key={item.id}
+                extra={
+                  "w-full pt-4 px-6 h-full border dark:border-none border-[#ccc] pb-8"
+                }
+              >
+                <header className="relative flex items-center justify-between">
+                  <div className="w-full">
+                    <div className="flex justify-center h-24">
+                      <FaFileCsv size="4em" key={0} />
+                    </div>
+                    <div className="h-[65px] w-full overflow-hidden">
+                      <AppTooltip text={item.name}>
+                        <h1
+                          data-tooltip-id={`${item.id}`}
+                          className="dark:text-white font-bold font-montserrat text-[20px] text-center customellipsis"
+                        >
+                          {item.name}
+                        </h1>
+                      </AppTooltip>
+                    </div>
+                  </div>
+                </header>
+                <div className="w-full flex flex-wrap items-center justify-center mt-1">
+                  <Link href={`/settings/datasets/${item?.id}`}>
+                    <Button>Details</Button>
+                  </Link>
+                </div>
+              </Card>
+            ))}
+
+            <Link href={`/settings/datasets/add`}>
+              <Card
+                extra={
+                  "w-full py-16 px-6 h-full border dark:border-none border-[#ccc]"
+                }
+              >
+                <div className="flex flex-col justify-center items-center h-full gap-6 py-[30px]">
+                  <AddWorkSpaceLarge color={darkMode ? "white" : "black"} />
+                  <h1 className="dark:text-white font-bold font-montserrat text-[15px] text-center">
+                    New dataset
+                  </h1>
+                </div>
+              </Card>
+            </Link>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default Datasets;
diff --git a/client/app/settings/layout.tsx b/client/app/settings/layout.tsx
new file mode 100644
index 000000000..b0988b6aa
--- /dev/null
+++ b/client/app/settings/layout.tsx
@@ -0,0 +1,43 @@
+"use client";
+import { isWindowAvailable } from "utils/navigation";
+import React from "react";
+import VerticalLineSeperator from "components/VerticalLineSeperator";
+import Drawer from "react-modern-drawer";
+import "react-modern-drawer/dist/index.css";
+import { useAppStore } from "store";
+import Navbar from "@/components/Navbar";
+import SettingsLeftBar from "@/components/SettingsLayout/LeftBar";
+
+export default function Admin({ children }: { children: React.ReactNode }) {
+  const isSideBarOpen = useAppStore((state) => state.isSideBarOpen);
+  const setIsSidebarOpen = useAppStore((state) => state.setIsSidebarOpen);
+
+  if (isWindowAvailable()) document.documentElement.dir = "ltr";
+
+  return (
+    <>
+      <div className="flex flex-col h-screen">
+        <Navbar />
+        <div className="flex h-screen dark:bg-black bg-white overflow-y-hidden">
+          {/* Previous Conversations Sidebar */}
+          <div className="hidden md:flex">
+            <SettingsLeftBar />
+            <VerticalLineSeperator />
+          </div>
+
+          {/* Main Content */}
+          <div className="flex-1 w-full">{children}</div>
+        </div>
+      </div>
+      <Drawer
+        open={isSideBarOpen}
+        onClose={() => setIsSidebarOpen(false)}
+        direction="left"
+        className=""
+        zIndex={1000}
+      >
+        <SettingsLeftBar isMobileView={true} />
+      </Drawer>
+    </>
+  );
+}
diff --git a/client/app/settings/page.tsx b/client/app/settings/page.tsx
new file mode 100644
index 000000000..424755a68
--- /dev/null
+++ b/client/app/settings/page.tsx
@@ -0,0 +1,4 @@
+import { redirect } from "next/navigation";
+export default function Home() {
+  redirect("/settings/datasets");
+}
diff --git a/client/components/AddFormsDataSets/CsvDataSets.tsx b/client/components/AddFormsDataSets/CsvDataSets.tsx
new file mode 100644
index 000000000..8b57e02c9
--- /dev/null
+++ b/client/components/AddFormsDataSets/CsvDataSets.tsx
@@ -0,0 +1,143 @@
+import React, { ChangeEvent } from "react";
+import { AiOutlineClose } from "react-icons/ai";
+import Link from "next/link";
+import { FaFileCsv } from "react-icons/fa";
+import UploadIcon from "../Icons/UploadIcon";
+
+interface CsvProps {
+  handleChange?: (
+    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => void;
+  handleOnChange?: (
+    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => void;
+  nameError: string | null;
+  formData?: {
+    name?: string;
+    description?: string;
+    table?: string;
+  };
+  descriptionError: string | null;
+  csvFileNameSet: string | null;
+  setCsvFileNameSet: React.Dispatch<React.SetStateAction<string>>;
+  fileError: string;
+}
+const CsvDataset = ({
+  handleChange,
+  nameError,
+  formData,
+  descriptionError,
+  handleOnChange,
+  csvFileNameSet,
+  setCsvFileNameSet,
+  fileError,
+}: CsvProps) => {
+  return (
+    <>
+      <div className="mt-8">
+        <div className="mb-4">
+          <label>Name *</label>
+          <input
+            autoComplete="off"
+            onChange={handleChange}
+            name="name"
+            type="text"
+            value={formData?.name}
+            className={`w-full mt-1 p-2 border rounded-xl
+            ${
+              nameError && formData?.name?.length < 1
+                ? "border-red-500"
+                : "dark:!bg-[#333333] dark:border-none"
+            }
+            `}
+          />
+          {nameError && formData?.name?.length < 1 && (
+            <div className="mb-2 rounded-lg bg-red-50 p-2 text-sm text-red-800 dark:bg-[#333333] dark:text-red-500 mt-2 inline-flex">
+              {nameError}
+            </div>
+          )}
+        </div>
+        <div className="mb-4">
+          <label>Description</label>
+          <textarea
+            className={`w-full mt-1 p-2 border rounded-xl
+            ${
+              descriptionError && formData?.description?.length < 1
+                ? "border-red-500"
+                : "dark:!bg-[#333333] dark:border-none"
+            }
+            `}
+            onChange={handleChange}
+            name="description"
+            value={formData?.description}
+            placeholder="Describe your table here..."
+            rows={4}
+          />
+        </div>
+
+        <div className="mb-4 relative before:content-[''] before:absolute before:h-[1px] before:bg-[#000] dark:before:bg-white/70 before:w-full before:left-0 before:top-2.5">
+          <div className="bg-[white] dark:!bg-darkMain w-max m-auto relative px-4 text-sm text-[#333333] dark:text-white/70">
+            Upload your CSV
+          </div>
+        </div>
+
+        <div className="mb-4">
+          <div className="relative max-w-[450px] w-full mx-auto my-2 rounded-xl p-4 py-10 flex flex-col gap-4 items-center justify-center dark:bg-[#333333] border dark:border-none">
+            {csvFileNameSet ? (
+              <>
+                <div className="absolute right-2 top-2">
+                  <span
+                    className=" rounded   text-sm text-white"
+                    style={{ cursor: "pointer" }}
+                    onClick={() => {
+                      setCsvFileNameSet(null);
+                    }}
+                  >
+                    <AiOutlineClose
+                      className="text-[#FF0000] dark:text-white"
+                      size="1.5em"
+                    />
+                  </span>
+                </div>
+                <FaFileCsv size="3em" />
+                <div className="text-sm w-full text-center">
+                  {csvFileNameSet}
+                </div>
+              </>
+            ) : (
+              <>
+                <UploadIcon />
+                <input
+                  className="absolute h-full w-full z-100 opacity-0"
+                  type="file"
+                  id="csvFileInput"
+                  accept=".csv"
+                  onChange={handleOnChange}
+                />
+                <div className="text-center">
+                  <p className="text-xl font-bold">
+                    Drag and drop the file here
+                  </p>
+                  <p>
+                    or click{" "}
+                    <Link href="#" className="text-orange-400">
+                      browse
+                    </Link>{" "}
+                    to choose a file
+                  </p>
+                </div>
+                {fileError && (
+                  <div className="mb-2 rounded-lg bg-red-50 p-2 text-sm text-red-800 dark:bg-gray-800 dark:text-red-500 mt-2 inline-flex">
+                    {fileError}
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default CsvDataset;
diff --git a/client/components/Buttons/Button.tsx b/client/components/Buttons/Button.tsx
deleted file mode 100644
index bb89d26ce..000000000
--- a/client/components/Buttons/Button.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from "react";
-import Link from "next/link";
-
-const Button = ({
-  link,
-  text,
-  className,
-}: {
-  link?: string;
-  text: string;
-  className?: string;
-}) => (
-  <Link href={link || undefined}>
-    <div
-      className={`px-8 py-1 border rounded-[10px] flex flex-wrap items-center justify-center cursor-pointer dark:bg-white neon-on-hover ${className}`}
-    >
-      <span className="font-bold text-black font-montserrat">{text}</span>
-    </div>
-  </Link>
-);
-export default Button;
diff --git a/client/components/CardConnector/index.tsx b/client/components/CardConnector/index.tsx
index b4d6bbb9e..21afc9f39 100644
--- a/client/components/CardConnector/index.tsx
+++ b/client/components/CardConnector/index.tsx
@@ -1,12 +1,5 @@
 import React from "react";
-import { BiLogoPostgresql } from "react-icons/bi";
-import { FaFileCsv, FaSnowflake } from "react-icons/fa";
-import { SiAirtable, SiSqlite } from "react-icons/si";
-import {
-  TbBrandDatabricks,
-  TbBrandMysql,
-  TbBrandGoogleBigQuery,
-} from "react-icons/tb";
+import { FaFileCsv } from "react-icons/fa";
 
 const CardConnector = ({
   id,
@@ -31,70 +24,12 @@ const CardConnector = ({
       onClick={() => onClick(id)}
       className="border flex items-center justify-center md:h-20 md:w-24 md:p-2 py-2 px-4 rounded cursor-pointer"
     >
-      {id === 1 && (
-        <div className="flex gap-1 justify-center flex-col">
-          <span className="m-auto">
-            <FaFileCsv size="2em" />
-          </span>
-          CSV
-        </div>
-      )}
-      {id === 2 && (
-        <div className="flex gap-1 justify-center flex-col">
-          <span className="m-auto">
-            <BiLogoPostgresql size="2em" />
-          </span>
-          PostgreSql
-        </div>
-      )}
-      {id === 3 && (
-        <div className="flex gap-1 justify-center flex-col">
-          <span className="m-auto">
-            <TbBrandMysql size="2em" />
-          </span>
-          MySQL
-        </div>
-      )}
-      {id === 4 && (
-        <div className="flex gap-1 justify-center flex-col">
-          <span className="m-auto">
-            <SiSqlite size="2em" />
-          </span>
-          Sqlite
-        </div>
-      )}
-      {id === 5 && (
-        <div className="flex gap-1 justify-center flex-col">
-          <span className="m-auto">
-            <FaSnowflake size="2em" />
-          </span>
-          Snowflake
-        </div>
-      )}
-      {id === 6 && (
-        <div className="flex gap-1 justify-center flex-col">
-          <span className="m-auto">
-            <TbBrandDatabricks size="2em" />
-          </span>
-          Databricks
-        </div>
-      )}
-      {id === 7 && (
-        <div className="flex gap-1 justify-center flex-col">
-          <span className="m-auto">
-            <TbBrandGoogleBigQuery size="2em" />
-          </span>
-          BigQuery
-        </div>
-      )}
-      {id === 8 && (
-        <div className="flex gap-1 justify-center flex-col">
-          <span className="m-auto">
-            <SiAirtable size="2em" />
-          </span>
-          Airtable
-        </div>
-      )}
+      <div className="flex gap-1 justify-center flex-col">
+        <span className="m-auto">
+          <FaFileCsv size="2em" />
+        </span>
+        CSV
+      </div>
     </div>
   );
 };
diff --git a/client/components/Icons/AddWorkSpaceLarge.tsx b/client/components/Icons/AddWorkSpaceLarge.tsx
new file mode 100644
index 000000000..45fb3a674
--- /dev/null
+++ b/client/components/Icons/AddWorkSpaceLarge.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+const AddWorkSpaceLarge = ({ color }: { color: string }) => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M20 10C20 10.221 19.9122 10.433 19.7559 10.5893C19.5996 10.7455 19.3877 10.8333 19.1667 10.8333H10.8333V19.1667C10.8333 19.3877 10.7455 19.5996 10.5893 19.7559C10.433 19.9122 10.221 20 10 20C9.77899 20 9.56702 19.9122 9.41074 19.7559C9.25446 19.5996 9.16667 19.3877 9.16667 19.1667V10.8333H0.833333C0.61232 10.8333 0.400358 10.7455 0.244078 10.5893C0.0877975 10.433 0 10.221 0 10C0 9.77899 0.0877975 9.56702 0.244078 9.41074C0.400358 9.25446 0.61232 9.16667 0.833333 9.16667H9.16667V0.833333C9.16667 0.61232 9.25446 0.400358 9.41074 0.244078C9.56702 0.0877975 9.77899 0 10 0C10.221 0 10.433 0.0877975 10.5893 0.244078C10.7455 0.400358 10.8333 0.61232 10.8333 0.833333V9.16667H19.1667C19.3877 9.16667 19.5996 9.25446 19.7559 9.41074C19.9122 9.56702 20 9.77899 20 10Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+export default AddWorkSpaceLarge;
diff --git a/client/components/Icons/UploadIcon.tsx b/client/components/Icons/UploadIcon.tsx
new file mode 100644
index 000000000..c4aaedd01
--- /dev/null
+++ b/client/components/Icons/UploadIcon.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+const UploadIcon = () => {
+  return (
+    <svg
+      width="52"
+      height="51"
+      viewBox="0 0 52 51"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M26.001 25.501L26.476 23.8689C26.1792 23.7861 25.8652 23.7824 25.5665 23.8584C25.2677 23.9343 24.9951 24.0871 24.7767 24.301C24.5583 24.5148 24.4021 24.7819 24.3242 25.0748C24.2463 25.3676 24.2495 25.6756 24.3335 25.9668L26.001 25.501ZM32.9346 49.3019L31.2706 49.7677C31.369 50.105 31.5714 50.4041 31.8499 50.6241C32.1285 50.8441 32.4697 50.9742 32.8266 50.9965C33.1836 51.0189 33.5388 50.9324 33.8437 50.7489C34.1485 50.5655 34.388 50.294 34.5294 49.9718L32.9346 49.3019ZM50.2686 32.3013L50.9516 33.8653C51.2801 33.7267 51.5569 33.4918 51.744 33.1928C51.9311 32.8938 52.0193 32.5454 51.9965 32.1953C51.9737 31.8453 51.8411 31.5107 51.6167 31.2374C51.3924 30.9642 51.0874 30.7657 50.7436 30.6692L50.2686 32.3013ZM38.1348 37.4015L37.4519 35.8374C37.042 36.0094 36.7155 36.3297 36.5401 36.7316L38.1348 37.4015ZM12.1338 11.9005V10.2004H10.4004V11.9005H12.1338ZM46.8018 11.9005H48.5352V10.2004H46.8018V11.9005ZM12.1338 45.9018H10.4004V47.6019H12.1338V45.9018ZM0 3.40013H3.4668V0H0V3.40013ZM13.8672 3.40013H17.334V0H13.8672V3.40013ZM27.7344 3.40013H31.2012V0H27.7344V3.40013ZM0 17.0007H3.4668V13.6005H0V17.0007ZM0 30.6012H3.4668V27.2011H0V30.6012ZM24.3335 25.9668L31.2706 49.7677L34.5987 48.8361L27.6651 25.0352L24.3335 25.9668ZM50.7436 30.6658L26.476 23.8689L25.5261 27.1365L49.7937 33.9367L50.7436 30.6658ZM34.5294 49.9718L39.7296 38.0713L36.5401 36.7316L31.3399 48.6321L34.5294 49.9718ZM38.8178 38.9655L50.9516 33.8653L49.5857 30.7372L37.4519 35.8374L38.8178 38.9655ZM12.1338 13.6005H46.8018V10.2004H12.1338V13.6005ZM45.0684 11.9005V23.8009H48.5352V11.9005H45.0684ZM10.4004 11.9005V45.9018H13.8672V11.9005H10.4004ZM12.1338 47.6019H24.2676V44.2017H12.1338V47.6019Z"
+        fill="white"
+        fillOpacity="0.3"
+      />
+    </svg>
+  );
+};
+
+export default UploadIcon;
diff --git a/client/components/SettingsLayout/LeftBar.tsx b/client/components/SettingsLayout/LeftBar.tsx
new file mode 100644
index 000000000..12eb3ab47
--- /dev/null
+++ b/client/components/SettingsLayout/LeftBar.tsx
@@ -0,0 +1,63 @@
+"use client";
+import React from "react";
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+import { useAppStore } from "store";
+
+interface IProps {
+  isMobileView?: boolean;
+}
+
+const routes = [
+  {
+    name: "Datasets",
+    url: "/settings/datasets",
+    isAdmin: true,
+  },
+];
+
+const SettingsLeftBar = ({ isMobileView = false }: IProps) => {
+  const setIsSidebarOpen = useAppStore((state) => state.setIsSidebarOpen);
+  const pathname = usePathname();
+  const closeSidebar = () => {
+    setIsSidebarOpen(false);
+  };
+  return (
+    <div
+      className={`${
+        isMobileView ? "w-full" : "w-[370px]"
+      } bg-white dark:bg-[#111111] transition-all h-full flex flex-col font-montserrat border-r-[#333333] relative`}
+    >
+      <div
+        className={`${
+          isMobileView
+            ? "overflow-y-auto"
+            : "overflow-y-hidden hover:overflow-y-auto"
+        } flex-1 custom-scroll font-montserrat`}
+      >
+        <div className="p-5">
+          <h2
+            className={`font-semibold text-2xl dark:text-white mb-4 transition-all duration-1000`}
+          >
+            Settings
+          </h2>
+        </div>
+        {routes?.map((route, index) => (
+          <Link href={route.url} key={index}>
+            <div
+              onClick={() => closeSidebar()}
+              key={index}
+              className={`px-4 py-1 dark:text-white text-base truncate cursor-pointer hover:underline ${
+                route.url === pathname ? "font-bold" : "font-light"
+              }`}
+            >
+              {route.name}
+            </div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default SettingsLeftBar;
diff --git a/client/components/SettingsMenu/index.tsx b/client/components/SettingsMenu/index.tsx
index d262c4bc6..4fa8feccf 100644
--- a/client/components/SettingsMenu/index.tsx
+++ b/client/components/SettingsMenu/index.tsx
@@ -4,6 +4,16 @@ import Dropdown from "../../components/dropdown";
 import { useRouter } from "next/navigation";
 import { useQueryClient } from "@tanstack/react-query";
 import ToggleDarkModeComponent from "components/ToggleDarkMode";
+import Link from "next/link";
+
+const routes = [
+  {
+    id: 1,
+    name: "Settings",
+    url: "/settings",
+    isAdmin: true,
+  },
+];
 
 const SettingsMenu = () => {
   const router = useRouter();
@@ -43,6 +53,16 @@ const SettingsMenu = () => {
           <div className="mt-3 h-px w-full bg-gray-200 dark:bg-white/20 " />
 
           <div className="p-4 flex flex-col">
+            {routes.map((route) => (
+              <React.Fragment key={route.id}>
+                <Link
+                  href={route.url}
+                  className="text-sm text-gray-800 dark:text-white hover:dark:text-white cursor-pointer hover:underline mt-1"
+                >
+                  {route.name}
+                </Link>
+              </React.Fragment>
+            ))}
             <a
               className="mt-2 text-sm font-medium text-red-500 hover:text-red-500 cursor-pointer"
               onClick={handleLogOut}
diff --git a/client/components/Skeletons/index.tsx b/client/components/Skeletons/index.tsx
index 091d6b2b7..aef2a11c2 100644
--- a/client/components/Skeletons/index.tsx
+++ b/client/components/Skeletons/index.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
 import { useAppStore } from "store";
+import Card from "../card";
 
 export const WorkSpaceLoader = () => {
   const darkMode = useAppStore((state) => state.darkMode);
@@ -134,3 +135,27 @@ export const ExplainMessageLoader = () => {
     </SkeletonTheme>
   );
 };
+export const DatasetCardLoading = () => {
+  const darkMode = useAppStore((state) => state.darkMode);
+  return (
+    <SkeletonTheme
+      baseColor={darkMode && "#191919"}
+      highlightColor={darkMode && "#333333"}
+    >
+      <Card extra={"w-full py-4 px-6 h-full mb-4"}>
+        <div className="flex flex-col justify-between h-[170px]">
+          <div>
+            <Skeleton width={200} className="mb-1" />
+
+            <h3 className="font-bold text-sm mb-1">
+              <Skeleton width={200} className="mb-2" />
+            </h3>
+          </div>
+          <div className="flex justify-start gap-4 items-center flex-wrap">
+            <Skeleton width={290} />
+          </div>
+        </div>
+      </Card>
+    </SkeletonTheme>
+  );
+};
diff --git a/client/components/card/index.tsx b/client/components/card/index.tsx
new file mode 100644
index 000000000..028f368e2
--- /dev/null
+++ b/client/components/card/index.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+function Card(props: {
+  className?: string;
+  extra?: string;
+  children?: React.ReactNode | Element;
+  default?: boolean;
+}) {
+  const { extra, children, ...rest } = props;
+  return (
+    <div
+      className={`!z-5 relative flex flex-col rounded-[20px] shadow-[rgba(0, 0, 0, 0.2)] shadow-md border border-gray-100 dark:border-none dark:shadow-none bg-clip-border dark:!bg-darkMain dark:text-white  ${extra}`}
+      {...rest}
+    >
+      <>{children}</>
+    </div>
+  );
+}
+
+export default Card;
diff --git a/client/components/ui/textarea.tsx b/client/components/ui/textarea.tsx
new file mode 100644
index 000000000..3c3fe8700
--- /dev/null
+++ b/client/components/ui/textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "text-sm w-full text-dark dark:text-white dark:bg-[#333333] font-montserrat font-normal rounded-[25px] pl-4 focus:outline-none py-2 placeholder-darkMain dark:placeholder-white/30 shadow-md border border-gray-100 dark:border-none disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };
diff --git a/client/hooks/useDatasets.tsx b/client/hooks/useDatasets.tsx
new file mode 100644
index 000000000..2780f03d8
--- /dev/null
+++ b/client/hooks/useDatasets.tsx
@@ -0,0 +1,62 @@
+import {
+  CreateDataset,
+  DeleteDataset,
+  GetAllDataSets,
+  GetDatasetDetails,
+  UpdateDatasetCard,
+} from "@/services/datasets";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+export const useGetAllDataSets = () => {
+  const { data, isLoading, error, isError } = useQuery({
+    queryKey: ["useGetAllDataSets"],
+    queryFn: () => GetAllDataSets(),
+  });
+  return { data, isLoading, error, isError };
+};
+export const useGetDatasetDetails = (id: string) => {
+  const { data, isLoading, error, isError } = useQuery({
+    queryKey: ["useGetDatasetDetails", id],
+    queryFn: () => GetDatasetDetails(id),
+  });
+  return { data, isLoading, error, isError };
+};
+
+export const useUpdateDatasetCard = () => {
+  const queryClient = useQueryClient();
+  const { data, isPending, error, isError, mutateAsync } = useMutation({
+    mutationFn: (params: any) => UpdateDatasetCard(params.id, params.body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["useGetDatasetDetails"] });
+    },
+  });
+  return { data, isPending, error, isError, mutateAsync };
+};
+export const useCreateDataset = () => {
+  const queryClient = useQueryClient();
+  const { data, isPending, error, isError, mutateAsync } = useMutation({
+    mutationFn: (params: any) => {
+      return CreateDataset(params.formBody);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["useGetDatasetDetails", "useGetAllDataSets"],
+      });
+    },
+  });
+  return { data, isPending, error, isError, mutateAsync };
+};
+export const useDeleteDataset = () => {
+  const queryClient = useQueryClient();
+  const { data, isPending, error, isError, mutateAsync } = useMutation({
+    mutationFn: (params: any) => {
+      return DeleteDataset(params.id);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["useGetDatasetDetails", "useGetAllDataSets"],
+      });
+    },
+  });
+  return { data, isPending, error, isError, mutateAsync };
+};
diff --git a/client/services/datasets.ts b/client/services/datasets.ts
new file mode 100644
index 000000000..6a39c6743
--- /dev/null
+++ b/client/services/datasets.ts
@@ -0,0 +1,57 @@
+
+import { DeleteRequest, GetRequest, PostRequest, PutRequest } from '@/utils/apiUtils';
+
+const datasetsApiUrl = `/v1/datasets`;
+
+
+export const GetAllDataSets = async () => {
+    try {
+        const response = await GetRequest(`${datasetsApiUrl}/`);
+        return response;
+    } catch (error) {
+        console.error('Get request failed', error);
+        throw error;
+    }
+};
+
+export const GetDatasetDetails = async (datasetId: string) => {
+    try {
+        const response = await GetRequest(`${datasetsApiUrl}/${datasetId}`);
+        return response;
+    } catch (error) {
+        console.error('Get request failed', error);
+        throw error;
+    }
+};
+export const UpdateDatasetCard = async (datasetId: string, body: { name: string, description?: string }) => {
+    try {
+        const response = await PutRequest(`${datasetsApiUrl}/${datasetId}`, body);
+        return response;
+    } catch (error) {
+        console.error('Get request failed', error);
+        throw error;
+    }
+};
+
+export const CreateDataset = async (body) => {
+    try {
+        const headers = {
+            'Content-Type': 'multipart/form-data',
+        }
+        const response = await PostRequest(`${datasetsApiUrl}`, body, headers);
+        return response;
+    } catch (error) {
+        console.error('request failed', error);
+        throw error;
+    }
+};
+
+export const DeleteDataset = async (dataset_id: string) => {
+    try {
+        const response = await DeleteRequest(`${datasetsApiUrl}/${dataset_id}`);
+        return response;
+    } catch (error) {
+        console.error('request failed', error);
+        throw error;
+    }
+};
diff --git a/client/utils/apiUtils.ts b/client/utils/apiUtils.ts
index aa5d565ef..d31b41623 100644
--- a/client/utils/apiUtils.ts
+++ b/client/utils/apiUtils.ts
@@ -1,7 +1,7 @@
 import axios, { AxiosResponse } from 'axios';
 import { BASE_API_URL } from './constants';
 
-const axiosInstance = axios.create({
+export const axiosInstance = axios.create({
   baseURL: BASE_API_URL,
   headers: {
     'Content-Type': 'application/json',
@@ -27,9 +27,14 @@ export async function GetRequest(url: string): Promise<AxiosResponse<any, any>>
   }
 }
 
-export async function PostRequest(url: string, requestData: object): Promise<AxiosResponse<any, any>> {
+export async function PostRequest(url: string, requestData: object, headers = {}): Promise<AxiosResponse<any, any>> {
   try {
-    const response = await axiosInstance.post(url, requestData);
+    const defaultHeaders = {
+      'Content-Type': 'application/json',
+    };
+    const updatedHeader = { ...defaultHeaders, ...headers }
+
+    const response = await axiosInstance.post(url, requestData, { headers: updatedHeader });
     return response;
   } catch (error) {
     throw error;
diff --git a/server/api/v1/__init__.py b/server/api/v1/__init__.py
index 8fb85bfd0..6207ee624 100644
--- a/server/api/v1/__init__.py
+++ b/server/api/v1/__init__.py
@@ -11,7 +11,7 @@
 v1_router.include_router(monitoring_router, prefix="/monitoring")
 v1_router.include_router(users_router, prefix="/users")
 v1_router.include_router(chat_router, prefix="/chat", tags=["Chat"])
-v1_router.include_router(datasets_router, prefix="/dataset", tags=["Dataset"])
+v1_router.include_router(datasets_router, prefix="/datasets", tags=["Dataset"])
 v1_router.include_router(
     conversation_router, prefix="/conversations", tags=["Conversations"]
 )
diff --git a/server/api/v1/datasets/datasets.py b/server/api/v1/datasets/datasets.py
index 9b7bbaa78..b069a3046 100644
--- a/server/api/v1/datasets/datasets.py
+++ b/server/api/v1/datasets/datasets.py
@@ -1,10 +1,62 @@
-from fastapi import APIRouter, Depends, Path
+from fastapi import APIRouter, Depends, Path, status, UploadFile, File, Form
+from typing import Optional
 from app.controllers.datasets import DatasetController
-from app.schemas.responses.datasets import WorkspaceDatasetsResponseModel
+from app.schemas.responses.datasets import WorkspaceDatasetsResponseModel, DatasetsDetailsResponseModel
 from core.factory import Factory
+from uuid import UUID
+from app.schemas.requests.datasets import DatasetUpdateRequestModel
+from app.schemas.responses.users import UserInfo
+from core.fastapi.dependencies.current_user import get_current_user
+from fastapi.responses import FileResponse
 
 dataset_router = APIRouter()
 
 @dataset_router.get("/", response_model=WorkspaceDatasetsResponseModel)
-async def get_datasets(datasets_controller: DatasetController = Depends(Factory().get_datasets_controller)):
+async def get_all_datasets(datasets_controller: DatasetController = Depends(Factory().get_datasets_controller)):
     return await datasets_controller.get_all_datasets()
+
+
+@dataset_router.get("/{dataset_id}", response_model=DatasetsDetailsResponseModel)
+async def get_dataset(
+        dataset_id: UUID = Path(..., description="ID of the dataset"),
+        datasets_controller: DatasetController = Depends(Factory().get_datasets_controller)
+    ):
+    return await datasets_controller.get_datasets_details(dataset_id)
+
+
+@dataset_router.post("/")
+async def create_dataset(
+        name: str = Form(...),
+        description: Optional[str] = Form(None),
+        file: UploadFile = File(...),
+        user: UserInfo = Depends(get_current_user),
+        datasets_controller: DatasetController = Depends(Factory().get_datasets_controller)
+    ):
+    return await datasets_controller.create_dataset(file,name, description, user)
+
+    
+@dataset_router.delete("/{dataset_id}")
+async def delete_datasets(
+        dataset_id: UUID = Path(..., description="ID of the dataset"),
+        user: UserInfo = Depends(get_current_user),
+        datasets_controller: DatasetController = Depends(Factory().get_datasets_controller)
+    ):
+    return await datasets_controller.delete_datasets(dataset_id, user)
+
+
+
+@dataset_router.put("/{dataset_id}", status_code=status.HTTP_200_OK)
+async def update_datasets(
+        dataset_update: DatasetUpdateRequestModel,
+        dataset_id: UUID = Path(..., description="ID of the dataset"),
+        datasets_controller: DatasetController = Depends(Factory().get_datasets_controller)
+    ):
+    return await datasets_controller.update_dataset(dataset_id, dataset_update)
+
+
+@dataset_router.get("/download/{dataset_id}", response_class=FileResponse, status_code=status.HTTP_200_OK)
+async def download_dataset(
+        dataset_id: UUID = Path(..., description="ID of the dataset"),
+        datasets_controller: DatasetController = Depends(Factory().get_datasets_controller)
+    ):
+    return await datasets_controller.download_dataset(dataset_id)
\ No newline at end of file
diff --git a/server/app/controllers/datasets.py b/server/app/controllers/datasets.py
index 71bc56ccc..4b42ad328 100644
--- a/server/app/controllers/datasets.py
+++ b/server/app/controllers/datasets.py
@@ -1,10 +1,17 @@
-from fastapi import status, HTTPException
-from app.models import Dataset
+import os
+from fastapi import HTTPException, UploadFile
+from app.models import Dataset, ConnectorType
 from app.repositories import DatasetRepository, WorkspaceRepository
 from core.controller import BaseController
 from core.exceptions.base import NotFoundException
-from app.schemas.responses.datasets import WorkspaceDatasetsResponseModel
-from typing import List
+from app.schemas.responses.datasets import WorkspaceDatasetsResponseModel, DatasetsDetailsResponseModel
+from app.schemas.requests.datasets import DatasetUpdateRequestModel
+import shutil
+from app.schemas.responses.users import UserInfo
+import csv
+from core.database.transactional import Propagation, Transactional
+from fastapi.responses import FileResponse
+
 class DatasetController(BaseController[Dataset]):
     def __init__(
         self, 
@@ -15,6 +22,15 @@ def __init__(
         self.dataset_repository = dataset_repository
         self.space_repository = space_repository
 
+
+    async def get_dataset_by_id(self, dataset_id: str):
+        dataset = await self.dataset_repository.get_by_id(dataset_id)
+        if not dataset:
+            raise NotFoundException(
+                "No dataset found with the given ID. Please check the ID and try again"
+            )
+        return dataset
+
     async def get_all_datasets(self) -> WorkspaceDatasetsResponseModel:
         datasets = await self.get_all()
 
@@ -24,3 +40,88 @@ async def get_all_datasets(self) -> WorkspaceDatasetsResponseModel:
             )
 
         return WorkspaceDatasetsResponseModel(datasets=datasets)
+    
+    async def get_datasets_details(self, dataset_id) -> DatasetsDetailsResponseModel:
+        dataset = await self.get_dataset_by_id(dataset_id)
+        return DatasetsDetailsResponseModel(dataset=dataset)
+    
+    @Transactional(propagation=Propagation.REQUIRED)
+    async def delete_datasets(self, dataset_id, user):
+        await self.get_dataset_by_id(dataset_id)
+        await self.space_repository.delete_datasetspace(dataset_id, user.space.id)
+
+        file_path = os.path.join(os.getcwd(), 'data', f"{dataset_id}.csv")
+        if not os.path.exists(file_path):
+            raise NotFoundException(
+                "File not found!"
+            )
+        else:
+            os.remove(file_path)
+
+        return {"message": "Dataset deleted successfully"}
+    
+
+    async def update_dataset(self, dataset_id: str, dataset_update: DatasetUpdateRequestModel):
+        dataset = await self.get_dataset_by_id(dataset_id)
+
+        dataset.name = dataset_update.name
+        dataset.description = dataset_update.description
+        dataset = await self.dataset_repository.update_dataset(dataset=dataset)
+
+        return {"message": "Dataset updated successfully"}
+    
+
+    @Transactional(propagation=Propagation.REQUIRED)
+    async def create_dataset(self, file: UploadFile, name: str, description: str, user: UserInfo):
+        headers = []
+        rows = []
+        try:
+            file.file.seek(0)
+            csvfile = (line.decode('utf-8') for line in file.file)
+            csvreader = csv.reader(csvfile)
+            headers = next(csvreader, None)
+            if headers is None:
+                raise HTTPException(status_code=400, detail="CSV file does not contain headers")
+            for row in csvreader:
+                rows.append(row)
+        except Exception as e:
+            raise HTTPException(status_code=500, detail=f"Failed to read file: {str(e)}")
+
+        head = {
+            "headers": headers,
+            "rows": rows[:5]
+        }
+
+        dataset = await self.dataset_repository.create_dataset(
+            user_id=user.id,
+            organization_id=user.organizations[0].id,
+            name=name,
+            description=description,
+            connector_type=ConnectorType.CSV,
+            config={},
+            head=head,
+        )
+
+        dataset_id = dataset.id
+        file_path = os.path.join(os.getcwd(), 'data', f"{dataset_id}.csv")
+        # Rewind the file and save it to disk
+        file.file.seek(0)
+        try:
+            with open(file_path, "wb") as buffer:
+                shutil.copyfileobj(file.file, buffer)
+        except Exception as e:
+            raise HTTPException(status_code=500, detail=f"Failed to upload file: {str(e)}")
+        
+        await self.space_repository.add_dataset_to_space(workspace_id=user.space.id,dataset_id=dataset_id)
+
+        return DatasetsDetailsResponseModel(dataset=dataset)
+    
+
+    async def download_dataset(self, dataset_id):
+        await self.get_dataset_by_id(dataset_id)
+        file_path = os.path.join(os.getcwd(), 'data', f"{dataset_id}.csv")
+
+        if not os.path.exists(file_path):
+            raise HTTPException(status_code=404, detail="File not found")
+
+        return FileResponse(file_path, filename=f"{dataset_id}.csv", media_type='text/csv')
\ No newline at end of file
diff --git a/server/app/repositories/dataset.py b/server/app/repositories/dataset.py
index 1d33fe371..2d0a6fc0a 100644
--- a/server/app/repositories/dataset.py
+++ b/server/app/repositories/dataset.py
@@ -30,6 +30,7 @@ async def create_dataset(
             user_id=user_id,
             organization_id=organization_id,
             connector_id=connector.id,
+            description=description
         )
 
         self.session.add(dataset)
@@ -41,4 +42,13 @@ async def get_all_by_workspace_id(self, workspace_id: UUID):
             select(Dataset).join(DatasetSpace).where(DatasetSpace.workspace_id == workspace_id)
         )
         datasets = result.scalars().all()
-        return datasets
\ No newline at end of file
+        return datasets
+    
+
+    async def update_dataset(self, dataset):
+        self.session.add(dataset)
+        await self.session.commit()
+        await self.session.refresh(dataset)
+
+        return dataset
+
diff --git a/server/app/repositories/workspace.py b/server/app/repositories/workspace.py
index 043c1aa85..1923f4a5a 100644
--- a/server/app/repositories/workspace.py
+++ b/server/app/repositories/workspace.py
@@ -106,4 +106,18 @@ async def get_users_by_workspace_id(self, workspace_id: str) -> List[WorkspaceUs
                 User.email
             ).join(UserSpace).filter(UserSpace.workspace_id == workspace_id)
         )
-        return result.all()
\ No newline at end of file
+        return result.all()
+    
+
+    async def delete_datasetspace(self, dataset_id: str, workspace_id: str):
+        await self.session.execute(
+            delete(DatasetSpace).where(
+                DatasetSpace.dataset_id == dataset_id,
+                DatasetSpace.workspace_id == workspace_id
+            )
+        )
+
+        # Delete the Dataset entry
+        await self.session.execute(
+            delete(Dataset).where(Dataset.id == dataset_id)
+        )
\ No newline at end of file
diff --git a/server/app/schemas/requests/datasets.py b/server/app/schemas/requests/datasets.py
new file mode 100644
index 000000000..17c49f7a2
--- /dev/null
+++ b/server/app/schemas/requests/datasets.py
@@ -0,0 +1,14 @@
+from pydantic import BaseModel
+from typing import Optional
+from fastapi import UploadFile, File
+
+class DatasetUpdateRequestModel(BaseModel):
+    name: str
+    description: Optional[str] = None
+
+
+
+class DatasetCreateRequestModel(BaseModel):
+    name: str
+    description: Optional[str] = None
+    file: UploadFile = File(...),
diff --git a/server/app/schemas/responses/datasets.py b/server/app/schemas/responses/datasets.py
index 9a1820160..d2bdc3323 100644
--- a/server/app/schemas/responses/datasets.py
+++ b/server/app/schemas/responses/datasets.py
@@ -19,4 +19,7 @@ class Config:
         orm_mode = True
 
 class WorkspaceDatasetsResponseModel(BaseModel):
-    datasets: List[DatasetModel]
\ No newline at end of file
+    datasets: List[DatasetModel]
+
+class DatasetsDetailsResponseModel(BaseModel):
+    dataset: DatasetModel
\ No newline at end of file

From aee0a19891bec41269231fcfdccfe1e6c1552b88 Mon Sep 17 00:00:00 2001
From: Shahrukh Khan <srkbannu@gmail.com>
Date: Mon, 24 Jun 2024 19:49:14 +0500
Subject: [PATCH 2/2] datasets added

---
 client/app/settings/datasets/[id]/page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/app/settings/datasets/[id]/page.tsx b/client/app/settings/datasets/[id]/page.tsx
index 86de7d888..fb5e60f0c 100644
--- a/client/app/settings/datasets/[id]/page.tsx
+++ b/client/app/settings/datasets/[id]/page.tsx
@@ -7,12 +7,12 @@ import { DatasetCardLoading } from "@/components/Skeletons";
 import { useGetDatasetDetails } from "@/hooks/useDatasets";
 
 const DatasetDetailsPage = () => {
-  const parmas: { id: string } = useParams();
+  const params: { id: string } = useParams();
 
   const {
     data: datasetDetailsResponse,
     isLoading: isDatasetDetailsResponseLoading,
-  } = useGetDatasetDetails(parmas.id);
+  } = useGetDatasetDetails(params.id);
 
   const dataframe = datasetDetailsResponse?.data?.dataset;