Ui change
Hi, I’m Richa — a Senior Frontend Engineer with 5+ years of experience building scalable, production-grade web interfaces for enterprise and consumer applications. I work primarily with React, TypeScript, and modern frontend architectures, focusing on component systems, performance, and maintainability. Most of my experience comes from building real-world products in regulated domains like banking and insurance, where clarity, reliability, and long-term ownership matter more than quick demos. Through this blog, I write about frontend engineering fundamentals, scalable UI design, problem-solving, and the lessons I’ve learned working on large codebases. My goal is to share practical insights — not shortcuts — for developers who want to grow strong engineering foundations. I also mentor early-career developers and strongly believe that curiosity, asking the right questions, and understanding why something works are more important than memorizing tools. If you’re serious about improving as an engineer, you’re in the right place.
Implement the Internal Tasks UI in my existing Lit.js project by following the requirements below. The screenshots are reference designs, but implement the UI entirely using my existing codebase and reusable service-based components.
1. Internal Tasks Modal — Initial State
When the user clicks the existing Internal Tasks button on the task details page, open a modal over the current page.
Modal header
- Display the title "Internal Tasks" at the top-left.
- Display the current Task ID below the title.
- Display a close (X) icon at the top-right.
- Use the existing modal/dialog component and its built-in header, size, and backdrop configuration.
Data Grid
Use the existing Table SC / Data Grid service-based component. Do not create a new HTML table.
Configure the columns in this order:
1. Task ID
2. Segment
3. Reminder Date
4. Instruction Type
5. Status
6. Created By
When no internal task records exist, show this centered empty-state message:
"There is no data available. To continue, please create a new record."
Display the "+ Add New" button below the empty-state message, inside the grid area.
The modal footer should contain a Close button aligned to the bottom-right.
The initial modal should be compact, similar to the first reference screenshot. The underlying task details page should remain visible behind the backdrop.
2. Add New Task Form — Expanded State
When the user clicks "+ Add New", display the add-task form below the Internal Tasks grid within the same modal, matching the second reference screenshot.
Do not navigate to another page or create an unrelated modal. Reuse the existing accordion/expandable section component if that matches the existing project pattern.
The expanded modal should display the following sections in order.
A. Internal Tasks section
Keep the following at the top:
- Internal Tasks title
- Current Task ID
- Existing Data Grid with the six columns
- Empty-state message when there are no records
- Add New button
The grid and form must coexist in the expanded state.
B. Client Details section
Display an accordion section titled "Client Details".
Inside it, show the client information in a two-column layout where supported by existing components:
- LEID — display the current client's LEID.
- LE Name — display the current client's legal/entity name.
Use values from the existing task/client context. Do not hardcode example client data.
Match the reference design, including section heading, labels, values, and expand/collapse icon.
C. Task Details section
Display an accordion section titled "Task Details".
Arrange the fields in two columns where supported by the existing form layout.
Left column:
- Location — existing input or select component.
- Instruction Type — existing select/dropdown component.
- Description — existing multiline textarea component.
Right column:
- Segment — existing select/dropdown component.
- Reminder Date — existing date picker with calendar icon.
Use the exact existing field labels, field types, dropdown options, and validation rules wherever they are already defined in the project.
Keep the form aligned, with consistent spacing, label placement, and field widths according to the existing design system.
D. Task Attachment section
Display a section titled "Task Attachment".
Use the existing attachment/file-upload component with its built-in drag-and-drop area.
The upload area should display instructions similar to:
"Drag and drop files here to upload or browse"
Below the upload area, show selected or existing attachments using the existing attachment-list component. Each item should display its filename and any supported file actions.
Preserve the existing file size restrictions, accepted file types, validation, and upload handling.
Do not invent attachment functionality that is not supported by the project.
E. Assign / Assign Task section
Display the existing assignment section below Task Attachment.
Use the existing employee/user selection component and available data source.
Match the reference design for the assignment label, dropdown, section placement, and alignment.
Do not create mock employee data if the project already provides a suitable source.
F. Form Footer
Display two actions at the bottom-right:
- Cancel
- Create
Use the existing button component and supported variants.
Cancel should discard unsaved form changes and close or collapse the form according to the existing application behavior.
Create should validate the required fields and invoke the existing task creation service or established event flow.
Prevent duplicate submissions and use the existing success/error notification pattern.
If no creation service exists, do not invent an API endpoint. Implement only the supported UI and integration points.
3. Interaction and State Management
Implement the following behavior:
1. Clicking Internal Tasks opens the modal.
2. The modal displays the current Task ID.
3. The Data Grid loads internal task records using the existing data source.
4. While records are loading, use the existing loading indicator.
5. When the request succeeds with no records, display the empty state and Add New button.
6. Clicking Add New expands the modal to display the form below the grid.
7. The user can expand or collapse Client Details and Task Details using the existing accordion components.
8. The user can interact with the supported fields, date picker, file upload, and employee selector.
9. Clicking Cancel does not create a task and resets unsaved values according to existing conventions.
10. Clicking Create validates the form and uses the existing creation flow.
11. After successful creation, refresh the Data Grid using the existing data-update mechanism.
12. Display the newly created record in the grid when returned by the existing service.
13. Closing the modal should clean up temporary state and event listeners as appropriate.
Do not show the empty-state message while the grid is still loading. Handle loading, empty, populated, and error states separately.
4. Mandatory Existing Component Reuse
Before editing any files, inspect the repository and identify the actual implementations and usage patterns for:
- Internal Tasks button
- Modal/dialog component
- Table SC / Data Grid component
- Accordion/expandable section component
- Input and textarea components
- Dropdown/select component
- Date picker
- File upload and attachment list
- Employee/user selector
- Buttons, icons, notifications, and validation
- Existing task and client data services
Use the exact component names, imports, properties, events, and configuration supported by the repository.
Follow the existing service-based component architecture. Reuse shared components instead of rebuilding their functionality with raw HTML.
5. Strict Styling Requirements
Do not use custom CSS.
Do not add:
- New CSS selectors or style rules
- New "
