@apptimate/ui 6.8.0 → 7.0.0

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@apptimate/ui",
-  "version": "6.8.0",
+  "version": "7.0.0",
   "main": "src/index.tsx",
   "types": "src/index.tsx",
   "dependencies": {
     "@apptimate/core-lib": "*",
+    "ably": "^2.27.0",
     "apexcharts": "^5.15.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

package/src/base-components/ImageDropzone.tsx

@@ -1,80 +1,80 @@
-"use client";
-
-import React, { useRef } from "react";
-import { Upload } from "lucide-react";
-
-export interface ImageDropzoneProps {
-  onDrop: (files: File[]) => void;
-  maxSizeMB?: number;
-  maxFiles?: number;
-  accept?: string;
-  className?: string;
-  title?: string;
-  subtitle?: string;
-  isLoading?: boolean;
-}
-
-export function ImageDropzone({
-  onDrop,
-  maxSizeMB = 5,
-  maxFiles = 10,
-  accept = "image/*",
-  className = "",
-  title = "Drop images here or click to upload",
-  subtitle = "JPEG, PNG, WebP — max 5MB each, up to 10 images",
-  isLoading = false,
-}: ImageDropzoneProps) {
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  const handleFileDrop = (e: React.DragEvent) => {
-    e.preventDefault();
-    if (isLoading) return;
-    const files = Array.from(e.dataTransfer.files).filter((f) => f.type.startsWith("image/"));
-    if (files.length) {
-      onDrop(files.slice(0, maxFiles));
-    }
-  };
-
-  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (isLoading) return;
-    const files = Array.from(e.target.files || []);
-    if (files.length) {
-      onDrop(files.slice(0, maxFiles));
-    }
-    if (fileInputRef.current) {
-      fileInputRef.current.value = "";
-    }
-  };
-
-  return (
-    <div
-      onDragOver={(e) => e.preventDefault()}
-      onDrop={handleFileDrop}
-      onClick={() => fileInputRef.current?.click()}
-      className={`border-2 border-dashed border-gray-200 hover:border-primary-300 rounded-xl p-6 flex flex-col items-center justify-center cursor-pointer transition-all hover:bg-primary-50/30 group ${
-        isLoading ? "opacity-50 cursor-not-allowed" : ""
-      } ${className}`}
-    >
-      <div className="w-10 h-10 rounded-full bg-gray-100 group-hover:bg-primary-100 flex items-center justify-center mb-2 transition-colors">
-        {isLoading ? (
-          <div className="w-5 h-5 rounded-full border-2 border-gray-200 border-t-primary-500 animate-spin" />
-        ) : (
-          <Upload size={18} className="text-gray-400 group-hover:text-primary-500" />
-        )}
-      </div>
-      <p className="text-[13px] font-medium text-gray-500 group-hover:text-primary-600">
-        {isLoading ? "Uploading..." : title}
-      </p>
-      <p className="text-[11px] text-gray-400 mt-0.5">{subtitle}</p>
-      <input
-        ref={fileInputRef}
-        type="file"
-        accept={accept}
-        multiple={maxFiles > 1}
-        className="hidden"
-        onChange={handleFileSelect}
-        disabled={isLoading}
-      />
-    </div>
-  );
-}
+"use client";
+
+import React, { useRef } from "react";
+import { Upload } from "lucide-react";
+
+export interface ImageDropzoneProps {
+  onDrop: (files: File[]) => void;
+  maxSizeMB?: number;
+  maxFiles?: number;
+  accept?: string;
+  className?: string;
+  title?: string;
+  subtitle?: string;
+  isLoading?: boolean;
+}
+
+export function ImageDropzone({
+  onDrop,
+  maxSizeMB = 5,
+  maxFiles = 10,
+  accept = "image/*",
+  className = "",
+  title = "Drop images here or click to upload",
+  subtitle = "JPEG, PNG, WebP — max 5MB each, up to 10 images",
+  isLoading = false,
+}: ImageDropzoneProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    if (isLoading) return;
+    const files = Array.from(e.dataTransfer.files).filter((f) => f.type.startsWith("image/"));
+    if (files.length) {
+      onDrop(files.slice(0, maxFiles));
+    }
+  };
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (isLoading) return;
+    const files = Array.from(e.target.files || []);
+    if (files.length) {
+      onDrop(files.slice(0, maxFiles));
+    }
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  return (
+    <div
+      onDragOver={(e) => e.preventDefault()}
+      onDrop={handleFileDrop}
+      onClick={() => fileInputRef.current?.click()}
+      className={`border-2 border-dashed border-gray-200 hover:border-primary-300 rounded-xl p-6 flex flex-col items-center justify-center cursor-pointer transition-all hover:bg-primary-50/30 group ${
+        isLoading ? "opacity-50 cursor-not-allowed" : ""
+      } ${className}`}
+    >
+      <div className="w-10 h-10 rounded-full bg-gray-100 group-hover:bg-primary-100 flex items-center justify-center mb-2 transition-colors">
+        {isLoading ? (
+          <div className="w-5 h-5 rounded-full border-2 border-gray-200 border-t-primary-500 animate-spin" />
+        ) : (
+          <Upload size={18} className="text-gray-400 group-hover:text-primary-500" />
+        )}
+      </div>
+      <p className="text-[13px] font-medium text-gray-500 group-hover:text-primary-600">
+        {isLoading ? "Uploading..." : title}
+      </p>
+      <p className="text-[11px] text-gray-400 mt-0.5">{subtitle}</p>
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept={accept}
+        multiple={maxFiles > 1}
+        className="hidden"
+        onChange={handleFileSelect}
+        disabled={isLoading}
+      />
+    </div>
+  );
+}

package/src/common-components/DashboardLayout.tsx

@@ -7,6 +7,7 @@ import { Dropdown, DropdownItem } from '../base-components/Dropdown';
 import Link from 'next/link';
 import { usePathname, useRouter } from 'next/navigation';
 import { cn, getProjectConstructionGroups } from '@apptimate/core-lib';
+import { NotificationsPopover } from './NotificationsPopover';
 
 export type DashboardMenuConfig = {
   id: string;
@@ -285,7 +286,8 @@ export function DashboardLayout({
           })}
         </nav>
 
