What is Amazon Nova Act AI?

-
Image
  What is Amazon Nova Act AI? Okay so, let me tell you about something super cool Amazon made. It's called Nova Act , and it's like a super smart robot brain that can use the internet just like we do! You know how we open websites, click stuff, type in boxes, and buy things online? Nova Act can do all that ... by itself! 1. It’s an AI Agent for Browsing the Internet So this Nova Act thing is like a robot helper that knows how to use a browser (like Chrome or Safari). It can go to websites, click buttons, fill forms, buy stuff, and even follow hard instructions without us telling it every little thing. Like imagine you said, "Hey Nova, go buy me a red t-shirt from Amazon." And guess what? It actually can go and do it all by itself! How crazy is that! 2. It Works on Its Own! One of the coolest thing about Nova Act is, once you give it a job, you don’t have to sit and watch it or tell it every step. It just knows what to do next, and it finish the task for you. Li...
Post a Comment

How to create a Full-Stack Billing System with JavaScript, Node.js, Express, MySQL, and Semantic UI (1.3)

-

About the EJS Structure

The orders.ejs file is a structured HTML template used for displaying order details. It features a vertical navigation menu, an order summary table, and dynamic filters for selecting orders by month and year. The page includes an accordion-style layout for expanding order details, showing information like order number, product names, quantities, and prices. Semantic UI and Bootstrap are used for responsive styling, and the file also provides functionality for viewing and managing multiple orders efficiently.

