/**
 * JF Creations Costing System - Consolidated React Component Bundle
 * Provides atomic compilation for Babel Standalone without async race conditions.
 */

const { useState, useEffect, useRef, Component } = React;

// --- 0. EMBEDDED ATTACHMENT MEDIA PARSER ---
function parseAttachmentMedia(bbcode) {
    if (!bbcode || typeof bbcode !== 'string') {
        return { type: 'empty', url: null, imageUrl: null, linkUrl: null, isIframeBlockable: false };
    }
    
    const text = bbcode.trim();
    if (!text) {
        return { type: 'empty', url: null, imageUrl: null, linkUrl: null, isIframeBlockable: false };
    }

    let imageUrl = null;
    let linkUrl = null;
    let iframeSrc = null;
    let rawUrl = null;

    // 1. Extract [img]...[/img] (Priority 1 for direct images)
    const imgBbcodeMatch = text.match(/\[img\](.*?)\[\/img\]/i);
    if (imgBbcodeMatch) {
        imageUrl = imgBbcodeMatch[1].trim();
    }

    // 2. Extract [url=...] (Link container around img or text)
    const urlAttrMatch = text.match(/\[url=([^\]]+)\]/i);
    if (urlAttrMatch) {
        linkUrl = urlAttrMatch[1].trim().replace(/^['"]|['"]$/g, '');
    }

    // 3. Extract [url]...[/url]
    const urlTagMatch = text.match(/\[url\](.*?)\[\/url\]/i);
    if (urlTagMatch && !linkUrl) {
        linkUrl = urlTagMatch[1].trim();
    }

    // 4. Extract <iframe src="...">
    const iframeMatch = text.match(/<iframe\b[^>]*\bsrc=["']([^"']+)["']/i);
    if (iframeMatch) {
        iframeSrc = iframeMatch[1].trim();
    }

    // 5. Extract <img src="...">
    const htmlImgMatch = text.match(/<img\b[^>]*\bsrc=["']([^"']+)["']/i);
    if (htmlImgMatch && !imageUrl) {
        imageUrl = htmlImgMatch[1].trim();
    }

    // 6. Direct Raw URL matching
    const rawUrlMatch = text.match(/^(https?:\/\/[^\s<>[\]]+)$/i);
    if (rawUrlMatch) {
        rawUrl = rawUrlMatch[1].trim();
    }

    const isDirectImage = (u) => {
        if (!u || typeof u !== 'string') return false;
        const clean = u.split('?')[0].toLowerCase();
        const isImageExt = /\.(jpg|jpeg|png|gif|webp|svg|bmp|ico)$/i.test(clean);
        const isImageHost = /(i\.ibb\.co|i\.imgur\.com|postimg\.cc\/raw|res\.cloudinary\.com)/i.test(u);
        return isImageExt || isImageHost;
    };

    if (imageUrl) {
        return {
            type: 'image',
            url: imageUrl,
            imageUrl: imageUrl,
            linkUrl: linkUrl || imageUrl,
            isIframeBlockable: false
        };
    }

    const candidateUrl = linkUrl || iframeSrc || rawUrl;
    if (candidateUrl) {
        if (isDirectImage(candidateUrl)) {
            return {
                type: 'image',
                url: candidateUrl,
                imageUrl: candidateUrl,
                linkUrl: candidateUrl,
                isIframeBlockable: false
            };
        }

        const isKnownIframeBlocker = /(ibb\.co\/|imgbb\.com\/|imgur\.com\/(?!gallery\/)|postimg\.cc\/(?!raw\/))/i.test(candidateUrl);

        if (iframeSrc) {
            return {
                type: 'iframe',
                url: iframeSrc,
                imageUrl: null,
                linkUrl: candidateUrl,
                isIframeBlockable: isKnownIframeBlocker
            };
        }

        return {
            type: isKnownIframeBlocker ? 'blocked_host' : 'embed',
            url: candidateUrl,
            imageUrl: null,
            linkUrl: candidateUrl,
            isIframeBlockable: isKnownIframeBlocker
        };
    }

    return {
        type: 'text',
        url: null,
        imageUrl: null,
        linkUrl: null,
        isIframeBlockable: false
    };
}
window.parseAttachmentMedia = parseAttachmentMedia;

// --- 1. ERROR BOUNDARY (Prevents entire screen from ever going blank) ---
class ErrorBoundary extends Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false, error: null };
    }

    static getDerivedStateFromError(error) {
        return { hasError: true, error };
    }

    componentDidCatch(error, errorInfo) {
        console.error("React Error caught by boundary:", error, errorInfo);
    }

    render() {
        if (this.state.hasError) {
            return (
                <div className="min-h-screen flex items-center justify-center bg-[#F4F5F3] p-4 font-sans">
                    <div className="bg-white p-6 rounded-sm border border-[#CDD4D0] shadow-md max-w-md w-full text-center">
                        <div className="w-12 h-12 rounded-full bg-[#FCF0F0] text-[#DC2626] flex items-center justify-center mx-auto mb-3">
                            <Icons.AlertCircle className="w-6 h-6" />
                        </div>
                        <h3 className="font-bold text-[#2A3B32] text-base mb-2">Something went wrong</h3>
                        <p className="text-xs text-[#6B7C72] mb-4">
                            An unexpected interface error occurred. You can safely reload the application.
                        </p>
                        <div className="bg-[#F4F5F3] p-2.5 rounded-sm border border-[#CDD4D0] text-left text-[11px] font-mono text-[#DC2626] mb-4 break-all max-h-24 overflow-y-auto">
                            {this.state.error?.message || 'Unknown error'}
                        </div>
                        <button
                            onClick={() => window.location.reload()}
                            className="bg-[#546F60] text-white px-5 py-2 rounded-sm font-bold text-xs hover:bg-[#43594D] transition-colors"
                        >
                            Reload Application
                        </button>
                    </div>
                </div>
            );
        }
        return this.props.children;
    }
}

// --- 2. SVG ICONS ---
const Icons = {
    Briefcase: (props) => (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
            <rect width="20" height="14" x="2" y="7" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
        </svg>
    ),
    Database: (props) => (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
            <ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19A9 3 0 0 0 21 19V5"/><path d="M3 12A9 3 0 0 0 21 12"/>
        </svg>
    ),
    LogOut: (props) => (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/>
        </svg>
    ),
    Plus: (props) => (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
            <path d="M5 12h14"/><path d="M12 5v14"/>
        </svg>
    ),
    Edit2: (props) => (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
            <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/>
        </svg>
    ),
    X: (props) => (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
            <path d="M18 6 6 18"/><path d="m6 6 12 12"/>
        </svg>
    ),
    Filter: (props) => (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
            <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>
        </svg>
    ),
    Save: (props) => (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
            <path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"/><path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"/><path d="M7 3v4a1 1 0 0 0 1 1h7"/>
        </svg>
    ),
    Clock: (props) => (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
            <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
        </svg>
    ),
    CheckCircle2: (props) => (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
            <circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>
        </svg>
    ),
    AlertCircle: (props) => (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
            <circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/>
        </svg>
    ),
    FileSpreadsheet: (props) => (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
            <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/><path d="M8 13h2"/><path d="M8 17h2"/><path d="M14 13h2"/><path d="M14 17h2"/>
        </svg>
    ),
    Check: (props) => (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
            <polyline points="20 6 9 17 4 12"/>
        </svg>
    ),
    Trash: (props) => (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
            <path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/>
        </svg>
    ),
    Search: (props) => (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
            <circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>
        </svg>
    ),
    Table: (props) => (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
            <path d="M15 3v18"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M21 9H3"/><path d="M21 15H3"/>
        </svg>
    ),
    ChevronRight: (props) => (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
            <path d="m9 18 6-6-6-6"/>
        </svg>
    ),
    Printer: (props) => (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
            <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><path d="M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6"/><rect width="12" height="8" x="6" y="14" rx="1"/>
        </svg>
    ),
    Copy: (props) => (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
            <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
        </svg>
    ),
    Eye: (props) => (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
            <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/>
        </svg>
    ),
    ExternalLink: (props) => (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
            <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" x2="21" y1="14" y2="3"/>
        </svg>
    ),
    FileText: (props) => (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
            <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/><line x1="16" x2="8" y1="13" y2="13"/><line x1="16" x2="8" y1="17" y2="17"/><line x1="10" x2="8" y1="9" y2="9"/>
        </svg>
    ),
    Tag: (props) => (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
            <path d="M12 2H2v10l9.29 9.29c.94.94 2.48.94 3.42 0l6.58-6.58c.94-.94.94-2.48 0-3.42L12 2Z"/>
            <path d="M7 7h.01"/>
        </svg>
    )
};
window.Icons = Icons;

// --- 3. TOAST COMPONENT ---
function Toast({ message, type, onClose }) {
    useEffect(() => {
        const timer = setTimeout(onClose, 3000);
        return () => clearTimeout(timer);
    }, [onClose]);

    return (
        <div className={`fixed top-4 right-4 z-[9999] flex items-center p-4 mb-4 text-sm text-white rounded-sm shadow-lg toast-enter ${type === 'error' ? 'bg-[#8C3A3A] border border-[#A65555]' : 'bg-[#117843] border border-[#1B4D3E]'}`}>
            <span className="font-semibold">{message}</span>
            <button onClick={onClose} className="ml-4 text-white hover:text-gray-200 font-bold text-lg leading-none">×</button>
        </div>
    );
}

// --- 4. SEARCHABLE SELECT ---
function SearchableSelect({ value, onChange, options, disabled, className, placeholder, category, moduleName, onAddNewMaster }) {
    const [isOpen, setIsOpen] = useState(false);
    const [search, setSearch] = useState('');
    const wrapperRef = useRef(null);

    useEffect(() => {
        const handleClickOutside = (event) => {
            if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
                setIsOpen(false);
                setSearch('');
            }
        };
        document.addEventListener('mousedown', handleClickOutside);
        return () => document.removeEventListener('mousedown', handleClickOutside);
    }, []);

    const displayValue = isOpen ? search : (value || '');
    const filteredOptions = (options || []).filter(o => String(o || '').toLowerCase().includes(search.toLowerCase()));
    const trimmedSearch = search.trim();
    const hasExactMatch = trimmedSearch !== '' && (options || []).some(o => String(o || '').trim().toLowerCase() === trimmedSearch.toLowerCase());
    const canAddNew = Boolean(onAddNewMaster && trimmedSearch !== '' && !hasExactMatch);

    return (
        <div ref={wrapperRef} className={`relative w-full h-full flex items-center ${disabled ? '' : 'cursor-text'}`}>
            <input
                type="text"
                value={displayValue}
                onChange={(e) => {
                    setSearch(e.target.value);
                    onChange(e.target.value);
                    if (!isOpen) setIsOpen(true);
                }}
                onFocus={() => {
                    if (disabled) return;
                    setSearch(value || '');
                    setIsOpen(true);
                }}
                disabled={disabled}
                className={`${className} ${!disabled ? 'pr-6' : ''} w-full h-full disabled:appearance-none`}
                placeholder={placeholder || (disabled ? '' : "Search/Select...")}
                autoComplete="off"
            />
            {!disabled && (
                <div className="absolute right-1.5 top-1/2 -translate-y-1/2 pointer-events-none opacity-60" onClick={() => setIsOpen(true)}>
                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                        <polyline points="6 9 12 15 18 9"></polyline>
                    </svg>
                </div>
            )}
            {isOpen && !disabled && (
                <ul className="absolute top-full left-0 z-[100] w-full min-w-[180px] bg-white border border-[#CDD4D0] shadow-[0_10px_20px_rgba(0,0,0,0.1)] max-h-52 overflow-y-auto mt-0.5 rounded-sm">
                    {filteredOptions.length === 0 && !canAddNew && (
                        <li className="p-2 text-xs text-gray-500 italic">No matches found.</li>
                    )}
                    {filteredOptions.map((opt, i) => (
                        <li
                            key={i}
                            className="p-2 text-xs text-[#2C3631] hover:bg-[#E8EDE9] cursor-pointer border-b border-[#F4F5F3] last:border-0 font-medium"
                            onMouseDown={(e) => {
                                e.preventDefault();
                                onChange(String(opt));
                                setSearch('');
                                setIsOpen(false);
                            }}
                        >
                            {String(opt)}
                        </li>
                    ))}
                    {canAddNew && (
                        <li
                            className="p-2 text-xs text-[#117843] bg-[#E8F5E9] hover:bg-[#C8E6C9] font-bold cursor-pointer border-t border-[#A5D6A7] flex items-center gap-1.5 transition-colors sticky bottom-0"
                            onMouseDown={(e) => {
                                e.preventDefault();
                                const valToAdd = trimmedSearch;
                                setIsOpen(false);
                                setSearch('');
                                onAddNewMaster(category, valToAdd, moduleName);
                            }}
                        >
                            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                                <line x1="12" y1="5" x2="12" y2="19"></line>
                                <line x1="5" y1="12" x2="19" y2="12"></line>
                            </svg>
                            <span className="truncate">+ Add "{trimmedSearch}" as new {moduleName || 'Master'}</span>
                        </li>
                    )}
                </ul>
            )}
        </div>
    );
}

