Add toggleable sort by name and show created by options in PrintChargeItems (#15306)

Author: rithviknishad

public/locale/en.json

@@ -5251,6 +5251,7 @@
   "show_all_notifications": "Show All",
   "show_all_slots": "Show all slots",
   "show_available_beds_only": "Show Available Beds Only",
+  "show_created_by": "Show Created By",
   "show_default_presets": "Show Default Presets",
   "show_less": "Show less",
   "show_notes": "Show notes",
@@ -5299,7 +5300,7 @@
   "sort_by_latest_created": "Newest Entry First",
   "sort_by_latest_payment": "Newest Payment First",
   "sort_by_locations": "Number of Locations",
-  "sort_by_name": "Name",
+  "sort_by_name": "Sort by name",
   "sort_by_net_content": "Sort by net content",
   "sort_by_oldest_created": "Oldest Entry First",
   "sort_by_oldest_payment": "Oldest Payment First",

src/pages/Facility/billing/account/components/PrintChargeItems.tsx

@@ -79,12 +79,16 @@ export const PrintChargeItems = (props: {
   const [summaryMode, setSummaryMode] = useState(false);
   const [hideHeader, setHideHeader] = useState(false);
   const [preserveHeaderSpace, setPreserveHeaderSpace] = useState(true);
+  const [sortByName, setSortByName] = useState(false);
+  const [showCreatedBy, setShowCreatedBy] = useState(false);
 
   const hideCategoryLabel = `${t("hide_category_grouping")}`;
   const hidePaymentTypeLabel = `${t("hide_payment_type_grouping")}`;
   const summaryLabel = `${t("summary")}`;
   const hideHeaderLabel = `${t("hide_header")}`;
   const preserveHeaderSpaceLabel = `${t("preserve_header_space")}`;
+  const sortByNameLabel = `${t("sort_by_name")}`;
+  const showCreatedByLabel = `${t("show_created_by")}`;
 
   const { data: account } = useQuery({
     queryKey: ["account", accountId],
@@ -205,6 +209,31 @@ export const PrintChargeItems = (props: {
                 </label>
               </div>
             )}
+
+            <div className="gap-2 flex items-center">
+              <Switch
+                id="sort-by-name"
+                checked={sortByName}
+                onCheckedChange={setSortByName}
+              />
+              <label htmlFor="sort-by-name" className="cursor-pointer text-sm">
+                {sortByNameLabel}
+              </label>
+            </div>
+
+            <div className="gap-2 flex items-center">
+              <Switch
+                id="show-created-by"
+                checked={showCreatedBy}
+                onCheckedChange={setShowCreatedBy}
+              />
+              <label
+                htmlFor="show-created-by"
+                className="cursor-pointer text-sm"
+              >
+                {showCreatedByLabel}
+              </label>
+            </div>
           </>
         )}
       </div>
@@ -331,6 +360,11 @@ export const PrintChargeItems = (props: {
                                   <TableHead className="font-bold text-center w-8">
                                     {t("status")}
                                   </TableHead>
+                                  {showCreatedBy && (
+                                    <TableHead className="font-bold w-16">
+                                      {t("created_by")}
+                                    </TableHead>
+                                  )}
                                   <TableHead className="font-bold w-10">
                                     {t("rate")}
                                   </TableHead>
@@ -376,8 +410,13 @@ export const PrintChargeItems = (props: {
                               const rows: React.ReactNode[] = [];
 
                               sortedCategories.forEach((categoryTitle) => {
-                                const items: ChargeItemRead[] =
+                                const baseItems: ChargeItemRead[] =
                                   groups[categoryTitle] ?? [];
+                                const items = sortByName
+                                  ? baseItems.sort((a, b) =>
+                                      a.title.localeCompare(b.title),
+                                    )
+                                  : baseItems;
 
                                 const categoryTotal = add(
                                   ...items.map((i) => i.total_price || 0),
@@ -413,7 +452,7 @@ export const PrintChargeItems = (props: {
                                         className="font-bold hover:bg-transparent"
                                       >
                                         <TableCell
-                                          colSpan={5}
+                                          colSpan={showCreatedBy ? 6 : 5}
                                           className="capitalize"
                                         >
                                           {categoryTitle}
@@ -462,6 +501,14 @@ export const PrintChargeItems = (props: {
                                               {t(chargeItem.status)}
                                             </span>
                                           </TableCell>
+                                          {showCreatedBy && (
+                                            <TableCell className="w-16">
+                                              {
+                                                chargeItem.created_by
+                                                  ?.first_name
+                                              }
+                                            </TableCell>
+                                          )}
                                           <TableCell className="text-right w-10">
                                             <MonetaryDisplay
                                               amount={unitPrice}
@@ -489,7 +536,7 @@ export const PrintChargeItems = (props: {
                                   className="bg-muted/30 font-semibold"
                                 >
                                   <TableCell
-                                    colSpan={5}
+                                    colSpan={showCreatedBy ? 6 : 5}
                                     className="text-right pr-2"
                                   >
                                     {t("net_total")}

src/types/billing/chargeItem/chargeItem.ts

@@ -97,6 +97,8 @@ export interface ChargeItemRead extends ChargeItemBase {
   performer_actor?: UserReadMinimal;
   created_date: string;
   modified_date: string;
+  created_by: UserReadMinimal;
+  updated_by: UserReadMinimal;
 }
 
 export interface ChargeItemBatchResponse {