orders.ejs

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--Custom CSS-->
    <link rel="stylesheet" href="/css/style.css">
    <!--Semantic-UI CSS-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

    <title>Orders</title>
  </head>
  <body>
    <!--Vertical Navbar-->
  <div class="vertical-nav bg-white" id="sidebar">
    <div class="py-4 px-3 mb-4" style="background: linear-gradient(to top, #3399FF 0%, #FFB385 68%);">
      <div class="media d-flex align-items-center"><img src="/css/admin.svg" alt="..." width="65" class="mr-3 rounded-circle img-thumbnail shadow-sm">
        &emsp;<div class="media-body">
          <h4 class="m-0"><p class="text-white">Hubuk Garments</h4>
            <p class="font-weight-light text-white mb-0"></p>
        </div>
      </div>
    </div>
    <form action="/logout?_method=DELETE" method="POST">
      <center><button type="submit" class="btn btn-danger" ><p class="text-white">Log Out</p></button></center>
    </form>
    <h5 class="ui horizontal divider header text-primary">
      MAIN
    </h5>
 
    <ul class="nav flex-column bg-white mb-0">
      <li class="nav-item">
        <a href="/" class="nav-link text-dark font-italic">
                  <i class="home icon"></i>
                  Dashboard
                </a>
      </li>
      <li class="nav-item">
        <a href="/bill" class="nav-link text-dark font-italic">
          <i class="rupee sign icon"></i>
                  Bill
              </a>
      </li>
      <li class="nav-item">
     <a href="/orders" class="nav-link text-dark font-italic" style="background: linear-gradient(to right, #90EE90 40%,  #FFB385 68%);">
      <p class="text-white"> <i class="eye icon"></i>
                  View Orders
      </p>
              </a>
      </li>
      <li class="nav-item">
        <a href="/viewstocks" class="nav-link text-dark font-italic">
          <i class="tags icon"></i>
                  View Stocks
              </a>
      </li>
      <li class="nav-item">
        <a href="/stocks" class="nav-link text-dark font-italic">
          <i class="plus circle icon"></i>
                  Add Stock
              </a>
      </li>
    </ul>
 
    <h5 class="ui horizontal divider header text-primary">
      CUSTOMIZE
    </h5>
 
    <ul class="nav flex-column bg-white mb-0">
      <li class="nav-item">
        <a href="/brands" class="nav-link text-dark font-italic">
          <i class="yelp icon"></i>
                  Brand
              </a>
      </li>
      <li class="nav-item">
        <a href="/categories" class="nav-link text-dark font-italic">
          <i class="bookmark icon"></i>
                  Category
              </a>
      </li>
      <li class="nav-item">
        <a href="/sizes" class="nav-link text-dark font-italic">
          <i class="check square icon"></i>
                  Size
              </a>
      </li>
    </ul>

    <h5 class="ui horizontal divider header text-primary">
      FILTERS
    </h5>
 
    <ul class="nav flex-column bg-white mb-0">
      <li class="nav-item">
        <a href="/sales_filter" class="nav-link text-dark font-italic">
          <i class="yelp icon"></i>
                  Sales
              </a>
      </li>
      <li class="nav-item">
        <a href="/stock_filter" class="nav-link text-dark font-italic">
          <i class="bookmark icon"></i>
                  Stock
              </a>
      </li>
    </ul>
  </div>
  <!-- End vertical navbar -->
 
  <!-- Page content holder -->
  <div class="page-content p-5" id="content" style="background: linear-gradient(to right, #90EE90 47%, #FFB385 100%);">
    <!-- Toggle button -->
    <button id="sidebarCollapse" type="button" class="btn btn-light bg-white rounded-pill shadow-sm px-4 mb-4"><i class="align justify icon"></i><small class="text-uppercase font-weight-bold">Menu</small></button>
 
    <!-- Page content -->
   
    <h1>Order Summary</h1>

   
    <center><img class="ui medium rounded image" src="/css/flower.svg"></center>
    <br>
    <form action="/orders/orders_query" method="POST">
    <div class="ui four column grid">
      <div class="row">
      <div class="column">
      <h3>View Orders By</h3>
      </div>
     
      <div class="column">
      <div class="form-check form-check-inline form-switch">
           <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="month" oninput="myFunction()">
          <label class="form-check-label" for="exampleRadios2">
              Month
          </label>
      </div>
      <div class="form-check form-check-inline form-switch">
          <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="year" oninput="myFunction()">
          <label class="form-check-label" for="exampleRadios3">
              Year
          </label>
      </div>
      </div>
      <div class="column">
          <select class="form-select" aria-label="Disabled select example" id="month" name="selected_month" disabled>
              <option selected>Select Month</option>
              <option value="1">January</option>
              <option value="2">February</option>
              <option value="3">March</option>
              <option value="4">April</option>
              <option value="5">May</option>
              <option value="6">June</option>
              <option value="7">July</option>
              <option value="8">August</option>
              <option value="9">September</option>
              <option value="10">October</option>
              <option value="11">November</option>
              <option value="12">December</option>
            </select>
      </div>
      <div class="column">
          <select class="form-select" aria-label="Disabled select example" id="year" name="selected_year" disabled>
              <option selected>Select Year</option>
              <option value="2021">2021</option>
              <option value="2022">2022</option>
              <option value="2023">2023</option>
              <option value="2024">2024</option>
              <option value="2025">2025</option>
            </select>
      </div>
      </div>
      </div>
      <br>
      <center>
        <div class="ui left corner labeled action input">
          <button class="ui teal button" type="submit">Search &emsp;</button>
          <div class="ui corner label">
            <i class="search icon"></i>
          </div>
        </div>
      </center>
    </form>
   
      <% if(selected_item == 'None') { %>
      <% orders.forEach(function(order){ %>
        <br>
      <div class="ui styled fluid accordion">
      <div class="title text-primary">
        <i class="dropdown icon"></i>
       
        <div class="container">
          <div class="row-lg">
            <div class="col-lg">
              <p class="text-primary">Order ID: <i><%= order.ItemNo %></i> </p>
            </div>
            <div class="col-lg">
              <p class="text-danger"> Total Amount: <i><i class="rupee sign icon"></i><%= order.Amount %></i></p>
            </div>
          </div>
          <div class="row-lg">
            <div class="col-lg">
              <p class="text-success">Date: <i><%= order.date %></i></p>
            </div>
            <div class="col-lg">
              <p class="text-dark">Time: <i><%= order.time %></i></p>
            </div>
          </div>
        </div>
     
      </div>
      <div class="content">
        <table class="ui inverted violet table table-bordered" >
          <thead>
            <tr class="table-success">
               
                <th>Item ID</th>
                <th>Item Name</th>
                <th>Category</th>
                <th>Brand Name</th>
                <th>Size</th>
                <th>Amount</th>
                <th>Customer Number</th>
            </tr>
        </thead>
          <tbody>
        <% sub_orders.forEach(function(sub_order){ %>
          <% console.log(sub_order.ItemNo) %>
          <% console.log(order.ItemNo) %>  
        <% if(sub_order.ItemNo == order.ItemNo) { %>
            <% console.log(sub_order) %>
            <tr style="background: linear-gradient(to left, #90EE90 20%,#FFD700 68%);">
            <td><%= sub_order.ItemID %></td>
            <td><%= sub_order.ItemName %></td>
            <td><%= sub_order.Category %></td>
            <td><%= sub_order.Brand %></td>
            <td><%= sub_order.Size %></td>
            <td><i class="rupee sign icon"></i><%= sub_order.Amount %></td>
            <td><%= sub_order.PhoneNumber %></td>
            </tr>
          <% } %>
       
     
      <% }) %>
    </tbody>
  </table>
    </div>
  </div>
    <% }) %>

  <% } %>
   
  <% if(selected_item == 'month') { %>
    <h2 class="text-primary">Showing Orders for <%= month_name %>, <%= year %>  </h2>
    <% orders.forEach(function(order){ %>
      <br>
    <div class="ui styled fluid accordion">
    <div class="title text-primary">
      <i class="dropdown icon"></i>
      <div class="container">
        <div class="row-lg">
          <div class="col-lg">
            <p class="text-primary">Order ID: <i><%= order.ItemNo %></i> </p>
          </div>
          <div class="col-lg">
            <p class="text-danger"> Total Amount: <i><i class="rupee sign icon"></i><%= order.Amount %></i></p>
          </div>
        </div>
        <div class="row-lg">
          <div class="col-lg">
            <p class="text-success">Date: <i><%= order.date %></i></p>
          </div>
          <div class="col-lg">
            <p class="text-dark">Time: <i><%= order.time %></i></p>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <table class="ui inverted violet table table-bordered" >
        <thead>
          <tr class="table-success">
             
              <th>Item ID</th>
              <th>Item Name</th>
              <th>Category</th>
              <th>Brand Name</th>
              <th>Size</th>
              <th>Amount</th>
              <th>Customer Number</th>
          </tr>
      </thead>
        <tbody>
      <% sub_orders.forEach(function(sub_order){ %>
        <% console.log(sub_order.ItemNo) %>
        <% console.log(order.ItemNo) %>
      <% if(sub_order.ItemNo== order.ItemNo) { %>
          <% console.log(sub_order) %>
          <tr style="background: linear-gradient(to left,#90EE90 20%, #FFD700 68%);">
          <td><%= sub_order.ItemID %></td>
          <td><%= sub_order.ItemName %></td>
          <td><%= sub_order.Category %></td>
          <td><%= sub_order.Brand %></td>
          <td><%= sub_order.Size %></td>
          <td><i class="rupee sign icon"></i><%= sub_order.Amount %></td>
          <td><%= sub_order.PhoneNumber %></td>
          </tr>
        <% } %>
     
   
    <% }) %>
  </tbody>
</table>
  </div>
</div>
  <% }) %>

<% } %>

