Merge branch 'develop' of https://github.com/BrainWise-DEV/POSNext into develop

Author: engahmed1190

CHANGELOG.md

@@ -7,6 +7,83 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+- **Tax Inclusive Setting**
+  - New "Tax Inclusive" toggle in POS Settings under Pricing & Discounts
+  - When enabled, displayed prices include tax (tax is part of the price)
+  - When disabled, tax is calculated separately and added to the price
+  - Changes apply immediately to cart when saved
+  - Backend API endpoints for tax-inclusive invoice creation
+  - Comprehensive tax calculation hooks in sales invoice processing
+- **Custom Toast Notification System**
+  - Implemented custom `useToast` composable for consistent notifications across the app
+  - Centralized toast notification management
+  - Cleaner code with standardized success/error/info message handling
+- **POS Profile Enhancement**
+  - New custom field to create POS Invoices instead of Sales Invoices for better performance
+  - Improved invoice creation workflow
+- **Centralized Formatting Utilities**
+  - Created `useFormatters` composable for consistent formatting across all components
+  - Includes formatters for currency, quantity, dates, times, and percentages
+  - Eliminates code duplication and ensures consistency
+- **Smart Quantity Controls**
+  - Intelligent step detection for quantity increment/decrement buttons
+  - Automatically adjusts step size based on current value (1 for integers, 0.5 for halves, 0.25 for quarters, etc.)
+  - Natural counting experience for both whole and fractional items
+
+### Changed
+- **Enhanced Quantity Precision**
+  - Quantity formatting now supports up to 4 decimal places (e.g., 0.25, 0.125, 0.3333)
+  - Smart rounding removes trailing zeros for cleaner display (2.0 → 2, 0.5 → 0.5)
+  - Precision increased from 2 to 4 decimal places across all quantity calculations
+- **Improved Cart Quantity Input**
+  - Input field width increased by 60% for better visibility (64px/80px on mobile/tablet)
+  - Font size increased for easier reading
+  - Now accepts any decimal value without interruption during typing
+  - Validation and rounding only occurs when input loses focus
+  - Added Enter key support to quickly confirm changes
+  - Minimum value set to 0.0001 for maximum flexibility
+- **Mobile Header Optimization**
+  - Version badge hidden on mobile devices to prevent overflow
+  - Clock icon removed from mobile time display for cleaner UI
+  - Improved responsive spacing and flex layout
+  - Added horizontal scroll prevention at multiple levels
+
+### Fixed
+- **Cart Quantity Display Issues**
+  - Fixed fractional quantities showing incorrect precision (0.2 instead of 0.25)
+  - Quantity input now properly displays and accepts multi-decimal values
+  - Items are automatically removed from cart when quantity reaches zero
+- **Mobile UI Issues**
+  - Fixed header overflow caused by version badge on small screens
+  - Prevented horizontal scrolling on mobile devices
+  - Fixed text truncation issues in header components
+- **Formatting Function Conflicts**
+  - Resolved duplicate function declaration errors in Vue components
+  - Changed formatters from named exports to composable-only exports to prevent conflicts
+- **Closing Shift Display**
+  - Fixed "Items Sold" showing excessive decimal places (6.600000000000 → 6.6)
+  - Applied proper formatting to all numeric fields in closing shift dialog
+  - Tax rates now display with proper precision
+
+### Improved
+- **Code Quality**
+  - Refactored toast notifications reducing code by 250+ lines across 10+ components
+  - Replaced direct toast calls with centralized composable pattern
+  - Refactored formatting functions from 10+ components into single reusable composable
+  - Removed duplicate code across ShiftClosingDialog, ShiftOpeningDialog, InvoiceHistoryDialog, etc.
+  - Better separation of concerns with dedicated formatting utilities
+  - Cleaner component code with standardized notification patterns
+- **User Experience**
+  - Larger, more accessible quantity input fields
+  - Clearer visual feedback during quantity editing
+  - More intuitive increment/decrement behavior
+  - Cleaner mobile interface with reduced visual clutter
+  - Consistent notification styling and behavior across the app
+- **Performance**
+  - Option to use POS Invoices instead of Sales Invoices for faster invoice creation
+  - Reduced component complexity through code refactoring
+
 ## [1.1.1] - 2025-10-29
 
 ### Added

