final ui changes 2

.github/workflows/merged_arthur.yml

@@ -0,0 +1,92 @@
+name: Build and deploy Node.js app to Azure Web App - arthur
+
+on:
+  push:
+    branches:
+      - merged
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js version
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20.x'
+          cache: 'npm'  # Enable caching for faster builds
+
+      - name: Install dependencies
+        run: npm ci  # Use npm ci for clean installs
+
+      - name: Add next to PATH
+        run: echo "NODE_PATH=$NODE_PATH:./node_modules/.bin" >> $GITHUB_ENV
+
+      - name: Build Next.js app
+        env:
+          NEXT_PUBLIC_MONGODB_URI: ${{ secrets.NEXT_PUBLIC_MONGODB_URI }}
+          MONGODB_URI: ${{ secrets.MONGODB_URI }}
+          AUTH_SECRET: ${{ secrets.AUTH_SECRET }}
+          NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET }}
+          AUTH_GOOGLE_ID: ${{ secrets.AUTH_GOOGLE_ID }}
+          AUTH_GOOGLE_SECRET: ${{ secrets.AUTH_GOOGLE_SECRET }}
+          NEXT_PUBLIC_RAZORPAY_KEY_ID: ${{ secrets.NEXT_PUBLIC_RAZORPAY_KEY_ID }}
+          NEXT_PUBLIC_RAZORPAY_KEY_SECRET: ${{ secrets.NEXT_PUBLIC_RAZORPAY_KEY_SECRET }}
+          NEXT_PUBLIC_ACCOUNT_NAME: ${{ secrets.NEXT_PUBLIC_ACCOUNT_NAME }}
+          AZURE_CLIENT_ID: ${{ secrets.AZURE_CLIENT_ID }}
+          AZURE_TENANT_ID: ${{ secrets.AZURE_TENANT_ID }}
+          AZURE_CLIENT_SECRET: ${{ secrets.AZURE_CLIENT_SECRET }}
+          NEXT_PUBLIC_BASE_URL: ${{ secrets.NEXT_PUBLIC_BASE_URL }}
+        run: npm run build
+
+      # - name: Export Next.js app (if using `next export`)
+      #   run: npm run export # Omit if not using `next export`
+
+      - name: Zip artifact for deployment
+        run: zip -r release.zip .next/* public/* next.config.js package.json
+
+      - name: Upload artifact for deployment job
+        uses: actions/upload-artifact@v4
+        with:
+          name: node-app
+          path: release.zip
+
+  deploy:
+    runs-on: ubuntu-latest
+    needs: build
+    environment:
+      name: 'Production'
+      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
+    permissions:
+      id-token: write
+      contents: read
+
+    steps:
+      - name: Download artifact from build job
+        uses: actions/download-artifact@v4
+        with:
+          name: node-app
+
+      - name: Unzip artifact for deployment
+        run: unzip release.zip
+
+      - name: Login to Azure
+        uses: azure/login@v2
+        with:
+          client-id: ${{ secrets.AZUREAPPSERVICE_CLIENTID_1CA9B33B65624A8686E8C692220161C5 }}
+          tenant-id: ${{ secrets.AZUREAPPSERVICE_TENANTID_0481EE5452BA4C5D857B83FA0D9292F0 }}
+          subscription-id: ${{ secrets.AZUREAPPSERVICE_SUBSCRIPTIONID_7271CBBB60634E1BAD8423C499081264 }}
+
+      - name: 'Deploy to Azure Web App'
+        id: deploy-to-webapp
+        uses: azure/webapps-deploy@v3
+        with:
+          app-name: 'arthur'
+          slot-name: 'Production'
+          package: .

package.json

@@ -45,7 +45,8 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
-    "@types/node": "^20",
+    "@types/lodash": "^4.17.15",
+    "@types/node": "^20.17.19",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "eslint": "^9",

src/app/Start/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useCallback } from "react";
+import React, { useState, useCallback, useRef } from "react";
 import AddIcon from "@mui/icons-material/Add";
 import { FileUpload } from "@/components/ui/FileUpload";
 import { useRouter } from "next/navigation";
@@ -19,13 +19,17 @@ const Start = () => {
   const [collageImages, setCollageImages] = useState<File[]>([]);
   const router = useRouter();
   const store = useFileStore();
+  const collageInputRef = useRef<HTMLInputElement>(null);
 
-  const handleFileUpload = (files: File[]) => {
-    const existingFiles = store.filesWithConfigs.map((item) => item.file.name);
-    const newFiles = files.filter((file) => !existingFiles.includes(file.name));
+  const handleFileUpload = async (files: File[]) => {
+    const existingFiles = new Set(
+      store.filesWithConfigs.map((item) => item.file.name)
+    );
+    const newFiles = files.filter((file) => !existingFiles.has(file.name));
 
     if (newFiles.length === 0) {
-      return; // No new files to add
+      Swal.fire("Warning", "These files are already uploaded!", "warning");
+      return;
     }
 
     setFileData((prev) => [...prev, ...newFiles]);
@@ -41,13 +45,12 @@ const Start = () => {
         totalPrice: 0,
         pageSize: 0,
         configured: false,
-      }); // Add files to the store with a default config
+      });
     });
 
-    setLoading(true); // Set loading state to true
-    router.push("/new-order"); // Route to new-order page after file upload
-    setLoading(false); // Set loading state to false
-    Swal.fire("Success", "Files Uploaded", "success");
+    setLoading(true);
+    await Swal.fire("Success", "Files Uploaded", "success");
+    router.push("/new-order");
   };
 
   const handleCollageUpload = (newFiles: File[]) => {
@@ -70,24 +73,26 @@ const Start = () => {
 
   const handleCollageSave = useCallback(
     async (collageElement: HTMLElement) => {
-      setLoading(true); // Set loading state to true
+      setLoading(true);
+
+      // Allow React to update UI before heavy processing
+      await new Promise((resolve) => setTimeout(resolve, 100));
 
       try {
         const canvas = await html2canvas(collageElement, {
-          scale: 2, // Optimize scale for performance
+          scale: 1.5,
           useCORS: true,
           backgroundColor: null,
         });
 
-        const dataURL = canvas.toDataURL("image/png");
         const pdf = new jsPDF("p", "mm", "a4");
-        const imgProps = pdf.getImageProperties(dataURL);
+        const imgProps = pdf.getImageProperties(canvas.toDataURL("image/png"));
         const pdfWidth = pdf.internal.pageSize.getWidth();
         const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
 
-        pdf.addImage(dataURL, "PNG", 0, 0, pdfWidth, pdfHeight, "", "FAST");
-        const pdfBlob = pdf.output("blob");
+        pdf.addImage(canvas, "PNG", 0, 0, pdfWidth, pdfHeight, "", "FAST");
 
+        const pdfBlob = pdf.output("blob");
         const file = new File([pdfBlob], "collage.pdf", {
           type: "application/pdf",
         });
@@ -104,70 +109,62 @@ const Start = () => {
           totalPrice: 0,
           pageSize: 0,
           configured: false,
-        }); // Add the collage PDF to the store with a default config
-
-        Swal.fire("Success", "Collage Saved", "success").then(() => {
-          setIsCollageEditorOpen(false);
-          router.push("/new-order"); // Route to new-order page after saving the collage
         });
+
+        await Swal.fire("Success", "Collage Saved", "success");
+        setIsCollageEditorOpen(false);
+        router.push("/new-order");
       } catch (error) {
         console.error("Error exporting collage:", error);
         Swal.fire("Error", "Failed to export collage. Try again!", "error");
       } finally {
-        setLoading(false); // Set loading state to false
+        setLoading(false);
       }
     },
     [router, store]
   );
 
   return (
-    <div className={`bg-gray-800 max-w-2xl mx-auto p-6 mt-10`}>
+    <div className="bg-gray-800 max-w-2xl mx-auto p-6 mt-10">
       <h1 className="text-white text-4xl text-center font-semibold mb-10">
         My Prints
       </h1>
+
       {loading && (
         <div className="fixed inset-0 z-50 flex justify-center items-center flex-col bg-black bg-opacity-80">
-          <PacmanLoader
-            color="white"
-            loading={loading}
-            size={50}
-            aria-label="Loading Spinner"
-            data-testid="loader"
-          />
+          <PacmanLoader color="white" loading={loading} size={50} />
           <p className="text-gray-400 font-thin mt-6">Loading...</p>
         </div>
       )}
+
       {!loading && fileData.length === 0 && (
         <div className="flex justify-center items-center mb-4 flex-col w-full">
           <FileUpload onChange={handleFileUpload} />
           <div className="mt-4">
             <button
-              onClick={() => document.getElementById("collage-upload")?.click()}
+              onClick={() => collageInputRef.current?.click()}
               className="w-full relative inline-flex h-12 overflow-hidden rounded-full p-[1px] focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50"
             >
-              <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]" />
+              <span className="absolute inset-[-1000%] animate-spin bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]" />
               <span className="text-white inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-black px-3 py-1 text-sm font-bold backdrop-blur-3xl gap-2">
                 <AddIcon />
                 Create Collage
               </span>
             </button>
 
             <input
-              id="collage-upload"
+              ref={collageInputRef}
               type="file"
               accept=".jpg,.jpeg,.png"
               multiple
-              onChange={(e) => {
-                const newFiles = Array.from(e.target.files!);
-                handleCollageUpload(newFiles);
-              }}
+              onChange={(e) => handleCollageUpload(Array.from(e.target.files!))}
               className="hidden"
             />
           </div>
         </div>
       )}
 
-      {!loading && (
+      {!loading && fileData.length === 0 && (
         <div className="text-center py-12">
           <p className="text-white">No prints yet. Add your first document!</p>
         </div>

src/app/collageEditor/CollageEditor.tsx

@@ -28,8 +28,8 @@ const CollageEditor: React.FC<CollageEditorProps> = ({
     const imageObjects = initialImages.map((file, index) => ({
       id: index,
       url: URL.createObjectURL(file),
-      x: 50,
-      y: 50,
+      x: index * 20, // Slight shift for each photo
+      y: index * 20,
       width: 150,
       height: 150,
     }));
@@ -79,16 +79,25 @@ const CollageEditor: React.FC<CollageEditorProps> = ({
     setSelectedImage(null);
   };
 
-  const handleExportCollage = () => {
+  const handleExportCollage = async () => {
     const collageElement = document.getElementById("collage-container");
 
-    // Check if there are images inside the collage
     if (!collageElement || collageElement.children.length === 0) {
       Swal.fire("Warning", "No images in the collage to export!", "warning");
       return;
     }
 
-    onSave(collageElement); // Pass the collage element to the onSave function
+    setIsExporting(true); // Show the loader
+
+    try {
+      await new Promise((resolve) => setTimeout(resolve, 100)); // Ensure UI updates
+      await onSave(collageElement);
+    } catch (error) {
+      console.error("Error exporting collage:", error);
+      Swal.fire("Error", "Failed to export collage. Try again!", "error");
+    } finally {
+      setIsExporting(false); // Hide the loader
+    }
   };
 
   const handleAddImage = (newFiles: File[]) => {
@@ -105,11 +114,11 @@ const CollageEditor: React.FC<CollageEditorProps> = ({
       return;
     }
 
-    const newImageObjects = validFiles.map((file) => ({
+    const newImageObjects = validFiles.map((file, index) => ({
       id: Date.now() + Math.random(),
       url: URL.createObjectURL(file),
-      x: 50,
-      y: 50,
+      x: (images.length + index) * 20, // Slight shift for each new photo
+      y: (images.length + index) * 20,
       width: 150,
       height: 150,
     }));

src/app/my-prints/page.tsx

@@ -54,7 +54,7 @@ export default function OrderHistory() {
           <h1 className=" w-full text-center h-full text-xl sm:text-2xl font-bold mb-4 px-2 text-white">
             My Orders
           </h1>
-          <hr />
+          <hr className="mb-4" />
           <Suspense
             fallback={
               <div className="flex items-center justify-center min-h-[200px]">