Kitchen Order Status Table:

-

 

Kitchen Order Status Table:

Output:

Kitchen Order-Items

Srl. No. Table No.
Date-Time Mobile No.
Sl. No. Items Rate Quantity Started Cooked OnWay Delivered

Order Progress Status

Item Qty Progress Stages

Code:

CSS:

Html:

<div id="customerInfoBox" style="
  border: 1px solid #ccc; 
  border-radius: 13px; 
  padding: 10px; 
  width: 700px;
  margin: 0 auto;
  margin-top: 50px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
">
  <!-- 🔷 Top Row: Cancel, Heading, Status -->
<div style="display: flex; 
            justify-content: space-between; 
            align-items: center; 
            border: 1px solid #ccc; 
            border-radius: 10px 10px 0 0; 
            padding: 10px 20px; 
            background-color: #f9f9f9; 
            gap: 20px;">

  <!-- ❌ Cancel Button -->
  <div>
    <button onclick="location.reload()" style="
        padding: 10px 20px;
        background-color: #e74c3c;
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 18px;
        cursor: pointer;
        font-weight: bold;
      " 
      onmouseover="this.style.backgroundColor='#c0392b'" 
      onmouseout="this.style.backgroundColor='#e74c3c'">
      X Delete Order 
    </button>
  </div>

  <!-- 📝 Heading -->
  <div style="flex: 1; text-align: center;">
    <h2 style="margin: 0;">Kitchen Order-Items</h2>
  </div>

  <!-- ✅ Order Status Button -->
  <div>
    <button onclick="openPaymentModal()" style="
        padding: 10px 20px;
        background-color: #53c687;
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 18px;
        font-weight: bold;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
        cursor: pointer;
        transition: background-color 0.3s ease;
      "
      onmouseover="this.style.backgroundColor='#339961'"
      onmouseout="this.style.backgroundColor='#53c687'">
      Order Status
    </button>
  </div>

</div>
  
  <!-- 🔷 Customer Info -->
  <table style="width:100%; border-collapse:collapse;margin-bottom: 20px; background-color: whitesmoke; width: 100%; box-sizing: border-box">
    <tr style="background-color: ; color: black;">
      <th style="padding:3px; border:1px solid #ccc;background-color:#53c687; color: white; width: 12%; font-weight: bold; ">Srl. No.</th>
      <td id="srlNoCell" style="padding:3px; border:1px solid #ccc; width: 10%;"></td>
      <th style="padding:3px; border:1px solid #ccc; background-color:#53c687; color: white; width: 12%; font-weight: bold;">Table No.</th>
      <td id="tableNoCell" style="padding:3px; border:1px solid #ccc; width: 15%;"></td>
     
    </tr>
    <tr>
      <th style="padding:3px; border:1px solid #ccc; background-color:#53c687; color: white; width: 12%;">Date-Time</th>
      <td id="dateTimeCell" style="padding:3px; border:1px solid #ccc; width: 10%;"></td>
      <th style="padding:3px; border:1px solid #ccc; background-color:#53c687; color: white; width: 12%;">Mobile No.</th>
      <td id="mobileNoCell" style="padding:3px; border:1px solid #ccc; width: 15%;"></td>
    </tr>
  </table>
  
  <!--🔷 Item Info-->
<!--Rows injected by JS--><table id="selectedItemsTable" style="border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-collapse: collapse; width: 100%;">
  <thead>
    <tr style="background-color: #53c687; color: white;">
      <th style="border: 1px solid rgb(204, 204, 204); padding: 6px; width: 6%;">Sl. No.</th>
      <th style="border: 1px solid rgb(204, 204, 204); padding: 6px; width: 34%%;">Items</th>
      <th style="border: 1px solid rgb(204, 204, 204); padding: 6px; width: 8%;">Rate</th>
      <th style="border: 1px solid rgb(204, 204, 204); padding: 6px; width: 10%;">Quantity</th>
      <th style="border: 1px solid rgb(204, 204, 204); padding: 6px; width: 10%;">Started</th>
      <th style="border: 1px solid rgb(204, 204, 204); padding: 6px; width: 10%;">Cooked</th>
      <th style="border: 1px solid rgb(204, 204, 204); padding: 6px; width: 9%;">OnWay</th>
      <th style="border: 1px solid rgb(204, 204, 204); padding: 6px; width: 11%;">Delivered</th><!-- after data import: before click cell data "❌" and after click data change in to "✅" and update and progres status bar-->
    </tr>
  </thead>
  <tbody id="selectedItemsBody">
    <!-- Rows injected by JS -->
  </tbody>

