apps/web/app/hooks/features/useReportActivity.ts (1)

268-269: 💡 Verification agent

🧩 Analysis chain

Update the conditional check to include new GroupByType values

The handleGroupByChange function only handles the 'application' special case, but with the new types added ('daily', 'weekly', 'member'), you may need to update this logic to ensure proper handling of all types.

---

🏁 Script executed:

#!/bin/bash
# Check where handleGroupByChange is called to understand the impact of new types

# Search for usages of handleGroupByChange
rg -A 2 "handleGroupByChange" --type tsx --type ts

# Search for places using GroupByType to see if they handle all cases
rg -A 5 "GroupByType" --type tsx --type ts

Length of output: 149

---

I'll re-run the verification search using file pattern filters instead of file type flags to gather more meaningful output. Please execute the script below:

Once we have the updated results, we can assess whether the new GroupByType values ('daily', 'weekly', 'member') are being handled correctly, or if the conditional needs to be updated further.

---

🏁 Script executed:

#!/bin/bash
# Re-run search for references to 'handleGroupByChange' and 'GroupByType' using glob patterns for .ts and .tsx files

echo "Searching for references to handleGroupByChange:"
rg "handleGroupByChange" -g "*.ts" -g "*.tsx"

echo "---"

echo "Searching for references to GroupByType:"
rg "GroupByType" -g "*.ts" -g "*.tsx"

Length of output: 2583

---

Action Required: Update mapping logic for new GroupByType values

The current implementation only remaps 'application' to 'date' and passes through all other values unchanged. Since the enum now also includes 'daily', 'weekly', and 'member', you should update the conditional logic to handle these cases appropriately. For example, if 'daily' should also map to 'date', or if 'weekly' and 'member' require their own specific mappings (possibly to 'week' or 'employee'), refactor this section—potentially using a switch or mapping object—to cover all valid types.

• Location: apps/web/app/hooks/features/useReportActivity.ts (lines 268–269)
• Suggestion: Replace the existing ternary with logic that explicitly maps each GroupByType value to the intended group value before calling fetchActivityReport.

apps/web/app/[locale]/time-and-activity/page.tsx (1)

1-8: Consider renaming the component for better clarity and to resolve spelling issues

The component name "TimectivityComponents" is flagged as an unknown word by the static analysis tools. This appears to be a portmanteau of "Time" and "Activity", but may cause confusion for other developers.

-import TimectivityComponents from './Components/page-component'
+import TimeActivityComponents from './Components/page-component'

function TimeAndActivity() {
-  return (<TimectivityComponents/> )
+  return (<TimeActivityComponents />)
}

export default TimeAndActivity

Additionally, you'll need to update the component name in the page-component.tsx file.

🧰 Tools

🪛 GitHub Check: Cspell

[warning] 2-2:
Unknown word (Timectivity)

---

[warning] 5-5:
Unknown word (Timectivity)

🪛 GitHub Actions: Check Spelling and Typos with cspell

[warning] 2-2: Unknown word (Timectivity)

---

[warning] 5-5: Unknown word (Timectivity)

apps/web/app/hooks/features/useReportActivity.ts (1)

70-70: Improve type definition formatting for better readability

The GroupByType type definition has been expanded with new options but lacks consistent spacing between options.

-export type GroupByType = 'date' | 'project' | 'employee' | 'application'|'daily'|'weekly'|'member';
+export type GroupByType = 'date' | 'project' | 'employee' | 'application' | 'daily' | 'weekly' | 'member';

apps/web/app/[locale]/time-and-activity/Components/GroupBySelect.tsx (2)

13-13: Consider using controlled component pattern for better state management

The component uses defaultValue which won't react to changes in the groupByType prop after initial render. For a more reactive component, consider using value instead of defaultValue.

-        <Select defaultValue={groupByType} onValueChange={onGroupByChange}>
+        <Select value={groupByType} onValueChange={onGroupByChange}>

This change ensures the component will always reflect the current value from props.

---

6-9: Enhance prop interface with default values

The component accepts groupByType but doesn't specify a default value when not provided. Consider adding a default value to avoid undefined behavior.

interface GroupBySelectProps {
    onGroupByChange?: (value: GroupByType) => void;
-    groupByType?: GroupByType;
+    groupByType?: GroupByType;
}

