From 821eb37260cb2668b416bd4cb0d92dbe1cb62b91 Mon Sep 17 00:00:00 2001
From: Charlie Lin <lincharlie00@gmail.com>
Date: Fri, 18 Oct 2024 22:57:39 -0400
Subject: [PATCH 1/7] implemented gallery creation component

---
 src/components/dashboard/ProviderGallery.tsx  |  88 +++++++++
 .../dashboard/ProviderGallerySlide.tsx        | 176 ++++++++++++++++++
 src/components/dashboard/RowForm.tsx          |  51 ++++-
 3 files changed, 307 insertions(+), 8 deletions(-)
 create mode 100644 src/components/dashboard/ProviderGallery.tsx
 create mode 100644 src/components/dashboard/ProviderGallerySlide.tsx

diff --git a/src/components/dashboard/ProviderGallery.tsx b/src/components/dashboard/ProviderGallery.tsx
new file mode 100644
index 0000000..9da14a8
--- /dev/null
+++ b/src/components/dashboard/ProviderGallery.tsx
@@ -0,0 +1,88 @@
+import React, { useState } from "react";
+import ProviderGallerySlide from "./ProviderGallerySlide";
+import { storage } from "../../store";
+
+interface GallerySlide {
+    title: string;
+    description: string;
+    imgLink: string;
+}
+
+export default function ProviderGallery({
+    slidesArray,
+}: {
+    slidesArray: GallerySlide[];
+}) {
+    const [slides, setSlides] = useState(slidesArray);
+
+    const handleSlideDataChange = (
+        index: number,
+        field: keyof GallerySlide,
+        e: React.ChangeEvent<HTMLInputElement>
+    ) => {
+        let newSlides = [...slides];
+        newSlides[index][field] = e.target.value;
+        setSlides(newSlides);
+    };
+
+    const handleDelete = (index: number) => {
+        if (slides.length != 1) {
+            // min 1 slide present
+            let newSlides = [...slides];
+            newSlides.splice(index, 1);
+            setSlides(newSlides);
+        }
+    };
+
+    const handleAdd = (index: number) => {
+        const defaultSlide = {
+            title: "",
+            description: "",
+            imgLink: "",
+        };
+        let newSlides = [...slides];
+
+        if (index === newSlides.length - 1) {
+            newSlides.push(defaultSlide);
+        } else {
+            newSlides.splice(index + 1, 0, defaultSlide);
+        }
+        setSlides(newSlides);
+    };
+
+    const handleUpload = async (file, index) => {
+        const filename = file.name;
+        await storage.ref("images").child(filename).put(file);
+        let newSlides = [...slides];
+        await storage
+            .ref("images")
+            .child(filename)
+            .getDownloadURL()
+            .then((url) => {
+                newSlides[index].imgLink = url;
+                setSlides(newSlides);
+            });
+    };
+
+    return (
+        <div style={{ width: "100%", margin: "0px" }}>
+            <div>
+                <h4>Current Data:</h4>
+                <pre>{JSON.stringify(slides, null, 2)}</pre>
+            </div>
+            {slides.map((slide, i) => {
+                return (
+                    <ProviderGallerySlide
+                        {...slide}
+                        index={i}
+                        key={i}
+                        handleSlideDataChange={handleSlideDataChange}
+                        handleDelete={handleDelete}
+                        handleAdd={handleAdd}
+                        handleUpload={handleUpload}
+                    />
+                );
+            })}
+        </div>
+    );
+}
diff --git a/src/components/dashboard/ProviderGallerySlide.tsx b/src/components/dashboard/ProviderGallerySlide.tsx
new file mode 100644
index 0000000..a79440a
--- /dev/null
+++ b/src/components/dashboard/ProviderGallerySlide.tsx
@@ -0,0 +1,176 @@
+import React, { useState } from "react";
+import Form from "react-bootstrap/Form";
+import { Button } from "react-bootstrap";
+import Dropzone from "react-dropzone";
+
+export default function ProviderGallerySlide({
+    title,
+    description,
+    imgLink, // Opens use of imgLink in slide for editing maybe?
+    index,
+    handleSlideDataChange,
+    handleDelete,
+    handleAdd,
+    handleUpload,
+}) {
+    return (
+        <div>
+            <Form
+                style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "16px",
+                    paddingBottom: "16px",
+                }}
+            >
+                <Form.Text
+                    style={{
+                        color: "#333",
+                        fontSize: "1rem",
+                        fontWeight: "bold",
+                    }}
+                >{`Slide ${index + 1}`}</Form.Text>
+                <Form.Group style={{ margin: "0px", maxWidth: "50%" }}>
+                    <Form.Label>
+                        Title <span style={{ color: "#EB5757" }}>*</span>
+                    </Form.Label>
+                    <Form.Control
+                        type="text"
+                        placeholder="ex. Sandwiches and Smiles on a Sunday"
+                        value={title}
+                        onChange={(e) =>
+                            handleSlideDataChange(index, "title", e)
+                        }
+                        style={{ borderColor: "#D9D9D9" }}
+                        required
+                    />
+                </Form.Group>
+                <Form.Group style={{ margin: "0px" }}>
+                    <Form.Label>Description</Form.Label>
+                    <Form.Control
+                        type="text"
+                        placeholder="ex. Last weekend, we prepared 100 sandwiches!"
+                        value={description}
+                        onChange={(e) =>
+                            handleSlideDataChange(index, "description", e)
+                        }
+                        style={{ borderColor: "#D9D9D9" }}
+                    />
+                </Form.Group>
+                <Form.Group style={{ margin: "0px", maxWidth: "75%" }}>
+                    <Form.Label>Upload file</Form.Label>
+                    <ImageModal handleSuccess={handleUpload} index={index} />
+                </Form.Group>
+            </Form>
+            <div
+                style={{
+                    marginBottom: "24px",
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "16px",
+                }}
+            >
+                <div style={{ display: "flex", justifyContent: "end" }}>
+                    <Button
+                        onClick={() => handleDelete(index)}
+                        style={{
+                            all: "unset",
+                            cursor: "pointer",
+                            color: "#4F4F4F",
+                        }}
+                    >
+                        Delete
+                    </Button>
+                </div>
+                <Button
+                    onClick={() => handleAdd(index)}
+                    style={{
+                        backgroundColor: "white",
+                        color: "#226DFF",
+                        fontWeight: "500",
+                        letterSpacing: "-0.176px",
+                        lineHeight: "150%",
+                        fontSize: "1rem",
+                        padding: "8px",
+                        border: "border: 1px solid #226DFF",
+                        width: "fit-content",
+                    }}
+                >
+                    + Add slide
+                </Button>
+            </div>
+        </div>
+    );
+}
+
+const ImageModal = ({ handleSuccess, index }) => {
+    const [uploaded, setUploaded] = useState(false);
+    const [image, setImage] = useState(null);
+
+    const handleDrop = (img) => {
+        setImage(img[0]);
+        setUploaded(true);
+    };
+
+    return (
+        <div>
+            {!uploaded && (
+                <Dropzone accept="image/*" onDrop={handleDrop}>
+                    {({ getRootProps, getInputProps }) => (
+                        <div
+                            {...getRootProps({ className: "dropzone" })}
+                            style={{
+                                backgroundColor: "white",
+                                borderStyle: "dashed",
+                                borderRadius: "15px",
+                            }}
+                        >
+                            <input {...getInputProps()} />
+                            <p
+                                style={{
+                                    fontSize: "1.25rem",
+                                    color: "#333",
+                                }}
+                            >
+                                Drop your image here, or{" "}
+                                <span style={{ color: "#226DFF" }}>browse</span>
+                            </p>
+                            <p>Supports JPG, JPEG2000, PNG</p>
+                        </div>
+                    )}
+                </Dropzone>
+            )}
+            {uploaded && (
+                <div className="imageModalSave">
+                    <div style={{ width: "100%" }}>
+                        <img
+                            src={URL.createObjectURL(image)}
+                            className="image-upload"
+                            alt="description"
+                            style={{
+                                width: "75%",
+                                height: "auto",
+                                boxShadow: "rgba(0, 0, 0, 0.24) 0px 3px 8px",
+                            }}
+                        />
+                    </div>
+                    <Button
+                        className="cancelButton btn btn-danger"
+                        onClick={() => setUploaded(false)}
+                    >
+                        Cancel
+                    </Button>
+                    <Button
+                        className="saveButton btn btn-success"
+                        onClick={() => {
+                            handleSuccess(image, index);
+                            setUploaded(false);
+                        }}
+                    >
+                        Save
+                    </Button>
+                </div>
+            )}
+        </div>
+    );
+};
diff --git a/src/components/dashboard/RowForm.tsx b/src/components/dashboard/RowForm.tsx
index c279b47..95ac6ae 100644
--- a/src/components/dashboard/RowForm.tsx
+++ b/src/components/dashboard/RowForm.tsx
@@ -19,6 +19,39 @@ import Button from "react-bootstrap/Button";
 import ActionForm from "./ActionForm";
 import ContentForm from "./ContentForm";
 