</table>

<!-- 🔹 Buttons Section -->
<div style="
  width: 100%; 
  background: #f9f9f9; 
  padding: 15px; 
  border-bottom-left-radius: 10px; 
  border-bottom-right-radius: 10px;
  border: 1px solid #aaa; 
  border-top: none;
  margin-top: -1px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
">
 
     <button onclick="cancelAnimationFrame()" style="
      padding: 10px 25px;
      background-color: #ff7d66;
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 25px;
      cursor: pointer;
    " onmouseover="this.style.backgroundColor='#ff5233'" onmouseout="this.style.backgroundColor='#ff7d66'">Close</button>


    <button onclick="cancelAnimationFrame()" onmouseout="this.style.backgroundColor='#ff7d66'" onmouseover="this.style.backgroundColor='#ff5233'" style="background-color: green; border-radius: 6px; border: none; color: white; cursor: pointer; font-size: 25px; padding: 10px 25px;">Open</button>

<!-- ✅ Start Order Status -->
<!-- ✅ Final Corrected Version -->


</div>
  <!-- 🔷 Order Progress Title -->
  
    <div style="display: flex;
              justify-content: center;
              align-items: center;
              border: 1px solid #ccc;
              border-radius: 10px 10px 0 0;
              margin: 30px auto 0 auto;
              padding: 10px 20px;
              background-color: #f9f9f9;
              width: 100%;">
      <h2 style="margin: 0; text-align: center;">Order Progress Status</h2>
    </div>
    
    
    <!-- 🔷 Overall Progress Bar -->
 <!-- ✅ Overall Progress Bar Centered -->
<div style="display: flex; justify-content: center; margin: 30px 0;">
  <div style="width: 100%; max-width: 500px;">
    <label style="font-weight: bold; display: block; margin-bottom: 5px; text-align: center;">Overall Progress:</label>
    <div style="height: 20px; width: 100%; background: #eee; border-radius: 10px; overflow: hidden;">
      <div id="overallProgressBar" style="height: 100%; width: 0%; background: #4caf50; transition: width 0.3s;"></div>
    </div>
  </div>
</div>
    
    <!-- 🔷 Progress Table -->
    <table style="width: 100%; border-collapse: collapse; margin: 10px auto;">
      <thead>
        <tr style="background-color: #f1f1f1;">
          <th style="padding: 10px; border: 1px solid #ccc;">Item</th>
          <th style="padding: 10px; border: 1px solid #ccc;">Progress</th>
          <th style="padding: 10px; border: 1px solid #ccc;">Stages</th>
        </tr>
      </thead>
      <tbody id="orderProgressBody">
        <!-- JavaScript fills rows -->
      </tbody>
    </table>
  <!-- ❌ End Order Status 

Create status bar following individual Items data

Progress onclick the section/row cell under heads "Started", "Cooked", "On Way" and "Delivered"-->
</div>

JS:

