From ae31a676039d61d394a3221648a4daf3dbc596a9 Mon Sep 17 00:00:00 2001
From: Chiki <66981070+JulianBiancardi@users.noreply.github.com>
Date: Thu, 19 Sep 2024 14:55:49 -0300
Subject: [PATCH 01/12] feat: add card component and page view action

---
 .../card/FastboardCard.tsx                    | 139 ++++++++++
 .../card/FastboardCardDraggable.tsx           |  20 ++
 .../card/ImageComponent.tsx                   |  39 +++
 .../card/TextComponent.tsx                    |  33 +++
 .../card/properties/CardComponentsList.tsx    |  71 +++++
 .../CardImageComponentProperties.tsx          |  45 ++++
 .../CardTextComponentProperties.tsx           |  83 ++++++
 .../properties/FastboardCardProperties.tsx    | 230 +++++++++++++++++
 .../table/FastboardTable.tsx                  |  27 +-
 .../properties/FastboardTableProperties.tsx   |   3 +-
 .../table/properties/TableActionsList.tsx     |   3 +
 .../table/properties/ViewActionProperties.tsx | 243 ++++++++++++++++++
 .../editor/fastboard-components/utils.tsx     |  30 ++-
 src/components/shared/AlignmentProperty.tsx   |  48 ++++
 src/hooks/useData.ts                          |   8 +-
 src/hooks/useNavigation.ts                    |  23 +-
 src/lib/editor.utils.ts                       |   7 +-
 src/lib/services/adapter.ts                   |  17 +-
 src/lib/table.utils.ts                        |  13 +
 src/types/editor/card-types.ts                |  69 +++++
 src/types/editor/index.ts                     |   1 +
 src/types/editor/table-types.ts               |   3 +
 22 files changed, 1130 insertions(+), 25 deletions(-)
 create mode 100644 src/components/editor/fastboard-components/card/FastboardCard.tsx
 create mode 100644 src/components/editor/fastboard-components/card/FastboardCardDraggable.tsx
 create mode 100644 src/components/editor/fastboard-components/card/ImageComponent.tsx
 create mode 100644 src/components/editor/fastboard-components/card/TextComponent.tsx
 create mode 100644 src/components/editor/fastboard-components/card/properties/CardComponentsList.tsx
 create mode 100644 src/components/editor/fastboard-components/card/properties/CardImageComponentProperties.tsx
 create mode 100644 src/components/editor/fastboard-components/card/properties/CardTextComponentProperties.tsx
 create mode 100644 src/components/editor/fastboard-components/card/properties/FastboardCardProperties.tsx
 create mode 100644 src/components/editor/fastboard-components/table/properties/ViewActionProperties.tsx
 create mode 100644 src/components/shared/AlignmentProperty.tsx
 create mode 100644 src/types/editor/card-types.ts

