WEB-490 :- use date pipeline to enhance the displaying of date

[Omar-Nabil2]

Description

use date pipeline to enhance the displaying of date.

Screenshots, if any

before

after

Checklist

Please make sure these boxes are checked before submitting your pull request - thanks!

• If you have multiple commits please combine them into one commit by squashing them.

• Read and understood the contribution guidelines at web-app/.github/CONTRIBUTING.md.

Summary by CodeRabbit

Release Notes

• Style
  • Updated date formatting across the application for improved consistency. Dates now display in a standardized, readable format throughout accounting entries, provisioning details, search results, and notifications pages.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Note

.coderabbit.yaml has unrecognized properties

CodeRabbit is using all valid settings from your configuration. Unrecognized properties (listed below) have been ignored and may indicate typos or deprecated fields that can be removed.

⚠️ Parsing warnings (1)

Validation error: Unrecognized key(s) in object: 'pre_merge_checks'

⚙️ Configuration instructions

• Please see the configuration documentation for more information.
• You can also validate your configuration using the online YAML validator.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Walkthrough

Date formatting updated across multiple accounting and notification components, replacing raw date values with Angular's date pipe using 'medium' format. Additionally, a custom DatetimeFormatPipe import was removed from search-journal-entry component as it is no longer needed.

Changes

Cohort / File(s)	Summary
Closing Entries Date Formatting src/app/accounting/closing-entries/closing-entries.component.html, src/app/accounting/closing-entries/view-closure/view-closure.component.html	Applied date pipe with 'medium' format to closingDate and createdDate fields for consistent date presentation.
Provisioning Entries Date Formatting src/app/accounting/provisioning-entries/provisioning-entries.component.html, src/app/accounting/provisioning-entries/view-provisioning-entry/view-provisioning-entry.component.html, src/app/accounting/provisioning-entries/view-provisioning-journal-entries/view-provisioning-journal-entries.component.html	Applied date pipe with 'medium' format to createdDate and transactionDate fields for consistent date rendering.
Search Journal Entry Date Formatting & Pipe Removal src/app/accounting/search-journal-entry/search-journal-entry.component.html, src/app/accounting/search-journal-entry/search-journal-entry.component.ts	Replaced custom datetimeFormat pipe with Angular date pipe (medium format) in template; removed DatetimeFormatPipe import from component declarations.
Notifications Date Formatting src/app/notifications/notifications-page/notifications-page.component.html, src/app/shared/notifications-tray/notifications-tray.component.html	Applied date pipe with 'medium' format to createdAt fields in notification display entries.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Highly homogeneous changes—consistent date formatting pattern applied across multiple files with minimal variation
• No logic changes, control flow modifications, or structural alterations
• Single supporting TypeScript change (import removal) is straightforward
• Verification can focus on confirming the 'medium' format produces acceptable output and that the DatetimeFormatPipe removal doesn't create regressions elsewhere

Suggested reviewers

• steinwinde
• gkbishnoi07

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: replacing custom date formatting with Angular's built-in date pipe across multiple components.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bdf0e71 and ee738b5.

📒 Files selected for processing (9)

• src/app/accounting/closing-entries/closing-entries.component.html (1 hunks)
• src/app/accounting/closing-entries/view-closure/view-closure.component.html (2 hunks)
• src/app/accounting/provisioning-entries/provisioning-entries.component.html (1 hunks)
• src/app/accounting/provisioning-entries/view-provisioning-entry/view-provisioning-entry.component.html (1 hunks)
• src/app/accounting/provisioning-entries/view-provisioning-journal-entries/view-provisioning-journal-entries.component.html (1 hunks)
• src/app/accounting/search-journal-entry/search-journal-entry.component.html (1 hunks)
• src/app/accounting/search-journal-entry/search-journal-entry.component.ts (0 hunks)
• src/app/notifications/notifications-page/notifications-page.component.html (1 hunks)
• src/app/shared/notifications-tray/notifications-tray.component.html (1 hunks)