+import ProviderGallery from "./ProviderGallery";
+import Collapsible from "components/collapsible";
+
+{
+    /*TO BE DELETED */
+}
+const galleryData = [
+    {
+        title: "testVal1",
+        description: "testing testing",
+        imgLink:
+            "https://www.goodhousekeeping.com/life/pets/g4531/cutest-dog-breeds/",
+    },
+    {
+        title: "testVal2",
+        description: "testing testing",
+        imgLink:
+            "https://www.goodhousekeeping.com/life/pets/g4531/cutest-dog-breeds/",
+    },
+    {
+        title: "testVal3",
+        description: "testing testing",
+        imgLink:
+            "https://www.goodhousekeeping.com/life/pets/g4531/cutest-dog-breeds/",
+    },
+    {
+        title: "testVal4",
+        description: "testing testing",
+        imgLink:
+            "https://www.goodhousekeeping.com/life/pets/g4531/cutest-dog-breeds/",
+    },
+];
+
 function validURL(str) {
     const pattern = new RegExp(
         "^(https?:\\/\\/)?" + // protocol
@@ -27,7 +60,7 @@ function validURL(str) {
             "(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" + // port and path
             "(\\?[;&a-z\\d%_.~+=-]*)?" + // query string
             "(\\#[-a-z\\d_]*)?$",
-        "i",
+        "i"
     ); // fragment locator
     return !!pattern.test(str);
 }
@@ -248,9 +281,9 @@ const RowForm = (props) => {
                                     style={{
                                         color: isValidNumberForRegion(
                                             parseIncompletePhoneNumber(
-                                                item.phoneNum[0],
+                                                item.phoneNum[0]
                                             ),
-                                            "US",
+                                            "US"
                                         )
                                             ? "green"
                                             : "red",
@@ -258,9 +291,9 @@ const RowForm = (props) => {
                                 >
                                     {isValidNumberForRegion(
                                         parseIncompletePhoneNumber(
-                                            item.phoneNum[0],
+                                            item.phoneNum[0]
                                         ),
-                                        "US",
+                                        "US"
                                     )
                                         ? "Valid number"
                                         : "Invalid number"}
@@ -357,6 +390,8 @@ const RowForm = (props) => {
                             as="textarea"
                         />
                     </Form.Group>
+                    {/*TO BE DELETED */}
+                    <ProviderGallery slidesArray={galleryData} />
                 </>
             );
 
@@ -387,7 +422,7 @@ const RowForm = (props) => {
                                     }}
                                 />
                             </Form.Group>
-                        ),
+                        )
                     )}
                 </>
             );
@@ -411,7 +446,7 @@ const RowForm = (props) => {
                                     }}
                                 />
                             </Form.Group>
-                        ),
+                        )
                     )}
                 </>
             );
@@ -437,7 +472,7 @@ const RowForm = (props) => {
                                     }}
                                 />
                             </Form.Group>
-                        ),
+                        )
                     )}
                 </>
             );

From 6c7ec99872608db20086df7e9996aeed27b4c660 Mon Sep 17 00:00:00 2001
From: Charlie Lin <lincharlie00@gmail.com>
Date: Fri, 18 Oct 2024 23:10:32 -0400
Subject: [PATCH 2/7] fixes to gallery creation component + created carousel
 file

---
 src/components/dashboard/ProviderGallery.tsx  | 92 ++++++++++---------
 .../dashboard/ProviderGalleryCarousel.tsx     | 88 ++++++++++++++++++
 2 files changed, 138 insertions(+), 42 deletions(-)
 create mode 100644 src/components/dashboard/ProviderGalleryCarousel.tsx

diff --git a/src/components/dashboard/ProviderGallery.tsx b/src/components/dashboard/ProviderGallery.tsx
index 9da14a8..4ad17a3 100644
--- a/src/components/dashboard/ProviderGallery.tsx
+++ b/src/components/dashboard/ProviderGallery.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import ProviderGallerySlide from "./ProviderGallerySlide";
 import { storage } from "../../store";
 
@@ -9,59 +9,79 @@ interface GallerySlide {
 }
 
 export default function ProviderGallery({
-    slidesArray,
+    slidesArray = [],
 }: {
-    slidesArray: GallerySlide[];
+    slidesArray?: GallerySlide[];
 }) {
-    const [slides, setSlides] = useState(slidesArray);
+    const [slides, setSlides] = useState<GallerySlide[]>(slidesArray);
+
+    const defaultSlide: GallerySlide = {
+        title: "",
+        description: "",
+        imgLink: "",
+    };
+
+    useEffect(() => {
+        if (!slides || slides.length === 0) {
+            setSlides([{ ...defaultSlide }]);
+        }
+    }, [slides]);
 
     const handleSlideDataChange = (
         index: number,
         field: keyof GallerySlide,
         e: React.ChangeEvent<HTMLInputElement>
     ) => {
-        let newSlides = [...slides];
-        newSlides[index][field] = e.target.value;
+        const newSlides = slides.map((slide, i) =>
+            i === index ? { ...slide, [field]: e.target.value } : slide
+        );
         setSlides(newSlides);
     };
 
     const handleDelete = (index: number) => {
-        if (slides.length != 1) {
-            // min 1 slide present
-            let newSlides = [...slides];
-            newSlides.splice(index, 1);
+        if (slides.length > 1) {
+            const newSlides = slides.filter((_, i) => i !== index);
             setSlides(newSlides);
         }
     };
 
     const handleAdd = (index: number) => {
-        const defaultSlide = {
-            title: "",
-            description: "",
-            imgLink: "",
-        };
-        let newSlides = [...slides];
+        const newSlides = [...slides];
+        const newSlide = { ...defaultSlide };
 
         if (index === newSlides.length - 1) {
-            newSlides.push(defaultSlide);
+            newSlides.push(newSlide);
         } else {
-            newSlides.splice(index + 1, 0, defaultSlide);
+            newSlides.splice(index + 1, 0, newSlide);
         }
         setSlides(newSlides);
     };
 
-    const handleUpload = async (file, index) => {
+    const handleUpload = async (file, index: number) => {
         const filename = file.name;
-        await storage.ref("images").child(filename).put(file);
-        let newSlides = [...slides];
-        await storage
-            .ref("images")
-            .child(filename)
-            .getDownloadURL()
-            .then((url) => {
-                newSlides[index].imgLink = url;
-                setSlides(newSlides);
-            });
+        const fileRef = storage.ref("images").child(filename);
+
+        await fileRef.put(file);
+        const url = await fileRef.getDownloadURL();
+
+        const newSlides = slides.map((slide, i) =>
+            i === index ? { ...slide, imgLink: url } : slide
+        );
+        setSlides(newSlides);
+    };
+
+    const renderSlides = () => {
+        return slides.map((slide, i) => (
+            <ProviderGallerySlide
+                {...slide}
+                index={i}
+                key={i}
+                handleSlideDataChange={handleSlideDataChange}
+                handleDelete={handleDelete}
+                handleAdd={handleAdd}
+                handleUpload={handleUpload}
+            />
+        ));
     };
 
     return (
@@ -70,19 +90,7 @@ export default function ProviderGallery({
                 <h4>Current Data:</h4>
                 <pre>{JSON.stringify(slides, null, 2)}</pre>
             </div>
-            {slides.map((slide, i) => {
-                return (
-                    <ProviderGallerySlide
-                        {...slide}
-                        index={i}
-                        key={i}
-                        handleSlideDataChange={handleSlideDataChange}
-                        handleDelete={handleDelete}
-                        handleAdd={handleAdd}
-                        handleUpload={handleUpload}
-                    />
-                );
-            })}
+            {renderSlides()}
         </div>
     );
 }
diff --git a/src/components/dashboard/ProviderGalleryCarousel.tsx b/src/components/dashboard/ProviderGalleryCarousel.tsx
new file mode 100644
index 0000000..15f2ada
--- /dev/null
+++ b/src/components/dashboard/ProviderGalleryCarousel.tsx
@@ -0,0 +1,88 @@
+import React, { useState } from "react";
+import ProviderGallerySlide from "./ProviderGallerySlide";
+import { storage } from "../../store";
+
+interface GallerySlide {
+    title: string;
+    description: string;
+    imgLink: string;
+}
+
+export default function ProviderGalleryCarousel({
+    slidesArray,
+}: {
+    slidesArray: GallerySlide[];
+}) {
+    const [slides, setSlides] = useState(slidesArray);
+
+    const handleSlideDataChange = (
+        index: number,
+        field: keyof GallerySlide,
+        e: React.ChangeEvent<HTMLInputElement>
+    ) => {
+        let newSlides = [...slides];
+        newSlides[index][field] = e.target.value;
+        setSlides(newSlides);
+    };
+
+    const handleDelete = (index: number) => {
+        if (slides.length != 1) {
+            // min 1 slide present
+            let newSlides = [...slides];
+            newSlides.splice(index, 1);
+            setSlides(newSlides);
+        }
+    };
+
+    const handleAdd = (index: number) => {
+        const defaultSlide = {
+            title: "",
+            description: "",
+            imgLink: "",
+        };
+        let newSlides = [...slides];
+
+        if (index === newSlides.length - 1) {
+            newSlides.push(defaultSlide);
+        } else {
+            newSlides.splice(index + 1, 0, defaultSlide);
+        }
+        setSlides(newSlides);
+    };
+
+    const handleUpload = async (file, index) => {
+        const filename = file.name;
+        await storage.ref("images").child(filename).put(file);
+        let newSlides = [...slides];
+        await storage
+            .ref("images")
+            .child(filename)
+            .getDownloadURL()
+            .then((url) => {
+                newSlides[index].imgLink = url;
+                setSlides(newSlides);
+            });
+    };
+
+    return (
+        <div style={{ width: "100%", margin: "0px" }}>
+            <div>
+                <h4>Current Data:</h4>
+                <pre>{JSON.stringify(slides, null, 2)}</pre>
+            </div>
+            {slides.map((slide, i) => {
+                return (
+                    <ProviderGallerySlide
+                        {...slide}
+                        index={i}
+                        key={i}
+                        handleSlideDataChange={handleSlideDataChange}
+                        handleDelete={handleDelete}
+                        handleAdd={handleAdd}
+                        handleUpload={handleUpload}
+                    />
+                );
+            })}
+        </div>
+    );
+}

From fc18252a2811f3067987ce18e137aee4af806eaa Mon Sep 17 00:00:00 2001
From: Charlie Lin <lincharlie00@gmail.com>
Date: Sat, 19 Oct 2024 01:25:21 -0400
Subject: [PATCH 3/7] Implemented the gallery carousel

---
 src/components/dashboard/ProviderGallery.tsx  |   2 +
 .../dashboard/ProviderGalleryCarousel.tsx     | 219 +++++++++++++-----
 src/components/dashboard/RowForm.tsx          |  13 +-
 src/components/dashboard/SingleProvider.tsx   |  57 +++++
 4 files changed, 222 insertions(+), 69 deletions(-)

diff --git a/src/components/dashboard/ProviderGallery.tsx b/src/components/dashboard/ProviderGallery.tsx
index 4ad17a3..b988612 100644
--- a/src/components/dashboard/ProviderGallery.tsx
+++ b/src/components/dashboard/ProviderGallery.tsx
@@ -86,10 +86,12 @@ export default function ProviderGallery({
 
     return (
         <div style={{ width: "100%", margin: "0px" }}>
+            {/*TO BE DELETED */}
             <div>
                 <h4>Current Data:</h4>
                 <pre>{JSON.stringify(slides, null, 2)}</pre>
             </div>
+
             {renderSlides()}
         </div>
     );
diff --git a/src/components/dashboard/ProviderGalleryCarousel.tsx b/src/components/dashboard/ProviderGalleryCarousel.tsx
index 15f2ada..dd0f1f5 100644
--- a/src/components/dashboard/ProviderGalleryCarousel.tsx
+++ b/src/components/dashboard/ProviderGalleryCarousel.tsx
@@ -1,6 +1,4 @@
 import React, { useState } from "react";
-import ProviderGallerySlide from "./ProviderGallerySlide";
-import { storage } from "../../store";
 
 interface GallerySlide {
     title: string;
@@ -13,76 +11,171 @@ export default function ProviderGalleryCarousel({
 }: {
     slidesArray: GallerySlide[];
 }) {
-    const [slides, setSlides] = useState(slidesArray);
+    const [currentIndex, setCurrentIndex] = useState(0);
 
-    const handleSlideDataChange = (
-        index: number,
-        field: keyof GallerySlide,
-        e: React.ChangeEvent<HTMLInputElement>
-    ) => {
-        let newSlides = [...slides];
-        newSlides[index][field] = e.target.value;
-        setSlides(newSlides);
+    const goToPrevious = () => {
+        setCurrentIndex((prevIndex) =>
+            prevIndex === 0 ? slidesArray.length - 1 : prevIndex - 1
+        );
     };
 
-    const handleDelete = (index: number) => {
-        if (slides.length != 1) {
-            // min 1 slide present
-            let newSlides = [...slides];
-            newSlides.splice(index, 1);
-            setSlides(newSlides);
-        }
+    const goToNext = () => {
+        setCurrentIndex((prevIndex) =>
+            prevIndex === slidesArray.length - 1 ? 0 : prevIndex + 1
+        );
     };
 
-    const handleAdd = (index: number) => {
-        const defaultSlide = {
-            title: "",
-            description: "",
-            imgLink: "",
-        };
-        let newSlides = [...slides];
+    const isActive = (index: number) => currentIndex === index;
 
-        if (index === newSlides.length - 1) {
-            newSlides.push(defaultSlide);
-        } else {
-            newSlides.splice(index + 1, 0, defaultSlide);
-        }
-        setSlides(newSlides);
-    };
+    return (
+        <div
+            style={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+            }}
+        >
+            <div style={{ display: "flex", gap: "32px" }}>
+                <button
+                    onClick={goToPrevious}
+                    style={{
+                        cursor: "pointer",
+                        fontSize: "24px",
+                        background: "none",
+                        border: "none",
+                        outline: "none",
+                        fontFamily: "Fabric External MDL2 Assets",
+                        color: "#06C",
+                    }}
+                >
+                    {`<`}
+                </button>
 
-    const handleUpload = async (file, index) => {
-        const filename = file.name;
-        await storage.ref("images").child(filename).put(file);
-        let newSlides = [...slides];
-        await storage
-            .ref("images")
-            .child(filename)
-            .getDownloadURL()
-            .then((url) => {
-                newSlides[index].imgLink = url;
-                setSlides(newSlides);
-            });
-    };
+                {/* Card */}
+                <div
+                    style={{
+                        display: "flex",
+                        border: "1px solid #ccc",
+                        borderRadius: "4px",
+                        width: "568px",
+                        height: "368px",
+                        boxShadow: "0px 2px 5px 0px rgba(0, 0, 0, 0.25)",
+                        overflow: "hidden",
+                    }}
+                >
+                    {/*Left-side */}
+                    <div
+                        style={{
+                            display: "flex",
+                            flexDirection: "column",
+                            width: "50%",
+                            paddingLeft: "16px",
+                            paddingRight: "16px",
+                        }}
+                    >
+                        {/* Card Title */}
+                        <div
+                            style={{
+                                width: "100%",
+                                height: "35%",
+                                display: "flex",
+                                justifyContent: "center",
+                                alignItems: "center",
+                                paddingTop: "32px",
+                            }}
+                        >
+                            <h2
+                                style={{
+                                    margin: 0,
+                                    fontSize: "1.5rem",
+                                    color: "#333",
+                                    width: "100%",
+                                }}
+                            >
+                                {slidesArray[currentIndex].title}
+                            </h2>
+                        </div>
 
-    return (
-        <div style={{ width: "100%", margin: "0px" }}>
-            <div>
-                <h4>Current Data:</h4>
-                <pre>{JSON.stringify(slides, null, 2)}</pre>
+                        {/* Card Description */}
+                        <div
+                            style={{
+                                overflowY: "auto",
+                                height: "50%,",
+                                maxHeight: "190px",
+                            }}
+                        >
+                            <p
+                                style={{
+                                    margin: 0,
+                                    color: "rgba(148, 142, 142, 0.90)",
+                                    fontWeight: "300",
+                                }}
+                            >
+                                {slidesArray[currentIndex].description}
+                            </p>
+                        </div>
+                    </div>
+                    {/*Right-side*/}
+                    <div
+                        style={{
+                            display: "flex",
+                            overflow: "hidden",
+                            height: "100%",
+                            width: "50%",
+                        }}
+                    >
+                        <img
+                            src={slidesArray[currentIndex].imgLink}
+                            alt={slidesArray[currentIndex].title}
+                            style={{
+                                width: "100%",
+                                height: "100%",
+                                objectFit: "cover",
+                            }}
+                        />
+                    </div>
+                </div>
+                <button
+                    onClick={goToNext}
+                    style={{
+                        cursor: "pointer",
+                        fontSize: "24px",
+                        background: "none",
+                        border: "none",
+                        outline: "none",
+                        fontFamily: "Fabric External MDL2 Assets",
+                        color: "#06C",
+                    }}
+                >
+                    {`>`}
+                </button>
+            </div>
+
+            {/* bubbles */}
+            <div
+                style={{
+                    display: "flex",
+                    justifyContent: "center",
+                    gap: "8px",
+                    marginTop: "32px",
+                }}
+            >
+                {slidesArray.map((_, index) => (
+                    <div
+                        key={index}
+                        style={{
+                            width: isActive(index) ? "30px" : "10px",
+                            height: "10px",
+                            borderRadius: isActive(index) ? "15px" : "50%",
+                            backgroundColor: isActive(index)
+                                ? "#0A1D7C"
+                                : "#115EA333",
+                            transition: "width 0.3s, height 0.3s",
+                        }}
+                    ></div>
+                ))}
             </div>
-            {slides.map((slide, i) => {
-                return (
-                    <ProviderGallerySlide
-                        {...slide}
-                        index={i}
-                        key={i}
-                        handleSlideDataChange={handleSlideDataChange}
-                        handleDelete={handleDelete}
-                        handleAdd={handleAdd}
-                        handleUpload={handleUpload}
-                    />
-                );
-            })}
         </div>
     );
 }
diff --git a/src/components/dashboard/RowForm.tsx b/src/components/dashboard/RowForm.tsx
index 95ac6ae..d5863ac 100644
--- a/src/components/dashboard/RowForm.tsx
+++ b/src/components/dashboard/RowForm.tsx
@@ -19,9 +19,10 @@ import Button from "react-bootstrap/Button";
 import ActionForm from "./ActionForm";
 import ContentForm from "./ContentForm";
 
+{
+    /*TO BE DELETED */
+}
 import ProviderGallery from "./ProviderGallery";
-import Collapsible from "components/collapsible";
-
 {
     /*TO BE DELETED */
 }
@@ -30,25 +31,25 @@ const galleryData = [
         title: "testVal1",
         description: "testing testing",
         imgLink:
-            "https://www.goodhousekeeping.com/life/pets/g4531/cutest-dog-breeds/",
+            "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
     },
     {
         title: "testVal2",
         description: "testing testing",
         imgLink:
-            "https://www.goodhousekeeping.com/life/pets/g4531/cutest-dog-breeds/",
+            "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
     },
     {
         title: "testVal3",
         description: "testing testing",
         imgLink:
-            "https://www.goodhousekeeping.com/life/pets/g4531/cutest-dog-breeds/",
+            "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
     },
     {
         title: "testVal4",
         description: "testing testing",
         imgLink:
-            "https://www.goodhousekeeping.com/life/pets/g4531/cutest-dog-breeds/",
+            "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
     },
 ];
 
diff --git a/src/components/dashboard/SingleProvider.tsx b/src/components/dashboard/SingleProvider.tsx
index f55c044..24b9634 100644
--- a/src/components/dashboard/SingleProvider.tsx
+++ b/src/components/dashboard/SingleProvider.tsx
@@ -6,12 +6,67 @@ import ButtonToolbar from "react-bootstrap/ButtonToolbar";
 import { Link } from "react-router-dom";
 import ProviderInfo from "../subcomponents/ProviderInfo";
 import { formRoute } from "../../routes/pathnames";
+import ProviderGalleryCarousel from "./ProviderGalleryCarousel";
 
 // updateFirestore = async () => {
 //     //Change 'ages' to the specific parameter to update
 //     await this.props.firestore.update({collection: 'providers', doc: this.state.itemUpdates['facilityName']}, {'ages': '10'});
 //     await this.props.firestore.get('providers')
 // };
+{
+    /*TO BE DELETED */
+}
+const galleryData = [
+    {
+        title: "Urban Tree Fundraiser",
+        description:
+            "Last Friday, we gathered for food, fun, and giving back at Urban Tree cidery. All proceeds from the evening went to our Bereavement fund. Everyone remembered to bring a sweater because the back deck got cold. We enjoyed drinks, games, and more!",
+        imgLink:
+            "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
+    },
+    {
+        title: "testVal2",
+        description: "testing testing",
+        imgLink:
+            "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
+    },
+    {
+        title: "testVal3",
+        description: "testing testing",
+        imgLink:
+            "https://static.vecteezy.com/system/resources/thumbnails/005/857/332/small_2x/funny-portrait-of-cute-corgi-dog-outdoors-free-photo.jpg",
+    },
+    {
+        title: "testVal4",
+        description: "testing testing",
+        imgLink:
+            "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
+    },
+    {
+        title: "testVal1",
+        description: "testing testing",
+        imgLink:
+            "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
+    },
+    {
+        title: "testVal2",
+        description: "testing testing",
+        imgLink:
+            "https://static.vecteezy.com/system/resources/thumbnails/005/857/332/small_2x/funny-portrait-of-cute-corgi-dog-outdoors-free-photo.jpg",
+    },
+    {
+        title: "testVal3",
+        description: "testing testing",
+        imgLink:
+            "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
+    },
+    {
+        title: "testVal4",
+        description: "testing testing",
+        imgLink:
+            "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
+    },
+];
 
 const SingleProvider = (props) => (
     <div>
@@ -56,6 +111,8 @@ const SingleProvider = (props) => (
         >
             <Container>
                 <ProviderInfo item={props.item} categories={props.categories} />
+                {/*TO BE DELETED */}
+                <ProviderGalleryCarousel slidesArray={galleryData} />
             </Container>
         </div>
     </div>

From aa642a7e81270ea952ffc3de37c149898ba0e4cd Mon Sep 17 00:00:00 2001
From: Athanasios Taprantzis <thatapras@hotmail.gr>
Date: Mon, 21 Oct 2024 17:36:55 -0400
Subject: [PATCH 4/7] Admin content add button

---
 src/components/collapsible/index.tsx          |  4 +-
 src/components/dashboard/AddProvider.tsx      |  2 +-
 src/components/dashboard/ContentForm.tsx      | 45 ++++++++++++++++---
 .../chartcomponents/ChartComponentForm.tsx    |  2 +-
 4 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/src/components/collapsible/index.tsx b/src/components/collapsible/index.tsx
index 6eea44c..a88866d 100644
--- a/src/components/collapsible/index.tsx
+++ b/src/components/collapsible/index.tsx
@@ -5,13 +5,13 @@ import {FaAngleDown, FaAngleUp } from "react-icons/fa";
 
 //This is collapsible component, use it as if you are using any pre-designed component
 //Specify the Style of collapsible component as if you were styling a div using style prompt
-const Collapsible = ({style = {}, label, children}) => {
+const Collapsible = ({style = {}, titleStyle={}, label, children}) => {
     const [isOpen, setOpen] = useState(false)
     const contentRef = useRef(null)
     const toogle = () => {setOpen(!isOpen)}
     return (
         <div className = "collapsible" style={style}>
-            <button onClick={toogle} className="title">{label}{!isOpen ? (
+            <button onClick={toogle} className="title" style={titleStyle}>{label}{!isOpen ? (
                 <FaAngleDown />
               ) : (
                 <FaAngleUp />
diff --git a/src/components/dashboard/AddProvider.tsx b/src/components/dashboard/AddProvider.tsx
index 46183d3..da4a1ca 100644
--- a/src/components/dashboard/AddProvider.tsx
+++ b/src/components/dashboard/AddProvider.tsx
@@ -399,7 +399,7 @@ function AddProvider(props) {
                         )}
                     </div>
                 </Col>
-                <Col xs={12} md={8} lg={9}>
+                <Col xs={12} md={8} lg={9} style={{overflow: "scroll", height: "100vh"}}>
                     <Flipper flipKey={step}>
                         <Flipped flipId="form">
                             <div className="bg-white p-3">
diff --git a/src/components/dashboard/ContentForm.tsx b/src/components/dashboard/ContentForm.tsx
index 303c1c8..ef35917 100644
--- a/src/components/dashboard/ContentForm.tsx
+++ b/src/components/dashboard/ContentForm.tsx
@@ -1,13 +1,15 @@
 import "@fontsource/inter";
 
 import React, { useEffect, useRef, useState } from "react";
-import { Button, Col, Container, Form, Row } from "react-bootstrap";
+import { Button, Col, Container, Dropdown, Form, Row } from "react-bootstrap";
 // import grabberIcon from "../../assets/svg/grabber.svg";
 import { ReactComponent as GrabberIcon } from "../../assets/svg/grabber.svg";
 import { ReactComponent as PencilIcon } from "../../assets/svg/pencil.svg";
 import { ReactComponent as CheckmarkIcon } from "../../assets/svg/checkmark.svg";
 
 import styles from "./ContentForm.module.css";
+import ChartComponentForm from "components/subcomponents/chartcomponents/ChartComponentForm";
+import Collapsible from "components/collapsible";
 
 const EditableText = ({ text, setText, isEditing, setIsEditing }) => {
     const inputRef = useRef(null);
@@ -97,8 +99,9 @@ const SectionCard = ({
     isEditing,
     setIsEditing,
 }) => {
+    const [components, setComponents] = useState([]);
     return (
-        <Container fluid className="p-0 h-100 d-flex flex-column">
+        <Container fluid className="p-0 h-100 d-flex flex-column" style={{ overflowY: "scroll" }}>
             <Row
                 className=" w-100 d-inline-flex flex-row align-items-center justify-content-between"
                 style={{
@@ -139,11 +142,40 @@ const SectionCard = ({
                     Delete Section
                 </button>
             </Row>
+            {components.map((v, i) =>
+                <Row className="flex-fill m-0 w-100">
+                    {v}
+                </Row>
+            )}
             <Row
                 className="flex-fill m-0 w-100"
-                style={{ borderRadius: "8px", backgroundColor: "#FFFFFF" }}
             >
-                {index}
+                <Dropdown>
+                    <Dropdown.Toggle className={styles.deleteButton}
+                        style={{
+                            color: "white",
+                            fontSize: "16px",
+                            fontWeight: "500",
+                            fontFamily: "Inter, sans-serif",
+                        }} id="dropdown-basic">
+                        Add Section
+                    </Dropdown.Toggle>
+
+                    <Dropdown.Menu>
+                        <Dropdown.Item onClick={() => setComponents([...components,
+                        <Collapsible
+                            titleStyle={{
+                                background: "white",
+                                color: "var(--chart-blue)",
+                                fontSize: "1.25rem",
+                                fontStyle: "normal",
+                                lineHeight: "24px"
+                            }} label={"Chart"}>
+                            <ChartComponentForm />
+                        </Collapsible>
+                        ])}>Chart</Dropdown.Item>
+                    </Dropdown.Menu>
+                </Dropdown>
             </Row>
         </Container>
     );
@@ -179,9 +211,8 @@ const SectionButton = ({
                         maxWidth: "12px",
                         borderTopLeftRadius: "8px",
                         borderBottomLeftRadius: "8px",
-                        backgroundColor: `${
-                            isSelected ? "#226DFF" : "transparent"
-                        }`,
+                        backgroundColor: `${isSelected ? "#226DFF" : "transparent"
+                            }`,
                     }}
                 ></Col>
                 <Col
diff --git a/src/components/subcomponents/chartcomponents/ChartComponentForm.tsx b/src/components/subcomponents/chartcomponents/ChartComponentForm.tsx
index 344b308..0249fd3 100644
--- a/src/components/subcomponents/chartcomponents/ChartComponentForm.tsx
+++ b/src/components/subcomponents/chartcomponents/ChartComponentForm.tsx
@@ -500,7 +500,7 @@ const ChartComponentForm = () => {
 
     return (
         <div className="chart-container">
-            <h1 className="chart-header">Chart</h1>
+            {/* <h1 className="chart-header">Chart</h1> */}
             <div className="radio-group">
                 <label>
                     <input

From 0bd5cb3d0dbf53de337547bfc308052040abe521 Mon Sep 17 00:00:00 2001
From: Athanasios Taprantzis <thatapras@hotmail.gr>
Date: Mon, 21 Oct 2024 18:12:29 -0400
Subject: [PATCH 5/7] Dropdown button refresh fix

---
 src/components/collapsible/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/collapsible/index.tsx b/src/components/collapsible/index.tsx
index a88866d..2c11a98 100644
--- a/src/components/collapsible/index.tsx
+++ b/src/components/collapsible/index.tsx
@@ -11,7 +11,9 @@ const Collapsible = ({style = {}, titleStyle={}, label, children}) => {
     const toogle = () => {setOpen(!isOpen)}
     return (
         <div className = "collapsible" style={style}>
-            <button onClick={toogle} className="title" style={titleStyle}>{label}{!isOpen ? (
+            {/* Do not remove type="button". Otherwise the button
+            will do a form submission on click and cause the page to refresh */}
+            <button type="button" onClick={toogle} className="title" style={titleStyle}>{label}{!isOpen ? (
                 <FaAngleDown />
               ) : (
                 <FaAngleUp />

From 53b4628d5a7512e643cf4de87842bfc9d6e0de28 Mon Sep 17 00:00:00 2001
From: Athanasios Taprantzis <thatapras@hotmail.gr>
Date: Mon, 21 Oct 2024 18:28:48 -0400
Subject: [PATCH 6/7] Admin page integration done

---
 src/components/dashboard/ContentForm.tsx     | 45 ++++++++++++++------
 src/components/dashboard/ProviderGallery.tsx |  3 +-
 src/components/dashboard/RowForm.tsx         |  9 ----
 3 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/src/components/dashboard/ContentForm.tsx b/src/components/dashboard/ContentForm.tsx
index ef35917..68ebc58 100644
--- a/src/components/dashboard/ContentForm.tsx
+++ b/src/components/dashboard/ContentForm.tsx
@@ -10,6 +10,7 @@ import { ReactComponent as CheckmarkIcon } from "../../assets/svg/checkmark.svg"
 import styles from "./ContentForm.module.css";
 import ChartComponentForm from "components/subcomponents/chartcomponents/ChartComponentForm";
 import Collapsible from "components/collapsible";
+import ProviderGallery from "./ProviderGallery";
 
 const EditableText = ({ text, setText, isEditing, setIsEditing }) => {
     const inputRef = useRef(null);
@@ -143,7 +144,7 @@ const SectionCard = ({
                 </button>
             </Row>
             {components.map((v, i) =>
-                <Row className="flex-fill m-0 w-100">
+                <Row className="flex-fill m-0 w-100" key={i}>
                     {v}
                 </Row>
             )}
@@ -158,22 +159,39 @@ const SectionCard = ({
                             fontWeight: "500",
                             fontFamily: "Inter, sans-serif",
                         }} id="dropdown-basic">
-                        Add Section
+                        + Add Filter
                     </Dropdown.Toggle>
 
                     <Dropdown.Menu>
-                        <Dropdown.Item onClick={() => setComponents([...components,
-                        <Collapsible
-                            titleStyle={{
-                                background: "white",
-                                color: "var(--chart-blue)",
-                                fontSize: "1.25rem",
-                                fontStyle: "normal",
-                                lineHeight: "24px"
-                            }} label={"Chart"}>
-                            <ChartComponentForm />
-                        </Collapsible>
+                        <Dropdown.Item onClick={() =>
+                            setComponents([...components,
+                                <Collapsible
+                                    titleStyle={{
+                                        background: "white",
+                                        color: "var(--chart-blue)",
+                                        fontSize: "1.25rem",
+                                        fontStyle: "normal",
+                                        lineHeight: "24px"
+                                    }}
+                                    label={"Chart"}>
+                                    <ChartComponentForm />
+                                </Collapsible>
                         ])}>Chart</Dropdown.Item>
+                        <Dropdown.Item onClick={() =>
+                            setComponents([...components,
+                            <Collapsible
+                                style={{width: "100%"}}
+                                titleStyle={{
+                                    background: "white",
+                                    color: "var(--chart-blue)",
+                                    fontSize: "1.25rem",
+                                    fontStyle: "normal",
+                                    lineHeight: "24px"
+                                }}
+                                label={"Gallery"}>
+                                <ProviderGallery />
+                            </Collapsible>
+                            ])}>Gallery</Dropdown.Item>
                     </Dropdown.Menu>
                 </Dropdown>
             </Row>
@@ -320,6 +338,7 @@ const ContentForm = ({ content, onChange }) => {
                 style={{
                     backgroundColor: "#E3E9F5",
                     padding: "16px 16px 28px 16px",
+                    width: "calc(100% - 264px)"
                 }}
             >
                 {selectedSection === null ? null : (
diff --git a/src/components/dashboard/ProviderGallery.tsx b/src/components/dashboard/ProviderGallery.tsx
index b988612..a444f20 100644
--- a/src/components/dashboard/ProviderGallery.tsx
+++ b/src/components/dashboard/ProviderGallery.tsx
@@ -86,13 +86,12 @@ export default function ProviderGallery({
 
     return (
         <div style={{ width: "100%", margin: "0px" }}>
+            {renderSlides()}
             {/*TO BE DELETED */}
             <div>
                 <h4>Current Data:</h4>
                 <pre>{JSON.stringify(slides, null, 2)}</pre>
             </div>
-
-            {renderSlides()}
         </div>
     );
 }
diff --git a/src/components/dashboard/RowForm.tsx b/src/components/dashboard/RowForm.tsx
index d5863ac..5a970ec 100644
--- a/src/components/dashboard/RowForm.tsx
+++ b/src/components/dashboard/RowForm.tsx
@@ -19,13 +19,6 @@ import Button from "react-bootstrap/Button";
 import ActionForm from "./ActionForm";
 import ContentForm from "./ContentForm";
 
-{
-    /*TO BE DELETED */
-}
-import ProviderGallery from "./ProviderGallery";
-{
-    /*TO BE DELETED */
-}
 const galleryData = [
     {
         title: "testVal1",
@@ -391,8 +384,6 @@ const RowForm = (props) => {
                             as="textarea"
                         />
                     </Form.Group>
-                    {/*TO BE DELETED */}
-                    <ProviderGallery slidesArray={galleryData} />
                 </>
             );
 

From da544eeaf2eed4643c77d6ce0c109a672a015e78 Mon Sep 17 00:00:00 2001
From: Athanasios Taprantzis <thatapras@hotmail.gr>
Date: Mon, 21 Oct 2024 18:53:47 -0400
Subject: [PATCH 7/7] Moved carousel to providerInfo

---
 src/components/dashboard/SingleProvider.tsx   | 57 ------------
 src/components/subcomponents/ProviderInfo.tsx | 90 ++++++++++++++++---
 2 files changed, 78 insertions(+), 69 deletions(-)

diff --git a/src/components/dashboard/SingleProvider.tsx b/src/components/dashboard/SingleProvider.tsx
index 24b9634..f55c044 100644
--- a/src/components/dashboard/SingleProvider.tsx
+++ b/src/components/dashboard/SingleProvider.tsx
@@ -6,67 +6,12 @@ import ButtonToolbar from "react-bootstrap/ButtonToolbar";
 import { Link } from "react-router-dom";
 import ProviderInfo from "../subcomponents/ProviderInfo";
 import { formRoute } from "../../routes/pathnames";
-import ProviderGalleryCarousel from "./ProviderGalleryCarousel";
 
 // updateFirestore = async () => {
 //     //Change 'ages' to the specific parameter to update
 //     await this.props.firestore.update({collection: 'providers', doc: this.state.itemUpdates['facilityName']}, {'ages': '10'});
 //     await this.props.firestore.get('providers')
 // };
-{
-    /*TO BE DELETED */
-}
-const galleryData = [
-    {
-        title: "Urban Tree Fundraiser",
-        description:
-            "Last Friday, we gathered for food, fun, and giving back at Urban Tree cidery. All proceeds from the evening went to our Bereavement fund. Everyone remembered to bring a sweater because the back deck got cold. We enjoyed drinks, games, and more!",
-        imgLink:
-            "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
-    },
-    {
-        title: "testVal2",
-        description: "testing testing",
-        imgLink:
-            "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
-    },
-    {
-        title: "testVal3",
-        description: "testing testing",
-        imgLink:
-            "https://static.vecteezy.com/system/resources/thumbnails/005/857/332/small_2x/funny-portrait-of-cute-corgi-dog-outdoors-free-photo.jpg",
-    },
-    {
-        title: "testVal4",
-        description: "testing testing",
-        imgLink:
-            "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
-    },
-    {
-        title: "testVal1",
-        description: "testing testing",
-        imgLink:
-            "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
-    },
-    {
-        title: "testVal2",
-        description: "testing testing",
-        imgLink:
-            "https://static.vecteezy.com/system/resources/thumbnails/005/857/332/small_2x/funny-portrait-of-cute-corgi-dog-outdoors-free-photo.jpg",
-    },
-    {
-        title: "testVal3",
-        description: "testing testing",
-        imgLink:
-            "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
-    },
-    {
-        title: "testVal4",
-        description: "testing testing",
-        imgLink:
-            "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
-    },
-];
 
 const SingleProvider = (props) => (
     <div>
@@ -111,8 +56,6 @@ const SingleProvider = (props) => (
         >
             <Container>
                 <ProviderInfo item={props.item} categories={props.categories} />
-                {/*TO BE DELETED */}
-                <ProviderGalleryCarousel slidesArray={galleryData} />
             </Container>
         </div>
     </div>
diff --git a/src/components/subcomponents/ProviderInfo.tsx b/src/components/subcomponents/ProviderInfo.tsx
index 0f86a87..d9f2479 100644
--- a/src/components/subcomponents/ProviderInfo.tsx
+++ b/src/components/subcomponents/ProviderInfo.tsx
@@ -11,6 +11,64 @@ import ReadMoreAndLess from "react-read-more-less";
 import LazyLoad from "react-lazy-load";
 import { GOOGLE_API_KEY } from "../../config/keys";
 import Linkify from "react-linkify";
+import ProviderGalleryCarousel from "components/dashboard/ProviderGalleryCarousel";
+import Collapsible from "components/collapsible";
+
+{
+    /*TO BE DELETED */
+}
+const galleryData = [
+    {
+        title: "Urban Tree Fundraiser",
+        description:
+            "Last Friday, we gathered for food, fun, and giving back at Urban Tree cidery. All proceeds from the evening went to our Bereavement fund. Everyone remembered to bring a sweater because the back deck got cold. We enjoyed drinks, games, and more!",
+        imgLink:
+            "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
+    },
+    {
+        title: "testVal2",
+        description: "testing testing",
+        imgLink:
+            "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
+    },
+    {
+        title: "testVal3",
+        description: "testing testing",
+        imgLink:
+            "https://static.vecteezy.com/system/resources/thumbnails/005/857/332/small_2x/funny-portrait-of-cute-corgi-dog-outdoors-free-photo.jpg",
+    },
+    {
+        title: "testVal4",
+        description: "testing testing",
+        imgLink:
+            "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
+    },
+    {
+        title: "testVal1",
+        description: "testing testing",
+        imgLink:
+            "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
+    },
+    {
+        title: "testVal2",
+        description: "testing testing",
+        imgLink:
+            "https://static.vecteezy.com/system/resources/thumbnails/005/857/332/small_2x/funny-portrait-of-cute-corgi-dog-outdoors-free-photo.jpg",
+    },
+    {
+        title: "testVal3",
+        description: "testing testing",
+        imgLink:
+            "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
+    },
+    {
+        title: "testVal4",
+        description: "testing testing",
+        imgLink:
+            "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
+    },
+];
+
 
 const ProviderInfo = (props) => {
     const [image, setImage] = useState("bog");
@@ -23,7 +81,7 @@ const ProviderInfo = (props) => {
             try {
                 const res2 = await fetch(
                     `https://maps.googleapis.com/maps/api/staticmap?center=${props.item.latitude},${props.item.longitude}&zoom=16&scale=2&size=335x250&maptype=roadmap&key=${GOOGLE_API_KEY}&format=png&visual_refresh=true` +
-                        `&markers=${props.item.latitude},${props.item.longitude}`,
+                    `&markers=${props.item.latitude},${props.item.longitude}`,
                 );
                 setStreetView(res2.url);
                 setImage(props.item.imageURL);
@@ -101,7 +159,7 @@ const ProviderInfo = (props) => {
                                         index ===
                                         props.item.address.toString().split(",")
                                             .length -
-                                            1
+                                        1
                                     ) {
                                         return (
                                             <div style={{ display: "inline" }}>
@@ -163,6 +221,14 @@ const ProviderInfo = (props) => {
                     </Card>
                 </Col>
             </Row>
+            <Row className="info-rows">
+                <Col md={12}>
+                    <Collapsible label={"Gallery"}>
+                        {/*TO BE DELETED */}
+                        <ProviderGalleryCarousel slidesArray={galleryData} />
+                    </Collapsible>
+                </Col>
+            </Row>
             <div className="modalHeader">
                 {categoriesToUse
                     .filter(
@@ -181,7 +247,7 @@ const ProviderInfo = (props) => {
                                             if (
                                                 index !==
                                                 props.item[category.id].length -
-                                                    1
+                                                1
                                             ) {
                                                 return (
                                                     <div className="modal-text">
@@ -230,9 +296,9 @@ function calculateHours(props) {
                 !props.item.hours[days[i]] ||
                 !props.item.hours[days[i - 1]] ||
                 props.item.hours[days[i]][0] !==
-                    props.item.hours[days[i - 1]][0] ||
+                props.item.hours[days[i - 1]][0] ||
                 props.item.hours[days[i]][1] !==
-                    props.item.hours[days[i - 1]][1]
+                props.item.hours[days[i - 1]][1]
             ) {
                 startandFinish.push(i - 1);
                 startandFinish.push(i);
@@ -267,13 +333,13 @@ function calculateHours(props) {
             <Col className="modal-col-flex-start">
                 {props.item.hours[days[startandFinish[i]]]
                     ? props.item.hours[days[startandFinish[i]]].map(
-                          (time, index) =>
-                              formatTime(
-                                  props.item.hours[days[startandFinish[i]]],
-                                  time,
-                                  index,
-                              ),
-                      )
+                        (time, index) =>
+                            formatTime(
+                                props.item.hours[days[startandFinish[i]]],
+                                time,
+                                index,
+                            ),
+                    )
                     : "CLOSED"}
             </Col>,
         );