<% if(selected_item == 'year') { %>
  <h2 class="text-primary">Showing Orders for <%= year %>  </h2>
  <% orders.forEach(function(order){ %>
    <br>
  <div class="ui styled fluid accordion">
  <div class="title text-primary">
    <i class="dropdown icon"></i>
    <div class="container">
      <div class="row-lg">
        <div class="col-lg">
          <p class="text-primary">Order ID: <i><%= order.ItemNo %></i> </p>
        </div>
        <div class="col-lg">
          <p class="text-danger"> Total Amount: <i><i class="rupee sign icon"></i><%= order.Amount %></i></p>
        </div>
      </div>
      <div class="row-lg">
        <div class="col-lg">
          <p class="text-success">Date: <i><%= order.date %></i></p>
        </div>
        <div class="col-lg">
          <p class="text-dark">Time: <i><%= order.time %></i></p>
        </div>
      </div>
    </div>
  </div>
  <div class="content">
    <table class="ui inverted violet table table-bordered" >
      <thead>
        <tr class="table-success">
           
            <th>Item ID</th>
            <th>Item Name</th>
            <th>Category</th>
            <th>Brand Name</th>
            <th>Size</th>
            <th>Amount</th>
            <th>Customer Number</th>
        </tr>
    </thead>
      <tbody>
    <% sub_orders.forEach(function(sub_order){ %>
      <% console.log(sub_order.ItemNo) %>
      <% console.log(order.ItemNo) %>
    <% if(sub_order.ItemNo == order.ItemNo) { %>
        <% console.log(sub_order) %>
        <tr style="background: linear-gradient(to left, #90EE90 20%,#FFD700 68%);">
        <td><%= sub_order.ItemID %></td>
        <td><%= sub_order.ItemName %></td>
        <td><%= sub_order.Category %></td>
        <td><%= sub_order.Brand %></td>
        <td><%= sub_order.Size %></td>
        <td><i class="rupee sign icon"></i><%= sub_order.Amount %></td>
        <td><%= sub_order.PhoneNumber %></td>
        </tr>
      <% } %>
   
 
  <% }) %>
</tbody>
</table>
</div>
</div>
<% }) %>

<% } %>
   
        <% orders.forEach(function(order){ %>
            <tr style="background: linear-gradient(to left, #90EE90 20%,#FFD700 68%);">  
                <td><%= order.ItemNo %></td>
                <td><%= order.ItemID %></td>
                <td><%= order.ItemName %></td>
                <td><%= order.Category %></td>
                <td><%= order.Brand %></td>
                <td><%= order.Size %></td>
                <td><%= order.Amount %></td>
                <td><%= order.date %></td>
                <td><%= order.time %>&emsp;<form action="/deleteitem" method="POST"><input type="hidden" name="deleteid" value="<%= order.ItemNo %>"><button type="submit" class="btn btn-info btn-sm">Delete</button></form></td>
                <td><%= order.PhoneNumber%></td>
            </tr>
        <% }); %>
    </tbody>
    </table>
    </div>
   

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
    <!-- Semnatic-UI Scripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script>
    <script>
      $(function() {
    // Sidebar toggle behavior
    $('#sidebarCollapse').on('click', function() {
      $('#sidebar, #content').toggleClass('active');
    });
  });
 
    </script>