-        <div className="mt-auto flex flex-col items-center">
+        <div className="mt-auto flex flex-col items-center gap-4">
+          <NotificationsPopover user={user as any} />
           <Dropdown
             align="left"
             valign="top"
@@ -335,7 +337,7 @@ export function DashboardLayout({
                     <h3 className="px-2 text-xs font-bold text-gray-400 uppercase tracking-wider mb-2 empty:hidden">{group.label}</h3>
                   )}
                   <nav className="flex flex-col gap-1">
-                    {group.items.map((item) => {
+                    {group.items.map((item: any) => {
                       // Find the longest matching path in this group to avoid parent paths being active
                       const allGroupItems = activeMenu.groups.flatMap(g => g.items);
                       const matchingItems = allGroupItems.filter(i => fullPath === i.path || fullPath.startsWith(`${i.path}/`));
@@ -495,7 +497,7 @@ export function DashboardLayout({
                           <span className="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1 px-3">
                             {group.label}
                           </span>
-                          {group.items.map(item => {
+                          {group.items.map((item: any) => {
                             const allMenuItems = menu.groups.flatMap(g => g.items);
                             const matchingItems = allMenuItems.filter(i => fullPath === i.path || fullPath.startsWith(`${i.path}/`));
                             const longestMatch = matchingItems.sort((a, b) => b.path.length - a.path.length)[0];

package/src/common-components/NotificationsModal.tsx

@@ -0,0 +1,173 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+import { Modal } from '../base-components/Modal';
+import { Pagination } from '../base-components/Pagination';
+import { sendRequest, IApiResponse, cn } from '@apptimate/core-lib';
+import { Bell, Check, Search } from 'lucide-react';
+import { NotificationItem } from './NotificationsPopover';
+import toast from 'react-hot-toast';
+import { Input } from '../base-components/Input';
+
+interface NotificationsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function NotificationsModal({ isOpen, onClose }: NotificationsModalProps) {
+  const [notifications, setNotifications] = useState<NotificationItem[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalItems, setTotalItems] = useState(0);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [debouncedSearch, setDebouncedSearch] = useState("");
+  const itemsPerPage = 10;
+
+  // Debounce search
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearch(searchQuery);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, [searchQuery]);
+
+  // Reset to page 1 on new search
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [debouncedSearch]);
+
+  const fetchNotifications = async (page: number, search: string) => {
+    setIsLoading(true);
+    try {
+      const response = await sendRequest({ 
+        url: `${process.env.NEXT_PUBLIC_API_URL}/api/notifications?page=${page}&per_page=${itemsPerPage}&search=${encodeURIComponent(search)}`, 
+        method: 'GET' 
+      });
+      const resData = response.responseData as IApiResponse;
+      if (resData.is_success && resData.result) {
+        setNotifications(resData.result.data || []);
+        setTotalItems(resData.result.meta?.total || 0);
+      }
+    } catch (e) {
+      console.error("Failed to fetch notifications", e);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      fetchNotifications(currentPage, debouncedSearch);
+    }
+  }, [isOpen, currentPage, debouncedSearch]);
+
+  const markAsRead = async (id: string) => {
+    setNotifications(prev => prev.map(n => n.id === id ? { ...n, read_at: new Date().toISOString() } : n));
+    try {
+      await sendRequest({ url: `${process.env.NEXT_PUBLIC_API_URL}/api/notifications/${id}/read`, method: 'PATCH' });
+    } catch (e) {
+      console.error("Failed to mark notification as read", e);
+    }
+  };
+
+  const markAllAsRead = async () => {
+    setNotifications(prev => prev.map(n => ({ ...n, read_at: new Date().toISOString() })));
+    try {
+      await sendRequest({ url: `${process.env.NEXT_PUBLIC_API_URL}/api/notifications/read-all`, method: 'POST' });
+      toast.success("All notifications marked as read");
+    } catch (e) {
+      console.error("Failed to mark all as read", e);
+      toast.error("Failed to mark all as read");
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title="All Notifications"
+      size="md"
+      className="max-h-[85vh] flex flex-col"
+    >
+      <div className="px-4 py-3 border-b border-gray-100 bg-gray-50/30">
+        <Input 
+          placeholder="Search notifications..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          icon={<Search size={16} className="text-gray-400" />}
+          className="bg-white"
+        />
+      </div>
+      <div className="flex-1 overflow-y-auto px-4 py-2 min-h-[300px]">
+        {isLoading && notifications.length === 0 ? (
+          <div className="flex justify-center items-center py-8 text-sm text-gray-400">Loading notifications...</div>
+        ) : notifications.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-16 px-4 text-center">
+            <div className="w-12 h-12 bg-gray-50 rounded-full flex items-center justify-center mb-3">
+              <Bell className="text-gray-300" size={24} />
+            </div>
+            <p className="text-sm font-medium text-gray-800">No notifications yet</p>
+            <p className="text-xs text-gray-500 mt-1">When you get notifications, they'll show up here</p>
+          </div>
+        ) : (
+          <div className="divide-y divide-gray-50 border border-gray-100 rounded-lg overflow-hidden">
+            {notifications.map((notif) => (
+              <div
+                key={notif.id}
+                className={cn(
+                  "p-4 transition-colors group flex items-start gap-3",
+                  !notif.read_at ? "bg-primary-50/30" : "bg-white hover:bg-gray-50/50"
+                )}
+              >
+                <div className={cn(
+                  "w-10 h-10 rounded-full flex items-center justify-center shrink-0 mt-0.5",
+                  notif.data.type === 'finance_alert' ? "bg-warning-100 text-warning-600" : "bg-primary-100 text-primary-600"
+                )}>
+                  <Bell size={16} />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="flex justify-between items-start mb-1">
+                    <p className={cn("text-[14px] font-semibold pr-2", !notif.read_at ? "text-gray-900" : "text-gray-700")}>
+                      {notif.data.title || 'Notification'}
+                    </p>
+                    <span className="text-[11px] font-medium text-gray-400 shrink-0 whitespace-nowrap">
+                      {new Date(notif.created_at).toLocaleString()}
+                    </span>
+                  </div>
+                  <p className="text-[13px] text-gray-500 leading-relaxed">
+                    {notif.data.message || ''}
+                  </p>
+                </div>
+                {!notif.read_at && (
+                  <button
+                    onClick={() => markAsRead(notif.id)}
+                    className="p-1.5 rounded-md hover:bg-gray-200 text-gray-400 hover:text-gray-600 ml-1 shrink-0"
+                    title="Mark as read"
+                  >
+                    <Check size={16} />
+                  </button>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <div className="border-t border-gray-100 px-4 py-3 bg-gray-50 flex items-center justify-between">
+        <button 
+          onClick={markAllAsRead}
+          disabled={notifications.length === 0}
+          className="text-sm font-medium text-primary-600 hover:text-primary-700 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          Mark all as read
+        </button>
+        <Pagination
+          currentPage={currentPage}
+          totalItems={totalItems}
+          itemsPerPage={itemsPerPage}
+          onPageChange={setCurrentPage}
+        />
+      </div>
+    </Modal>
+  );
+}

package/src/common-components/NotificationsPopover.tsx

@@ -0,0 +1,224 @@
+"use client";
+
+import React, { useState, useEffect, useRef } from 'react';
+import { Bell, Check, X } from 'lucide-react';
+import * as Ably from 'ably';
+import { cn, sendRequest, IApiResponse } from '@apptimate/core-lib';
+import toast from 'react-hot-toast';
+import { NotificationsModal } from './NotificationsModal';
+
+export interface NotificationItem {
+  id: string;
+  type: string;
+  data: any;
+  read_at: string | null;
+  created_at: string;
+}
+
+export function NotificationsPopover({ user }: { user?: { id?: number } }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [notifications, setNotifications] = useState<NotificationItem[]>([]);
+  const [unreadCount, setUnreadCount] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const ablyApiKey = process.env.NEXT_PUBLIC_ABLY_API_KEY;
+
+  // Close on outside click
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  // Fetch initial notifications
+  const fetchNotifications = async () => {
+    setIsLoading(true);
+    try {
+      const response = await sendRequest({ url: `${process.env.NEXT_PUBLIC_API_URL}/api/notifications?per_page=50`, method: 'GET' });
+      const resData = response.responseData as IApiResponse;
+      if (resData.is_success && resData.result) {
+        setNotifications(resData.result.data || []);
+        setUnreadCount(resData.result.unread_count || 0);
+      }
+    } catch (e) {
+      console.error("Failed to fetch notifications", e);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (user?.id) {
+      fetchNotifications();
+    }
+  }, [user?.id]);
+
+  // Ably Realtime integration
+  useEffect(() => {
+    if (!user?.id || !ablyApiKey) return;
+
+    const ably = new Ably.Realtime({ key: ablyApiKey });
+    const channelName = `private:App.Models.User.${user.id}`;
+    const channel = ably.channels.get(channelName);
+
+    channel.subscribe((message) => {
+      // The event name from Laravel is usually the class name of the notification
+      const data = message.data;
+
+      const newNotification: NotificationItem = {
+        id: data.id || Math.random().toString(),
+        type: message.name || 'Notification',
+        data: data,
+        read_at: null,
+        created_at: new Date().toISOString()
+      };
+
+      setNotifications(prev => [newNotification, ...prev]);
+      setUnreadCount(prev => prev + 1);
+    });
+
+    return () => {
+      channel.unsubscribe();
+      ably.close();
+    };
+  }, [user?.id, ablyApiKey]);
+
+  const markAsRead = async (id: string) => {
+    setNotifications(prev => prev.map(n => n.id === id ? { ...n, read_at: new Date().toISOString() } : n));
+    setUnreadCount(prev => Math.max(0, prev - 1));
+    try {
+      await sendRequest({ url: `${process.env.NEXT_PUBLIC_API_URL}/api/notifications/${id}/read`, method: 'PATCH' });
+    } catch (e) {
+      console.error("Failed to mark notification as read", e);
+    }
+  };
+
+  const markAllAsRead = async () => {
+    setNotifications(prev => prev.map(n => ({ ...n, read_at: new Date().toISOString() })));
+    setUnreadCount(0);
+    try {
+      await sendRequest({ url: `${process.env.NEXT_PUBLIC_API_URL}/api/notifications/read-all`, method: 'POST' });
+    } catch (e) {
+      console.error("Failed to mark all as read", e);
+    }
+  };
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="relative w-10 h-10 rounded-full flex items-center justify-center text-gray-500 hover:bg-gray-100 hover:text-gray-900 transition-all focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1"
+      >
+        <Bell size={20} />
+        {unreadCount > 0 && (
+          <span className="absolute top-2 right-2.5 flex h-2 w-2">
+            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
+            <span className="relative inline-flex rounded-full h-2 w-2 bg-red-500 ring-2 ring-white"></span>
+          </span>
+        )}
+      </button>
+
+      {isOpen && (
+        <div className="absolute left-full bottom-0 ml-4 mb-2 w-80 sm:w-96 bg-white rounded-2xl shadow-xl shadow-gray-200/50 border border-gray-100 z-[100] overflow-hidden">
+          <div className="flex items-center justify-between px-4 py-3 border-b border-gray-50 bg-gray-50/50">
+            <div className="flex items-center gap-2">
+              <h3 className="font-bold text-[14px] text-gray-800 tracking-tight">Notifications</h3>
+              {unreadCount > 0 && (
+                <span className="bg-primary-100 text-primary-700 text-[10px] font-bold px-2 py-0.5 rounded-full">
+                  {unreadCount} New
+                </span>
+              )}
+            </div>
+            {unreadCount > 0 && (
+              <button
+                onClick={markAllAsRead}
+                className="text-[11px] font-medium text-primary-600 hover:text-primary-700 hover:bg-primary-50 px-2 py-1 rounded-md transition-colors"
+              >
+                Mark all read
+              </button>
+            )}
+          </div>
+
+          <div className="max-h-[400px] overflow-y-auto">
+            {isLoading && notifications.length === 0 ? (
+              <div className="flex justify-center items-center py-8 text-sm text-gray-400">Loading...</div>
+            ) : notifications.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-10 px-4 text-center">
+                <div className="w-12 h-12 bg-gray-50 rounded-full flex items-center justify-center mb-3">
+                  <Bell className="text-gray-300" size={24} />
+                </div>
+                <p className="text-sm font-medium text-gray-800">No notifications yet</p>
+                <p className="text-xs text-gray-500 mt-1">When you get notifications, they'll show up here</p>
+              </div>
+            ) : (
+              <div className="divide-y divide-gray-50">
+                {notifications.map((notif) => (
+                  <div
+                    key={notif.id}
+                    className={cn(
+                      "p-4 transition-colors hover:bg-gray-50/80 group cursor-default flex items-start gap-3",
+                      !notif.read_at ? "bg-primary-50/30" : "bg-white"
+                    )}
+                  >
+                    <div className={cn(
+                      "w-8 h-8 rounded-full flex items-center justify-center shrink-0 mt-0.5",
+                      notif.data.type === 'finance_alert' ? "bg-warning-100 text-warning-600" : "bg-primary-100 text-primary-600"
+                    )}>
+                      <Bell size={14} />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <div className="flex justify-between items-start mb-1">
+                        <p className={cn("text-[13px] font-semibold truncate pr-2", !notif.read_at ? "text-gray-900" : "text-gray-700")}>
+                          {notif.data.title || 'Notification'}
+                        </p>
+                        <span className="text-[10px] font-medium text-gray-400 shrink-0 whitespace-nowrap">
+                          {new Date(notif.created_at).toLocaleDateString()}
+                        </span>
+                      </div>
+                      <p className="text-[12px] text-gray-500 leading-relaxed">
+                        {notif.data.message || ''}
+                      </p>
+                    </div>
+                    {!notif.read_at && (
+                      <button
+                        onClick={() => markAsRead(notif.id)}
+                        className="opacity-0 group-hover:opacity-100 transition-opacity p-1.5 rounded-md hover:bg-gray-200 text-gray-400 hover:text-gray-600 ml-1 shrink-0"
+                        title="Mark as read"
+                      >
+                        <Check size={14} />
+                      </button>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+          {notifications.length > 0 && (
+            <div className="p-3 border-t border-gray-50 bg-gray-50/50 text-center">
+              <button 
+                onClick={() => {
+                  setIsOpen(false);
+                  setIsModalOpen(true);
+                }}
+                className="text-[12px] font-semibold text-gray-500 hover:text-gray-800 transition-colors"
+              >
+                View all notifications
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+      
+      <NotificationsModal 
+        isOpen={isModalOpen} 
+        onClose={() => setIsModalOpen(false)} 
+      />
+    </div>
+  );
+}

package/src/common-components/attendance-shifts/BulkAttendanceModal.tsx

@@ -27,8 +27,8 @@ export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects,
   const [isLoadingEmployees, setIsLoadingEmployees] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  // Time entries state: Record<employee_id, { in: string, out: string, break: number, isPresent: boolean }>
-  const [timeEntries, setTimeEntries] = useState<Record<string, { in: string, out: string, break: number, isPresent: boolean }>>({});
+  // Time entries state: Record<employee_id, { in: string, out: string, break: number, isPresent: boolean, salaryAdvance: number }>
+  const [timeEntries, setTimeEntries] = useState<Record<string, { in: string, out: string, break: number, isPresent: boolean, salaryAdvance: number }>>({});
 
   useEffect(() => {
     if (isOpen) {
@@ -36,18 +36,25 @@ export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects,
       loadGlobalEmployees();
       setAttendanceDate(new Date().toISOString().split("T")[0]);
       setProjectId(initialProjectId || "");
-      setEmployees([]);
       setTimeEntries({});
+      
+      // If initialProjectId is already set, the second useEffect won't trigger because projectId hasn't changed.
+      // So we force a load if we already have the ID.
+      if (initialProjectId) {
+         // loadEmployees will be triggered by the second useEffect if projectId changes.
+         // If it doesn't change, we need to call it here.
+         // We will just let the second useEffect handle it by adding isOpen to its dependencies.
+      }
     }
   }, [isOpen, initialProjectId]);
 
   useEffect(() => {
-    if (projectId && attendanceDate) {
+    if (isOpen && projectId && attendanceDate) {
       loadEmployees();
-    } else {
+    } else if (!isOpen) {
       setEmployees([]);
     }
-  }, [projectId, attendanceDate]);
+  }, [projectId, attendanceDate, isOpen]);
 
   const loadGlobalEmployees = async () => {
     try {
@@ -83,9 +90,23 @@ export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects,
         setEmployees(res.result);
         
         // Initialize time entries for these employees
-        const newEntries: Record<string, { in: string, out: string, break: number, isPresent: boolean }> = {};
+        const newEntries: Record<string, { in: string, out: string, break: number, isPresent: boolean, salaryAdvance: number }> = {};
         res.result.forEach((emp: any) => {
-          newEntries[emp.id] = { in: "09:00", out: "18:00", break: 0, isPresent: true };
+          let inTime = "09:00";
+          let outTime = "18:00";
+          let breakHrs = 0;
+          let isPresent = true;
+          let salaryAdvance = 0;
+          
+          if (emp.attendance) {
+              isPresent = emp.attendance.status === 'Present';
+              if (emp.attendance.punch_in_time) inTime = emp.attendance.punch_in_time;
+              if (emp.attendance.punch_out_time) outTime = emp.attendance.punch_out_time;
+              breakHrs = emp.attendance.break_hours || 0;
+              salaryAdvance = emp.attendance.salary_advance || 0;
+          }
+          
+          newEntries[emp.id] = { in: inTime, out: outTime, break: breakHrs, isPresent: isPresent, salaryAdvance: salaryAdvance };
         });
         setTimeEntries(newEntries);
       }
@@ -96,7 +117,7 @@ export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects,
     }
   };
 
-  const handleTimeChange = (empId: string, type: 'in' | 'out' | 'break' | 'isPresent', value: string | number | boolean) => {
+  const handleTimeChange = (empId: string, type: 'in' | 'out' | 'break' | 'isPresent' | 'salaryAdvance', value: string | number | boolean) => {
     setTimeEntries(prev => ({
       ...prev,
       [empId]: {
@@ -111,7 +132,7 @@ export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects,
     setEmployees(prev => [...prev, { id: fakeId, is_manual: true }]);
     setTimeEntries(prev => ({
       ...prev,
-      [fakeId]: { in: "09:00", out: "18:00", break: 0, isPresent: true }
+      [fakeId]: { in: "09:00", out: "18:00", break: 0, isPresent: true, salaryAdvance: 0 }
     }));
   };
 
@@ -174,6 +195,16 @@ export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects,
                     punch_in_time: entry.in || null,
                     punch_out_time: entry.out || null,
                     break_hours: entry.break || 0,
+                    salary_advance: entry.salaryAdvance || 0,
+                });
+            } else if (entry.salaryAdvance > 0) {
+                // If they only have a salary advance but no punch
+                workforcePunches.push({
+                    workforce_id: Number(workforceId),
+                    project_id: Number(projectId),
+                    date: attendanceDate,
+                    member_identifier: memberIdentifier,
+                    salary_advance: entry.salaryAdvance,
                 });
             }
         } else {
@@ -191,8 +222,21 @@ export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects,
                 employee_id: emp.id,
                 punch_at: `${attendanceDate} ${entry.out}:00`,
                 type: "O",
-                source: "Bulk"
+                source: "Bulk",
+                salary_advance: entry.salaryAdvance || 0
             });
+            } else if (!entry.in && entry.salaryAdvance > 0) {
+              // If they only have a salary advance but no punch
+              hrPunches.push({
+                employee_id: emp.id,
+                type: "ADVANCE", // Special type or handled by backend if punch_at is empty
+                source: "Bulk",
+                salary_advance: entry.salaryAdvance,
+                date: attendanceDate
+              });
+            } else if (hrPunches.length > 0 && entry.salaryAdvance > 0) {
+              // Add salary advance to the first punch we pushed for this employee
+              hrPunches[hrPunches.length - 1].salary_advance = entry.salaryAdvance;
             }
         }
       });
@@ -219,8 +263,8 @@ export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects,
         // use sendRequest from core-lib which is imported at the top of this file
         const { sendRequest } = require("@apptimate/core-lib");
         const wfRes = await sendRequest({ url: "/api/construction/workforce-attendance/bulk-punch", method: "POST", data: { punches: workforcePunches } });
-        if (!(wfRes as any).is_success) {
-            toast.error((wfRes as any).message || "Failed to log Workforce attendance");
+        if (!wfRes.responseData?.is_success) {
+            toast.error(wfRes.responseData?.message || "Failed to log Workforce attendance");
             hasError = true;
         }
       }
@@ -277,7 +321,8 @@ export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects,
                   <TCell isHeader className="bg-gray-50 text-gray-600 font-semibold tracking-wide border-t-0 border-r-0 border-l-0 w-24">Present</TCell>
                   <TCell isHeader className="bg-gray-50 text-gray-600 font-semibold tracking-wide border-t-0 border-r-0 border-l-0 w-32">First In</TCell>
                   <TCell isHeader className="bg-gray-50 text-gray-600 font-semibold tracking-wide border-t-0 border-r-0 border-l-0 w-32">Last Out</TCell>
-                  <TCell isHeader className="bg-gray-50 text-gray-600 font-semibold tracking-wide border-t-0 border-r-0 border-l-0 w-32">Break (hrs)</TCell>
+                  <TCell isHeader className="bg-gray-50 text-gray-600 font-semibold tracking-wide border-t-0 border-r-0 border-l-0 w-24">Break (hrs)</TCell>
+                  <TCell isHeader className="bg-gray-50 text-gray-600 font-semibold tracking-wide border-t-0 border-r-0 border-l-0 w-48">Salary Advance</TCell>
                 </TRow>
               </THeader>
               <TBody>
@@ -353,6 +398,41 @@ export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects,
                           title={!String(emp.id).startsWith('wf-') ? "Break hours are only applicable to Construction Workforce" : ""}
                         />
                       </TCell>
+                      <TCell label="Salary Advance">
+                        {emp.is_gang ? (
+                          <div className="flex items-center h-9">
+                            <span className="text-gray-400">-</span>
+                          </div>
+                        ) : (
+                          <div className="flex items-center gap-2">
+                            <Input
+                              type="number"
+                              step="0.01"
+                              min="0"
+                              value={timeEntries[emp.id]?.salaryAdvance || 0}
+                              onChange={(e) => handleTimeChange(emp.id, 'salaryAdvance', Number(e.target.value))}
+                              className="h-9 w-24 shrink-0"
+                              disabled={!timeEntries[emp.id]?.isPresent}
+                            />
+                            {emp.balance_due !== undefined && (
+                              <div className="text-[11px] text-gray-500 font-medium whitespace-nowrap">
+                                {timeEntries[emp.id]?.salaryAdvance > 0 ? (
+                                  <>
+                                    Owed: {Number(emp.balance_due) + Number(emp.attendance?.salary_advance || 0)} - {timeEntries[emp.id].salaryAdvance} = <strong className="text-gray-700">{Number(emp.balance_due) + Number(emp.attendance?.salary_advance || 0) - timeEntries[emp.id].salaryAdvance}</strong>
+                                  </>
+                                ) : (
+                                  <>Owed: {Number(emp.balance_due) + Number(emp.attendance?.salary_advance || 0)}</>
+                                )}
+                                {timeEntries[emp.id]?.isPresent && (
+                                  <span className="block text-[9.5px] text-blue-500/90 mt-0.5">
+                                    + Today's wage
+                                  </span>
+                                )}
+                              </div>
+                            )}
+                          </div>
+                        )}
+                      </TCell>
                     </TRow>
                   ))
                 )}

package/src/common-components/attendance-shifts/DailySchedulePanel.tsx

@@ -14,6 +14,7 @@ interface DailySchedulePanelProps {
 
 export default function DailySchedulePanel({ day, events, onCancelClick, onExchangeClick, onCancelExchangeRequest, onClose }: DailySchedulePanelProps) {
   const shifts = events.filter(e => e.type === 'shift' && e.segmentsInfo);
+  const projectAttendances = events.filter(e => e.type === 'project_attendance');
 
   return (
     <div className="absolute inset-0 z-30 lg:static lg:z-auto w-full lg:w-80 flex-shrink-0 bg-white rounded-[16px] border border-gray-200 overflow-hidden flex flex-col h-[calc(100vh-140px)] shadow-2xl lg:shadow-none">
@@ -34,19 +35,79 @@ export default function DailySchedulePanel({ day, events, onCancelClick, onExcha
       </div>
 
       <div className="flex-1 overflow-y-auto p-4 space-y-4">
+        {projectAttendances.length > 0 && (
+          <div className="space-y-3">
+            <h3 className="text-xs font-bold text-gray-400 uppercase tracking-wider">Project Summary</h3>
+            {projectAttendances.map((pa, idx) => (
+              <div key={idx} className="bg-emerald-50 border border-emerald-100 rounded-xl overflow-hidden shadow-sm">
+                <div className="p-4 border-b border-emerald-100/50">
+                  <div className="font-bold text-emerald-900 mb-2">{pa.name}</div>
+                  <div className="flex justify-between items-center text-sm font-medium">
+                    <span className="text-emerald-700 flex items-center gap-1.5">
+                      <div className="w-2 h-2 rounded-full bg-emerald-500"></div>
+                      {pa.present} Present
+                    </span>
+                    <span className="text-red-700 flex items-center gap-1.5">
+                      <div className="w-2 h-2 rounded-full bg-red-500"></div>
+                      {pa.absent} Absent
+                    </span>
+                  </div>
+                </div>
+                {pa.workers && pa.workers.length > 0 && (
+                  <div className="bg-white/60 p-3 space-y-2">
+                    {pa.workers.map((worker: any, wIdx: number) => (
+                      <div key={wIdx} className="flex flex-col border-b border-gray-100 last:border-0 pb-2 last:pb-0">
+                        <div className="flex justify-between items-center text-xs">
+                          <span className="font-medium text-gray-700 truncate pr-2">{worker.name}</span>
+                          <span className={`px-2 py-0.5 rounded-full font-semibold shrink-0 text-[10px] ${
+                            worker.status === 'Present' 
+                              ? 'bg-emerald-100 text-emerald-700' 
+                              : 'bg-red-100 text-red-700'
+                          }`}>
+                            {worker.status}
+                          </span>
+                        </div>
+                        {worker.status === 'Present' && (
+                          <div className="flex justify-between items-center text-[10px] text-gray-500 mt-1">
+                            <div className="flex items-center gap-1">
+                              <Clock className="w-3 h-3" />
+                              <span>
+                                {worker.punch_in_time ? worker.punch_in_time.substring(0,5) : '--:--'} - {worker.punch_out_time ? worker.punch_out_time.substring(0,5) : '--:--'}
+                              </span>
+                            </div>
+                            {worker.break_hours > 0 ? (
+                              <span className="bg-gray-100 px-1.5 py-0.5 rounded font-medium">Break: {worker.break_hours}h</span>
+                            ) : null}
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+
         {shifts.length === 0 ? (
-          <div className="border border-dashed border-gray-200 rounded-xl p-4 flex items-center gap-3 text-gray-400">
-            <CalendarIcon className="w-5 h-5" />
-            <div className="text-sm">
-              <div className="font-semibold text-gray-500">Available for Swap</div>
-              <div className="text-xs mt-0.5">No shifts scheduled today</div>
+          projectAttendances.length === 0 && (
+            <div className="border border-dashed border-gray-200 rounded-xl p-4 flex items-center gap-3 text-gray-400">
+              <CalendarIcon className="w-5 h-5" />
+              <div className="text-sm">
+                <div className="font-semibold text-gray-500">Available for Swap</div>
+                <div className="text-xs mt-0.5">No shifts scheduled today</div>
+              </div>
             </div>
-          </div>
+          )
         ) : (
-          shifts.map((shift, shiftIdx) => (
-            <div key={shiftIdx} className="space-y-4">
-              {shift.segmentsInfo.map((info: any, idx: number) => (
-                <div key={idx} className="border border-gray-200 rounded-xl overflow-hidden relative shadow-sm">
+          <div className="space-y-3">
+            {projectAttendances.length > 0 && (
+              <h3 className="text-xs font-bold text-gray-400 uppercase tracking-wider mt-2">Shifts</h3>
+            )}
+            {shifts.map((shift, shiftIdx) => (
+              <div key={shiftIdx} className="space-y-4">
+                {shift.segmentsInfo.map((info: any, idx: number) => (
+                  <div key={idx} className="border border-gray-200 rounded-xl overflow-hidden relative shadow-sm">
                   <div className="absolute left-0 top-0 bottom-0 w-1 bg-[#0D6EFD]"></div>
                   <div className="p-4 pl-5">
                     <div className="flex justify-between items-start mb-1">
@@ -131,7 +192,8 @@ export default function DailySchedulePanel({ day, events, onCancelClick, onExcha
                 </div>
               ))}
             </div>
-          ))
+          ))}
+          </div>
         )}
       </div>
     </div>

package/src/common-components/attendance-shifts/ShiftCalendar.tsx

@@ -32,7 +32,7 @@ export default function ShiftCalendar({ employeeId, projectId, workforceId, show
 
   const [currentDate, setCurrentDate] = useState(new Date());
   const [loading, setLoading] = useState(false);
-  const [data, setData] = useState<{ holidays: any[], leaves: any[], rosters: any[], exchanges: any[] }>({
+  const [data, setData] = useState<{ holidays: any[], leaves: any[], rosters: any[], exchanges: any[], projectAttendance?: Record<string, any> }>({
     holidays: [], leaves: [], rosters: [], exchanges: []
   });
 
@@ -96,14 +96,18 @@ export default function ShiftCalendar({ employeeId, projectId, workforceId, show
       }
 
       if (attendanceRes.status === 'fulfilled' && attendanceRes.value && (attendanceRes.value as any).is_success) {
-        const days = (attendanceRes.value as any).result?.days || [];
+        const days = (attendanceRes.value as any).result?.days || (attendanceRes.value as any).result?.data || [];
         const map: Record<string, string> = {};
+        const fullMap: Record<string, any> = {};
         days.forEach((d: any) => {
-          if (d.date && d.status) {
-            map[d.date] = d.status;
+          if (d.date) {
+            if (d.status) map[d.date] = d.status;
+            fullMap[d.date] = d;
           }
         });
         setAttendanceMap(map);
+        // Also save the full day data so we can display project attendance counts
+        setData(prev => ({ ...prev, projectAttendance: fullMap }));
       }
     } catch {
       // Silently fail for summary/attendance
@@ -202,6 +206,20 @@ export default function ShiftCalendar({ employeeId, projectId, workforceId, show
 
     // Exchanges are now mapped directly into shift segmentsInfo.
 
+    // 4. Project Workforce Attendance (Summary)
+    if (data.projectAttendance) {
+      const pData = data.projectAttendance[format(day, 'yyyy-MM-dd')];
+      if (pData) {
+        events.push({
+          type: 'project_attendance',
+          name: 'Workforce Attendance',
+          present: parseInt(pData.present_count || '0', 10),
+          absent: parseInt(pData.absent_count || '0', 10),
+          workers: pData.workers || [],
+        });
+      }
+    }
+
     return events;
   };
 
@@ -373,15 +391,17 @@ export default function ShiftCalendar({ employeeId, projectId, workforceId, show
                           ? evt.isOptional ? 'bg-warning-50 text-warning-700 border border-warning-100 p-1.5' : 'bg-primary-50 text-primary-700 border border-primary-100 p-1.5'
                           : evt.type === 'leave'
                             ? evt.status === 'approved' ? 'bg-success-50 text-success-700 border border-success-100 p-1.5' : 'bg-gray-100 text-gray-700 border border-gray-200 p-1.5'
-                            : evt.type === 'shift'
-                              ? 'bg-[#0D6EFD] text-white p-1.5 flex flex-col gap-0.5'
-                              : evt.type === 'exchange'
-                                ? evt.isPending 
-                                  ? 'bg-amber-50 text-amber-700 border border-amber-200 p-1.5 border-dashed' 
-                                  : 'bg-indigo-50 text-indigo-700 border border-indigo-200 p-1.5'
-                              : evt.type === 'off_day'
-                                ? 'bg-white text-red-600 border border-red-200 p-1.5'
-                                : 'bg-purple-50 text-purple-700 border border-purple-200 p-1.5'
+                            : evt.type === 'project_attendance'
+                              ? 'bg-emerald-50 text-emerald-700 border border-emerald-200 p-1.5'
+                              : evt.type === 'shift'
+                                ? 'bg-[#0D6EFD] text-white p-1.5 flex flex-col gap-0.5'
+                                : evt.type === 'exchange'
+                                  ? evt.isPending 
+                                    ? 'bg-amber-50 text-amber-700 border border-amber-200 p-1.5 border-dashed' 
+                                    : 'bg-indigo-50 text-indigo-700 border border-indigo-200 p-1.5'
+                                  : evt.type === 'off_day'
+                                    ? 'bg-white text-red-600 border border-red-200 p-1.5'
+                                    : 'bg-purple-50 text-purple-700 border border-purple-200 p-1.5'
                       }`}
                     >
                       {evt.type === 'shift' ? (
@@ -397,6 +417,14 @@ export default function ShiftCalendar({ employeeId, projectId, workforceId, show
                             </div>
                           )}
                         </>
+                      ) : evt.type === 'project_attendance' ? (
+                        <div className="flex flex-col gap-0.5">
+                          <div className="truncate font-semibold text-xs leading-tight">{evt.name}</div>
+                          <div className="flex gap-2 text-[10px] opacity-80 mt-0.5">
+                            <span className="font-medium text-emerald-800">{evt.present} Present</span>
+                            <span className="font-medium text-red-800">{evt.absent} Absent</span>
+                          </div>
+                        </div>
                       ) : (
                         <div className="truncate font-semibold text-xs leading-tight">{evt.name}</div>
                       )}

package/src/common-components/print/TemplateRenderer.tsx

@@ -269,8 +269,8 @@ export function replaceTokens(text: string, entityData: any): string {
     }
 
     // Format specific currency properties gracefully if they are numbers
-    if (val !== undefined && val !== null && (path.includes("amount") || path.includes("total") || path.includes("cost") || path.includes("price"))) {
-      if (!isNaN(Number(val)) && Number(val) > 0) {
+    if (val !== undefined && val !== null && (path.includes("amount") || path.includes("total") || path.includes("cost") || path.includes("price") || path.includes("due") || path.includes("tax"))) {
+      if (!isNaN(Number(val))) {
         val = `${data.currency_code ? data.currency_code + ' ' : ''}${Number(val).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
       }
     }
@@ -462,11 +462,11 @@ function LineRenderer({ line, defaultFont, defaultColor, defaultFontSize, entity
     if (!Array.isArray(rowsData)) rowsData = [];
 
     return (
-      <div style={{ marginTop: `${line.spacing_before || 0}px`, marginBottom: `${line.spacing_after || 0}px`, border: outerBorder ? `1px solid ${borderColor}` : "none", borderRadius: line.border_radius || "0", overflow: "hidden", fontFamily: line.font_family || defaultFont }}>
+      <div style={{ width: "100%", marginTop: `${line.spacing_before || 0}px`, marginBottom: `${line.spacing_after || 0}px`, border: outerBorder ? `1px solid ${borderColor}` : "none", borderRadius: line.border_radius || "0", overflow: "hidden", fontFamily: line.font_family || defaultFont }}>
         {showHeader && (
           <div style={{ display: "flex", flexWrap: "wrap", backgroundColor: headerBg, padding: ec.header_padding || "6px 8px" }}>
             {cols.map((col: any, i: number) => (
-              <div key={i} style={{ width: `${col.header_width_percent || col.width_percent}%`, color: headerFc, fontSize: `${headerFs}px`, fontWeight: ec.header_bold !== false ? 700 : (isA4 === false ? 600 : 400), textAlign: col.align || "left", whiteSpace: "pre-wrap" }}>
+              <div key={i} style={{ boxSizing: "border-box", padding: "0 2px", width: `${col.header_width_percent || col.width_percent}%`, color: headerFc, fontSize: `${headerFs}px`, fontWeight: ec.header_bold !== false ? 700 : (isA4 === false ? 600 : 400), textAlign: col.align || "left", whiteSpace: "pre-wrap", display: col.label ? "block" : "none" }}>
                 {typeof col.label === 'string' ? col.label.split('\n').map((t: string, ti: number) => <div key={ti}>{t || <br />}</div>) : col.label}
               </div>
             ))}
@@ -480,8 +480,8 @@ function LineRenderer({ line, defaultFont, defaultColor, defaultFontSize, entity
 
           const rowDataCtx = {
             ...row,
-            index: ri + 1,
-            description: row.item?.name || row.item_name || "Item",
+            index: row.index !== undefined ? row.index : ri + 1,
+            description: row.description || row.item?.name || row.item_name || "Item",
             specification: row.item?.code || "",
 
             // Rich item details for multi-line support
@@ -489,14 +489,14 @@ function LineRenderer({ line, defaultFont, defaultColor, defaultFontSize, entity
             type: row.receipt_type ? (row.receipt_type === 'bulk' ? 'BULK / LOT' : String(row.receipt_type).replace(/_/g, ' ').toUpperCase()) : (row.item?.item_type ? row.item.item_type.replace('_', ' ').toUpperCase() : (row.item_class || row.item?.item_class ? String(row.item_class || row.item?.item_class).replace('_', ' ').toUpperCase() : (row.item_type || "BULK / LOT").toUpperCase())),
             // New richer fields for GRN matching UI
             material_purity_rich: `${(row.material_type || row.item?.material_type)?.name || "Gold"}\n${row.purity?.purity_percentage || row.purity_percentage || "99.8"}% (${row.purity?.karat || row.purity?.purity_code || "24K"})\nRate: ${fmtCurrency(row.rate_per_gram || row.unit_price)} / g`,
-            qty: fmtQty(row.quantity || row.received_quantity || 1),
+            qty: row.qty !== undefined ? row.qty : fmtQty(row.quantity || row.received_quantity || 1),
             gross_wt: fmtNum(row.gross_weight || row.weight_grams || row.metal_weight || row.sale_weight || row.weight, ""),
             weight: fmtNum(row.sale_weight || row.weight || row.gross_weight || row.weight_grams || row.metal_weight, ""),
             material_wt: fmtNum(row.sale_weight || row.metal_weight || row.weight || row.gross_weight || row.weight_grams, ""),
             weight_display: (row.weight_grams || row.net_weight || row.estimated_weight || row.material_weight || row.sale_weight || row.weight) && Number(row.weight_grams || row.net_weight || row.estimated_weight || row.material_weight || row.sale_weight || row.weight) > 0 ? `${parseFloat(Number(row.weight_grams || row.net_weight || row.estimated_weight || row.material_weight || row.sale_weight || row.weight).toFixed(4))}g` : "",
             stone_wt: fmtNum(row.sale_stone_weight || row.stone_weight, ""),
             stone_rich: row.stone_weight && Number(row.stone_weight) > 0 ? `${fmtNum(row.stone_weight, "g")}\n@ ${fmtCurrency(row.stone_cost || row.stone_amount)}` : "—",
-            item_value: fmtCurrency(row.item_value || row.subtotal || row.unit_price || row.amount),
+            item_value: row.unit_price !== undefined ? row.unit_price : fmtCurrency(row.item_value || row.subtotal || row.amount),
             charges_rich: [
               (row.making_charge || row.making_charge_value) && Number(row.making_charge || row.making_charge_value) > 0 ? `MC: ${row.making_charge || row.making_charge_value} (${row.making_charge_type || 'fixed'})` : null,
               (row.wastage || row.wastage_value) && Number(row.wastage || row.wastage_value) > 0 ? `W: ${row.wastage || row.wastage_value} (${row.wastage_type || 'fixed'})` : null,
@@ -504,7 +504,7 @@ function LineRenderer({ line, defaultFont, defaultColor, defaultFontSize, entity
               (row.tax_rate || row.tax_percentage) && Number(row.tax_rate || row.tax_percentage) > 0 ? `Tax: ${row.tax_rate || row.tax_percentage}%` : null
             ].filter(Boolean).join("\n") || "—",
 
-            amount: fmtCurrency(row.estimated_total_cost || row.subtotal || row.line_total || row.total_cost || row.amount || row.grand_total),
+            amount: row.amount !== undefined ? row.amount : fmtCurrency(row.estimated_total_cost || row.subtotal || row.line_total || row.total_cost || row.grand_total),
             amount_num: (row.estimated_total_cost || row.subtotal || row.line_total || row.total_cost || row.amount || row.grand_total)
               ? Number(row.estimated_total_cost || row.subtotal || row.line_total || row.total_cost || row.amount || row.grand_total).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
               : "—"
@@ -531,7 +531,7 @@ function LineRenderer({ line, defaultFont, defaultColor, defaultFontSize, entity
                 }
 
                 return (
-                  <div key={ci} style={{ width: `${col.width_percent}%`, fontSize: `${rowFs}px`, color: line.font_color || defaultColor, fontWeight: line.font_weight === "bold" ? 700 : line.font_weight === "light" ? 300 : (isA4 === false ? 600 : 400), textAlign: col.align || "left", whiteSpace: "pre-wrap", fontStyle: line.is_italic ? "italic" : "normal", textDecoration: line.is_underline ? "underline" : "none" }}>
+                  <div key={ci} style={{ boxSizing: "border-box", padding: "0 2px", width: `${col.width_percent}%`, fontSize: `${rowFs}px`, color: line.font_color || defaultColor, fontWeight: line.font_weight === "bold" ? 700 : line.font_weight === "light" ? 300 : (isA4 === false ? 600 : 400), textAlign: col.align || "left", whiteSpace: "pre-wrap", fontStyle: line.is_italic ? "italic" : "normal", textDecoration: line.is_underline ? "underline" : "none" }}>
                     {typeof cellVal === 'string' ? cellVal.split('\n').map((t: string, ti: number) => <div key={ti}>{t || <br />}</div>) : cellVal}
                   </div>
                 );