@catalystsoftware/ui 1.0.11 → 1.0.14

package/dist/components/catalyst-ui/pdf/templateBuilder.tsx

@@ -0,0 +1,1590 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { PDFDocument, rgb } from 'pdf-lib';
+// import eP from '~/utils/ext';
+ import { ActionArgs, defer, json, redirect } from '@remix-run/node';
+import {
+  //   bosPdfData,
+      Button,
+   //    endOfDayPdfData,
+      //  financingPdfData,
+         Input,
+          Label,
+       //    licensingPdfData,
+            Loading,
+//partsPdfData,
+          //    receiptPdfData,
+           //   workOrderPdfData 
+            } from "~/components/catalyst-ui";
+import { ClientOnly } from "~/utils/client-only";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "~/components/catalyst-ui";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/catalyst-ui"
+import { cn } from '~/components/catalyst-ui';
+import { GeneratePDF } from './generate_pdf';
+import { useFetcher, useLoaderData } from '@remix-run/react';
+import GuidesComponent from '@scena/react-guides';
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "~/components/catalyst-ui"
+import { getAuthSession } from '~/modules/auth/auth_session';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "~/components/catalyst-ui"
+import { Popover, PopoverContent, PopoverTrigger, } from "~/components/catalyst-ui"
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "~/components/catalyst-ui"
+import { ChevronsUpDown } from 'lucide-react';
+// import { prisma } from '~/modules/libs/prisma';
+import { authSessionStorage } from '~/modules/auth/auth_session';
+
+
+const bosPdfData = []
+const endOfDayPdfData = []
+const financingPdfData = []
+const licensingPdfData = []
+const partsPdfData = []
+const receiptPdfData = []
+const workOrderPdfData = []
+
+/**
+export async function action({ request, params }: ActionFunction) {
+  const session = await authSessionStorage.getSession(request.headers.get("Cookie"));
+    const email = session.get("email")
+     const include = {
+        EmployeeReview: {
+            include: {
+                itemsForReview: true
+
+            }
+        }
+    }
+     const user = await eP.user.include(email, include)
+    if (!user) return redirect(import.meta.env.VITE_LOGIN)
+
+    const d = Object.fromEntries(await request.formData());
+    const intent = d.intent
+
+    if (intent === 'saveTemplate') {
+        const savedDocument = await prisma.savedDocuments.findFirst({ where: { name: d.name } })
+        if (!savedDocument) {
+            await prisma.savedDocuments.create({
+                data: {
+                    name: d.name.toString(),
+                    dept: d.dept.toString(),
+                    document: JSON.parse(d.template),
+                    userEmail: user.email,
+                },
+            });
+        } else if (savedDocument) {
+            await prisma.savedDocuments.update({
+                where: { id: savedDocument.id },
+                data: {
+                    name: d.name.toString(),
+                    dept: d.dept.toString(),
+                    document: JSON.parse(d.template),
+                    userEmail: user.email,
+                },
+            });
+        }
+        return json({ success: true })
+    }
+    if (intent === 'deleteTemplate') {
+
+        await prisma.savedDocuments.delete({
+            where: { id: d.id }
+        });
+
+        return json({ success: true })
+    }
+
+}
+
+
+export async function loader({ request }: LoaderArgs) {
+    const session = await authSessionStorage.getSession(request.headers.get("Cookie"));
+    const email = session.get("email");
+    const user = await eP.user.simple(email)
+    if (!user) { return redirect(import.meta.env.VITE_LOGIN); }
+    const sampleData = {
+        // Date and Dealer Information
+        date: "2025-06-16",
+        omvic: "12345",
+        dealerName: "Maple Leaf Motors Ltd.",
+        dealerAddress: "1234 Queen Street West",
+        dealerProv: "Ontario",
+        dealerPhone: "(416) 555-0123",
+        // Customer Information
+        userName: "johnsmith2025",
+        nameloan: "John Michael Smith",
+        firstName: "John",
+        lastName: "Smith",
+        address: "456 Elm Street, Unit 12",
+        city: "Toronto",
+        province: "ON",
+        postalCode: "M5V 2A8",
+        phone: "(647) 555-7890",
+        dl: "S1234-56789-01234",
+        email: "john.smith@email.com",
+        // Vehicle Information
+        year: "2024",
+        brand: "Toyota",
+        model: "Camry LE",
+        color: "Magnetic Gray Metallic",
+        stockNum: "T24-001",
+        vin: "4T1C11AK5LU123456",
+        // Trade-in Information
+        tradeYear: "2019",
+        tradeMake: "Honda",
+        tradeDesc: "Civic LX Sedan",
+        tradeColor: "White",
+        tradeMileage: "87500",
+        tradeVin: "19XFC2F59KE123456",
+        tradeValue: "18500.00",
+        // Pricing Information
+        total: "35250.00",
+        netDiff: "16750.00",
+        newTaxAmount: "4582.50",
+        licensing: "120.00",
+        gasOnDel: "75.00",
+        lien: "0.00",
+        rebate: "1000.00",
+        subTotal: "38027.50",
+        deposit: "2500.00",
+        afterDeposit: "35527.50",
+        lienRegFee: "45.00",
+        balanceToFinance: "35572.50",
+        netAmountFinanced: "35572.50",
+        costOfBorrowing: "3245.67",
+        // Fees and Charges
+        onTax: "4582.50",
+        freight: "1895.00",
+        admin: "799.00",
+        pdi: "425.00",
+        financeFee: "695.00",
+        deliveryCharge: "150.00",
+        accessories: "1250.00",
+        totalLabour: "0.00",
+        msrp: "32500.00",
+        govern: "10.00",
+        airTax: "25.00",
+        destinationCharge: "1895.00",
+        demo: "0.00",
+        discountPer: "5.5",
+        discount: "1787.50",
+        // Insurance Products
+        lifeDisability: "2850.00",
+        commodity: "0.00",
+        tireTax: "25.00",
+        loanPercentage: "6.99",
+        extWarr: "1850.00",
+        loanProt: "895.00",
+        gap: "650.00",
+        tireandRim: "750.00",
+        vinE: "150.00",
+        rustProofing: "1200.00",
+        servicespkg: "2500.00",
+        marketAdj: "500.00",
+        // Field Names/Labels
+        namediscount: "Manufacturer Discount",
+        namelabour: "Additional Labour",
+        namefreight: "Freight & PDI",
+        nameadmin: "Administration Fee",
+        namepdi: "Pre-Delivery Inspection",
+        namecomm: "Documentation Fee",
+        nametireTax: "Tire Stewardship Fee",
+        namedeliveryCharge: "Delivery Charge",
+        nameaccessoriesTotal: "Accessories Package",
+        namedestinationCharge: "Destination Charge",
+        namegovern: "OMVIC Fee",
+        nameairTax: "A/C Tax",
+        nameDemo: "Demo Allowance",
+        namediscountPer: "Discount Percentage",
+        nameextWar: "Extended Warranty",
+        namegap: "GAP Insurance",
+        nametireandRim: "Tire & Rim Protection",
+        namenamevinE: "VIN Etching",
+        namemarketAdj: "Market Adjustment",
+        namefinanceFee: "Finance Fee",
+        namerustProt: "Rust Protection",
+        namelifeAndDis: "Life & Disability Insurance",
+        namenameservice: "Service Package",
+        // Accessories (up to 14 accessories)
+        acc1: "125.00",
+        acc2: "250.00",
+        acc3: "180.00",
+        acc4: "95.00",
+        acc5: "320.00",
+        acc6: "0.00",
+        acc7: "0.00",
+        acc8: "0.00",
+        acc9: "0.00",
+        acc10: "0.00",
+        acc11: "0.00",
+        acc12: "0.00",
+        acc13: "0.00",
+        acc14: "0.00",
+        // Accessory Names
+        nameAcc1: "Floor Mats - All Weather",
+        nameAcc2: "Block Heater Installation",
+        nameAcc3: "Window Tinting",
+        nameAcc4: "License Plate Frame",
+        nameAcc5: "Remote Starter",
+        nameAcc6: "",
+        nameAcc7: "",
+        nameAcc8: "",
+        nameAcc9: "",
+        nameAcc10: "",
+        nameAcc11: "",
+        nameAcc12: "",
+        nameAcc13: "",
+        nameAcc14: "",
+        // OMVIC Fee
+        omvicFee: "10.00",
+        nameOmvicFee: "OMVIC Fee",
+        // Additional Information
+        dealerLogo: "maple-leaf-motors-logo.png",
+        amountOfPayments: "524.67",
+        numberOfPayments: "84",
+        paymentStartDate: "2025-07-16",
+        approved: "true",
+        signature: null,
+        financingInitials: null
+    };
+
+    const templates = await prisma.savedDocuments.findMany()
+    return json({ sampleData, templates })
+}
+ */
+type PDFFile = string | File | null;
+type Position = { x: number; y: number };
+type FieldType = 'text' | 'qr' | 'signature';
+type Alignment = 'left' | 'center' | 'right';
+type VerticalAlignment = 'top' | 'middle' | 'bottom';
+interface TemplateField {
+    name: string;
+    type: FieldType;
+    fontSize?: number;
+    position: Position;
+    lineHeight?: number;
+    content?: string;
+    alignment?: Alignment;
+    width: number;
+    height: number;
+    verticalAlignment?: VerticalAlignment;
+}
+
+interface Template {
+    schemas: TemplateField[];
+    base: string;
+    inputs?: Record<string, string>[];
+}
+
+
+const GetLoading = () => {
+    return (
+        <div className='w-full h-full flex justify-center items-center' >
+            <Loading />
+        </div>
+    )
+}
+
+export default function DefaultPdf() {
+    const { sampleData, templates } = useLoaderData()
+    return (
+        <ClientOnly fallback={<GetLoading />}>
+            {() => (
+                <PdfTemplateBuilder sampleData={sampleData} templates={templates} />
+            )}
+        </ClientOnly>
+    )
+}
+
+export function PdfTemplateBuilder({ sampleData, templates }) {
+    const [template, setTemplate] = useState<Template>({ schemas: [], inputs: [], base: '', baseUri: '' });
+    const [active, setActive] = useState('Edit');
+    const [selectedField, setSelectedField] = useState<TemplateField | null>(null);
+    const [fieldName, setFieldName] = useState('');
+    const [fieldType, setFieldType] = useState('text');
+    const [previewData, setPreviewData] = useState<Record<string, string>>({});
+    const [isEditing, setIsEditing] = useState(false);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const templateInputRef = useRef<HTMLInputElement>(null);
+    const [isPdfLoading, setIsPdfLoading] = useState(false);
+    const [activeType, setActiveType] = useState('BOS');
+    const [dataArrays, setDataArrays] = useState(bosPdfData);
+    const [templatePdf, setTemplatePdf] = useState<PDFDocument | null>(null);
+    const [templateName, setTemplateName] = useState('');
+    const [dept, setDept] = useState('Sales');
+    const [height, setHeight] = useState(20);
+    const [width, setWidth] = useState(150);
+    const [font, setFont] = useState(10);
+    const [draggedField, setDraggedField] = useState<TemplateField | null>(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const [save, setSave] = useState(false);
+    const [dragPosition, setDragPosition] = useState({ x: 0, y: 0 });
+    const [dimensions, setDimensions] = useState({
+        pdfWidth: 0,
+        pdfHeight: 0,
+        containerWidth: 0,
+        containerHeight: 0
+    });
+    const horizontalRef = useRef<GuidesComponent>(null);
+    const verticalRef = useRef<GuidesComponent>(null);
+    const templateRef = useRef(null);
+    const fetcher = useFetcher()
+    const [open, setOpen] = useState(false)
+    const [value, setValue] = useState("")
+
+    const getDefaultPosition = (templatePdf) => {
+        if (!templatePdf) {
+            return { x: 50, y: 50 }; // Fallback
+        }
+
+        const [firstPage] = templatePdf.getPages();
+        const pdfWidth = firstPage.getWidth();
+        const pdfHeight = firstPage.getHeight();
+
+        return {
+            x: pdfWidth * 0.1,
+            y: pdfHeight * 0.1,
+        };
+    };
+    const containerRef = useRef<HTMLDivElement>(null);
+    const iframeRef = useRef<HTMLIFrameElement>(null);
+
+    useEffect(() => {
+        if (!containerRef.current || !templatePdf) return;
+
+        const updateSizes = () => {
+            if (!containerRef.current) return;
+
+            const containerRect = containerRef.current.getBoundingClientRect();
+            const [page] = templatePdf.getPages();
+
+            //   console.log('Container rect:', containerRect);
+            //  console.log('PDF dimensions:', { width: page.getWidth(), height: page.getHeight() });
+
+            setDimensions({
+                pdfWidth: page.getWidth(),
+                pdfHeight: page.getHeight(),
+                containerWidth: containerRect.width,
+                containerHeight: containerRect.height
+            });
+        };
+
+        // Use setTimeout to ensure the container is rendered
+        const timeoutId = setTimeout(updateSizes, 100);
+
+        // Also update on resize
+        window.addEventListener('resize', updateSizes);
+
+        return () => {
+            clearTimeout(timeoutId);
+            window.removeEventListener('resize', updateSizes);
+        };
+    }, [templatePdf, template.base]);
+
+    useEffect(() => {
+        if (activeType === 'BOS') {
+            setDataArrays(bosPdfData)
+        }
+        if (activeType === 'Financing') {
+            setDataArrays(financingPdfData)
+        }
+        if (activeType === 'Licensing') {
+            setDataArrays(licensingPdfData)
+        }
+        if (activeType === 'Work Order') {
+            setDataArrays(workOrderPdfData)
+        }
+        if (activeType === 'Receipt') {
+            setDataArrays(receiptPdfData)
+        }
+        if (activeType === 'End Of Day Report') {
+            setDataArrays(endOfDayPdfData)
+        }
+        if (activeType === 'Parts') {
+            setDataArrays(partsPdfData)
+        }
+
+        if (activeType === 'All') {
+            setDataArrays([
+                ...bosPdfData,
+                ...financingPdfData,
+                ...licensingPdfData
+            ])
+        }
+    }, [activeType]);
+
+    useEffect(() => {
+        async function LoadTemplateIfNone() {
+            const getTemplate = localStorage.getItem("template");
+            const arrayBuffer = await file.arrayBuffer();
+            const pdfDoc = await PDFDocument.load(arrayBuffer);
+            setTemplate(prev => ({
+                ...prev,
+                base: getTemplate
+            }));
+            setTemplatePdf(pdfDoc);
+        }
+        if (!template) {
+            LoadTemplateIfNone()
+        }
+
+    }, []);
+
+    useEffect(() => {
+        console.log(template, 'template')
+    }, [template]);
+
+    useEffect(() => {
+        const saveTemplate = () => {
+            const templateData = {
+                schemas: template.schemas,
+                base: template.base,
+                inputs: template.inputs
+            };
+
+            const dataStr = JSON.stringify(templateData);
+            localStorage.setItem("template", JSON.stringify(dataStr));
+            setSave(false)
+        }
+        if (save === true) {
+            saveTemplate()
+        }
+    }, [save]);
+
+    const ZOOM = 3.7795275591;
+
+    const handleDragStart = (field: TemplateField, e: React.DragEvent) => {
+        e.stopPropagation();
+
+        // Set iframe pointer events to none ONCE at the start
+        if (iframeRef.current) {
+            iframeRef.current.style.pointerEvents = 'none';
+        }
+
+        setDraggedField(field);
+        setIsDragging(true);
+
+        // Create a more subtle drag image
+        const dragImage = document.createElement('div');
+        dragImage.style.position = 'absolute';
+        dragImage.style.top = '-1000px';
+        dragImage.style.background = 'rgba(59, 130, 246, 0.8)'; // Semi-transparent blue
+        dragImage.style.border = '1px solid #3b82f6';
+        dragImage.style.borderRadius = '4px';
+        dragImage.style.padding = '4px 8px';
+        dragImage.style.fontSize = '12px';
+        dragImage.style.color = 'white';
+        dragImage.style.fontWeight = '500';
+        dragImage.textContent = field.name;
+        document.body.appendChild(dragImage);
+
+        e.dataTransfer.setDragImage(dragImage, 0, 0);
+        e.dataTransfer.effectAllowed = 'move';
+
+        // Clean up drag image
+        setTimeout(() => {
+            if (document.body.contains(dragImage)) {
+                document.body.removeChild(dragImage);
+            }
+        }, 0);
+    };
+
+    const handleDragOver = (e: React.DragEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (!isDragging || !draggedField) return;
+
+        // Update drag position for visual feedback (but don't flash the iframe)
+        const container = containerRef.current;
+        if (!container) return;
+
+        const rect = container.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+
+        // Only update position, don't touch iframe
+        setDragPosition({ x: e.clientX, y: e.clientY });
+    };
+
+    const handleDragEnd = (e: React.DragEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        // Re-enable iframe pointer events ONCE at the end
+        if (iframeRef.current) {
+            iframeRef.current.style.pointerEvents = 'auto';
+        }
+
+        setIsDragging(false);
+        setDraggedField(null);
+    };
+
+    const handleDrop = async (e: React.DragEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (!draggedField || !templatePdf) return;
+
+        // Re-enable iframe pointer events
+        if (iframeRef.current) {
+            iframeRef.current.style.pointerEvents = 'auto';
+        }
+
+        const container = containerRef.current;
+        if (!container) return;
+
+        const rect = container.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+
+        const [firstPage] = templatePdf.getPages();
+        const pdfWidth = firstPage.getWidth();
+        const pdfHeight = firstPage.getHeight();
+
+        const scaleX = dimensions.containerWidth / pdfWidth;
+        const scaleY = dimensions.containerHeight / pdfHeight;
+        const scale = Math.min(scaleX, scaleY);
+
+        // Convert to PDF coordinates
+        const newX = x / scale;
+        const newY = (pdfHeight - (y / scale)) - draggedField.height;
+
+        // Boundary enforcement
+        const boundedX = Math.max(0, Math.min(newX, pdfWidth - draggedField.width));
+        const boundedY = Math.max(0, Math.min(newY, pdfHeight - draggedField.height));
+
+
+
+        // Update the template state
+        setTemplate(prev => {
+            const updatedSchemas = prev.schemas.map(schema => {
+                if (schema.name === draggedField.name) {
+                    return {
+                        ...schema,
+                        position: { x: boundedX, y: boundedY }
+                    };
+                }
+                return schema;
+            });
+
+            const updatedTemplate = {
+                ...prev,
+                schemas: updatedSchemas
+            };
+
+            return updatedTemplate;
+        });
+
+        // Clean up drag state
+        setIsDragging(false);
+        setDraggedField(null);
+
+        // Save the template
+        setSave(true);
+    };
+    const objectRef = useRef<HTMLObjectElement>(null);
+
+    const calculatePosition = (field: TemplateField) => {
+        if (!dimensions.pdfWidth || !dimensions.pdfHeight) return { left: 0, top: 0 };
+
+        const scale = Math.min(
+            dimensions.containerWidth / dimensions.pdfWidth,
+            dimensions.containerHeight / dimensions.pdfHeight
+        );
+
+        return {
+            left: (field.position.x * scale),
+            top: ((dimensions.pdfHeight - field.position.y - field.height) * scale),
+            width: (field.width * scale),
+            height: (field.height * scale)
+        };
+    };
+
+    const convertPdfToDataUri = async (file: File): Promise<string> => {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+
+            reader.onload = () => {
+                if (reader.result) {
+                    // Convert ArrayBuffer to base64 string properly
+                    const arrayBuffer = reader.result as ArrayBuffer;
+                    const uint8Array = new Uint8Array(arrayBuffer);
+
+                    // Convert to base64
+                    let binary = '';
+                    const len = uint8Array.byteLength;
+                    for (let i = 0; i < len; i++) {
+                        binary += String.fromCharCode(uint8Array[i]);
+                    }
+                    const base64 = btoa(binary);
+
+                    // Return proper data URI format
+                    const dataUri = `data:application/pdf;base64,${base64}`;
+                    resolve(dataUri);
+                } else {
+                    reject(new Error('Failed to convert PDF to data URI'));
+                }
+            };
+
+            reader.onerror = () => {
+                reject(new Error('File reading failed'));
+            };
+
+            // Use readAsArrayBuffer instead of readAsDataURL for better control
+            reader.readAsArrayBuffer(file);
+        });
+    };
+
+    const createPdfUrl = (base64Data: string) => {
+        if (!base64Data) return '';
+
+        // Use the separate PDF route
+        const encodedData = encodeURIComponent(base64Data);
+        return `/document/components/pdf?data=${encodedData}`;
+    };
+
+    const onLoadTemplateIntoDom = async (sampleTemplate) => {
+        try {
+            // Read and parse the template file
+            const templateData = sampleTemplate
+
+            // Handle the base PDF - this is where we need to be careful
+            if (templateData.base && templateData.base.startsWith('data:application/pdf;base64,')) {
+                try {
+                    const base64Data = templateData.base.split(',')[1];
+                    const arrayBuffer = Uint8Array.from(atob(base64Data), c => c.charCodeAt(0)).buffer;
+                    const pdfDoc = await PDFDocument.load(arrayBuffer);
+
+                    // Get pages - we know there's at least one if it loaded successfully
+                    const pages = pdfDoc.getPages();
+                    const firstPage = pages[0]; // We can safely access index 0 here
+
+                    setDimensions({
+                        pdfWidth: firstPage.getWidth(),
+                        pdfHeight: firstPage.getHeight()
+                    });
+
+                    // Set the PDF reference
+                    templateRef.current = templateData.base;
+                    setTemplatePdf(pdfDoc);
+                } catch (error) {
+                    console.error("Error processing PDF:", error);
+                    // Fallback to default dimensions
+                    setDimensions({
+                        pdfWidth: 550,
+                        pdfHeight: 750
+                    });
+                }
+            }
+
+            // Set the template state - this is the crucial part
+            setTemplate({
+                schemas: templateData.schemas || [],
+                inputs: templateData.inputs || [{}],
+                base: templateData.base || '',
+                baseUri: templateData.base || ''
+            });
+
+        } catch (error) {
+            console.error("Error loading template:", error);
+            // Handle error (show message to user, etc.)
+        }
+    };
+
+
+    const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        setIsPdfLoading(true);
+        try {
+            const file = e.target.files?.[0];
+            if (!file) return;
+
+            const url = URL.createObjectURL(file);
+
+            const arrayBuffer = await file.arrayBuffer();
+            const pdfDoc = await PDFDocument.load(arrayBuffer);
+
+            const [firstPage] = pdfDoc.getPages();
+
+            setDimensions(prev => ({
+                ...prev,
+                pdfWidth: firstPage.getWidth(),
+                pdfHeight: firstPage.getHeight()
+            }));
+
+            const dataUri = await convertPdfToDataUri(file);
+            templateRef.current = dataUri;
+            setTemplate(prev => ({
+                ...prev,
+                base: dataUri,
+                baseUri: dataUri
+            }));
+
+            setTemplatePdf(pdfDoc);
+
+        } catch (error) {
+            console.error("Error loading PDF:", error);
+        } finally {
+            setIsPdfLoading(false);
+        }
+    };
+
+
+
+    const addField = async (field) => {
+        if (!templatePdf || !fieldName) return;
+
+        try {
+            // Get scale for positioning
+            const [firstPage] = templatePdf.getPages();
+            const pdfWidth = firstPage.getWidth();
+            const pdfHeight = firstPage.getHeight();
+            const scaleX = dimensions.containerWidth / pdfWidth;
+            const scaleY = dimensions.containerHeight / pdfHeight;
+            const scale = Math.min(scaleX, scaleY) * zoom;
+
+            // Create the new field object
+            const newField = {
+                name: fieldName,
+                type: fieldType,
+                position: field.position,
+                width: field.width,
+                height: field.height,
+                fontSize: field.fontSize
+            };
+
+            // SET RULERS TO THE NEW FIELD'S POSITION - THEY ARE THE SOURCE OF TRUTH
+            const screenX = field.position.x * scale;
+            const screenY = field.position.y * scale;
+
+            if (verticalRef.current) {
+                verticalRef.current.scroll(screenX);
+            }
+            if (horizontalRef.current) {
+                horizontalRef.current.scroll(screenY);
+            }
+
+            // Fixed syntax - use square brackets for dynamic key names
+            const newInput = { [fieldName]: sampleData[fieldName] };
+            setTemplate(prev => {
+                const updatedTemplate = {
+                    ...prev,
+                    schemas: [...prev.schemas, newField],
+                    inputs: [{
+                        ...(prev.inputs[0] || {}),  // Spread existing inputs if they exist
+                        ...newInput                 // Add new input properties
+                    }]
+                };
+                return updatedTemplate;
+            });
+
+            setFieldName('');
+            setSave(true);
+
+        } catch (error) {
+            console.error("Failed to add field:", error);
+        }
+    };
+
+    const updateField = async (updatedField: TemplateField) => {
+        if (!selectedField) return;
+
+        try {
+            // Only update the schema - DO NOT modify template.base
+            setTemplate(prev => ({
+                ...prev,
+                // Keep the original base PDF unchanged
+                schemas: prev.schemas.map(f =>
+                    f.name === selectedField.name ? {
+                        ...updatedField,
+                        fontSize: font
+                    } : f
+                )
+            }));
+
+            setSelectedField(null);
+
+            setSave(true);
+
+
+        } catch (error) {
+            console.error("Failed to update field:", error);
+        }
+    };
+
+    const handleFieldSelect = (field: TemplateField) => {
+        setSelectedField(field);
+        setFieldName(field.name);
+        setFieldType(field.type);
+        setIsEditing(true);
+        setActive('Edit');
+    };
+
+    const printTemplate = () => {
+        const getTemplate = {
+            schemas: template.schemas,
+            base: template.baseUri,
+            inputs: template.inputs
+        }
+        GeneratePDF(getTemplate)
+    }
+
+    const RULER_HEIGHT = 30;
+
+    const rulerRect = { left: RULER_HEIGHT, top: RULER_HEIGHT };
+
+    const guideStyle = (top: number, left: number, height: number, width: number,): React.CSSProperties => ({
+        position: 'absolute',
+        top,
+        left,
+        height,
+        width,
+        background: '#333333',
+    });
+    const [zoom, setZoom] = useState(1.0);
+
+    const _Guides = ({ paperSize, zoom, horizontalRef, verticalRef, }: {
+        paperSize: { width: number; height: number };
+        zoom: number;
+        horizontalRef: Ref<GuidesComponent> | undefined;
+        verticalRef: Ref<GuidesComponent> | undefined;
+    }) => (
+        <>
+            <div
+                className="ruler-container"
+                style={guideStyle(-RULER_HEIGHT, -RULER_HEIGHT, RULER_HEIGHT, RULER_HEIGHT)}
+            />
+            <GuidesComponent
+                zoom={zoom}
+                style={guideStyle(-RULER_HEIGHT, 0, RULER_HEIGHT, paperSize.width)}
+                type="horizontal"
+                ref={horizontalRef}
+            />
+            <GuidesComponent
+                zoom={zoom}
+                style={guideStyle(0, -RULER_HEIGHT, paperSize.height, RULER_HEIGHT)}
+                type="vertical"
+                ref={verticalRef}
+            />
+        </>
+    );
+
+    const FieldOverlayWithModes = ({
+        field,
+        isSelected,
+        onClick,
+        editMode,
+        fieldValue,
+        containerRef,
+        viewerContainerRef,
+        setTemplate,
+        setSave,
+        dimensions,
+        zoom,
+        horizontalRef,
+        verticalRef
+    }) => {
+        if (!field?.position) return null;
+
+        // 1. Get field coordinates
+        const { x: left, y: top } = field.position;
+        const width = field.width;
+        const height = field.height;
+
+        // 2. Drag state
+        const [isDragging, setIsDragging] = useState(false);
+        const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+        const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
+
+        // 3. Handle drag movement
+        const handleMouseMove = useCallback((e) => {
+            if (!isDragging) return;
+
+            // Calculate new offset from drag start
+            const newOffsetX = e.clientX - dragStart.x;
+            const newOffsetY = e.clientY - dragStart.y;
+
+            setDragOffset({ x: newOffsetX, y: newOffsetY });
+
+            // Update ruler guides with new position
+            const newX = left + newOffsetX;
+            const newY = top + newOffsetY;
+
+            horizontalRef.current?.scroll(newY);
+            verticalRef.current?.scroll(newX);
+        }, [isDragging, dragStart, left, top, horizontalRef, verticalRef]);
+
+        // 4. On drag end - save new position
+        const handleMouseUp = useCallback(() => {
+            if (!isDragging) return;
+
+            // Calculate final position
+            const finalX = left + dragOffset.x;
+            const finalY = top + dragOffset.y;
+
+            // Update template with new position
+            setTemplate(prev => ({
+                ...prev,
+                schemas: prev.schemas.map(schema =>
+                    schema.name === field.name ? {
+                        ...schema,
+                        position: { x: finalX, y: finalY },
+                        width,
+                        height
+                    } : schema
+                )
+            }));
+
+            setSave(true);
+            setIsDragging(false);
+            setDragOffset({ x: 0, y: 0 });
+        }, [isDragging, dragOffset, left, top, field.name, setTemplate, setSave, width, height]);
+
+        // 5. Set up drag event listeners
+        useEffect(() => {
+            if (isDragging) {
+                document.addEventListener('mousemove', handleMouseMove);
+                document.addEventListener('mouseup', handleMouseUp);
+                return () => {
+                    document.removeEventListener('mousemove', handleMouseMove);
+                    document.removeEventListener('mouseup', handleMouseUp);
+                };
+            }
+        }, [isDragging, handleMouseMove, handleMouseUp]);
+
+        // 6. Handle drag start
+        const handleMouseDown = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            // Record the starting mouse position
+            setDragStart({ x: e.clientX, y: e.clientY });
+            setDragOffset({ x: 0, y: 0 });
+            setIsDragging(true);
+        };
+
+        if (editMode) {
+            return (
+                <div
+                    onMouseDown={handleMouseDown}
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        onClick(field);
+                    }}
+                    className={`absolute border-2 border-dashed cursor-move flex items-center justify-center bg-background text-black ${isSelected ? 'border-green-500 bg-green-100/50' : 'border-blue-500 bg-blue-100/50'
+                        }`}
+                    style={{
+                        left: `${left + dragOffset.x}px`,
+                        top: `${top + dragOffset.y}px`,
+                        width: `${width}px`,
+                        height: `${height}px`,
+                        zIndex: isDragging ? 100 : 'auto',
+                        userSelect: 'none'
+                    }}
+                >
+                    {field.name}
+                </div>
+            );
+        }
+
+        return (
+            <div
+                className="absolute border border-none bg-transparent text-black"
+                style={{
+                    left: `${left}px`,
+                    top: `${top}px`,
+                    width: `${width}px`,
+                    height: `${height}px`
+                }}
+            >
+                {fieldValue}
+            </div>
+        );
+    };
+    const [editMode, setEditMode] = useState(true);
+
+    const PdfPreview = () => {
+        const [pdfLoaded, setPdfLoaded] = useState(false);
+        const [pdfError, setPdfError] = useState(null);
+
+        const viewerContainerRef = useRef(null);
+        const pdfContainerRef = useRef(null);
+
+        const paperSize = React.useMemo(() => {
+            if (!templateRef.current) return { width: 0, height: 0 };
+            const [firstPage] = templatePdf.getPages();
+            return {
+                width: firstPage.getWidth(),
+                height: firstPage.getHeight()
+            };
+        }, [templatePdf]);
+
+        return (
+            <div className="relative w-full h-full">
+
+
+
+                {/* Main container with rulers */}
+                <div
+                    ref={viewerContainerRef}
+                    className="absolute inset-0 bg-background overflow-auto"
+                    style={{
+                        position: 'relative',
+                        maxWidth: paperSize.width + RULER_HEIGHT,
+                    }}
+                >
+                    {/* Fixed ruler container (won't move during drag) */}
+                    <div
+                        style={{
+                            position: 'sticky',
+                            top: 0,
+                            left: 0,
+                            width: '100%',
+                            height: RULER_HEIGHT,
+                            zIndex: 20,
+                            backgroundColor: '#09090b'
+                        }}
+                    >
+                        {/* Horizontal ruler */}
+                        <GuidesComponent
+                            type="horizontal"
+                            ref={horizontalRef}
+                            style={{
+                                left: RULER_HEIGHT,
+                                width: paperSize.width,
+                                height: RULER_HEIGHT
+                            }}
+                        />
+                    </div>
+
+                    {/* Content area with left ruler */}
+                    <div style={{ display: 'flex' }}>
+                        {/* Left ruler container (fixed) */}
+                        <div
+                            style={{
+                                position: 'sticky',
+                                left: 0,
+                                width: RULER_HEIGHT,
+                                height: paperSize.height,
+                                zIndex: 20,
+                                backgroundColor: '#09090b'
+                            }}
+                        >
+                            <GuidesComponent
+                                type="vertical"
+                                ref={verticalRef}
+                                style={{
+                                    width: RULER_HEIGHT,
+                                    height: paperSize.height
+                                }}
+                            />
+                        </div>
+
+                        {/* PDF content area */}
+                        <div
+                            style={{
+                                position: 'relative',
+                                width: paperSize.width,
+                                height: paperSize.height
+                            }}
+                        >
+                            <div
+                                ref={pdfContainerRef}
+                                className="relative bg-background shadow-lg"
+                                style={{
+                                    width: '100%',
+                                    height: '100%'
+                                }}
+                            >
+                                <object
+                                    data={`${templateRef.current}#toolbar=0&navpanes=0&scrollbar=0&view=FitH`}
+                                    type="application/pdf"
+                                    className="w-full h-full"
+                                    style={{ userSelect: 'none' }}
+                                    onLoad={() => setPdfLoaded(true)}
+                                    onError={() => setPdfError('Failed to load PDF')}
+                                >
+                                    {/* Fallback content */}
+                                </object>
+
+                                {/* Field overlays */}
+                                {template.schemas?.map((field, index) => (
+                                    <FieldOverlayWithModes
+                                        key={`${field.name}-${index}`}
+                                        field={field}
+                                        isSelected={selectedField?.name === field.name}
+                                        onClick={handleFieldSelect}
+                                        editMode={editMode}
+                                        fieldValue={sampleData[field.name]}
+                                        containerRef={pdfContainerRef}
+                                        viewerContainerRef={viewerContainerRef}
+                                        setTemplate={setTemplate}
+                                        setSave={setSave}
+                                        dimensions={dimensions}
+                                        horizontalRef={horizontalRef}
+                                        verticalRef={verticalRef}
+                                    />
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+    const saveTemplate = () => {
+        const getTemplate = {
+            schemas: template.schemas,
+            base: template.base,
+            inputs: template.inputs
+        };
+
+        const jsonString = JSON.stringify(getTemplate, null, 2);
+
+        const blob = new Blob([jsonString], { type: "application/json" });
+
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = "template.json";  // Set the filename
+
+        document.body.appendChild(a);
+        a.click();
+
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+
+        setSave(true);  // Your existing state update
+    };
+
+    const onLoadTemplate = async (e) => {
+        const file = e.target.files?.[0];
+        if (!file) return;
+
+        try {
+            // Read and parse the template file
+            const fileText = await file.text();
+            const templateData = JSON.parse(fileText);
+
+            // Handle the base PDF - this is where we need to be careful
+            if (templateData.base && templateData.base.startsWith('data:application/pdf;base64,')) {
+                try {
+                    const base64Data = templateData.base.split(',')[1];
+                    const arrayBuffer = Uint8Array.from(atob(base64Data), c => c.charCodeAt(0)).buffer;
+                    const pdfDoc = await PDFDocument.load(arrayBuffer);
+
+                    // Get pages - we know there's at least one if it loaded successfully
+                    const pages = pdfDoc.getPages();
+                    const firstPage = pages[0]; // We can safely access index 0 here
+
+                    setDimensions({
+                        pdfWidth: firstPage.getWidth(),
+                        pdfHeight: firstPage.getHeight()
+                    });
+
+                    // Set the PDF reference
+                    templateRef.current = templateData.base;
+                    setTemplatePdf(pdfDoc);
+                } catch (error) {
+                    console.error("Error processing PDF:", error);
+                    // Fallback to default dimensions
+                    setDimensions({
+                        pdfWidth: 550,
+                        pdfHeight: 750
+                    });
+                }
+            }
+
+            // Set the template state - this is the crucial part
+            setTemplate({
+                schemas: templateData.schemas || [],
+                inputs: templateData.inputs || [{}],
+                base: templateData.base || '',
+                baseUri: templateData.base || ''
+            });
+
+        } catch (error) {
+            console.error("Error loading template:", error);
+            // Handle error (show message to user, etc.)
+        }
+    };
+
+    const [manageTemplate, setManageTemplate] = useState();
+
+
+
+    return (
+        <div className="h-[100vh] text-foreground overflow-hidden">
+            <h1 className='ml-4 mt-3'>PDF Template Builder</h1>
+
+            <div className="flex h-full gap-4">
+                <div className="w-1/4 overflow-auto p-4">
+                    <div className="tabs">
+
+                        <Tabs defaultValue="Edit">
+                            <TabsList>
+                                <TabsTrigger value="Edit">Edit</TabsTrigger>
+                                <TabsTrigger value="Fields">Fields</TabsTrigger>
+                                <TabsTrigger value="Templates">Templates</TabsTrigger>
+                            </TabsList>
+                            <TabsContent value="Edit">
+                                <div className="tab-content h-full">
+                                    <div className="edit-tab grid gap-3">
+                                        <Button
+variant='styled'
+                                            onClick={() => fileInputRef.current?.click()}
+                                        >
+                                            Upload Base PDF
+                                        </Button>
+                                        <input
+                                            ref={fileInputRef}
+                                            type="file"
+                                            accept=".pdf"
+                                            onChange={handleFileUpload}
+                                            style={{ display: 'none' }}
+                                        />
+                                        <Button
+variant='styled'
+                                            primary={false}
+                                            onClick={() => templateInputRef.current?.click()}
+                                        >
+                                            Load Template
+                                        </Button>
+                                        <input
+                                            ref={templateInputRef}
+                                            type="file"
+                                            accept=".json"
+                                            onChange={onLoadTemplate}
+                                            style={{ display: 'none' }}
+                                        />
+                                        {template.base && (
+                                            <>
+                                                {isEditing ? (
+                                                    <div className="field-form grid gap-3">
+                                                        <div className="grid w-full max-w-sm items-center gap-3">
+                                                            <Label>Height</Label>
+                                                            <Input
+                                                                className='bg-background text-foreground  rounded-none '
+                                                                value={height}
+                                                                onChange={(e) => setHeight(Number(e.target.value))}
+                                                            />
+                                                        </div>
+                                                        <div className="grid w-full max-w-sm items-center gap-3">
+                                                            <Label>Width</Label>
+                                                            <Input
+                                                                className='bg-background text-foreground  rounded-none '
+                                                                value={width}
+                                                                onChange={(e) => setWidth(Number(e.target.value))}
+                                                            />
+                                                        </div>
+                                                        <Button
+variant='styled'
+                                                            onClick={() => updateField({
+                                                                ...selectedField!,
+                                                                name: fieldName,
+                                                                type: fieldType,
+                                                                font: font,
+                                                                width: width,
+                                                                height: height,
+                                                            })}
+                                                        >
+                                                            Update Field
+                                                        </Button>
+                                                        <Button
+variant='styled'
+                                                            primary={false}
+                                                            onClick={() => {
+                                                                setActive('Fields')
+                                                                setIsEditing(false)
+                                                                setWidth(150)
+                                                                setHeight(20)
+                                                            }}
+                                                        >
+                                                            Back
+                                                        </Button>
+                                                    </div>
+                                                ) : (
+                                                    <div className='grid gap-3'>
+                                                        <div className="grid w-full max-w-sm items-center gap-3">
+                                                            <Label>Select A Type</Label>
+                                                            <select
+                                                                value={activeType}
+                                                                onChange={(e) => setActiveType(e.target.value as FieldType)}
+                                                                className="px-3 py-2 border rounded-none bg-background w-full"
+                                                            >
+                                                                <option value="BOS">BOS</option>
+                                                                <option value="Financing">Financing</option>
+                                                                <option value="Licensing">Licensing</option>
+                                                                <option value="Work Order">Work Order</option>
+                                                                <option value="Receipt">Receipt</option>
+                                                                <option value="End Of Day Report">End Of Day Report</option>
+                                                                <option value="Parts">Parts</option>
+                                                            </select>
+                                                        </div>
+                                                        <div className="grid w-full max-w-sm items-center gap-3">
+                                                            <Label>Select A Field</Label>
+                                                            <select
+                                                                value={fieldName}
+                                                                onChange={(e) => {
+                                                                    e.persist();
+                                                                    const selectedItem = dataArrays.find(item => item.name === e.target.value);
+                                                                    if (selectedItem) {
+                                                                        setFieldName(selectedItem.name);
+                                                                        setFieldType(selectedItem.type);
+                                                                    }
+                                                                }}
+                                                                className="px-3 py-2 border rounded-none bg-background w-full"
+                                                            >
+                                                                {dataArrays.map((item, index) => (
+                                                                    <option key={index} value={item.name}>
+                                                                        {item.placeholder}
+                                                                    </option>
+                                                                ))}
+                                                            </select>
+                                                        </div>
+                                                        <Button
+variant='styled'
+                                                            onClick={() => addField({
+                                                                type: fieldType,
+                                                                position: getDefaultPosition(templatePdf),
+                                                                width: width,
+                                                                height: height,
+                                                                fontSize: font
+                                                            })}
+                                                        >
+                                                            Add Field
+                                                        </Button>
+                                                    </div>
+                                                )}
+                                                <Button
+variant='styled'
+                                                    primary={false}
+                                                    onClick={() => setEditMode(!editMode)}
+                                                >
+                                                    {editMode ? 'Preview Mode' : 'Edit Mode'}
+                                                </Button>
+                                                <AlertDialog>
+                                                    <AlertDialogTrigger asChild>
+                                                        <Button
+variant='styled'
+                                                            primary={false}
+                                                        >
+                                                            Save Template
+                                                        </Button>
+                                                    </AlertDialogTrigger>
+                                                    <AlertDialogContent>
+                                                        <AlertDialogHeader>
+                                                            <AlertDialogTitle></AlertDialogTitle>
+                                                            <AlertDialogDescription>
+                                                                <div className="grid w-full max-w-sm items-center gap-1.5">
+                                                                    <Label>Name</Label>
+                                                                    <Input value={templateName} onChange={(e) => {
+                                                                        setTemplateName(e.currentTarget.value)
+                                                                    }} />
+                                                                </div>
+                                                                <div className="grid w-full max-w-sm items-center gap-1.5">
+                                                                    <Label>Dept</Label>
+                                                                    <Select value={dept} onValueChange={(value) => {
+                                                                        setDept(value)
+                                                                    }}>
+                                                                        <SelectTrigger >
+                                                                            <SelectValue />
+                                                                        </SelectTrigger>
+                                                                        <SelectContent>
+                                                                            <SelectItem value="Sales">Sales</SelectItem>
+                                                                            <SelectItem value="Service">Service</SelectItem>
+                                                                            <SelectItem value="PAC">PAC</SelectItem>
+                                                                            <SelectItem value="Office">Office</SelectItem>
+                                                                        </SelectContent>
+                                                                    </Select>
+                                                                </div>
+                                                            </AlertDialogDescription>
+                                                        </AlertDialogHeader>
+                                                        <AlertDialogFooter>
+                                                            <AlertDialogCancel>Cancel</AlertDialogCancel>
+                                                            <AlertDialogAction onClick={saveTemplate}>Continue</AlertDialogAction>
+                                                        </AlertDialogFooter>
+                                                    </AlertDialogContent>
+                                                </AlertDialog>
+
+                                                <Button
+variant='styled'
+                                                    primary={false}
+                                                    onClick={() => {
+                                                        printTemplate()
+                                                    }}
+                                                >
+                                                    Print Test PDF
+                                                </Button>
+                                                <Dialog>
+                                                    <DialogTrigger>
+                                                        <Button
+variant='styled' primary={false}    >
+                                                            Save Template To Database
+                                                        </Button>
+                                                    </DialogTrigger>
+                                                    <DialogContent>
+                                                        <DialogHeader>
+                                                            <DialogTitle>Saving Template To Database</DialogTitle>
+                                                        </DialogHeader>
+                                                        <div className='grid gap-3'>
+                                                            <div className="grid w-full max-w-sm items-center gap-3">
+                                                                <Label>Name</Label>
+                                                                <Input value={templateName} onChange={(e) => { setTemplateName(e.currentTarget.value) }} />
+                                                            </div>
+                                                            <div className="grid w-full max-w-sm items-center gap-3">
+                                                                <Label>Name</Label>
+                                                                <Select value={dept} onValueChange={(value) => { setDept(value) }}>
+                                                                    <SelectTrigger >
+                                                                        <SelectValue />
+                                                                    </SelectTrigger>
+                                                                    <SelectContent>
+                                                                        <SelectGroup>
+                                                                            <SelectLabel>Depts</SelectLabel>
+                                                                            <SelectItem value="Sales">Sales</SelectItem>
+                                                                            <SelectItem value="Service">Service</SelectItem>
+                                                                            <SelectItem value="Parts">Parts</SelectItem>
+                                                                            <SelectItem value="Accessories">Accessories</SelectItem>
+                                                                            <SelectItem value="Office">Office</SelectItem>
+                                                                            <SelectItem value="Management">Management</SelectItem>
+                                                                        </SelectGroup>
+                                                                    </SelectContent>
+                                                                </Select>
+                                                            </div>
+                                                        </div>
+                                                        <DialogFooter className='grid gap-3'>
+                                                            <DialogClose asChild>
+                                                                <Button
+variant='styled' primary={false}>Cancel</Button>
+                                                            </DialogClose>
+                                                            <Button
+variant='styled'
+                                                                onClick={() => {
+                                                                    const formData = new FormData();
+                                                                    formData.append("name", templateName);
+                                                                    formData.append("dept", dept);
+                                                                    formData.append("template", JSON.stringify(template));
+                                                                    formData.append("intent", "saveTemplate");
+                                                                    fetcher.submit(formData, { method: "post" });
+
+                                                                }} >Save changes</Button>
+                                                        </DialogFooter>
+                                                    </DialogContent>
+                                                </Dialog>
+                                            </>
+                                        )}
+                                    </div>
+                                </div>
+                            </TabsContent>
+                            <TabsContent value="Fields">
+                                <div className="edit-tab grid gap-3">
+                                    <h3>Fields ({template.schemas.length})</h3>
+                                    <div className="grid gap-2">
+                                        {template.schemas.map((field, index) => (
+                                            <div
+                                                key={`field-${field.name}-${index}`}
+                                                onClick={() => handleFieldSelect(field)}
+                                                className={`p-3 border rounded-none cursor-pointer text-foreground bg-background ${selectedField?.name === field.name
+                                                    ? 'bg-background border-blue-500'
+                                                    : 'hover:bg-background hover:text-foreground'
+                                                    }`}
+                                            >
+                                                <div className="font-semibold">{field.name}</div>
+                                                <div className="text-sm text-foreground">
+                                                    Type: {field.type} | Size: {field.width}×{field.height}
+                                                </div>
+                                                <div className="text-xs text-foreground">
+                                                    Position: ({Math.round(field.position.x)}, {Math.round(field.position.y)})
+                                                </div>
+                                            </div>
+                                        ))}
+                                    </div>
+                                    {template.schemas.length === 0 && (
+                                        <p className="text-foreground text-sm">No fields added yet</p>
+                                    )}
+                                </div>
+                            </TabsContent>
+                            <TabsContent value="Templates" className='flex flex-col gap-3'>
+
+                                <div className="grid w-full max-w-sm items-center gap-3">
+                                    <Label>Templates</Label>
+                                    <Popover open={open} onOpenChange={setOpen}>
+                                        <PopoverTrigger asChild>
+                                            <Button
+                                                variant="outline"
+                                                role="combobox"
+                                                aria-expanded={open}
+                                                className="w-[200px] justify-between"
+                                            >
+                                                {value
+                                                    ? templates.find((t) => t.name === value.name)?.name
+                                                    : "Select template..."}
+                                                <ChevronsUpDown className="opacity-50" />
+                                            </Button>
+                                        </PopoverTrigger>
+                                        <PopoverContent className="w-[200px] p-0">
+                                            <Command>
+                                                <CommandInput placeholder="Search templates..." className="h-9" />
+                                                <CommandList>
+                                                    <CommandEmpty>No template found.</CommandEmpty>
+                                                    <CommandGroup>
+                                                        {templates.map((t, index) => (
+                                                            <CommandItem
+                                                                key={index}
+                                                                value={t}
+                                                                onSelect={(currentValue) => {
+                                                                    setValue(currentValue.name === value.name ? "" : currentValue)
+                                                                    setManageTemplate(t)
+                                                                    onLoadTemplateIntoDom(t.document)
+                                                                    setTemplateName(t.name)
+                                                                    setDept(t.dept)
+                                                                }}
+                                                            >
+                                                                {t.name}
+                                                                <Check
+                                                                    className={cn(
+                                                                        "ml-auto",
+                                                                        value === t.value ? "opacity-100" : "opacity-0"
+                                                                    )}
+                                                                />
+                                                            </CommandItem>
+                                                        ))}
+                                                    </CommandGroup>
+                                                </CommandList>
+                                            </Command>
+                                        </PopoverContent>
+                                    </Popover>
+                                </div>
+
+                                {manageTemplate && manageTemplate.id && (<>
+                                    <Button
+variant='styled' primary={false} onClick={() => {
+                                        const formData = new FormData();
+                                        formData.append("id", manageTemplate.id);
+                                        formData.append("intent", "deleteTemplate");
+                                        fetcher.submit(formData, { method: "post" });
+                                    }}>
+                                        Delete Current Template
+                                    </Button>
+                                </>)}
+
+
+                            </TabsContent>
+                        </Tabs>
+
+                    </div>
+                </div>
+
+                <div className="pdf-preview-container flex-1">
+                    {isPdfLoading ? (
+                        <GetLoading />
+                    ) : templateRef.current ? (
+                        <PdfPreview />
+                    ) : (
+                        <div className="flex items-center justify-center h-full">
+                            <p>Upload a PDF template to begin</p>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}
+