-export function GroupBySelectTimeActivity({ onGroupByChange, groupByType }: GroupBySelectProps) {
+export function GroupBySelectTimeActivity({ 
+    onGroupByChange, 
+    groupByType = 'daily' 
+}: GroupBySelectProps) {

apps/web/app/[locale]/time-and-activity/Components/page-component.tsx (2)

27-27: Use translation for consistency with other breadcrumb items

The first breadcrumb title uses translations, but the "Time and Activity" title is hardcoded. For internationalization consistency, consider using the translation function for all UI text.

-			{ title: 'Time and Activity', href: `/${currentLocale}/time-and-activity` }
+			{ title: JSON.parse(t('pages.timeActivity.BREADCRUMB')), href: `/${currentLocale}/time-and-activity` }

Make sure to add the corresponding translation key to your localization files.

---

54-56: Missing implementation of time activity UI controls

The header area inside the Card (with h-[105px] height) is empty. This appears to be where the time period selector and grouping controls should be placed.

It appears that there's a missing implementation of the UI controls for time activity tracking. Would you like me to provide a suggestion for implementing this section using the GroupBySelectTimeActivity component and other necessary controls?

apps/web/app/[locale]/time-and-activity/Components/ViewSelect.tsx (3)

1-79: Component implementation looks good but could benefit from internationalization improvements.

The ViewSelect component is well-structured with proper state management, but the hardcoded English labels should use translations for consistency.

You're already importing the translation hook but not using it for the labels. Consider updating the labels to use translations:

-    { id: 'member', label: 'Member', checked: true },
-    { id: 'project', label: 'Project', checked: true },
-    { id: 'task', label: 'Task', checked: true },
-    { id: 'trackedHours', label: 'Tracked Hours', checked: true },
-    { id: 'earnings', label: 'Earnings', checked: true },
-    { id: 'activityLevel', label: 'Activity Level', checked: true },
+    { id: 'member', label: t('timeActivity.MEMBER'), checked: true },
+    { id: 'project', label: t('timeActivity.PROJECT'), checked: true },
+    { id: 'task', label: t('timeActivity.TASK'), checked: true },
+    { id: 'trackedHours', label: t('timeActivity.TRACKED_HOURS'), checked: true },
+    { id: 'earnings', label: t('timeActivity.EARNINGS'), checked: true },
+    { id: 'activityLevel', label: t('timeActivity.ACTIVITY_LEVEL'), checked: true },

Also on line 57, replace:

-          View
+          {t('timeActivity.VIEW')}

---

36-78: Consider adding props to make the component more reusable.

The component doesn't expose any way to control or read the selected view options from outside, limiting its reusability.

Consider adding props to make the component more flexible:

+ interface ViewSelectProps {
+   defaultOptions?: ViewOption[];
+   onChange?: (options: ViewOption[]) => void;
+ }
+ 
- export default function ViewSelect() {
+ export default function ViewSelect({ defaultOptions, onChange }: ViewSelectProps = {}) {
  const t = useTranslations();
-  const [viewOptions, setViewOptions] = React.useState<ViewOption[]>([
+  const defaultViewOptions = [
    { id: 'member', label: 'Member', checked: true },
    { id: 'project', label: 'Project', checked: true },
    { id: 'task', label: 'Task', checked: true },
    { id: 'trackedHours', label: 'Tracked Hours', checked: true },
    { id: 'earnings', label: 'Earnings', checked: true },
    { id: 'activityLevel', label: 'Activity Level', checked: true },
-  ]);
+  ];
+  const [viewOptions, setViewOptions] = React.useState<ViewOption[]>(defaultOptions || defaultViewOptions);

  const handleCheckChange = (id: string) => {
-    setViewOptions(prev =>
-      prev.map(option =>
+    setViewOptions(prev => {
+      const newOptions = prev.map(option =>
        option.id === id ? { ...option, checked: !option.checked } : option
-      )
-    );
+      );
+      onChange?.(newOptions);
+      return newOptions;
+    });
  };

---

41-57: Extract SVG icon to a separate component.

Consider extracting the SVG icon into a separate component for better maintainability and reusability.

+// In a separate file or at the top of this file
+const ViewIcon = ({ className }: { className?: string }) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      d="M4 5C4 4.44772 4.44772 4 5 4H19C19.5523 4 20 4.44772 20 5V7C20 7.55228 19.5523 8 19 8H5C4.44772 8 4 7.55228 4 7V5Z"
+      className="fill-current"
+    />
+    <path
+      d="M4 13C4 12.4477 4.44772 12 5 12H19C19.5523 12 20 12.4477 20 13V15C20 15.5523 19.5523 16 19 16H5C4.44772 16 4 15.5523 4 15V13Z"
+      className="fill-current"
+    />
+  </svg>
+);

// Then in your Button:
<Button variant="outline" className="gap-2">
-  <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className="w-4 h-4"
-  >
-    <path
-      d="M4 5C4 4.44772 4.44772 4 5 4H19C19.5523 4 20 4.44772 20 5V7C20 7.55228 19.5523 8 19 8H5C4.44772 8 4 7.55228 4 7V5Z"
-      className="fill-current"
-    />
-    <path
-      d="M4 13C4 12.4477 4.44772 12 5 12H19C19.5523 12 20 12.4477 20 13V15C20 15.5523 19.5523 16 19 16H5C4.44772 16 4 15.5523 4 15V13Z"
-      className="fill-current"
-    />
-  </svg>
+  <ViewIcon className="w-4 h-4" />
  View
</Button>

apps/web/app/[locale]/time-and-activity/Components/date-range-picker-time-activity.tsx (2)

3-31: Inconsistent indentation style.

The file uses a mix of tabs and spaces for indentation, which can lead to formatting inconsistencies.

Consider standardizing on a single indentation style throughout the file (either tabs or spaces, but not both).
For example, lines 8-25 use tabs, while other parts of the file might be using spaces.

---

109-111: Multiple stopPropagation calls may indicate underlying event handling issues.

The component uses three separate event stopPropagation calls which might indicate an underlying issue with event bubbling.

A single event handler could likely handle all three cases:

-				onClick={(e) => e.stopPropagation()}
-				onMouseDown={(e) => e.stopPropagation()}
-				onChange={(e) => e.stopPropagation()}
+				onClick={(e) => e.stopPropagation()}
+				onMouseDown={(e) => e.stopPropagation()}

The onChange event on a div is unusual and likely unnecessary since divs don't typically have change events.

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

Learnt from: CREDO23
PR: ever-co/ever-teams#3392
File: apps/web/app/[locale]/reports/weekly-limit/components/group-by-select.tsx:42-51
Timestamp: 2024-12-05T09:04:08.049Z
Learning: In the `GroupBySelect` component (`apps/web/app/[locale]/reports/weekly-limit/components/group-by-select.tsx`), only one option can be selected at a time; two options cannot be selected simultaneously.

apps/web/app/[locale]/time-and-activity/Components/time-activity-header.tsx (2)

6-31: Remove commented code and implement missing functionality.

The component looks well-structured, but there's a commented-out line referring to TeamDashboardFilter with an undefined isManage prop. Also, the Export dropdown doesn't have any functionality implemented - there's no handler for selection changes.

-        {/* <TeamDashboardFilter isManage={isManage} /> */}

For the export functionality, consider adding an event handler:

-            <Select defaultValue="export">
+            <Select defaultValue="export" onValueChange={(value) => handleExport(value)}>

And add the handler function above the return statement:

const handleExport = (format: string) => {
  // Implement export functionality based on format
  console.log(`Exporting in ${format} format`);
};

---

6-6: Add TypeScript type annotation for the component.

The component should have a TypeScript interface or type definition to improve type safety and documentation.

-function TimeActivityHeader() {
+interface TimeActivityHeaderProps {
+  // Add any props the component might need in the future
+}
+
+function TimeActivityHeader({}: TimeActivityHeaderProps) {

apps/web/app/[locale]/time-and-activity/Components/progress-bar.tsx (2)

9-26: Implement progress value validation.

While the component works correctly, there's no validation to ensure the progress value stays within the expected 0-100% range. This could lead to visual bugs if an invalid value is passed.

const ProgressBar: React.FC<ProgressBarProps> = ({
  progress,
  color = 'bg-[#0088CC]',
  isLoading = false,
}) => {
+  // Ensure progress is between 0 and 100
+  const validProgress = isLoading ? 0 : Math.min(Math.max(progress, 0), 100);
+
  return (
    <div className="mt-4">
      <div className="w-full h-1 bg-[#E4E4E7] dark:bg-gray-700 rounded-full overflow-hidden">
        <div
          className={`h-full transition-all duration-300 ${color}`}
          style={{
-            width: `${isLoading ? 0 : progress}%`,
+            width: `${validProgress}%`,
          }}
        />
      </div>
    </div>
  );
};

---

16-23: Consider adding an accessible ARIA attribute for screen readers.

For better accessibility, adding an ARIA role and label to the progress bar would be beneficial.

<div className="w-full h-1 bg-[#E4E4E7] dark:bg-gray-700 rounded-full overflow-hidden">
  <div
+    role="progressbar"
+    aria-valuenow={isLoading ? 0 : progress}
+    aria-valuemin={0}
+    aria-valuemax={100}
    className={`h-full transition-all duration-300 ${color}`}
    style={{
      width: `${isLoading ? 0 : progress}%`,
    }}
  />
</div>

apps/web/app/[locale]/time-and-activity/Components/card-time-and-activity.tsx (1)

27-33: Consider adding value formatting.

The component accepts both string and number values but doesn't apply any formatting. This could lead to inconsistent display, especially for numerical values.

<span className="text-[32px] leading-[38px] font-semibold text-gray-900 dark:text-white">
-  {value}
+  {typeof value === 'number' ? value.toLocaleString() : value}
</span>

This would ensure numbers are formatted with appropriate thousands separators according to the user's locale.

apps/web/app/[locale]/time-and-activity/Components/GroupBySelectTimeActivity.tsx (2)

13-13: Set a default value to prevent undefined selection.

The component doesn't specify a default value if groupByType is not provided. This could lead to an undefined selection initially.

-<Select defaultValue={groupByType} onValueChange={onGroupByChange}>
+<Select defaultValue={groupByType || "daily"} onValueChange={onGroupByChange}>

---

17-17: Review placeholder text and default value consistency.

The SelectValue component has a placeholder "Date" which doesn't align with any of the actual values in the dropdown (daily, weekly, etc.). This might confuse users if they see "Date" without making a selection.

-<SelectValue placeholder="Date" className="text-blue-600 dark:text-blue-500" />
+<SelectValue placeholder="Select grouping" className="text-blue-600 dark:text-blue-500" />

apps/web/app/[locale]/time-and-activity/Components/page-component.tsx (2)

28-28: Use translation for consistency.

The breadcrumb title "Time and Activity" should use the translation system for consistency with other translated content.

-{ title: 'Time and Activity', href: `/${currentLocale}/time-and-activity` }
+{ title: JSON.parse(t('pages.timeAndActivity.BREADCRUMB')), href: `/${currentLocale}/time-and-activity` }

---

37-39: Remove unnecessary ! operator in className.

Using the !important flag (via the ! prefix in Tailwind) should generally be avoided as it can lead to CSS specificity issues.

-className="items-start pb-1 !overflow-hidden w-full"
+className="items-start pb-1 overflow-hidden w-full"

apps/web/app/[locale]/time-and-activity/Components/ViewSelect.tsx (2)

34-56: Improve accessibility and add visual indication of selection state.

The current implementation lacks proper accessibility attributes and doesn't show how many options are selected.

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
-        <Button variant="outline" className="gap-2">
+        <Button variant="outline" className="gap-2" aria-label="Select view options">
          <svg
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            className="w-4 h-4"
+            aria-hidden="true"
          >
            <path
              d="M4 5C4 4.44772 4.44772 4 5 4H19C19.5523 4 20 4.44772 20 5V7C20 7.55228 19.5523 8 19 8H5C4.44772 8 4 7.55228 4 7V5Z"
              className="fill-current"
            />
            <path
              d="M4 13C4 12.4477 4.44772 12 5 12H19C19.5523 12 20 12.4477 20 13V15C20 15.5523 19.5523 16 19 16H5C4.44772 16 4 15.5523 4 15V13Z"
              className="fill-current"
            />
          </svg>
-          View
+          View ({viewOptions.filter(opt => opt.checked).length}/{viewOptions.length})
        </Button>
      </DropdownMenuTrigger>

---

58-71: Add "Select All" and "Clear All" functionality.

Providing options to select or clear all checkboxes at once improves user experience.

    <DropdownMenuContent className="p-2 w-56">
+      <div className="flex justify-between mb-2 pb-2 border-b">
+        <button
+          className="text-xs text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
+          onClick={() => {
+            const allSelected = viewOptions.map(opt => ({ ...opt, checked: true }));
+            setViewOptions(allSelected);
+            if (onViewOptionsChange) onViewOptionsChange(allSelected);
+          }}
+        >
+          Select All
+        </button>
+        <button
+          className="text-xs text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
+          onClick={() => {
+            const noneSelected = viewOptions.map(opt => ({ ...opt, checked: false }));
+            setViewOptions(noneSelected);
+            if (onViewOptionsChange) onViewOptionsChange(noneSelected);
+          }}
+        >
+          Clear All
+        </button>
+      </div>
      {viewOptions.map((option) => (
        // ... existing code
      ))}
    </DropdownMenuContent>

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro