feat: refactor Dashboard components and create TutorialCard for better modularity

app/src/components/Dashboard/DasboardUseCases.tsx

@@ -1,36 +1,35 @@
 import React, { useEffect, useState } from "react";
 import DashboardNavBar from "./DashboardNavBar";
 import { projectTutorialApi } from "../../services/dashboard/projectTutorialApi";
-import { TutorialCard } from "./DashboardTutorial";
+import { TutorialCard } from "./TutorialCard";
+import { getUserData } from "../../functions/getUserData";
+import { ALPHA_ORG } from "../../pages/Dashboard";
 
-interface Tutorial {
+const DUMMY_DATA = [
-    _id: string;
+    //remove later
-    name: string;
+    {
-    thumbnail?: string;
+        _id: "1",
-    updatedAt: string;
+        name: "Robotic Arm Control",
-}
+        thumbnail: "https://signfix.com.au/wp-content/uploads/2017/09/placeholder-600x400.png",
+        updatedAt: new Date().toISOString(),
+    },
+    {
+        _id: "2",
+        name: "Simulation Basics",
+        thumbnail: "https://signfix.com.au/wp-content/uploads/2017/09/placeholder-600x400.png",
+        updatedAt: new Date().toISOString(),
+    },
+    {
+        _id: "3",
+        name: "3D Visualization",
+        thumbnail: "https://signfix.com.au/wp-content/uploads/2017/09/placeholder-600x400.png",
+        updatedAt: new Date().toISOString(),
+    },
+];
 
 const DashboardUseCases: React.FC = () => {
-    const [useCases, setUseCases] = useState<Tutorial[]>([
+    const [useCases, setUseCases] = useState<Tutorial[]>(DUMMY_DATA || []); // default []
-        {
+    const { organization } = getUserData();
-            _id: "1",
-            name: "Robotic Arm Control",
-            thumbnail: "https://signfix.com.au/wp-content/uploads/2017/09/placeholder-600x400.png",
-            updatedAt: new Date().toISOString(),
-        },
-        {
-            _id: "2",
-            name: "Simulation Basics",
-            thumbnail: "https://signfix.com.au/wp-content/uploads/2017/09/placeholder-600x400.png",
-            updatedAt: new Date().toISOString(),
-        },
-        {
-            _id: "3",
-            name: "3D Visualization",
-            thumbnail: "https://signfix.com.au/wp-content/uploads/2017/09/placeholder-600x400.png",
-            updatedAt: new Date().toISOString(),
-        },
-    ]);
 
     useEffect(() => {
         const fetchTutorials = async () => {
@@ -52,13 +51,15 @@ const DashboardUseCases: React.FC = () => {
             <DashboardNavBar page="tutorial" />
             <div className="dashboard-container" style={{ height: "calc(100% - 87px)" }}>
                 <div className="tutorials-list">
-                    <div className="tutorials-main-header">
+                    {organization === ALPHA_ORG && (
-                        <div className="tutorial-buttons-container">
+                        <div className="tutorials-main-header">
-                            <button className="add-tutorials-button">
+                            <div className="tutorial-buttons-container">
-                                <span>+</span>
+                                <button className="add-tutorials-button">
-                            </button>
+                                    <span>+</span>
+                                </button>
+                            </div>
                         </div>
-                    </div>
+                    )}
                     {useCases.length > 0 ? (
                         useCases.map((tut) => <TutorialCard key={tut._id} tutorial={tut} />)
                     ) : (

app/src/components/Dashboard/DashboardTutorial.tsx

@@ -2,33 +2,7 @@ import React, { useEffect, useState } from "react";
 import DashboardNavBar from "./DashboardNavBar";
 import { projectTutorialApi } from "../../services/dashboard/projectTutorialApi";
 import { AIIcon } from "../icons/ExportCommonIcons";
-import { DeleteIcon } from "../icons/ContextMenuIcons";
+import { TutorialCard } from "./TutorialCard";
-
-export const TutorialCard: React.FC<{ tutorial: Tutorial }> = ({ tutorial }) => {
-    return (
-        <div className="tutorial-card-container">
-            <div
-                className="preview-container"
-                style={{
-                    backgroundImage: tutorial.thumbnail
-                        ? `url(${tutorial.thumbnail})`
-                        : "linear-gradient(135deg, #ddd, #bbb)",
-                }}
-            ></div>
-            <div className="tutorial-details">
-                <div className="context">
-                    <div className="tutorial-name">{tutorial.name}</div>
-                    <div className="updated-date">
-                        {new Date(tutorial.updatedAt).toLocaleDateString()}
-                    </div>
-                </div>
-                <div className="delete-option">
-                    <DeleteIcon />
-                </div>
-            </div>
-        </div>
-    );
-};
 
 const DashboardTutorial: React.FC = () => {
     const [tutorials, setTutorials] = useState<Tutorial[]>([]);

app/src/components/Dashboard/TutorialCard.tsx

@@ -0,0 +1,32 @@
+import { getUserData } from "../../functions/getUserData";
+import { ALPHA_ORG } from "../../pages/Dashboard";
+import { DeleteIcon } from "../icons/ContextMenuIcons";
+
+export const TutorialCard: React.FC<{ tutorial: Tutorial }> = ({ tutorial }) => {
+    const { organization } = getUserData();
+    return (
+        <div className="tutorial-card-container">
+            <div
+                className="preview-container"
+                style={{
+                    backgroundImage: tutorial.thumbnail
+                        ? `url(${tutorial.thumbnail})`
+                        : "linear-gradient(135deg, #ddd, #bbb)",
+                }}
+            ></div>
+            <div className="tutorial-details">
+                <div className="context">
+                    <div className="tutorial-name">{tutorial.name}</div>
+                    <div className="updated-date">
+                        {new Date(tutorial.updatedAt).toLocaleDateString()}
+                    </div>
+                </div>
+                {organization === ALPHA_ORG && (
+                    <div className="delete-option">
+                        <DeleteIcon />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};

app/src/pages/Dashboard.tsx

@@ -6,6 +6,8 @@ import DashboardTutorial from "../components/Dashboard/DashboardTutorial";
 import DashboardMain from "../components/Dashboard/DashboardMain";
 import DashboardUseCases from "../components/Dashboard/DasboardUseCases";
 
+export const ALPHA_ORG = "hexrfactory";
+
 const Dashboard: React.FC = () => {
     const [activeTab, setActiveTab] = useState<string>("Home");
     const { socket } = useSocketStore();