Real-Time Tracking & Reporting

<!-- Real-time dashboard from erp.component.html:352-379 -->
<div class="title">
  <h1>
    Your Business, At a Glance - The Ultimate ERP Dashboard Experience
  </h1>
  <h2>Real-Time Insights</h2>
  <h2>Customizable Widgets</h2>
  <h2>Visualized Reports</h2>
  <h2>Save Time & Boost Productivity</h2>
  <h2>Better Decision-Making</h2>
  <h2>Multi-Device Compatibility</h2>
  <h2>User-Friendly Design</h2>
</div>

<p class="p">
  Transform the way you manage your business with our advanced ERP Dashboard. 
  Gain real-time insights, monitor critical metrics, and make data-driven 
  decisions effortlessly. From sales performance to inventory updates, our 
  beautifully designed and user-friendly dashboard puts all the information 
  you need at your fingertips - so you can focus on growth while we handle 
  the rest
</p>

<!-- Order tracking interface from erp.component.html:295-333 -->
<div class="left-side">
  <div class="title">
    <h1>
      Streamline Your Food Business with Our Powerful ERP Solution
    </h1>
    <h2>
      Real-Time Order Updates, Enhanced Customer Experience,
      Efficient Operations, Customizable Solutions, Comprehensive
      Analytics, Increased Profitability, Scalable and Secure.
    </h2>
  </div>
  <div class="type s-type">
    <p>
      Revolutionize the way you manage your food orders and customer
      updates. Our all-in-one ERP software offers real-time order
      tracking, a seamless customer viewing experience, and advanced
      analytics to optimize your operations.
    </p>
  </div>
</div>

<!-- Kitchen display system from erp.component.html:265-286 -->
<div class="right-side">
  <div class="title">
    <h1>Smart Kitchen <br />Display Screen</h1>
    <h2>Clear Order Details</h2>
    <h2>Status Tracking</h2>
    <h2>Customizable Interface</h2>
    <h2>Touchscreen Interaction</h2>
    <h2>Integration with ERP Modules</h2>
    <h2>Alert Notifications</h2>
  </div>

  <p class="p">
    The Smart Kitchen Display Screen is an advanced digital solution
    designed to streamline kitchen operations in restaurants,
    hotels, and food businesses. It integrates seamlessly with your
    ERP software to enhance efficiency and communication between the
    front of house and kitchen staff.
  </p>
</div>

// Real-time animation system from erp.component.ts:102-117
gsap.fromTo(
  '.menu > div, .hero-container > div',
  {
    opacity: 0,
    y: 30,
  },
  {
    opacity: 1,
    y: 0,
    duration: 2,
    ease: 'Expo.easeInOut',
    delay: 4.2,
    stagger: 0.1,
  }
);

<!-- Sales order management from erp.component.html:510-523 -->
<section class="panel orange">
  <div class="panelcontent">
    <div class="panelImage">
      <img src="landing/sales.svg" class="image" alt="123" />
    </div>
    <h2>Sales Order Management</h2>
    <p>Boost sales with a seamless order management system.</p>

    <li>Track orders from placement to delivery.</li>
    <li>Automate invoicing, billing, and payments.</li>
    <li>Improve customer satisfaction with on-time delivery.</li>
    
    <p>
      <span style="font-weight: bold">Benefit:</span>Increase sales
      productivity and enhance customer experiences.
    </p>
  </div>
</section>

<!-- Financial module from erp.component.html:471-483 -->
<section class="panel red">
  <div class="panelcontent">
    <div class="panelImage">
      <img src="landing/accountfinancial.svg" class="image" alt="123" />
    </div>
    <h2>Accounts & Financials</h2>
    <p>Streamline your financial processes with precision.</p>

    <li>Manage budgets, ledgers, and financial statements effortlessly.</li>
    <li>Generate real-time financial reports for informed decisions.</li>
    <li>Ensure compliance with automated tax calculations and audits.</li>
    
    <p>
      <span style="font-weight: bold">Benefit:</span> Gain total control of
      your finances with accuracy and clarity.
    </p>
  </div>
</section>

<!-- Procurement tracking from erp.component.html:530-542 -->
<section class="panel orange">
  <div class="panelcontent">
    <div class="panelImage">
      <img src="landing/purchase.svg" class="image" alt="123" />
    </div>

    <h2>Purchase & Procurement</h2>
    <p>Simplify procurement processes and manage suppliers.</p>

    <li>Automate purchase requests and approvals.</li>
    <li>Compare vendors and track purchase orders in real-time.</li>
    <li>Control costs with transparent procurement workflows.</li>
    
    <p>
      <span style="font-weight: bold">Benefit:</span>Achieve smarter
      purchasing and save time.
    </p>
  </div>
</section>

<!-- Supply chain module from erp.component.html:486-504 -->
<section class="panel orange">
  <div class="panelcontent">
    <div class="panelImage">
      <img src="landing/inventory.svg" class="image" alt="123" />
    </div>
    <h2>Inventory & Supply Chain Management</h2>
    <p>Optimize inventory levels and streamline your supply chain.</p>

    <li>Real-time inventory tracking and stock control.</li>
    <li>Automate procurement and vendor management.</li>
    <li>Forecast demand to avoid overstocking or shortages.</li>
    
    <p>
      <span style="font-weight: bold">Benefit:</span> Reduce costs and
      improve supply chain efficiency.
    </p>
  </div>
</section>

// Animation implementation from erp.component.ts:42-86
import { gsap } from 'gsap';
import anime from 'animejs/lib/anime.es.js';

ngAfterViewInit(): void {
  // Text animation for real-time updates
  const textWrapper: HTMLElement | null = document.querySelector(".titles");
  if (textWrapper) {
    textWrapper.innerHTML = textWrapper.textContent?.replace(/\S/g, 
      "<span class='letter'>$&</span>") || '';
    
    anime.timeline().add({
      targets: ".titles .letter",
      translateY: [100, 0],
      translateZ: 0,
      opacity: [0, 1],
      easing: "easeOutExpo",
      duration: 2000,
      delay: (el: HTMLElement, i: number) => 4800 + 40 * i,
    });
  }

  // Smooth transitions for real-time data updates
  gsap.fromTo('.menu > div, .hero-container > div', {
    opacity: 0,
    y: 30,
  }, {
    opacity: 1,
    y: 0,
    duration: 2,
    ease: 'Expo.easeInOut',
    delay: 4.2,
    stagger: 0.1,
  });
}

// Scroll navigation for real-time content from erp.component.ts:245-250
scrollToSection(sectionId: string): void {
  const section = document.getElementById(sectionId);
  if (section) {
    section.scrollIntoView({ behavior: 'smooth' });
  }
}

<!-- Customer order view from erp.component.html:324-331 -->
<div class="right-side pyramid">
  <img
    class="content-image image"
    src="landing/OrdersViewScreeen.jpg"
    alt="Customer order tracking screen"
  />
</div>