<script>
  const items = ["Veg Biryani", "Paneer Tikka", "Green Salad"];
  const totalStages = 4;
  
  const progressData = {}; // Track progress for each item
  
  function createProgressRow(itemName) {
    const tr = document.createElement("tr");
    
    // 🔹 Item Name
    const tdName = document.createElement("td");
    tdName.textContent = itemName;
    tdName.setAttribute("style", "padding:10px; border:1px solid #ccc; font-weight:bold;");
    tr.appendChild(tdName);
    
    // 🔹 Individual Progress Bar
    const tdProgress = document.createElement("td");
    tdProgress.setAttribute("style", "padding:10px; border:1px solid #ccc;");
    const progressBarContainer = document.createElement("div");
    progressBarContainer.setAttribute("style", "height: 16px; width: 100%; background: #eee; border-radius: 8px; overflow: hidden;");
    const progressBar = document.createElement("div");
    progressBar.setAttribute("style", "height: 100%; width: 0%; background: #2196f3; transition: width 0.3s;");
    progressBarContainer.appendChild(progressBar);
    tdProgress.appendChild(progressBarContainer);
    tr.appendChild(tdProgress);
    
    // 🔹 Stage Buttons
    const tdStages = document.createElement("td");
    tdStages.setAttribute("style", "border:1px solid #ccc; text-align:center;");
    
    const stages = ["Started", "Cooked", "On Way", "Delivered"];
    const buttons = [];
    
    stages.forEach((stage, index) => {
      const btn = document.createElement("button");
      btn.textContent = stage;
      btn.setAttribute("style", "margin: 2px; padding: 6px 10px; border: none; border-radius: 4px; background-color: #e0e0e0; cursor: pointer;");
      btn.onclick = () => {
        // Update buttons
        buttons.forEach((b, i) => {
          if (i <= index) {
            b.style.backgroundColor = "#4caf50";
            b.style.color = "#fff";
            b.style.fontWeight = "bold";
          } else {
            b.style.backgroundColor = "#e0e0e0";
            b.style.color = "black";
            b.style.fontWeight = "normal";
          }
        });
        
        // Update individual progress
        const percent = ((index + 1) / totalStages) * 100;
        progressBar.style.width = percent + "%";
        
        // Save progress data
        progressData[itemName] = index + 1;
        
        // Update overall progress
        updateOverallProgress();
      };
      buttons.push(btn);
      tdStages.appendChild(btn);
    });
    
    tr.appendChild(tdStages);
    return tr;
  }
  
  function updateOverallProgress() {
    const totalCompleted = Object.values(progressData).reduce((sum, val) => sum + val, 0);
    const maxPossible = items.length * totalStages;
    const overallPercent = (totalCompleted / maxPossible) * 100;
    document.getElementById("overallProgressBar").style.width = overallPercent + "%";
  }
  
  const tbody = document.getElementById("orderProgressBody");
  items.forEach(item => {
    progressData[item] = 0;
    tbody.appendChild(createProgressRow(item));
  });
</script>


Comments

Post a Comment

Popular posts from this blog

Form For Table no. And Coustomer Details:

-
 Form For Table no. And Coustomer Details:  Output: Order Form Customer Details: Selected Items Table No.: Select Table 🔽 R.S. - Table: 1 R.S. - Table: 1-A R.S. - Table: 1-B R.S. - Table: 1/2 R.S. - Table: 1-A/2 R.S. - Table: 1-B/2 R.S. - Table: 2 R.S. - Table: 2-A R.S. - Table: 2-B R.S. - Table: 2/2 R.S. - Table: 2-A/2 R.S. - Table: 2-B/2 R.S. - Table: 3 R.S. - Table: 3-A R.S. - Table: 3-B R.S. - Table: 3/2 R.S. - Table: 3-A/2 R.S. - Table: 3-B/2 R.S. - Table: 4 R.S. - Table: 4-A R.S. - Table: 4-B R.S. - Table: 4/...
Read more

Kitchen Order Table:

-
 Kitchen Order Table: Output: X Delete Order Kitchen Order-Items Order Status Srl. No. Table No. Date-Time Mobile No. Sl. No. Items Rate Quantity Started Cooked OnWay Delivered Close Open Order Progress Status Code: CSS: Html: <div id="customerInfoBox" style="   border: 1px solid #ccc;    border-radius: 13px;    padding: 10px;    width: 700px;   margin: 0 auto;   margin-top: 50px;   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); ">   <!-- 🔷 Top Row: Cancel, Heading, Status --> <div style="display: flex;              justify-content: space-between;           ...
Read more

Selected Items Table: Demo

-
 Selected Items Table: Demo Output: Your Selected Items Srl. No. Table No. Customer Name Date-Time Mobile No. Email Sl. No. Items Rate - Quantity + Remove Amount Rs. Total Amount Rs.: 0.00 Submit Close Refresh Select Items Code: CSS: HTML: <div id="customerInfoBox" style="   border: 1px solid #ccc;    border-radius: 13px;    padding: 10px;    width: 400px;   margin: 0 auto;   margin-top: 50px;   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); ">   <div style="border-top-left-radius: 10px; border:1px solid #ccc; border-top-right-radius: 10px;border-top-left-radius: 10px; text-align: center;">     ...
Read more