Customer portal milestone 1 #4
Draft
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Provides example environment variables for Asgardeo authentication and backend configuration in the customer portal webapp.
Introduces Vite configuration with React, Generouted, and PWA plugins for the customer portal webapp. Adds TypeScript configuration files for both app and node environments, enabling strict type checking and bundler compatibility.
Introduces a new utility file for authentication configuration using Asgardeo and defines the backend base URL for API calls in the customer portal webapp.
Introduces AppAuthProvider to manage authentication state, handle idle timeouts, and provide sign-in/sign-out functionality using Asgardeo. Includes error handling, session management, and exposes an authentication context for use throughout the customer portal webapp.
Introduces a new router.ts file generated by Generouted for the customer portal webapp. Defines route paths, parameter types, and exports routing utilities for use throughout the application.
Introduces the base HTML file for the customer portal web application, setting up the root div and linking the main TypeScript entry point.
Introduces vite-env.d.ts to define environment variables and types for Vite in the customer portal webapp.
Introduces auth.ts with utilities for storing, retrieving, refreshing, and decoding JWT tokens. Provides a mechanism to register a token refresh callback and exposes functions to manage access and ID tokens in localStorage.
Introduces an axios-based API client with request and response interceptors for logging, automatic token attachment, and 401 retry logic with token refresh. Includes cURL generation for debugging and manages concurrent token refresh attempts.
Introduces a new endpoints.ts file defining API endpoint configurations, including helper types, a URL builder, and endpoint generators for projects and cases. This centralizes endpoint management and supports mock responses and caching.
Initial commit of package-lock.json to lock dependencies for the customer portal webapp. This ensures consistent installs and reproducible builds across environments.
Initial package.json with dependencies, devDependencies, and scripts for the customer portal web application. Sets up React, Vite, MUI, authentication, and development tooling.
Introduces a new ESLint config using recommended settings for JavaScript, TypeScript, React Hooks, and Vite React Refresh. Applies linting to TypeScript files and sets browser globals, with 'dist' directory ignored.
Introduced three new utility files: color.tsx for status and priority color/icon helpers, constants.ts for shared constants, and dateUtils.ts for formatting relative time strings. These utilities centralize common logic for easier reuse and maintainability.
Introduces a new theme configuration using Material-UI's createTheme, including custom palette extensions for status colors and typography settings. Also adds an index file for theme exports to streamline imports across the application.
Introduces new TypeScript type definition files for icons, project metadata, projects, and support cases in the customer portal webapp. These types will help ensure type safety and consistency across the application when handling related data.
Expanded .gitignore to include Node.js dependencies, build outputs, environment files, log files, and common editor/project files. This helps prevent accidental commits of generated, sensitive, or unnecessary files.
Introduces interfaces for Comment, CallRequest, Attachment, KBArticle, and CaseDetails to define the structure of case-related data in the customer portal webapp.
Introduces useGet and useAPI hooks for handling GET requests and mutations with Tanstack React Query and Axios. Includes support for mock data in development, request cancellation, and automatic query invalidation on mutation success.
Introduces new pages for project selection, project updates, and support case management in the customer portal webapp. Includes support dashboard, case listing with filters and pagination, and project updates header. These additions enhance navigation and support workflows for users.
Introduces new pages for project details, legal contracts, security center, and settings under the [sysId] route in the customer portal webapp. The project details page includes a detailed overview with project information, statistics, contacts, and recent activity, while the other pages provide headers and placeholders for future content.
Introduces main.tsx to initialize the React app with theming, authentication, and data fetching providers. Sets up routing and global styles for the customer portal.
Introduces new pages for viewing individual support case details, creating a new support case, and a layout component for case-related routes in the customer portal webapp. These pages include form handling, API integration, and UI components for case management.
Introduces new pages under [sysId] for the customer portal webapp, including dashboard, announcements, community, and engagements. The dashboard page features statistics, charts, and a paginated table of outstanding cases, all integrated with project context and API data.
Introduces useRouter for Next.js-style routing compatibility using react-router-dom, and useUser for fetching and decoding user info from ID tokens with React Query and Asgardeo Auth. Also includes a helper to extract initials from user names.
Introduces ProjectContext and ProjectProvider to manage and provide project data, including the current project, loading and error states, and total records. This context simplifies access to project information throughout the application.
Introduced several new icon components under the assets/icons directory, including ProjectIcons (Server, Package, Building), TagIcon, and common icons (Crown, FolderOpen, Users). These reusable React components provide consistent iconography for the customer portal webapp.
Added the WSO2 logo SVG file to the public directory of the customer portal webapp for use in the application's UI.
Introduced new reusable SVG icon components for the dashboard: CircleAlertIcon, CircleCheckIcon, ClockIcon, EllipsisVerticalIcon, and FunnelIcon. These components are implemented as React functional components and accept width and height props for flexibility.
Introduces StatCard, a reusable card component for displaying statistics, and SupportStatsRow, which arranges multiple StatCards to show support case metrics. These components enhance the UI for presenting support statistics in the customer portal.
Replaced react-router-dom's useParams with a custom useParams from the local router module in both security-center and updates pages. Adjusted parameter extraction to match the new router's API.
Moved data transformation logic for dashboard charts (active cases and outstanding incidents) into a new dashboardUtils.ts file for better modularity and reuse. Moved date formatting and severity color helper functions to their respective utility files. Updated dashboard page to use these new utility functions.
Updated BookOpenIcon, CirclePauseIcon, and CirclePlayIcon to use the shared BaseIcon component for consistency and code reuse. Enhanced BaseIcon to accept className and additional props.
Updated CircleXIcon, InfoIcon, Maximize2Icon, PaperclipIcon, and SendIcon to use the shared BaseIcon component and imported IconProps from a central types file. This reduces code duplication and standardizes icon rendering.
Added Apache 2.0 license headers to all support icon component files in the customer portal webapp. Also commented out all exports in support-icons.tsx, likely to temporarily disable re-exporting these icons.
Updated imports for Maximize2Icon, FileTextIcon, PaperclipIcon, and SendIcon to reference their specific files instead of the general support-icons file. This improves clarity and maintainability of icon usage in CaseActivity, CaseAttachments, and CaseCommentInput components.
Uncommented and enabled exports in the support-icons barrel file, allowing components to import icons from a single entry point. Updated all relevant imports in CaseActivity, CaseAttachments, and CaseDetailsPage to use the barrel file. Adjusted color utility to import icons directly from their respective files for dashboard and support icons.
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
Restructured the icon components by moving and renaming files for better organization, grouping dashboard and support icons into stat, action, common, and navigation subfolders. Introduced index files for easier imports, updated icon components to use a shared BaseIcon, and adjusted imports throughout the codebase to match the new structure.
Rashmika998
added
Type/New Feature
Replaces the inline SVG in CircleCheckIcon with the shared BaseIcon component for consistency and reusability. Also updates the export to a named export.
|
@coderabbitai full review |
✅ Actions performedFull review triggered. |
apps/customer-portal/webapp/data/Dashboard/StatsConfig/statsConfig.tsx
Outdated
Show resolved
Hide resolved
Renamed icon files and exports to use consistent kebab-case naming, moved case-related icons to a new support/case directory, and updated all imports and usages accordingly. Removed unused icon files and added a new WSO2 logo icon for the side nav bar. This improves maintainability and consistency across the codebase.
Added Apache 2.0 license headers to WSO2 icon components in the dashboard, side-nav-bar, and support/case directories. Also updated the TagIcon to use 'currentColor' for the circle fill.
Reorganized project details icons by removing unused and duplicate icon files, consolidating exports into a single project-details-icons.tsx file, and updating imports in project-details.tsx. Also updated .env.example variable names for consistency and improved type usage in phone icon components.
There was a problem hiding this comment.
Pull request overview
This pull request introduces the first milestone of a customer portal application, implementing a comprehensive React-based web application with authentication, project management, support case tracking, and dashboard functionality.
Key Changes
- Complete customer portal web application setup with Vite, React, TypeScript, and Material-UI
- Authentication integration with Asgardeo for secure user login and session management
- Project and case management features with filtering, sorting, and pagination
- Dashboard with statistics, charts, and case tracking
Reviewed changes
Copilot reviewed 174 out of 178 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| vite.config.ts | Vite configuration with PWA support and custom environment prefix |
| tsconfig files | TypeScript configuration for app and build tooling |
| src/vite-env.d.ts | Environment variable type definitions with syntax error |
| src/types/* | Type definitions for projects, cases, and metadata |
| src/utils/* | Utility functions for date formatting, colors, and dashboard data |
| src/services/* | API client, endpoints, and hooks for data fetching |
| src/providers/AppAuthProvider.tsx | Authentication provider with idle timeout handling |
| src/context/ProjectContext.tsx | Project context for managing current project state |
| src/components/* | Reusable UI components for layout, support, and dashboard |
| src/pages/* | Page components for routing including dashboard, support, and project details |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| deploymentsCount: number; | ||
| totalCasesCount: number; | ||
| inProgressCasesCount: number; | ||
| "-": number; |
There was a problem hiding this comment.
The property name "-" is unclear and appears to be a placeholder or error. This should have a meaningful name that describes what this field represents.
| </Box> | ||
| <Box> | ||
| <Typography variant="h6" sx={{ fontWeight: 600 }}> | ||
| TODO |
There was a problem hiding this comment.
The text "TODO" indicates incomplete implementation. This should be replaced with proper content or removed if the feature is not yet ready.
| // specific language governing permissions and limitations | ||
| // under the License. | ||
|
|
||
| import { Box, Button, Card, Chip, Divider, Typography } from "@mui/material"; |
There was a problem hiding this comment.
Unused imports Button, Chip, Divider.
Comment on lines
19
to
28
| import { | ||
| ArrowRightIcon, | ||
| BotIcon, | ||
| AlertCircleIcon, | ||
| CheckCircleIcon, | ||
| ClockIcon, | ||
| ExternalLinkIcon, | ||
| ChatIcon, | ||
| PlayIcon, | ||
| } from "../../../assets/icons/support/support-icons"; |
There was a problem hiding this comment.
Unused imports ArrowRightIcon, BotIcon, ExternalLinkIcon, PlayIcon.
| chats: ChatSession[]; | ||
| } | ||
|
|
||
| const getStatusConfig = (isResolved: boolean, status: string) => { |
There was a problem hiding this comment.
Unused variable getStatusConfig.
| // specific language governing permissions and limitations | ||
| // under the License. | ||
|
|
||
| import { Box, Card, Typography } from "@mui/material"; |
There was a problem hiding this comment.
Unused imports Card, Typography.
|
|
||
| import React from "react"; | ||
| import { Box } from "@mui/material"; | ||
| import { useParams, useLocation, useNavigate } from "react-router-dom"; |
There was a problem hiding this comment.
Unused import useParams.
| export default function Home() { | ||
| const { | ||
| data, | ||
| isLoading: isLoadingProjects, |
There was a problem hiding this comment.
Unused variable isLoadingProjects.
| const { | ||
| data, | ||
| isLoading: isLoadingProjects, | ||
| isError: isErrorProjects, |
There was a problem hiding this comment.
Unused variable isErrorProjects.
Rashmika998
reviewed
Dec 18, 2025
|
|
||
| import type { StatsConfig } from "./types"; | ||
| import type { ProjectMetadataResponse } from "../../../src/types/project-metadata.types"; | ||
| import { CircleAlertIcon, ClockIcon, TrendingDownIcon , CircleCheckIcon} from "../../../src/assets/icons/dashboard/dashboard-icons"; |
There was a problem hiding this comment.
Instead of using relative paths, let's use aliases
Rashmika998
reviewed
Dec 18, 2025
| { | ||
| "name": "customer-portal", | ||
| "private": true, | ||
| "version": "0.0.0", |
There was a problem hiding this comment.
Suggested change
| "version": "0.0.0", | |
| "version": "0.1.0", |
Moved and consolidated icon components from various feature-specific directories into a common icons directory. Updated imports throughout the codebase to use the new centralized icon paths, and refactored some icons to use a shared BaseIcon component. This improves maintainability and consistency of icon usage across the application.
Moved and refactored the dashboard stats config logic from a separate data file to a utility function in dashboardUtils.tsx. Updated imports and usage across dashboard page and related files. Removed unused variables and cleaned up code in several components for clarity.
Consolidated imports of BaseIcon and IconProps in common icon components for improved clarity and consistency. Also removed unused dependencies from package.json to streamline the project.
Author
|
Need to create this using Oxygen Ui . On Hold. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Screen.Recording.2025-12-18.at.09.43.37.1.1.1.1.mov