POS/README.md

@@ -41,6 +41,10 @@ The development server is configured to proxy your frappe app (usually running o
 If you notice the browser URL is `/frontend`, this is the base URL where your frontend app will run in production.
 To change this, open `src/router.js` and change the base URL passed to `createWebHistory`.
 
+## Source maps in production builds
+
+Production builds omit JavaScript source maps by default to keep bundle sizes small. If you need source maps for debugging a specific deployment, set the environment variable `POS_NEXT_ENABLE_SOURCEMAP=true` before running the build command. Any value other than the string `"true"` will keep source maps disabled.
+
 ## Resources
 
 - [Vue 3](https://v3.vuejs.org/guide/introduction.html)

POS/src/components/ShiftClosingDialog.vue

@@ -41,7 +41,7 @@
               <!-- Items Sold -->
               <div class="bg-gray-50 border border-gray-200 rounded-lg p-3 md:p-4">
                 <div class="text-gray-600 text-xs uppercase font-medium mb-1">Items Sold</div>
-                <div class="text-lg md:text-2xl font-bold text-gray-900 mb-0.5 md:mb-1">{{ closingData.total_quantity || 0 }}</div>
+                <div class="text-lg md:text-2xl font-bold text-gray-900 mb-0.5 md:mb-1">{{ formatQuantity(closingData.total_quantity) }}</div>
                 <div class="text-gray-600 text-xs">Total items</div>
               </div>
 
@@ -328,7 +328,7 @@
                 <div v-for="(tax, idx) in closingData.taxes" :key="idx" class="flex items-center justify-between py-2 border-b border-gray-100 last:border-0">
                   <div>
                     <p class="text-xs md:text-sm font-medium text-gray-900">{{ tax.account_head }}</p>
-                    <p class="text-xs text-gray-500">{{ tax.rate }}%</p>
+                    <p class="text-xs text-gray-500">{{ formatQuantity(tax.rate) }}%</p>
                   </div>
                   <div class="text-right">
                     <p class="text-sm md:text-base font-semibold text-gray-900">{{ formatCurrency(tax.amount) }}</p>
@@ -409,6 +409,7 @@
 import { Button, Dialog, Input } from "frappe-ui"
 import { computed, reactive, ref, watch } from "vue"
 import { useShift } from "../composables/useShift"
+import { useFormatters } from "../composables/useFormatters"
 
 const props = defineProps({
 	modelValue: Boolean,
@@ -423,6 +424,7 @@ const open = computed({
 })
 
 const { getClosingShiftData, submitClosingShift } = useShift()
+const { formatCurrency, formatQuantity, formatDateTime, formatTime } = useFormatters()
 
 const closingData = ref(null)
 const closingDataResource = getClosingShiftData
@@ -521,25 +523,6 @@ function closeDialog() {
 	showInvoiceDetails.value = false
 }
 
-// Formatting Functions
-function formatCurrency(amount) {
-	if (amount === null || amount === undefined) return "0.00"
-	return Number.parseFloat(amount).toFixed(2)
-}
-
-function formatDateTime(datetime) {
-	if (!datetime) return ""
-	return new Date(datetime).toLocaleString()
-}
-
-function formatTime(datetime) {
-	if (!datetime) return ""
-	return new Date(datetime).toLocaleTimeString([], {
-		hour: "2-digit",
-		minute: "2-digit",
-	})
-}
-
 // Calculation Functions
 function getInvoiceCount() {
 	if (!closingData.value) return 0

POS/src/components/ShiftOpeningDialog.vue

@@ -187,6 +187,7 @@ import { Button, Dialog, Input } from "frappe-ui"
 import { createResource } from "frappe-ui"
 import { computed, ref, watch } from "vue"
 import { useShift } from "../composables/useShift"
+import { useFormatters } from "../composables/useFormatters"
 import ShiftClosingDialog from "./ShiftClosingDialog.vue"
 
 const props = defineProps({
@@ -202,6 +203,7 @@ const open = computed({
 
 const { createOpeningShift, getOpeningDialogData, checkOpeningShift } =
 	useShift()
+const { formatDateTime } = useFormatters()
 
 const step = ref(1)
 const selectedProfile = ref(null)
@@ -344,11 +346,6 @@ function closeDialog() {
 	open.value = false
 }
 
-function formatDateTime(datetime) {
-	if (!datetime) return ""
-	return new Date(datetime).toLocaleString()
-}
-
 async function handleExistingShiftClosed() {
 	showClosingDialog.value = false
 	const profileToRestore = restartProfileName.value

POS/src/components/invoices/InvoiceManagement.vue

@@ -518,9 +518,14 @@ import PaymentDialog from "@/components/sale/PaymentDialog.vue"
 import { useInvoiceFilters } from "@/composables/useInvoiceFilters"
 import { useInvoiceFiltersStore } from "@/stores/invoiceFilters"
 import { formatCurrency as formatCurrencyUtil } from "@/utils/currency"
-import { Button, call, toast } from "frappe-ui"
+import { useFormatters } from "@/composables/useFormatters"
+import { useToast } from "@/composables/useToast"
+import { Button, call } from "frappe-ui"
 import { computed, onMounted, ref, watch } from "vue"
 
+const { showSuccess, showError } = useToast()
+const { formatDate, formatDateTime } = useFormatters()
+
 const props = defineProps({
 	modelValue: Boolean,
 	posProfile: String,
@@ -765,12 +770,7 @@ async function loadUnpaidInvoices() {
 		unpaidInvoices.value = result || []
 	} catch (error) {
 		console.error("Error loading unpaid invoices:", error)
-		toast.create({
-			title: "Error",
-			text: error.message || "Failed to load unpaid invoices",
-			icon: "alert-circle",
-			iconClasses: "text-red-600",
-		})
+		showError(error.message || "Failed to load unpaid invoices")
 	} finally {
 		loading.value = false
 	}
@@ -811,12 +811,7 @@ async function handlePaymentCompleted(paymentData) {
 			payments: paymentData.payments,
 		})
 
-		toast.create({
-			title: "Success",
-			text: "Payment added successfully",
-			icon: "check",
-			iconClasses: "text-green-600",
-		})
+		showSuccess("Payment added successfully")
 
 		// Reload invoices and summary
 		await loadUnpaidInvoices()
@@ -825,31 +820,14 @@ async function handlePaymentCompleted(paymentData) {
 		selectedInvoice.value = null
 	} catch (error) {
 		console.error("Error adding payment:", error)
-		toast.create({
-			title: "Error",
-			text: error.message || "Failed to add payment",
-			icon: "alert-circle",
-			iconClasses: "text-red-600",
-		})
+		showError(error.message || "Failed to add payment")
 	}
 }
 
 function formatCurrency(amount) {
 	return formatCurrencyUtil(Number.parseFloat(amount || 0), props.currency)
 }
 
-function formatDate(date) {
-	if (!date) return ""
-	const d = new Date(date)
-	return d.toLocaleDateString()
-}
-
-function formatDateTime(datetime) {
-	if (!datetime) return ""
-	const d = new Date(datetime)
-	return d.toLocaleString()
-}
-
 function calculateDraftTotal(items) {
 	if (!items || items.length === 0) return 0
 	return items.reduce(

POS/src/components/partials/PartialPayments.vue

@@ -177,10 +177,12 @@
 import { formatCurrency as formatCurrencyUtil } from "@/utils/currency"
 import PaymentDialog from "@/components/sale/PaymentDialog.vue"
 import { usePOSSettingsStore } from "@/stores/posSettings"
-import { Button, call, toast } from "frappe-ui"
+import { useToast } from "@/composables/useToast"
+import { Button, call } from "frappe-ui"
 import { onMounted, ref, watch } from "vue"
 
 const posSettingsStore = usePOSSettingsStore()
+const { showSuccess, showError } = useToast()
 
 const props = defineProps({
 	modelValue: Boolean,
@@ -239,12 +241,7 @@ async function loadInvoices() {
 		invoices.value = result || []
 	} catch (error) {
 		console.error("Error loading partial payments:", error)
-		toast.create({
-			title: "Error",
-			text: error.message || "Failed to load partial payments",
-			icon: "alert-circle",
-			iconClasses: "text-red-600",
-		})
+		showError(error.message || "Failed to load partial payments")
 	} finally {
 		loading.value = false
 	}
@@ -294,12 +291,7 @@ async function handlePaymentCompleted(paymentData) {
 
 		console.log('[PartialPayments] API response:', result)
 
-		toast.create({
-			title: "Success",
-			text: "Payment added successfully",
-			icon: "check",
-			iconClasses: "text-green-600",
-		})
+		showSuccess("Payment added successfully")
 
 		// Reload invoices and summary
 		console.log('[PartialPayments] Reloading invoices and summary...')
@@ -309,12 +301,7 @@ async function handlePaymentCompleted(paymentData) {
 		selectedInvoice.value = null
 	} catch (error) {
 		console.error("[PartialPayments] Error adding payment:", error)
-		toast.create({
-			title: "Error",
-			text: error.message || "Failed to add payment",
-			icon: "alert-circle",
-			iconClasses: "text-red-600",
-		})
+		showError(error.message || "Failed to add payment")
 	}
 }
 

POS/src/components/pos/POSHeader.vue

@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="bg-white shadow-sm sticky top-0 z-[200]"
+		class="bg-white shadow-sm sticky top-0 z-[200] overflow-x-hidden"
 	>
 		<div class="flex py-2 sm:py-3">
 			<!-- POS Icon - Aligned with Management Sidebar (64px) -->
@@ -19,11 +19,11 @@
 			<!-- Main Header Content -->
 			<div class="flex-1 flex justify-between items-center gap-1 sm:gap-2 px-2 sm:px-4 md:px-6">
 				<!-- Left Side: Brand Info -->
-				<div class="flex items-center space-x-1 sm:space-x-4 min-w-0 flex-1">
-					<div class="min-w-0">
-						<div class="flex items-center gap-2">
-							<h1 class="text-xs sm:text-base font-bold text-gray-900 truncate">POS Next</h1>
-							<span class="relative inline-flex items-center px-2 py-0.5 text-[9px] sm:text-[10px] font-bold bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-md shadow-sm hover:shadow-md transition-shadow">
+				<div class="flex items-center space-x-1 sm:space-x-4 min-w-0 flex-1 overflow-hidden">
+					<div class="min-w-0 flex-shrink overflow-hidden">
+						<div class="flex items-center gap-1 sm:gap-2">
+							<h1 class="text-xs sm:text-base font-bold text-gray-900 truncate flex-shrink">POS Next</h1>
+							<span class="hidden sm:inline-flex relative items-center px-1 sm:px-2 py-0.5 text-[8px] sm:text-[10px] font-bold bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-md shadow-sm hover:shadow-md transition-shadow flex-shrink-0">
 								<span class="absolute inset-0 bg-white/20 rounded-md animate-pulse"></span>
 								<span class="relative">v{{ appVersion }}</span>
 							</span>
@@ -32,7 +32,7 @@
 					</div>
 
 					<!-- Time and Shift Duration - Compact on mobile -->
-					<div class="hidden lg:flex items-center space-x-4 ml-6">
+					<div class="hidden lg:flex items-center space-x-4 ml-6 flex-shrink-0">
 						<!-- Current Time -->
 						<StatusBadge
 							variant="blue"
@@ -53,11 +53,8 @@
 					</div>
 
 					<!-- Mobile Time Display - Very compact -->
-					<div class="flex lg:hidden items-center text-[10px] text-gray-600 font-medium">
-						<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
-						</svg>
-						<span class="hidden xs:inline">{{ currentTime }}</span>
+					<div class="flex lg:hidden items-center text-[10px] text-gray-600 font-medium flex-shrink-0 ml-1">
+						<span class="hidden xs:inline whitespace-nowrap">{{ currentTime }}</span>
 					</div>
 				</div>