Login and UI Changes updated

counter-frontend/src/components/Layout.tsx

@@ -38,8 +38,11 @@ const Layout = () => {
       <aside className="w-64 bg-[#001828] text-white flex flex-col shadow-2xl z-50">
         <div className="p-8">
           <div className="flex flex-col items-center justify-center text-center gap-4">
-            <div className="bg-white rounded-2xl p-4 flex items-center justify-center border border-white/20 shadow-xl overflow-hidden w-full max-w-[180px]">
+            <div className="bg-white rounded-2xl p-4 flex flex-col items-center justify-center border border-white/20 shadow-xl overflow-hidden w-full max-w-[180px]">
               <img src={CollegeLogo} alt="Logo" className="h-12 w-auto object-contain" />
+              <span className="text-[9px] font-semibold text-slate-500 mt-1.5 italic tracking-tight font-sans">
+                Till yo tummy is full...
+              </span>
             </div>
             <div>
               <span className="text-xl font-black tracking-tighter text-white">TILLO COUNTER</span>

counter-frontend/src/pages/Login.tsx

@@ -65,9 +65,12 @@ const Login = () => {
         <motion.div
           initial={{ opacity: 0, y: -20 }}
           animate={{ opacity: 1, y: 0 }}
-          className="mb-10"
+          className="mb-10 flex flex-col items-center justify-center"
         >
           <img src={CollegeLogo} alt="College Logo" className="h-16 md:h-20 object-contain" />
+          <span className="text-[10px] font-semibold text-slate-400 mt-2 italic tracking-wide font-sans">
+            Till yo tummy is full...
+          </span>
         </motion.div>
 
         {/* Login Container */}

frontend/src/components/Sidebar.tsx

@@ -194,8 +194,11 @@ const Sidebar = () => {
   return (
     <div className="w-64 bg-white h-screen border-r border-[#e2e8f0] flex flex-col fixed left-0 top-0 z-50 shadow-sm overflow-hidden font-inter">
       {/* Branding Section */}
-      <div className="px-5 pt-8 pb-4 flex justify-center items-center w-full">
+      <div className="px-5 pt-8 pb-4 flex flex-col justify-center items-center w-full">
         <img src={collegeLogo} alt="Branding" className="h-14 w-auto object-contain brightness-[1.05]" />
+        <span className="text-[10px] font-semibold text-slate-400 mt-1 italic tracking-wide font-sans">
+          Till yo tummy is full...
+        </span>
       </div>
       {/* Premium Search Integration (Modern Dashboards usually have this) */}
       <div className="px-3 mb-4">

frontend/src/pages/Login.tsx

@@ -13,7 +13,8 @@ import { useNavigate } from 'react-router-dom';
 
 // Import Assets
 import collegeLogo from '../assets/college-logo.png';
-import buildingPhoto from '../assets/ritchennai.webp';
+import foodCourtPosBg from '../assets/food-court-pos.png';
+import ritLogo from '../assets/RIT_Logo.png';
 
 const Login = () => {
   const [role, setRole] = useState<'manager' | 'master'>('manager');
@@ -68,46 +69,58 @@ const Login = () => {
   };
 
   return (
-    <div className="min-h-screen bg-[#f8fafc] flex flex-col md:flex-row overflow-hidden font-inter">
+    <div
-      {/* Left Section: Login Form */}
+      className="min-h-screen flex flex-col gap-6 items-center justify-center p-4 md:p-8 bg-cover bg-center bg-no-repeat relative font-inter overflow-hidden"
-      <div className="w-full md:w-[45%] lg:w-[40%] flex flex-col p-8 md:p-12 lg:p-16 relative z-10 bg-white shadow-2xl">
+      style={{ backgroundImage: `url(${foodCourtPosBg})` }}
-        {/* Top Logo */}
+    >
+      {/* Subtle light overlay to match the clean aesthetic and improve card contrast */}
+      <div className="absolute inset-0 bg-white/20 backdrop-blur-[1px] z-0"></div>
+
+      {/* Login Card */}
+      <motion.div
+        initial={{ opacity: 0, scale: 0.95, y: 20 }}
+        animate={{ opacity: 1, scale: 1, y: 0 }}
+        transition={{ duration: 0.6, ease: "easeOut" }}
+        className="w-full max-w-md bg-white/90 backdrop-blur-md border border-white/20 rounded-3xl p-6 md:p-10 shadow-2xl flex flex-col relative z-10"
+      >
+        {/* Top Logo - Centered */}
         <motion.div
           initial={{ opacity: 0, y: -20 }}
           animate={{ opacity: 1, y: 0 }}
-          className="mb-16"
+          transition={{ delay: 0.2 }}
+          className="flex flex-col items-center justify-center mb-8"
         >
-          <img src={collegeLogo} alt="College Logo" className="h-16 md:h-20 object-contain" />
+          <img src={collegeLogo} alt="College Logo" className="h-16 md:h-20 object-contain filter drop-shadow-sm" />
+          <span className="text-xs font-semibold text-[#001828]/60 mt-2.5 italic tracking-wide font-sans">
+            Till yo tummy is full...
+          </span>
         </motion.div>
 
         {/* Login Container */}
-        <motion.div
+        <div className="w-full">
-          initial={{ opacity: 0, x: -30 }}
+          <div className="text-center mb-8">
-          animate={{ opacity: 1, x: 0 }}
+            <h2 className="text-xs font-black tracking-[0.2em] text-[#001828] uppercase mb-2">
-          transition={{ delay: 0.2 }}
-          className="flex-1 flex flex-col justify-center max-w-sm mx-auto w-full"
-        >
-          <div className="text-center mb-10">
-            <h2 className="text-[10px] font-black tracking-[0.3em] text-[#1e293b] uppercase mb-2">
               Canteen Management System
             </h2>
             <div className="w-12 h-1 bg-[#001828] mx-auto rounded-full"></div>
           </div>
 
           {/* Role Toggle */}
-          <div className="bg-[#f1f5f9] p-1.5 rounded-2xl flex gap-1 mb-8 relative">
+          <div className="bg-slate-100/80 p-1 rounded-2xl flex gap-1 mb-6 relative">
             <motion.div
-              className="absolute h-[calc(100%-12px)] top-1.5 bg-white rounded-xl shadow-sm z-0"
+              className="absolute h-[calc(100%-8px)] top-1 bg-white rounded-xl shadow-sm z-0"
               initial={false}
               animate={{
-                left: role === 'manager' ? '6px' : '50%',
+                left: role === 'manager' ? '4px' : '50%',
-                width: 'calc(50% - 9px)'
+                width: 'calc(50% - 6px)'
               }}
               transition={{ type: "spring", stiffness: 300, damping: 30 }}
             />
             <button
               onClick={() => setRole('manager')}
-              className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl text-xs font-bold transition-all relative z-10 ${role === 'manager' ? 'text-[#001828]' : 'text-[#94a3b8] hover:text-[#64748b]'
+              type="button"
+              className={`flex-1 flex items-center justify-center gap-2 py-2.5 rounded-xl text-xs font-bold transition-all relative z-10 ${
+                role === 'manager' ? 'text-[#001828]' : 'text-[#94a3b8] hover:text-[#64748b]'
               }`}
             >
               <UserCircle2 size={16} />
@@ -115,7 +128,9 @@ const Login = () => {
             </button>
             <button
               onClick={() => setRole('master')}
-              className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl text-xs font-bold transition-all relative z-10 ${role === 'master' ? 'text-[#001828]' : 'text-[#94a3b8] hover:text-[#64748b]'
+              type="button"
+              className={`flex-1 flex items-center justify-center gap-2 py-2.5 rounded-xl text-xs font-bold transition-all relative z-10 ${
+                role === 'master' ? 'text-[#001828]' : 'text-[#94a3b8] hover:text-[#64748b]'
               }`}
             >
               <ShieldCheck size={16} />
@@ -124,9 +139,9 @@ const Login = () => {
           </div>
 
           {/* Form */}
-          <form onSubmit={handleLogin} className="space-y-6">
+          <form onSubmit={handleLogin} className="space-y-5">
-            <div className="space-y-2">
+            <div className="space-y-1.5">
-              <label className="text-[10px] font-black text-[#94a3b8] uppercase tracking-widest pl-1">
+              <label className="text-[10px] font-black text-[#64748b] uppercase tracking-widest pl-1">
                 Secure User ID
               </label>
               <div className="relative group">
@@ -138,14 +153,14 @@ const Login = () => {
                   value={username}
                   onChange={(e) => setUsername(e.target.value)}
                   placeholder="Username"
-                  className="w-full bg-white border-2 border-[#e2e8f0] focus:border-[#001828] rounded-2xl py-4 pl-12 pr-4 text-sm font-semibold outline-none transition-all placeholder:text-[#cbd5e1]"
+                  className="w-full bg-white/85 border-2 border-slate-200 focus:border-[#001828] focus:bg-white rounded-2xl py-3.5 pl-12 pr-4 text-sm font-semibold outline-none transition-all placeholder:text-[#cbd5e1]"
                 />
               </div>
             </div>
 
-            <div className="space-y-2">
+            <div className="space-y-1.5">
               <div className="flex justify-between items-center pl-1">
-                <label className="text-[10px] font-black text-[#94a3b8] uppercase tracking-widest">
+                <label className="text-[10px] font-black text-[#64748b] uppercase tracking-widest">
                   Passcode
                 </label>
                 <button type="button" className="text-[10px] font-black text-[#001828] uppercase hover:underline">
@@ -161,7 +176,7 @@ const Login = () => {
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
                   placeholder="••••••••"
-                  className="w-full bg-white border-2 border-[#e2e8f0] focus:border-[#001828] rounded-2xl py-4 pl-12 pr-12 text-sm font-semibold outline-none transition-all placeholder:text-[#cbd5e1]"
+                  className="w-full bg-white/85 border-2 border-slate-200 focus:border-[#001828] focus:bg-white rounded-2xl py-3.5 pl-12 pr-12 text-sm font-semibold outline-none transition-all placeholder:text-[#cbd5e1]"
                 />
                 <button
                   type="button"
@@ -175,7 +190,7 @@ const Login = () => {
 
             <button
               type="submit"
-              className="w-full bg-[#001828] text-white rounded-2xl py-4 font-black text-sm flex items-center justify-center gap-3 shadow-xl shadow-[#001828]/20 hover:scale-[1.02] active:scale-[0.98] transition-all overflow-hidden group relative"
+              className="w-full bg-[#001828] text-white rounded-2xl py-3.5 font-black text-sm flex items-center justify-center gap-3 shadow-xl shadow-[#001828]/20 hover:scale-[1.02] active:scale-[0.98] transition-all overflow-hidden group relative mt-2"
             >
               <span className="relative z-10">CONNECT TO PORTAL</span>
               <ArrowRight size={18} className="relative z-10 group-hover:translate-x-1 transition-transform" />
@@ -187,42 +202,29 @@ const Login = () => {
               />
             </button>
           </form>
-        </motion.div>
+        </div>
 
         {/* Footer */}
-        <div className="mt-auto text-center">
+        <div className="mt-8 text-center">
-          <p className="text-[10px] font-black text-[#cbd5e1] uppercase tracking-[0.2em]">
+          <p className="text-[10px] font-black text-[#94a3b8] uppercase tracking-[0.2em]">
             © 2026 TILLO • SYSTEM PORTAL
           </p>
         </div>
-      </div>
-
-      {/* Right Section: Visual */}
-      <div className="hidden md:flex flex-1 relative bg-[#f8fafc] items-center justify-center p-8 overflow-hidden">
-
-        {/* Decorative Circles */}
-        <div className="absolute top-20 right-20 w-64 h-64 bg-[#001828]/5 rounded-full blur-3xl"></div>
-        <div className="absolute bottom-20 left-40 w-96 h-96 bg-[#001828]/5 rounded-full blur-3xl"></div>
-
-        {/* Image Container with Custom Shape (using clip-path or rounded corners) */}
-        <motion.div
-          initial={{ opacity: 0, scale: 0.95, x: 50 }}
-          animate={{ opacity: 1, scale: 1, x: 0 }}
-          transition={{ duration: 0.8 }}
-          className="w-full h-full relative z-10"
-        >
-          <div className="w-full h-full overflow-hidden shadow-2xl border-[12px] border-white bg-white">
-            <img
-              src={buildingPhoto}
-              alt="Tillo Building"
-              className="w-full h-full object-cover"
-            />
-            {/* Overlay Gradient */}
-            <div className="absolute inset-0 bg-gradient-to-tr from-[#001828]/20 to-transparent"></div>
-          </div>
-
       </motion.div>
+
+      {/* Merchant Section Card */}
+      <motion.div
+        initial={{ opacity: 0, y: 15 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6, delay: 0.3 }}
+        className="w-full max-w-md bg-white/80 backdrop-blur-md border border-white/20 rounded-2xl p-4 shadow-lg flex items-center justify-between gap-4 relative z-10"
+      >
+        <div className="flex flex-col">
+          <span className="text-[9px] font-black text-slate-400 uppercase tracking-widest">Merchant Partner</span>
+          <span className="text-xs font-bold text-[#001828] mt-0.5">Rajalakshmi Institute of Technology</span>
         </div>
+        <img src={ritLogo} alt="RIT Logo" className="h-12 w-auto object-contain filter drop-shadow-sm" />
+      </motion.div>
     </div>
   );
 };

generate_report.py

@@ -0,0 +1,110 @@
+from fpdf import FPDF
+
+class DeploymentReport(FPDF):
+    def header(self):
+        self.set_fill_color(20, 40, 80)  # Navy Blue
+        self.rect(0, 0, 210, 40, 'F')
+        self.set_text_color(255, 255, 255)
+        self.set_font('Arial', 'B', 16)
+        self.cell(0, 20, 'Deployment Analysis Report', ln=True, align='C')
+        self.set_font('Arial', '', 12)
+        self.cell(0, 10, 'Positeasy Clone - Canteen Automation Ecosystem', ln=True, align='C')
+        self.ln(20)
+
+    def footer(self):
+        self.set_y(-15)
+        self.set_font('Arial', 'I', 8)
+        self.set_text_color(128, 128, 128)
+        self.cell(0, 10, f'Page {self.page_no()} | Generated by Claude Code', align='C')
+
+    def section_title(self, title):
+        self.ln(5)
+        self.set_font('Arial', 'B', 14)
+        self.set_text_color(20, 40, 80)
+        self.cell(0, 10, title, ln=True)
+        self.ln(2)
+        self.set_draw_color(20, 40, 80)
+        self.line(self.get_x(), self.get_y(), self.get_x() + 190, self.get_y())
+        self.ln(5)
+
+    def section_body(self, text):
+        self.set_font('Arial', '', 11)
+        self.set_text_color(0, 0, 0)
+        self.multi_cell(0, 7, text)
+        self.ln(3)
+
+    def create_table(self, header, data):
+        self.ln(5)
+        self.set_font('Arial', 'B', 10)
+        self.set_fill_color(230, 230, 230)
+
+        col_width = 190 / len(header)
+        for i, h in enumerate(header):
+            self.cell(col_width, 10, h, 1, 0, 'C', fill=True)
+        self.ln()
+
+        self.set_font('Arial', '', 9)
+        for row in data:
+            for item in row:
+                self.cell(col_width, 10, str(item), 1)
+            self.ln()
+        self.ln(5)
+
+pdf = DeploymentReport()
+pdf.add_page()
+
+# Section 1: Infrastructure Analysis
+pdf.section_title("1. Infrastructure Analysis & Resource Requirements")
+infra_text = (
+    "The system follows a Hub-and-Spoke architecture with a central Java backend and three React frontends.\n\n"
+    "Backend (Java 17 / Spring Boot):\n"
+    "- CPU: 4 vCPUs recommended for high-concurrency request processing.\n"
+    "- RAM: 8GB RAM is the critical baseline to avoid Out-Of-Memory (OOM) crashes during peak hours.\n\n"
+    "Database (PostgreSQL):\n"
+    "- High-performance NVMe SSD is essential to prevent I/O bottlenecks, especially during daily archival tasks.\n"
+    "- Recommended: 2 vCPUs / 4GB RAM.\n\n"
+    "Frontends (React/Vite):\n"
+    "- Purely static assets; should be served via a Global CDN for low latency."
+)
+pdf.section_body(infra_text)
+
+# Section 2: Deployment Options
+pdf.section_title("2. Deployment Options")
+
+pdf.set_font('Arial', 'B', 12)
+pdf.cell(0, 10, "Option A: The Managed Powerhouse (GCP/AWS)", ln=True)
+pdf.section_body("Best for Enterprise reliability and automatic scaling. Use Cloud Run/Fargate for Backend, Managed SQL for DB, and S3/CloudFront for Frontends. Pros: Highest reliability. Cons: Highest cost.")
+
+pdf.set_font('Arial', 'B', 12)
+pdf.cell(0, 10, "Option B: The Developer's Balance (DigitalOcean/Railway)", ln=True)
+pdf.section_body("Recommended. Best balance of cost, ease of use, and stability. Use Premium Droplets (4vCPU/8GB) and Managed PostgreSQL. Frontends on Vercel/Netlify. Pros: Predictable pricing, fast setup.")
+
+pdf.set_font('Arial', 'B', 12)
+pdf.cell(0, 10, "Option C: The Budget Optimizer (Hetzner/OVH)", ln=True)
+pdf.section_body("Best for minimum cost. Single powerful VPS hosting both API and DB via Docker Compose. Frontends on Cloudflare Pages. Pros: Lowest cost. Cons: High maintenance burden.")
+
+# Section 3: Comparison Matrix
+pdf.section_title("3. Comparison Matrix")
+header = ["Dimension", "Option A", "Option B", "Option C"]
+data = [
+    ["Monthly Cost", "High (~$150+)", "Medium (~$60-90)", "Low (~$20-40)"],
+    ["Setup Effort", "Medium", "Low", "High"],
+    ["Scalability", "Automatic", "Manual/Vertical", "Manual/Vertical"],
+    ["Reliability", "99.99%", "99.9%", "Moderate"],
+    ["Maintenance", "Near Zero", "Low", "High"]
+]
+pdf.create_table(header, data)
+
+# Section 4: Operational Strategy
+pdf.section_title("4. Operational Strategy")
+ops_text = (
+    "CI/CD Flow: GitHub Actions -> Maven/Vite Build -> Docker Image -> Rolling Update.\n\n"
+    "Security:\n"
+    "- Secret Management: Use environment variable managers; never commit .env files.\n"
+    "- CORS Strategy: Set APP_CORS_ORIGINS to allow only the three specific production frontend domains.\n"
+    "- Backups: Automated daily snapshots via managed database providers.\n\n"
+    "Monitoring: Implement Spring Boot Actuator to monitor JVM heap and thread counts in real-time."
+)
+pdf.section_body(ops_text)
+
+pdf.output("Deployment_Report_Positeasy.pdf")

ordering_site/src/components/Header.css

@@ -32,8 +32,14 @@
   flex-shrink: 0;
 }
 
+.header-logo-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
 .header-logo {
-  height: 38px;
+  height: 44px;
   width: auto;
   object-fit: contain;
   cursor: pointer;
@@ -44,6 +50,16 @@
   opacity: 0.8;
 }
 
+.header-tagline {
+  font-size: 8px;
+  font-weight: 700;
+  color: var(--primary);
+  margin-top: 1px;
+  font-style: italic;
+  letter-spacing: 0.2px;
+  line-height: 1;
+}
+
 .header-title {
   font-size: 1.1rem;
   font-weight: 700;

ordering_site/src/components/Header.tsx

@@ -31,12 +31,15 @@ const Header: React.FC<HeaderProps> = ({ title, onBack, showCart = true }) => {
         {title && title !== "Tillo Canteen" ? (
           <h1 className="header-title">{title}</h1>
         ) : (
+          <div className="header-logo-container">
             <img 
               src={ritLogo} 
               alt="RIT Logo" 
               className="header-logo" 
               onClick={() => navigate('/')} 
             />
+            <span className="header-tagline">Till yo tummy is full...</span>
+          </div>
         )}
       </div>
 

ordering_site/src/pages/LoginScreen.css

@@ -62,6 +62,15 @@
   filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
 }
 
+.login-tagline {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--primary);
+  margin-top: 8px;
+  font-style: italic;
+  letter-spacing: 0.3px;
+}
+
 .login-header {
   position: relative;
   text-align: center;

ordering_site/src/pages/LoginScreen.tsx

@@ -90,8 +90,9 @@ const LoginScreen: React.FC = () => {
 
       <div className="login-content">
         <div className="login-card animate-slideUp">
-          <div className="login-header-logo">
+          <div className="login-header-logo flex flex-col items-center justify-center">
             <img src={ritLogo} alt="RIT Logo" className="rit-logo" />
+            <span className="login-tagline">Till yo tummy is full...</span>
           </div>
 
           <div className="login-header">