💤 Files with no reviewable changes (1)

• src/app/accounting/search-journal-entry/search-journal-entry.component.ts

🧰 Additional context used

📓 Path-based instructions (1)

src/app/**

⚙️ CodeRabbit configuration file

src/app/**: For Angular code: verify component separation, trackBy on *ngFor,
strict type safety, and clean observable patterns.

Files:

• src/app/accounting/provisioning-entries/view-provisioning-entry/view-provisioning-entry.component.html
• src/app/shared/notifications-tray/notifications-tray.component.html
• src/app/accounting/closing-entries/closing-entries.component.html
• src/app/accounting/provisioning-entries/view-provisioning-journal-entries/view-provisioning-journal-entries.component.html
• src/app/accounting/provisioning-entries/provisioning-entries.component.html
• src/app/notifications/notifications-page/notifications-page.component.html
• src/app/accounting/closing-entries/view-closure/view-closure.component.html
• src/app/accounting/search-journal-entry/search-journal-entry.component.html

🔇 Additional comments (8)

src/app/accounting/provisioning-entries/provisioning-entries.component.html (1)

30-30: Date formatting update looks good.

The switch from raw date value to Angular's built-in date pipe with 'medium' format is correct and improves presentation consistency across the application.

src/app/notifications/notifications-page/notifications-page.component.html (1)

17-17: Date formatting update is correct.

The change to display createdAt with the date pipe 'medium' format is properly implemented and aligns with other components in the PR.

src/app/accounting/provisioning-entries/view-provisioning-entry/view-provisioning-entry.component.html (1)

28-28: Date formatting change is correct.

The createdDate is properly formatted using the date pipe. Additionally, all @for loops in this template properly include track properties, complying with Angular best practices.

src/app/accounting/closing-entries/closing-entries.component.html (1)

36-36: Date formatting update is properly implemented.

The closingDate change to use the date pipe with 'medium' format is correct. The @for loop on line 19 properly includes the track parameter.

src/app/accounting/closing-entries/view-closure/view-closure.component.html (1)

27-27: Both date fields correctly formatted.

The closingDate (line 27) and createdDate (line 51) are both properly formatted using the date pipe with 'medium' format. Changes maintain consistency across the view component.

Also applies to: 51-51

src/app/accounting/provisioning-entries/view-provisioning-journal-entries/view-provisioning-journal-entries.component.html (1)

23-25: Date formatting is properly implemented.

The transactionDate is correctly formatted using the date pipe with 'medium' format. The multi-line formatting (lines 23-25) maintains readability.

src/app/shared/notifications-tray/notifications-tray.component.html (1)

28-28: Date formatting is consistent and correct across both notification loops.

Both createdAt fields (lines 28 and 35) use the date pipe with 'medium' format. Both @for loops properly include track parameters as per Angular best practices.

Also applies to: 35-35

src/app/accounting/search-journal-entry/search-journal-entry.component.html (1)

110-110: Inconsistent date formatting in table cells—verify complete refactoring.

Line 110 uses a custom dateFormat pipe for transactionDate, while line 125 uses the built-in date: 'medium' pipe for submittedOnDate. This creates inconsistent presentation in the same table.

The AI summary mentions that DatetimeFormatPipe was removed from the component, but it's unclear whether:

• dateFormat (line 110) is the same as the removed DatetimeFormatPipe
• The refactoring was intentionally incomplete
• transactionDate should also be updated to use date: 'medium'

Please verify the TypeScript file changes to confirm the imports and clarify the intended formatting approach for both date fields.

Also applies to: 125-125

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[alberto-art3ch]

There are already a dateFormat and dateTimeFormat pipes, obviously based in the date pipe, but those use the date and datetime format setting

[Omar-Nabil2]

But as you can see in the SearchJournalEntryComponent, the datetimeFormat pipe isn’t working correctly. I think the date pipe is much better than datetimeFormat — or did you mean I should fix datetimeFormat instead of using the date pipe? @alberto-art3ch