<script language='javascript'>
  $(document).ready(function(){
     $('.ui.accordion').accordion();
  });
 </script>

<script>
  //   console.log(document.getElementsByTagName('input'))
  function myFunction(){
    if (document.getElementById('exampleRadios2').checked == true){
      document.getElementById("month").disabled = false;
      document.getElementById("year").disabled = false;
    }
    if (document.getElementById('exampleRadios3').checked == true){
      document.getElementById("year").disabled = false;
      document.getElementById("month").disabled = true;
    }
  }
</script>
   
  </body>
</html>

orders.js

const express = require('express');
const router = express.Router();
const { ordersControllers, deleteOrderItem } = require('../controllers/ordersControllers');

// GET route for fetching and displaying orders
router.get('/', (req, res) => {
  ordersControllers('year', null, new Date().getFullYear(), (err, results) => {
    if (err) {
      return res.status(500).send('Error fetching orders');
    }

    const { orders, sub_orders } = results;

    res.render('orders', {
      title: 'Welcome to the Orders Management System',
      orders,
      sub_orders,
      selected_item: 'None'
    });
  });
});

// POST route to delete an item
router.post('/deleteitem', (req, res) => {
  const ItemNo = req.body.deleteid;

  if (!ItemNo) {
    return res.status(400).send('Item ID is required for deletion');
  }

  // Call the deleteOrderItem function
  deleteOrderItem(ItemNo, (err, result) => {
    if (err) {
      return res.status(500).send('Error deleting item');
    }

    console.log('Item deleted successfully with ID:', ItemNo);
    // Redirect to the orders page after deletion
    res.redirect('/');
  });
});

// POST route for handling search/filter functionality
router.post('/orders_query', (req, res) => {
  const time_type = req.body['exampleRadios'];
  let month = req.body['selected_month'];
  let year = req.body['selected_year'];

  if (!year) {
    return res.status(400).send('Year is required');
  }

  if (time_type === 'month' && !month) {
    return res.status(400).send('Month is required for month-based filtering');
  }

  ordersControllers(time_type, month, year, (err, results) => {
    if (err) {
      console.error('Error in ordersControllers:', err);
      return res.status(500).send('Error fetching filtered data');
    }

    const { orders, sub_orders } = results;
    const monthNames = ["January", "February", "March", "April", "May", "June",
                        "July", "August", "September", "October", "November", "December"];
    let month_name = time_type === 'month' ? monthNames[parseInt(month, 10) - 1] : 'None';

    res.render('orders', {
      title: 'Filtered Orders',
      orders,
      sub_orders,
      selected_item: time_type,
      month_name: month_name,
      year: year
    });
  });
});

module.exports = router;



orderControllers.js

const db = require('../db/connect.js');

// Function to delete an item by ItemID
const deleteOrderItem = (ItemNo, callback) => {
  const deleteQuery = `DELETE FROM bills WHERE ItemNo = ?`;

  db.query(deleteQuery, [ItemNo], (err, result) => {
    if (err) {
      console.error('Error deleting item: ', err);
      return callback(err, null);
    }

    console.log('Item deleted successfully:', ItemNo);
    callback(null, result);
  });
};