// --- 4.5. QUICK ADD MASTER MODAL ---
function QuickAddMasterModal({
    isOpen,
    onClose,
    initialCategory = 'customers',
    initialValue = '',
    moduleName = '',
    lockCategory = false,
    presets = {},
    onSaveMaster,
    onSave,
    onSuccess,
    showToast
}) {
    if (!isOpen) return null;

    const MASTER_MODULES = [
        { key: 'customers', label: 'Customers / Clients', singular: 'Customer / Client' },
        { key: 'vendors', label: 'Suppliers / Vendors', singular: 'Supplier / Vendor' },
        { key: 'styles', label: 'Styles / Garments', singular: 'Style Name' },
        { key: 'materials', label: 'Materials / Fabrics', singular: 'Material' },
        { key: 'processes', label: 'Production Processes', singular: 'Process' },
        { key: 'units', label: 'Units of Measure', singular: 'Unit' },
    ];

    const [category, setCategory] = useState(initialCategory);
    const [itemName, setItemName] = useState(initialValue);
    const [isSaving, setIsSaving] = useState(false);
    const inputRef = useRef(null);

    useEffect(() => {
        setCategory(initialCategory || 'customers');
        setItemName(initialValue || '');
        setTimeout(() => {
            if (inputRef.current) {
                inputRef.current.focus();
                inputRef.current.select();
            }
        }, 100);
    }, [isOpen, initialCategory, initialValue]);

    const currentModule = MASTER_MODULES.find(m => m.key === category) || MASTER_MODULES[0];
    const displayModuleName = moduleName || currentModule.singular;

    const cleanName = itemName.trim();
    const existingList = presets[category] || [];
    const isDuplicate = cleanName !== '' && existingList.some(
        it => String(it || '').trim().toLowerCase() === cleanName.toLowerCase()
    );

    const handleConfirm = async (e) => {
        if (e) e.preventDefault();
        if (!cleanName) {
            if (showToast) showToast('Please enter an item name.', 'error');
            return;
        }

        setIsSaving(true);
        try {
            const saveFn = onSaveMaster || onSave;
            if (saveFn) {
                const success = await saveFn(category, cleanName);
                if (success) {
                    if (onSuccess) {
                        onSuccess(category, cleanName);
                    }
                    onClose();
                }
            }
        } catch (err) {
            if (showToast) showToast('Error saving master item: ' + err.message, 'error');
        } finally {
            setIsSaving(false);
        }
    };

    return (
        <div className="fixed inset-0 z-[150] flex items-center justify-center bg-[#2A3B32]/60 backdrop-blur-xs p-3 sm:p-4 animate-in fade-in duration-200" onClick={onClose}>
            <div className="bg-white w-full max-w-md rounded-sm shadow-2xl flex flex-col border border-[#CDD4D0] overflow-hidden animate-in zoom-in-95 duration-200" onClick={e => e.stopPropagation()}>
                
                {/* Modal Header */}
                <div className="flex justify-between items-center p-3 sm:p-4 border-b border-[#CDD4D0] bg-[#E8EDE9] shrink-0">
                    <div className="flex items-center gap-2">
                        <Icons.Database className="w-4 h-4 text-[#546F60]" />
                        <div>
                            <h3 className="font-bold text-[#2A3B32] uppercase tracking-tight text-sm">
                                {lockCategory ? 'Add New Master Item' : 'Quick Add Master Data'}
                            </h3>
                            <p className="text-[10px] text-[#6B7C72] uppercase tracking-wider font-semibold">
                                Automatically saves to system masters
                            </p>
                        </div>
                    </div>
                    <button onClick={onClose} className="text-[#8C9B92] hover:text-[#8C3A3A] transition-colors p-1 bg-white rounded-sm shadow-xs border border-[#CDD4D0] cursor-pointer" title="Close">
                        <Icons.X className="w-4 h-4" />
                    </button>
                </div>

                {/* Modal Form Body */}
                <form onSubmit={handleConfirm} className="p-4 sm:p-5 space-y-4 text-xs">
                    
                    {/* Category Selection */}
                    <div>
                        <label className="block text-[10px] uppercase font-bold text-[#546F60] tracking-wider mb-1.5">
                            Master Data Category / Module
                        </label>
                        {lockCategory ? (
                            <div className="flex items-center gap-2 p-2.5 bg-[#F4F5F3] border border-[#CDD4D0] rounded-sm font-bold text-[#2C3631]">
                                {(Icons && Icons.Tag) ? (
                                    <Icons.Tag className="w-3.5 h-3.5 text-[#546F60]" />
                                ) : (
                                    <svg className="w-3.5 h-3.5 text-[#546F60]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                                        <path d="M12 2H2v10l9.29 9.29c.94.94 2.48.94 3.42 0l6.58-6.58c.94-.94.94-2.48 0-3.42L12 2Z"/>
                                        <path d="M7 7h.01"/>
                                    </svg>
                                )}
                                <span>{displayModuleName}</span>
                                <span className="text-[10px] text-[#8C9B92] font-normal italic ml-auto">(Category locked to current field)</span>
                            </div>
                        ) : (
                            <select
                                value={category}
                                onChange={(e) => setCategory(e.target.value)}
                                className="w-full p-2.5 bg-[#FAFAFA] border border-[#CDD4D0] rounded-sm font-semibold text-[#2C3631] text-xs focus:bg-white focus:border-[#546F60] focus:ring-1 focus:ring-[#546F60]/20 transition-all cursor-pointer"
                            >
                                {MASTER_MODULES.map(m => (
                                    <option key={m.key} value={m.key}>
                                        {m.label} ({presets[m.key]?.length || 0} existing)
                                    </option>
                                ))}
                            </select>
                        )}
                    </div>

                    {/* New Item Name Input */}
                    <div>
                        <div className="flex justify-between items-center mb-1.5">
                            <label className="block text-[10px] uppercase font-bold text-[#546F60] tracking-wider">
                                New Item Name
                            </label>
                            {isDuplicate && (
                                <span className="text-[10px] font-bold text-amber-700 bg-amber-50 px-1.5 py-0.5 rounded border border-amber-200">
                                    Already exists in this master
                                </span>
                            )}
                        </div>
                        <input
                            ref={inputRef}
                            type="text"
                            value={itemName}
                            onChange={(e) => setItemName(e.target.value)}
                            placeholder={`Enter new ${displayModuleName.toLowerCase()} name...`}
                            className="w-full p-2.5 bg-[#FAFAFA] border border-[#CDD4D0] rounded-sm text-xs font-semibold text-[#2C3631] focus:bg-white focus:border-[#546F60] focus:ring-1 focus:ring-[#546F60]/20 transition-all placeholder:text-[#A3B899] placeholder:font-normal"
                            autoComplete="off"
                            required
                        />
                    </div>

                    {/* Live Preview Box */}
                    <div className="bg-[#F4F5F3] border border-[#CDD4D0] rounded-sm p-3.5 space-y-2">
                        <div className="flex items-center justify-between border-b border-[#E8EDE9] pb-1.5">
                            <span className="text-[9px] uppercase font-bold text-[#546F60] tracking-wider flex items-center gap-1">
                                <Icons.Eye className="w-3 h-3" /> Master Data Preview
                            </span>
                            <span className="text-[9px] text-[#8C9B92] font-mono">
                                Total {existingList.length} items in list
                            </span>
                        </div>
                        <div className="grid grid-cols-2 gap-2 text-xs pt-0.5">
                            <div>
                                <span className="text-[9px] uppercase font-bold text-[#8C9B92] block mb-0.5">Module Name</span>
                                <span className="font-bold text-[#2A3B32]">{displayModuleName}</span>
                            </div>
                            <div>
                                <span className="text-[9px] uppercase font-bold text-[#8C9B92] block mb-0.5">New Item Name</span>
                                <span className="font-mono font-bold text-[#117843] truncate block">
                                    {cleanName || <span className="text-[#8C9B92] italic font-normal">None entered</span>}
                                </span>
                            </div>
                        </div>
                    </div>

                    {/* Action Buttons */}
                    <div className="pt-2 flex justify-end gap-2 shrink-0">
                        <button
                            type="button"
                            onClick={onClose}
                            disabled={isSaving}
                            className="px-4 py-2 bg-[#E8EDE9] hover:bg-[#CDD4D0] text-[#2C3631] font-bold text-xs rounded-sm transition-colors border border-[#CDD4D0] shadow-xs cursor-pointer"
                        >
                            EXIT / CANCEL
                        </button>
                        <button
                            type="submit"
                            disabled={isSaving || !cleanName}
                            className="px-6 py-2 bg-[#117843] hover:bg-[#0B4D2B] text-white font-bold text-xs rounded-sm transition-colors shadow-xs flex items-center gap-1.5 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
                        >
                            <Icons.Check className="w-3.5 h-3.5" />
                            {isSaving ? 'SAVING...' : 'CONFIRM & SAVE'}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
}

window.QuickAddMasterModal = QuickAddMasterModal;

// --- 5. READ-ONLY FINISHED ITEMS ---
function ReadOnlyFinishedItems({ finishedItems }) {
    if (!finishedItems || finishedItems.length === 0) return null;
    return (
        <div className="overflow-x-auto bg-[#F4F5F3] border border-[#CDD4D0] rounded-sm shadow-inner mb-6">
            <table className="w-full text-left text-xs text-[#2C3631]">
                <thead className="bg-[#DEE3DF] text-[#41574C] border-b border-[#CDD4D0]">
                    <tr>
                        <th className="px-3 py-2 font-bold uppercase tracking-tight">Product Name</th>
                        <th className="px-3 py-2 font-bold uppercase tracking-tight text-right">Qty</th>
                        <th className="px-3 py-2 font-bold uppercase tracking-tight text-right">Selling Rate</th>
                        <th className="px-3 py-2 font-bold uppercase tracking-tight text-right">Total Sales</th>
                    </tr>
                </thead>
                <tbody className="divide-y divide-[#F0F2F0]">
                    {finishedItems.map((p, i) => (
                        <tr key={p.id || i} className="bg-white hover:bg-[#FAFAFA] transition-colors">
                            <td className="px-3 py-2 font-medium">{p.name || '-'}</td>
                            <td className="px-3 py-2 text-right font-mono">{parseInt(p.qty || 0)}</td>
                            <td className="px-3 py-2 text-right font-mono text-[#6B7C72]">₹{parseFloat(p.price || 0).toFixed(2)}</td>
                            <td className="px-3 py-2 text-right font-mono font-bold text-[#117843]">₹{((parseInt(p.qty)||0) * (parseFloat(p.price)||0)).toFixed(2)}</td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    );
}

// --- 6. READ-ONLY PARTICULARS ---
function ReadOnlyParticulars({ parts, totalCost, perPiece }) {
    return (
        <div className="overflow-x-auto bg-[#F4F5F3] border border-[#CDD4D0] rounded-sm shadow-inner">
            <table className="w-full text-left text-xs text-[#2C3631]">
                <thead className="bg-[#DEE3DF] text-[#41574C] border-b border-[#CDD4D0]">
                    <tr>
                        <th className="px-3 py-2 font-bold uppercase tracking-tight">Particular / Item</th>
                        <th className="px-3 py-2 font-bold uppercase tracking-tight">Type</th>
                        <th className="px-3 py-2 font-bold uppercase tracking-tight text-right">Qty</th>
                        <th className="px-3 py-2 font-bold uppercase tracking-tight text-right">Rate</th>
                        <th className="px-3 py-2 font-bold uppercase tracking-tight text-right">Amount</th>
                    </tr>
                </thead>
                <tbody className="divide-y divide-[#F0F2F0]">
                    {(parts || []).map((p, i) => (
                        <tr key={p.id || i} className="bg-white hover:bg-[#FAFAFA] transition-colors">
                            <td className="px-3 py-2 font-medium">
                                <div>{p.particular || '-'}</div>
                            </td>
                            <td className="px-3 py-2 text-[10px] text-[#6B7C72] uppercase font-bold">{p.type}</td>
                            <td className="px-3 py-2 text-right font-mono">{parseFloat(p.quantity || 0).toFixed(2)} <span className="text-[10px] text-[#8C9B92]">{p.unit}</span></td>
                            <td className="px-3 py-2 text-right font-mono text-[#6B7C72]">₹{parseFloat(p.rate || 0).toFixed(2)}</td>
                            <td className="px-3 py-2 text-right font-mono font-bold text-[#117843]">₹{parseFloat(p.amount || 0).toFixed(2)}</td>
                        </tr>
                    ))}
                    {(parts || []).length === 0 && (
                        <tr><td colSpan="5" className="px-3 py-6 text-center italic text-[#8C9B92] bg-white">No items added to this job template yet.</td></tr>
                    )}
                </tbody>
                <tfoot className="bg-[#E8EDE9] font-bold border-t border-[#CDD4D0]">
                    <tr>
                        <td colSpan="4" className="px-3 py-2 text-right text-[11px] uppercase text-[#546F60] tracking-widest">Total Cost</td>
                        <td className="px-3 py-2 text-right font-mono text-sm text-[#2A3B32]">₹{parseFloat(totalCost || 0).toFixed(2)}</td>
                    </tr>
                    <tr>
                        <td colSpan="4" className="px-3 py-2 text-right text-[11px] uppercase text-[#117843] tracking-widest">Avg Cost Per Unit</td>
                        <td className="px-3 py-2 text-right font-mono text-sm text-[#117843]">₹{perPiece}</td>
                    </tr>
                </tfoot>
            </table>
        </div>
    );
}

// --- 7. DETAIL ROW ---
function DetailRow({ label, children }) {
    return (
        <div className="grid grid-cols-[100px_1fr] sm:grid-cols-[140px_1fr] border-b border-[#CDD4D0] last:border-0 hover:bg-[#F4F5F3] transition-colors focus-within:bg-[#F4F5F3]">
            <div className="p-2 sm:p-2.5 text-[9px] sm:text-[10px] font-bold text-[#6B7C72] uppercase tracking-wider flex items-center border-r border-[#CDD4D0] bg-[#E8EDE9]/50">
                {label}
            </div>
            <div className="p-1 sm:p-1.5 flex items-center text-[#2C3631] text-[11px] sm:text-xs font-semibold truncate">
                {children}
            </div>
        </div>
    );
}

// --- 8. MASTER LIST ---
function MasterList({ title, items, onUpdateList, onEditItem, showToast }) {
    const [val, setVal] = useState('');
    const [editingIdx, setEditingIdx] = useState(null);
    const [editVal, setEditVal] = useState('');

    const handleSaveEdit = (idx) => {
        const trimmedVal = String(editVal).trim();
        if (!trimmedVal) {
            setEditingIdx(null);
            return;
        }
        
        const oldVal = items[idx];
        const isDuplicate = (items || []).some((i, currIdx) => 
            currIdx !== idx && String(i).toLowerCase() === trimmedVal.toLowerCase()
        );

        if (isDuplicate) {
            if (showToast) showToast(`"${trimmedVal}" already exists in ${title}!`, 'error');
            return;
        }
        
        if (String(oldVal) !== trimmedVal) {
            onEditItem(oldVal, trimmedVal);
        }
        setEditingIdx(null);
    };
    
    return (
        <div className="bg-white border border-[#CDD4D0] rounded-sm shadow-sm flex flex-col h-full group hover:border-[#8C9B92] transition-colors min-h-[250px] sm:min-h-0">
            <div className="bg-[#E8EDE9] border-b border-[#CDD4D0] p-2 px-3 font-bold text-[#41574C] text-[11px] tracking-widest uppercase flex justify-between items-center">
                {title}
                <span className="bg-[#CDD4D0] text-[#41574C] text-[10px] px-1.5 py-0.5 rounded-sm font-mono">{(items || []).length}</span>
            </div>
            
            <div className="p-1 flex-1 overflow-y-auto bg-white max-h-[30vh]">
                <table className="w-full text-left text-xs border-collapse">
                     <tbody>
                        {(items || []).map((item, idx) => (
                            <tr key={idx} className="group/item hover:bg-[#F4F5F3] border-b border-[#F0F2F0] last:border-0">
                                <td className="w-8 py-2 sm:py-1.5 px-2 text-center text-[#A3B899] font-mono text-[10px] bg-[#FAFAFA] border-r border-[#F0F2F0]">{idx + 1}</td>
                                <td className="py-2 sm:py-1.5 px-3 text-[#2C3631] font-medium">
                                    {editingIdx === idx ? (
                                        <input
                                            type="text"
                                            value={editVal}
                                            onChange={(e) => setEditVal(e.target.value)}
                                            onKeyDown={(e) => { 
                                                if (e.key === 'Enter') handleSaveEdit(idx);
                                                if (e.key === 'Escape') setEditingIdx(null);
                                            }}
                                            className="w-full border border-[#546F60] px-1.5 py-0.5 rounded-sm focus:outline-none focus:ring-1 focus:ring-[#546F60]/20 text-xs"
                                            autoFocus
                                        />
                                    ) : (
                                        String(item)
                                    )}
                                </td>
                                <td className="w-16 py-2 sm:py-1.5 px-2 text-center whitespace-nowrap">
                                    {editingIdx === idx ? (
                                        <div className="flex items-center justify-center gap-2">
                                            <button onClick={() => handleSaveEdit(idx)} className="text-[#117843] hover:text-[#0B4D2B] transition-colors p-1 sm:p-0" title="Save">
                                                <Icons.Check className="w-4 h-4 sm:w-3.5 sm:h-3.5" />
                                            </button>
                                            <button onClick={() => setEditingIdx(null)} className="text-[#8C9B92] hover:text-[#8C3A3A] transition-colors p-1 sm:p-0" title="Cancel">
                                                <Icons.X className="w-4 h-4 sm:w-3.5 sm:h-3.5" />
                                            </button>
                                        </div>
                                    ) : (
                                        <div className="flex items-center justify-center gap-2 sm:opacity-0 sm:group-hover/item:opacity-100 transition-all">
                                            <button onClick={() => { setEditingIdx(idx); setEditVal(String(item)); }} className="text-[#8C9B92] hover:text-[#546F60] transition-colors p-1 sm:p-0" title="Edit">
                                                <Icons.Edit2 className="w-4 h-4 sm:w-3.5 sm:h-3.5" />
                                            </button>
                                            <button onClick={() => {
                                                if(confirm(`Are you sure you want to delete "${String(item)}" from ${title}?`)) {
                                                    onUpdateList((items || []).filter((_, i) => i !== idx));
                                                }
                                            }} className="text-[#CDD4D0] hover:text-[#8C3A3A] transition-colors p-1 sm:p-0" title="Delete">
                                                <Icons.X className="w-4 h-4 sm:w-3.5 sm:h-3.5" />
                                            </button>
                                        </div>
                                    )}
                                </td>
                            </tr>
                        ))}
                     </tbody>
                </table>
            </div>

            <div className="p-2 border-t border-[#CDD4D0] bg-[#FAFAFA] mt-auto shrink-0">
                <div className="relative flex items-center bg-white border border-[#CDD4D0] rounded-sm focus-within:border-[#546F60] focus-within:ring-1 focus-within:ring-[#546F60]/20">
                    <div className="pl-2 pr-1 text-[#8C9B92]">
                        <Icons.Plus className="w-4 h-4 sm:w-3.5 sm:h-3.5" />
                    </div>
                    <input 
                        type="text" 
                        value={val}
                        onChange={e => setVal(e.target.value)}
                        onKeyDown={e => { 
                            if(e.key==='Enter' && String(val).trim()){ 
                                const newItem = String(val).trim();
                                const isDuplicate = (items || []).some(i => String(i).toLowerCase() === newItem.toLowerCase());
                                if (isDuplicate) {
                                    if (showToast) showToast(`"${newItem}" already exists in ${title}!`, 'error');
                                } else {
                                    onUpdateList([...(items || []), newItem]); 
                                    setVal(''); 
                                }
                            } 
                        }}
                        placeholder="Add new row & Enter..." 
                        className="w-full py-2 sm:py-1.5 pr-2 text-xs text-[#2C3631] focus:outline-none placeholder:text-[#A3B899] placeholder:italic bg-transparent"
                    />
                </div>
            </div>
        </div>
    );
}

// --- 9. ATTACHMENT BUTTON ---
function AttachmentButton({ particular, onView, onEdit, disabled }) {
    const hasAttachment = Boolean(particular && particular.attachment_bbcode && String(particular.attachment_bbcode).trim() !== '');
    const hasRemarks = Boolean(particular && particular.attachment_remarks && String(particular.attachment_remarks).trim() !== '');

    if (hasAttachment || hasRemarks) {
        return (
            <button
                type="button"
                onClick={(e) => {
                    e.stopPropagation();
                    onView(particular);
                }}
                className="relative inline-flex items-center justify-center p-1 sm:p-1.5 rounded-sm bg-[#E8F5E9] hover:bg-[#C8E6C9] text-[#117843] transition-colors border border-[#A5D6A7] shadow-xs cursor-pointer group"
                title="View bill / document"
            >
                <Icons.Eye className="w-3.5 h-3.5" />
                {hasRemarks && (
                    <span className="absolute -top-1 -right-1 w-2 h-2 rounded-full bg-[#117843] ring-1 ring-white" title="Contains remarks" />
                )}
            </button>
        );
    }

    return (
        <button
            type="button"
            onClick={(e) => {
                e.stopPropagation();
                onEdit(particular);
            }}
            disabled={disabled}
            className="inline-flex items-center justify-center p-1 sm:p-1.5 rounded-sm bg-[#FAFAFA] hover:bg-[#E8EDE9] text-[#8C9B92] hover:text-[#546F60] transition-colors border border-[#CDD4D0] shadow-xs cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed group"
            title="Add bill attachment & remarks"
        >
            <Icons.Edit2 className="w-3.5 h-3.5" />
        </button>
    );
}

// --- 10. ATTACHMENT MODAL (ADD / EDIT) ---
function AttachmentModal({ particular, job, onClose, onSave, showToast }) {
    const [bbcode, setBbcode] = useState(particular?.attachment_bbcode || '');
    const [remarks, setRemarks] = useState(particular?.attachment_remarks || '');
    const [isSaving, setIsSaving] = useState(false);

    useEffect(() => {
        setBbcode(particular?.attachment_bbcode || '');
        setRemarks(particular?.attachment_remarks || '');
    }, [particular?.id, particular?._index, particular?.attachment_bbcode, particular?.attachment_remarks]);

    if (!particular) return null;

    const hasAttachment = Boolean((bbcode && bbcode.trim() !== '') || (remarks && remarks.trim() !== ''));

    const handleSave = async () => {
        setIsSaving(true);
        try {
            const cleanCode = bbcode.trim();
            const cleanRemarks = remarks.trim();
            const res = await window.AppApi.saveAttachment(particular.id, cleanCode, cleanRemarks);
            if (res && res.success) {
                if (showToast) showToast('Attachment saved successfully!');
                onSave(particular.id, cleanCode, particular._index, cleanRemarks);
                onClose();
            } else {
                onSave(particular.id, cleanCode, particular._index, cleanRemarks);
                if (showToast) showToast('Attachment updated in draft!');
                onClose();
            }
        } catch (e) {
            onSave(particular.id, bbcode.trim(), particular._index, remarks.trim());
            if (showToast) showToast('Attachment updated locally.');
            onClose();
        } finally {
            setIsSaving(false);
        }
    };

    return (
        <div className="fixed inset-0 z-[120] flex items-center justify-center bg-[#2A3B32]/50 backdrop-blur-xs p-3 sm:p-4 animate-in fade-in duration-200" onClick={onClose}>
            <div className="bg-white w-full max-w-lg rounded-sm shadow-2xl flex flex-col border border-[#CDD4D0] overflow-hidden animate-in zoom-in-95 duration-200" onClick={e => e.stopPropagation()}>
                
                <div className="flex justify-between items-center p-3 sm:p-4 border-b border-[#CDD4D0] bg-[#E8EDE9] shrink-0">
                    <div className="flex items-center gap-2">
                        <Icons.FileSpreadsheet className="w-4 h-4 text-[#546F60]" />
                        <h3 className="font-bold text-[#2A3B32] uppercase tracking-tight text-sm">Transaction Attachment</h3>
                    </div>
                    <button onClick={onClose} className="text-[#8C9B92] hover:text-[#8C3A3A] transition-colors p-1 bg-white rounded-sm shadow-xs border border-[#CDD4D0] cursor-pointer">
                        <Icons.X className="w-4 h-4" />
                    </button>
                </div>

                <div className="p-4 sm:p-6 overflow-y-auto max-h-[75vh] space-y-4">
                    <div className="bg-[#F4F5F3] border border-[#CDD4D0] rounded-sm p-3.5 space-y-2 text-xs">
                        <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
                            <div>
                                <span className="text-[9px] uppercase font-bold text-[#8C9B92] tracking-wider block">Particular</span>
                                <span className="font-bold text-[#2C3631] truncate block">{particular.particular || '-'}</span>
                            </div>
                            <div>
                                <span className="text-[9px] uppercase font-bold text-[#8C9B92] tracking-wider block">Type</span>
                                <span className="font-semibold text-[#546F60] uppercase text-[10px] block">{particular.type || '-'}</span>
                            </div>
                            <div>
                                <span className="text-[9px] uppercase font-bold text-[#8C9B92] tracking-wider block">Supplier / Vendor</span>
                                <span className="font-medium text-[#2C3631] truncate block">{particular.vendor || '-'}</span>
                            </div>
                            <div>
                                <span className="text-[9px] uppercase font-bold text-[#8C9B92] tracking-wider block">Amount</span>
                                <span className="font-mono font-bold text-[#117843] block">₹{parseFloat(particular.amount || 0).toFixed(2)}</span>
                            </div>
                        </div>
                        {particular.date && (
                            <div className="pt-1 border-t border-[#E8EDE9] text-[10px] text-[#6B7C72]">
                                Date: <span className="font-medium text-[#2C3631]">{particular.date}</span>
                                {job?.jobId && <span className="ml-3">Job ID: <span className="font-medium text-[#2C3631]">{job.jobId}</span></span>}
                            </div>
                        )}
                    </div>

                    {!hasAttachment && (
                        <div className="text-center py-4 bg-[#FAFAFA] border border-dashed border-[#CDD4D0] rounded-sm text-[#8C9B92]">
                            <div className="w-8 h-8 rounded-full bg-[#E8EDE9] text-[#546F60] flex items-center justify-center mx-auto mb-1.5 shadow-xs">
                                <Icons.Edit2 className="w-4 h-4" />
                            </div>
                            <p className="text-xs font-bold text-[#41574C]">No attachment added</p>
                            <p className="text-[10px] text-[#8C9B92] mt-0.5">Paste BBCode, direct image link, or embed code below</p>
                        </div>
                    )}

                    <div>
                        <label className="block text-[10px] uppercase font-bold text-[#546F60] tracking-widest mb-1.5">
                            Bill / Document Embed Code
                        </label>
                        <textarea
                            rows="4"
                            value={bbcode}
                            onChange={(e) => setBbcode(e.target.value)}
                            placeholder="Paste code here... e.g. [img]https://i.ibb.co/.../bill.jpg[/img] or [url=https://ibb.co/...]...[/url]"
                            className="w-full text-xs font-mono p-3 bg-[#FAFAFA] border border-[#CDD4D0] rounded-sm focus:bg-white focus:border-[#546F60] focus:ring-1 focus:ring-[#546F60]/20 transition-all placeholder:text-[#A3B899] placeholder:font-sans"
                        />
                        <div className="flex justify-between items-center text-[10px] text-[#8C9B92] mt-1">
                            <span>Supported: [img]...[/img], [url]...[/url], ImgBB BBCode, iframe, or web link</span>
                            <span>{bbcode.length} chars</span>
                        </div>
                    </div>

                    {/* Remarks / Comments Input Area */}
                    <div>
                        <div className="flex items-center justify-between mb-1.5">
                            <label className="block text-[10px] uppercase font-bold text-[#546F60] tracking-widest">
                                Remarks / Comments (Description)
                            </label>
                            <span className="text-[10px] text-[#8C9B92] italic">Optional text description along with image</span>
                        </div>
                        <textarea
                            rows="3"
                            value={remarks}
                            onChange={(e) => setRemarks(e.target.value)}
                            placeholder="Add remarks, invoice details, bill notes, or description to accompany the image..."
                            className="w-full text-xs p-3 bg-[#FAFAFA] border border-[#CDD4D0] rounded-sm focus:bg-white focus:border-[#546F60] focus:ring-1 focus:ring-[#546F60]/20 transition-all placeholder:text-[#A3B899]"
                        />
                        <div className="flex justify-between items-center text-[10px] text-[#8C9B92] mt-1">
                            <span>Displayed in viewer alongside the document</span>
                            <span>{remarks.length} chars</span>
                        </div>
                    </div>
                </div>

                <div className="p-3 sm:p-4 border-t border-[#CDD4D0] bg-[#FAFAFA] flex justify-end gap-2 shrink-0">
                    <button
                        type="button"
                        onClick={onClose}
                        disabled={isSaving}
                        className="px-4 py-2 bg-[#E8EDE9] hover:bg-[#CDD4D0] text-[#2C3631] font-bold text-xs rounded-sm transition-colors border border-[#CDD4D0] shadow-xs cursor-pointer"
                    >
                        CANCEL
                    </button>
                    <button
                        type="button"
                        onClick={handleSave}
                        disabled={isSaving}
                        className="px-6 py-2 bg-[#117843] hover:bg-[#0B4D2B] text-white font-bold text-xs rounded-sm transition-colors shadow-xs flex items-center gap-1.5 cursor-pointer disabled:opacity-50"
                    >
                        <Icons.Check className="w-3.5 h-3.5" />
                        {isSaving ? 'SAVING...' : 'SAVE'}
                    </button>
                </div>
            </div>
        </div>
    );
}

// --- 11. ATTACHMENT VIEWER MODAL (SAFE VIEWER) ---
function AttachmentViewerModal({ particular, job, onClose, onEdit }) {
    if (!particular) return null;

    const bbcode = (particular.attachment_bbcode || '').trim();
    const remarks = (particular.attachment_remarks || '').trim();
    const media = parseAttachmentMedia(bbcode);

    const [zoom, setZoom] = useState(1);
    const [rotation, setRotation] = useState(0);
    const [imgLoading, setImgLoading] = useState(true);
    const [imgError, setImgError] = useState(false);

    useEffect(() => {
        setZoom(1);
        setRotation(0);
        setImgLoading(true);
        setImgError(false);
    }, [particular?.id, particular?._index, particular?.attachment_bbcode, particular?.attachment_remarks]);

    const handleZoomIn = () => setZoom(z => Math.min(z + 0.25, 4));
    const handleZoomOut = () => setZoom(z => Math.max(z - 0.25, 0.5));
    const handleReset = () => { setZoom(1); setRotation(0); };
    const handleRotate = () => setRotation(r => (r + 90) % 360);

    const primaryUrl = media.imageUrl || media.url || media.linkUrl;

    return (
        <div className="fixed inset-0 z-[120] flex items-center justify-center bg-[#2A3B32]/70 backdrop-blur-xs p-2 sm:p-4 animate-in fade-in duration-200" onClick={onClose}>
            <div className="bg-white w-full max-w-5xl h-[92vh] max-h-[880px] rounded-sm shadow-2xl flex flex-col border border-[#CDD4D0] overflow-hidden animate-in zoom-in-95 duration-200" onClick={e => e.stopPropagation()}>
                
                <div className="flex justify-between items-center p-3 sm:p-4 border-b border-[#CDD4D0] bg-[#E8EDE9] shrink-0">
                    <div className="flex items-center gap-3">
                        <div className="w-8 h-8 rounded-sm bg-[#117843] text-white flex items-center justify-center shadow-xs">
                            {media.type === 'image' ? <Icons.Eye className="w-4 h-4" /> : <Icons.FileText className="w-4 h-4" />}
                        </div>
                        <div>
                            <h3 className="font-bold text-[#2A3B32] uppercase tracking-tight text-sm flex items-center gap-2">
                                Bill / Document Viewer
                            </h3>
                            <p className="text-[10px] text-[#6B7C72] uppercase tracking-widest font-semibold">
                                {particular.particular || 'Transaction'} • {particular.type} • ₹{parseFloat(particular.amount || 0).toFixed(2)}
                            </p>
                        </div>
                    </div>

                    <div className="flex items-center gap-2">
                        {media.type === 'image' && !imgError && (
                            <div className="hidden sm:flex items-center bg-white border border-[#CDD4D0] rounded-sm mr-1 overflow-hidden shadow-xs">
                                <button type="button" onClick={handleZoomOut} className="px-2.5 py-1 text-xs font-bold text-[#2C3631] hover:bg-[#E8EDE9] border-r border-[#CDD4D0] cursor-pointer" title="Zoom Out">-</button>
                                <button type="button" onClick={handleReset} className="px-2.5 py-1 text-[11px] font-mono text-[#546F60] hover:bg-[#E8EDE9] border-r border-[#CDD4D0] cursor-pointer" title="Reset Zoom">{Math.round(zoom * 100)}%</button>
                                <button type="button" onClick={handleZoomIn} className="px-2.5 py-1 text-xs font-bold text-[#2C3631] hover:bg-[#E8EDE9] border-r border-[#CDD4D0] cursor-pointer" title="Zoom In">+</button>
                                <button type="button" onClick={handleRotate} className="px-2.5 py-1 text-[11px] font-bold text-[#2C3631] hover:bg-[#E8EDE9] cursor-pointer" title="Rotate 90°">↻ 90°</button>
                            </div>
                        )}

                        {primaryUrl && (
                            <a href={primaryUrl} target="_blank" rel="noopener noreferrer" className="flex items-center gap-1 text-[11px] font-bold text-[#546F60] hover:text-[#2A3B32] bg-white px-2.5 py-1.5 rounded-sm border border-[#CDD4D0] hover:bg-[#F4F5F3] transition-colors shadow-xs cursor-pointer" title="Open in new window">
                                <Icons.ExternalLink className="w-3.5 h-3.5" /> <span className="hidden sm:inline">Open Externally</span>
                            </a>
                        )}

                        <button type="button" onClick={() => { onClose(); onEdit(particular); }} className="flex items-center gap-1 text-[11px] font-bold text-[#2A3B32] bg-white px-2.5 py-1.5 rounded-sm border border-[#CDD4D0] hover:bg-[#F4F5F3] transition-colors shadow-xs cursor-pointer" title="Edit attachment code">
                            <Icons.Edit2 className="w-3.5 h-3.5" /> <span className="hidden sm:inline">Edit</span>
                        </button>
                        
                        <button type="button" onClick={onClose} className="text-[#8C9B92] hover:text-[#8C3A3A] transition-colors p-1.5 bg-white rounded-sm shadow-xs border border-[#CDD4D0] cursor-pointer">
                            <Icons.X className="w-4 h-4" />
                        </button>
                    </div>
                </div>

                {/* Remarks / Description Bar (if present) */}
                {remarks && (
                    <div className="bg-[#FAFBF9] border-b border-[#CDD4D0] px-4 py-2.5 flex items-start gap-2.5 text-xs text-[#2C3631] shrink-0 shadow-xs">
                        <div className="p-1 rounded-xs bg-[#E8EDE9] text-[#546F60] border border-[#CDD4D0] shrink-0 mt-0.5">
                            <Icons.FileText className="w-3.5 h-3.5" />
                        </div>
                        <div className="flex-1 min-w-0">
                            <div className="text-[9px] uppercase font-bold text-[#546F60] tracking-wider mb-0.5">
                                Remarks / Description
                            </div>
                            <p className="whitespace-pre-wrap text-xs text-[#2C3631] font-medium leading-relaxed break-words">
                                {remarks}
                            </p>
                        </div>
                    </div>
                )}

                <div className="flex-1 bg-[#404448] p-2 sm:p-4 overflow-auto flex items-center justify-center relative select-none">
                    {media.type === 'image' && (
                        <div className="w-full h-full flex items-center justify-center overflow-auto p-4">
                            {imgLoading && !imgError && (
                                <div className="absolute inset-0 flex flex-col items-center justify-center text-white bg-[#404448]/80 z-10">
                                    <div className="w-8 h-8 border-2 border-white border-t-transparent rounded-full animate-spin mb-2"></div>
                                    <span className="text-xs font-semibold tracking-wide">Loading image...</span>
                                </div>
                            )}

                            {imgError ? (
                                <div className="bg-white p-6 rounded-sm shadow-lg max-w-md text-center border border-[#CDD4D0]">
                                    <div className="w-10 h-10 rounded-full bg-[#FCF0F0] text-[#DC2626] flex items-center justify-center mx-auto mb-3">
                                        <Icons.AlertCircle className="w-5 h-5" />
                                    </div>
                                    <h4 className="text-sm font-bold text-[#2A3B32] mb-1">Image Could Not Be Loaded</h4>
                                    <p className="text-xs text-[#6B7C72] mb-4">The image source URL may be invalid or expired.</p>
                                    <div className="flex justify-center gap-2">
                                        <a href={primaryUrl} target="_blank" rel="noopener noreferrer" className="px-3 py-1.5 bg-[#546F60] text-white rounded-sm text-xs font-bold">Open Link Directly</a>
                                        <button onClick={() => { onClose(); onEdit(particular); }} className="px-3 py-1.5 bg-[#E8EDE9] text-[#2C3631] rounded-sm text-xs font-bold">Edit Code</button>
                                    </div>
                                </div>
                            ) : (
                                <img
                                    src={media.imageUrl}
                                    alt="Bill Document Attachment"
                                    onLoad={() => setImgLoading(false)}
                                    onError={() => { setImgLoading(false); setImgError(true); }}
                                    style={{
                                        transform: `scale(${zoom}) rotate(${rotation}deg)`,
                                        transition: 'transform 0.15s ease-out',
                                        maxHeight: zoom === 1 ? '100%' : 'none',
                                        maxWidth: zoom === 1 ? '100%' : 'none',
                                        objectFit: 'contain'
                                    }}
                                    className="rounded-xs shadow-2xl bg-white/5 cursor-zoom-in"
                                    onClick={handleZoomIn}
                                />
                            )}
                        </div>
                    )}

                    {media.type === 'blocked_host' && (
                        <div className="bg-white p-6 sm:p-8 rounded-sm shadow-2xl max-w-lg text-center border border-[#CDD4D0] my-auto">
                            <div className="w-14 h-14 rounded-full bg-[#E8F5E9] text-[#117843] flex items-center justify-center mx-auto mb-4 border border-[#C8E6C9] shadow-xs">
                                <Icons.FileSpreadsheet className="w-7 h-7" />
                            </div>
                            <h4 className="text-base font-bold text-[#2A3B32] uppercase tracking-tight mb-2">
                                Document Available on External Host
                            </h4>
                            <p className="text-xs text-[#546F60] mb-4 leading-relaxed">
                                This document is hosted on an external service (such as <strong>ImgBB</strong>) which secures viewing directly on their platform.
                            </p>
                            
                            <div className="bg-[#F4F5F3] p-3 rounded-sm border border-[#CDD4D0] text-left text-xs font-mono break-all text-[#2C3631] mb-5">
                                <span className="text-[10px] uppercase font-bold text-[#8C9B92] block mb-0.5">Stored Reference URL</span>
                                {primaryUrl}
                            </div>

                            <div className="flex flex-col sm:flex-row justify-center gap-2.5">
                                <a
                                    href={primaryUrl}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    className="px-5 py-2.5 bg-[#117843] hover:bg-[#0B4D2B] text-white font-bold text-xs rounded-sm shadow-sm flex items-center justify-center gap-1.5 transition-colors cursor-pointer"
                                >
                                    <Icons.ExternalLink className="w-4 h-4" /> Open Document in New Tab
                                </a>
                                <button
                                    type="button"
                                    onClick={() => {
                                        onClose();
                                        onEdit(particular);
                                    }}
                                    className="px-4 py-2.5 bg-[#E8EDE9] hover:bg-[#CDD4D0] text-[#2A3B32] font-bold text-xs rounded-sm transition-colors border border-[#CDD4D0] cursor-pointer"
                                >
                                    ✏ Edit Attachment Code
                                </button>
                            </div>

                            <p className="text-[11px] text-[#8C9B92] mt-4 italic">
                                Tip: You can also copy the "BBCode (Full linked)" or direct image link from ImgBB to display it directly inside this viewer.
                            </p>
                        </div>
                    )}

                    {(media.type === 'iframe' || media.type === 'embed') && (
                        <div className="w-full h-full bg-white rounded-xs shadow-inner overflow-hidden flex flex-col">
                            <iframe
                                src={media.url}
                                title="Bill Document Preview"
                                className="w-full flex-1 border-0"
                                sandbox="allow-scripts allow-same-origin"
                                referrerpolicy="no-referrer"
                            />
                        </div>
                    )}

                    {(media.type === 'text' || media.type === 'empty') && (
                        <div className="bg-white p-6 rounded-sm shadow-lg max-w-md text-center border border-[#CDD4D0]">
                            <div className="w-12 h-12 rounded-full bg-[#FFF8E6] text-[#D97706] flex items-center justify-center mx-auto mb-3 border border-[#FDE08B]">
                                <Icons.AlertCircle className="w-6 h-6" />
                            </div>
                            <h4 className="text-sm font-bold text-[#2A3B32] uppercase tracking-wide mb-1">
                                Text Reference
                            </h4>
                            <div className="bg-[#F4F5F3] p-3 rounded-sm border border-[#CDD4D0] text-left text-xs font-mono break-all text-[#2C3631] max-h-32 overflow-y-auto mb-4">
                                {bbcode || 'No content provided.'}
                            </div>
                            <button
                                onClick={() => {
                                    onClose();
                                    onEdit(particular);
                                }}
                                className="px-4 py-2 bg-[#546F60] hover:bg-[#43594D] text-white font-bold text-xs rounded-sm transition-colors"
                            >
                                Edit Attachment Code
                            </button>
                        </div>
                    )}
                </div>

                <div className="p-2 sm:p-3 border-t border-[#CDD4D0] bg-[#FAFAFA] flex justify-between items-center text-xs text-[#6B7C72] shrink-0">
                    <div className="truncate text-[11px] pr-2 max-w-[70%]">
                        {primaryUrl ? (
                            <span className="font-mono text-[#117843] truncate block">
                                Reference: {primaryUrl}
                            </span>
                        ) : (
                            'Secure Sandbox Viewer Active'
                        )}
                    </div>
                    <button
                        type="button"
                        onClick={onClose}
                        className="px-4 py-1.5 bg-[#DEE3DF] hover:bg-[#CDD4D0] text-[#2A3B32] font-bold text-xs rounded-sm transition-colors shrink-0 cursor-pointer"
                    >
                        Close
                    </button>
                </div>
            </div>
        </div>
    );
}

// --- 12. JOB DETAIL CARD ---
function JobDetailCard({ job, presets, updateJobState, deleteJob, saveJob, setPrintJobId, showToast, onQuickAddMaster }) {
    const isEdit = job.isEditing;
    const parts = job.particulars || [];
    const totalCost = parts.reduce((s, p) => s + (parseFloat(p.amount) || 0), 0);
    
    const finishedItems = job.finishedItems || [];
    const totalQty = finishedItems.reduce((s, i) => s + (parseInt(i.qty) || 0), 0);
    const totalSales = finishedItems.reduce((s, i) => s + ((parseInt(i.qty)||0) * (parseFloat(i.price)||0)), 0);
    
    const perPiece = totalQty > 0 ? (totalCost / totalQty).toFixed(2) : '0.00';
    const profitMargin = totalSales - totalCost;
    
    const [expandedPartIndex, setExpandedPartIndex] = useState(null);
    const [expandedFinIndex, setExpandedFinIndex] = useState(null);
    const [showHistory, setShowHistory] = useState(false);

    const [activeAttachmentPart, setActiveAttachmentPart] = useState(null);
    const [viewerAttachmentPart, setViewerAttachmentPart] = useState(null);

    // Quick Add Master prompt state (inline from SearchableSelect)
    const [quickMasterPrompt, setQuickMasterPrompt] = useState(null);

    const handleTriggerNewMaster = (category, typedVal, moduleName, onConfirm) => {
        setQuickMasterPrompt({
            category,
            itemName: typedVal,
            moduleName,
            onConfirm
        });
    };

    const hasFinishedData = finishedItems.some(fi => (fi.name && String(fi.name).trim() !== '') || (parseFloat(fi.qty) > 0) || (parseFloat(fi.price) > 0));
    const showFinishedProducts = job.status === 'Finished' || hasFinishedData;

    const handleCopyWhatsApp = async () => {
        const text = window.AppUtils.generateWhatsAppText(job, totalCost, totalQty, totalSales, perPiece, profitMargin);
        try {
            await window.AppUtils.copyToClipboard(text);
            if (showToast) showToast("Copied to clipboard for WhatsApp!");
        } catch (err) {
            if (showToast) showToast("Failed to copy", "error");
        }
    };

    const handlePartChange = (i, f, v) => {
        const u = [...parts]; 
        u[i] = { ...u[i], [f]: v }; 
        
        if (f === 'type') { 
            u[i].particular = ''; 
            if (v === 'Additional Cost') { 
                u[i].quantity = totalQty; 
                u[i].unit = 'PCS'; 
            } 
        }
        
        if (['quantity', 'rate'].includes(f)) {
            const q = parseFloat(u[i].quantity) || 0;
            const r = parseFloat(u[i].rate) || 0;
            u[i].amount = q * r;
        } else if (f === 'amount') {
            const a = parseFloat(u[i].amount) || 0;
            const q = parseFloat(u[i].quantity) || 0;
            u[i].rate = q > 0 ? (a / q).toFixed(2) : 0;
        }

        updateJobState(job.id, { particulars: u });
    };
    
    const handleFinishedItemChange = (i, f, v) => {
        const u = [...finishedItems];
        u[i] = { ...u[i], [f]: v };
        updateJobState(job.id, { finishedItems: u });
    };

    const addParticularRow = () => {
        const today = new Date().toISOString().split('T')[0];
        const newParticular = {
            id: 'part_' + Date.now() + '_' + Math.random().toString(36).substring(2, 9),
            date: today,
            type: 'Process',
            particular: '',
            vendor: '',
            quantity: totalQty,
            unit: 'PCS',
            rate: 0,
            amount: 0,
            attachment_bbcode: '',
            attachment_remarks: '',
            attachment_updated_at: null
        };
        updateJobState(job.id, { particulars: [...parts, newParticular] });
    };
    
    const addFinishedItemRow = () => {
        updateJobState(job.id, { finishedItems: [...finishedItems, { id: Date.now() + '_fi', name: '', qty: 0, price: 0 }] });
    };

    const handleSaveAttachment = (particularId, newBbcode, targetIndex, newRemarks) => {
        let cleanRemarks = '';
        if (typeof targetIndex === 'string') {
            cleanRemarks = targetIndex;
        } else if (newRemarks !== undefined) {
            cleanRemarks = newRemarks;
        }
        const updatedParts = parts.map((p, idx) => {
            const isMatch = (typeof targetIndex === 'number' && idx === targetIndex) ||
                            (p.id && particularId && p.id === particularId);
            if (isMatch) {
                return {
                    ...p,
                    attachment_bbcode: newBbcode,
                    attachment_remarks: cleanRemarks,
                    attachment_updated_at: (newBbcode || cleanRemarks) ? new Date().toISOString() : null
                };
            }
            return p;
        });
        updateJobState(job.id, { particulars: updatedParts });
    };

    const getTheme = (status) => {
        switch(status) {
            case 'Finished': return {
                headerBg: 'bg-[#117843]',
                headerBorder: 'border-[#0B4D2B]',
                labelBg: 'bg-[#112211]',
                valBg: 'bg-[#1B4D3E]',
                badgeBg: 'bg-[#E8F5E9] text-[#117843] border-[#C8E6C9]',
                btnText: 'text-[#117843]'
            };
            case 'In Process': return {
                headerBg: 'bg-[#D97706]', 
                headerBorder: 'border-[#B45309]', 
                labelBg: 'bg-[#451A03]', 
                valBg: 'bg-[#78350F]', 
                badgeBg: 'bg-[#FFF8E6] text-[#B46A00] border-[#FDE08B]',
                btnText: 'text-[#D97706]'
            };
            default: 
                return {
                    headerBg: 'bg-[#DC2626]', 
                    headerBorder: 'border-[#991B1B]', 
                    labelBg: 'bg-[#450A0A]', 
                    valBg: 'bg-[#7F1D1D]', 
                    badgeBg: 'bg-[#FCF0F0] text-[#8C3A3A] border-[#F5E6E6]',
                    btnText: 'text-[#DC2626]'
                };
        }
    };

    const theme = getTheme(job.status);
    const inputClasses = "w-full bg-transparent focus:bg-white focus:ring-1 focus:ring-inset focus:ring-black/20 px-1 py-1 rounded-sm disabled:opacity-100 disabled:text-inherit font-inherit text-inherit placeholder:italic placeholder:text-[#8C9B92] disabled:appearance-none";
    const modalInputClasses = "bg-[#FAFAFA] border border-[#CDD4D0] focus:bg-white focus:border-[#546F60] focus:ring-1 focus:ring-inset focus:ring-[#546F60] px-2 py-2 rounded-sm disabled:opacity-100 disabled:bg-transparent disabled:border-transparent disabled:px-0 text-xs font-semibold text-[#2C3631] disabled:appearance-none";

    return (
        <div className="bg-white rounded-sm shadow-sm border border-[#CDD4D0] mb-6">
            <div className={`${theme.headerBg} text-white p-3 sm:p-4 flex flex-col md:flex-row justify-between items-start gap-3 sm:gap-4 border-b-2 ${theme.headerBorder} rounded-t-sm transition-colors duration-300`}>
                <div className="w-full md:w-auto flex-1 min-w-0 pr-4">
                    <div className="mb-2.5 w-full flex flex-col items-start gap-1">
                        {isEdit ? (
                            <div className="relative w-full max-w-sm h-8 sm:h-9 z-30">
                                <SearchableSelect 
                                    disabled={!isEdit} 
                                    value={job.styleName} 
                                    onChange={v=>updateJobState(job.id,'styleName',v)} 
                                    options={presets.styles || []} 
                                    category="styles"
                                    moduleName="Style Name"
                                    onAddNewMaster={(cat, val, mod) => handleTriggerNewMaster(cat, val, mod, (finalVal) => updateJobState(job.id, 'styleName', finalVal))}
                                    className="bg-black/20 rounded-sm text-white text-lg sm:text-xl font-bold outline-none px-2 py-1 w-full h-full disabled:appearance-none focus:bg-black/30 border border-white/20 focus:border-white/50 shadow-inner placeholder-white/60" 
                                    placeholder="Search or Enter Style Name..."
                                />
                            </div>
                        ) : (
                            <div className="flex items-center gap-3 w-full">
                                <h2 className="text-lg sm:text-xl font-bold tracking-tight uppercase truncate text-white drop-shadow-sm">
                                    {job.styleName || 'UNSAVED TEMPLATE'}
                                </h2>
                                {job.lastUpdated && (
                                    <button onClick={() => setShowHistory(true)} className="hidden sm:flex items-center gap-1 text-[10px] bg-black/20 hover:bg-black/40 px-2 py-1 rounded-sm border border-white/20 transition-colors text-white/90 shadow-sm shrink-0">
                                        <Icons.Clock className="w-3 h-3" /> Last Updated: {job.lastUpdated}
                                    </button>
                                )}
                            </div>
                        )}
                        {!isEdit && job.lastUpdated && (
                            <button onClick={() => setShowHistory(true)} className="sm:hidden flex items-center gap-1 text-[10px] bg-black/20 hover:bg-black/40 px-2 py-1 rounded-sm border border-white/20 transition-colors text-white/90 shadow-sm w-fit mt-1">
                                <Icons.Clock className="w-3 h-3" /> Last Updated: {job.lastUpdated}
                            </button>
                        )}
                    </div>
                    
                    <div className="flex flex-col sm:flex-row flex-wrap gap-2 sm:gap-2.5">
                        <div className={`flex items-stretch rounded-sm text-[10px] sm:text-xs shadow-sm border ${theme.headerBorder} w-full sm:w-auto ${theme.valBg} z-20`}>
                            <span className={`${theme.labelBg} rounded-l-sm px-2.5 py-1.5 font-bold text-white uppercase tracking-widest shrink-0 w-[60px] sm:w-auto text-center flex items-center justify-center z-10`}>Client</span>
                            <div className="w-full min-w-[140px] relative">
                                <SearchableSelect 
                                    disabled={!isEdit} 
                                    value={job.customerName} 
                                    onChange={v=>updateJobState(job.id,'customerName',v)} 
                                    options={presets.customers || []} 
                                    category="customers"
                                    moduleName="Customer / Client"
                                    onAddNewMaster={(cat, val, mod) => handleTriggerNewMaster(cat, val, mod, (finalVal) => updateJobState(job.id, 'customerName', finalVal))}
                                    className="bg-transparent rounded-r-sm text-white font-bold outline-none px-2 py-1.5 w-full h-full disabled:appearance-none focus:bg-black/20" 
                                    placeholder="Search..."
                                />
                            </div>
                        </div>
                        <div className={`flex items-stretch rounded-sm text-[10px] sm:text-xs shadow-sm border ${theme.headerBorder} w-full sm:w-auto ${theme.valBg} z-10`}>
                            <span className={`${theme.labelBg} rounded-l-sm px-2.5 py-1.5 font-bold text-white uppercase tracking-widest shrink-0 w-[60px] sm:w-auto text-center flex items-center justify-center z-10`}>Job ID</span>
                            <div className="w-full min-w-[140px] flex items-center px-3 py-1.5 font-bold text-white uppercase tracking-wider">
                                {job.jobId || '-'}
                            </div>
                        </div>
                    </div>
                </div>
                
                <div className="flex gap-2 w-full md:w-auto justify-end mt-2 md:mt-0 shrink-0 flex-wrap sm:flex-nowrap">
                    {!isEdit && job.status === 'Finished' && (
                        <button onClick={handleCopyWhatsApp} className="flex-1 sm:flex-none flex items-center justify-center gap-1.5 text-[#117843] font-bold text-xs bg-white px-3 md:px-2 py-2 md:py-1.5 rounded-sm border border-[#CDD4D0] shadow-sm hover:bg-[#F4F5F3] transition-colors cursor-pointer">
                            <Icons.Copy className="w-4 h-4" /> <span className="hidden sm:inline">COPY</span>
                        </button>
                    )}
                    {!isEdit && (
                        <button onClick={() => setPrintJobId(job.id)} className="flex-1 sm:flex-none flex items-center justify-center gap-1.5 text-[#2A3B32] font-bold text-xs bg-white px-3 md:px-2 py-2 md:py-1.5 rounded-sm border border-[#CDD4D0] shadow-sm hover:bg-[#F4F5F3] transition-colors cursor-pointer">
                            <Icons.Printer className="w-4 h-4" /> <span className="hidden sm:inline">PRINT</span>
                        </button>
                    )}
                    <button onClick={isEdit ? () => saveJob(job) : () => updateJobState(job.id,'isEditing',true)} className={`flex-1 sm:flex-none justify-center flex items-center gap-1.5 bg-white ${theme.btnText} hover:bg-[#F4F5F3] border border-white px-3 py-2 md:py-1.5 rounded-sm font-bold text-xs transition-colors shadow-sm cursor-pointer`}>
                        {isEdit ? <Icons.Check className="w-3.5 h-3.5" /> : <Icons.Edit2 className="w-3.5 h-3.5" />} 
                        {isEdit ? 'SAVE' : 'EDIT'}
                    </button>
                    {isEdit ? (
                        <button onClick={() => {
                            if(confirm("Are you sure you want to cancel? Unsaved changes will be lost.")) {
                                if (job.isNewDraft) deleteJob(job.id, true);
                                else updateJobState(job.id, 'isEditing', false);
                            }
                        }} className="flex-1 sm:flex-none flex items-center justify-center bg-[#E8EDE9] hover:bg-[#CDD4D0] text-[#2C3631] px-3 md:px-2 py-2 md:py-1.5 rounded-sm border border-[#CDD4D0] transition-colors shadow-sm font-bold text-xs gap-1.5 cursor-pointer">
                            <Icons.X className="w-3.5 h-3.5" /> <span className="md:hidden">CANCEL</span><span className="hidden md:inline">CANCEL</span>
                        </button>
                    ) : (
                        <button onClick={() => deleteJob(job.id)} className="hidden md:flex items-center justify-center bg-[#EF4444] hover:bg-[#DC2626] text-white px-3 md:px-2 py-2 md:py-1.5 rounded-sm border border-[#B91C1C] transition-colors shadow-sm cursor-pointer" title="Delete job">
                            <Icons.Trash className="w-4 h-4" />
                        </button>
                    )}
                </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-[#CDD4D0] bg-[#FAFAFA]">
                <div className="p-0">
                    <DetailRow label="DATE">
                        <input type="date" disabled={!isEdit} value={job.date || ''} onChange={e=>updateJobState(job.id,'date',e.target.value)} className={inputClasses} />
                    </DetailRow>
                    <DetailRow label="FABRIC SOURCE">
                        <select disabled={!isEdit} value={job.fabricSource} onChange={e=>updateJobState(job.id,'fabricSource',e.target.value)} className={inputClasses}>
                            <option value="Own">Own</option>
                            <option value="Customer">Customer</option>
                        </select>
                    </DetailRow>
                    <DetailRow label="STATUS">
                        {isEdit ? (
                             <select value={job.status} onChange={e=>updateJobState(job.id,'status',e.target.value)} className={`${inputClasses} font-bold text-xs`}>
                                <option value="Pending">Pending</option>
                                <option value="In Process">In Process</option>
                                <option value="Finished">Finished</option>
                             </select>
                        ) : (
                            <span className={`inline-flex items-center px-2 py-0.5 rounded-sm text-[10px] sm:text-xs font-bold border ${theme.badgeBg}`}>
                                {job.status}
                            </span>
                        )}
                    </DetailRow>
                </div>
                <div className="p-0">
                    <DetailRow label="TOTAL OUTPUT">
                        <span className="text-[#2C3631] font-mono font-bold text-base px-1">{totalQty} PCS</span>
                    </DetailRow>
                    <DetailRow label="TOTAL COST">
                        <span className="text-[#2C3631] font-mono font-bold text-base px-1">₹{totalCost.toFixed(2)}</span>
                    </DetailRow>
                    <DetailRow label="AVG COST/UNIT">
                        <span className="text-[#117843] font-mono font-bold text-base px-1">₹{perPiece}</span>
                    </DetailRow>
                </div>
            </div>

            {/* --- FINISHED PRODUCTS DESKTOP --- */}
            {showFinishedProducts && (
                <div className="hidden md:block">
                    <h4 className="text-[11px] font-bold text-[#41574C] uppercase border-y border-[#CDD4D0] px-4 py-2 bg-[#E8EDE9] tracking-widest flex justify-between items-center">
                        Finished Products (Output)
                    </h4>
                    <div className="overflow-x-auto bg-[#FAFAFA] border-b border-[#CDD4D0]">
                        <table className="w-full text-left text-xs text-[#2C3631] border-collapse">
                            <thead className="bg-[#F4F5F3] text-[#6B7C72] border-b border-[#CDD4D0]">
                                <tr>
                                    <th className="border-r border-[#CDD4D0] px-3 py-1.5 font-bold uppercase tracking-tight text-center w-8">#</th>
                                    <th className="border-r border-[#CDD4D0] px-3 py-1.5 font-bold uppercase tracking-tight">Product / Variant Name</th>
                                    <th className="border-r border-[#CDD4D0] px-3 py-1.5 font-bold uppercase tracking-tight text-right w-24">Qty</th>
                                    <th className="border-r border-[#CDD4D0] px-3 py-1.5 font-bold uppercase tracking-tight text-right w-32">Selling Rate</th>
                                    <th className="border-r border-[#CDD4D0] px-3 py-1.5 font-bold uppercase tracking-tight text-right w-32">Total Sales</th>
                                    {isEdit && <th className="px-3 py-1.5 font-bold uppercase tracking-tight text-center w-10">Act</th>}
                                </tr>
                            </thead>
                            <tbody className="tabular-nums">
                                {finishedItems.map((fi, index) => (
                                    <tr key={fi.id} className="even:bg-white hover:bg-[#E8EDE9]/30 transition-colors focus-within:bg-[#E8EDE9]/30">
                                        <td className="border-r border-[#CDD4D0] px-3 py-1.5 text-center text-[#8C9B92] font-medium">{index + 1}</td>
                                        <td className="border-r border-[#CDD4D0] p-0.5">
                                            <input type="text" disabled={!isEdit} value={fi.name} onChange={e=>handleFinishedItemChange(index,'name',e.target.value)} className={inputClasses} placeholder="e.g. Size M, Red Variant..." />
                                        </td>
                                        <td className="border-r border-[#CDD4D0] p-0.5">
                                            <input type="number" disabled={!isEdit} value={fi.qty || ''} onChange={e=>handleFinishedItemChange(index,'qty',e.target.value)} className={`${inputClasses} text-right font-mono font-bold text-[#117843]`} placeholder="0" />
                                        </td>
                                        <td className="border-r border-[#CDD4D0] p-0.5">
                                            <input type="number" disabled={!isEdit} value={fi.price || ''} onChange={e=>handleFinishedItemChange(index,'price',e.target.value)} className={`${inputClasses} text-right font-mono`} placeholder="0.00" />
                                        </td>
                                        <td className="border-r border-[#CDD4D0] p-0.5 bg-[#F4F5F3]">
                                            <div className="w-full px-2 py-1 text-right font-mono font-bold text-[#2A3B32]">₹{((parseInt(fi.qty)||0)*(parseFloat(fi.price)||0)).toFixed(2)}</div>
                                        </td>
                                        {isEdit && (
                                            <td className="p-0 text-center bg-[#F4F5F3]">
                                                <button onClick={() => {
                                                    if(confirm("Delete this finished product?")) {
                                                        const u = finishedItems.filter((_,idx)=>idx!==index);
                                                        updateJobState(job.id, { finishedItems: u });
                                                    }
                                                }} className="w-full h-full py-1.5 text-[#CDD4D0] hover:text-white hover:bg-[#8C3A3A] transition-colors flex items-center justify-center cursor-pointer">
                                                    <Icons.Trash className="w-3.5 h-3.5" />
                                                </button>
                                            </td>
                                        )}
                                    </tr>
                                ))}
                                {isEdit && (
                                    <tr>
                                        <td colSpan="6" className="p-0">
                                            <button onClick={addFinishedItemRow} className="w-full bg-[#F4F5F3] hover:bg-[#E8EDE9] text-[#41574C] py-2 text-[10px] font-bold transition-colors flex items-center justify-center gap-1 uppercase tracking-widest cursor-pointer">
                                                <Icons.Plus className="w-3.5 h-3.5" /> Add Product Output
                                            </button>
                                        </td>
                                    </tr>
                                )}
                            </tbody>
                        </table>
                    </div>
                </div>
            )}

            {/* --- FINISHED PRODUCTS MOBILE --- */}
            {showFinishedProducts && (
                <div className="block md:hidden bg-white px-2 py-1 border-b border-[#CDD4D0]">
                    <h4 className="text-[10px] font-bold text-[#41574C] uppercase tracking-widest mb-3 mt-3 px-1 border-b border-[#CDD4D0] pb-2 flex justify-between items-center">
                        <span>Finished Products (Output)</span>
                        <span className="font-mono text-[#2A3B32] normal-case tracking-normal">{totalQty} PCS</span>
                    </h4>
                    
                    <table className="w-full text-sm border-collapse">
                        <tbody>
                            {finishedItems.map((fi, index) => (
                                <tr key={fi.id} onClick={() => setExpandedFinIndex(index)} className="border-b border-dashed border-[#E8EDE9] last:border-0 active:bg-[#F4F5F3] transition-colors cursor-pointer group">
                                    <td className="py-3.5 px-1 text-[#8C9B92] font-mono text-[10px] w-6 align-middle">{index + 1}.</td>
                                    <td className="py-3.5 px-1 align-middle">
                                        <div className="font-bold text-[#2C3631] text-xs truncate max-w-[160px] sm:max-w-[200px]">{fi.name || 'Unnamed Product'}</div>
                                        <div className="text-[9px] text-[#8C9B92] uppercase tracking-wider mt-0.5 font-medium">Qty: {parseInt(fi.qty || 0)}</div>
                                    </td>
                                    <td className="py-3.5 px-1 text-right align-middle">
                                        <div className="font-mono font-bold text-[#117843] text-sm">₹{((parseInt(fi.qty)||0) * (parseFloat(fi.price)||0)).toFixed(2)}</div>
                                    </td>
                                    <td className="py-3.5 pl-2 pr-1 w-6 text-right align-middle">
                                        <Icons.ChevronRight className="w-4 h-4 text-[#CDD4D0] group-active:text-[#546F60] inline-block transition-colors" />
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                    
                    {isEdit && (
                        <div className="mt-2 pt-2 border-t border-[#F4F5F3] pb-1">
                            <button onClick={() => {
                                addFinishedItemRow();
                                setTimeout(() => setExpandedFinIndex(finishedItems.length), 0); 
                            }} className="w-full bg-[#F4F5F3] text-[#41574C] hover:bg-[#E8EDE9] py-3 rounded-sm text-[11px] font-bold transition-colors flex items-center justify-center gap-1.5 uppercase tracking-widest shadow-sm cursor-pointer">
                                <Icons.Plus className="w-3.5 h-3.5" /> Add Product Output
                            </button>
                        </div>
                    )}
                </div>
            )}

            {/* --- DESKTOP PARTICULARS GRID (WITH BILL / ATTACHMENT COLUMN) --- */}
            <div className="hidden md:block overflow-x-auto bg-white p-3 min-h-[300px]">
                <h4 className="text-[11px] font-bold text-[#41574C] uppercase tracking-widest mb-3 px-1 border-b border-[#CDD4D0] pb-2">Cost Breakdown (Particulars)</h4>
                <table className="w-full text-left text-xs text-[#2C3631] border-collapse border border-[#CDD4D0]">
                    <thead className="bg-[#E8EDE9] text-[#41574C] font-bold uppercase tracking-tight">
                        <tr>
                            <th className="border border-[#CDD4D0] px-2 py-1.5 text-center w-8 bg-[#DEE3DF]">#</th>
                            <th className="border border-[#CDD4D0] px-2 py-1.5 w-[110px]">Date</th>
                            <th className="border border-[#CDD4D0] px-2 py-1.5 w-[110px]">Type</th>
                            <th className="border border-[#CDD4D0] px-2 py-1.5 w-[180px]">Particular</th>
                            <th className="border border-[#CDD4D0] px-2 py-1.5 w-[150px]">Supplier</th>
                            <th className="border border-[#CDD4D0] px-2 py-1.5 text-right w-20">Qty</th>
                            <th className="border border-[#CDD4D0] px-2 py-1.5 w-20">Unit</th>
                            <th className="border border-[#CDD4D0] px-2 py-1.5 text-right w-24">Rate</th>
                            <th className="border border-[#CDD4D0] px-2 py-1.5 text-right w-32 bg-[#E3EBE6] text-[#2A3B32]">Amount</th>
                            <th className="border border-[#CDD4D0] px-2 py-1.5 text-center w-12 bg-[#DEE3DF]" title="Bill / Document attachment">Bill</th>
                            {isEdit && <th className="border border-[#CDD4D0] px-2 py-1.5 text-center w-10">Act</th>}
                        </tr>
                    </thead>
                    <tbody className="tabular-nums">
                        {parts.map((p, index) => (
                            <tr key={p.id} className="even:bg-[#F9FAF9] hover:bg-[#F0F2F0] transition-none group focus-within:bg-[#F0F2F0]">
                                <td className="border border-[#CDD4D0] px-2 py-1.5 text-center text-[#8C9B92] font-medium bg-[#F4F5F3] group-hover:bg-[#DEE3DF]">{index + 1}</td>
                                <td className="border border-[#CDD4D0] p-0.5">
                                    <input type="date" disabled={!isEdit} value={p.date||''} onChange={e=>handlePartChange(index,'date',e.target.value)} className={inputClasses} />
                                </td>
                                <td className="border border-[#CDD4D0] p-0.5">
                                    <select disabled={!isEdit} value={p.type} onChange={e=>handlePartChange(index,'type',e.target.value)} className={`${inputClasses} font-bold text-[#6B7C72] text-[10px] uppercase`}>
                                        <option value="Material">Material</option>
                                        <option value="Process">Process</option>
                                        <option value="Additional Cost">Add. Cost</option>
                                    </select>
                                </td>
                                <td className="border border-[#CDD4D0] p-0.5 relative">
                                    {p.type==='Additional Cost'? (
                                        <input type="text" disabled={!isEdit} value={p.particular} onChange={e=>handlePartChange(index,'particular',e.target.value)} className={`${inputClasses} italic`} placeholder="Desc..." />
                                    ) : (
                                        <SearchableSelect 
                                            disabled={!isEdit} 
                                            value={p.particular} 
                                            onChange={v=>handlePartChange(index,'particular',v)} 
                                            options={p.type==='Material'?(presets.materials||[]):(presets.processes||[])} 
                                            category={p.type === 'Material' ? 'materials' : 'processes'}
                                            moduleName={p.type === 'Material' ? 'Material' : 'Process'}
                                            onAddNewMaster={(cat, val, mod) => handleTriggerNewMaster(cat, val, mod, (finalVal) => handlePartChange(index, 'particular', finalVal))}
                                            className={inputClasses}
                                        />
                                    )}
                                </td>
                                <td className="border border-[#CDD4D0] p-0.5 relative">
                                    <SearchableSelect 
                                        disabled={!isEdit||p.type==='Additional Cost'} 
                                        value={p.vendor} 
                                        onChange={v=>handlePartChange(index,'vendor',v)} 
                                        options={presets.vendors||[]} 
                                        category="vendors"
                                        moduleName="Supplier / Vendor"
                                        onAddNewMaster={(cat, val, mod) => handleTriggerNewMaster(cat, val, mod, (finalVal) => handlePartChange(index, 'vendor', finalVal))}
                                        className={inputClasses}
                                    />
                                </td>
                                <td className="border border-[#CDD4D0] p-0.5">
                                    <input type="number" disabled={!isEdit} value={p.quantity || ''} onChange={e=>handlePartChange(index,'quantity',e.target.value)} className={`${inputClasses} text-right font-mono text-[11px]`} placeholder="0" />
                                </td>
                                <td className="border border-[#CDD4D0] p-0.5 relative">
                                    <SearchableSelect 
                                        disabled={!isEdit} 
                                        value={p.unit} 
                                        onChange={v=>handlePartChange(index,'unit',v)} 
                                        options={presets.units||[]} 
                                        category="units"
                                        moduleName="Unit"
                                        onAddNewMaster={(cat, val, mod) => handleTriggerNewMaster(cat, val, mod, (finalVal) => handlePartChange(index, 'unit', finalVal))}
                                        className={`${inputClasses} text-[#6B7C72] text-[10px]`}
                                    />
                                </td>
                                <td className="border border-[#CDD4D0] p-0.5">
                                    <input type="number" disabled={!isEdit} value={p.rate || ''} onChange={e=>handlePartChange(index,'rate',e.target.value)} className={`${inputClasses} text-right font-mono text-[11px]`} placeholder="0.00" />
                                </td>
                                <td className="border border-[#CDD4D0] p-0.5 bg-[#E8F5E9] focus-within:bg-[#C8E6C9]">
                                    <input type="number" step="0.01" disabled={!isEdit} value={p.amount || ''} onChange={e=>handlePartChange(index,'amount',e.target.value)} className={`${inputClasses} text-right font-mono font-bold text-[#117843] focus:bg-transparent`} placeholder="0.00" />
                                </td>
                                
                                <td className="border border-[#CDD4D0] p-1 text-center bg-[#F4F5F3]">
                                    <AttachmentButton
                                        particular={p}
                                        onView={() => setViewerAttachmentPart({ ...p, _index: index })}
                                        onEdit={() => setActiveAttachmentPart({ ...p, _index: index })}
                                    />
                                </td>

                                {isEdit && (
                                    <td className="border border-[#CDD4D0] p-0 text-center bg-[#F4F5F3]">
                                        <button onClick={() => { 
                                            if(confirm("Are you sure you want to delete this line item?")) {
                                                const u = parts.filter((_,idx)=>idx!==index); updateJobState(job.id,'particulars',u); 
                                            }
                                        }} className="w-full h-full py-1.5 text-[#CDD4D0] hover:text-white hover:bg-[#8C3A3A] transition-colors flex items-center justify-center cursor-pointer">
                                            <Icons.Trash className="w-3.5 h-3.5" />
                                        </button>
                                    </td>
                                )}
                            </tr>
                        ))}
                        {isEdit && (
                            <tr>
                                <td colSpan="11" className="border border-[#CDD4D0] p-0">
                                    <button onClick={addParticularRow} className="w-full bg-[#E8EDE9] hover:bg-[#DEE3DF] text-[#41574C] py-2 text-[10px] font-bold transition-colors flex items-center justify-center gap-1 uppercase tracking-widest cursor-pointer">
                                        <Icons.Plus className="w-3.5 h-3.5" /> Add Line Item
                                    </button>
                                </td>
                            </tr>
                        )}
                    </tbody>
                    <tfoot className="bg-[#DEE3DF] font-bold text-[#2A3B32]">
                        <tr>
                            <td colSpan="8" className="border border-[#CDD4D0] px-2 py-2 text-right text-[11px] uppercase tracking-wider text-[#546F60]">Total Block Cost</td>
                            <td className="border border-[#CDD4D0] px-2 py-2 text-right font-mono text-sm bg-[#D1DCD5]">₹{totalCost.toFixed(2)}</td>
                            <td className="border border-[#CDD4D0] bg-[#D1DCD5]"></td>
                            {isEdit && <td className="border border-[#CDD4D0] bg-[#D1DCD5]"></td>}
                        </tr>
                        <tr>
                            <td colSpan="8" className="border border-[#CDD4D0] px-2 py-2 text-right text-[11px] uppercase tracking-wider font-bold text-[#117843] bg-[#E8F5E9]">Avg. Cost Per Unit</td>
                            <td className="border border-[#A5D6A7] px-2 py-2 text-right font-mono text-base font-black text-[#117843] bg-[#C8E6C9] shadow-inner">₹{perPiece}</td>
                            <td className="border border-[#A5D6A7] bg-[#C8E6C9]"></td>
                            {isEdit && <td className="border border-[#CDD4D0] bg-[#C8E6C9]"></td>}
                        </tr>
                    </tfoot>
                </table>
            </div>

            {/* --- PARTICULARS MOBILE --- */}
            <div className="block md:hidden bg-white px-2 py-1 border-b border-[#CDD4D0]">
                <h4 className="text-[10px] font-bold text-[#41574C] uppercase tracking-widest mb-3 mt-3 px-1 border-b border-[#CDD4D0] pb-2">Cost Breakdown (Particulars)</h4>
                <table className="w-full text-sm border-collapse">
                    <tbody>
                        {parts.map((p, index) => {
                            const hasAtt = Boolean(p.attachment_bbcode && String(p.attachment_bbcode).trim() !== '');
                            const hasRemarks = Boolean(p.attachment_remarks && String(p.attachment_remarks).trim() !== '');
                            const attTitle = hasRemarks ? (hasAtt ? `Attachment: "${p.attachment_remarks}"` : `Remarks: "${p.attachment_remarks}"`) : "Bill Attached";
                            return (
                                <tr key={p.id} onClick={() => setExpandedPartIndex(index)} className="border-b border-dashed border-[#E8EDE9] last:border-0 active:bg-[#F4F5F3] transition-colors cursor-pointer group">
                                    <td className="py-3.5 px-1 text-[#8C9B92] font-mono text-[10px] w-6 align-middle">{index + 1}.</td>
                                    <td className="py-3.5 px-1 align-middle">
                                        <div className="font-bold text-[#2C3631] text-xs truncate max-w-[140px] sm:max-w-[180px] flex items-center gap-1.5">
                                            {p.particular || p.type || 'Unnamed Item'}
                                            {(hasAtt || hasRemarks) && <span className="inline-flex items-center text-[10px] text-[#117843] bg-[#E8F5E9] px-1 rounded-xs" title={attTitle}>👁</span>}
                                        </div>
                                        <div className="text-[9px] text-[#8C9B92] uppercase tracking-wider mt-0.5 font-medium">{p.type}</div>
                                    </td>
                                    <td className="py-3.5 px-1 text-right align-middle">
                                        <div className="font-mono font-bold text-[#117843] text-sm">₹{(parseFloat(p.amount) || 0).toFixed(2)}</div>
                                    </td>
                                    <td className="py-3.5 pl-2 pr-1 w-6 text-right align-middle">
                                        <Icons.ChevronRight className="w-4 h-4 text-[#CDD4D0] group-active:text-[#546F60] inline-block transition-colors" />
                                    </td>
                                </tr>
                            );
                        })}
                        {parts.length === 0 && (
                            <tr><td colSpan="4" className="py-4 text-center italic text-[#8C9B92] text-xs">No cost items added.</td></tr>
                        )}
                    </tbody>
                </table>
                
                {isEdit && (
                    <div className="mt-2 pt-2 border-t border-[#F4F5F3] pb-1">
                        <button onClick={() => {
                            addParticularRow();
                            setTimeout(() => setExpandedPartIndex(parts.length), 0);
                        }} className="w-full bg-[#F4F5F3] text-[#41574C] hover:bg-[#E8EDE9] py-3 rounded-sm text-[11px] font-bold transition-colors flex items-center justify-center gap-1.5 uppercase tracking-widest shadow-sm cursor-pointer">
                            <Icons.Plus className="w-3.5 h-3.5" /> Add Particular
                        </button>
                    </div>
                )}
            </div>

            {/* Mobile Summary Block */}
            <div className="block md:hidden bg-[#FAFAFA] border-y border-[#CDD4D0] p-3 mt-4">
                <div className="text-[10px] font-bold text-[#546F60] uppercase tracking-widest mb-3 px-1 flex justify-between items-center">
                    <span>Summary</span>
                </div>
                <div className="bg-[#DEE3DF] border border-[#CDD4D0] rounded-sm p-4 shadow-inner">
                    <div className="flex justify-between items-center py-1">
                        <span className="text-xs uppercase tracking-wider text-[#546F60] font-bold">Total Block Cost</span>
                        <span className="font-mono text-base font-bold text-[#2A3B32]">₹{totalCost.toFixed(2)}</span>
                    </div>
                    <div className="flex justify-between items-center py-2 mt-2 border-t border-[#CDD4D0] pt-3">
                        <span className="text-xs uppercase tracking-wider font-extrabold text-[#117843]">Avg. Cost Per Unit</span>
                        <span className="font-mono text-xl font-black text-[#117843]">₹{perPiece}</span>
                    </div>
                    {job.status === 'Finished' && (
                        <>
                            <div className="flex justify-between items-center py-2 border-t border-[#CDD4D0]">
                                <span className="text-[10px] uppercase tracking-wider text-[#2A3B32] font-bold">Total Selling Amount</span>
                                <span className="font-mono text-sm font-bold text-[#2A3B32]">₹{totalSales.toFixed(2)}</span>
                            </div>
                            <div className="flex justify-between items-center py-2 border-t border-[#CDD4D0]">
                                <span className="text-xs uppercase tracking-wider font-extrabold text-[#2A3B32]">Profit Margin</span>
                                <span className={`font-mono text-xl font-black px-2.5 py-1 rounded-sm border ${profitMargin >= 0 ? 'text-[#117843] bg-[#C8E6C9] border-[#A5D6A7]' : 'text-[#DC2626] bg-[#FECACA] border-[#FCA5A5]'}`}>
                                    ₹{profitMargin.toFixed(2)}
                                </span>
                            </div>
                        </>
                    )}
                </div>
            </div>

            {/* Desktop Sales Summary */}
            <div className="hidden md:flex justify-end p-3">
                <div className="w-full sm:w-80 border border-[#CDD4D0] rounded-sm bg-[#FAFAFA] overflow-hidden shadow-sm">
                    {job.status === 'Finished' ? (
                        <>
                            <div className="flex justify-between p-3 border-b border-[#CDD4D0]">
                                <span className="font-bold text-[11px] uppercase tracking-wider text-[#2A3B32]">Total Selling Amount</span>
                                <span className="font-mono font-bold text-sm text-[#2A3B32]">₹{totalSales.toFixed(2)}</span>
                            </div>
                            <div className={`flex justify-between p-4 ${profitMargin >= 0 ? 'bg-[#E8F5E9] text-[#117843]' : 'bg-[#FCF0F0] text-[#DC2626]'}`}>
                                <span className="font-black text-xs uppercase tracking-wider">Profit Margin</span>
                                <span className="font-mono font-black text-lg">₹{profitMargin.toFixed(2)}</span>
                            </div>
                        </>
                    ) : (
                         <div className="p-4 text-center italic text-xs text-[#8C9B92]">Sales & profit active when 'Finished'.</div>
                    )}
                </div>
            </div>

            {/* Mobile Actions */}
            {isEdit ? (
                <div className="mt-4 flex gap-2 pb-2 md:hidden px-2">
                    <button onClick={() => {
                        if(confirm("Are you sure you want to cancel? Unsaved changes will be lost.")) {
                            if (job.isNewDraft) deleteJob(job.id, true);
                            else updateJobState(job.id, 'isEditing', false);
                        }
                    }} className="flex-1 flex items-center justify-center bg-[#E8EDE9] hover:bg-[#CDD4D0] text-[#2C3631] py-3.5 rounded-sm border border-[#CDD4D0] transition-colors shadow-sm font-bold text-xs gap-1.5 cursor-pointer">
                        <Icons.X className="w-4 h-4" /> CANCEL
                    </button>
                    <button onClick={() => saveJob(job)} className="flex-[2] justify-center flex items-center gap-1.5 bg-[#117843] text-white hover:bg-[#0B4D2B] py-3.5 rounded-sm font-bold text-xs transition-colors shadow-sm cursor-pointer">
                        <Icons.Check className="w-4 h-4" /> SAVE CHANGES
                    </button>
                </div>
            ) : (
                <div className="mt-4 flex justify-end pb-2 md:hidden px-2 gap-2 flex-wrap">
                    {job.status === 'Finished' && (
                        <button onClick={handleCopyWhatsApp} className="flex-1 flex items-center justify-center gap-1.5 text-[#117843] font-bold text-xs bg-white px-4 py-3 rounded-sm border border-[#CDD4D0] shadow-sm hover:bg-[#E8F5E9] transition-colors min-w-[100px] cursor-pointer">
                            <Icons.Copy className="w-4 h-4" /> COPY
                        </button>
                    )}
                    <button onClick={() => setPrintJobId(job.id)} className="flex-1 flex items-center justify-center gap-1.5 text-[#2A3B32] font-bold text-xs bg-white px-4 py-3 rounded-sm border border-[#CDD4D0] shadow-sm hover:bg-[#F4F5F3] transition-colors min-w-[100px] cursor-pointer">
                        <Icons.Printer className="w-4 h-4" /> PRINT
                    </button>
                    <button onClick={() => deleteJob(job.id)} className="flex-[2] flex items-center justify-center gap-1.5 text-[#EF4444] font-bold text-xs bg-white px-4 py-3 rounded-sm border border-[#CDD4D0] shadow-sm hover:bg-[#FCF0F0] transition-colors min-w-[120px] cursor-pointer">
                        <Icons.Trash className="w-4 h-4" /> DELETE TEMPLATE
                    </button>
                </div>
            )}

            {/* --- UPDATE HISTORY MODAL --- */}
            {showHistory && (
                <div className="fixed inset-0 z-[110] flex items-end sm:items-center justify-center bg-[#2A3B32]/40 backdrop-blur-sm p-0 sm:p-4 transition-all" onClick={() => setShowHistory(false)}>
                    <div className="bg-white w-full sm:max-w-md rounded-t-xl sm:rounded-sm shadow-2xl flex flex-col max-h-[90vh] sm:max-h-[80vh] animate-in slide-in-from-bottom-full sm:slide-in-from-bottom-0 duration-300" onClick={e => e.stopPropagation()}>
                        <div className="flex justify-between items-center p-4 border-b border-[#CDD4D0] bg-[#E8EDE9] rounded-t-xl sm:rounded-t-sm shrink-0">
                            <div>
                                <h3 className="font-bold text-[#2A3B32] uppercase tracking-tight text-sm">Update History</h3>
                                <p className="text-[10px] text-[#6B7C72] uppercase tracking-widest font-semibold mt-0.5">{job.jobId || 'UNSAVED'}</p>
                            </div>
                            <button onClick={() => setShowHistory(false)} className="text-[#8C9B92] hover:text-[#8C3A3A] transition-colors p-1 bg-white rounded-sm shadow-sm border border-[#CDD4D0]">
                                <Icons.X className="w-4 h-4" />
                            </button>
                        </div>
                        
                        <div className="p-5 overflow-y-auto flex-1 bg-white">
                            {job.updateHistory && job.updateHistory.length > 0 ? (
                                <div className="space-y-3 relative before:absolute before:inset-0 before:ml-[13px] before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-[#CDD4D0] before:via-[#CDD4D0] before:to-transparent">
                                    {[...(job.updateHistory || [])].reverse().map((h, i) => (
                                        <div key={i} className="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active mb-4">
                                            <div className="flex items-center justify-center w-7 h-7 rounded-full border-[3px] border-white bg-[#546F60] text-white shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2 z-10">
                                                <Icons.Check className="w-3 h-3" />
                                            </div>
                                            <div className="w-[calc(100%-2.5rem)] md:w-[calc(50%-1.5rem)] bg-[#FAFAFA] p-3 rounded-sm shadow-sm border border-[#CDD4D0]">
                                                <div className="text-[10px] font-mono text-[#6B7C72] mb-1">{h.time}</div>
                                                <div className="text-xs font-bold text-[#2C3631] uppercase tracking-wider">{h.action}</div>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            ) : (
                                <div className="text-center text-xs text-[#8C9B92] italic py-4">No update history available.</div>
                            )}
                        </div>
                        
                        <div className="p-4 border-t border-[#CDD4D0] bg-[#FAFAFA] shrink-0 rounded-b-xl sm:rounded-b-sm">
                            <button onClick={() => setShowHistory(false)} className="w-full flex items-center justify-center gap-1.5 bg-[#DEE3DF] hover:bg-[#CDD4D0] text-[#2A3B32] py-3 rounded-sm font-bold text-xs uppercase tracking-widest shadow-sm transition-colors cursor-pointer">
                                Close History
                            </button>
                        </div>
                    </div>
                </div>
            )}

            {/* --- MOBILE DETAIL POPUP MODAL (Finished Products) --- */}
            {expandedFinIndex !== null && finishedItems[expandedFinIndex] && (
                <div className="fixed inset-0 z-[100] flex items-end sm:items-center justify-center bg-[#2A3B32]/40 backdrop-blur-sm p-0 sm:p-4 transition-all md:hidden" onClick={() => setExpandedFinIndex(null)}>
                    <div className="bg-white w-full sm:max-w-md rounded-t-xl sm:rounded-sm shadow-2xl flex flex-col max-h-[90vh] animate-in slide-in-from-bottom-full sm:slide-in-from-bottom-0 duration-300" onClick={e => e.stopPropagation()}>
                        <div className="flex justify-between items-center p-4 border-b border-[#CDD4D0] bg-[#E8EDE9] rounded-t-xl sm:rounded-t-sm shrink-0">
                            <div>
                                <h3 className="font-bold text-[#2A3B32] uppercase tracking-tight text-sm">Finished Product Details</h3>
                                <p className="text-[10px] text-[#6B7C72] uppercase tracking-widest font-semibold mt-0.5">{expandedFinIndex + 1}</p>
                            </div>
                            <button onClick={() => setExpandedFinIndex(null)} className="text-[#8C9B92] hover:text-[#8C3A3A] transition-colors p-1 bg-white rounded-sm shadow-sm border border-[#CDD4D0]">
                                <Icons.X className="w-4 h-4" />
                            </button>
                        </div>
                        
                        <div className="p-5 overflow-y-auto flex-1 bg-white">
                            <div className="grid grid-cols-2 gap-x-4 gap-y-5">
                                <div className="col-span-2">
                                    <label className="block text-[9px] uppercase font-bold text-[#8C9B92] tracking-wider mb-1.5">Product Name</label>
                                    <input type="text" disabled={!isEdit} value={finishedItems[expandedFinIndex].name} onChange={e=>handleFinishedItemChange(expandedFinIndex,'name',e.target.value)} className={`${modalInputClasses} w-full`} placeholder="e.g. Size M, Red Variant..." />
                                </div>
                                <div className="col-span-1">
                                    <label className="block text-[9px] uppercase font-bold text-[#8C9B92] tracking-wider mb-1.5">Quantity</label>
                                    <input type="number" disabled={!isEdit} value={finishedItems[expandedFinIndex].qty || ''} onChange={e=>handleFinishedItemChange(expandedFinIndex,'qty',e.target.value)} className={`${modalInputClasses} w-full font-mono font-bold text-[#117843]`} placeholder="0" />
                                </div>
                                <div className="col-span-1">
                                    <label className="block text-[9px] uppercase font-bold text-[#8C9B92] tracking-wider mb-1.5">Selling Rate (₹)</label>
                                    <input type="number" disabled={!isEdit} value={finishedItems[expandedFinIndex].price || ''} onChange={e=>handleFinishedItemChange(expandedFinIndex,'price',e.target.value)} className={`${modalInputClasses} w-full font-mono`} placeholder="0.00" />
                                </div>
                                <div className="col-span-2">
                                    <label className="block text-[9px] uppercase font-bold text-[#117843] tracking-wider mb-1.5">Total Sales (₹)</label>
                                    <div className={`${modalInputClasses} w-full font-mono font-bold text-[#117843] bg-[#E8F5E9] border-[#C8E6C9]`}>
                                        {((parseInt(finishedItems[expandedFinIndex].qty)||0)*(parseFloat(finishedItems[expandedFinIndex].price)||0)).toFixed(2)}
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div className="p-4 border-t border-[#CDD4D0] bg-[#FAFAFA] flex justify-between gap-3 shrink-0 rounded-b-xl sm:rounded-b-sm">
                            {isEdit ? (
                                <>
                                    <button onClick={() => {
                                        if(confirm("Are you sure you want to delete this finished product?")) {
                                            const u = finishedItems.filter((_,idx)=>idx!==expandedFinIndex); 
                                            updateJobState(job.id, { finishedItems: u });
                                            setExpandedFinIndex(null);
                                        }
                                    }} className="flex items-center justify-center gap-1.5 text-[#EF4444] bg-white px-4 py-3 rounded-sm border border-[#CDD4D0] text-xs font-bold uppercase tracking-widest hover:bg-[#FCF0F0] shadow-sm cursor-pointer">
                                        <Icons.Trash className="w-4 h-4" /> <span className="hidden sm:inline">Delete</span>
                                    </button>
                                    <button onClick={() => setExpandedFinIndex(null)} className="flex-1 flex items-center justify-center gap-1.5 bg-[#117843] hover:bg-[#0B4D2B] text-white py-3 rounded-sm font-bold text-xs uppercase tracking-widest shadow-sm transition-colors cursor-pointer">
                                        <Icons.Check className="w-4 h-4" /> Done Editing
                                    </button>
                                </>
                            ) : (
                                <button onClick={() => setExpandedFinIndex(null)} className="w-full flex items-center justify-center gap-1.5 bg-[#DEE3DF] hover:bg-[#CDD4D0] text-[#2A3B32] py-3 rounded-sm font-bold text-xs uppercase tracking-widest shadow-sm transition-colors cursor-pointer">
                                    Close Details
                                </button>
                            )}
                        </div>
                    </div>
                </div>
            )}

            {/* --- MOBILE DETAIL POPUP MODAL (Particulars) --- */}
            {expandedPartIndex !== null && parts[expandedPartIndex] && (
                <div className="fixed inset-0 z-[100] flex items-end sm:items-center justify-center bg-[#2A3B32]/40 backdrop-blur-sm p-0 sm:p-4 transition-all md:hidden" onClick={() => setExpandedPartIndex(null)}>
                    <div className="bg-white w-full sm:max-w-md rounded-t-xl sm:rounded-sm shadow-2xl flex flex-col max-h-[90vh] animate-in slide-in-from-bottom-full sm:slide-in-from-bottom-0 duration-300" onClick={e => e.stopPropagation()}>
                        <div className="flex justify-between items-center p-4 border-b border-[#CDD4D0] bg-[#E8EDE9] rounded-t-xl sm:rounded-t-sm shrink-0">
                            <div>
                                <h3 className="font-bold text-[#2A3B32] uppercase tracking-tight text-sm">Particular Details</h3>
                                <p className="text-[10px] text-[#6B7C72] uppercase tracking-widest font-semibold mt-0.5">Item #{expandedPartIndex + 1}</p>
                            </div>
                            <button onClick={() => setExpandedPartIndex(null)} className="text-[#8C9B92] hover:text-[#8C3A3A] transition-colors p-1 bg-white rounded-sm shadow-sm border border-[#CDD4D0]">
                                <Icons.X className="w-4 h-4" />
                            </button>
                        </div>
                        
                        <div className="p-5 overflow-y-auto flex-1 bg-white">
                            <div className="grid grid-cols-2 gap-x-4 gap-y-5">
                                <div className="col-span-2 sm:col-span-1">
                                    <label className="block text-[9px] uppercase font-bold text-[#8C9B92] tracking-wider mb-1.5">Type</label>
                                    <select disabled={!isEdit} value={parts[expandedPartIndex].type} onChange={e=>handlePartChange(expandedPartIndex,'type',e.target.value)} className={`${modalInputClasses} w-full`}>
                                        <option value="Material">Material</option>
                                        <option value="Process">Process</option>
                                        <option value="Additional Cost">Add. Cost</option>
                                    </select>
                                </div>
                                <div className="col-span-2 sm:col-span-1">
                                    <label className="block text-[9px] uppercase font-bold text-[#8C9B92] tracking-wider mb-1.5">Date</label>
                                    <input type="date" disabled={!isEdit} value={parts[expandedPartIndex].date||''} onChange={e=>handlePartChange(expandedPartIndex,'date',e.target.value)} className={`${modalInputClasses} w-full`} />
                                </div>
                                <div className="col-span-2 relative">
                                    <label className="block text-[9px] uppercase font-bold text-[#8C9B92] tracking-wider mb-1.5">Particular</label>
                                    {parts[expandedPartIndex].type==='Additional Cost'? (
                                        <input type="text" disabled={!isEdit} value={parts[expandedPartIndex].particular} onChange={e=>handlePartChange(expandedPartIndex,'particular',e.target.value)} className={`${modalInputClasses} w-full italic`} placeholder="Desc..." />
                                    ) : (
                                        <div className={isEdit ? "border border-[#CDD4D0] rounded-sm bg-[#FAFAFA] h-[34px]" : "h-[34px]"}>
                                            <SearchableSelect 
                                                disabled={!isEdit} 
                                                value={parts[expandedPartIndex].particular} 
                                                onChange={v=>handlePartChange(expandedPartIndex,'particular',v)} 
                                                options={parts[expandedPartIndex].type==='Material'?(presets.materials||[]):(presets.processes||[])} 
                                                category={parts[expandedPartIndex].type === 'Material' ? 'materials' : 'processes'}
                                                moduleName={parts[expandedPartIndex].type === 'Material' ? 'Material' : 'Process'}
                                                onAddNewMaster={(cat, val, mod) => handleTriggerNewMaster(cat, val, mod, (finalVal) => handlePartChange(expandedPartIndex, 'particular', finalVal))}
                                                className={isEdit ? "px-2 text-xs font-semibold text-[#2C3631]" : "text-xs font-semibold text-[#2C3631]"} 
                                            />
                                        </div>
                                    )}
                                </div>
                                <div className="col-span-2 relative">
                                    <label className="block text-[9px] uppercase font-bold text-[#8C9B92] tracking-wider mb-1.5">Supplier</label>
                                    <div className={isEdit ? "border border-[#CDD4D0] rounded-sm bg-[#FAFAFA] h-[34px]" : "h-[34px]"}>
                                        <SearchableSelect 
                                            disabled={!isEdit||parts[expandedPartIndex].type==='Additional Cost'} 
                                            value={parts[expandedPartIndex].vendor} 
                                            onChange={v=>handlePartChange(expandedPartIndex,'vendor',v)} 
                                            options={presets.vendors||[]} 
                                            category="vendors"
                                            moduleName="Supplier / Vendor"
                                            onAddNewMaster={(cat, val, mod) => handleTriggerNewMaster(cat, val, mod, (finalVal) => handlePartChange(expandedPartIndex, 'vendor', finalVal))}
                                            className={isEdit ? "px-2 text-xs font-semibold text-[#2C3631]" : "text-xs font-semibold text-[#2C3631]"} 
                                        />
                                    </div>
                                </div>
                                <div className="col-span-1">
                                    <label className="block text-[9px] uppercase font-bold text-[#8C9B92] tracking-wider mb-1.5">Quantity</label>
                                    <input type="number" disabled={!isEdit} value={parts[expandedPartIndex].quantity || ''} onChange={e=>handlePartChange(expandedPartIndex,'quantity',e.target.value)} className={`${modalInputClasses} w-full font-mono`} placeholder="0" />
                                </div>
                                <div className="col-span-1 relative">
                                    <label className="block text-[9px] uppercase font-bold text-[#8C9B92] tracking-wider mb-1.5">Unit</label>
                                    <div className={isEdit ? "border border-[#CDD4D0] rounded-sm bg-[#FAFAFA] h-[34px]" : "h-[34px]"}>
                                        <SearchableSelect 
                                            disabled={!isEdit} 
                                            value={parts[expandedPartIndex].unit} 
                                            onChange={v=>handlePartChange(expandedPartIndex,'unit',v)} 
                                            options={presets.units||[]} 
                                            category="units"
                                            moduleName="Unit"
                                            onAddNewMaster={(cat, val, mod) => handleTriggerNewMaster(cat, val, mod, (finalVal) => handlePartChange(expandedPartIndex, 'unit', finalVal))}
                                            className={isEdit ? "px-2 text-xs font-semibold text-[#2C3631] font-mono" : "text-xs font-semibold text-[#2C3631] font-mono"} 
                                        />
                                    </div>
                                </div>
                                <div className="col-span-1">
                                    <label className="block text-[9px] uppercase font-bold text-[#8C9B92] tracking-wider mb-1.5">Rate (₹)</label>
                                    <input type="number" disabled={!isEdit} value={parts[expandedPartIndex].rate || ''} onChange={e=>handlePartChange(expandedPartIndex,'rate',e.target.value)} className={`${modalInputClasses} w-full font-mono`} placeholder="0.00" />
                                </div>
                                <div className="col-span-1">
                                    <label className="block text-[9px] uppercase font-bold text-[#117843] tracking-wider mb-1.5">Total Amount (₹)</label>
                                    <input type="number" step="0.01" disabled={!isEdit} value={parts[expandedPartIndex].amount || ''} onChange={e=>handlePartChange(expandedPartIndex,'amount',e.target.value)} className={`${modalInputClasses} w-full font-mono font-bold text-[#117843] ${isEdit?'bg-[#E8F5E9] border-[#C8E6C9]':''}`} placeholder="0.00" />
                                </div>

                                <div className="col-span-2 pt-2 border-t border-[#CDD4D0]">
                                    <label className="block text-[9px] uppercase font-bold text-[#546F60] tracking-wider mb-2">Bill / Document Attachment</label>
                                    <div className="flex items-center justify-between bg-[#F4F5F3] p-2.5 rounded-sm border border-[#CDD4D0]">
                                        <div className="text-xs truncate max-w-[200px]">
                                            {parts[expandedPartIndex].attachment_bbcode || parts[expandedPartIndex].attachment_remarks ? (
                                                <div>
                                                    <span className="text-[#117843] font-bold flex items-center gap-1">
                                                        <Icons.CheckCircle2 className="w-3.5 h-3.5" /> Attachment Added
                                                    </span>
                                                </div>
                                            ) : (
                                                <span className="text-[#8C9B92] italic">No attachment added</span>
                                            )}
                                        </div>
                                        <div className="flex items-center gap-2">
                                            {(parts[expandedPartIndex].attachment_bbcode || parts[expandedPartIndex].attachment_remarks) && (
                                                <button
                                                    type="button"
                                                    onClick={() => setViewerAttachmentPart({ ...parts[expandedPartIndex], _index: expandedPartIndex })}
                                                    className="px-2.5 py-1 bg-[#E8F5E9] text-[#117843] border border-[#A5D6A7] rounded-sm font-bold text-xs cursor-pointer"
                                                >
                                                    View
                                                </button>
                                            )}
                                            <button
                                                type="button"
                                                onClick={() => setActiveAttachmentPart({ ...parts[expandedPartIndex], _index: expandedPartIndex })}
                                                className="px-2.5 py-1 bg-white text-[#2C3631] border border-[#CDD4D0] rounded-sm font-bold text-xs cursor-pointer"
                                            >
                                                {(parts[expandedPartIndex].attachment_bbcode || parts[expandedPartIndex].attachment_remarks) ? 'Edit' : 'Add'}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div className="p-4 border-t border-[#CDD4D0] bg-[#FAFAFA] flex justify-between gap-3 shrink-0 rounded-b-xl sm:rounded-b-sm">
                            {isEdit ? (
                                <>
                                    <button onClick={() => {
                                        if(confirm("Are you sure you want to delete this line item?")) {
                                            const u = parts.filter((_,idx)=>idx!==expandedPartIndex); 
                                            updateJobState(job.id,'particulars',u);
                                            setExpandedPartIndex(null);
                                        }
                                    }} className="flex items-center justify-center gap-1.5 text-[#EF4444] bg-white px-4 py-3 rounded-sm border border-[#CDD4D0] text-xs font-bold uppercase tracking-widest hover:bg-[#FCF0F0] shadow-sm cursor-pointer">
                                        <Icons.Trash className="w-4 h-4" /> <span className="hidden sm:inline">Delete</span>
                                    </button>
                                    <button onClick={() => setExpandedPartIndex(null)} className="flex-1 flex items-center justify-center gap-1.5 bg-[#117843] hover:bg-[#0B4D2B] text-white py-3 rounded-sm font-bold text-xs uppercase tracking-widest shadow-sm transition-colors cursor-pointer">
                                        <Icons.Check className="w-4 h-4" /> Done Editing
                                    </button>
                                </>
                            ) : (
                                <button onClick={() => setExpandedPartIndex(null)} className="w-full flex items-center justify-center gap-1.5 bg-[#DEE3DF] hover:bg-[#CDD4D0] text-[#2A3B32] py-3 rounded-sm font-bold text-xs uppercase tracking-widest shadow-sm transition-colors cursor-pointer">
                                    Close Details
                                </button>
                            )}
                        </div>
                    </div>
                </div>
            )}

            {/* --- ATTACHMENT MODAL (Add/Edit) --- */}
            {activeAttachmentPart && (
                <AttachmentModal
                    particular={activeAttachmentPart}
                    job={job}
                    onClose={() => setActiveAttachmentPart(null)}
                    onSave={handleSaveAttachment}
                    showToast={showToast}
                />
            )}

            {/* --- ATTACHMENT VIEWER MODAL (Safe View) --- */}
            {viewerAttachmentPart && (
                <AttachmentViewerModal
                    particular={viewerAttachmentPart}
                    job={job}
                    onClose={() => setViewerAttachmentPart(null)}
                    onEdit={(part) => setActiveAttachmentPart(part)}
                />
            )}

            {/* --- QUICK ADD MASTER POPUP (Inline from template field) --- */}
            {quickMasterPrompt && (
                <QuickAddMasterModal
                    isOpen={true}
                    onClose={() => setQuickMasterPrompt(null)}
                    initialCategory={quickMasterPrompt.category}
                    lockCategory={true}
                    initialValue={quickMasterPrompt.itemName}
                    moduleName={quickMasterPrompt.moduleName}
                    presets={presets}
                    onSaveMaster={onQuickAddMaster}
                    onSuccess={(category, newItemName) => {
                        if (quickMasterPrompt.onConfirm) {
                            quickMasterPrompt.onConfirm(newItemName);
                        }
                    }}
                    showToast={showToast}
                />
            )}
        </div>
    );
}

// --- 13. LOGIN VIEW ---
function LoginView({ loginUser, setLoginUser, loginPass, setLoginPass, handleLogin }) {
    return (
        <div className="min-h-screen flex items-center justify-center bg-[#F4F5F3] font-sans px-4 py-8">
            <div className="w-full max-w-sm flex flex-col items-center">
                <div className="bg-white p-8 border border-[#CDD4D0] shadow-sm w-full flex flex-col gap-4 rounded-sm">
                    <div className="text-center font-bold text-[#2A3B32] text-xl tracking-tight uppercase flex items-center justify-center gap-2">
                        <Icons.FileSpreadsheet className="w-5 h-5 text-[#546F60]" /> JF Creations
                    </div>
                    <div className="text-center text-xs text-[#6B7C72] mb-2 uppercase tracking-widest font-semibold border-b border-[#CDD4D0] pb-4">
                        Costing System Auth
                    </div>
                    
                    <input
                        type="text"
                        placeholder="Username"
                        value={loginUser}
                        onChange={e => setLoginUser(e.target.value)}
                        onKeyDown={e => { if (e.key === 'Enter') document.getElementById('passInput').focus(); }}
                        className="border border-[#CDD4D0] p-2.5 outline-none focus:border-[#546F60] focus:ring-1 focus:ring-[#546F60]/20 rounded-sm mt-2 text-sm"
                        autoComplete="username"
                    />
                    <input
                        id="passInput"
                        type="password"
                        placeholder="Password"
                        value={loginPass}
                        onChange={e => setLoginPass(e.target.value)}
                        onKeyDown={e => { if (e.key === 'Enter') handleLogin(); }}
                        className="border border-[#CDD4D0] p-2.5 outline-none focus:border-[#546F60] focus:ring-1 focus:ring-[#546F60]/20 rounded-sm text-sm"
                        autoComplete="current-password"
                    />
                    
                    <button
                        type="button"
                        onClick={handleLogin}
                        className="bg-[#546F60] text-white py-2.5 font-bold text-sm tracking-wide hover:bg-[#43594D] transition-colors rounded-sm mt-2 shadow-sm cursor-pointer"
                    >
                        LOG IN
                    </button>
                </div>
            </div>
        </div>
    );
}

// --- 14. PRINT JOB VIEW ---
function PrintJobView({ job, onBack }) {
    const parts = job.particulars || [];
    const totalCost = parts.reduce((s, p) => s + (parseFloat(p.amount) || 0), 0);
    
    const finishedItems = job.finishedItems || [];
    const totalQty = finishedItems.reduce((s, i) => s + (parseInt(i.qty) || 0), 0);
    const totalSales = finishedItems.reduce((s, i) => s + ((parseInt(i.qty)||0) * (parseFloat(i.price)||0)), 0);
    
    const perPiece = totalQty > 0 ? (totalCost / totalQty).toFixed(2) : '0.00';
    const profitMargin = totalSales - totalCost;

    const hasFinishedData = finishedItems.some(fi => (fi.name && String(fi.name).trim() !== '') || (parseFloat(fi.qty) > 0) || (parseFloat(fi.price) > 0));
    const showFinishedProducts = job.status === 'Finished' || hasFinishedData;

    return (
        <div className="min-h-screen bg-[#525659] p-2 sm:p-8 flex flex-col items-center overflow-y-auto print:bg-white print:p-0">
            <div className="no-print w-full max-w-4xl flex justify-between items-center mb-4">
                <button onClick={onBack} className="bg-white text-[#2C3631] px-4 py-2 rounded-sm font-bold text-sm hover:bg-gray-100 flex items-center gap-2 shadow-sm border border-[#CDD4D0] transition-colors cursor-pointer">
                    <Icons.ChevronRight className="w-4 h-4 rotate-180" /> BACK TO SYSTEM
                </button>
                <button onClick={() => window.print()} className="bg-[#117843] text-white px-6 py-2 rounded-sm font-bold text-sm hover:bg-[#0B4D2B] flex items-center gap-2 shadow-sm transition-colors cursor-pointer">
                    <Icons.Printer className="w-4 h-4" /> PRINT PDF
                </button>
            </div>

            <div className="bg-white w-full max-w-4xl shadow-2xl print:shadow-none print:max-w-none rounded-sm overflow-hidden">
                <div className="p-6 sm:p-12 font-sans text-[#2C3631]">
                    <div className="flex flex-col sm:flex-row justify-between items-start sm:items-end border-b-[3px] border-[#117843] pb-6 mb-8 gap-4">
                        <div>
                            <h1 className="text-3xl font-black text-[#117843] uppercase tracking-tighter leading-none">JF Creations</h1>
                            <p className="text-sm font-bold text-[#546F60] uppercase tracking-widest mt-2">Costing & Production Sheet</p>
                        </div>
                        <div className="text-left sm:text-right">
                            <div className="text-2xl font-bold uppercase text-[#2A3B32]">{job.jobId || 'UNSAVED'}</div>
                            <div className="text-sm font-semibold text-[#6B7C72] mt-1">Date: {job.date}</div>
                        </div>
                    </div>

                    <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8 bg-[#F4F5F3] p-6 rounded-sm border border-[#CDD4D0]">
                        <div className="col-span-2">
                            <div className="text-[10px] uppercase font-bold text-[#8C9B92] tracking-wider mb-1">Client</div>
                            <div className="text-xl font-bold">{job.customerName || '-'}</div>
                        </div>
                        <div className="col-span-2">
                            <div className="text-[10px] uppercase font-bold text-[#8C9B92] tracking-wider mb-1">Style Name</div>
                            <div className="text-xl font-bold">{job.styleName || '-'}</div>
                        </div>
                        <div className="col-span-2">
                            <div className="text-[10px] uppercase font-bold text-[#8C9B92] tracking-wider mb-1">Fabric Source</div>
                            <div className="text-sm font-semibold">{job.fabricSource || '-'}</div>
                        </div>
                        <div className="col-span-1">
                            <div className="text-[10px] uppercase font-bold text-[#8C9B92] tracking-wider mb-1">Total Quantity</div>
                            <div className="text-sm font-mono font-bold text-[#117843]">{totalQty} PCS</div>
                        </div>
                        <div className="col-span-1">
                            <div className="text-[10px] uppercase font-bold text-[#8C9B92] tracking-wider mb-1">Status</div>
                            <div className="text-sm font-bold">{job.status}</div>
                        </div>
                    </div>
                    
                    {showFinishedProducts && (
                        <>
                            <h3 className="text-xs uppercase tracking-widest font-bold text-[#546F60] border-b border-[#CDD4D0] pb-2 mb-4">Finished Products (Output)</h3>
                            <ReadOnlyFinishedItems finishedItems={finishedItems} />
                        </>
                    )}

                    <h3 className="text-xs uppercase tracking-widest font-bold text-[#546F60] border-b border-[#CDD4D0] pb-2 mb-4">Cost Breakdown (Particulars)</h3>
                    <ReadOnlyParticulars parts={parts} totalCost={totalCost} perPiece={perPiece} />

                    <div className="flex justify-end mb-16 mt-8">
                        <div className="w-full sm:w-80 border border-[#CDD4D0] rounded-sm bg-[#FAFAFA] overflow-hidden">
                            <div className="flex justify-between p-3 border-b border-[#CDD4D0]">
                                <span className="font-bold text-[11px] uppercase tracking-wider text-[#546F60]">Total Cost</span>
                                <span className="font-mono font-bold text-sm">₹{totalCost.toFixed(2)}</span>
                            </div>
                            <div className="flex justify-between p-3 border-b border-[#CDD4D0] bg-[#E8EDE9]">
                                <span className="font-bold text-[11px] uppercase tracking-wider text-[#117843]">Avg. Cost Per Unit</span>
                                <span className="font-mono font-bold text-sm text-[#117843]">₹{perPiece}</span>
                            </div>
                            {job.status === 'Finished' && (
                                <>
                                    <div className="flex justify-between p-3 border-b border-[#CDD4D0]">
                                        <span className="font-bold text-[11px] uppercase tracking-wider text-[#2A3B32]">Total Selling Amount</span>
                                        <span className="font-mono font-bold text-sm text-[#2A3B32]">₹{totalSales.toFixed(2)}</span>
                                    </div>
                                    <div className={`flex justify-between p-4 ${profitMargin >= 0 ? 'bg-[#E8F5E9] text-[#117843]' : 'bg-[#FCF0F0] text-[#DC2626]'}`}>
                                        <span className="font-black text-xs uppercase tracking-wider">Profit Margin</span>
                                        <span className="font-mono font-black text-lg">₹{profitMargin.toFixed(2)}</span>
                                    </div>
                                </>
                            )}
                        </div>
                    </div>

                    <div className="text-center text-[10px] uppercase tracking-widest font-bold text-[#8C9B92] pt-8 border-t border-[#CDD4D0]">
                        Service Managed By Auditspace
                    </div>
                </div>
            </div>
        </div>
    );
}

// --- 15. PRINT SUMMARY VIEW ---
function PrintSummaryView({ jobs, filterCustomer, filterStatus, searchQuery, onBack }) {
    const getJobCost = (job) => {
        const parts = job.particulars || [];
        return parts.reduce((s, p) => s + (parseFloat(p.amount) || 0), 0);
    };

    const filteredJobs = (jobs || []).filter(j => {
        const matchesCustomer = filterCustomer === '' || j.customerName === filterCustomer;
        const matchesStatus = filterStatus === '' || j.status === filterStatus;
        const searchLower = searchQuery.toLowerCase();
        const matchesSearch = searchQuery === '' || 
            (j.jobId || '').toLowerCase().includes(searchLower) ||
            (j.customerName || '').toLowerCase().includes(searchLower) ||
            (j.styleName || '').toLowerCase().includes(searchLower) ||
            (j.productName || '').toLowerCase().includes(searchLower);

        return matchesCustomer && matchesStatus && matchesSearch && !j.isNewDraft;
    });

    const sortedJobs = [...filteredJobs].sort((a, b) => {
        const clientA = (a.customerName || '').toLowerCase();
        const clientB = (b.customerName || '').toLowerCase();
        if (clientA < clientB) return -1;
        if (clientA > clientB) return 1;
        if (a.status === 'Pending' && b.status !== 'Pending') return -1;
        if (a.status !== 'Pending' && b.status === 'Pending') return 1;
        const dateA = new Date(a.date || 0).getTime();
        const dateB = new Date(b.date || 0).getTime();
        return dateB - dateA;
    });

    const jobsWithSerial = sortedJobs.map((job, index) => ({ ...job, serialNumber: index + 1 }));

    const groupedJobs = jobsWithSerial.reduce((acc, job) => {
        const client = job.customerName || 'UNASSIGNED CLIENT';
        if (!acc[client]) acc[client] = [];
        acc[client].push(job);
        return acc;
    }, {});

    const clientsInOrder = Object.keys(groupedJobs).sort();

    return (
        <div className="min-h-screen bg-[#525659] p-2 sm:p-8 flex flex-col items-center overflow-y-auto print:bg-white print:p-0">
            <div className="no-print w-full max-w-5xl flex justify-between items-center mb-4">
                <button onClick={onBack} className="bg-white text-[#2C3631] px-4 py-2 rounded-sm font-bold text-sm hover:bg-gray-100 flex items-center gap-2 shadow-sm border border-[#CDD4D0] transition-colors cursor-pointer">
                    <Icons.ChevronRight className="w-4 h-4 rotate-180" /> BACK TO SYSTEM
                </button>
                <button onClick={() => window.print()} className="bg-[#117843] text-white px-6 py-2 rounded-sm font-bold text-sm hover:bg-[#0B4D2B] flex items-center gap-2 shadow-sm transition-colors cursor-pointer">
                    <Icons.Printer className="w-4 h-4" /> PRINT PDF
                </button>
            </div>

            <div className="bg-white w-full max-w-5xl shadow-2xl print:shadow-none print:max-w-none rounded-sm overflow-hidden">
                <div className="p-6 sm:p-12 font-sans text-[#2C3631]">
                    <div className="flex justify-between items-end border-b-[3px] border-[#117843] pb-6 mb-8">
                        <div>
                            <h1 className="text-3xl font-black text-[#117843] uppercase tracking-tighter leading-none">JF Creations</h1>
                            <p className="text-sm font-bold text-[#546F60] uppercase tracking-widest mt-2">Costing Summary Report</p>
                        </div>
                        <div className="text-right">
                            <div className="text-sm font-semibold text-[#6B7C72]">Date: {new Date().toISOString().split('T')[0]}</div>
                            <div className="text-xs font-semibold text-[#8C9B92] mt-1">
                                Filters: {filterCustomer || 'All Clients'} | {filterStatus || 'All Statuses'}
                            </div>
                        </div>
                    </div>

                    <table className="w-full text-left text-xs text-[#2C3631] border-collapse mb-8">
                        <thead className="bg-[#E8EDE9] text-[#41574C] font-bold uppercase tracking-tight">
                            <tr>
                                <th className="border border-[#CDD4D0] px-3 py-2 w-10 text-center">#</th>
                                <th className="border border-[#CDD4D0] px-3 py-2">Style Name</th>
                                <th className="border border-[#CDD4D0] px-3 py-2 w-[120px]">Job ID</th>
                                <th className="border border-[#CDD4D0] px-3 py-2 w-[100px]">Status</th>
                                <th className="border border-[#CDD4D0] px-3 py-2 text-right w-[100px]">Finished Units</th>
                                <th className="border border-[#CDD4D0] px-3 py-2 text-right w-[120px]">Current Cost</th>
                                <th className="border border-[#CDD4D0] px-3 py-2 text-right w-[120px]">Cost / Unit</th>
                            </tr>
                        </thead>
                        <tbody className="tabular-nums">
                            {clientsInOrder.map(client => {
                                const clientJobs = groupedJobs[client];
                                return (
                                    <React.Fragment key={`print-client-${client}`}>
                                        <tr className="bg-[#D1DCD5] font-bold text-[#2A3B32]">
                                            <td colSpan="7" className="border border-[#CDD4D0] px-3 py-2 uppercase tracking-wider text-sm text-[#117843]">
                                                {client}
                                            </td>
                                        </tr>
                                        {clientJobs.map(job => {
                                            const totalCost = getJobCost(job);
                                            const qty = parseInt(job.quantity) || 0;
                                            const perPiece = qty > 0 ? (totalCost / qty).toFixed(2) : '0.00';
                                            return (
                                                <tr key={`print-${job.id}`} className="border-b border-[#F0F2F0]">
                                                    <td className="border-x border-[#CDD4D0] px-3 py-1.5 text-center text-[#8C9B92] font-medium">{job.serialNumber}</td>
                                                    <td className="border-r border-[#CDD4D0] px-3 py-1.5 font-medium">{job.styleName || '-'}</td>
                                                    <td className="border-r border-[#CDD4D0] px-3 py-1.5 text-[#6B7C72]">{job.jobId || '-'}</td>
                                                    <td className="border-r border-[#CDD4D0] px-3 py-1.5">
                                                        <span className="text-[10px] uppercase font-bold tracking-wider">{job.status}</span>
                                                    </td>
                                                    <td className="border-r border-[#CDD4D0] px-3 py-1.5 text-right font-mono">{qty}</td>
                                                    <td className="border-r border-[#CDD4D0] px-3 py-1.5 text-right font-mono">₹{totalCost.toFixed(2)}</td>
                                                    <td className="border-r border-[#CDD4D0] px-3 py-1.5 text-right font-mono font-bold text-[#117843]">₹{perPiece}</td>
                                                </tr>
                                            );
                                        })}
                                    </React.Fragment>
                                );
                            })}
                            {clientsInOrder.length === 0 && (
                                <tr>
                                    <td colSpan="7" className="border border-[#CDD4D0] text-center py-8 text-[#8C9B92] italic">No data available for summary.</td>
                                </tr>
                            )}
                        </tbody>
                    </table>
                    
                    <div className="text-center text-[10px] uppercase tracking-widest font-bold text-[#8C9B92] pt-8 border-t border-[#CDD4D0]">
                        Service Managed By Auditspace
                    </div>
                </div>
            </div>
        </div>
    );
}

// --- 16. SUMMARY VIEW ---
function SummaryView({ jobs, filterStatus, setFilterStatus, presets, searchQuery, setSearchQuery, setIsPrintingSummary }) {
    const [currentPage, setCurrentPage] = useState(1);
    const [itemsPerPage, setItemsPerPage] = useState(50);
    const [expandedJob, setExpandedJob] = useState(null);
    const [filterCustomer, setFilterCustomer] = useState('');

    useEffect(() => { setCurrentPage(1); }, [filterCustomer, filterStatus, searchQuery, itemsPerPage]);

    const getJobCost = (job) => {
        const parts = job.particulars || [];
        return parts.reduce((s, p) => s + (parseFloat(p.amount) || 0), 0);
    };

    const filteredJobs = (jobs || []).filter(j => {
        const matchesCustomer = filterCustomer === '' || j.customerName === filterCustomer;
        const matchesStatus = filterStatus === '' || j.status === filterStatus;
        const searchLower = searchQuery.toLowerCase();
        const matchesSearch = searchQuery === '' || 
            (j.jobId || '').toLowerCase().includes(searchLower) ||
            (j.customerName || '').toLowerCase().includes(searchLower) ||
            (j.styleName || '').toLowerCase().includes(searchLower) ||
            (j.productName || '').toLowerCase().includes(searchLower);

        return matchesCustomer && matchesStatus && matchesSearch && !j.isNewDraft;
    });

    const sortedJobs = [...filteredJobs].sort((a, b) => {
        const clientA = (a.customerName || '').toLowerCase();
        const clientB = (b.customerName || '').toLowerCase();
        if (clientA < clientB) return -1;
        if (clientA > clientB) return 1;
        if (a.status === 'Pending' && b.status !== 'Pending') return -1;
        if (a.status !== 'Pending' && b.status === 'Pending') return 1;
        const dateA = new Date(a.date || 0).getTime();
        const dateB = new Date(b.date || 0).getTime();
        return dateB - dateA;
    });
    
    const jobsWithSerial = sortedJobs.map((job, index) => ({ ...job, serialNumber: index + 1 }));

    const groupedJobs = jobsWithSerial.reduce((acc, job) => {
        const client = job.customerName || 'UNASSIGNED CLIENT';
        if (!acc[client]) acc[client] = [];
        acc[client].push(job);
        return acc;
    }, {});

    const clientsInOrder = Object.keys(groupedJobs).sort();
    
    const pages = [];
    let currentPageData = [];
    let currentItemCount = 0;

    for (const client of clientsInOrder) {
        const clientJobs = groupedJobs[client];
        if (currentItemCount > 0 && currentItemCount >= itemsPerPage) {
            pages.push(currentPageData);
            currentPageData = [];
            currentItemCount = 0;
        }
        currentPageData.push({ client, jobs: clientJobs });
        currentItemCount += clientJobs.length;
    }
    if (currentPageData.length > 0) {
        pages.push(currentPageData);
    }

    const totalPages = Math.max(1, pages.length);
    const safePage = Math.min(currentPage, totalPages);
    const pageToDisplay = pages[safePage - 1] || [];

    return (
        <div className="bg-white border border-[#CDD4D0] rounded-sm shadow-sm flex flex-col h-[calc(100vh-140px)] min-h-[500px]">
            <div className="flex flex-col md:flex-row justify-between items-stretch md:items-center bg-[#E8EDE9] p-2 border-b border-[#CDD4D0] gap-3 shrink-0">
                <div className="font-bold text-[#2A3B32] uppercase tracking-tight flex items-center gap-2 px-2 flex-1">
                    <Icons.Table className="w-4 h-4 text-[#546F60]" />
                    Summary Report
                </div>
                
                <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 w-full md:w-auto">
                    <div className="flex items-stretch sm:items-center border border-[#CDD4D0] bg-white rounded-sm overflow-hidden flex-1 sm:flex-none relative">
                        <div className="pl-2 pr-1 py-2 md:py-1.5 flex items-center text-[#546F60]">
                            <Icons.Search className="w-3.5 h-3.5" />
                        </div>
                        <input
                            type="text"
                            placeholder="Search Style, ID..."
                            value={searchQuery}
                            onChange={(e) => setSearchQuery(e.target.value)}
                            className="bg-transparent text-[#2C3631] text-xs font-medium focus:outline-none px-1 py-2 md:py-1.5 w-full sm:w-32 placeholder-[#A3B899]"
                        />
                        {searchQuery && (
                            <button onClick={() => setSearchQuery('')} className="px-2 text-[#8C3A3A] hover:text-red-600">
                                <Icons.X className="w-3 h-3" />
                            </button>
                        )}
                    </div>
                
                    <div className="flex items-stretch sm:items-center border border-[#CDD4D0] bg-white rounded-sm overflow-hidden flex-1 sm:flex-none">
                        <div className="bg-[#DEE3DF] px-2 py-2 md:py-1.5 border-r border-[#CDD4D0] text-[10px] md:text-xs font-semibold text-[#546F60] flex items-center gap-1 shrink-0">
                            <Icons.Filter className="w-3.5 h-3.5" /> Client
                        </div>
                        <select value={filterCustomer} onChange={e=>setFilterCustomer(e.target.value)} className="bg-transparent text-[#2C3631] text-xs font-medium focus:outline-none px-2 py-2 md:py-1.5 w-full sm:w-28 cursor-pointer flex-1">
                            <option value="">All Clients</option>
                            {(presets.customers || []).map(c => <option key={c} value={c}>{c}</option>)}
                        </select>
                    </div>

                    <div className="flex items-stretch sm:items-center border border-[#CDD4D0] bg-white rounded-sm overflow-hidden flex-1 sm:flex-none">
                        <div className="bg-[#DEE3DF] px-2 py-2 md:py-1.5 border-r border-[#CDD4D0] text-[10px] md:text-xs font-semibold text-[#546F60] flex items-center gap-1 shrink-0">
                            <Icons.Filter className="w-3.5 h-3.5" /> Status
                        </div>
                        <select value={filterStatus} onChange={e=>setFilterStatus(e.target.value)} className="bg-transparent text-[#2C3631] text-xs font-medium focus:outline-none px-2 py-2 md:py-1.5 w-full sm:w-28 cursor-pointer flex-1">
                            <option value="">All Statuses</option>
                            <option value="Pending">Pending</option>
                            <option value="In Process">In Process</option>
                            <option value="Finished">Finished</option>
                        </select>
                    </div>
                    
                    <div className="flex items-stretch sm:items-center border border-[#CDD4D0] bg-white rounded-sm overflow-hidden flex-1 sm:flex-none">
                        <div className="bg-[#DEE3DF] px-2 py-2 md:py-1.5 border-r border-[#CDD4D0] text-[10px] md:text-xs font-semibold text-[#546F60] flex items-center gap-1 shrink-0">
                            Rows
                        </div>
                        <select value={itemsPerPage} onChange={e=>setItemsPerPage(Number(e.target.value))} className="bg-transparent text-[#2C3631] text-xs font-medium focus:outline-none px-2 py-2 md:py-1.5 w-full sm:w-16 cursor-pointer flex-1">
                            <option value={10}>10</option>
                            <option value={20}>20</option>
                            <option value={30}>30</option>
                            <option value={50}>50</option>
                            <option value={100}>100</option>
                        </select>
                    </div>

                    <button onClick={() => setIsPrintingSummary(true)} className="flex items-center justify-center gap-1.5 text-[#2A3B32] font-bold text-xs bg-white px-3 py-2 md:py-1.5 rounded-sm border border-[#CDD4D0] shadow-sm hover:bg-[#F4F5F3] transition-colors shrink-0 cursor-pointer">
                        <Icons.Printer className="w-3.5 h-3.5" /> <span className="hidden lg:inline">PRINT</span>
                    </button>
                </div>
            </div>
            
            <div className="p-2 sm:p-4 overflow-y-auto bg-[#F4F5F3] h-full flex flex-col">
                <div className="hidden md:block overflow-x-auto bg-white border border-[#CDD4D0] rounded-sm shadow-sm flex-1">
                    <table className="w-full text-left text-xs text-[#2C3631] border-collapse">
                        <thead className="bg-[#E8EDE9] text-[#41574C] font-bold uppercase tracking-tight sticky top-0 z-10 shadow-sm">
                            <tr>
                                <th className="border-b border-r border-[#CDD4D0] px-3 py-2 w-10 text-center">#</th>
                                <th className="border-b border-r border-[#CDD4D0] px-3 py-2 w-[250px]">Style Name</th>
                                <th className="border-b border-r border-[#CDD4D0] px-3 py-2 w-[120px]">Job ID</th>
                                <th className="border-b border-r border-[#CDD4D0] px-3 py-2 w-[100px]">Status</th>
                                <th className="border-b border-r border-[#CDD4D0] px-3 py-2 text-right w-[100px]">Finished Units</th>
                                <th className="border-b border-r border-[#CDD4D0] px-3 py-2 text-right w-[120px]">Current Cost</th>
                                <th className="border-b border-[#CDD4D0] px-3 py-2 text-right w-[120px]">Cost / Unit</th>
                            </tr>
                        </thead>
                        <tbody className="tabular-nums">
                            {pageToDisplay.map(({ client, jobs: clientJobs }) => {
                                return (
                                    <React.Fragment key={`client-${client}`}>
                                        <tr className="bg-[#D1DCD5] font-bold text-[#2A3B32]">
                                            <td colSpan="7" className="border-b border-[#CDD4D0] px-3 py-2 uppercase tracking-wider text-sm text-[#117843]">
                                                {client}
                                            </td>
                                        </tr>
                                        {clientJobs.map(job => {
                                            const totalCost = getJobCost(job);
                                            const qty = parseInt(job.quantity) || 0;
                                            const perPiece = qty > 0 ? (totalCost / qty).toFixed(2) : '0.00';
                                            return (
                                                <tr key={job.id} onClick={() => setExpandedJob(job)} className="hover:bg-[#E8EDE9] border-b border-[#F0F2F0] last:border-b-0 cursor-pointer transition-colors" title="Click to view details">
                                                    <td className="border-r border-[#CDD4D0] px-3 py-1.5 text-center text-[#8C9B92] font-medium">{job.serialNumber}</td>
                                                    <td className="border-r border-[#CDD4D0] px-3 py-1.5 font-medium">{job.styleName || '-'}</td>
                                                    <td className="border-r border-[#CDD4D0] px-3 py-1.5 text-[#6B7C72]">{job.jobId || '-'}</td>
                                                    <td className="border-r border-[#CDD4D0] px-3 py-1.5">
                                                        <span className={`text-[10px] uppercase font-bold tracking-wider ${job.status==='Finished'?'text-[#117843]':job.status==='In Process'?'text-[#D97706]':'text-[#DC2626]'}`}>
                                                            {job.status}
                                                        </span>
                                                    </td>
                                                    <td className="border-r border-[#CDD4D0] px-3 py-1.5 text-right font-mono">{qty}</td>
                                                    <td className="border-r border-[#CDD4D0] px-3 py-1.5 text-right font-mono">₹{totalCost.toFixed(2)}</td>
                                                    <td className="px-3 py-1.5 text-right font-mono font-bold text-[#117843]">₹{perPiece}</td>
                                                </tr>
                                            );
                                        })}
                                    </React.Fragment>
                                );
                            })}
                            {pageToDisplay.length === 0 && (
                                <tr>
                                    <td colSpan="7" className="text-center py-8 text-[#8C9B92] italic">No data available for summary.</td>
                                </tr>
                            )}
                        </tbody>
                    </table>
                </div>

                <div className="md:hidden space-y-4 flex-1">
                    {pageToDisplay.map(({ client, jobs: clientJobs }) => {
                        return (
                            <div key={`mob-client-${client}`} className="bg-white border border-[#CDD4D0] rounded-sm shadow-sm overflow-hidden">
                                <div className="bg-[#D1DCD5] px-3 py-2 border-b border-[#CDD4D0]">
                                    <div className="font-bold text-[#117843] uppercase tracking-wide text-sm">{client}</div>
                                </div>
                                <div className="divide-y divide-[#F0F2F0]">
                                    {clientJobs.map(job => {
                                        const totalCost = getJobCost(job);
                                        const qty = parseInt(job.quantity) || 0;
                                        const perPiece = qty > 0 ? (totalCost / qty).toFixed(2) : '0.00';
                                        
                                        let mobStatusTheme = 'bg-[#FCF0F0] text-[#DC2626] border-[#F5E6E6]'; 
                                        if (job.status === 'In Process') mobStatusTheme = 'bg-[#FFF8E6] text-[#D97706] border-[#FDE08B]';
                                        else if (job.status === 'Finished') mobStatusTheme = 'bg-[#E8F5E9] text-[#117843] border-[#C8E6C9]';

                                        return (
                                            <div key={`mob-job-${job.id}`} onClick={() => setExpandedJob(job)} className="p-3 bg-[#FAFAFA] active:bg-[#E8EDE9] cursor-pointer transition-colors relative group">
                                                <div className="flex justify-between items-start mb-1 pr-6">
                                                    <div className="font-bold text-xs text-[#2C3631] flex items-center gap-2">
                                                        <span className="bg-[#DEE3DF] text-[#41574C] text-[9px] font-bold px-1.5 py-0.5 rounded-sm">{job.serialNumber}</span>
                                                        {job.styleName || '-'}
                                                    </div>
                                                    <div className={`text-[9px] uppercase font-bold px-1.5 py-0.5 rounded-sm border shrink-0 ${mobStatusTheme}`}>
                                                        {job.status}
                                                    </div>
                                                </div>
                                                <div className="text-[10px] text-[#6B7C72] font-mono mb-2">{job.jobId || 'UNSAVED'}</div>
                                                <div className="grid grid-cols-3 gap-2 text-[10px] pr-6">
                                                    <div className="flex flex-col">
                                                        <span className="text-[#8C9B92] uppercase font-bold tracking-wider">Units</span>
                                                        <span className="font-mono font-medium">{qty}</span>
                                                    </div>
                                                    <div className="flex flex-col">
                                                        <span className="text-[#8C9B92] uppercase font-bold tracking-wider">Cost</span>
                                                        <span className="font-mono font-medium">₹{totalCost.toFixed(2)}</span>
                                                    </div>
                                                    <div className="flex flex-col items-end">
                                                        <span className="text-[#8C9B92] uppercase font-bold tracking-wider">Per Unit</span>
                                                        <span className="font-mono font-bold text-[#117843]">₹{perPiece}</span>
                                                    </div>
                                                </div>
                                                <div className="absolute right-3 top-1/2 -translate-y-1/2 opacity-50 group-hover:opacity-100 transition-opacity">
                                                    <Icons.ChevronRight className="w-4 h-4 text-[#546F60]" />
                                                </div>
                                            </div>
                                        );
                                    })}
                                </div>
                            </div>
                        );
                    })}
                    {pageToDisplay.length === 0 && (
                        <div className="text-center py-8 text-[#8C9B92] italic bg-white border border-[#CDD4D0] rounded-sm">No data available for summary.</div>
                    )}
                </div>

                {totalPages > 1 && (
                    <div className="flex justify-between items-center p-3 bg-white border border-[#CDD4D0] rounded-sm shadow-sm mt-4 shrink-0">
                        <button 
                            disabled={safePage === 1} 
                            onClick={() => {
                                setCurrentPage(p => p - 1);
                                window.scrollTo({ top: 0, behavior: 'smooth' });
                            }}
                            className="px-4 py-2 bg-[#E8EDE9] text-[#2A3B32] hover:bg-[#D1DCD5] transition-colors font-bold text-xs rounded-sm disabled:opacity-50 disabled:pointer-events-none cursor-pointer"
                        >
                            PREVIOUS
                        </button>
                        <span className="text-xs font-bold text-[#6B7C72]">PAGE {safePage} OF {totalPages}</span>
                        <button 
                            disabled={safePage === totalPages} 
                            onClick={() => {
                                setCurrentPage(p => p + 1);
                                window.scrollTo({ top: 0, behavior: 'smooth' });
                            }}
                            className="px-4 py-2 bg-[#E8EDE9] text-[#2A3B32] hover:bg-[#D1DCD5] transition-colors font-bold text-xs rounded-sm disabled:opacity-50 disabled:pointer-events-none cursor-pointer"
                        >
                            NEXT
                        </button>
                    </div>
                )}
            </div>

            {expandedJob && (
                <div className="fixed inset-0 z-[100] flex items-center justify-center bg-[#2A3B32]/40 backdrop-blur-sm p-4 transition-all" onClick={() => setExpandedJob(null)}>
                    <div className="bg-white w-full max-w-2xl rounded-sm shadow-2xl flex flex-col max-h-[90vh] animate-in zoom-in-95 duration-200" onClick={e => e.stopPropagation()}>
                        <div className="flex justify-between items-center p-4 border-b border-[#CDD4D0] bg-[#E8EDE9] shrink-0">
                            <div>
                                <h3 className="font-bold text-[#2A3B32] uppercase tracking-tight text-sm">Job Summary Details</h3>
                                <p className="text-[10px] text-[#6B7C72] uppercase tracking-widest font-semibold mt-0.5">{expandedJob.jobId || 'UNSAVED'}</p>
                            </div>
                            <button onClick={() => setExpandedJob(null)} className="text-[#8C9B92] hover:text-[#8C3A3A] transition-colors p-1 bg-white rounded-sm shadow-sm border border-[#CDD4D0]">
                                <Icons.X className="w-4 h-4" />
                            </button>
                        </div>
                        
                        <div className="p-4 overflow-y-auto flex-1">
                            <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-6 bg-[#F4F5F3] p-4 rounded-sm border border-[#CDD4D0]">
                                <div className="flex flex-col">
                                    <span className="text-[9px] uppercase font-bold text-[#8C9B92] tracking-wider mb-1">Client</span>
                                    <span className="font-semibold text-sm text-[#2C3631]">{expandedJob.customerName || '-'}</span>
                                </div>
                                <div className="flex flex-col">
                                    <span className="text-[9px] uppercase font-bold text-[#8C9B92] tracking-wider mb-1">Style Name</span>
                                    <span className="font-semibold text-sm text-[#2C3631]">{expandedJob.styleName || '-'}</span>
                                </div>
                                <div className="flex flex-col">
                                    <span className="text-[9px] uppercase font-bold text-[#8C9B92] tracking-wider mb-1">Quantity Produced</span>
                                    <span className="font-semibold text-sm font-mono text-[#117843]">{expandedJob.quantity}</span>
                                </div>
                                <div className="flex flex-col">
                                    <span className="text-[9px] uppercase font-bold text-[#8C9B92] tracking-wider mb-1">Status</span>
                                    <span className="font-semibold text-sm text-[#2C3631]">{expandedJob.status}</span>
                                </div>
                            </div>
                            
                            {(() => {
                                const expandedJobFinishedItems = expandedJob.finishedItems || [];
                                const expandedHasFinishedData = expandedJobFinishedItems.some(fi => (fi.name && String(fi.name).trim() !== '') || (parseFloat(fi.qty) > 0) || (parseFloat(fi.price) > 0));
                                const showExpandedFinishedProducts = expandedJob.status === 'Finished' || expandedHasFinishedData;

                                return showExpandedFinishedProducts && (
                                    <>
                                        <h4 className="text-xs font-bold text-[#41574C] uppercase border-b border-[#CDD4D0] pb-2 mb-3 tracking-widest">Finished Products</h4>
                                        <ReadOnlyFinishedItems finishedItems={expandedJobFinishedItems} />
                                    </>
                                );
                            })()}
                            
                            <h4 className="text-xs font-bold text-[#41574C] uppercase border-b border-[#CDD4D0] pb-2 mb-3 tracking-widest">Particulars Breakdown</h4>
                            <ReadOnlyParticulars 
                                parts={expandedJob.particulars} 
                                totalCost={getJobCost(expandedJob)} 
                                perPiece={parseInt(expandedJob.quantity) > 0 ? (getJobCost(expandedJob) / expandedJob.quantity).toFixed(2) : '0.00'} 
                            />
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
}

// --- 17. JOBS VIEW ---
function JobsView({ jobs, presets, filterCustomer, setFilterCustomer, filterStatus, setFilterStatus, searchQuery, setSearchQuery, addJob, updateJobState, deleteJob, saveJob, setPrintJobId, showToast, onQuickAddMaster }) {
    const [currentPage, setCurrentPage] = useState(1);
    const [itemsPerPage, setItemsPerPage] = useState(10);
    const [custSearch, setCustSearch] = useState('');
    const [custPage, setCustPage] = useState(1);
    const [showQuickAddModal, setShowQuickAddModal] = useState(false);
    const custPerPage = 10;
    
    useEffect(() => {
        setCurrentPage(1);
    }, [filterCustomer, filterStatus, searchQuery, itemsPerPage]);

    const stats = { 'ALL CUSTOMERS': { Pending: 0, InProcess: 0, Finished: 0 } };
    (jobs || []).forEach(j => {
        const statusStr = j.status || 'Pending';
        if (statusStr === 'Pending') stats['ALL CUSTOMERS'].Pending++;
        if (statusStr === 'In Process') stats['ALL CUSTOMERS'].InProcess++;
        if (statusStr === 'Finished') stats['ALL CUSTOMERS'].Finished++;
        
        if (!j.customerName) return;
        const c = j.customerName;
        if (!stats[c]) stats[c] = { Pending: 0, InProcess: 0, Finished: 0 };
        if (statusStr === 'Pending') stats[c].Pending++;
        if (statusStr === 'In Process') stats[c].InProcess++;
        if (statusStr === 'Finished') stats[c].Finished++;
    });
    
    const statKeys = Object.keys(stats).filter(c => c.toLowerCase().includes(custSearch.toLowerCase()));
    const totalCustPages = Math.max(1, Math.ceil(statKeys.length / custPerPage));
    const safeCustPage = Math.min(custPage, totalCustPages);
    const currentCustKeys = statKeys.slice((safeCustPage - 1) * custPerPage, safeCustPage * custPerPage);

    const filteredJobs = (jobs || []).filter(j => {
        if (j.isNewDraft) return true;

        const matchesCustomer = filterCustomer === '' || j.customerName === filterCustomer;
        const matchesStatus = filterStatus === '' || j.status === filterStatus;
        
        const searchLower = searchQuery.toLowerCase();
        const matchesSearch = searchQuery === '' || 
            (j.jobId || '').toLowerCase().includes(searchLower) ||
            (j.customerName || '').toLowerCase().includes(searchLower) ||
            (j.styleName || '').toLowerCase().includes(searchLower) ||
            (j.productName || '').toLowerCase().includes(searchLower);

        return matchesCustomer && matchesStatus && matchesSearch;
    });

    const totalPages = Math.max(1, Math.ceil(filteredJobs.length / itemsPerPage));
    const safePage = Math.min(currentPage, totalPages);
    const startIndex = (safePage - 1) * itemsPerPage;
    const currentJobs = filteredJobs.slice(startIndex, startIndex + itemsPerPage);

    return (
        <div className="space-y-4">
            <div className="bg-white rounded-sm shadow-sm border border-[#CDD4D0] overflow-hidden flex flex-col">
                <div className="bg-[#E8EDE9] p-2 border-b border-[#CDD4D0] flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2">
                    <h3 className="text-[11px] font-bold text-[#41574C] uppercase tracking-widest pl-2">Customer Overview</h3>
                    <div className="relative">
                        <Icons.Search className="w-3.5 h-3.5 absolute left-2 top-1/2 -translate-y-1/2 text-[#8C9B92]" />
                        <input
                            type="text"
                            placeholder="Search Client Stats..."
                            value={custSearch}
                            onChange={(e) => { setCustSearch(e.target.value); setCustPage(1); }}
                            className="pl-7 pr-2 py-1.5 text-xs border border-[#CDD4D0] rounded-sm focus:outline-none focus:border-[#546F60] w-full sm:w-64 bg-white"
                        />
                        {custSearch && (
                            <button onClick={() => setCustSearch('')} className="absolute right-2 top-1/2 -translate-y-1/2 text-[#8C3A3A] hover:text-red-600">
                                <Icons.X className="w-3 h-3" />
                            </button>
                        )}
                    </div>
                </div>
                <div className="overflow-x-auto">
                    <table className="w-full text-left text-xs text-[#2C3631] border-collapse min-w-[500px]">
                        <thead className="bg-[#F4F5F3] text-[#6B7C72] text-[10px] uppercase">
                            <tr>
                                <th className="px-3 py-2 font-bold border-b border-[#CDD4D0]">Client Name</th>
                                <th className="px-3 py-2 font-bold border-b border-[#CDD4D0] text-center w-24 text-[#8C3A3A]">Pending</th>
                                <th className="px-3 py-2 font-bold border-b border-[#CDD4D0] text-center w-24 text-[#8C6D3A]">In Proc</th>
                                <th className="px-3 py-2 font-bold border-b border-[#CDD4D0] text-center w-24 text-[#3A8C59]">Finished</th>
                            </tr>
                        </thead>
                        <tbody>
                            {currentCustKeys.map(c => (
                                <tr key={c} className={`hover:bg-[#E8EDE9] border-b border-[#F0F2F0] last:border-b-0 transition-colors ${filterCustomer === c ? 'bg-[#E8EDE9] border-l-2 border-l-[#546F60]' : ''}`}>
                                    <td 
                                        className="px-3 py-2 font-semibold cursor-pointer hover:underline text-[#2C3631]"
                                        onClick={() => { setFilterCustomer(c === 'ALL CUSTOMERS' ? '' : c); setFilterStatus(''); }}
                                    >
                                        {c}
                                    </td>
                                    <td 
                                        className={`px-3 py-2 text-center font-mono font-bold cursor-pointer transition-colors ${filterCustomer === (c==='ALL CUSTOMERS'?'':c) && filterStatus === 'Pending' ? 'bg-[#FCF0F0] text-red-700 ring-inset ring-1 ring-red-300' : 'bg-[#FCF0F0]/30 hover:bg-[#FCF0F0] text-[#8C3A3A]'}`}
                                        onClick={() => { setFilterCustomer(c === 'ALL CUSTOMERS' ? '' : c); setFilterStatus('Pending'); }}
                                    >
                                        {stats[c].Pending}
                                    </td>
                                    <td 
                                        className={`px-3 py-2 text-center font-mono font-bold cursor-pointer transition-colors ${filterCustomer === (c==='ALL CUSTOMERS'?'':c) && filterStatus === 'In Process' ? 'bg-[#FCF8F0] text-amber-700 ring-inset ring-1 ring-amber-300' : 'bg-[#FCF8F0]/30 hover:bg-[#FCF8F0] text-[#8C6D3A]'}`}
                                        onClick={() => { setFilterCustomer(c === 'ALL CUSTOMERS' ? '' : c); setFilterStatus('In Process'); }}
                                    >
                                        {stats[c].InProcess}
                                    </td>
                                    <td 
                                        className={`px-3 py-2 text-center font-mono font-bold cursor-pointer transition-colors ${filterCustomer === (c==='ALL CUSTOMERS'?'':c) && filterStatus === 'Finished' ? 'bg-[#F0FCF5] text-green-700 ring-inset ring-1 ring-green-300' : 'bg-[#F0FCF5]/30 hover:bg-[#F0FCF5] text-[#3A8C59]'}`}
                                        onClick={() => { setFilterCustomer(c === 'ALL CUSTOMERS' ? '' : c); setFilterStatus('Finished'); }}
                                    >
                                        {stats[c].Finished}
                                    </td>
                                </tr>
                            ))}
                            {currentCustKeys.length === 0 && (
                                <tr><td colSpan="4" className="text-center py-6 text-[#8C9B92] italic text-xs">No clients found matching your search.</td></tr>
                            )}
                        </tbody>
                    </table>
                </div>
                {totalCustPages > 1 && (
                    <div className="flex justify-between items-center p-2 bg-[#F4F5F3] border-t border-[#CDD4D0] shrink-0">
                        <button 
                            disabled={safeCustPage === 1} 
                            onClick={() => setCustPage(p => p - 1)}
                            className="px-3 py-1.5 bg-[#E8EDE9] text-[#2A3B32] hover:bg-[#D1DCD5] font-bold text-[10px] rounded-sm disabled:opacity-50 disabled:pointer-events-none transition-colors cursor-pointer"
                        >
                            PREVIOUS
                        </button>
                        <span className="text-[10px] font-bold text-[#6B7C72]">CLIENTS PAGE {safeCustPage} OF {totalCustPages}</span>
                        <button 
                            disabled={safeCustPage === totalCustPages} 
                            onClick={() => setCustPage(p => p + 1)}
                            className="px-3 py-1.5 bg-[#E8EDE9] text-[#2A3B32] hover:bg-[#D1DCD5] font-bold text-[10px] rounded-sm disabled:opacity-50 disabled:pointer-events-none transition-colors cursor-pointer"
                        >
                            NEXT
                        </button>
                    </div>
                )}
            </div>

            <div className="flex flex-col md:flex-row justify-between items-stretch md:items-center bg-[#E8EDE9] p-2 border border-[#CDD4D0] rounded-sm gap-3 shadow-sm">
                <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 w-full md:w-auto">
                    <button onClick={() => {
                        addJob();
                        setCurrentPage(1);
                        window.scrollTo({ top: 0, behavior: 'smooth' });
                    }} className="flex items-center justify-center gap-2 bg-[#546F60] hover:bg-[#43594D] text-white px-3 py-2 md:py-1.5 rounded-sm text-xs font-semibold transition-colors border border-[#3D5246] shadow-sm w-full sm:w-auto cursor-pointer">
                        <Icons.Plus className="w-3.5 h-3.5" />
                        NEW TEMPLATE
                    </button>
                    <button onClick={() => setShowQuickAddModal(true)} className="flex items-center justify-center gap-2 bg-[#FAFBF9] hover:bg-[#DDE4DF] text-[#2A3B32] px-3 py-2 md:py-1.5 rounded-sm text-xs font-bold transition-colors border border-[#CDD4D0] shadow-sm w-full sm:w-auto cursor-pointer" title="Quick Add Master Data">
                        <Icons.Database className="w-3.5 h-3.5 text-[#546F60]" />
                        ADD MASTER
                    </button>
                </div>
                
                <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 w-full md:w-auto">
                    <div className="flex items-stretch sm:items-center border border-[#CDD4D0] bg-white rounded-sm overflow-hidden flex-1 sm:flex-none relative">
                        <div className="pl-2 pr-1 py-2 md:py-1.5 flex items-center text-[#546F60]">
                            <Icons.Search className="w-3.5 h-3.5" />
                        </div>
                        <input
                            type="text"
                            placeholder="Search ID, Client..."
                            value={searchQuery}
                            onChange={(e) => setSearchQuery(e.target.value)}
                            className="bg-transparent text-[#2C3631] text-xs font-medium focus:outline-none px-1 py-2 md:py-1.5 w-full sm:w-40 placeholder-[#A3B899]"
                        />
                        {searchQuery && (
                            <button onClick={() => setSearchQuery('')} className="px-2 text-[#8C3A3A] hover:text-red-600">
                                <Icons.X className="w-3 h-3" />
                            </button>
                        )}
                    </div>
                
                    <div className="flex items-stretch sm:items-center border border-[#CDD4D0] bg-white rounded-sm overflow-hidden flex-1 sm:flex-none">
                        <div className="bg-[#DEE3DF] px-2 py-2 md:py-1.5 border-r border-[#CDD4D0] text-[10px] md:text-xs font-semibold text-[#546F60] flex items-center gap-1 shrink-0">
                            <Icons.Filter className="w-3.5 h-3.5" /> Client
                        </div>
                        <select value={filterCustomer} onChange={e=>setFilterCustomer(e.target.value)} className="bg-transparent text-[#2C3631] text-xs font-medium focus:outline-none px-2 py-2 md:py-1.5 w-full sm:w-28 cursor-pointer flex-1">
                            <option value="">All Clients</option>
                            {(presets.customers || []).map(c => <option key={c} value={c}>{c}</option>)}
                        </select>
                    </div>
                    
                    <div className="flex items-stretch sm:items-center border border-[#CDD4D0] bg-white rounded-sm overflow-hidden flex-1 sm:flex-none">
                        <div className="bg-[#DEE3DF] px-2 py-2 md:py-1.5 border-r border-[#CDD4D0] text-[10px] md:text-xs font-semibold text-[#546F60] flex items-center gap-1 shrink-0">
                            <Icons.Filter className="w-3.5 h-3.5" /> Status
                        </div>
                        <select value={filterStatus} onChange={e=>setFilterStatus(e.target.value)} className="bg-transparent text-[#2C3631] text-xs font-medium focus:outline-none px-2 py-2 md:py-1.5 w-full sm:w-28 cursor-pointer flex-1">
                            <option value="">All Statuses</option>
                            <option value="Pending">Pending</option>
                            <option value="In Process">In Process</option>
                            <option value="Finished">Finished</option>
                        </select>
                    </div>

                    <div className="flex items-stretch sm:items-center border border-[#CDD4D0] bg-white rounded-sm overflow-hidden flex-1 sm:flex-none">
                        <div className="bg-[#DEE3DF] px-2 py-2 md:py-1.5 border-r border-[#CDD4D0] text-[10px] md:text-xs font-semibold text-[#546F60] flex items-center gap-1 shrink-0">
                            Rows
                        </div>
                        <select value={itemsPerPage} onChange={e=>setItemsPerPage(Number(e.target.value))} className="bg-transparent text-[#2C3631] text-xs font-medium focus:outline-none px-2 py-2 md:py-1.5 w-full sm:w-16 cursor-pointer flex-1">
                            <option value={10}>10</option>
                            <option value={20}>20</option>
                            <option value={40}>40</option>
                            <option value={50}>50</option>
                        </select>
                    </div>
                </div>
            </div>

            {currentJobs.length === 0 ? (
                <div className="text-center py-10 text-[#6B7C72] bg-white rounded-sm border border-[#CDD4D0]">
                    No templates found matching your search or filters.
                </div>
            ) : (
                currentJobs.map(job => (
                    <JobDetailCard 
                        key={job.id} 
                        job={job} 
                        presets={presets} 
                        updateJobState={updateJobState} 
                        deleteJob={deleteJob} 
                        saveJob={saveJob} 
                        setPrintJobId={setPrintJobId}
                        showToast={showToast}
                        onQuickAddMaster={onQuickAddMaster}
                    />
                ))
            )}

            {totalPages > 1 && (
                <div className="flex justify-between items-center p-3 bg-white border border-[#CDD4D0] rounded-sm shadow-sm mt-4 shrink-0">
                    <button 
                        disabled={safePage === 1} 
                        onClick={() => {
                            setCurrentPage(p => p - 1);
                            window.scrollTo({ top: 0, behavior: 'smooth' });
                        }}
                        className="px-4 py-2 bg-[#E8EDE9] text-[#2A3B32] hover:bg-[#D1DCD5] transition-colors font-bold text-xs rounded-sm disabled:opacity-50 disabled:pointer-events-none cursor-pointer"
                    >
                        PREVIOUS
                    </button>
                    <span className="text-xs font-bold text-[#6B7C72]">PAGE {safePage} OF {totalPages} ({filteredJobs.length} ITEMS)</span>
                    <button 
                        disabled={safePage === totalPages} 
                        onClick={() => {
                            setCurrentPage(p => p + 1);
                            window.scrollTo({ top: 0, behavior: 'smooth' });
                        }}
                        className="px-4 py-2 bg-[#E8EDE9] text-[#2A3B32] hover:bg-[#D1DCD5] transition-colors font-bold text-xs rounded-sm disabled:opacity-50 disabled:pointer-events-none cursor-pointer"
                    >
                        NEXT
                    </button>
                </div>
            )}

            {/* Quick Add Master Modal from Toolbar */}
            {showQuickAddModal && (
                <QuickAddMasterModal
                    isOpen={showQuickAddModal}
                    onClose={() => setShowQuickAddModal(false)}
                    presets={presets}
                    onSaveMaster={onQuickAddMaster}
                    showToast={showToast}
                />
            )}
        </div>
    );
}

// --- 18. MASTERS VIEW ---
function MastersView({ presets, setPresets, syncToDatabase, onEditItem, showToast }) {
    return (
        <div className="bg-white border border-[#CDD4D0] rounded-sm shadow-sm flex flex-col h-[calc(100vh-140px)] min-h-[500px]">
            <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between p-3 border-b border-[#CDD4D0] bg-[#E8EDE9] gap-3 sm:gap-0">
                <div className="flex items-center gap-2">
                    <Icons.Database className="w-4 h-4 text-[#546F60]" />
                    <h2 className="text-sm font-bold text-[#2A3B32] uppercase tracking-tight">System Master Data</h2>
                </div>
                <button onClick={syncToDatabase} className="flex items-center justify-center gap-2 bg-[#546F60] hover:bg-[#43594D] text-white px-4 py-2 sm:py-1.5 rounded-sm text-xs font-semibold transition-colors border border-[#3D5246] shadow-sm w-full sm:w-auto cursor-pointer">
                    <Icons.Save className="w-3.5 h-3.5" />
                    SAVE & SYNC ALL
                </button>
            </div>

            <div className="p-2 sm:p-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-4 overflow-y-auto bg-[#F4F5F3] h-full">
                {['customers', 'vendors', 'styles', 'materials', 'processes', 'units'].map(cat => (
                    <MasterList 
                        key={cat} 
                        title={cat} 
                        items={presets[cat] || []} 
                        onUpdateList={(newList) => setPresets({...presets, [cat]: newList})}
                        onEditItem={(oldVal, newVal) => onEditItem(cat, oldVal, newVal)}
                        showToast={showToast}
                    />
                ))}
            </div>
        </div>
    );
}

// --- 19. MAIN APP COMPONENT ---
function App() {
    const [isAuthenticated, setIsAuthenticated] = useState(window.IS_AUTH === true);
    const [loginUser, setLoginUser] = useState('');
    const [loginPass, setLoginPass] = useState('');
    const [activeTab, setActiveTab] = useState('jobs');
    const [printJobId, setPrintJobId] = useState(null);
    const [isPrintingSummary, setIsPrintingSummary] = useState(false);
    
    const defaultPresets = (window.SERVER_DATA && window.SERVER_DATA.presets) || {};
    const [presets, setPresets] = useState({
        customers: defaultPresets.customers || [],
        vendors: defaultPresets.vendors || [],
        styles: defaultPresets.styles || [],
        materials: defaultPresets.materials || [],
        processes: defaultPresets.processes || [],
        units: defaultPresets.units || []
    });
    
    const [jobs, setJobs] = useState((window.SERVER_DATA && window.SERVER_DATA.jobs) || []);
    const [filterCustomer, setFilterCustomer] = useState('');
    const [filterStatus, setFilterStatus] = useState('');
    const [searchQuery, setSearchQuery] = useState('');
    const [toast, setToast] = useState(null);

    const showToast = (message, type = 'success') => setToast({ message, type });

    const handleLogin = async () => {
        try {
            const data = await window.AppApi.login(loginUser, loginPass);
            if (data.success) {
                window.location.reload();
            } else {
                showToast(data.message || 'Invalid credentials', 'error');
            }
        } catch (e) {
            showToast("Login failed. Check connection.", 'error');
        }
    };

    const handleLogout = async () => {
        try {
            await window.AppApi.logout();
            window.location.reload();
        } catch (e) {
            window.location.reload();
        }
    };

    const savePresets = async () => {
        try {
            const data = await window.AppApi.savePresets(presets);
            if (data.success) {
                showToast(`Master Data saved! (${data.inserted || 0} items)`); 
            } else {
                showToast("Error: " + data.message, 'error');
            }
        } catch (e) {
            showToast("Network error while saving.", 'error');
        }
    };

    const handleQuickAddMaster = async (category, newItemName) => {
        const cleanItem = String(newItemName || '').trim();
        if (!cleanItem) {
            showToast("Please enter an item name.", "error");
            return false;
        }
        const currentList = presets[category] || [];
        const exists = currentList.some(it => String(it || '').trim().toLowerCase() === cleanItem.toLowerCase());
        if (exists) {
            showToast(`"${cleanItem}" already exists in Master Data.`, "info");
            return true;
        }

        const updatedPresets = {
            ...presets,
            [category]: [...currentList, cleanItem]
        };

        try {
            const data = await window.AppApi.savePresets(updatedPresets);
            if (data.success) {
                setPresets(updatedPresets);
                showToast(`Added "${cleanItem}" to Master Data!`, "success");
                return true;
            } else {
                showToast("Failed to save master: " + (data.message || 'Unknown error'), "error");
                return false;
            }
        } catch (err) {
            showToast("Network error saving master item.", "error");
            return false;
        }
    };

    const syncToDatabase = async () => {
        const invalidJob = jobs.find(j => !j.customerName || !j.styleName);
        if (invalidJob) {
            alert("⚠️ Cannot Sync!\n\nYou have an empty Job Template. Please select a 'Client' and 'Style' for all jobs.");
            return;
        }
        try {
            const data = await window.AppApi.syncDatabase(jobs, presets);
            if (data.success) {
                showToast("Database Fully Synced!"); 
            } else {
                showToast("Error: " + data.message, 'error');
            }
        } catch (err) {
            showToast("Network error during sync.", 'error');
        }
    };

    const addJob = () => {
        if (jobs.some(j => j.isNewDraft)) {
            showToast("Please save or cancel your current draft first.", "error");
            return;
        }

        const today = new Date().toISOString().split('T')[0];
        const numericId = Date.now().toString(); 
        
        const newJob = { 
            id: numericId,
            jobId: '',
            date: today,
            customerName: '',
            styleName: '',
            productName: '',
            fabricSource: 'Own',
            quantity: 0,
            sellingPrice: 0,
            status: 'Pending',
            isEditing: true,
            isNewDraft: true,
            finishedItems: [
                { id: Date.now() + '_f1', name: '', qty: 0, price: 0 }
            ],
            particulars: [
                {
                    id: Date.now() + '1',
                    date: today,
                    type: 'Material',
                    particular: '',
                    vendor: '',
                    quantity: 0,
                    unit: '',
                    rate: 0,
                    amount: 0,
                    attachment_bbcode: '',
                    attachment_remarks: '',
                    attachment_updated_at: null
                }
            ],
            updateHistory: []
        };
        setJobs(prev => [newJob, ...prev]);
    };

    const updateJobState = (id, fieldOrUpdates, val) => {
        setJobs(prevJobs => prevJobs.map(j => {
            if (j.id === id) {
                let updated = { ...j };
                
                if (typeof fieldOrUpdates === 'object') {
                    updated = { ...updated, ...fieldOrUpdates };
                } else {
                    updated[fieldOrUpdates] = val;
                }
                
                if (updated.isEditing === false) {
                    updated.isNewDraft = false;
                }

                if (updated.finishedItems) {
                    updated.quantity = updated.finishedItems.reduce((s, f) => s + (parseInt(f.qty)||0), 0);
                    updated.productName = updated.finishedItems.map(f => f.name).filter(Boolean).join(', ');
                }

                if (updated.customerName && updated.date) {
                    const code = updated.customerName.trim().replace(/[^A-Za-z0-9]/g, '').substring(0,4).toUpperCase();
                    const d = new Date(updated.date);
                    
                    if (!isNaN(d.getTime())) {
                        const my = ("0"+(d.getMonth()+1)).slice(-2) + d.getFullYear().toString().slice(-2);
                        const newPrefix = code + my + '_';
                        
                        if (!updated.jobId || !updated.jobId.startsWith(newPrefix)) {
                            let max = 0;
                            prevJobs.forEach(item => { 
                                if (item.id !== id && item.jobId && item.jobId.startsWith(newPrefix)) { 
                                    const parts = item.jobId.split('_');
                                    if (parts.length > 1) { 
                                        const n = parseInt(parts[1], 10); 
                                        if(!isNaN(n) && n > max) max = n; 
                                    }
                                }
                            });
                            updated.jobId = newPrefix + (max + 1).toString().padStart(2, '0');
                        }
                    }
                }
                return updated;
            }
            return j;
        }));
    };

    const deleteJob = async (id, isDraft = false) => {
        if (isDraft) {
            setJobs(prev => prev.filter(j => j.id !== id));
            return;
        }
        if (confirm("Are you sure you want to delete this template permanently?")) {
            try {
                const data = await window.AppApi.deleteJob(id);
                if (data.success) {
                    setJobs(prev => prev.filter(j => j.id !== id));
                    showToast("Job deleted successfully!");
                } else {
                    showToast("Error deleting: " + data.message, 'error');
                }
            } catch(e) {
                showToast("Network error during delete.", 'error');
            }
        }
    };

    const saveJob = async (jobToSave) => {
        if (!jobToSave.customerName || !jobToSave.styleName) {
            return showToast("Client and Style required.", "error");
        }

        const now = new Date();
        const timestamp = now.toLocaleString('en-IN', {
            day: '2-digit',
            month: 'short',
            year: 'numeric',
            hour: '2-digit',
            minute: '2-digit',
            hour12: true
        });
        const action = jobToSave.isNewDraft ? 'Template Created' : 'Template Updated';
        
        const newHistory = [...(jobToSave.updateHistory || []), { time: timestamp, action: action }];
        
        const jobWithHistory = {
            ...jobToSave,
            lastUpdated: timestamp,
            updateHistory: newHistory
        };

        try {
            const data = await window.AppApi.saveJob(jobWithHistory);
            if (data.success) { 
                updateJobState(jobWithHistory.id, {
                    isEditing: false,
                    lastUpdated: timestamp,
                    updateHistory: newHistory
                }); 
                showToast("Job Block Saved Successfully!"); 
            } else {
                showToast("Error: " + data.message, "error");
            }
        } catch(e) {
            showToast("Network Error saving job.", "error");
        }
    };

    const handleMasterEdit = (category, oldVal, newVal) => {
        const oldClean = String(oldVal).trim().toLowerCase();
        const newValTrimmed = String(newVal).trim();

        setPresets(prevPresets => {
            const newPresets = {
                ...prevPresets,
                [category]: prevPresets[category].map(item => String(item).trim().toLowerCase() === oldClean ? newValTrimmed : item)
            };

            setJobs(prevJobs => {
                let updatedJobsCount = 0;
                const newJobs = prevJobs.map(job => {
                    let isChanged = false;
                    let updatedJob = { ...job };

                    if (category === 'customers' && String(updatedJob.customerName || '').trim().toLowerCase() === oldClean) {
                        updatedJob.customerName = newValTrimmed;
                        isChanged = true;
                    }
                    if (category === 'styles' && String(updatedJob.styleName || '').trim().toLowerCase() === oldClean) {
                        updatedJob.styleName = newValTrimmed;
                        isChanged = true;
                    }

                    if (['materials', 'processes', 'vendors', 'units'].includes(category)) {
                        if (updatedJob.particulars) {
                            let partsChanged = false;
                            const newParts = updatedJob.particulars.map(p => {
                                let newP = { ...p };
                                if ((category === 'materials' || category === 'processes') && String(newP.particular || '').trim().toLowerCase() === oldClean) {
                                    newP.particular = newValTrimmed;
                                    partsChanged = true;
                                }
                                if (category === 'vendors' && String(newP.vendor || '').trim().toLowerCase() === oldClean) {
                                    newP.vendor = newValTrimmed;
                                    partsChanged = true;
                                }
                                if (category === 'units' && String(newP.unit || '').trim().toLowerCase() === oldClean) {
                                    newP.unit = newValTrimmed;
                                    partsChanged = true;
                                }
                                return newP;
                            });
                            if (partsChanged) {
                                updatedJob.particulars = newParts;
                                isChanged = true;
                            }
                        }
                    }

                    if (isChanged) updatedJobsCount++;
                    return isChanged ? updatedJob : job;
                });

                window.AppApi.syncDatabase(newJobs, newPresets)
                    .then(data => {
                        if (data.success) {
                            showToast(`Renamed to "${newValTrimmed}". Updated ${updatedJobsCount} templates automatically!`, "success");
                        } else {
                            showToast("Error syncing updates to database: " + data.message, "error");
                        }
                    })
                    .catch(e => {
                        showToast("Network error during auto-sync.", "error");
                    });

                return newJobs;
            });

            return newPresets;
        });
    };

    if (!isAuthenticated) {
        return (
            <div>
                {toast && <Toast message={toast.message} type={toast.type} onClose={() => setToast(null)} />}
                <LoginView
                    loginUser={loginUser}
                    setLoginUser={setLoginUser}
                    loginPass={loginPass}
                    setLoginPass={setLoginPass}
                    handleLogin={handleLogin}
                />
            </div>
        );
    }

    if (printJobId) {
        const jobToPrint = jobs.find(j => j.id === printJobId);
        if (jobToPrint) {
            return <PrintJobView job={jobToPrint} onBack={() => setPrintJobId(null)} />;
        } else {
            setPrintJobId(null);
        }
    }

    if (isPrintingSummary) {
        return (
            <PrintSummaryView 
                jobs={jobs} 
                filterCustomer={filterCustomer}
                filterStatus={filterStatus}
                searchQuery={searchQuery}
                onBack={() => setIsPrintingSummary(false)} 
            />
        );
    }

    return (
        <div className="min-h-screen bg-[#F4F5F3] text-[#2C3631] font-sans antialiased flex flex-col no-print">
            {toast && <Toast message={toast.message} type={toast.type} onClose={() => setToast(null)} />}
            
            <header className="bg-[#2A3B32] text-[#E8EDE9] sticky top-0 z-20 border-b-[3px] border-[#546F60] shrink-0 shadow-sm">
                <div className="max-w-[1400px] mx-auto px-2 sm:px-4 h-14 flex items-center justify-between">
                    <div className="flex flex-col">
                        <div className="flex items-center gap-2 sm:gap-3">
                            <Icons.FileSpreadsheet className="w-5 h-5 text-[#A3B899] shrink-0" />
                            <h1 className="text-sm sm:text-lg font-bold tracking-tight uppercase truncate">
                                JF Creations <span className="hidden sm:inline text-[#546F60] font-normal tracking-normal ml-2">| Costing System</span>
                            </h1>
                        </div>
                        <span className="text-[9px] text-[#A3B899] uppercase tracking-widest font-semibold mt-0.5 opacity-80">
                            Service Managed by Auditspace
                        </span>
                    </div>
                    <button onClick={handleLogout} className="flex items-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-1.5 hover:bg-[#3D5246] rounded-sm transition-colors text-[10px] sm:text-xs font-semibold border border-transparent hover:border-[#546F60] shrink-0 cursor-pointer">
                        <Icons.LogOut className="w-3.5 h-3.5" />
                        <span className="hidden sm:inline">LOGOUT</span>
                    </button>
                </div>
            </header>

            <div className="max-w-[1400px] mx-auto px-2 sm:px-4 py-4 w-full flex-1 pb-16">
                
                <div className="flex w-full sm:w-auto space-x-0.5 border-b-2 border-[#546F60] mb-4 overflow-x-auto no-scrollbar shrink-0">
                    <button
                        onClick={() => setActiveTab('jobs')}
                        className={`flex-1 sm:flex-none justify-center flex items-center gap-2 px-3 sm:px-5 py-2.5 sm:py-2 text-xs sm:text-sm font-semibold transition-none border border-b-0 rounded-t-sm whitespace-nowrap cursor-pointer ${
                            activeTab === 'jobs' ? 'bg-[#F4F5F3] text-[#2A3B32] border-[#546F60] border-b-[#F4F5F3] relative top-[2px]' : 'bg-[#DEE3DF] text-[#6B7C72] border-[#CDD4D0] hover:bg-[#D5DBD7]'
                        }`}
                    >
                        <Icons.Briefcase className="w-4 h-4" />
                        Jobs
                    </button>
                    <button
                        onClick={() => setActiveTab('summary')}
                        className={`flex-1 sm:flex-none justify-center flex items-center gap-2 px-3 sm:px-5 py-2.5 sm:py-2 text-xs sm:text-sm font-semibold transition-none border border-b-0 rounded-t-sm whitespace-nowrap cursor-pointer ${
                            activeTab === 'summary' ? 'bg-[#F4F5F3] text-[#2A3B32] border-[#546F60] border-b-[#F4F5F3] relative top-[2px]' : 'bg-[#DEE3DF] text-[#6B7C72] border-[#CDD4D0] hover:bg-[#D5DBD7]'
                        }`}
                    >
                        <Icons.Table className="w-4 h-4" />
                        Summary
                    </button>
                    <button
                        onClick={() => setActiveTab('masters')}
                        className={`flex-1 sm:flex-none justify-center flex items-center gap-2 px-3 sm:px-5 py-2.5 sm:py-2 text-xs sm:text-sm font-semibold transition-none border border-b-0 rounded-t-sm whitespace-nowrap cursor-pointer ${
                            activeTab === 'masters' ? 'bg-[#F4F5F3] text-[#2A3B32] border-[#546F60] border-b-[#F4F5F3] relative top-[2px]' : 'bg-[#DEE3DF] text-[#6B7C72] border-[#CDD4D0] hover:bg-[#D5DBD7]'
                        }`}
                    >
                        <Icons.Database className="w-4 h-4" />
                        Masters
                    </button>
                </div>

                <main className="animate-in fade-in duration-200 h-full">
                    {activeTab === 'jobs' && (
                        <JobsView 
                            jobs={jobs} 
                            presets={presets} 
                            filterCustomer={filterCustomer} 
                            setFilterCustomer={setFilterCustomer}
                            filterStatus={filterStatus}
                            setFilterStatus={setFilterStatus}
                            searchQuery={searchQuery}
                            setSearchQuery={setSearchQuery}
                            addJob={addJob}
                            updateJobState={updateJobState}
                            deleteJob={deleteJob}
                            saveJob={saveJob}
                            setPrintJobId={setPrintJobId}
                            showToast={showToast}
                            onQuickAddMaster={handleQuickAddMaster}
                        />
                    )}
                    {activeTab === 'summary' && (
                        <SummaryView 
                            jobs={jobs} 
                            filterStatus={filterStatus}
                            setFilterStatus={setFilterStatus}
                            presets={presets}
                            searchQuery={searchQuery}
                            setSearchQuery={setSearchQuery}
                            setIsPrintingSummary={setIsPrintingSummary}
                        />
                    )}
                    {activeTab === 'masters' && (
                        <MastersView 
                            presets={presets}
                            setPresets={setPresets}
                            syncToDatabase={syncToDatabase}
                            onEditItem={handleMasterEdit}
                            showToast={showToast}
                        />
                    )}
                </main>
            </div>
        </div>
    );
}

// Initialize Application Root with Error Boundary
const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);
root.render(
    <ErrorBoundary>
        <App />
    </ErrorBoundary>
);