Styled Homepage

src/pages/settings/components/Applications.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import {useMutationAPI, useQueryAPI} from "../../../hooks/useAPI";
 import { DataTable } from "../../../DataTable/DataTable";
 import { toast } from "react-toastify";
-import { MRT_TableOptions } from "mantine-react-table";
+import type { MRT_TableOptions } from "mantine-react-table";
 import ApplicationColumns from "../../../DataTable/columns/ApplicationColumns";
 import { Stack } from "@mantine/core";
 const ApplicationSettings = () => {

src/pages/settings/components/Bookmarks.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import {useMutationAPI, useQueryAPI} from "../../../hooks/useAPI";
 import { DataTable } from "../../../DataTable/DataTable";
 import { toast } from "react-toastify";
-import { MRT_TableOptions } from "mantine-react-table";
+import type { MRT_TableOptions } from "mantine-react-table";
 import { Stack } from "@mantine/core";
 import BookmarkColumns from "../../../DataTable/columns/BookmarkColumns";
 const BookmarkSettings = () => {
@@ -30,7 +30,7 @@ const BookmarkSettings = () => {
 
 	useEffect(() => {
 		if (groupDataisFetched) {
-			let groupList = groupData.map((category: any) => {
+			const groupList = groupData.map((category: any) => {
 				return category.category_name;
 			});
 			setGroups(groupList);

src/pages/settings/components/Categories.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useState } from "react";
+import {useMutationAPI, useQueryAPI} from "../../../hooks/useAPI";
+import { DataTable } from "../../../DataTable/DataTable";
+import { toast } from "react-toastify";
+import type { MRT_TableOptions } from "mantine-react-table";
+import CategoryColumns from "../../../DataTable/columns/CategoryColumns";
+import { Stack } from "@mantine/core";
+const CategorySettings = () => {
+    const endpoint = "api/categories";
+	const { data, isFetching, isLoading, isFetched } = useQueryAPI({
+		endpoint: endpoint,
+	});
+	const [categoryData, setCategoryData] = useState<any>([]);
+
+    const {mutateAsync: createRow, isPending: isCreatingRow} = useMutationAPI();
+    const {mutateAsync: editRow, isPending: isEditingRow} = useMutationAPI();
+
+    useEffect(() => {
+        if(isFetched) {
+            setCategoryData(data);
+        }
+    })
+
+    const handleCreateRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
+        values,
+        exitCreatingMode,
+      }) => {
+        
+        createRow({method: "POST", endpoint: endpoint, body: values}).then(() => {
+            toast.success("Category created successfully");
+        })
+        exitCreatingMode();
+      };
+    const handleEditRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
+        values,
+        table,
+      }) => {
+        editRow({method: "PATCH", endpoint: endpoint, body: values}).then(() => {
+            toast.success("Category updated successfully");
+        });
+        table.setEditingRow(null);
+      };
+
+	return (
+        <Stack>
+            <h2>Categories</h2>
+            <DataTable
+                tableName="Categories"
+                columns={CategoryColumns()}
+                tableData={categoryData}
+                isFetching={isFetching}
+                isLoading={isLoading}
+                onCreatingRowSave={handleCreateRow}
+                onEditingRowSave={handleEditRow}
+            />
+        </Stack>
+    )
+};
+export default CategorySettings;

src/pages/settings/components/Messages.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import {useMutationAPI, useQueryAPI} from "../../../hooks/useAPI";
 import { DataTable } from "../../../DataTable/DataTable";
 import { toast } from "react-toastify";
-import { MRT_TableOptions } from "mantine-react-table";
+import type { MRT_TableOptions } from "mantine-react-table";
 import MessagesColumns from "../../../DataTable/columns/MessagesColumns";
 import { Stack } from "@mantine/core";
 const MessageSettings = () => {

src/pages/settings/components/Personalization.tsx

@@ -3,7 +3,7 @@ import {useMutationAPI, useQueryAPI} from "../../../hooks/useAPI";
 import { DataTable } from "../../../DataTable/DataTable";
 import PersonalizationColumns from "../../../DataTable/columns/PersonalizationColumns";
 import { toast } from "react-toastify";
-import { MRT_TableOptions } from "mantine-react-table";
+import type { MRT_TableOptions } from "mantine-react-table";
 const PersonalizationSettings = () => {
     const endpoint = "api/personaldata";
 	const { data, isFetching, isLoading, isFetched } = useQueryAPI({

src/pages/settings/components/SearchProviders.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useState } from "react";
+import {useMutationAPI, useQueryAPI} from "../../../hooks/useAPI";
+import { DataTable } from "../../../DataTable/DataTable";
+import { toast } from "react-toastify";
+import type { MRT_TableOptions } from "mantine-react-table";
+import SearchProviderColumns from "../../../DataTable/columns/SearchProviderColumns";
+import { Stack } from "@mantine/core";
+const SearchProviderSettings = () => {
+    const endpoint = "api/providers";
+	const { data, isFetching, isLoading, isFetched } = useQueryAPI({
+		endpoint: endpoint,
+	});
+	const [providerData, setProviderData] = useState<any>([]);
+
+    const {mutateAsync: createRow, isPending: isCreatingRow} = useMutationAPI();
+    const {mutateAsync: editRow, isPending: isEditingRow} = useMutationAPI();
+
+    useEffect(() => {
+        if(isFetched) {
+            setProviderData(data);
+        }
+    })
+
+    const handleCreateRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
+        values,
+        exitCreatingMode,
+      }) => {
+        
+        createRow({method: "POST", endpoint: endpoint, body: values}).then(() => {
+            toast.success("Search provider created successfully");
+        })
+        exitCreatingMode();
+      };
+    const handleEditRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
+        values,
+        table,
+      }) => {
+        editRow({method: "PATCH", endpoint: endpoint, body: values}).then(() => {
+            toast.success("Search provider updated successfully");
+        });
+        table.setEditingRow(null);
+      };
+
+	return (
+        <Stack>
+            <h2>Search Providers</h2>
+            <DataTable
+                tableName="Categories"
+                columns={SearchProviderColumns()}
+                tableData={providerData}
+                isFetching={isFetching}
+                isLoading={isLoading}
+                onCreatingRowSave={handleCreateRow}
+                onEditingRowSave={handleEditRow}
+            />
+        </Stack>
+    )
+};
+export default SearchProviderSettings;

src/pages/settings/components/Themes.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useState } from "react";
+import { useQueryAPI } from "../../../hooks/useAPI";
+import { ActionIcon, Button, ColorPicker, ColorSwatch, Group, Modal, SimpleGrid, Stack } from "@mantine/core";
+import AppItem from "../../homepage/components/AppItem";
+import { FiEdit } from "react-icons/fi";
+import { useDisclosure, useLocalStorage } from "@mantine/hooks";
+import '@mantine/core/styles/ModalBase.css';
+import '@mantine/core/styles/Modal.css';
+function ThemesSettings() {
+    const [opened, { open, close }] = useDisclosure(false);
+    const [value, setValue] = useLocalStorage<any>({ key: 'theme', defaultValue: {} });
+	const { data, isFetched } = useQueryAPI({
+		endpoint: "api/themes",
+	});
+	const [themesList, setThemesList] = useState([]);
+    const [selectedTheme, setSelectedTheme] = useState<any>({});
+	useEffect(() => {
+		if (isFetched) {
+			setThemesList(data);
+		}
+	}, [isFetched]);
+
+    const handleOpen = (theme: any) => {
+        setSelectedTheme(theme);
+        open();
+    }
+
+	return (
+        <>
+            <Modal.Root opened={opened} onClose={close}>
+                <Modal.Overlay />
+                <Modal.Content>
+                <Modal.Header>
+                    <Modal.Title>Edit Theme</Modal.Title>
+                    <Modal.CloseButton />
+                </Modal.Header>
+                    <Modal.Body>
+                        <Stack style={{ backgroundColor: selectedTheme.colorbackground, borderRadius: '10px' }}>
+                            <Group justify="center" style={{ color: selectedTheme.colortextpri }}>{selectedTheme.name}</Group>
+                            <AppItem
+								name={'Example App'}
+								url={'https://example.com'}
+								icon={'mdi:apps'}
+								category={'Default'}
+							/>
+                        </Stack>
+                    </Modal.Body>
+                </Modal.Content>
+            </Modal.Root>
+            <Stack h={'100%'} w={'100%'}>
+                <h2>Themes</h2>
+                <SimpleGrid cols={5}>
+                    {themesList.map((theme: any) => (
+                        <Stack key={theme.name}>
+                            <Button
+                                style={{
+                                    backgroundColor: theme.colorbackground,
+                                    border: `solid ${theme.colorborder}`,
+                                    color: theme.colortextpri,
+                                }}
+                                data-theme={theme.name}
+                                onClick={() => {
+                                    setValue(theme.name)
+                                }}
+                            >
+                                {theme.name}
+                            </Button>
+                            <Group justify="space-between">
+                                <Group className="theme-palette">
+                                    <ColorSwatch color={theme.colorbackground} />
+                                    <ColorSwatch color={theme.colorsearchbackground} />
+                                    <ColorSwatch color={theme.colortextpri} />
+                                    <ColorSwatch color={theme.colortextacc} />
+                                    <ColorSwatch color={theme.colorborder} />
+                                </Group>
+                                <ActionIcon
+                                    onClick={() => handleOpen(theme)}
+                                ><FiEdit/></ActionIcon>
+                            </Group>
+                        </Stack>
+                    ))}
+                </SimpleGrid>
+            </Stack>
+        </>
+	);
+}
+export default ThemesSettings;