diff --git a/src/components/editor/fastboard-components/card/FastboardCard.tsx b/src/components/editor/fastboard-components/card/FastboardCard.tsx
new file mode 100644
index 00000000..d11608b9
--- /dev/null
+++ b/src/components/editor/fastboard-components/card/FastboardCard.tsx
@@ -0,0 +1,139 @@
+import { ComponentId, ComponentType } from "@/types/editor";
+import {
+  CardComponentProperties,
+  CardComponentType,
+  CardProperties,
+  TextComponentProperties,
+} from "@/types/editor/card-types";
+import { Card, CardBody, CardHeader, Image, Spinner } from "@nextui-org/react";
+import scrollbarStyles from "@/styles/scrollbar.module.css";
+import useData from "@/hooks/useData";
+import { toast } from "sonner";
+import { useEffect, useMemo, useState } from "react";
+import useNavigation from "@/hooks/useNavigation";
+import { useSetRecoilState } from "recoil";
+import { propertiesDrawerState } from "@/atoms/editor";
+import useDashboard from "@/hooks/dashboards/useDashboard";
+import TextComponent from "./TextComponent";
+import ImageComponent from "./ImageComponent";
+
+export default function FastboardCard({
+  id,
+  properties,
+}: {
+  id: ComponentId;
+  properties: CardProperties;
+}) {
+  const { sourceQueryData, queryParameters, components, showShadow } =
+    properties;
+  const { updateComponentProperties } = useDashboard();
+  const { getQueryParam } = useNavigation();
+  const traducedQueryParameters = useMemo(() => {
+    if (!queryParameters) return {};
+
+    return Object.entries(queryParameters).reduce((acc, parameter) => {
+      // Test if the value of the parametes has the synstax {{URL.queryValue}}
+      const pattern = /\{\{\s*URL\.([^\s]+)\s*\}\}/;
+      const match = parameter[1].match(pattern);
+      if (match) {
+        const queryValue = getQueryParam(match[1]);
+        return { ...acc, [parameter[0]]: queryValue };
+      }
+      return { ...acc, [parameter[0]]: parameter[1] };
+    }, {});
+  }, [queryParameters]);
+  const {
+    data,
+    keys,
+    isFetching: dataFetching,
+    isError: isDataError,
+    error: dataError,
+  } = useData(
+    `${ComponentType.Card}-${id}`,
+    sourceQueryData,
+    traducedQueryParameters
+  );
+  const setPropertiesState = useSetRecoilState(propertiesDrawerState);
+
+  useEffect(() => {
+    console.log("keys updated", keys);
+    updateComponentProperties(id, {
+      ...properties,
+      dataKeys: keys,
+    });
+    setPropertiesState((previous) => {
+      if (previous.selectedComponentId !== id) {
+        return previous;
+      }
+      return {
+        ...previous,
+        properties: {
+          ...previous.properties,
+          dataKeys: keys,
+        },
+      };
+    });
+  }, [keys]);
+
+  useEffect(() => {
+    if (isDataError) {
+      toast.error(dataError?.message);
+    }
+  }, [isDataError]);
+
+  function isValidData(data: any[]) {
+    if (data.length > 1) {
+      return false;
+    }
+    if (data.length === 0) {
+      return false;
+    }
+    return typeof data[0] === "object";
+  }
+
+  if (dataFetching) {
+    return <Spinner className="w-full h-full" />;
+  }
+
+  if (isDataError) {
+    return (
+      <p className="flex justify-center items-center w-full h-full text-danger">
+        Error: {dataError?.message}
+      </p>
+    );
+  }
+
+  function renderComponent(component: CardComponentProperties, data: any[]) {
+    const item = data[0];
+
+    switch (component.type) {
+      case CardComponentType.Text: {
+        return (
+          <TextComponent
+            properties={component as TextComponentProperties}
+            item={item}
+          />
+        );
+      }
+      case CardComponentType.Image:
+        return <ImageComponent properties={component} item={item} />;
+      default:
+        return <p>Component not found</p>;
+    }
+  }
+
+  return isValidData(data) ? (
+    <Card className={`grow-0 h-full ${!showShadow ? "shadow-none" : ""}`}>
+      <CardHeader></CardHeader>
+      <CardBody
+        className={"flex flex-col gap-y-2 " + scrollbarStyles.scrollbar}
+      >
+        {components.map((component) => renderComponent(component, data))}
+      </CardBody>
+    </Card>
+  ) : (
+    <p className="flex justify-center items-center w-full h-full text-warning">
+      Seems like the data is not an object or is empty.
+    </p>
+  );
+}
diff --git a/src/components/editor/fastboard-components/card/FastboardCardDraggable.tsx b/src/components/editor/fastboard-components/card/FastboardCardDraggable.tsx
new file mode 100644
index 00000000..d5bce513
--- /dev/null
+++ b/src/components/editor/fastboard-components/card/FastboardCardDraggable.tsx
@@ -0,0 +1,20 @@
+import Draggable from "../Draggable";
+import { ComponentType } from "@/types/editor";
+import DraggableImage from "@/components/shared/DraggableImage";
+import { CardProperties } from "@/types/editor/card-types";
+
+export default function FastboardCardDraggable() {
+  return (
+    <Draggable
+      id="card-draggable"
+      data={{
+        type: ComponentType.Card,
+        defaultProperties: CardProperties.default(),
+      }}
+      dragSnapToOrigin
+      name={"Card"}
+    >
+      <DraggableImage name={"card"} alt={"Card"} />
+    </Draggable>
+  );
+}
diff --git a/src/components/editor/fastboard-components/card/ImageComponent.tsx b/src/components/editor/fastboard-components/card/ImageComponent.tsx
new file mode 100644
index 00000000..b960bd7c
--- /dev/null
+++ b/src/components/editor/fastboard-components/card/ImageComponent.tsx
@@ -0,0 +1,39 @@
+import { Alignment } from "@/components/shared/AlignmentProperty";
+import { ImageComponentProperties } from "@/types/editor/card-types";
+import { Image } from "@nextui-org/react";
+import { useEffect, useState } from "react";
+
+export default function ImageComponent({
+  properties,
+  item,
+}: {
+  properties: ImageComponentProperties;
+  item: any;
+}) {
+  const { dataKey, alignment } = properties;
+  const [imageError, setImageError] = useState(false);
+
+  useEffect(() => {
+    setImageError(false);
+  }, [dataKey]);
+
+  return (
+    <div
+      className={
+        "flex " +
+        (alignment === Alignment.Center
+          ? "justify-center"
+          : alignment === Alignment.Right
+          ? "justify-end"
+          : "justify-start")
+      }
+    >
+      <Image
+        src={imageError ? "../ImageErrorImage.svg" : item[dataKey]}
+        alt="Card image"
+        width={100}
+        onError={() => setImageError(true)}
+      />
+    </div>
+  );
+}
diff --git a/src/components/editor/fastboard-components/card/TextComponent.tsx b/src/components/editor/fastboard-components/card/TextComponent.tsx
new file mode 100644
index 00000000..6042483b
--- /dev/null
+++ b/src/components/editor/fastboard-components/card/TextComponent.tsx
@@ -0,0 +1,33 @@
+import { Alignment } from "@/components/shared/AlignmentProperty";
+import { TextComponentProperties } from "@/types/editor/card-types";
+import { useTheme } from "next-themes";
+
+export default function TextComponent({
+  properties,
+  item,
+}: {
+  properties: TextComponentProperties;
+  item: any;
+}) {
+  const { theme } = useTheme();
+  const { dataKey, label, defaultText, alignment, textColor } = properties;
+
+  return (
+    <h1
+      className={
+        "truncate " +
+        (alignment === Alignment.Center
+          ? "text-center"
+          : alignment === Alignment.Right
+          ? "text-right"
+          : "text-left")
+      }
+      style={{
+        color: theme === "dark" ? textColor.dark : textColor.light,
+      }}
+    >
+      {label}
+      {dataKey !== "" ? item[dataKey] : defaultText}
+    </h1>
+  );
+}
diff --git a/src/components/editor/fastboard-components/card/properties/CardComponentsList.tsx b/src/components/editor/fastboard-components/card/properties/CardComponentsList.tsx
new file mode 100644
index 00000000..c69a34b2
--- /dev/null
+++ b/src/components/editor/fastboard-components/card/properties/CardComponentsList.tsx
@@ -0,0 +1,71 @@
+import {
+  Button,
+  Dropdown,
+  DropdownItem,
+  DropdownMenu,
+  DropdownTrigger,
+} from "@nextui-org/react";
+import { Add } from "iconsax-react";
+
+import Option from "@/components/shared/Option";
+import {
+  CardComponentProperties,
+  CardComponentType,
+  DefaultCardComponentProperties,
+} from "@/types/editor/card-types";
+
+export default function CardComponentsList({
+  components,
+  onSelectComponent,
+  onChange,
+}: {
+  components: CardComponentProperties[];
+  onSelectComponent?: (component: CardComponentProperties) => void;
+  onChange?: (newComponents: CardComponentProperties[]) => void;
+}) {
+  return (
+    <div className="flex flex-col items-start">
+      <div className="flex justify-end w-full">
+        <Dropdown placement={"bottom"}>
+          <DropdownTrigger>
+            <Button startContent={<Add size={20} />} variant={"flat"}>
+              Add
+            </Button>
+          </DropdownTrigger>
+          <DropdownMenu>
+            {Object.values(CardComponentType).map((type) => (
+              <DropdownItem
+                key={type}
+                onPress={() => {
+                  onChange?.([
+                    ...components,
+                    DefaultCardComponentProperties.of(type),
+                  ]);
+                }}
+              >
+                {type}
+              </DropdownItem>
+            ))}
+          </DropdownMenu>
+        </Dropdown>
+      </div>
+
+      <ul className="flex flex-col space-y-2 w-full pt-2">
+        {components.map((component, index) => (
+          <Option
+            key={index}
+            label={component.type}
+            onPress={() => {
+              onSelectComponent?.(component);
+            }}
+            onDelete={() => {
+              const newComponents = [...components];
+              newComponents.splice(index, 1);
+              onChange?.(newComponents);
+            }}
+          />
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/src/components/editor/fastboard-components/card/properties/CardImageComponentProperties.tsx b/src/components/editor/fastboard-components/card/properties/CardImageComponentProperties.tsx
new file mode 100644
index 00000000..c932f4a8
--- /dev/null
+++ b/src/components/editor/fastboard-components/card/properties/CardImageComponentProperties.tsx
@@ -0,0 +1,45 @@
+import AlignmentProperty from "@/components/shared/AlignmentProperty";
+import { ImageComponentProperties } from "@/types/editor/card-types";
+import { Select, SelectItem } from "@nextui-org/react";
+
+export default function CardImageComponentProperties({
+  properties,
+  dataKeys,
+  onValueChange,
+}: {
+  properties: ImageComponentProperties;
+  dataKeys: string[];
+  onValueChange: (properties: ImageComponentProperties) => void;
+}) {
+  const { dataKey, alignment } = properties;
+
+  return (
+    <div className="flex flex-col gap-y-2">
+      <Select
+        aria-label="Data key selection"
+        label="Data key"
+        labelPlacement="outside"
+        placeholder="Select a data key"
+        disallowEmptySelection
+        selectedKeys={[dataKey]}
+        onChange={(e) => {
+          const key = e.target.value;
+          onValueChange({ ...properties, dataKey: key });
+        }}
+      >
+        {dataKeys?.map((key) => (
+          <SelectItem key={key} value={key}>
+            {key}
+          </SelectItem>
+        ))}
+      </Select>
+      <AlignmentProperty
+        label="Alignment"
+        position={alignment}
+        onPositionChange={(position) =>
+          onValueChange({ ...properties, alignment: position })
+        }
+      />
+    </div>
+  );
+}
diff --git a/src/components/editor/fastboard-components/card/properties/CardTextComponentProperties.tsx b/src/components/editor/fastboard-components/card/properties/CardTextComponentProperties.tsx
new file mode 100644
index 00000000..b6388d53
--- /dev/null
+++ b/src/components/editor/fastboard-components/card/properties/CardTextComponentProperties.tsx
@@ -0,0 +1,83 @@
+import AlignmentProperty from "@/components/shared/AlignmentProperty";
+import ColorPicker from "@/components/shared/ColorPicker";
+import { TextComponentProperties } from "@/types/editor/card-types";
+import { Input, Select, SelectItem } from "@nextui-org/react";
+import { useTheme } from "next-themes";
+
+export default function CardTextComponentProperties({
+  properties,
+  dataKeys,
+  onValueChange,
+}: {
+  properties: TextComponentProperties;
+  dataKeys: string[];
+  onValueChange: (properties: TextComponentProperties) => void;
+}) {
+  const { theme } = useTheme();
+  const { dataKey, label, defaultText, alignment, textColor } = properties;
+
+  return (
+    <div className="flex flex-col gap-y-2">
+      <Select
+        aria-label="Data key selection"
+        label="Data key"
+        labelPlacement="outside"
+        placeholder="Select a data key"
+        disallowEmptySelection
+        selectedKeys={[dataKey]}
+        onChange={(e) => {
+          const key = e.target.value;
+          onValueChange({ ...properties, dataKey: key });
+        }}
+      >
+        {dataKeys?.map((key) => (
+          <SelectItem key={key} value={key}>
+            {key}
+          </SelectItem>
+        ))}
+      </Select>
+      <Input
+        label="Label"
+        labelPlacement="outside"
+        placeholder="Enter label"
+        value={label}
+        onValueChange={(value) => {
+          onValueChange({ ...properties, label: value });
+        }}
+      />
+      <Input
+        label="Default text"
+        labelPlacement="outside"
+        placeholder="Enter some text"
+        value={defaultText}
+        onValueChange={(value) => {
+          onValueChange({ ...properties, defaultText: value });
+        }}
+      />
+      <AlignmentProperty
+        label="Alignment"
+        position={alignment}
+        onPositionChange={(position) =>
+          onValueChange({ ...properties, alignment: position })
+        }
+      />
+      <ColorPicker
+        label="Text color"
+        initialColor={theme === "dark" ? textColor.dark : textColor.light}
+        onColorChange={(color) => {
+          if (theme === "dark") {
+            onValueChange({
+              ...properties,
+              textColor: { dark: color, light: textColor.light },
+            });
+          } else {
+            onValueChange({
+              ...properties,
+              textColor: { dark: textColor.dark, light: color },
+            });
+          }
+        }}
+      />
+    </div>
+  );
+}
diff --git a/src/components/editor/fastboard-components/card/properties/FastboardCardProperties.tsx b/src/components/editor/fastboard-components/card/properties/FastboardCardProperties.tsx
new file mode 100644
index 00000000..2840b8a8
--- /dev/null
+++ b/src/components/editor/fastboard-components/card/properties/FastboardCardProperties.tsx
@@ -0,0 +1,230 @@
+import QuerySelection from "@/components/editor/QuerySelection";
+import {
+  CardComponentProperties,
+  CardComponentType,
+  CardProperties,
+  ImageComponentProperties,
+  TextComponentProperties,
+} from "@/types/editor/card-types";
+import {
+  Accordion,
+  AccordionItem,
+  BreadcrumbItem,
+  Breadcrumbs,
+  Code,
+  Input,
+  Select,
+  SelectItem,
+  Spacer,
+  Tooltip,
+} from "@nextui-org/react";
+import { RiQuestionLine } from "react-icons/ri";
+import CardComponentsList from "./CardComponentsList";
+import { useEffect, useState } from "react";
+import CardTextComponentProperties from "./CardTextComponentProperties";
+import { useRecoilValue } from "recoil";
+import { propertiesDrawerState } from "@/atoms/editor";
+import CardImageComponentProperties from "./CardImageComponentProperties";
+
+export default function FastboardCardProperties({
+  properties,
+  onValueChange,
+}: {
+  properties: CardProperties;
+  onValueChange: (properties: CardProperties) => void;
+}) {
+  const { sourceQueryData, queryParameters, components, dataKeys } = properties;
+  const { selectedComponentId } = useRecoilValue(propertiesDrawerState);
+  const [componentSelectedIndex, setComponentSelectedIndex] = useState<
+    number | null
+  >(null);
+
+  useEffect(() => {
+    // Reset selectinos when component is changed
+    setComponentSelectedIndex(null);
+  }, [selectedComponentId]);
+
+  function onComponentChange(component: CardComponentProperties) {
+    if (componentSelectedIndex === null) {
+      return;
+    }
+    const newComponents = [...components];
+    newComponents[componentSelectedIndex] = component;
+
+    onValueChange({
+      ...properties,
+      components: newComponents,
+    });
+  }
+
+  return (
+    <div>
+      <Breadcrumbs>
+        <BreadcrumbItem
+          key={"baseProperties"}
+          onPress={() => {
+            setComponentSelectedIndex(null);
+          }}
+        >
+          Card
+        </BreadcrumbItem>
+
+        {componentSelectedIndex != null && (
+          <BreadcrumbItem key={"componentProperties"}>Component</BreadcrumbItem>
+        )}
+      </Breadcrumbs>
+      <Spacer y={4} />
+
+      {componentSelectedIndex === null && (
+        <Accordion
+          selectionMode="multiple"
+          isCompact
+          fullWidth
+          defaultExpandedKeys={["basic", "components", "style"]}
+          className="p-0"
+        >
+          <AccordionItem
+            key="basic"
+            title="Basic"
+            className="pb-2"
+            classNames={{
+              title: "font-medium",
+            }}
+          >
+            <QuerySelection
+              selectedQueryId={sourceQueryData?.queryId || ""}
+              onQuerySelect={(newQuery) => {
+                console.log(newQuery);
+                if (newQuery.id === sourceQueryData?.queryId) {
+                  return;
+                }
+                onValueChange({
+                  ...properties,
+                  sourceQueryData: {
+                    queryId: newQuery.id,
+                    connectionId: newQuery.connection_id,
+                    method: newQuery.metadata?.method,
+                  },
+                  queryParameters: newQuery.metadata?.parameters?.reduce(
+                    (acc: Record<string, string>, param: any) => {
+                      acc[param.name] = param.preview;
+                      return acc;
+                    },
+                    {}
+                  ),
+                  dataKeys: [],
+                  components: components.map((component) => ({
+                    ...component,
+                    dataKey: "",
+                  })),
+                });
+              }}
+            />
+            {sourceQueryData && queryParameters && (
+              <>
+                <div className="flex justify-between">
+                  <h1 className="text-small">Parameters</h1>
+                  <Tooltip
+                    content={
+                      <div>
+                        Use{" "}
+                        <Code className={"text-xs"}>
+                          {"{{URL.queryValue}}"}
+                        </Code>{" "}
+                        syntax to access url query strings.
+                      </div>
+                    }
+                    className={"p-3 w-[275px] -translate-x-[35px] text-xs"}
+                    placement={"bottom"}
+                    offset={10}
+                    closeDelay={0}
+                  >
+                    <div>
+                      <RiQuestionLine
+                        className={"text-foreground-500"}
+                        size={15}
+                      />
+                    </div>
+                  </Tooltip>
+                </div>
+
+                <div className="flex flex-col gap-2 px-2 w-full">
+                  {Object.entries(queryParameters).map((parameter, index) => (
+                    <div className="flex flex-row items-center justify-between gap-x-2">
+                      <h2 className="w-full text-sm">{parameter[0]}</h2>
+                      <Input
+                        key={index}
+                        value={parameter[1]}
+                        onChange={(e) => {
+                          onValueChange({
+                            ...properties,
+                            queryParameters: {
+                              ...queryParameters,
+                              [parameter[0]]: e.target.value,
+                            },
+                          });
+                        }}
+                        width={"100%"}
+                      />
+                    </div>
+                  ))}
+                </div>
+              </>
+            )}
+          </AccordionItem>
+          <AccordionItem
+            key="components"
+            title="Components"
+            className="pb-2"
+            classNames={{
+              title: "font-medium",
+            }}
+          >
+            {!sourceQueryData && (
+              <div className="flex justify-center text-sm">
+                Select a query to enable components
+              </div>
+            )}
+            {sourceQueryData && (
+              <CardComponentsList
+                components={components}
+                onSelectComponent={(component) => {
+                  setComponentSelectedIndex(components.indexOf(component));
+                }}
+                onChange={(newComponents) =>
+                  onValueChange({ ...properties, components: newComponents })
+                }
+              />
+            )}
+          </AccordionItem>
+        </Accordion>
+      )}
+
+      {componentSelectedIndex !== null &&
+        components[componentSelectedIndex]?.type === CardComponentType.Text && (
+          <CardTextComponentProperties
+            properties={
+              components[componentSelectedIndex] as TextComponentProperties
+            }
+            dataKeys={dataKeys}
+            onValueChange={(component) => {
+              onComponentChange(component);
+            }}
+          />
+        )}
+      {componentSelectedIndex !== null &&
+        components[componentSelectedIndex]?.type ===
+          CardComponentType.Image && (
+          <CardImageComponentProperties
+            properties={
+              components[componentSelectedIndex] as ImageComponentProperties
+            }
+            dataKeys={dataKeys}
+            onValueChange={(component) => {
+              onComponentChange(component);
+            }}
+          />
+        )}
+    </div>
+  );
+}
diff --git a/src/components/editor/fastboard-components/table/FastboardTable.tsx b/src/components/editor/fastboard-components/table/FastboardTable.tsx
index 5552ff05..8ef8c7b7 100644
--- a/src/components/editor/fastboard-components/table/FastboardTable.tsx
+++ b/src/components/editor/fastboard-components/table/FastboardTable.tsx
@@ -1,4 +1,3 @@
-import CustomSkeleton from "@/components/shared/CustomSkeleton";
 import useExecuteQuery from "@/hooks/adapter/useExecuteQuery";
 import {
   FastboardTableProperties,
@@ -53,15 +52,16 @@ import {
   Table,
   useReactTable,
 } from "@tanstack/react-table";
-import { HTTP_METHOD } from "@/types/connections";
 import {
   fillParameters,
   getExportData,
   getFilterFunction,
   getFinalColumns,
   sortFunction,
+  traduceQueryStrings,
 } from "@/lib/table.utils";
-import Filters, { NumberFilter, StringFilter } from "./Filters";
+import Filters from "./Filters";
+import useNavigation from "@/hooks/useNavigation";
 
 export default function FastboardTable({
   id,
@@ -73,6 +73,7 @@ export default function FastboardTable({
   const { theme } = useTheme();
   const { id: dashboardId } = useParams();
   const { updateComponentProperties } = useDashboard();
+  const { changePage } = useNavigation();
   const { openModal } = useModalFrame();
   const {
     sourceQueryData,
@@ -345,16 +346,24 @@ export default function FastboardTable({
                 }
                 onPress={() => {
                   setSelectedRowAction({ action, item });
+                  updateComponentProperties(id, {
+                    ...properties,
+                    selectedRow: item,
+                  });
                   if (action.type === "view") {
-                    executeAction({ action, item });
-                    setViewModalOpen(action.query ? true : false);
+                    if (action.mode === "modal") {
+                      executeAction({ action, item });
+                      setViewModalOpen(action.query ? true : false);
+                    } else if (action.mode === "page") {
+                      changePage(
+                        action.pageId ?? "",
+                        traduceQueryStrings(action.queryStrings, item)
+                      );
+                    }
+                    //openModal(action.modalId ?? "");
                   } else if (action.type === "delete") {
                     setDeleteModalOpen(true);
                   } else if (action.type === "edit") {
-                    updateComponentProperties(id, {
-                      ...properties,
-                      selectedRow: item,
-                    });
                     openModal(action.modalId ?? "");
                   }
                 }}
diff --git a/src/components/editor/fastboard-components/table/properties/FastboardTableProperties.tsx b/src/components/editor/fastboard-components/table/properties/FastboardTableProperties.tsx
index 175aa3a6..a4c2bfcf 100644
--- a/src/components/editor/fastboard-components/table/properties/FastboardTableProperties.tsx
+++ b/src/components/editor/fastboard-components/table/properties/FastboardTableProperties.tsx
@@ -29,6 +29,7 @@ import { DeleteActionProperties } from "./DeleteActionProperties";
 import FiltersList from "./filters/FiltersList";
 import TableStringFilterProperties from "./filters/TableStringFilterProperties";
 import TableNumberFilterProperties from "./filters/TableNumberFilterProperties";
+import { ViewActionProperties } from "./ViewActionProperties";
 
 const FastboardTablePropertiesComponent = ({
   componentId,
@@ -301,7 +302,7 @@ const FastboardTablePropertiesComponent = ({
         />
       )}
       {actionSelected && actionSelected.type == "view" && (
-        <DeleteActionProperties
+        <ViewActionProperties
           action={actionSelected}
           columns={columnsProperties.map((c) => c.column)}
           onChange={(action) => {
diff --git a/src/components/editor/fastboard-components/table/properties/TableActionsList.tsx b/src/components/editor/fastboard-components/table/properties/TableActionsList.tsx
index 9eedefa7..80c66172 100644
--- a/src/components/editor/fastboard-components/table/properties/TableActionsList.tsx
+++ b/src/components/editor/fastboard-components/table/properties/TableActionsList.tsx
@@ -12,6 +12,7 @@ import { ComponentId, ComponentType } from "@/types/editor";
 import { FormProperties } from "@/types/editor/form";
 import Option from "@/components/shared/Option";
 import useDashboard from "@/hooks/dashboards/useDashboard";
+import { CardProperties } from "@/types/editor/card-types";
 
 export default function TableActionsList({
   tableId,
@@ -38,6 +39,7 @@ export default function TableActionsList({
       type,
       query: null,
       parameters: [],
+      queryStrings: [],
     };
 
     setActions((previous) => [...previous, newAction]);
@@ -66,6 +68,7 @@ export default function TableActionsList({
       query: null,
       parameters: [],
       modalId,
+      queryStrings: [],
     };
 
     setActions((previous) => [...previous, newAction]);
diff --git a/src/components/editor/fastboard-components/table/properties/ViewActionProperties.tsx b/src/components/editor/fastboard-components/table/properties/ViewActionProperties.tsx
new file mode 100644
index 00000000..74a0e453
--- /dev/null
+++ b/src/components/editor/fastboard-components/table/properties/ViewActionProperties.tsx
@@ -0,0 +1,243 @@
+import {
+  Button,
+  Code,
+  Input,
+  Select,
+  SelectItem,
+  Tab,
+  Tabs,
+  Tooltip,
+} from "@nextui-org/react";
+import { RiQuestionLine } from "react-icons/ri";
+import { Column, TableActionProperty } from "@/types/editor/table-types";
+import QuerySelection from "@/components/editor/QuerySelection";
+import { queryToRestQueryData } from "@/lib/rest-queries";
+import useDashboard from "@/hooks/dashboards/useDashboard";
+import { Add } from "iconsax-react";
+import useNavigation from "@/hooks/useNavigation";
+import { IoIosClose } from "react-icons/io";
+
+export function ViewActionProperties({
+  action,
+  columns,
+  onChange,
+}: {
+  action: TableActionProperty;
+  columns: Column[];
+  onChange: (action: TableActionProperty) => void;
+}) {
+  const { label, mode, query, parameters, pageId, queryStrings } = action;
+  const { addPage } = useDashboard();
+  const { changePage } = useNavigation();
+
+  function createViewPage() {
+    const pageId = addPage();
+    if (!pageId) return;
+
+    onChange({
+      ...action,
+      pageId: pageId,
+    });
+  }
+
+  return (
+    <div className="flex flex-col w-full gap-y-2">
+      <Input
+        label="Label"
+        labelPlacement="outside"
+        placeholder="Set action label"
+        value={label}
+        onValueChange={(newValue) => {
+          onChange({
+            ...action,
+            label: newValue,
+          });
+        }}
+      />
+
+      <Tabs
+        selectedKey={mode ?? "modal"}
+        onSelectionChange={(key) => {
+          onChange({
+            ...action,
+            mode: key.toString() as "modal" | "page",
+          });
+        }}
+      >
+        <Tab key="modal" title="Modal">
+          <QuerySelection
+            selectedQueryId={query?.queryId || ""}
+            onQuerySelect={(query) => {
+              onChange({
+                ...action,
+                query: queryToRestQueryData(query),
+                parameters: query.metadata.parameters?.map(
+                  (p: { name: string; preview: string }) => ({
+                    name: p.name,
+                    columnKey: "",
+                    value: p.preview,
+                  })
+                ),
+              });
+            }}
+          />
+          {parameters?.length > 0 && (
+            <div className="flex justify-between">
+              <h1 className="text-small">Parameters</h1>
+              <Tooltip
+                content={
+                  <div>
+                    If no column is selected for a parameter we use{" "}
+                    <Code className={"text-xs"}>{"preview value"}</Code> setting
+                    on queries editor.
+                  </div>
+                }
+                className={"p-3 w-[275px] -translate-x-[35px] text-xs"}
+                placement={"bottom"}
+                offset={10}
+                closeDelay={0}
+              >
+                <div>
+                  <RiQuestionLine className={"text-foreground-500"} size={15} />
+                </div>
+              </Tooltip>
+            </div>
+          )}
+          <div className="flex flex-col gap-2 px-2 w-full">
+            {parameters?.map((parameter, index) => (
+              <div className="flex flex-row items-center justify-between gap-x-2">
+                <h2 className="w-full text-sm">{parameter.name}</h2>
+                <Select
+                  items={columns}
+                  placeholder="Select column"
+                  selectedKeys={[parameter.columnKey]}
+                  onSelectionChange={(key) => {
+                    const columnKey = key.currentKey as string;
+                    const newParameters = parameters.map((p) => {
+                      if (p.name === parameter.name) {
+                        return {
+                          ...p,
+                          columnKey: columnKey,
+                        };
+                      }
+                      return p;
+                    });
+                    onChange({
+                      ...action,
+                      parameters: newParameters,
+                    });
+                  }}
+                >
+                  {(column) => (
+                    <SelectItem key={column.key} value={column.key}>
+                      {column.label}
+                    </SelectItem>
+                  )}
+                </Select>
+              </div>
+            ))}
+          </div>
+        </Tab>
+
+        <Tab key="page" title="Page">
+          {!pageId && <Button onPress={createViewPage}>Create new page</Button>}
+          {pageId && (
+            <div className="flex flex-col gap-y-2">
+              <div className="flex justify-end w-full">
+                <Button
+                  startContent={<Add size={20} />}
+                  variant={"flat"}
+                  onPress={() => {
+                    onChange({
+                      ...action,
+                      queryStrings: queryStrings
+                        ? [
+                            ...queryStrings,
+                            {
+                              name: "",
+                              columnKey: "",
+                            },
+                          ]
+                        : [{ name: "", columnKey: "" }],
+                    });
+                  }}
+                >
+                  Add Query String
+                </Button>
+              </div>
+
+              {queryStrings?.map((queryString, index) => (
+                <div key={index} className="flex flex-row items-center gap-x-2">
+                  <Input
+                    value={queryString.name}
+                    placeholder="Query string name"
+                    onValueChange={(value) => {
+                      const newQueryStrings = queryStrings.map((qs, i) => {
+                        if (i === index) {
+                          return {
+                            ...qs,
+                            name: value,
+                          };
+                        }
+                        return qs;
+                      });
+                      onChange({
+                        ...action,
+                        queryStrings: newQueryStrings,
+                      });
+                    }}
+                  />
+
+                  <Select
+                    aria-label="Select column"
+                    items={columns}
+                    placeholder="Select column"
+                    selectedKeys={[queryString.columnKey]}
+                    onSelectionChange={(key) => {
+                      const columnKey = key.currentKey as string;
+                      const newQueryStrings = queryStrings.map((qs, i) => {
+                        if (i === index) {
+                          return {
+                            ...qs,
+                            columnKey: columnKey,
+                          };
+                        }
+                        return qs;
+                      });
+                      onChange({
+                        ...action,
+                        queryStrings: newQueryStrings,
+                      });
+                    }}
+                  >
+                    {(column) => (
+                      <SelectItem key={column.key} value={column.key}>
+                        {column.label}
+                      </SelectItem>
+                    )}
+                  </Select>
+
+                  <Button
+                    variant="light"
+                    isIconOnly
+                    onPress={() => {
+                      const newQueryStrings = queryStrings.filter(
+                        (_, i) => i !== index
+                      );
+                      onChange({
+                        ...action,
+                        queryStrings: newQueryStrings,
+                      });
+                    }}
+                  >
+                    <IoIosClose size={20} className="text-foreground-600" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          )}
+        </Tab>
+      </Tabs>
+    </div>
+  );
+}
diff --git a/src/components/editor/fastboard-components/utils.tsx b/src/components/editor/fastboard-components/utils.tsx
index 0823c87e..3a5f76e5 100644
--- a/src/components/editor/fastboard-components/utils.tsx
+++ b/src/components/editor/fastboard-components/utils.tsx
@@ -44,6 +44,10 @@ import { SidebarProperties } from "@/types/editor/sidebar-types";
 import FastboardHeader from "./header/FastboardHeader";
 import FastboardHeaderPropertiesComponent from "./header/FastboardHeaderProperties";
 import { FastboardHeaderProperties } from "@/types/editor/header-types";
+import FastboardCard from "./card/FastboardCard";
+import { CardProperties } from "@/types/editor/card-types";
+import FastboardCardProperties from "./card/properties/FastboardCardProperties";
+import FastboardCardDraggable from "./card/FastboardCardDraggable";
 
 export function getDraggableComponent(id: ComponentType) {
   const components = {
@@ -54,6 +58,7 @@ export function getDraggableComponent(id: ComponentType) {
       <FastboardGroupChartDraggable key={"GroupChartDraggable"} />
     ),
     [ComponentType.Cards]: <FastboardCardsDraggable key={"CardsDraggable"} />,
+    [ComponentType.Card]: <FastboardCardDraggable key={"CardDraggable"} />,
     [ComponentType.Sidebar]: null,
     [ComponentType.Header]: null,
   };
@@ -104,7 +109,20 @@ export function getComponent(
       editable: null,
       view: null,
     },
-
+    [ComponentType.Card]: {
+      editable: (
+        <FastboardCard
+          id={componentId}
+          properties={properties as CardProperties}
+        />
+      ),
+      view: (
+        <FastboardCard
+          id={componentId}
+          properties={properties as CardProperties}
+        />
+      ),
+    },
     [ComponentType.Cards]: {
       editable: (
         <FastboardCards
@@ -203,6 +221,16 @@ export function getPropertiesComponent(
         }}
       />
     ),
+    [ComponentType.Card]: (
+      <FastboardCardProperties
+        properties={properties as CardProperties}
+        onValueChange={(properties) => {
+          if (onValueChange) {
+            onValueChange(properties);
+          }
+        }}
+      />
+    ),
     [ComponentType.Cards]: (
       <FastboardCardsPropertiesComponent
         properties={properties as FastboardCardsProperties}
diff --git a/src/components/shared/AlignmentProperty.tsx b/src/components/shared/AlignmentProperty.tsx
new file mode 100644
index 00000000..13475a7f
--- /dev/null
+++ b/src/components/shared/AlignmentProperty.tsx
@@ -0,0 +1,48 @@
+import { Button, ButtonGroup } from "@nextui-org/react";
+import AlignIcon from "./icons/AlignIcon";
+
+export enum Alignment {
+  Left = "Start",
+  Center = "Center",
+  Right = "End",
+}
+
+export default function AlignmentProperty({
+  label,
+  position,
+  onPositionChange,
+}: {
+  label: string;
+  position: Alignment;
+  onPositionChange: (position: Alignment) => void;
+}) {
+  return (
+    <div>
+      <h2 className="text-small pb-1">{label}</h2>
+      <ButtonGroup className="w-full">
+        {Object.entries(Alignment).map(([key, value]) => (
+          <Button
+            className={
+              position === value
+                ? "bg-foreground bg-opacity-[0.07] w-full"
+                : "bg-foreground bg-opacity-5 opacity-60 w-full"
+            }
+            key={value}
+            startContent={
+              <AlignIcon
+                align={key as string}
+                selected={position === value ? true : false}
+                size={24}
+              />
+            }
+            onClick={() => {
+              onPositionChange(value);
+            }}
+          >
+            {key}
+          </Button>
+        ))}
+      </ButtonGroup>
+    </div>
+  );
+}
diff --git a/src/hooks/useData.ts b/src/hooks/useData.ts
index 5ecf3f37..b6007db4 100644
--- a/src/hooks/useData.ts
+++ b/src/hooks/useData.ts
@@ -6,7 +6,11 @@ import { useRecoilValue } from "recoil";
 import { previewAccessTokenState } from "@/atoms/editor";
 import { useParams } from "next/navigation";
 
-const useData = (componentId: string, queryData: RestQueryData | null) => {
+const useData = (
+  componentId: string,
+  queryData: RestQueryData | null,
+  queryParameters?: Record<string, any>
+) => {
   const { queryId, connectionId } = queryData || {};
   const { id: dashboardId } = useParams();
   const previewAccessToken = useRecoilValue(previewAccessTokenState);
@@ -35,7 +39,7 @@ const useData = (componentId: string, queryData: RestQueryData | null) => {
       const response = await adapterService.executeQuery(
         queryId,
         dashboardId as string,
-        {},
+        queryParameters ?? {},
         previewAccessToken
       );
       let responseData = response?.body;
diff --git a/src/hooks/useNavigation.ts b/src/hooks/useNavigation.ts
index 37447f86..347a88d8 100644
--- a/src/hooks/useNavigation.ts
+++ b/src/hooks/useNavigation.ts
@@ -1,10 +1,13 @@
+import { isPropertiesDrawerOpen } from "@/atoms/editor";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useCallback, useMemo } from "react";
+import { useSetRecoilState } from "recoil";
 
 const useNavigation = () => {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
+  const setIsPropertiesDrawerOpen = useSetRecoilState(isPropertiesDrawerOpen);
 
   // Get a new searchParams string by merging the current
   // searchParams with a provided key/value pair
@@ -22,13 +25,29 @@ const useNavigation = () => {
     return searchParams.get("page") || "home";
   }, [searchParams]);
 
-  function changePage(pageId: string) {
-    router.push(pathname + "?" + createQueryString("page", pageId));
+  function changePage(
+    pageId: string,
+    queryStrings?: { name: string; value: string }[]
+  ) {
+    const newParams = new URLSearchParams();
+    newParams.set("page", pageId);
+    if (queryStrings) {
+      queryStrings.forEach((qs) => {
+        newParams.set(qs.name, qs.value);
+      });
+    }
+    router.push(pathname + "?" + newParams.toString());
+    setIsPropertiesDrawerOpen(false);
+  }
+
+  function getQueryParam(key: string) {
+    return searchParams.get(key);
   }
 
   return {
     currentPage,
     changePage,
+    getQueryParam,
   };
 };
 
diff --git a/src/lib/editor.utils.ts b/src/lib/editor.utils.ts
index 6405c3c0..939ad44c 100644
--- a/src/lib/editor.utils.ts
+++ b/src/lib/editor.utils.ts
@@ -43,14 +43,19 @@ function deleteTableModalsFrame(
   component: FastboardComponent,
   dashboardMetadata: DashboardMetadata
 ): DashboardMetadata {
+  const viewModalId = component.properties?.actions?.find(
+    (action: TableActionProperty) => action.type === "view"
+  )?.modalId;
   const editModalId = component.properties?.actions?.find(
     (action: TableActionProperty) => action.type === "edit"
   )?.modalId;
   const addRowModalId = component.properties?.addOns?.addRowForm?.modalId;
+  if (viewModalId) {
+    dashboardMetadata = removeModalFrame(viewModalId, dashboardMetadata);
+  }
   if (editModalId) {
     dashboardMetadata = removeModalFrame(editModalId, dashboardMetadata);
   }
-
   if (addRowModalId) {
     dashboardMetadata = removeModalFrame(addRowModalId, dashboardMetadata);
   }
diff --git a/src/lib/services/adapter.ts b/src/lib/services/adapter.ts
index 970b7fc9..e57c7e34 100644
--- a/src/lib/services/adapter.ts
+++ b/src/lib/services/adapter.ts
@@ -5,14 +5,14 @@ import { isPreviewPage, isPublishPage } from "@/lib/helpers";
 const previewQuery = async (
   connectionId: string,
   queryMetadata: MongoQueryMetadata | RestQueryMetadata,
-  parameters: any,
+  parameters: any
 ) => {
   const response = await axiosInstance.post(
     `/adapter/${connectionId}/preview`,
     {
       connection_metadata: queryMetadata,
       parameters,
-    },
+    }
   );
 
   return response.data;
@@ -22,7 +22,7 @@ async function executeQuery(
   queryId: string | null,
   dashboardId: string,
   parameters?: Record<string, any>,
-  previewAccessToken?: string,
+  previewAccessToken?: string
 ) {
   try {
     if (!queryId) {
@@ -30,12 +30,11 @@ async function executeQuery(
     }
 
     const token = localStorage.getItem(`auth-${dashboardId}`);
-
-    const parametersToSend = parameters ?? {};
-
     const viewMode = isPreviewPage() || isPublishPage();
-
-    parametersToSend.token = viewMode ? token : previewAccessToken;
+    const parametersToSend = {
+      ...parameters,
+      token: viewMode ? token : previewAccessToken,
+    };
 
     const response = await axiosInstance.post(`/adapter/execute/${queryId}`, {
       parameters: parametersToSend,
@@ -51,7 +50,7 @@ async function executeQuery(
 
       const error = response.data?.body?.error;
       throw new Error(
-        `Error ${response.data.status_code}: ${error?.description ?? ""}`,
+        `Error ${response.data.status_code}: ${error?.description ?? ""}`
       );
     }
     return response.data;
diff --git a/src/lib/table.utils.ts b/src/lib/table.utils.ts
index 040266fd..e17b13d0 100644
--- a/src/lib/table.utils.ts
+++ b/src/lib/table.utils.ts
@@ -84,6 +84,19 @@ export function fillParameters(
   }, {});
 }
 
+export function traduceQueryStrings(
+  queryStrings: { name: string; columnKey: string }[],
+  item: any
+) {
+  return queryStrings.reduce((acc, queryString) => {
+    const value = getKeyValue(item, queryString.columnKey);
+    if (queryString.name === "" || value === undefined) {
+      return [...acc];
+    }
+    return [...acc, { name: queryString.name, value }];
+  }, [] as { name: string; value: any }[]);
+}
+
 export function getFilterFunction(
   columnKey: string,
   filters: FilterProperties[]
diff --git a/src/types/editor/card-types.ts b/src/types/editor/card-types.ts
new file mode 100644
index 00000000..7b394b30
--- /dev/null
+++ b/src/types/editor/card-types.ts
@@ -0,0 +1,69 @@
+import { Alignment } from "@/components/shared/AlignmentProperty";
+import { RestQueryData } from "../connections";
+import { Color } from "./style-types";
+
+export enum CardComponentType {
+  Text = "Text",
+  Image = "Image",
+}
+
+interface BaseCardComponentProperties {
+  type: CardComponentType;
+  dataKey: string;
+}
+
+export interface TextComponentProperties extends BaseCardComponentProperties {
+  label: string;
+  defaultText: string;
+  alignment: Alignment;
+  textColor: Color;
+}
+
+export interface ImageComponentProperties extends BaseCardComponentProperties {
+  alignment: Alignment;
+}
+
+export type CardComponentProperties =
+  | TextComponentProperties
+  | ImageComponentProperties;
+
+export class DefaultCardComponentProperties {
+  static of(type: CardComponentType): CardComponentProperties {
+    const baseProperties = {
+      type,
+      dataKey: "",
+    };
+    switch (type) {
+      case CardComponentType.Text:
+        return {
+          ...baseProperties,
+          label: "",
+          defaultText: "Some text",
+          alignment: Alignment.Left,
+          textColor: new Color("#000000", "#ffffff"),
+        };
+      case CardComponentType.Image:
+        return {
+          ...baseProperties,
+          alignment: Alignment.Left,
+        };
+      default:
+        return {
+          ...baseProperties,
+          alignment: Alignment.Left,
+        };
+    }
+  }
+}
+
+export class CardProperties {
+  sourceQueryData: RestQueryData | null = null;
+  queryParameters: Record<string, string> = {};
+  components: CardComponentProperties[] = [];
+  dataKeys: string[] = [];
+  showShadow: boolean = true;
+
+  static default(): CardProperties {
+    return new CardProperties();
+  }
+}
diff --git a/src/types/editor/index.ts b/src/types/editor/index.ts
index e3331b0f..3fd23af0 100644
--- a/src/types/editor/index.ts
+++ b/src/types/editor/index.ts
@@ -12,6 +12,7 @@ export enum ComponentType {
   Image = "image",
   GroupChart = "group-chart",
   Form = "form",
+  Card = "card",
   Cards = "cards",
   Sidebar = "sidebar",
   Header = "header",
diff --git a/src/types/editor/table-types.ts b/src/types/editor/table-types.ts
index 0476ed25..a5d1a771 100644
--- a/src/types/editor/table-types.ts
+++ b/src/types/editor/table-types.ts
@@ -15,9 +15,12 @@ export interface TableActionProperty {
   key: string;
   label: string;
   type: "view" | "edit" | "delete";
+  mode?: "modal" | "page";
   query: RestQueryData | null;
   parameters: { name: string; columnKey: string; value: string }[];
   modalId?: string;
+  pageId?: string;
+  queryStrings: { name: string; columnKey: string }[];
 }
 
 export interface AddRowFormProperties {

From 9baf3f8a1b69c7e77b0b44bdb626c4270c100827 Mon Sep 17 00:00:00 2001
From: Chiki <66981070+JulianBiancardi@users.noreply.github.com>
Date: Thu, 19 Sep 2024 16:10:51 -0300
Subject: [PATCH 02/12] feat: add back button to retunr to previous page

---
 .../card/FastboardCard.tsx                    |  9 ++-
 .../card/TextComponent.tsx                    |  4 +-
 .../CardTextComponentProperties.tsx           | 13 +++-
 .../sidebar/FastboardSidebar.tsx              |  1 -
 .../table/properties/ViewActionProperties.tsx | 10 ++-
 .../editor/settings/SettingsDrawer.tsx        |  4 +-
 src/components/shared/Viewport.tsx            | 42 +++++++----
 src/hooks/dashboards/useDashboard.ts          |  9 ++-
 src/lib/editor.utils.ts                       | 75 +++++++++++--------
 src/types/editor/card-types.ts                |  2 +
 src/types/editor/index.ts                     | 12 ++-
 11 files changed, 124 insertions(+), 57 deletions(-)

diff --git a/src/components/editor/fastboard-components/card/FastboardCard.tsx b/src/components/editor/fastboard-components/card/FastboardCard.tsx
index d11608b9..1a7d5f4d 100644
--- a/src/components/editor/fastboard-components/card/FastboardCard.tsx
+++ b/src/components/editor/fastboard-components/card/FastboardCard.tsx
@@ -5,11 +5,11 @@ import {
   CardProperties,
   TextComponentProperties,
 } from "@/types/editor/card-types";
-import { Card, CardBody, CardHeader, Image, Spinner } from "@nextui-org/react";
+import { Card, CardBody, CardHeader, Spinner } from "@nextui-org/react";
 import scrollbarStyles from "@/styles/scrollbar.module.css";
 import useData from "@/hooks/useData";
 import { toast } from "sonner";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo } from "react";
 import useNavigation from "@/hooks/useNavigation";
 import { useSetRecoilState } from "recoil";
 import { propertiesDrawerState } from "@/atoms/editor";
@@ -128,6 +128,11 @@ export default function FastboardCard({
       <CardBody
         className={"flex flex-col gap-y-2 " + scrollbarStyles.scrollbar}
       >
+        {components.length === 0 && (
+          <h2 className="flex w-full h-full justify-center items-center">
+            Add components
+          </h2>
+        )}
         {components.map((component) => renderComponent(component, data))}
       </CardBody>
     </Card>
diff --git a/src/components/editor/fastboard-components/card/TextComponent.tsx b/src/components/editor/fastboard-components/card/TextComponent.tsx
index 6042483b..3a6038f6 100644
--- a/src/components/editor/fastboard-components/card/TextComponent.tsx
+++ b/src/components/editor/fastboard-components/card/TextComponent.tsx
@@ -10,7 +10,8 @@ export default function TextComponent({
   item: any;
 }) {
   const { theme } = useTheme();
-  const { dataKey, label, defaultText, alignment, textColor } = properties;
+  const { dataKey, label, defaultText, alignment, fontSize, textColor } =
+    properties;
 
   return (
     <h1
@@ -24,6 +25,7 @@ export default function TextComponent({
       }
       style={{
         color: theme === "dark" ? textColor.dark : textColor.light,
+        fontSize: `${fontSize}px`,
       }}
     >
       {label}
diff --git a/src/components/editor/fastboard-components/card/properties/CardTextComponentProperties.tsx b/src/components/editor/fastboard-components/card/properties/CardTextComponentProperties.tsx
index b6388d53..51f3a420 100644
--- a/src/components/editor/fastboard-components/card/properties/CardTextComponentProperties.tsx
+++ b/src/components/editor/fastboard-components/card/properties/CardTextComponentProperties.tsx
@@ -14,7 +14,8 @@ export default function CardTextComponentProperties({
   onValueChange: (properties: TextComponentProperties) => void;
 }) {
   const { theme } = useTheme();
-  const { dataKey, label, defaultText, alignment, textColor } = properties;
+  const { dataKey, label, defaultText, alignment, fontSize, textColor } =
+    properties;
 
   return (
     <div className="flex flex-col gap-y-2">
@@ -54,6 +55,16 @@ export default function CardTextComponentProperties({
           onValueChange({ ...properties, defaultText: value });
         }}
       />
+      <Input
+        type="number"
+        label="Text size"
+        labelPlacement="outside-left"
+        placeholder="Enter some text"
+        value={String(fontSize)}
+        onValueChange={(value) => {
+          onValueChange({ ...properties, fontSize: Number(value) });
+        }}
+      />
       <AlignmentProperty
         label="Alignment"
         position={alignment}
diff --git a/src/components/editor/fastboard-components/sidebar/FastboardSidebar.tsx b/src/components/editor/fastboard-components/sidebar/FastboardSidebar.tsx
index a6aeac83..52a4780a 100644
--- a/src/components/editor/fastboard-components/sidebar/FastboardSidebar.tsx
+++ b/src/components/editor/fastboard-components/sidebar/FastboardSidebar.tsx
@@ -13,7 +13,6 @@ export default function FastboardSidebar({
   const { theme } = useTheme();
   const { currentPage, changePage } = useNavigation();
   const { menuItems, backgroundColor, textColor, selectedColor } = properties;
-  const cursorClassName = `bg-[${selectedColor.light}]`;
 
   function handleSelectionChange(key: Key) {
     changePage(key.toString());
diff --git a/src/components/editor/fastboard-components/table/properties/ViewActionProperties.tsx b/src/components/editor/fastboard-components/table/properties/ViewActionProperties.tsx
index 74a0e453..55556b02 100644
--- a/src/components/editor/fastboard-components/table/properties/ViewActionProperties.tsx
+++ b/src/components/editor/fastboard-components/table/properties/ViewActionProperties.tsx
@@ -28,10 +28,10 @@ export function ViewActionProperties({
 }) {
   const { label, mode, query, parameters, pageId, queryStrings } = action;
   const { addPage } = useDashboard();
-  const { changePage } = useNavigation();
+  const { currentPage } = useNavigation();
 
   function createViewPage() {
-    const pageId = addPage();
+    const pageId = addPage(currentPage);
     if (!pageId) return;
 
     onChange({
@@ -140,7 +140,11 @@ export function ViewActionProperties({
         </Tab>
 
         <Tab key="page" title="Page">
-          {!pageId && <Button onPress={createViewPage}>Create new page</Button>}
+          {!pageId && (
+            <Button className="w-full" variant="flat" onPress={createViewPage}>
+              Create new page
+            </Button>
+          )}
           {pageId && (
             <div className="flex flex-col gap-y-2">
               <div className="flex justify-end w-full">
diff --git a/src/components/editor/settings/SettingsDrawer.tsx b/src/components/editor/settings/SettingsDrawer.tsx
index 7c19dd39..e412f1fb 100644
--- a/src/components/editor/settings/SettingsDrawer.tsx
+++ b/src/components/editor/settings/SettingsDrawer.tsx
@@ -30,7 +30,9 @@ export default function SettingsDrawer() {
       <div className="flex flex-col gap-5 mt-5">
         {!(hasSidebar && sidebarVisible) && (
           <LayoutSelection
-            selectedLayout={dashboard?.metadata?.pages["home"][0].type ?? null}
+            selectedLayout={
+              dashboard?.metadata?.pages["home"].layouts[0].type ?? null
+            }
             onLayoutSelect={(layoutType) => {
               changeLayout("home", 0, layoutType);
             }}
diff --git a/src/components/shared/Viewport.tsx b/src/components/shared/Viewport.tsx
index bfce694a..e33e69e1 100644
--- a/src/components/shared/Viewport.tsx
+++ b/src/components/shared/Viewport.tsx
@@ -6,9 +6,10 @@ import { previewAccessTokenState } from "@/atoms/editor";
 import useNavigation from "@/hooks/useNavigation";
 import { useEffect } from "react";
 import { getLayout } from "../editor/fastboard-components/utils";
-import { Spinner } from "@nextui-org/react";
+import { Button, Spinner } from "@nextui-org/react";
 import { AxiosError } from "axios";
 import { notFound } from "next/navigation";
+import { Back } from "iconsax-react";
 
 export default function Viewport({
   mode,
@@ -19,7 +20,7 @@ export default function Viewport({
     mode === "editor" || mode === "preview" ? "editor" : "published"
   );
   const setPreviewAccessToken = useSetRecoilState(previewAccessTokenState);
-  const { currentPage } = useNavigation();
+  const { currentPage, changePage } = useNavigation();
 
   useEffect(() => {
     if (mode === "editor" && dashboard?.metadata?.auth?.previewAccessToken) {
@@ -39,9 +40,7 @@ export default function Viewport({
   const sidebar = dashboard?.metadata?.sidebar?.id
     ? getComponent(dashboard.metadata.sidebar?.id)
     : null;
-  const selectedPage = dashboard?.metadata?.pages[currentPage]
-    ? currentPage
-    : "home";
+  const selectedPage = dashboard?.metadata?.pages[currentPage];
 
   if (loading) {
     return (
@@ -103,15 +102,32 @@ export default function Viewport({
             />
           </div>
         )}
-        <div className="min-w-96 h-full" style={{ width: layoutsWidth }}>
-          {dashboard?.metadata?.pages[selectedPage].map((layout, index) =>
-            getLayout(
-              layout,
-              currentPage,
-              index,
-              mode === "editor" ? "editable" : "view"
-            )
+        <div
+          className="flex flex-col min-w-96 h-full"
+          style={{ width: layoutsWidth }}
+        >
+          {selectedPage && selectedPage.returnPage && (
+            <Button
+              isIconOnly
+              variant="light"
+              className="mx-2 mt-1"
+              onPress={() => {
+                if (!selectedPage.returnPage) return;
+                changePage(selectedPage.returnPage);
+              }}
+            >
+              <Back />
+            </Button>
           )}
+          {selectedPage &&
+            selectedPage.layouts.map((layout, index) =>
+              getLayout(
+                layout,
+                currentPage,
+                index,
+                mode === "editor" ? "editable" : "view"
+              )
+            )}
         </div>
       </div>
     </AuthVerifier>
diff --git a/src/hooks/dashboards/useDashboard.ts b/src/hooks/dashboards/useDashboard.ts
index a23c3258..ccd9850f 100644
--- a/src/hooks/dashboards/useDashboard.ts
+++ b/src/hooks/dashboards/useDashboard.ts
@@ -146,10 +146,13 @@ const useDashboard = (mode: "editor" | "published" = "editor") => {
     changePage("home");
   };
 
-  const addPage = (): string | null => {
+  const addPage = (returnPage?: string): string | null => {
     if (!dashboard) return null;
 
-    const [newMetadata, pageId] = editorUtils.addPage(dashboard.metadata);
+    const [newMetadata, pageId] = editorUtils.addPage(
+      dashboard.metadata,
+      returnPage
+    );
     updateDashboard((prev) => ({
       ...prev,
       metadata: newMetadata,
@@ -167,7 +170,7 @@ const useDashboard = (mode: "editor" | "published" = "editor") => {
 
   const getBaseLayout = (): LayoutType | null => {
     if (!dashboard) return null;
-    return dashboard.metadata.pages["home"][0].type;
+    return dashboard.metadata.pages["home"].layouts[0].type;
   };
 
   const changeLayout = (
diff --git a/src/lib/editor.utils.ts b/src/lib/editor.utils.ts
index 939ad44c..f6efd147 100644
--- a/src/lib/editor.utils.ts
+++ b/src/lib/editor.utils.ts
@@ -116,7 +116,7 @@ export function addComponentToLayout(
     container: containerIndex,
   } = index;
   // If there is already a component in the container, delete it
-  const layout = dashboardMetadata.pages[pageIndex][layoutIndex];
+  const layout = dashboardMetadata.pages[pageIndex].layouts[layoutIndex];
   const curretnComponentId: ComponentId | null =
     layout[containerIndex as keyof Layout];
   if (curretnComponentId) {
@@ -132,15 +132,18 @@ export function addComponentToLayout(
     ...newMetadata,
     pages: {
       ...newMetadata.pages,
-      [pageIndex]: newMetadata.pages[pageIndex].map((layout, index) => {
-        if (index === layoutIndex) {
-          return {
-            ...layout,
-            [containerIndex]: componentId,
-          };
-        }
-        return layout;
-      }),
+      [pageIndex]: {
+        ...newMetadata.pages[pageIndex],
+        layouts: newMetadata.pages[pageIndex].layouts.map((layout, index) => {
+          if (index === layoutIndex) {
+            return {
+              ...layout,
+              [containerIndex]: componentId,
+            };
+          }
+          return layout;
+        }),
+      },
     },
   };
 }
@@ -150,7 +153,7 @@ export function deleteComponentFromLayout(
   dashboardMetadata: DashboardMetadata
 ): DashboardMetadata {
   const { page, layout: layoutIndex, container } = index;
-  const layout = dashboardMetadata.pages[page][layoutIndex];
+  const layout = dashboardMetadata.pages[page].layouts[layoutIndex];
   const componentId: ComponentId = layout[container as keyof Layout];
   if (!componentId) {
     return dashboardMetadata;
@@ -161,15 +164,18 @@ export function deleteComponentFromLayout(
     ...newMetadata,
     pages: {
       ...newMetadata.pages,
-      [page]: newMetadata.pages[page].map((layout, index) => {
-        if (index === layoutIndex) {
-          return {
-            ...layout,
-            [container]: null,
-          };
-        }
-        return layout;
-      }),
+      [page]: {
+        ...newMetadata.pages[page],
+        layouts: newMetadata.pages[page].layouts.map((layout, index) => {
+          if (index === layoutIndex) {
+            return {
+              ...layout,
+              [container]: null,
+            };
+          }
+          return layout;
+        }),
+      },
     },
   };
 }
@@ -181,7 +187,7 @@ function changeLayout(
   dashboardMetadata: DashboardMetadata
 ): DashboardMetadata {
   let to = Layout.of(to_type);
-  const from = dashboardMetadata.pages[pageIndex][layoutIndex];
+  const from = dashboardMetadata.pages[pageIndex].layouts[layoutIndex];
 
   const keysFrom = Object.keys(from);
   const keysTo = Object.keys(to);
@@ -197,12 +203,17 @@ function changeLayout(
     ...dashboardMetadata,
     pages: {
       ...dashboardMetadata.pages,
-      [pageIndex]: dashboardMetadata.pages[pageIndex].map((layout, index) => {
-        if (index === layoutIndex) {
-          return convertLayout(from, to_type);
-        }
-        return layout;
-      }),
+      [pageIndex]: {
+        ...dashboardMetadata.pages[pageIndex],
+        layouts: dashboardMetadata.pages[pageIndex].layouts.map(
+          (layout, index) => {
+            if (index === layoutIndex) {
+              return convertLayout(from, to_type);
+            }
+            return layout;
+          }
+        ),
+      },
     },
   };
 }
@@ -338,7 +349,8 @@ function deleteSidebar(
 }
 
 function addPage(
-  dashboardMetadata: DashboardMetadata
+  dashboardMetadata: DashboardMetadata,
+  returnPage?: string
 ): [DashboardMetadata, string] {
   const pageId = uuidv4();
   return [
@@ -346,7 +358,10 @@ function addPage(
       ...dashboardMetadata,
       pages: {
         ...dashboardMetadata.pages,
-        [pageId]: [Layout.of(LayoutType.Full)],
+        [pageId]: {
+          layouts: [Layout.of(LayoutType.Full)],
+          returnPage: returnPage,
+        },
       },
     },
     pageId,
@@ -358,7 +373,7 @@ function deletePage(
   dashboardMetadata: DashboardMetadata
 ): DashboardMetadata {
   //Remove all components in the page
-  const layouts = dashboardMetadata.pages[pageId];
+  const layouts = dashboardMetadata.pages[pageId].layouts;
   layouts.forEach((layout) => {
     Object.keys(layout).forEach((key) => {
       if (key === "type") {
diff --git a/src/types/editor/card-types.ts b/src/types/editor/card-types.ts
index 7b394b30..07039be4 100644
--- a/src/types/editor/card-types.ts
+++ b/src/types/editor/card-types.ts
@@ -16,6 +16,7 @@ export interface TextComponentProperties extends BaseCardComponentProperties {
   label: string;
   defaultText: string;
   alignment: Alignment;
+  fontSize: number;
   textColor: Color;
 }
 
@@ -40,6 +41,7 @@ export class DefaultCardComponentProperties {
           label: "",
           defaultText: "Some text",
           alignment: Alignment.Left,
+          fontSize: 20,
           textColor: new Color("#000000", "#ffffff"),
         };
       case CardComponentType.Image:
diff --git a/src/types/editor/index.ts b/src/types/editor/index.ts
index 3fd23af0..32efcf65 100644
--- a/src/types/editor/index.ts
+++ b/src/types/editor/index.ts
@@ -50,6 +50,11 @@ export class DashboardAuth {
   }
 }
 
+export interface Page {
+  layouts: Layout[];
+  returnPage: string | undefined;
+}
+
 export class DashboardMetadata {
   components: Record<ComponentId, FastboardComponent> = {};
   header: { componentId: ComponentId | null; isVisible: boolean } = {
@@ -58,8 +63,11 @@ export class DashboardMetadata {
   };
   sidebar: { id: ComponentId; visible: boolean } | null = null;
   modals: ModalFrame[] = [];
-  pages: Record<string, Layout[]> = {
-    home: [Layout.of(LayoutType.Full)],
+  pages: Record<string, Page> = {
+    home: {
+      layouts: [Layout.of(LayoutType.Full)],
+      returnPage: undefined,
+    },
   };
   auth: DashboardAuth = DashboardAuth.default();
   pageTitle: string = "";

From 3d9398f76c70474350a44dc5ef8041116678a748 Mon Sep 17 00:00:00 2001
From: Chiki <66981070+JulianBiancardi@users.noreply.github.com>
Date: Fri, 20 Sep 2024 12:45:02 -0300
Subject: [PATCH 03/12] update: card properties

---
 .../card/FastboardCard.tsx                    |  8 ++-
 .../card/ImageComponent.tsx                   |  8 ++-
 .../card/TextComponent.tsx                    | 19 +++++-
 .../CardImageComponentProperties.tsx          |  8 ++-
 .../CardTextComponentProperties.tsx           | 43 ++++++++----
 .../header/FastboardHeader.tsx                | 21 +++---
 .../header/FastboardHeaderProperties.tsx      | 41 +++--------
 src/components/shared/AlignmentProperty.tsx   |  2 +-
 src/components/shared/FontTypeProperty.tsx    | 68 +++++++++++++++++++
 src/components/shared/ImageBorderProperty.tsx | 59 ++++++++++++++++
 src/types/editor/card-types.ts                |  9 ++-
 src/types/editor/header-types.ts              |  9 +--
 12 files changed, 225 insertions(+), 70 deletions(-)
 create mode 100644 src/components/shared/FontTypeProperty.tsx
 create mode 100644 src/components/shared/ImageBorderProperty.tsx

diff --git a/src/components/editor/fastboard-components/card/FastboardCard.tsx b/src/components/editor/fastboard-components/card/FastboardCard.tsx
index 1a7d5f4d..f1d05341 100644
--- a/src/components/editor/fastboard-components/card/FastboardCard.tsx
+++ b/src/components/editor/fastboard-components/card/FastboardCard.tsx
@@ -3,6 +3,7 @@ import {
   CardComponentProperties,
   CardComponentType,
   CardProperties,
+  ImageComponentProperties,
   TextComponentProperties,
 } from "@/types/editor/card-types";
 import { Card, CardBody, CardHeader, Spinner } from "@nextui-org/react";
@@ -116,7 +117,12 @@ export default function FastboardCard({
         );
       }
       case CardComponentType.Image:
-        return <ImageComponent properties={component} item={item} />;
+        return (
+          <ImageComponent
+            properties={component as ImageComponentProperties}
+            item={item}
+          />
+        );
       default:
         return <p>Component not found</p>;
     }
diff --git a/src/components/editor/fastboard-components/card/ImageComponent.tsx b/src/components/editor/fastboard-components/card/ImageComponent.tsx
index b960bd7c..f494d894 100644
--- a/src/components/editor/fastboard-components/card/ImageComponent.tsx
+++ b/src/components/editor/fastboard-components/card/ImageComponent.tsx
@@ -10,7 +10,7 @@ export default function ImageComponent({
   properties: ImageComponentProperties;
   item: any;
 }) {
-  const { dataKey, alignment } = properties;
+  const { dataKey, alignment, border } = properties;
   const [imageError, setImageError] = useState(false);
 
   useEffect(() => {
@@ -20,7 +20,7 @@ export default function ImageComponent({
   return (
     <div
       className={
-        "flex " +
+        "flex size-auto " +
         (alignment === Alignment.Center
           ? "justify-center"
           : alignment === Alignment.Right
@@ -31,7 +31,9 @@ export default function ImageComponent({
       <Image
         src={imageError ? "../ImageErrorImage.svg" : item[dataKey]}
         alt="Card image"
-        width={100}
+        width={"200px"}
+        height={"200px"}
+        radius={border as any}
         onError={() => setImageError(true)}
       />
     </div>
diff --git a/src/components/editor/fastboard-components/card/TextComponent.tsx b/src/components/editor/fastboard-components/card/TextComponent.tsx
index 3a6038f6..ddf6d50f 100644
--- a/src/components/editor/fastboard-components/card/TextComponent.tsx
+++ b/src/components/editor/fastboard-components/card/TextComponent.tsx
@@ -1,4 +1,5 @@
 import { Alignment } from "@/components/shared/AlignmentProperty";
+import { FontType } from "@/components/shared/FontTypeProperty";
 import { TextComponentProperties } from "@/types/editor/card-types";
 import { useTheme } from "next-themes";
 
@@ -10,8 +11,15 @@ export default function TextComponent({
   item: any;
 }) {
   const { theme } = useTheme();
-  const { dataKey, label, defaultText, alignment, fontSize, textColor } =
-    properties;
+  const {
+    dataKey,
+    label,
+    defaultText,
+    alignment,
+    fontSize,
+    fontTypes,
+    textColor,
+  } = properties;
 
   return (
     <h1
@@ -21,11 +29,16 @@ export default function TextComponent({
           ? "text-center"
           : alignment === Alignment.Right
           ? "text-right"
-          : "text-left")
+          : "text-left") +
+        (fontTypes.includes(FontType.Bold) ? " font-bold" : "")
       }
       style={{
         color: theme === "dark" ? textColor.dark : textColor.light,
         fontSize: `${fontSize}px`,
+        fontStyle: fontTypes.includes(FontType.Italic) ? "italic" : "normal",
+        textDecorationLine: fontTypes.includes(FontType.Underline)
+          ? "underline"
+          : "none",
       }}
     >
       {label}
diff --git a/src/components/editor/fastboard-components/card/properties/CardImageComponentProperties.tsx b/src/components/editor/fastboard-components/card/properties/CardImageComponentProperties.tsx
index c932f4a8..2df5f429 100644
--- a/src/components/editor/fastboard-components/card/properties/CardImageComponentProperties.tsx
+++ b/src/components/editor/fastboard-components/card/properties/CardImageComponentProperties.tsx
@@ -1,4 +1,5 @@
 import AlignmentProperty from "@/components/shared/AlignmentProperty";
+import ImageBoderProperty from "@/components/shared/ImageBorderProperty";
 import { ImageComponentProperties } from "@/types/editor/card-types";
 import { Select, SelectItem } from "@nextui-org/react";
 
@@ -11,7 +12,7 @@ export default function CardImageComponentProperties({
   dataKeys: string[];
   onValueChange: (properties: ImageComponentProperties) => void;
 }) {
-  const { dataKey, alignment } = properties;
+  const { dataKey, alignment, border } = properties;
 
   return (
     <div className="flex flex-col gap-y-2">
@@ -40,6 +41,11 @@ export default function CardImageComponentProperties({
           onValueChange({ ...properties, alignment: position })
         }
       />
+      <ImageBoderProperty
+        label="Photo border"
+        border={border}
+        onBorderChange={(border) => onValueChange({ ...properties, border })}
+      />
     </div>
   );
 }
diff --git a/src/components/editor/fastboard-components/card/properties/CardTextComponentProperties.tsx b/src/components/editor/fastboard-components/card/properties/CardTextComponentProperties.tsx
index 51f3a420..de7b4f26 100644
--- a/src/components/editor/fastboard-components/card/properties/CardTextComponentProperties.tsx
+++ b/src/components/editor/fastboard-components/card/properties/CardTextComponentProperties.tsx
@@ -1,5 +1,6 @@
 import AlignmentProperty from "@/components/shared/AlignmentProperty";
 import ColorPicker from "@/components/shared/ColorPicker";
+import FontTypeProperty from "@/components/shared/FontTypeProperty";
 import { TextComponentProperties } from "@/types/editor/card-types";
 import { Input, Select, SelectItem } from "@nextui-org/react";
 import { useTheme } from "next-themes";
@@ -14,8 +15,15 @@ export default function CardTextComponentProperties({
   onValueChange: (properties: TextComponentProperties) => void;
 }) {
   const { theme } = useTheme();
-  const { dataKey, label, defaultText, alignment, fontSize, textColor } =
-    properties;
+  const {
+    dataKey,
+    label,
+    defaultText,
+    alignment,
+    fontSize,
+    fontTypes,
+    textColor,
+  } = properties;
 
   return (
     <div className="flex flex-col gap-y-2">
@@ -55,23 +63,32 @@ export default function CardTextComponentProperties({
           onValueChange({ ...properties, defaultText: value });
         }}
       />
-      <Input
-        type="number"
-        label="Text size"
-        labelPlacement="outside-left"
-        placeholder="Enter some text"
-        value={String(fontSize)}
-        onValueChange={(value) => {
-          onValueChange({ ...properties, fontSize: Number(value) });
-        }}
-      />
+      <div className="flex flex-row justify-between items-center">
+        <h1 className="text-sm">Text size</h1>
+        <Input
+          aria-label="Text size input"
+          className="w-1/3"
+          type="number"
+          placeholder="Enter some text"
+          value={String(fontSize)}
+          onValueChange={(value) => {
+            onValueChange({ ...properties, fontSize: Number(value) });
+          }}
+        />
+      </div>
+
       <AlignmentProperty
-        label="Alignment"
         position={alignment}
         onPositionChange={(position) =>
           onValueChange({ ...properties, alignment: position })
         }
       />
+      <FontTypeProperty
+        fontTypes={fontTypes}
+        onFontTypesChange={(newFontTypes) => {
+          onValueChange({ ...properties, fontTypes: newFontTypes });
+        }}
+      />
       <ColorPicker
         label="Text color"
         initialColor={theme === "dark" ? textColor.dark : textColor.light}
diff --git a/src/components/editor/fastboard-components/header/FastboardHeader.tsx b/src/components/editor/fastboard-components/header/FastboardHeader.tsx
index 7a78bf50..997cf552 100644
--- a/src/components/editor/fastboard-components/header/FastboardHeader.tsx
+++ b/src/components/editor/fastboard-components/header/FastboardHeader.tsx
@@ -1,10 +1,10 @@
 import { ComponentId } from "@/types/editor";
 import { FastboardHeaderProperties } from "@/types/editor/header-types";
 import { Image, Navbar, NavbarContent, NavbarItem } from "@nextui-org/react";
-import { FastboardHeaderPosition } from "@/types/editor/header-types";
 import { useEffect, useState } from "react";
 import { ThemeSwitcher } from "@/components/layout/ThemeSwitcher";
 import { useTheme } from "next-themes";
+import { Alignment } from "@/components/shared/AlignmentProperty";
 
 export default function FastboardHeader({
   id,
@@ -43,13 +43,16 @@ export default function FastboardHeader({
           theme === "light" ? backgroundColor.light : backgroundColor.dark,
       }}
     >
-      <NavbarContent className="flex flex-row w-full py-1" justify={position}>
+      <NavbarContent
+        className="flex flex-row w-full py-1"
+        justify={
+          position.toLowerCase() as "center" | "start" | "end" | undefined
+        }
+      >
         {photo.url && (
           <NavbarItem
             className={`flex h-full ${
-              position === FastboardHeaderPosition.Right
-                ? "order-2 pl-5"
-                : "order-1 pr-5"
+              position === Alignment.Right ? "order-2 pl-5" : "order-1 pr-5"
             }`}
           >
             <Image
@@ -67,9 +70,7 @@ export default function FastboardHeader({
         )}
 
         <NavbarItem
-          className={`${
-            position === FastboardHeaderPosition.Right ? "order-1" : "order-2"
-          }`}
+          className={`${position === Alignment.Right ? "order-1" : "order-2"}`}
         >
           {title.size && (
             <div
@@ -83,7 +84,7 @@ export default function FastboardHeader({
           )}
         </NavbarItem>
 
-        {showThemeSwitcher && position === FastboardHeaderPosition.Right && (
+        {showThemeSwitcher && position === Alignment.Right && (
           <NavbarItem className="order-3">
             <ThemeSwitcher
               size="md"
@@ -96,7 +97,7 @@ export default function FastboardHeader({
           </NavbarItem>
         )}
       </NavbarContent>
-      {showThemeSwitcher && position !== FastboardHeaderPosition.Right && (
+      {showThemeSwitcher && position !== Alignment.Right && (
         <NavbarContent className="py-1" justify="end">
           <NavbarItem>
             <ThemeSwitcher
diff --git a/src/components/editor/fastboard-components/header/FastboardHeaderProperties.tsx b/src/components/editor/fastboard-components/header/FastboardHeaderProperties.tsx
index 80654426..278987b5 100644
--- a/src/components/editor/fastboard-components/header/FastboardHeaderProperties.tsx
+++ b/src/components/editor/fastboard-components/header/FastboardHeaderProperties.tsx
@@ -1,6 +1,5 @@
 import {
   FastboardHeaderProperties,
-  FastboardHeaderPosition,
   FastboardHeaderFontSize,
   FastboardHeaderPhotoBorder,
   FastboardHeaderPhotoSize,
@@ -14,9 +13,9 @@ import {
   Button,
   Slider,
 } from "@nextui-org/react";
-import AlignIcon from "@/components/shared/icons/AlignIcon";
 import ColorPicker from "@/components/shared/ColorPicker";
 import { useTheme } from "next-themes";
+import AlignmentProperty from "@/components/shared/AlignmentProperty";
 
 const FastboardHeaderPropertiesComponent = ({
   properties,
@@ -111,34 +110,16 @@ const FastboardHeaderPropertiesComponent = ({
       >
         <div className="flex flex-col gap-y-2">
           <div>
-            <p className="text-small pb-1">Position</p>
-            <ButtonGroup className="w-full">
-              {Object.entries(FastboardHeaderPosition).map(([key, value]) => (
-                <Button
-                  className={
-                    position === value
-                      ? "bg-foreground bg-opacity-[0.07] w-full"
-                      : "bg-foreground bg-opacity-5 opacity-60 w-full"
-                  }
-                  key={value}
-                  startContent={
-                    <AlignIcon
-                      align={key as string}
-                      selected={position === value ? true : false}
-                      size={24}
-                    />
-                  }
-                  onClick={() => {
-                    onValueChange({
-                      ...properties,
-                      position: value,
-                    });
-                  }}
-                >
-                  {key}
-                </Button>
-              ))}
-            </ButtonGroup>
+            <AlignmentProperty
+              label="Position"
+              position={position}
+              onPositionChange={(position) =>
+                onValueChange({
+                  ...properties,
+                  position: position,
+                })
+              }
+            />
 
             <p className="pt-4 text-small pb-1">Photo Border Radius</p>
             <ButtonGroup className="w-full">
diff --git a/src/components/shared/AlignmentProperty.tsx b/src/components/shared/AlignmentProperty.tsx
index 13475a7f..7165f860 100644
--- a/src/components/shared/AlignmentProperty.tsx
+++ b/src/components/shared/AlignmentProperty.tsx
@@ -12,7 +12,7 @@ export default function AlignmentProperty({
   position,
   onPositionChange,
 }: {
-  label: string;
+  label?: string;
   position: Alignment;
   onPositionChange: (position: Alignment) => void;
 }) {
diff --git a/src/components/shared/FontTypeProperty.tsx b/src/components/shared/FontTypeProperty.tsx
new file mode 100644
index 00000000..966a4393
--- /dev/null
+++ b/src/components/shared/FontTypeProperty.tsx
@@ -0,0 +1,68 @@
+import { Button, ButtonGroup } from "@nextui-org/react";
+
+export enum FontType {
+  Bold = "Bold",
+  Italic = "Italic",
+  Underline = "Underline",
+}
+
+export default function FontTypeProperty({
+  fontTypes,
+  onFontTypesChange,
+}: {
+  fontTypes: FontType[];
+  onFontTypesChange: (fontTypes: FontType[]) => void;
+}) {
+  return (
+    <ButtonGroup>
+      <Button
+        className={
+          fontTypes.includes(FontType.Bold)
+            ? "text-primary bg-foreground bg-opacity-[0.07] w-full font-bold"
+            : "bg-foreground bg-opacity-5 opacity-60 w-full font-bold"
+        }
+        onPress={() => {
+          onFontTypesChange(
+            fontTypes.includes(FontType.Bold)
+              ? fontTypes.filter((type) => type !== FontType.Bold)
+              : [...fontTypes, FontType.Bold]
+          );
+        }}
+      >
+        B
+      </Button>
+      <Button
+        className={
+          fontTypes.includes(FontType.Italic)
+            ? "text-primary bg-foreground bg-opacity-[0.07] w-full italic"
+            : "bg-foreground bg-opacity-5 opacity-60 w-full italic"
+        }
+        onPress={() => {
+          onFontTypesChange(
+            fontTypes.includes(FontType.Italic)
+              ? fontTypes.filter((type) => type !== FontType.Italic)
+              : [...fontTypes, FontType.Italic]
+          );
+        }}
+      >
+        I
+      </Button>
+      <Button
+        className={
+          fontTypes.includes(FontType.Underline)
+            ? "text-primary bg-foreground bg-opacity-[0.07] w-full underline"
+            : "bg-foreground bg-opacity-5 opacity-60 w-full underline"
+        }
+        onPress={() => {
+          onFontTypesChange(
+            fontTypes.includes(FontType.Underline)
+              ? fontTypes.filter((type) => type !== FontType.Underline)
+              : [...fontTypes, FontType.Underline]
+          );
+        }}
+      >
+        U
+      </Button>
+    </ButtonGroup>
+  );
+}
diff --git a/src/components/shared/ImageBorderProperty.tsx b/src/components/shared/ImageBorderProperty.tsx
new file mode 100644
index 00000000..25745740
--- /dev/null
+++ b/src/components/shared/ImageBorderProperty.tsx
@@ -0,0 +1,59 @@
+import { Button, ButtonGroup } from "@nextui-org/react";
+
+export enum ImageBorder {
+  None = "none",
+  Round = "lg",
+  Circle = "full",
+}
+
+export default function ImageBoderProperty({
+  label,
+  border,
+  onBorderChange,
+}: {
+  label?: string;
+  border: ImageBorder;
+  onBorderChange: (border: ImageBorder) => void;
+}) {
+  return (
+    <div>
+      <h2 className="text-small pb-1">{label}</h2>
+      <ButtonGroup className="w-full">
+        {Object.entries(ImageBorder).map(([key, value]) => (
+          <Button
+            className={
+              border === value
+                ? "bg-foreground bg-opacity-[0.07] w-full"
+                : "bg-foreground bg-opacity-5 opacity-60 w-full"
+            }
+            key={value}
+            startContent={
+              <div
+                className={
+                  border === value
+                    ? "bg-primary overflow-hidden"
+                    : "bg-foreground-400 bg-opacity-75 overflow-hidden"
+                }
+                style={{
+                  borderRadius: value === "none" ? 0 : value === "lg" ? 8 : 100,
+                }}
+              >
+                <div
+                  style={{
+                    width: 25,
+                    height: 25,
+                  }}
+                />
+              </div>
+            }
+            onPress={() => {
+              onBorderChange(value);
+            }}
+          >
+            {key}
+          </Button>
+        ))}
+      </ButtonGroup>
+    </div>
+  );
+}
diff --git a/src/types/editor/card-types.ts b/src/types/editor/card-types.ts
index 07039be4..934b1463 100644
--- a/src/types/editor/card-types.ts
+++ b/src/types/editor/card-types.ts
@@ -1,6 +1,8 @@
 import { Alignment } from "@/components/shared/AlignmentProperty";
 import { RestQueryData } from "../connections";
 import { Color } from "./style-types";
+import { FontType } from "@/components/shared/FontTypeProperty";
+import { ImageBorder } from "@/components/shared/ImageBorderProperty";
 
 export enum CardComponentType {
   Text = "Text",
@@ -17,11 +19,13 @@ export interface TextComponentProperties extends BaseCardComponentProperties {
   defaultText: string;
   alignment: Alignment;
   fontSize: number;
+  fontTypes: FontType[];
   textColor: Color;
 }
 
 export interface ImageComponentProperties extends BaseCardComponentProperties {
   alignment: Alignment;
+  border: ImageBorder;
 }
 
 export type CardComponentProperties =
@@ -41,18 +45,21 @@ export class DefaultCardComponentProperties {
           label: "",
           defaultText: "Some text",
           alignment: Alignment.Left,
-          fontSize: 20,
+          fontSize: 18,
+          fontTypes: [],
           textColor: new Color("#000000", "#ffffff"),
         };
       case CardComponentType.Image:
         return {
           ...baseProperties,
           alignment: Alignment.Left,
+          border: ImageBorder.Round,
         };
       default:
         return {
           ...baseProperties,
           alignment: Alignment.Left,
+          border: ImageBorder.Round,
         };
     }
   }
diff --git a/src/types/editor/header-types.ts b/src/types/editor/header-types.ts
index 1846c5a2..2f11ab96 100644
--- a/src/types/editor/header-types.ts
+++ b/src/types/editor/header-types.ts
@@ -1,11 +1,6 @@
+import { Alignment } from "@/components/shared/AlignmentProperty";
 import { Color } from "./style-types";
 
-export enum FastboardHeaderPosition {
-  Left = "start",
-  Center = "center",
-  Right = "end",
-}
-
 export enum FastboardHeaderFontSize {
   Small = "x-large",
   Medium = "xx-large",
@@ -39,7 +34,7 @@ export class FastboardHeaderProperties {
     size: FastboardHeaderPhotoSize.Medium,
   };
   showThemeSwitcher: boolean = false;
-  position: FastboardHeaderPosition = FastboardHeaderPosition.Center;
+  position: Alignment = Alignment.Center;
   divider: boolean = false;
   backgroundColor: Color = new Color("#ffffff", "#000000");
   textColor: Color = new Color("#11181C", "#ECEDEE");

From 73cb0692d2b07105ee412d55a0832187d8aba20d Mon Sep 17 00:00:00 2001
From: Chiki <66981070+JulianBiancardi@users.noreply.github.com>
Date: Fri, 20 Sep 2024 15:19:14 -0300
Subject: [PATCH 04/12] feat: add video and link components

---
 package-lock.json                             |  35 ++++
 package.json                                  |   1 +
 .../card/FastboardCard.tsx                    |  18 ++
 .../card/LinkComponent.tsx                    |  76 ++++++++
 .../card/TextComponent.tsx                    |  30 +++-
 .../card/VideoComponent.tsx                   |  37 ++++
 .../card/properties/CardComponentIcon.tsx     |  27 +++
 .../card/properties/CardComponentsList.tsx    |   3 +
 .../CardLinkComponentProperties.tsx           | 163 ++++++++++++++++++
 .../CardTextComponentProperties.tsx           |  18 ++
 .../CardVideoComponentProperties.tsx          |  37 ++++
 .../properties/FastboardCardProperties.tsx    |  29 ++++
 src/components/shared/IconPicker.tsx          |   3 +-
 src/types/editor/card-types.ts                |  40 ++++-
 src/types/editor/icon-types.ts                |   1 +
 15 files changed, 507 insertions(+), 11 deletions(-)
 create mode 100644 src/components/editor/fastboard-components/card/LinkComponent.tsx
 create mode 100644 src/components/editor/fastboard-components/card/VideoComponent.tsx
 create mode 100644 src/components/editor/fastboard-components/card/properties/CardComponentIcon.tsx
 create mode 100644 src/components/editor/fastboard-components/card/properties/CardLinkComponentProperties.tsx
 create mode 100644 src/components/editor/fastboard-components/card/properties/CardVideoComponentProperties.tsx

diff --git a/package-lock.json b/package-lock.json
index f41b349f..ce788ddb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,6 +30,7 @@
         "react-hook-form": "^7.52.0",
         "react-icons": "^5.2.1",
         "react-json-view-lite": "^1.4.0",
+        "react-player": "^2.16.0",
         "recharts": "^2.12.7",
         "recoil": "^0.7.7",
         "sonner": "^1.5.0",
@@ -5524,6 +5525,12 @@
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
+    "node_modules/load-script": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz",
+      "integrity": "sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==",
+      "license": "MIT"
+    },
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -5602,6 +5609,12 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==",
+      "license": "MIT"
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -6090,6 +6103,12 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
+      "license": "MIT"
+    },
     "node_modules/react-firebase-hooks": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/react-firebase-hooks/-/react-firebase-hooks-5.1.1.tgz",
@@ -6138,6 +6157,22 @@
         "react": "^16.13.1 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-player": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.16.0.tgz",
+      "integrity": "sha512-mAIPHfioD7yxO0GNYVFD1303QFtI3lyyQZLY229UEAp/a10cSW+hPcakg0Keq8uWJxT2OiT/4Gt+Lc9bD6bJmQ==",
+      "license": "MIT",
+      "dependencies": {
+        "deepmerge": "^4.0.0",
+        "load-script": "^1.0.0",
+        "memoize-one": "^5.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.0.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0"
+      }
+    },
     "node_modules/react-remove-scroll": {
       "version": "2.5.10",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.10.tgz",
diff --git a/package.json b/package.json
index d8ecce17..1e8ac1f6 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "react-hook-form": "^7.52.0",
     "react-icons": "^5.2.1",
     "react-json-view-lite": "^1.4.0",
+    "react-player": "^2.16.0",
     "recharts": "^2.12.7",
     "recoil": "^0.7.7",
     "sonner": "^1.5.0",
diff --git a/src/components/editor/fastboard-components/card/FastboardCard.tsx b/src/components/editor/fastboard-components/card/FastboardCard.tsx
index f1d05341..b4941e16 100644
--- a/src/components/editor/fastboard-components/card/FastboardCard.tsx
+++ b/src/components/editor/fastboard-components/card/FastboardCard.tsx
@@ -4,7 +4,9 @@ import {
   CardComponentType,
   CardProperties,
   ImageComponentProperties,
+  LinkComponentProperties,
   TextComponentProperties,
+  VideoComponentProperties,
 } from "@/types/editor/card-types";
 import { Card, CardBody, CardHeader, Spinner } from "@nextui-org/react";
 import scrollbarStyles from "@/styles/scrollbar.module.css";
@@ -17,6 +19,8 @@ import { propertiesDrawerState } from "@/atoms/editor";
 import useDashboard from "@/hooks/dashboards/useDashboard";
 import TextComponent from "./TextComponent";
 import ImageComponent from "./ImageComponent";
+import VideoComponent from "./VideoComponent";
+import LinkComponent from "./LinkComponent";
 
 export default function FastboardCard({
   id,
@@ -123,6 +127,20 @@ export default function FastboardCard({
             item={item}
           />
         );
+      case CardComponentType.Link:
+        return (
+          <LinkComponent
+            properties={component as LinkComponentProperties}
+            item={item}
+          />
+        );
+      case CardComponentType.Video:
+        return (
+          <VideoComponent
+            properties={component as VideoComponentProperties}
+            item={item}
+          />
+        );
       default:
         return <p>Component not found</p>;
     }
diff --git a/src/components/editor/fastboard-components/card/LinkComponent.tsx b/src/components/editor/fastboard-components/card/LinkComponent.tsx
new file mode 100644
index 00000000..9c14378f
--- /dev/null
+++ b/src/components/editor/fastboard-components/card/LinkComponent.tsx
@@ -0,0 +1,76 @@
+import { Alignment } from "@/components/shared/AlignmentProperty";
+import { Icon } from "@/components/shared/IconPicker";
+import { LinkComponentProperties } from "@/types/editor/card-types";
+import { Link } from "@nextui-org/react";
+import { useTheme } from "next-themes";
+
+export default function LinkComponent({
+  properties,
+  item,
+}: {
+  properties: LinkComponentProperties;
+  item: any;
+}) {
+  const { theme } = useTheme();
+  const {
+    dataKey,
+    alignment,
+    label,
+    defaultText,
+    isExternal,
+    externalIcon,
+    showExternalIcon,
+    fontSize,
+    textColor,
+    labelColor,
+  } = properties;
+
+  function addPrefix(url: string) {
+    if (!url.startsWith("http://") && !url.startsWith("https://")) {
+      return `https://${url}`;
+    }
+    return url;
+  }
+
+  return (
+    <div
+      className={
+        "flex flex-row items-center gap-x-1 truncate " +
+        (alignment === Alignment.Center
+          ? "justify-center"
+          : alignment === Alignment.Right
+          ? "justify-end"
+          : "justify-start")
+      }
+      style={{
+        fontSize: `${fontSize}px`,
+      }}
+    >
+      <h1
+        style={{
+          color: theme === "dark" ? labelColor?.dark : labelColor?.light,
+        }}
+      >
+        {label}
+      </h1>
+      <Link
+        href={dataKey !== "" ? addPrefix(item[dataKey]) : defaultText}
+        isExternal={isExternal}
+        showAnchorIcon={showExternalIcon}
+        anchorIcon={
+          isExternal ? (
+            <Icon icon={externalIcon} />
+          ) : (
+            <Icon icon={externalIcon} />
+          )
+        }
+        style={{
+          color: theme === "dark" ? textColor.dark : textColor.light,
+          fontSize: `${fontSize}px`,
+        }}
+      >
+        {dataKey !== "" ? item[dataKey] : defaultText}
+      </Link>
+    </div>
+  );
+}
diff --git a/src/components/editor/fastboard-components/card/TextComponent.tsx b/src/components/editor/fastboard-components/card/TextComponent.tsx
index ddf6d50f..a884da18 100644
--- a/src/components/editor/fastboard-components/card/TextComponent.tsx
+++ b/src/components/editor/fastboard-components/card/TextComponent.tsx
@@ -19,21 +19,21 @@ export default function TextComponent({
     fontSize,
     fontTypes,
     textColor,
+    labelColor,
   } = properties;
 
   return (
-    <h1
+    <div
       className={
-        "truncate " +
+        "flex flex-row items-center gap-x-1 truncate " +
         (alignment === Alignment.Center
-          ? "text-center"
+          ? "justify-center"
           : alignment === Alignment.Right
-          ? "text-right"
-          : "text-left") +
+          ? "justify-end"
+          : "justify-start") +
         (fontTypes.includes(FontType.Bold) ? " font-bold" : "")
       }
       style={{
-        color: theme === "dark" ? textColor.dark : textColor.light,
         fontSize: `${fontSize}px`,
         fontStyle: fontTypes.includes(FontType.Italic) ? "italic" : "normal",
         textDecorationLine: fontTypes.includes(FontType.Underline)
@@ -41,8 +41,20 @@ export default function TextComponent({
           : "none",
       }}
     >
-      {label}
-      {dataKey !== "" ? item[dataKey] : defaultText}
-    </h1>
+      <h1
+        style={{
+          color: theme === "dark" ? labelColor?.dark : labelColor?.light,
+        }}
+      >
+        {label}
+      </h1>
+      <h1
+        style={{
+          color: theme === "dark" ? textColor.dark : textColor.light,
+        }}
+      >
+        {dataKey !== "" ? item[dataKey] : defaultText}
+      </h1>
+    </div>
   );
 }
diff --git a/src/components/editor/fastboard-components/card/VideoComponent.tsx b/src/components/editor/fastboard-components/card/VideoComponent.tsx
new file mode 100644
index 00000000..5f8d10f2
--- /dev/null
+++ b/src/components/editor/fastboard-components/card/VideoComponent.tsx
@@ -0,0 +1,37 @@
+import { VideoComponentProperties } from "@/types/editor/card-types";
+import React from "react";
+import ReactPlayer from "react-player/lazy";
+
+export default function VideoComponent({
+  properties,
+  item,
+}: {
+  properties: VideoComponentProperties;
+  item: any;
+}) {
+  const { dataKey } = properties;
+
+  return (
+    <div className="border h-full max-h-96">
+      <ReactPlayer
+        className="react-player"
+        url={
+          dataKey && item[dataKey] !== ""
+            ? item[dataKey]
+            : "https://youtu.be/dQw4w9WgXcQ"
+        }
+        width="100%"
+        height="100%"
+        controls={true}
+        config={{
+          youtube: {
+            playerVars: { showinfo: 1, controls: 1 },
+          },
+        }}
+        onError={(e) => {
+          console.error(e.target.error);
+        }}
+      />
+    </div>
+  );
+}
diff --git a/src/components/editor/fastboard-components/card/properties/CardComponentIcon.tsx b/src/components/editor/fastboard-components/card/properties/CardComponentIcon.tsx
new file mode 100644
index 00000000..8ac9934a
--- /dev/null
+++ b/src/components/editor/fastboard-components/card/properties/CardComponentIcon.tsx
@@ -0,0 +1,27 @@
+import { CardComponentType } from "@/types/editor/card-types";
+import { IconProps, Image, Link, Text, VideoSquare } from "iconsax-react";
+
+export default function CardComponentIcon({
+  type,
+  size,
+  variant,
+  className,
+}: {
+  type: CardComponentType;
+  size: number;
+  variant?: IconProps["variant"];
+  className?: string;
+}) {
+  switch (type) {
+    case CardComponentType.Text:
+      return <Text size={size} className={className} />;
+    case CardComponentType.Image:
+      return <Image size={size} className={className} />;
+    case CardComponentType.Link:
+      return <Link size={size} className={className} />;
+    case CardComponentType.Video:
+      return <VideoSquare size={size} className={className} />;
+    default:
+      return null;
+  }
+}
diff --git a/src/components/editor/fastboard-components/card/properties/CardComponentsList.tsx b/src/components/editor/fastboard-components/card/properties/CardComponentsList.tsx
index c69a34b2..7fc5e416 100644
--- a/src/components/editor/fastboard-components/card/properties/CardComponentsList.tsx
+++ b/src/components/editor/fastboard-components/card/properties/CardComponentsList.tsx
@@ -13,6 +13,7 @@ import {
   CardComponentType,
   DefaultCardComponentProperties,
 } from "@/types/editor/card-types";
+import CardComponentIcon from "./CardComponentIcon";
 
 export default function CardComponentsList({
   components,
@@ -42,6 +43,7 @@ export default function CardComponentsList({
                     DefaultCardComponentProperties.of(type),
                   ]);
                 }}
+                startContent={<CardComponentIcon type={type} size={15} />}
               >
                 {type}
               </DropdownItem>
@@ -55,6 +57,7 @@ export default function CardComponentsList({
           <Option
             key={index}
             label={component.type}
+            startIcon={<CardComponentIcon type={component.type} size={12} />}
             onPress={() => {
               onSelectComponent?.(component);
             }}
diff --git a/src/components/editor/fastboard-components/card/properties/CardLinkComponentProperties.tsx b/src/components/editor/fastboard-components/card/properties/CardLinkComponentProperties.tsx
new file mode 100644
index 00000000..5eb5dba1
--- /dev/null
+++ b/src/components/editor/fastboard-components/card/properties/CardLinkComponentProperties.tsx
@@ -0,0 +1,163 @@
+import AlignmentProperty from "@/components/shared/AlignmentProperty";
+import ColorPicker from "@/components/shared/ColorPicker";
+import IconPicker from "@/components/shared/IconPicker";
+import { LinkComponentProperties } from "@/types/editor/card-types";
+import { Checkbox, Input, Select, SelectItem } from "@nextui-org/react";
+import { useTheme } from "next-themes";
+
+export default function CardLinkComponentProperties({
+  properties,
+  dataKeys,
+  onValueChange,
+}: {
+  properties: LinkComponentProperties;
+  dataKeys: string[];
+  onValueChange: (properties: LinkComponentProperties) => void;
+}) {
+  const { theme } = useTheme();
+  const {
+    dataKey,
+    label,
+    defaultText,
+    isExternal,
+    externalIcon,
+    showExternalIcon,
+    alignment,
+    fontSize,
+    textColor,
+    labelColor,
+  } = properties;
+
+  return (
+    <div className="flex flex-col gap-y-2">
+      <Select
+        aria-label="Data key selection"
+        label="Data key"
+        labelPlacement="outside"
+        placeholder="Select a data key"
+        disallowEmptySelection
+        selectedKeys={[dataKey]}
+        onChange={(e) => {
+          const key = e.target.value;
+          onValueChange({ ...properties, dataKey: key });
+        }}
+      >
+        {dataKeys?.map((key) => (
+          <SelectItem key={key} value={key}>
+            {key}
+          </SelectItem>
+        ))}
+      </Select>
+      <Input
+        label="Label"
+        labelPlacement="outside"
+        placeholder="Enter label"
+        value={label}
+        onValueChange={(value) => {
+          onValueChange({ ...properties, label: value });
+        }}
+      />
+      <Input
+        label="Default text"
+        labelPlacement="outside"
+        placeholder="Enter some text"
+        value={defaultText}
+        onValueChange={(value) => {
+          onValueChange({ ...properties, defaultText: value });
+        }}
+      />
+      <div className="flex flex-row justify-between items-center">
+        <h1 className="text-sm">Text size</h1>
+        <Input
+          aria-label="Text size input"
+          className="w-1/3"
+          type="number"
+          placeholder="Enter some text"
+          value={String(fontSize)}
+          onValueChange={(value) => {
+            onValueChange({ ...properties, fontSize: Number(value) });
+          }}
+        />
+      </div>
+
+      <AlignmentProperty
+        position={alignment}
+        onPositionChange={(position) =>
+          onValueChange({ ...properties, alignment: position })
+        }
+      />
+
+      <div className="flex flex-row justify-between items-center">
+        <span className="text-sm">Is external</span>
+        <Checkbox
+          isSelected={isExternal}
+          onValueChange={(value) => {
+            onValueChange({
+              ...properties,
+              isExternal: value,
+            });
+          }}
+        />
+      </div>
+      <div className="flex flex-row justify-between items-center">
+        <span className="text-sm">Show anchow icon</span>
+        <Checkbox
+          isSelected={showExternalIcon}
+          onValueChange={(value) => {
+            onValueChange({
+              ...properties,
+              showExternalIcon: value,
+            });
+          }}
+        />
+      </div>
+      <div className="flex flex-row justify-between items-center">
+        <span className="text-sm">Anchor icon</span>
+        <IconPicker
+          icon={externalIcon}
+          onIconSelect={(icon) => {
+            onValueChange({
+              ...properties,
+              externalIcon: icon,
+            });
+          }}
+        />
+      </div>
+
+      <ColorPicker
+        label="Text color"
+        initialColor={theme === "dark" ? textColor.dark : textColor.light}
+        onColorChange={(color) => {
+          if (theme === "dark") {
+            onValueChange({
+              ...properties,
+              textColor: { dark: color, light: textColor.light },
+            });
+          } else {
+            onValueChange({
+              ...properties,
+              textColor: { dark: textColor.dark, light: color },
+            });
+          }
+        }}
+      />
+      <ColorPicker
+        label="Label color"
+        initialColor={theme === "dark" ? labelColor.dark : labelColor.light}
+        onColorChange={(color) => {
+          if (theme === "dark") {
+            onValueChange({
+              ...properties,
+              labelColor: { dark: color, light: labelColor.light },
+            });
+          } else {
+            onValueChange({
+              ...properties,
+              labelColor: { dark: labelColor.dark, light: color },
+            });
+          }
+        }}
+      />
+    </div>
+  );
+}
diff --git a/src/components/editor/fastboard-components/card/properties/CardTextComponentProperties.tsx b/src/components/editor/fastboard-components/card/properties/CardTextComponentProperties.tsx
index de7b4f26..66796913 100644
--- a/src/components/editor/fastboard-components/card/properties/CardTextComponentProperties.tsx
+++ b/src/components/editor/fastboard-components/card/properties/CardTextComponentProperties.tsx
@@ -23,6 +23,7 @@ export default function CardTextComponentProperties({
     fontSize,
     fontTypes,
     textColor,
+    labelColor,
   } = properties;
 
   return (
@@ -106,6 +107,23 @@ export default function CardTextComponentProperties({
           }
         }}
       />
+      <ColorPicker
+        label="Label color"
+        initialColor={theme === "dark" ? labelColor.dark : labelColor.light}
+        onColorChange={(color) => {
+          if (theme === "dark") {
+            onValueChange({
+              ...properties,
+              labelColor: { dark: color, light: labelColor.light },
+            });
+          } else {
+            onValueChange({
+              ...properties,
+              labelColor: { dark: labelColor.dark, light: color },
+            });
+          }
+        }}
+      />
     </div>
   );
 }
diff --git a/src/components/editor/fastboard-components/card/properties/CardVideoComponentProperties.tsx b/src/components/editor/fastboard-components/card/properties/CardVideoComponentProperties.tsx
new file mode 100644
index 00000000..a242ddf0
--- /dev/null
+++ b/src/components/editor/fastboard-components/card/properties/CardVideoComponentProperties.tsx
@@ -0,0 +1,37 @@
+import { VideoComponentProperties } from "@/types/editor/card-types";
+import { Select, SelectItem } from "@nextui-org/react";
+
+export default function CardVideoComponentProperties({
+  properties,
+  dataKeys,
+  onValueChange,
+}: {
+  properties: VideoComponentProperties;
+  dataKeys: string[];
+  onValueChange: (properties: VideoComponentProperties) => void;
+}) {
+  const { dataKey } = properties;
+
+  return (
+    <div className="flex flex-col gap-y-2">
+      <Select
+        aria-label="Data key selection"
+        label="Data key"
+        labelPlacement="outside"
+        placeholder="Select a data key"
+        disallowEmptySelection
+        selectedKeys={[dataKey]}
+        onChange={(e) => {
+          const key = e.target.value;
+          onValueChange({ ...properties, dataKey: key });
+        }}
+      >
+        {dataKeys?.map((key) => (
+          <SelectItem key={key} value={key}>
+            {key}
+          </SelectItem>
+        ))}
+      </Select>
+    </div>
+  );
+}
diff --git a/src/components/editor/fastboard-components/card/properties/FastboardCardProperties.tsx b/src/components/editor/fastboard-components/card/properties/FastboardCardProperties.tsx
index 2840b8a8..b926a821 100644
--- a/src/components/editor/fastboard-components/card/properties/FastboardCardProperties.tsx
+++ b/src/components/editor/fastboard-components/card/properties/FastboardCardProperties.tsx
@@ -4,7 +4,9 @@ import {
   CardComponentType,
   CardProperties,
   ImageComponentProperties,
+  LinkComponentProperties,
   TextComponentProperties,
+  VideoComponentProperties,
 } from "@/types/editor/card-types";
 import {
   Accordion,
@@ -25,6 +27,8 @@ import CardTextComponentProperties from "./CardTextComponentProperties";
 import { useRecoilValue } from "recoil";
 import { propertiesDrawerState } from "@/atoms/editor";
 import CardImageComponentProperties from "./CardImageComponentProperties";
+import CardVideoComponentProperties from "./CardVideoComponentProperties";
+import CardLinkComponentProperties from "./CardLinkComponentProperties";
 
 export default function FastboardCardProperties({
   properties,
@@ -225,6 +229,31 @@ export default function FastboardCardProperties({
             }}
           />
         )}
+      {componentSelectedIndex !== null &&
+        components[componentSelectedIndex]?.type === CardComponentType.Link && (
+          <CardLinkComponentProperties
+            properties={
+              components[componentSelectedIndex] as LinkComponentProperties
+            }
+            dataKeys={dataKeys}
+            onValueChange={(component) => {
+              onComponentChange(component);
+            }}
+          />
+        )}
+      {componentSelectedIndex !== null &&
+        components[componentSelectedIndex]?.type ===
+          CardComponentType.Video && (
+          <CardVideoComponentProperties
+            properties={
+              components[componentSelectedIndex] as VideoComponentProperties
+            }
+            dataKeys={dataKeys}
+            onValueChange={(component) => {
+              onComponentChange(component);
+            }}
+          />
+        )}
     </div>
   );
 }
diff --git a/src/components/shared/IconPicker.tsx b/src/components/shared/IconPicker.tsx
index 1d539d1f..5f9ac779 100644
--- a/src/components/shared/IconPicker.tsx
+++ b/src/components/shared/IconPicker.tsx
@@ -51,11 +51,11 @@ import {
   Heart,
   Hierarchy,
   Home,
+  Link,
   Folder,
   Trash,
   User,
 } from "iconsax-react";
-import { IoIosClose } from "react-icons/io";
 
 export function Icon({
   icon,
@@ -113,6 +113,7 @@ export function Icon({
     [IconType.Heart]: <Heart size={size} />,
     [IconType.Hierarchy]: <Hierarchy size={size} />,
     [IconType.Home]: <Home size={size} />,
+    [IconType.Link]: <Link size={size} />,
     [IconType.Folder]: <Folder size={size} />,
     [IconType.Trash]: <Trash size={size} />,
     [IconType.User]: <User size={size} />,
diff --git a/src/types/editor/card-types.ts b/src/types/editor/card-types.ts
index 934b1463..74bac3ec 100644
--- a/src/types/editor/card-types.ts
+++ b/src/types/editor/card-types.ts
@@ -3,10 +3,13 @@ import { RestQueryData } from "../connections";
 import { Color } from "./style-types";
 import { FontType } from "@/components/shared/FontTypeProperty";
 import { ImageBorder } from "@/components/shared/ImageBorderProperty";
+import { IconType } from "./icon-types";
 
 export enum CardComponentType {
   Text = "Text",
   Image = "Image",
+  Link = "Link",
+  Video = "Video",
 }
 
 interface BaseCardComponentProperties {
@@ -21,6 +24,7 @@ export interface TextComponentProperties extends BaseCardComponentProperties {
   fontSize: number;
   fontTypes: FontType[];
   textColor: Color;
+  labelColor: Color;
 }
 
 export interface ImageComponentProperties extends BaseCardComponentProperties {
@@ -28,9 +32,25 @@ export interface ImageComponentProperties extends BaseCardComponentProperties {
   border: ImageBorder;
 }
 
+export interface LinkComponentProperties extends BaseCardComponentProperties {
+  label: string;
+  defaultText: string;
+  isExternal: boolean;
+  externalIcon: IconType;
+  showExternalIcon: boolean;
+  alignment: Alignment;
+  fontSize: number;
+  textColor: Color;
+  labelColor: Color;
+}
+
+export interface VideoComponentProperties extends BaseCardComponentProperties {}
+
 export type CardComponentProperties =
   | TextComponentProperties
-  | ImageComponentProperties;
+  | ImageComponentProperties
+  | LinkComponentProperties
+  | VideoComponentProperties;
 
 export class DefaultCardComponentProperties {
   static of(type: CardComponentType): CardComponentProperties {
@@ -48,6 +68,7 @@ export class DefaultCardComponentProperties {
           fontSize: 18,
           fontTypes: [],
           textColor: new Color("#000000", "#ffffff"),
+          labelColor: new Color("#000000", "#ffffff"),
         };
       case CardComponentType.Image:
         return {
@@ -55,6 +76,23 @@ export class DefaultCardComponentProperties {
           alignment: Alignment.Left,
           border: ImageBorder.Round,
         };
+      case CardComponentType.Link:
+        return {
+          ...baseProperties,
+          label: "",
+          defaultText: "https://fastboard-xgski.ondigitalocean.app/",
+          isExternal: true,
+          externalIcon: IconType.Link,
+          showExternalIcon: false,
+          alignment: Alignment.Left,
+          fontSize: 18,
+          textColor: Color.primary(),
+          labelColor: new Color("#000000", "#ffffff"),
+        };
+      case CardComponentType.Video:
+        return {
+          ...baseProperties,
+        };
       default:
         return {
           ...baseProperties,
diff --git a/src/types/editor/icon-types.ts b/src/types/editor/icon-types.ts
index c2af5401..98955bf2 100644
--- a/src/types/editor/icon-types.ts
+++ b/src/types/editor/icon-types.ts
@@ -44,6 +44,7 @@ export enum IconType {
   Heart = "Heart",
   Hierarchy = "Hierarchy",
   Home = "Home",
+  Link = "Link",
   Folder = "Folder",
   Trash = "Trash",
   User = "User",

From ba0a0adf596ecbb403397a41c2e39ad5a62838d3 Mon Sep 17 00:00:00 2001
From: Chiki <66981070+JulianBiancardi@users.noreply.github.com>
Date: Fri, 20 Sep 2024 15:46:16 -0300
Subject: [PATCH 05/12] update: fix styles

---
 .../card/FastboardCard.tsx                    | 29 +++++++++----------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/components/editor/fastboard-components/card/FastboardCard.tsx b/src/components/editor/fastboard-components/card/FastboardCard.tsx
index b4941e16..ec52229a 100644
--- a/src/components/editor/fastboard-components/card/FastboardCard.tsx
+++ b/src/components/editor/fastboard-components/card/FastboardCard.tsx
@@ -8,7 +8,7 @@ import {
   TextComponentProperties,
   VideoComponentProperties,
 } from "@/types/editor/card-types";
-import { Card, CardBody, CardHeader, Spinner } from "@nextui-org/react";
+import { Spinner } from "@nextui-org/react";
 import scrollbarStyles from "@/styles/scrollbar.module.css";
 import useData from "@/hooks/useData";
 import { toast } from "sonner";
@@ -61,7 +61,6 @@ export default function FastboardCard({
   const setPropertiesState = useSetRecoilState(propertiesDrawerState);
 
   useEffect(() => {
-    console.log("keys updated", keys);
     updateComponentProperties(id, {
       ...properties,
       dataKeys: keys,
@@ -147,19 +146,19 @@ export default function FastboardCard({
   }
 
   return isValidData(data) ? (
-    <Card className={`grow-0 h-full ${!showShadow ? "shadow-none" : ""}`}>
-      <CardHeader></CardHeader>
-      <CardBody
-        className={"flex flex-col gap-y-2 " + scrollbarStyles.scrollbar}
-      >
-        {components.length === 0 && (
-          <h2 className="flex w-full h-full justify-center items-center">
-            Add components
-          </h2>
-        )}
-        {components.map((component) => renderComponent(component, data))}
-      </CardBody>
-    </Card>
+    <div
+      className={
+        "grow-0 h-full p-5 rounded-xl shadow-xl border dark:border-content2 overflow-auto " +
+        scrollbarStyles.scrollbar
+      }
+    >
+      {components.length === 0 && (
+        <h2 className="flex w-full h-full justify-center items-center">
+          Add components
+        </h2>
+      )}
+      {components.map((component) => renderComponent(component, data))}
+    </div>
   ) : (
     <p className="flex justify-center items-center w-full h-full text-warning">
       Seems like the data is not an object or is empty.

From 9b8f47cacda311956c3ef97d416f462887037ff5 Mon Sep 17 00:00:00 2001
From: Chiki <66981070+JulianBiancardi@users.noreply.github.com>
Date: Fri, 20 Sep 2024 15:59:30 -0300
Subject: [PATCH 06/12] fix: styles and responsive

---
 .../card/FastboardCard.tsx                    |  6 +++--
 .../card/ImageComponent.tsx                   |  2 +-
 src/components/shared/Viewport.tsx            | 24 ++++++++++---------
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/components/editor/fastboard-components/card/FastboardCard.tsx b/src/components/editor/fastboard-components/card/FastboardCard.tsx
index ec52229a..4abe1670 100644
--- a/src/components/editor/fastboard-components/card/FastboardCard.tsx
+++ b/src/components/editor/fastboard-components/card/FastboardCard.tsx
@@ -148,7 +148,7 @@ export default function FastboardCard({
   return isValidData(data) ? (
     <div
       className={
-        "grow-0 h-full p-5 rounded-xl shadow-xl border dark:border-content2 overflow-auto " +
+        "flex grow-0 h-full w-full p-5 rounded-xl shadow-xl border dark:border-content2 overflow-auto " +
         scrollbarStyles.scrollbar
       }
     >
@@ -157,7 +157,9 @@ export default function FastboardCard({
           Add components
         </h2>
       )}
-      {components.map((component) => renderComponent(component, data))}
+      <div className="h-full w-full">
+        {components.map((component) => renderComponent(component, data))}
+      </div>
     </div>
   ) : (
     <p className="flex justify-center items-center w-full h-full text-warning">
diff --git a/src/components/editor/fastboard-components/card/ImageComponent.tsx b/src/components/editor/fastboard-components/card/ImageComponent.tsx
index f494d894..adae2a43 100644
--- a/src/components/editor/fastboard-components/card/ImageComponent.tsx
+++ b/src/components/editor/fastboard-components/card/ImageComponent.tsx
@@ -32,7 +32,7 @@ export default function ImageComponent({
         src={imageError ? "../ImageErrorImage.svg" : item[dataKey]}
         alt="Card image"
         width={"200px"}
-        height={"200px"}
+        height={"100%"}
         radius={border as any}
         onError={() => setImageError(true)}
       />
diff --git a/src/components/shared/Viewport.tsx b/src/components/shared/Viewport.tsx
index e33e69e1..5ca415ea 100644
--- a/src/components/shared/Viewport.tsx
+++ b/src/components/shared/Viewport.tsx
@@ -107,17 +107,19 @@ export default function Viewport({
           style={{ width: layoutsWidth }}
         >
           {selectedPage && selectedPage.returnPage && (
-            <Button
-              isIconOnly
-              variant="light"
-              className="mx-2 mt-1"
-              onPress={() => {
-                if (!selectedPage.returnPage) return;
-                changePage(selectedPage.returnPage);
-              }}
-            >
-              <Back />
-            </Button>
+            <div className="flex items-center h-12 mx-2 mt-1">
+              <Button
+                isIconOnly
+                variant="light"
+                className=""
+                onPress={() => {
+                  if (!selectedPage.returnPage) return;
+                  changePage(selectedPage.returnPage);
+                }}
+              >
+                <Back />
+              </Button>
+            </div>
           )}
           {selectedPage &&
             selectedPage.layouts.map((layout, index) =>

From 0bd0f110430a8e9f0ead2a20dded00306439b2c1 Mon Sep 17 00:00:00 2001
From: Chiki <66981070+JulianBiancardi@users.noreply.github.com>
Date: Sat, 21 Sep 2024 14:00:16 -0300
Subject: [PATCH 07/12] fix: image src path

---
 .../card/ImageComponent.tsx                   |  9 +-
 .../card/VideoComponent.tsx                   |  2 +-
 .../card/properties/CardComponent.tsx         | 98 +++++++++++++++++++
 .../properties/FastboardCardProperties.tsx    | 58 ++---------
 .../header/FastboardHeader.tsx                |  2 +-
 5 files changed, 116 insertions(+), 53 deletions(-)
 create mode 100644 src/components/editor/fastboard-components/card/properties/CardComponent.tsx

diff --git a/src/components/editor/fastboard-components/card/ImageComponent.tsx b/src/components/editor/fastboard-components/card/ImageComponent.tsx
index adae2a43..c9a0a00d 100644
--- a/src/components/editor/fastboard-components/card/ImageComponent.tsx
+++ b/src/components/editor/fastboard-components/card/ImageComponent.tsx
@@ -29,7 +29,14 @@ export default function ImageComponent({
       }
     >
       <Image
-        src={imageError ? "../ImageErrorImage.svg" : item[dataKey]}
+        src={
+          imageError
+            ? "/ImageErrorImage.svg"
+            : dataKey !== ""
+            ? item[dataKey]
+            : "/ImageErrorImage.svg"
+        }
+        className={"object-contain " + (imageError ? "dark:invert " : "")}
         alt="Card image"
         width={"200px"}
         height={"100%"}
diff --git a/src/components/editor/fastboard-components/card/VideoComponent.tsx b/src/components/editor/fastboard-components/card/VideoComponent.tsx
index 5f8d10f2..afb62a7a 100644
--- a/src/components/editor/fastboard-components/card/VideoComponent.tsx
+++ b/src/components/editor/fastboard-components/card/VideoComponent.tsx
@@ -12,7 +12,7 @@ export default function VideoComponent({
   const { dataKey } = properties;
 
   return (
-    <div className="border h-full max-h-96">
+    <div className="border border-content2 h-full">
       <ReactPlayer
         className="react-player"
         url={
diff --git a/src/components/editor/fastboard-components/card/properties/CardComponent.tsx b/src/components/editor/fastboard-components/card/properties/CardComponent.tsx
new file mode 100644
index 00000000..3f5a2747
--- /dev/null
+++ b/src/components/editor/fastboard-components/card/properties/CardComponent.tsx
@@ -0,0 +1,98 @@
+import {
+  CardComponentProperties,
+  CardComponentType,
+  DefaultCardComponentProperties,
+  ImageComponentProperties,
+  LinkComponentProperties,
+  TextComponentProperties,
+  VideoComponentProperties,
+} from "@/types/editor/card-types";
+import CardTextComponentProperties from "./CardTextComponentProperties";
+import { Select, SelectItem } from "@nextui-org/react";
+import CardComponentIcon from "./CardComponentIcon";
+import CardImageComponentProperties from "./CardImageComponentProperties";
+import CardLinkComponentProperties from "./CardLinkComponentProperties";
+import CardVideoComponentProperties from "./CardVideoComponentProperties";
+
+export default function CardComponent({
+  component,
+  dataKeys,
+  onComponentChange,
+}: {
+  component: CardComponentProperties;
+  dataKeys: string[];
+  onComponentChange: (componentProperties: CardComponentProperties) => void;
+}) {
+  const { type } = component;
+
+  function changeComponentType(
+    type: CardComponentType
+  ): CardComponentProperties {
+    const newProperties = DefaultCardComponentProperties.of(type);
+    return {
+      ...newProperties,
+    };
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Select
+        label="Component type"
+        labelPlacement="outside"
+        selectedKeys={[type]}
+        startContent={<CardComponentIcon type={type} size={15} />}
+        onChange={(e) => {
+          onComponentChange(
+            changeComponentType(e.target.value as CardComponentType)
+          );
+        }}
+      >
+        {Object.values(CardComponentType).map((type) => (
+          <SelectItem
+            key={type}
+            startContent={<CardComponentIcon type={type} size={15} />}
+          >
+            {type}
+          </SelectItem>
+        ))}
+      </Select>
+
+      {type === CardComponentType.Text && (
+        <CardTextComponentProperties
+          properties={component as TextComponentProperties}
+          dataKeys={dataKeys}
+          onValueChange={(component) => {
+            onComponentChange(component);
+          }}
+        />
+      )}
+      {type === CardComponentType.Image && (
+        <CardImageComponentProperties
+          properties={component as ImageComponentProperties}
+          dataKeys={dataKeys}
+          onValueChange={(component) => {
+            onComponentChange(component);
+          }}
+        />
+      )}
+      {type === CardComponentType.Link && (
+        <CardLinkComponentProperties
+          properties={component as LinkComponentProperties}
+          dataKeys={dataKeys}
+          onValueChange={(component) => {
+            onComponentChange(component);
+          }}
+        />
+      )}
+      {type === CardComponentType.Video && (
+        <CardVideoComponentProperties
+          properties={component as VideoComponentProperties}
+          dataKeys={dataKeys}
+          onValueChange={(component) => {
+            onComponentChange(component);
+          }}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/components/editor/fastboard-components/card/properties/FastboardCardProperties.tsx b/src/components/editor/fastboard-components/card/properties/FastboardCardProperties.tsx
index b926a821..63e085b8 100644
--- a/src/components/editor/fastboard-components/card/properties/FastboardCardProperties.tsx
+++ b/src/components/editor/fastboard-components/card/properties/FastboardCardProperties.tsx
@@ -29,6 +29,7 @@ import { propertiesDrawerState } from "@/atoms/editor";
 import CardImageComponentProperties from "./CardImageComponentProperties";
 import CardVideoComponentProperties from "./CardVideoComponentProperties";
 import CardLinkComponentProperties from "./CardLinkComponentProperties";
+import CardComponent from "./CardComponent";
 
 export default function FastboardCardProperties({
   properties,
@@ -204,56 +205,13 @@ export default function FastboardCardProperties({
         </Accordion>
       )}
 
-      {componentSelectedIndex !== null &&
-        components[componentSelectedIndex]?.type === CardComponentType.Text && (
-          <CardTextComponentProperties
-            properties={
-              components[componentSelectedIndex] as TextComponentProperties
-            }
-            dataKeys={dataKeys}
-            onValueChange={(component) => {
-              onComponentChange(component);
-            }}
-          />
-        )}
-      {componentSelectedIndex !== null &&
-        components[componentSelectedIndex]?.type ===
-          CardComponentType.Image && (
-          <CardImageComponentProperties
-            properties={
-              components[componentSelectedIndex] as ImageComponentProperties
-            }
-            dataKeys={dataKeys}
-            onValueChange={(component) => {
-              onComponentChange(component);
-            }}
-          />
-        )}
-      {componentSelectedIndex !== null &&
-        components[componentSelectedIndex]?.type === CardComponentType.Link && (
-          <CardLinkComponentProperties
-            properties={
-              components[componentSelectedIndex] as LinkComponentProperties
-            }
-            dataKeys={dataKeys}
-            onValueChange={(component) => {
-              onComponentChange(component);
-            }}
-          />
-        )}
-      {componentSelectedIndex !== null &&
-        components[componentSelectedIndex]?.type ===
-          CardComponentType.Video && (
-          <CardVideoComponentProperties
-            properties={
-              components[componentSelectedIndex] as VideoComponentProperties
-            }
-            dataKeys={dataKeys}
-            onValueChange={(component) => {
-              onComponentChange(component);
-            }}
-          />
-        )}
+      {componentSelectedIndex !== null && (
+        <CardComponent
+          component={components[componentSelectedIndex]}
+          dataKeys={dataKeys}
+          onComponentChange={onComponentChange}
+        />
+      )}
     </div>
   );
 }
diff --git a/src/components/editor/fastboard-components/header/FastboardHeader.tsx b/src/components/editor/fastboard-components/header/FastboardHeader.tsx
index 997cf552..b460d57e 100644
--- a/src/components/editor/fastboard-components/header/FastboardHeader.tsx
+++ b/src/components/editor/fastboard-components/header/FastboardHeader.tsx
@@ -56,7 +56,7 @@ export default function FastboardHeader({
             }`}
           >
             <Image
-              src={imageError ? "../ImageErrorImage.svg" : photo.url}
+              src={imageError ? "/ImageErrorImage.svg" : photo.url}
               alt="Header"
               radius={photo.border as any}
               height={photo.size}

From 724a1aad9624f8550b51f6a14d195ab7ed88f69e Mon Sep 17 00:00:00 2001
From: Chiki <66981070+JulianBiancardi@users.noreply.github.com>
Date: Sat, 21 Sep 2024 14:55:42 -0300
Subject: [PATCH 08/12] fix: styles and delete page view when deleting table

---
 .../table/properties/TableActionsList.tsx     |  5 ++-
 src/components/shared/Viewport.tsx            | 40 +++++++++++++------
 src/lib/editor.utils.ts                       | 17 +++++++-
 3 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/src/components/editor/fastboard-components/table/properties/TableActionsList.tsx b/src/components/editor/fastboard-components/table/properties/TableActionsList.tsx
index 80c66172..346ab67a 100644
--- a/src/components/editor/fastboard-components/table/properties/TableActionsList.tsx
+++ b/src/components/editor/fastboard-components/table/properties/TableActionsList.tsx
@@ -25,7 +25,7 @@ export default function TableActionsList({
   onActionSelect: (action: TableActionProperty) => void;
   onChange?: (actions: TableActionProperty[]) => void;
 }) {
-  const { createModalFrame, deleteModalFrame } = useDashboard();
+  const { createModalFrame, deleteModalFrame, deletePage } = useDashboard();
   const [actions, setActions] = useState(actionsProperties);
 
   useEffect(() => {
@@ -81,6 +81,9 @@ export default function TableActionsList({
     if (actions[index].modalId) {
       deleteModalFrame(actions[index].modalId as string);
     }
+    if (actions[index].pageId) {
+      deletePage(actions[index].pageId);
+    }
     const newActions = actions.filter((action) => action.key !== key);
     setActions(newActions);
     if (onChange) {
diff --git a/src/components/shared/Viewport.tsx b/src/components/shared/Viewport.tsx
index 5ca415ea..ebcca47e 100644
--- a/src/components/shared/Viewport.tsx
+++ b/src/components/shared/Viewport.tsx
@@ -11,6 +11,8 @@ import { AxiosError } from "axios";
 import { notFound } from "next/navigation";
 import { Back } from "iconsax-react";
 
+const RETURN_BUTTON_HEIGHT = 48;
+
 export default function Viewport({
   mode,
 }: {
@@ -103,15 +105,19 @@ export default function Viewport({
           </div>
         )}
         <div
-          className="flex flex-col min-w-96 h-full"
+          className="flex flex-col min-w-[400px] h-full"
           style={{ width: layoutsWidth }}
         >
           {selectedPage && selectedPage.returnPage && (
-            <div className="flex items-center h-12 mx-2 mt-1">
+            <div
+              className="flex items-center mx-2 mt-1"
+              style={{
+                height: `${RETURN_BUTTON_HEIGHT}px`,
+              }}
+            >
               <Button
                 isIconOnly
                 variant="light"
-                className=""
                 onPress={() => {
                   if (!selectedPage.returnPage) return;
                   changePage(selectedPage.returnPage);
@@ -121,15 +127,25 @@ export default function Viewport({
               </Button>
             </div>
           )}
-          {selectedPage &&
-            selectedPage.layouts.map((layout, index) =>
-              getLayout(
-                layout,
-                currentPage,
-                index,
-                mode === "editor" ? "editable" : "view"
-              )
-            )}
+          <div
+            style={{
+              height: `calc(100% - ${
+                selectedPage && selectedPage.returnPage
+                  ? `${RETURN_BUTTON_HEIGHT}px`
+                  : "0px"
+              })`,
+            }}
+          >
+            {selectedPage &&
+              selectedPage.layouts.map((layout, index) =>
+                getLayout(
+                  layout,
+                  currentPage,
+                  index,
+                  mode === "editor" ? "editable" : "view"
+                )
+              )}
+          </div>
         </div>
       </div>
     </AuthVerifier>
diff --git a/src/lib/editor.utils.ts b/src/lib/editor.utils.ts
index f6efd147..89a16b5a 100644
--- a/src/lib/editor.utils.ts
+++ b/src/lib/editor.utils.ts
@@ -63,6 +63,20 @@ function deleteTableModalsFrame(
   return dashboardMetadata;
 }
 
+function deleteTablePageView(
+  component: FastboardComponent,
+  dashboardMetadata: DashboardMetadata
+): DashboardMetadata {
+  const pageId = component.properties?.actions?.find(
+    (action: TableActionProperty) => action.type === "view"
+  )?.pageId;
+
+  if (pageId) {
+    dashboardMetadata = deletePage(pageId, dashboardMetadata);
+  }
+  return dashboardMetadata;
+}
+
 export function deleteComponent(
   id: ComponentId,
   dashboardMetadata: DashboardMetadata
@@ -72,8 +86,9 @@ export function deleteComponent(
     return dashboardMetadata;
   }
   if (component.type === ComponentType.Table) {
-    //If the component is a table, then we need to remove the modal frame that is associated with it
+    //If the component is a table, then we need to remove the modal frame that is associated with it and view pages also
     dashboardMetadata = deleteTableModalsFrame(component, dashboardMetadata);
+    dashboardMetadata = deleteTablePageView(component, dashboardMetadata);
   }
   const { [id]: removedComponent, ...newComponents } =
     dashboardMetadata.components;

From f039da59291c39a3a64feab3d809710725c9bd56 Mon Sep 17 00:00:00 2001
From: Chiki <66981070+JulianBiancardi@users.noreply.github.com>
Date: Sun, 22 Sep 2024 14:15:53 -0300
Subject: [PATCH 09/12] update: add toast warning if no page is created for
 view action

---
 .../editor/fastboard-components/table/FastboardTable.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/editor/fastboard-components/table/FastboardTable.tsx b/src/components/editor/fastboard-components/table/FastboardTable.tsx
index 8ef8c7b7..f9ed1a42 100644
--- a/src/components/editor/fastboard-components/table/FastboardTable.tsx
+++ b/src/components/editor/fastboard-components/table/FastboardTable.tsx
@@ -355,12 +355,17 @@ export default function FastboardTable({
                       executeAction({ action, item });
                       setViewModalOpen(action.query ? true : false);
                     } else if (action.mode === "page") {
+                      if (!action.pageId) {
+                        toast.warning(
+                          "No page found for this action, please add one in action properties"
+                        );
+                        return;
+                      }
                       changePage(
-                        action.pageId ?? "",
+                        action.pageId,
                         traduceQueryStrings(action.queryStrings, item)
                       );
                     }
-                    //openModal(action.modalId ?? "");
                   } else if (action.type === "delete") {
                     setDeleteModalOpen(true);
                   } else if (action.type === "edit") {

From e8ba3ffb6b6a16fa325a15726a1cbba553079ab9 Mon Sep 17 00:00:00 2001
From: Chiki <66981070+JulianBiancardi@users.noreply.github.com>
Date: Sun, 22 Sep 2024 15:04:26 -0300
Subject: [PATCH 10/12] update: card styles

---
 .../card/FastboardCard.tsx                    | 62 ++++++++++++-------
 .../properties/FastboardCardProperties.tsx    | 17 ++---
 .../table/properties/TableActionsList.tsx     |  1 -
 .../table/properties/ViewActionProperties.tsx |  6 +-
 src/types/editor/card-types.ts                |  4 +-
 5 files changed, 48 insertions(+), 42 deletions(-)

diff --git a/src/components/editor/fastboard-components/card/FastboardCard.tsx b/src/components/editor/fastboard-components/card/FastboardCard.tsx
index 4abe1670..090a89ef 100644
--- a/src/components/editor/fastboard-components/card/FastboardCard.tsx
+++ b/src/components/editor/fastboard-components/card/FastboardCard.tsx
@@ -95,18 +95,6 @@ export default function FastboardCard({
     return typeof data[0] === "object";
   }
 
-  if (dataFetching) {
-    return <Spinner className="w-full h-full" />;
-  }
-
-  if (isDataError) {
-    return (
-      <p className="flex justify-center items-center w-full h-full text-danger">
-        Error: {dataError?.message}
-      </p>
-    );
-  }
-
   function renderComponent(component: CardComponentProperties, data: any[]) {
     const item = data[0];
 
@@ -145,25 +133,51 @@ export default function FastboardCard({
     }
   }
 
-  return isValidData(data) ? (
+  return (
     <div
       className={
         "flex grow-0 h-full w-full p-5 rounded-xl shadow-xl border dark:border-content2 overflow-auto " +
         scrollbarStyles.scrollbar
       }
     >
-      {components.length === 0 && (
-        <h2 className="flex w-full h-full justify-center items-center">
-          Add components
-        </h2>
+      {dataFetching && <Spinner className="w-full h-full" />}
+      {isDataError && (
+        <p className="flex justify-center items-center w-full h-full text-danger">
+          {dataError?.message}
+        </p>
+      )}
+
+      {!dataFetching && !isDataError && (
+        <>
+          {!sourceQueryData && (
+            <h2 className="flex w-full h-full justify-center items-center">
+              Nothing to show. There is no query selected
+            </h2>
+          )}
+          {sourceQueryData && isValidData(data) && (
+            <>
+              {components.length === 0 && (
+                <h2 className="flex w-full h-full justify-center items-center">
+                  Add components
+                </h2>
+              )}
+
+              {components.length > 0 && (
+                <div className="h-full w-full">
+                  {components.map((component) =>
+                    renderComponent(component, data)
+                  )}
+                </div>
+              )}
+            </>
+          )}
+          {sourceQueryData && !isValidData(data) && (
+            <p className="flex justify-center items-center w-full h-full text-warning">
+              Seems like the data is not an object or is empty.
+            </p>
+          )}
+        </>
       )}
-      <div className="h-full w-full">
-        {components.map((component) => renderComponent(component, data))}
-      </div>
     </div>
-  ) : (
-    <p className="flex justify-center items-center w-full h-full text-warning">
-      Seems like the data is not an object or is empty.
-    </p>
   );
 }
diff --git a/src/components/editor/fastboard-components/card/properties/FastboardCardProperties.tsx b/src/components/editor/fastboard-components/card/properties/FastboardCardProperties.tsx
index 63e085b8..375f2564 100644
--- a/src/components/editor/fastboard-components/card/properties/FastboardCardProperties.tsx
+++ b/src/components/editor/fastboard-components/card/properties/FastboardCardProperties.tsx
@@ -1,12 +1,7 @@
 import QuerySelection from "@/components/editor/QuerySelection";
 import {
   CardComponentProperties,
-  CardComponentType,
   CardProperties,
-  ImageComponentProperties,
-  LinkComponentProperties,
-  TextComponentProperties,
-  VideoComponentProperties,
 } from "@/types/editor/card-types";
 import {
   Accordion,
@@ -15,21 +10,16 @@ import {
   Breadcrumbs,
   Code,
   Input,
-  Select,
-  SelectItem,
   Spacer,
   Tooltip,
 } from "@nextui-org/react";
 import { RiQuestionLine } from "react-icons/ri";
 import CardComponentsList from "./CardComponentsList";
 import { useEffect, useState } from "react";
-import CardTextComponentProperties from "./CardTextComponentProperties";
 import { useRecoilValue } from "recoil";
 import { propertiesDrawerState } from "@/atoms/editor";
-import CardImageComponentProperties from "./CardImageComponentProperties";
-import CardVideoComponentProperties from "./CardVideoComponentProperties";
-import CardLinkComponentProperties from "./CardLinkComponentProperties";
 import CardComponent from "./CardComponent";
+import { QueryType } from "@/types/connections";
 
 export default function FastboardCardProperties({
   properties,
@@ -97,6 +87,7 @@ export default function FastboardCardProperties({
             }}
           >
             <QuerySelection
+              type={QueryType.GET}
               selectedQueryId={sourceQueryData?.queryId || ""}
               onQuerySelect={(newQuery) => {
                 console.log(newQuery);
@@ -185,12 +176,12 @@ export default function FastboardCardProperties({
               title: "font-medium",
             }}
           >
-            {!sourceQueryData && (
+            {(!sourceQueryData || dataKeys.length === 0) && (
               <div className="flex justify-center text-sm">
                 Select a query to enable components
               </div>
             )}
-            {sourceQueryData && (
+            {sourceQueryData && dataKeys.length > 0 && (
               <CardComponentsList
                 components={components}
                 onSelectComponent={(component) => {
diff --git a/src/components/editor/fastboard-components/table/properties/TableActionsList.tsx b/src/components/editor/fastboard-components/table/properties/TableActionsList.tsx
index 346ab67a..2f58decb 100644
--- a/src/components/editor/fastboard-components/table/properties/TableActionsList.tsx
+++ b/src/components/editor/fastboard-components/table/properties/TableActionsList.tsx
@@ -12,7 +12,6 @@ import { ComponentId, ComponentType } from "@/types/editor";
 import { FormProperties } from "@/types/editor/form";
 import Option from "@/components/shared/Option";
 import useDashboard from "@/hooks/dashboards/useDashboard";
-import { CardProperties } from "@/types/editor/card-types";
 
 export default function TableActionsList({
   tableId,
diff --git a/src/components/editor/fastboard-components/table/properties/ViewActionProperties.tsx b/src/components/editor/fastboard-components/table/properties/ViewActionProperties.tsx
index 55556b02..cf110538 100644
--- a/src/components/editor/fastboard-components/table/properties/ViewActionProperties.tsx
+++ b/src/components/editor/fastboard-components/table/properties/ViewActionProperties.tsx
@@ -11,11 +11,12 @@ import {
 import { RiQuestionLine } from "react-icons/ri";
 import { Column, TableActionProperty } from "@/types/editor/table-types";
 import QuerySelection from "@/components/editor/QuerySelection";
-import { queryToRestQueryData } from "@/lib/rest-queries";
 import useDashboard from "@/hooks/dashboards/useDashboard";
 import { Add } from "iconsax-react";
 import useNavigation from "@/hooks/useNavigation";
 import { IoIosClose } from "react-icons/io";
+import { QueryType } from "@/types/connections";
+import { queryToQueryData } from "@/lib/rest-queries";
 
 export function ViewActionProperties({
   action,
@@ -66,11 +67,12 @@ export function ViewActionProperties({
       >
         <Tab key="modal" title="Modal">
           <QuerySelection
+            type={QueryType.GET}
             selectedQueryId={query?.queryId || ""}
             onQuerySelect={(query) => {
               onChange({
                 ...action,
-                query: queryToRestQueryData(query),
+                query: queryToQueryData(query),
                 parameters: query.metadata.parameters?.map(
                   (p: { name: string; preview: string }) => ({
                     name: p.name,
diff --git a/src/types/editor/card-types.ts b/src/types/editor/card-types.ts
index 74bac3ec..81cdf392 100644
--- a/src/types/editor/card-types.ts
+++ b/src/types/editor/card-types.ts
@@ -1,9 +1,9 @@
 import { Alignment } from "@/components/shared/AlignmentProperty";
-import { RestQueryData } from "../connections";
 import { Color } from "./style-types";
 import { FontType } from "@/components/shared/FontTypeProperty";
 import { ImageBorder } from "@/components/shared/ImageBorderProperty";
 import { IconType } from "./icon-types";
+import { QueryData } from "../connections";
 
 export enum CardComponentType {
   Text = "Text",
@@ -104,7 +104,7 @@ export class DefaultCardComponentProperties {
 }
 
 export class CardProperties {
-  sourceQueryData: RestQueryData | null = null;
+  sourceQueryData: QueryData | null = null;
   queryParameters: Record<string, string> = {};
   components: CardComponentProperties[] = [];
   dataKeys: string[] = [];

From 7603a1db924d4df26708c3a656ffa320982e8c3b Mon Sep 17 00:00:00 2001
From: Chiki <66981070+JulianBiancardi@users.noreply.github.com>
Date: Sun, 22 Sep 2024 22:31:15 -0300
Subject: [PATCH 11/12] update: card style properties

---
 .../card/FastboardCard.tsx                    | 28 ++++++++-
 .../card/SpacerComponent.tsx                  | 25 ++++++++
 .../card/TextComponent.tsx                    | 17 +++---
 .../card/properties/CardComponent.tsx         | 11 ++++
 .../card/properties/CardComponentIcon.tsx     | 11 +++-
 .../CardSpacerComponentProperties.tsx         | 35 ++++++++++++
 .../card/properties/CardStyle.tsx             | 57 +++++++++++++++++++
 .../properties/FastboardCardProperties.tsx    | 11 ++++
 src/types/editor/card-types.ts                | 17 +++++-
 9 files changed, 200 insertions(+), 12 deletions(-)
 create mode 100644 src/components/editor/fastboard-components/card/SpacerComponent.tsx
 create mode 100644 src/components/editor/fastboard-components/card/properties/CardSpacerComponentProperties.tsx
 create mode 100644 src/components/editor/fastboard-components/card/properties/CardStyle.tsx

diff --git a/src/components/editor/fastboard-components/card/FastboardCard.tsx b/src/components/editor/fastboard-components/card/FastboardCard.tsx
index 090a89ef..510a6143 100644
--- a/src/components/editor/fastboard-components/card/FastboardCard.tsx
+++ b/src/components/editor/fastboard-components/card/FastboardCard.tsx
@@ -5,6 +5,7 @@ import {
   CardProperties,
   ImageComponentProperties,
   LinkComponentProperties,
+  SpacerComponentProperties,
   TextComponentProperties,
   VideoComponentProperties,
 } from "@/types/editor/card-types";
@@ -21,6 +22,8 @@ import TextComponent from "./TextComponent";
 import ImageComponent from "./ImageComponent";
 import VideoComponent from "./VideoComponent";
 import LinkComponent from "./LinkComponent";
+import SpacerComponent from "./SpacerComponent";
+import { useTheme } from "next-themes";
 
 export default function FastboardCard({
   id,
@@ -29,8 +32,15 @@ export default function FastboardCard({
   id: ComponentId;
   properties: CardProperties;
 }) {
-  const { sourceQueryData, queryParameters, components, showShadow } =
-    properties;
+  const { theme } = useTheme();
+  const {
+    sourceQueryData,
+    queryParameters,
+    components,
+    spacing,
+    showShadow,
+    backgroundColor,
+  } = properties;
   const { updateComponentProperties } = useDashboard();
   const { getQueryParam } = useNavigation();
   const traducedQueryParameters = useMemo(() => {
@@ -128,6 +138,13 @@ export default function FastboardCard({
             item={item}
           />
         );
+      case CardComponentType.Spacer:
+        return (
+          <SpacerComponent
+            properties={component as SpacerComponentProperties}
+            item={item}
+          />
+        );
       default:
         return <p>Component not found</p>;
     }
@@ -136,9 +153,14 @@ export default function FastboardCard({
   return (
     <div
       className={
-        "flex grow-0 h-full w-full p-5 rounded-xl shadow-xl border dark:border-content2 overflow-auto " +
+        "flex grow-0 h-full w-full p-5 rounded-xl overflow-auto " +
+        (showShadow ? "border dark:border-content2 shadow-xl " : " ") +
         scrollbarStyles.scrollbar
       }
+      style={{
+        backgroundColor:
+          theme === "dark" ? backgroundColor.dark : backgroundColor.light,
+      }}
     >
       {dataFetching && <Spinner className="w-full h-full" />}
       {isDataError && (
diff --git a/src/components/editor/fastboard-components/card/SpacerComponent.tsx b/src/components/editor/fastboard-components/card/SpacerComponent.tsx
new file mode 100644
index 00000000..4eac58fd
--- /dev/null
+++ b/src/components/editor/fastboard-components/card/SpacerComponent.tsx
@@ -0,0 +1,25 @@
+import {
+  SpacerComponentProperties,
+  VideoComponentProperties,
+} from "@/types/editor/card-types";
+import { Spacer } from "@nextui-org/react";
+import React from "react";
+import ReactPlayer from "react-player/lazy";
+
+export default function SpacerComponent({
+  properties,
+  item,
+}: {
+  properties: SpacerComponentProperties;
+  item: any;
+}) {
+  const { height } = properties;
+
+  return (
+    <Spacer
+      style={{
+        margin: `${height}px 0`,
+      }}
+    />
+  );
+}
diff --git a/src/components/editor/fastboard-components/card/TextComponent.tsx b/src/components/editor/fastboard-components/card/TextComponent.tsx
index a884da18..d77cd8aa 100644
--- a/src/components/editor/fastboard-components/card/TextComponent.tsx
+++ b/src/components/editor/fastboard-components/card/TextComponent.tsx
@@ -41,13 +41,16 @@ export default function TextComponent({
           : "none",
       }}
     >
-      <h1
-        style={{
-          color: theme === "dark" ? labelColor?.dark : labelColor?.light,
-        }}
-      >
-        {label}
-      </h1>
+      {label !== "" && (
+        <h1
+          style={{
+            color: theme === "dark" ? labelColor?.dark : labelColor?.light,
+          }}
+        >
+          {label}
+        </h1>
+      )}
+
       <h1
         style={{
           color: theme === "dark" ? textColor.dark : textColor.light,
diff --git a/src/components/editor/fastboard-components/card/properties/CardComponent.tsx b/src/components/editor/fastboard-components/card/properties/CardComponent.tsx
index 3f5a2747..96e62c20 100644
--- a/src/components/editor/fastboard-components/card/properties/CardComponent.tsx
+++ b/src/components/editor/fastboard-components/card/properties/CardComponent.tsx
@@ -4,6 +4,7 @@ import {
   DefaultCardComponentProperties,
   ImageComponentProperties,
   LinkComponentProperties,
+  SpacerComponentProperties,
   TextComponentProperties,
   VideoComponentProperties,
 } from "@/types/editor/card-types";
@@ -13,6 +14,7 @@ import CardComponentIcon from "./CardComponentIcon";
 import CardImageComponentProperties from "./CardImageComponentProperties";
 import CardLinkComponentProperties from "./CardLinkComponentProperties";
 import CardVideoComponentProperties from "./CardVideoComponentProperties";
+import CardSpacerComponentProperties from "./CardSpacerComponentProperties";
 
 export default function CardComponent({
   component,
@@ -93,6 +95,15 @@ export default function CardComponent({
           }}
         />
       )}
+      {type === CardComponentType.Spacer && (
+        <CardSpacerComponentProperties
+          properties={component as SpacerComponentProperties}
+          dataKeys={dataKeys}
+          onValueChange={(component) => {
+            onComponentChange(component);
+          }}
+        />
+      )}
     </div>
   );
 }
diff --git a/src/components/editor/fastboard-components/card/properties/CardComponentIcon.tsx b/src/components/editor/fastboard-components/card/properties/CardComponentIcon.tsx
index 8ac9934a..d86e866d 100644
--- a/src/components/editor/fastboard-components/card/properties/CardComponentIcon.tsx
+++ b/src/components/editor/fastboard-components/card/properties/CardComponentIcon.tsx
@@ -1,5 +1,12 @@
 import { CardComponentType } from "@/types/editor/card-types";
-import { IconProps, Image, Link, Text, VideoSquare } from "iconsax-react";
+import {
+  IconProps,
+  Image,
+  Link,
+  Pharagraphspacing,
+  Text,
+  VideoSquare,
+} from "iconsax-react";
 
 export default function CardComponentIcon({
   type,
@@ -21,6 +28,8 @@ export default function CardComponentIcon({
       return <Link size={size} className={className} />;
     case CardComponentType.Video:
       return <VideoSquare size={size} className={className} />;
+    case CardComponentType.Spacer:
+      return <Pharagraphspacing size={size} className={className} />;
     default:
       return null;
   }
diff --git a/src/components/editor/fastboard-components/card/properties/CardSpacerComponentProperties.tsx b/src/components/editor/fastboard-components/card/properties/CardSpacerComponentProperties.tsx
new file mode 100644
index 00000000..dd64359e
--- /dev/null
+++ b/src/components/editor/fastboard-components/card/properties/CardSpacerComponentProperties.tsx
@@ -0,0 +1,35 @@
+import { SpacerComponentProperties } from "@/types/editor/card-types";
+import { Input } from "@nextui-org/react";
+
+export default function CardSpacerComponentProperties({
+  properties,
+  dataKeys,
+  onValueChange,
+}: {
+  properties: SpacerComponentProperties;
+  dataKeys: string[];
+  onValueChange: (properties: SpacerComponentProperties) => void;
+}) {
+  const { height } = properties;
+
+  return (
+    <div className="flex flex-col gap-y-2">
+      <div className="flex flex-row justify-between items-center">
+        <h2 className="text-sm">Spacing</h2>
+        <Input
+          aria-label="Height"
+          type="number"
+          min={0}
+          className="w-20"
+          value={String(height)}
+          onChange={(e) => {
+            onValueChange({
+              ...properties,
+              height: parseInt(e.target.value),
+            });
+          }}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/editor/fastboard-components/card/properties/CardStyle.tsx b/src/components/editor/fastboard-components/card/properties/CardStyle.tsx
new file mode 100644
index 00000000..918e8d58
--- /dev/null
+++ b/src/components/editor/fastboard-components/card/properties/CardStyle.tsx
@@ -0,0 +1,57 @@
+import ColorPicker from "@/components/shared/ColorPicker";
+import { CardProperties } from "@/types/editor/card-types";
+import { Checkbox, Input } from "@nextui-org/react";
+import { useTheme } from "next-themes";
+
+export default function CardStyle({
+  properties,
+  onValueChange,
+}: {
+  properties: CardProperties;
+  onValueChange: (properties: CardProperties) => void;
+}) {
+  const { theme } = useTheme();
+  const { spacing, backgroundColor, showShadow } = properties;
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex flex-row justify-between items-center">
+        <h2 className="text-sm">Show border</h2>
+        <Checkbox
+          isSelected={showShadow}
+          onValueChange={(isSelected) => {
+            onValueChange({
+              ...properties,
+              showShadow: isSelected,
+            });
+          }}
+        />
+      </div>
+      <ColorPicker
+        label="Background color"
+        initialColor={
+          theme === "light" ? backgroundColor.light : backgroundColor.dark
+        }
+        onColorChange={(color) => {
+          if (theme === "light") {
+            onValueChange({
+              ...properties,
+              backgroundColor: {
+                light: color,
+                dark: backgroundColor.dark,
+              },
+            });
+          } else {
+            onValueChange({
+              ...properties,
+              backgroundColor: {
+                light: backgroundColor.light,
+                dark: color,
+              },
+            });
+          }
+        }}
+      />
+    </div>
+  );
+}
diff --git a/src/components/editor/fastboard-components/card/properties/FastboardCardProperties.tsx b/src/components/editor/fastboard-components/card/properties/FastboardCardProperties.tsx
index 375f2564..e45b466a 100644
--- a/src/components/editor/fastboard-components/card/properties/FastboardCardProperties.tsx
+++ b/src/components/editor/fastboard-components/card/properties/FastboardCardProperties.tsx
@@ -20,6 +20,7 @@ import { useRecoilValue } from "recoil";
 import { propertiesDrawerState } from "@/atoms/editor";
 import CardComponent from "./CardComponent";
 import { QueryType } from "@/types/connections";
+import CardStyle from "./CardStyle";
 
 export default function FastboardCardProperties({
   properties,
@@ -193,6 +194,16 @@ export default function FastboardCardProperties({
               />
             )}
           </AccordionItem>
+          <AccordionItem
+            key="style"
+            title="Style"
+            className="pb-2"
+            classNames={{
+              title: "font-medium",
+            }}
+          >
+            <CardStyle properties={properties} onValueChange={onValueChange} />
+          </AccordionItem>
         </Accordion>
       )}
 
diff --git a/src/types/editor/card-types.ts b/src/types/editor/card-types.ts
index 81cdf392..c3b83e90 100644
--- a/src/types/editor/card-types.ts
+++ b/src/types/editor/card-types.ts
@@ -4,12 +4,14 @@ import { FontType } from "@/components/shared/FontTypeProperty";
 import { ImageBorder } from "@/components/shared/ImageBorderProperty";
 import { IconType } from "./icon-types";
 import { QueryData } from "../connections";
+import { SpacerProps } from "@nextui-org/react";
 
 export enum CardComponentType {
   Text = "Text",
   Image = "Image",
   Link = "Link",
   Video = "Video",
+  Spacer = "Spacer",
 }
 
 interface BaseCardComponentProperties {
@@ -46,11 +48,16 @@ export interface LinkComponentProperties extends BaseCardComponentProperties {
 
 export interface VideoComponentProperties extends BaseCardComponentProperties {}
 
+export interface SpacerComponentProperties extends BaseCardComponentProperties {
+  height: number;
+}
+
 export type CardComponentProperties =
   | TextComponentProperties
   | ImageComponentProperties
   | LinkComponentProperties
-  | VideoComponentProperties;
+  | VideoComponentProperties
+  | SpacerComponentProperties;
 
 export class DefaultCardComponentProperties {
   static of(type: CardComponentType): CardComponentProperties {
@@ -93,6 +100,11 @@ export class DefaultCardComponentProperties {
         return {
           ...baseProperties,
         };
+      case CardComponentType.Spacer:
+        return {
+          ...baseProperties,
+          height: 5,
+        };
       default:
         return {
           ...baseProperties,
@@ -108,6 +120,9 @@ export class CardProperties {
   queryParameters: Record<string, string> = {};
   components: CardComponentProperties[] = [];
   dataKeys: string[] = [];
+
+  spacing: number = 2;
+  backgroundColor: Color = new Color("#ffffff", "#18181b");
   showShadow: boolean = true;
 
   static default(): CardProperties {

From e7f3056c7790f111ccd0cb75fc87ec52746b0005 Mon Sep 17 00:00:00 2001
From: Chiki <66981070+JulianBiancardi@users.noreply.github.com>
Date: Tue, 24 Sep 2024 12:39:46 -0300
Subject: [PATCH 12/12] update: image size and debounce input

---
 .../card/FastboardCard.tsx                    |  7 ++-
 .../card/ImageComponent.tsx                   | 26 +++++++++--
 .../CardImageComponentProperties.tsx          | 46 ++++++++++++++++++-
 .../properties/FastboardCardProperties.tsx    | 15 +++---
 src/components/shared/DebounceInput.tsx       | 37 +++++++++++++++
 src/types/editor/card-types.ts                |  4 +-
 6 files changed, 120 insertions(+), 15 deletions(-)
 create mode 100644 src/components/shared/DebounceInput.tsx

diff --git a/src/components/editor/fastboard-components/card/FastboardCard.tsx b/src/components/editor/fastboard-components/card/FastboardCard.tsx
index 510a6143..ccea3b2c 100644
--- a/src/components/editor/fastboard-components/card/FastboardCard.tsx
+++ b/src/components/editor/fastboard-components/card/FastboardCard.tsx
@@ -63,6 +63,7 @@ export default function FastboardCard({
     isFetching: dataFetching,
     isError: isDataError,
     error: dataError,
+    refetch,
   } = useData(
     `${ComponentType.Card}-${id}`,
     sourceQueryData,
@@ -89,6 +90,10 @@ export default function FastboardCard({
     });
   }, [keys]);
 
+  useEffect(() => {
+    refetch();
+  }, [queryParameters]);
+
   useEffect(() => {
     if (isDataError) {
       toast.error(dataError?.message);
@@ -163,7 +168,7 @@ export default function FastboardCard({
       }}
     >
       {dataFetching && <Spinner className="w-full h-full" />}
-      {isDataError && (
+      {!dataFetching && isDataError && (
         <p className="flex justify-center items-center w-full h-full text-danger">
           {dataError?.message}
         </p>
diff --git a/src/components/editor/fastboard-components/card/ImageComponent.tsx b/src/components/editor/fastboard-components/card/ImageComponent.tsx
index c9a0a00d..70b92e0f 100644
--- a/src/components/editor/fastboard-components/card/ImageComponent.tsx
+++ b/src/components/editor/fastboard-components/card/ImageComponent.tsx
@@ -1,5 +1,6 @@
 import { Alignment } from "@/components/shared/AlignmentProperty";
 import { ImageComponentProperties } from "@/types/editor/card-types";
+import { FastboardHeaderPhotoSize } from "@/types/editor/header-types";
 import { Image } from "@nextui-org/react";
 import { useEffect, useState } from "react";
 
@@ -10,13 +11,24 @@ export default function ImageComponent({
   properties: ImageComponentProperties;
   item: any;
 }) {
-  const { dataKey, alignment, border } = properties;
+  const { dataKey, alignment, border, size } = properties;
   const [imageError, setImageError] = useState(false);
 
   useEffect(() => {
     setImageError(false);
   }, [dataKey]);
 
+  function getSize(size: FastboardHeaderPhotoSize) {
+    switch (size) {
+      case FastboardHeaderPhotoSize.Small:
+        return "100px";
+      case FastboardHeaderPhotoSize.Medium:
+        return "150px";
+      case FastboardHeaderPhotoSize.Large:
+        return "300px";
+    }
+  }
+
   return (
     <div
       className={
@@ -36,11 +48,17 @@ export default function ImageComponent({
             ? item[dataKey]
             : "/ImageErrorImage.svg"
         }
-        className={"object-contain " + (imageError ? "dark:invert " : "")}
+        className={
+          "object-cover " + (imageError || dataKey === "" ? "dark:invert " : "")
+        }
+        style={{
+          maxHeight: getSize(size),
+          maxWidth: getSize(size),
+        }}
         alt="Card image"
-        width={"200px"}
-        height={"100%"}
         radius={border as any}
+        width={getSize(size)}
+        height={getSize(size)}
         onError={() => setImageError(true)}
       />
     </div>
diff --git a/src/components/editor/fastboard-components/card/properties/CardImageComponentProperties.tsx b/src/components/editor/fastboard-components/card/properties/CardImageComponentProperties.tsx
index 2df5f429..5aaa2f6f 100644
--- a/src/components/editor/fastboard-components/card/properties/CardImageComponentProperties.tsx
+++ b/src/components/editor/fastboard-components/card/properties/CardImageComponentProperties.tsx
@@ -1,7 +1,8 @@
 import AlignmentProperty from "@/components/shared/AlignmentProperty";
 import ImageBoderProperty from "@/components/shared/ImageBorderProperty";
 import { ImageComponentProperties } from "@/types/editor/card-types";
-import { Select, SelectItem } from "@nextui-org/react";
+import { FastboardHeaderPhotoSize } from "@/types/editor/header-types";
+import { Select, SelectItem, Slider } from "@nextui-org/react";
 
 export default function CardImageComponentProperties({
   properties,
@@ -12,7 +13,7 @@ export default function CardImageComponentProperties({
   dataKeys: string[];
   onValueChange: (properties: ImageComponentProperties) => void;
 }) {
-  const { dataKey, alignment, border } = properties;
+  const { dataKey, alignment, border, size } = properties;
 
   return (
     <div className="flex flex-col gap-y-2">
@@ -46,6 +47,47 @@ export default function CardImageComponentProperties({
         border={border}
         onBorderChange={(border) => onValueChange({ ...properties, border })}
       />
+      <Slider
+        label="Photo size"
+        step={1}
+        minValue={0}
+        maxValue={2}
+        value={
+          size === FastboardHeaderPhotoSize.Small
+            ? 0
+            : size === FastboardHeaderPhotoSize.Medium
+            ? 1
+            : 2
+        }
+        hideValue={true}
+        marks={[
+          {
+            value: 0,
+            label: "Small",
+          },
+          {
+            value: 1,
+            label: "Medium",
+          },
+          {
+            value: 2,
+            label: "Large",
+          },
+        ]}
+        onChange={(e) => {
+          const selectedValue = e as number;
+          const size =
+            selectedValue === 0
+              ? FastboardHeaderPhotoSize.Small
+              : selectedValue === 1
+              ? FastboardHeaderPhotoSize.Medium
+              : FastboardHeaderPhotoSize.Large;
+          onValueChange({
+            ...properties,
+            size,
+          });
+        }}
+      />
     </div>
   );
 }
diff --git a/src/components/editor/fastboard-components/card/properties/FastboardCardProperties.tsx b/src/components/editor/fastboard-components/card/properties/FastboardCardProperties.tsx
index e45b466a..ff913906 100644
--- a/src/components/editor/fastboard-components/card/properties/FastboardCardProperties.tsx
+++ b/src/components/editor/fastboard-components/card/properties/FastboardCardProperties.tsx
@@ -21,6 +21,7 @@ import { propertiesDrawerState } from "@/atoms/editor";
 import CardComponent from "./CardComponent";
 import { QueryType } from "@/types/connections";
 import CardStyle from "./CardStyle";
+import DebounceInput from "@/components/shared/DebounceInput";
 
 export default function FastboardCardProperties({
   properties,
@@ -91,7 +92,6 @@ export default function FastboardCardProperties({
               type={QueryType.GET}
               selectedQueryId={sourceQueryData?.queryId || ""}
               onQuerySelect={(newQuery) => {
-                console.log(newQuery);
                 if (newQuery.id === sourceQueryData?.queryId) {
                   return;
                 }
@@ -147,21 +147,22 @@ export default function FastboardCardProperties({
 
                 <div className="flex flex-col gap-2 px-2 w-full">
                   {Object.entries(queryParameters).map((parameter, index) => (
-                    <div className="flex flex-row items-center justify-between gap-x-2">
+                    <div
+                      key={index}
+                      className="flex flex-row items-center justify-between gap-x-2"
+                    >
                       <h2 className="w-full text-sm">{parameter[0]}</h2>
-                      <Input
-                        key={index}
+                      <DebounceInput
                         value={parameter[1]}
-                        onChange={(e) => {
+                        onValueChange={(value) => {
                           onValueChange({
                             ...properties,
                             queryParameters: {
                               ...queryParameters,
-                              [parameter[0]]: e.target.value,
+                              [parameter[0]]: value,
                             },
                           });
                         }}
-                        width={"100%"}
                       />
                     </div>
                   ))}
diff --git a/src/components/shared/DebounceInput.tsx b/src/components/shared/DebounceInput.tsx
new file mode 100644
index 00000000..4d3cf891
--- /dev/null
+++ b/src/components/shared/DebounceInput.tsx
@@ -0,0 +1,37 @@
+import { Input } from "@nextui-org/react";
+import React, { useEffect, useState } from "react";
+
+export default function DebounceInput({
+  value,
+  onValueChange,
+  delay = 500,
+  className,
+  type,
+}: {
+  value: string;
+  onValueChange: (value: string) => void;
+  delay?: number;
+  className?: string;
+  type?: string;
+}) {
+  const [inputValue, setInputValue] = useState(value);
+
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      onValueChange(inputValue);
+    }, delay);
+    return () => clearTimeout(timeoutId);
+  }, [inputValue, delay]);
+
+  return (
+    <Input
+      type={type}
+      className={className}
+      value={inputValue}
+      onValueChange={(value) => {
+        setInputValue(value);
+      }}
+      width={"100%"}
+    />
+  );
+}
diff --git a/src/types/editor/card-types.ts b/src/types/editor/card-types.ts
index c3b83e90..71a0cc9e 100644
--- a/src/types/editor/card-types.ts
+++ b/src/types/editor/card-types.ts
@@ -4,7 +4,7 @@ import { FontType } from "@/components/shared/FontTypeProperty";
 import { ImageBorder } from "@/components/shared/ImageBorderProperty";
 import { IconType } from "./icon-types";
 import { QueryData } from "../connections";
-import { SpacerProps } from "@nextui-org/react";
+import { FastboardHeaderPhotoSize } from "./header-types";
 
 export enum CardComponentType {
   Text = "Text",
@@ -32,6 +32,7 @@ export interface TextComponentProperties extends BaseCardComponentProperties {
 export interface ImageComponentProperties extends BaseCardComponentProperties {
   alignment: Alignment;
   border: ImageBorder;
+  size: FastboardHeaderPhotoSize;
 }
 
 export interface LinkComponentProperties extends BaseCardComponentProperties {
@@ -82,6 +83,7 @@ export class DefaultCardComponentProperties {
           ...baseProperties,
           alignment: Alignment.Left,
           border: ImageBorder.Round,
+          size: FastboardHeaderPhotoSize.Medium,
         };
       case CardComponentType.Link:
         return {