Styled Card - Copy this React, Mui Component to your project

Refined Design Idea for Notes & Memos Page 1. Overall Layout Enhancements Top Header: Include a clear title (Notes & Memos) in large font. Use a search bar at the top for easy memo search, allowing users to quickly search by title or keywords. Filters (for Category, Status, and Time Range) should be placed prominently next to the search bar. The Memo Status Progress Bar provides an immediate understanding of the active vs. archived memos, which can be more visually represented with a dynamic color fill (e.g., blue for active, gray for archived). Summary Information: Display Total Memos and Memo Status summary in a clean, concise manner. Add small trend indicators (e.g., percentage growth in active memos compared to archived memos) for better context. 2. Memos Table Section The memos table is the core part of this page, showcasing important details about each memo. Columns: Memo Title: Ensure that memo titles are clickable and lead to the detailed memo view. Date Created: Add a calendar icon next to the date for easy visual identification. Status: Use color-coded badges (e.g., green for active, gray for archived) to make statuses more noticeable. Category: Use category tags or icons to quickly identify the type of memo (e.g., Finance, HR, Operations). Actions: Include Edit, Delete, and Archive options. Make the buttons visually distinct with hover effects to improve interactivity. Ensure icons are clear and intuitive (e.g., pencil for edit, trash can for delete).