Merge pull request #1236 from suhailanzar/status-colors

fix: updated invoice status and colors

models/helpers.ts

@@ -367,16 +367,17 @@ export const statusColor: Record<
   Opportunity: 'yellow',
   Unpaid: 'orange',
   Paid: 'green',
+  PartlyPaid: 'yellow',
   Interested: 'yellow',
   Converted: 'green',
   Quotation: 'green',
-  Saved: 'gray',
+  Saved: 'blue',
   NotSaved: 'gray',
   Submitted: 'green',
   Cancelled: 'red',
   DonotContact: 'red',
-  Return: 'green',
-  ReturnIssued: 'green',
+  Return: 'lime',
+  ReturnIssued: 'lime',
 };
 
 export function getStatusText(status: DocStatus | InvoiceStatus): string {
@@ -395,6 +396,8 @@ export function getStatusText(status: DocStatus | InvoiceStatus): string {
       return t`Paid`;
     case 'Unpaid':
       return t`Unpaid`;
+    case 'PartlyPaid':
+      return t`Partly Paid`;
     case 'Return':
       return t`Return`;
     case 'ReturnIssued':
@@ -511,7 +514,7 @@ export function getInvoiceStatus(doc: RenderData | Doc): InvoiceStatus {
   if (
     doc.submitted &&
     !doc.cancelled &&
-    (doc.outstandingAmount as Money).isPositive()
+    (doc.outstandingAmount as Money).eq(doc.grandTotal as Money)
   ) {
     return 'Unpaid';
   }
@@ -520,6 +523,15 @@ export function getInvoiceStatus(doc: RenderData | Doc): InvoiceStatus {
     return 'Cancelled';
   }
 
+  if (
+    doc.submitted &&
+    !doc.isCancelled &&
+    (doc.outstandingAmount as Money).isPositive() &&
+    (doc.outstandingAmount as Money).neq(doc.grandTotal as Money)
+  ) {
+    return 'PartlyPaid';
+  }
+
   return 'Saved';
 }
 

models/types.ts

@@ -5,7 +5,9 @@ export type InvoiceStatus =
   | 'Cancelled'
   | 'Paid'
   | 'Return'
-  | 'ReturnIssued';
+  | 'ReturnIssued'
+  | 'Unpaid'
+  | 'PartlyPaid';
 
 export enum ModelNameEnum {
   Account = 'Account',

src/components/StatusPill.vue

@@ -6,11 +6,12 @@ import { Doc } from 'fyo/model/doc';
 import { isPesa } from 'fyo/utils';
 import { Invoice } from 'models/baseModels/Invoice/Invoice';
 import { Party } from 'models/baseModels/Party/Party';
+import { Money } from 'pesa';
 import { getBgTextColorClass } from 'src/utils/colors';
 import { defineComponent } from 'vue';
 
 type Status = ReturnType<typeof getStatus>;
-type UIColors = 'gray' | 'orange' | 'red' | 'green' | 'blue';
+type UIColors = 'gray' | 'orange' | 'red' | 'green' | 'blue' | 'yellow';
 
 export default defineComponent({
   props: { doc: { type: Doc, required: true } },
@@ -23,14 +24,20 @@ export default defineComponent({
     },
     text() {
       const hasOutstanding = isPesa(this.doc.outstandingAmount);
-      if (hasOutstanding && this.status === 'Outstanding') {
+
+      if (hasOutstanding && this.status === 'Unpaid') {
         const amt = this.fyo.format(this.doc.outstandingAmount, 'Currency');
         return this.t`Unpaid ${amt}`;
       }
 
-      if (this.doc instanceof Invoice && this.status === 'NotTransferred') {
-        const amt = this.fyo.format(this.doc.stockNotTransferred, 'Float');
-        return this.t`Pending Qty. ${amt}`;
+      if (hasOutstanding && this.status === 'PartlyPaid') {
+        const outstandingPayment = this.fyo.format(
+          (this.doc.grandTotal as Money).sub(
+            this.doc.outstandingAmount as Money
+          ),
+          'Currency'
+        );
+        return this.t`Partly Paid ${outstandingPayment}`;
       }
 
       return {
@@ -45,6 +52,8 @@ export default defineComponent({
         Submitted: this.t`Submitted`,
         Return: this.t`Return`,
         ReturnIssued: this.t`Return Issued`,
+        Unpaid: this.t`Unpaid`,
+        PartlyPaid: this.t`Partly Paid`,
       }[this.status];
     },
     color(): UIColors {
@@ -63,8 +72,10 @@ const statusColorMap: Record<Status, UIColors> = {
   Paid: 'green',
   Saved: 'blue',
   Submitted: 'blue',
-  Return: 'green',
-  ReturnIssued: 'green',
+  Return: 'gray',
+  ReturnIssued: 'gray',
+  Unpaid: 'red',
+  PartlyPaid: 'yellow',
 };
 
 function getStatus(doc: Doc) {
@@ -101,13 +112,6 @@ function getSubmittableStatus(doc: Doc) {
   }
 
   const isInvoice = doc instanceof Invoice;
-  if (
-    doc.isSubmitted &&
-    isInvoice &&
-    doc.outstandingAmount?.isZero() !== true
-  ) {
-    return 'Outstanding';
-  }
 
   if (doc.isSubmitted && isInvoice && (doc.stockNotTransferred ?? 0) > 0) {
     return 'NotTransferred';
@@ -121,6 +125,33 @@ function getSubmittableStatus(doc: Doc) {
     return 'Paid';
   }
 
+  if (
+    doc.isSubmitted &&
+    isInvoice &&
+    !doc.isCancelled &&
+    (doc.outstandingAmount as Money)?.isPositive() &&
+    (doc.outstandingAmount as Money)?.neq(doc.grandTotal as Money)
+  ) {
+    return 'PartlyPaid';
+  }
+
+  if (
+    doc.isSubmitted &&
+    isInvoice &&
+    !doc.isCancelled &&
+    (doc.outstandingAmount as Money)?.eq(doc.grandTotal as Money)
+  ) {
+    return 'Unpaid';
+  }
+
+  if (
+    doc.isSubmitted &&
+    isInvoice &&
+    doc.outstandingAmount?.isZero() !== true
+  ) {
+    return 'Outstanding';
+  }
+
   if (doc.isSubmitted) {
     return 'Submitted';
   }

src/utils/colors.ts

@@ -31,7 +31,7 @@ const getValidColor = (color: string) => {
 
 export function getBgColorClass(color: string) {
   const vcolor = getValidColor(color);
-  return `bg-${vcolor}-200 dark:bg-${vcolor}-700`;
+  return `bg-${vcolor}-200 dark:bg-${vcolor}-800`;
 }
 
 export function getColorClass(