CREATE TABLE consignments (
    id INT AUTO_INCREMENT PRIMARY KEY,
    consignment_number VARCHAR(50) NOT NULL UNIQUE,
    sender_name VARCHAR(100) NOT NULL,
    receiver_name VARCHAR(100) NOT NULL,
    receiver_address TEXT NOT NULL,
    item_image VARCHAR(255),        -- URL or file path
    receiver_photo VARCHAR(255),    -- URL or file path
    origin VARCHAR(100) NOT NULL,
    destination VARCHAR(100) NOT NULL,
    current_location VARCHAR(100),
    gps_lat DECIMAL(10, 7),        -- Latitude precision
    gps_lng DECIMAL(10, 7),        -- Longitude precision
    status ENUM('pending','in_transit','out_for_delivery','delivered','returned','failed') DEFAULT 'pending',
    last_updated TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP;
);
        INSERT INTO consignments (
        consignment_number,
        sender_name,
        receiver_name,
        receiver_address,
        item_image,
        receiver_photo,
        origin,
        destination,
        current_location,
        gps_lat,
        gps_lng,
        status
        ) VALUES (
        'CNX123456789',                      -- Example consignment number
        'John Peterson',                     -- Sender
        'Emily Watson',                      -- Receiver
        '742 Evergreen Terrace, Houston TX', -- Receiver address
        'https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cmVkJTIwc2hvZXxlbnwwfHwwfHx8MA%3D%3D',        -- Item image
        'https://images.unsplash.com/photo-1620064881980-1023851173f3?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fG1hbiUyMGluJTIwc3VpdHxlbnwwfHwwfHx8MA%3D%3D',    -- Receiver photo
        'Texas, USA',                        -- Origin
        'Lagos, Nigeria',                    -- Destination
        'Texas, USA',                        -- Current scanned location
        31.529910,                           -- GPS latitude
        -99.300648,                          -- GPS longitude
        'in_transit'                         -- Status
        );



very good, am done with the design, now this is how will do it, first, we start with the rendering, we will write out php code directly in frontend file, just for the rendering of the shipments card ok and the sidebar for each, this is want i hard coded,

