fix: redirect after saving template and not saving style attributes to schema

servers/nextjs/app/(presentation-generator)/custom-template/components/SaveLayoutButton.tsx

@@ -30,7 +30,7 @@ export const SaveLayoutButton: React.FC<SaveLayoutButtonProps> = ({
         ) : (
           <>
             <FileText className="w-5 h-5 mr-2" />
-            Save Template
+            Save as Template
           </>
         )}
       </Button>

servers/nextjs/app/(presentation-generator)/custom-template/components/SaveLayoutModal.tsx

@@ -12,11 +12,12 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Loader2, Save } from "lucide-react";
+import { useRouter } from "next/navigation";
 
 interface SaveLayoutModalProps {
   isOpen: boolean;
   onClose: () => void;
-  onSave: (layoutName: string, description: string) => void;
+  onSave: (layoutName: string, description: string) => Promise<string | null>;
   isSaving: boolean;
 }
 
@@ -26,15 +27,20 @@ export const SaveLayoutModal: React.FC<SaveLayoutModalProps> = ({
   onSave,
   isSaving,
 }) => {
+  const router = useRouter();
   const [layoutName, setLayoutName] = useState("");
   const [description, setDescription] = useState("");
 
-  const handleSave = () => {
+  const handleSave = async () => {
     if (!layoutName.trim()) {
       return; // Don't save if name is empty
     }
-    onSave(layoutName.trim(), description.trim());
-    // Reset form
+    const id = await onSave(layoutName.trim(), description.trim());
+    if (id) {
+      // Redirect to the new template preview page
+      router.push(`/template-preview/custom-${id}`);
+    }
+    // Reset form after navigation decision
     setLayoutName("");
     setDescription("");
   };

servers/nextjs/app/(presentation-generator)/custom-template/hooks/useLayoutSaving.ts

@@ -78,10 +78,10 @@ export const useLayoutSaving = (
     }
   };
 
-  const saveLayout = useCallback(async (layoutName: string, description: string) => {
+  const saveLayout = useCallback(async (layoutName: string, description: string): Promise<string | null> => {
     if (!slides.length) {
       toast.error("No slides to save");
-      return;
+      return null;
     }
 
     setIsSavingLayout(true);
@@ -133,7 +133,7 @@ export const useLayoutSaving = (
 
       if (reactComponents.length === 0) {
         toast.error("No slides were successfully converted");
-        return;
+        return null;
       }
       console.log(reactComponents);
 
@@ -165,7 +165,7 @@ export const useLayoutSaving = (
 
       if (!data.success) {
         toast.error("Failed to save layout components");
-        return;
+        return null;
       }
 
       toast.success("Layout saved successfully");
@@ -178,6 +178,7 @@ export const useLayoutSaving = (
       toast.success(`Layout "${layoutName}" saved successfully`);
       refetch();
       closeSaveModal();
+      return presentationId;
     } catch (error) {
       console.error("Error saving layout:", error);
       toast.error("Failed to save layout", {
@@ -186,6 +187,7 @@ export const useLayoutSaving = (
             ? error.message
             : "An unexpected error occurred",
       });
+      return null;
     } finally {
       setIsSavingLayout(false);
     }

servers/nextjs/app/(presentation-generator)/custom-template/page.tsx

@@ -16,9 +16,11 @@ import { SaveLayoutModal } from "./components/SaveLayoutModal";
 import EachSlide from "./components/EachSlide/NewEachSlide";
 import { APIKeyWarning } from "./components/APIKeyWarning";
 import { useAPIKeyCheck } from "./hooks/useAPIKeyCheck";
+import { useRouter } from "next/navigation";
 
 
 const CustomTemplatePage = () => {
+  const router = useRouter();
   const { refetch } = useLayout();
   
   // Custom hooks for different concerns
@@ -40,6 +42,14 @@ const CustomTemplatePage = () => {
     setSlides
   );
 
+  const handleSaveTemplate = async (layoutName: string, description: string): Promise<string | null> => {
+    const id = await saveLayout(layoutName, description);
+    if (id) {
+      router.push(`/template-preview/custom-${id}`);
+    }
+    return id;
+  };
+
   const handleProcessSlideToHtml = (slide: any) => {
     processSlideToHtml(slide,0)
   }
@@ -146,7 +156,7 @@ const CustomTemplatePage = () => {
         <SaveLayoutModal
           isOpen={isModalOpen}
           onClose={closeSaveModal}
-          onSave={saveLayout}
+          onSave={handleSaveTemplate}
           isSaving={isSavingLayout}
         />
       </div>