+ console.log('Search clicked')}
+ />
+
+ );
+};
+```
+
+### Reusable Components Guidelines:
+- **Identify Reusability**: If a component is used in multiple places, move it to `/src/components/common/`
+- **Props Interface**: Always define proper TypeScript interfaces for component props
+- **Generic Components**: Create generic, configurable components that can be reused
+- **Documentation**: Document props and usage examples for reusable components
+- **Export Pattern**: Use proper export patterns for common components
+
+#### Example Reusable Component Structure:
+```typescript
+// /src/components/common/Button.tsx
+interface ButtonProps {
+ label: string;
+ onClick: () => void;
+ variant?: 'primary' | 'secondary';
+ size?: 'small' | 'medium' | 'large';
+ disabled?: boolean;
+ className?: string;
+}
+
+export const Button: React.FC
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+
+
+ );
+ }
+
+ if (empty) {
+ return (
+
+ window.location.reload()}
+ />
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+ );
+};
+
+export default ExplorePage;
diff --git a/frontend/src/app/dashboard/layout.tsx b/frontend/src/app/dashboard/layout.tsx
new file mode 100644
index 0000000..560e353
--- /dev/null
+++ b/frontend/src/app/dashboard/layout.tsx
@@ -0,0 +1,21 @@
+'use client';
+import { Navbar } from '@/components/Navbar';
+import { Sidebar } from '@/components/Sidebar';
+import { useState } from 'react';
+
+export default function RootLayout({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) {
+ const [isOpen, setIsOpen] = useState(false);
+ return (
+
+
+
+
+
+ {filteredModels.length === 0 && searchTerm.trim() !== '' ? (
+
+
+
+ ) : (
+ filteredModels.map((model) => (
+
+
+ );
+}
diff --git a/frontend/src/app/dashboard/modelviewer/[id]/page.tsx b/frontend/src/app/dashboard/modelviewer/[id]/page.tsx
new file mode 100644
index 0000000..50d45e4
--- /dev/null
+++ b/frontend/src/app/dashboard/modelviewer/[id]/page.tsx
@@ -0,0 +1,72 @@
+'use client';
+import { useState, useEffect } from 'react';
+import { useParams } from 'next/navigation';
+import { Paragraph } from '@components';
+import { getConvertedFileURL } from '@utils/ConvertedFileURL';
+import { ModelViewer } from 'ogv-viewer-package';
+import 'ogv-viewer-package/dist/index.css';
+
+const ModelViewerPage = () => {
+ const params = useParams();
+ const modelId = params.id as string;
+ const [modelUrl, setModelUrl] = useState
+
+ {children}
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+
+
+ );
+ }
+
+ if (!modelUrl) return null;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ convertAndDownload(
+ fileInformation.file,
+ selectedFormats,
+ downloadLinkRef,
+ resetFormats
+ )
+ }
+ disabled={isConverted}
+ />
+
+ )}
+
+
+
+
+
+ {!imageUrl && (
+ 
+ )}
+
+
+
+ )}
+ {imageUrl && (
+
+