<div class="cards-grid">
            <div class="shipment-card" id="card-CNS-001">
                <div class="card-header">
                    <div class="consignment-number">CNS-001</div>
                    <div class="status-badge">In Transit</div>
                </div>

                <div class="card-content">
                    <div class="info-group">
                        <div class="info-label">Sender</div>
                        <div class="info-value">John Smith</div>
                    </div>

                    <div class="info-group">
                        <div class="info-label">Receiver</div>
                        <div class="info-value">Sarah Johnson</div>
                    </div>

                    <div class="info-group">
                        <div class="info-label">Origin</div>
                        <div class="info-value">New York, NY</div>
                    </div>

                    <div class="info-group">
                        <div class="info-label">Destination</div>
                        <div class="info-value">Los Angeles, CA</div>
                    </div>

                    <div class="info-group">
                        <div class="info-label">Current Location</div>
                        <div class="info-value">Denver, CO</div>
                    </div>

                    <div class="info-group">
                        <div class="info-label">Phone</div>
                        <div class="info-value">+1 (555) 123-4567</div>
                    </div>

                    <div class="info-group">
                        <div class="info-label">Email</div>
                        <div class="info-value">sarah@email.com</div>
                    </div>

                    <div class="info-group">
                        <div class="info-label">VIN</div>
                        <div class="info-value">VN123456789</div>
                    </div>

                    <div class="info-group full-width">
                        <div class="info-label">Receiver Address</div>
                        <div class="info-value">123 Sunset Boulevard, Los Angeles, CA 90028</div>
                    </div>

                    <div class="full-width">
                        <img src="/placeholder.svg?height=200&width=400" alt="Item" class="item-image">
                    </div>
                </div>

                <div class="divider"></div>

                <div class="card-actions">
                    <button class="btn btn-edit" onclick="openSidebar('CNS-001')">Edit</button>
                    <button class="btn btn-delete">Delete</button>
                </div>
            </div>

            
        </div>
 <div class="sidebar" id="sidebar-CNS-001">
        <div class="sidebar-header">
            <div class="sidebar-title">Edit Shipment CNS-001</div>
            <button class="close-btn" onclick="closeSidebar()">×</button>
        </div>

        <div class="sidebar-content">
            <div class="form-group">
                <label class="form-label">Consignment Number</label>
                <input type="text" class="form-input" value="CNS-001" readonly>
            </div>

            <div class="form-group">
                <label class="form-label">VIN</label>
                <input type="text" class="form-input" value="VN123456789">
            </div>

            <div class="form-group">
                <label class="form-label">Sender Name</label>
                <input type="text" class="form-input" value="John Smith">
            </div>

            <div class="form-group">
                <label class="form-label">Receiver Name</label>
                <input type="text" class="form-input" value="Sarah Johnson">
            </div>

            <div class="form-group">
                <label class="form-label">Phone Number</label>
                <input type="tel" class="form-input" value="+1 (555) 123-4567">
            </div>

            <div class="form-group">
                <label class="form-label">Email</label>
                <input type="email" class="form-input" value="sarah@email.com">
            </div>

            <div class="form-group">
                <label class="form-label">Receiver Address</label>
                <textarea class="form-textarea">123 Sunset Boulevard, Los Angeles, CA 90028</textarea>
            </div>

            <div class="form-group">
                <label class="form-label">Origin</label>
                <input type="text" class="form-input" value="New York, NY">
            </div>

            <div class="form-group">
                <label class="form-label">Destination</label>
                <input type="text" class="form-input" value="Los Angeles, CA">
            </div>

            <div class="form-group">
                <label class="form-label">Current Location</label>
                <input type="text" class="form-input" value="Denver, CO">
            </div>

            <div class="form-group">
                <label class="form-label">GPS Latitude</label>
                <input type="number" class="form-input" value="39.7392" step="0.0001">
            </div>

            <div class="form-group">
                <label class="form-label">GPS Longitude</label>
                <input type="number" class="form-input" value="-104.9903" step="0.0001">
            </div>

            <div class="form-group">
                <label class="form-label">Status</label>
                <select class="form-select">
                    <option>pending</option>
                    <option selected>in_transit</option>
                    <option>out_for_delivery</option>
                    <option>delivered</option>
                    <option>returned</option>
                    <option>failed</option>
                </select>
            </div>

            <div class="form-group">
                <label class="form-label">Item Image URL</label>
                <input type="file" class="form-input" id="itemPhoto" name="itemPhoto" accept="image/*">

            </div>

            <div class="form-group">
                <label class="form-label">Receiver Photo URL</label>
                <input type="file" class="form-input" id="receiverPhoto" name="receiverPhoto" accept="image/*">

            </div>
        </div>

        <div class="sidebar-footer">
            <button class="btn-save">Save Changes</button>
            <button class="btn-cancel" onclick="closeSidebar()">Cancel</button>
        </div>
    </div>
   <script>
        function openSidebar(consignmentId) {
            const overlay = document.getElementById('sidebar-overlay');
            const sidebar = document.getElementById(`sidebar-${consignmentId}`);
            
            overlay.classList.add('active');
            sidebar.classList.add('active');
        }

        function closeSidebar() {
            const overlay = document.getElementById('sidebar-overlay');
            const sidebars = document.querySelectorAll('.sidebar');
            
            overlay.classList.remove('active');
            sidebars.forEach(sidebar => sidebar.classList.remove('active'));
        }

        // Close sidebar with Escape key
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                closeSidebar();
            }
        });
    </script>




with this you know what to do right?, after fetch it from the db, you will now render it using   echo <<<HTML


 HTML;

the html will be inside with the rendering variable for example                                                 <div class="plan-name">{$planName} Plan</div>
hope you are getting me, and you know how to do the id right, let the unique id of the cards be the consignment number it self, ok?

this is the db
CREATE TABLE `consignments` (
  `id` int NOT NULL,
  `consignment_number` varchar(50) NOT NULL,
  `vin` varchar(50) DEFAULT NULL,
  `sender_name` varchar(100) NOT NULL,
  `receiver_name` varchar(100) NOT NULL,
  `phone_number` varchar(20) DEFAULT NULL,
  `email` varchar(150) DEFAULT NULL,
  `receiver_address` text NOT NULL,
  `item_image` varchar(255) DEFAULT NULL,
  `receiver_photo` varchar(255) DEFAULT NULL,
  `origin` varchar(100) NOT NULL,
  `destination` varchar(100) NOT NULL,
  `current_location` varchar(100) DEFAULT NULL,
  `gps_lat` decimal(10,7) DEFAULT NULL,
  `gps_lng` decimal(10,7) DEFAULT NULL,
  `status` enum('pending','in_transit','out_for_delivery','delivered','returned','failed') DEFAULT 'pending',
  `last_updated` timestamp NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;


start