// Function to fetch orders and sub-orders
const ordersControllers = (time_type, month, year, callback) => {
  console.log('orders Controller is set up and ready to use.');

  year = parseInt(year, 10);
  if (isNaN(year)) {
    return callback(new Error('Invalid year'), null);
  }

  let query;
  let params = [];

  if (time_type === 'month') {
    month = parseInt(month, 10);
    if (isNaN(month)) {
      return callback(new Error('Invalid month'), null);
    }

    query = `
      SELECT
        ItemNo,
        SUM(Amount) AS Amount,
        date,
        time
      FROM bills
      WHERE Month(date) = ? AND YEAR(date) = ?
      GROUP BY ItemNo
    `;
    params = [month, year];
  } else if (time_type === 'year') {
    query = `
      SELECT
        ItemNo,
        SUM(Amount) AS Amount,
        date,
        time
      FROM bills
      WHERE YEAR(date) = ?
      GROUP BY ItemNo
    `;
    params = [year];
  }

  db.query(query, params, (error, results) => {
    if (error) {
      console.error('Query execution failed: ' + error);
      return callback(error, null);
    }

    const subOrdersQuery = 'SELECT * FROM bills';
    db.query(subOrdersQuery, [], (err1, subOrdersResults) => {
      if (err1) {
        console.error('Fetching sub_orders failed: ' + err1);
        return callback(err1, null);
      }

      callback(null, { orders: results, sub_orders: subOrdersResults });
    });
  });
};

module.exports = {
  ordersControllers,
  deleteOrderItem
};



Comments

Post a Comment

Popular posts from this blog

What Is an API?

-
Image
 🌐 What Is an API? (Like… Really) API stands for Application Programming Interface. Think of an API like a waiter in a restaurant . You (the customer) ask for food, the waiter takes your order , and then brings you the food from the kitchen. You don’t go into the kitchen yourself — you just tell the waiter. Same with computers! One app asks for info (like the weather), the API is the waiter , and it gets that info from another app and brings it back. That’s it! 🤔 Why Do We Need APIs? APIs help apps talk to each other Without APIs, apps wouldn’t know how to share or ask for stuff. Like... imagine your phone couldn’t get weather updates from the internet. That’d be sad, right? APIs save time for programmers Instead of building everything from scratch, developers use APIs to grab ready-made features. It’s like using Legos instead of carving wood blocks every time. They make teamwork easier Apps, websites, games — they all use APIs to get along better 🍔 A Restaurant Ex...
Read more

How to Turn Your Photos into Studio Ghibli-Style Art for Free!

-
Image
 How to Turn Your Photos into Studio Ghibli-Style Art for Free! Studio Ghibli movies are famous for their beautiful animation, soft colors, and magical worlds . Now, you can turn your photos into Ghibli-style artwork using free AI tools! Let’s check out some easy ways to do it. 1. ChatGPT AI Art Maker Go to the ChatGPT website or app . Click on the "+" button to upload your photo. Type a detailed prompt like: "Make this photo look like a Studio Ghibli painting with soft colors and fantasy style." ChatGPT will turn your photo into a Ghibli-style masterpiece ! 2. Hugging Face – Studio Ghibli AI Model Hugging Face has a special model made by IShallRiseAgain for Ghibli-style art. You can use prompts like “studio_ghibli_anime_style” to get that magical look. It's free and great for creative projects and personal art ! 3. Grok – AI Magic for Ghibli Art Visit the Grok website or app . Make sure you activate Grok 3 model . Upload you...
Read more

What is Amazon Nova Act AI?

-
Image
  What is Amazon Nova Act AI? Okay so, let me tell you about something super cool Amazon made. It's called Nova Act , and it's like a super smart robot brain that can use the internet just like we do! You know how we open websites, click stuff, type in boxes, and buy things online? Nova Act can do all that ... by itself! 1. It’s an AI Agent for Browsing the Internet So this Nova Act thing is like a robot helper that knows how to use a browser (like Chrome or Safari). It can go to websites, click buttons, fill forms, buy stuff, and even follow hard instructions without us telling it every little thing. Like imagine you said, "Hey Nova, go buy me a red t-shirt from Amazon." And guess what? It actually can go and do it all by itself! How crazy is that! 2. It Works on Its Own! One of the coolest thing about Nova Act is, once you give it a job, you don’t have to sit and watch it or tell it every step. It just knows what to do next, and it finish the task for you. Li...
Read more