Activity Graph

Reusable team activity feed and employee activity dashboard (React/TypeScript). Ships self‑contained UI components (no parent‑app types) and utility functions for building rich activity views.

Features

• Team Activity tab with range filter and comparative line graph
• Employees Activity tab with toolbar search and table view
• Recent activity list with formatted entries
• Local, minimal type definitions to keep the module independent
• Built with shadcn/ui + TanStack Table

Directory structure

external/activity-graph/
├─ components/
│ ├─ ActivityLineGraph.tsx
│ ├─ MemberChips.tsx
│ ├─ RecentActivityList.tsx
│ └─ TeamActivityFeed.tsx # Primary entry component
├─ utils/
│ ├─ events.ts
│ ├─ interactions.ts
│ └─ time.ts
└─ README.md

Tech stack

• React + TypeScript
• shadcn/ui
• TanStack Table
• Recharts (for example charts)

Installation (as a submodule)

If this folder has been split into a standalone repo (e.g. TechWithTy/activity-graph), add it as a submodule to your host project:

git submodule add https://github.com/TechWithTy/activity-graph.git external/activity-graph

Install peer dependencies in your host app (version ranges per your app setup):

pnpm add @tanstack/react-table clsx tailwind-merge

Also ensure shadcn/ui primitives are available in your host app (Buttons, Tabs, Input, Label, etc.).

Usage

Import and render TeamActivityFeed inside a page or route. Provide a permissions object compatible with the local utilities.

importTeamActivityFeedfrom"@/external/activity-graph/components/TeamActivityFeed";exportdefaultfunctionPage(){return(<TeamActivityFeedpermissions={{ManageTeam: true,ViewReports: true}}apiPath="/api/v1/team/activity"days={14}/>);}

Notes on typing

• This module defines minimal local types and avoids importing types from a parent app to remain portable.
• When consuming table callbacks (e.g., renderToolbar), annotate table as Table<TeamMember> where TeamMember refers to your host‑app team member row type. If you prefer, you may continue with unknown and infer.

Development

• The components assume TailwindCSS and shadcn/ui are configured in the host app.
• Line‑ending warnings (LF→CRLF) on Windows are cosmetic. You can enforce LF via a root .gitattributes if desired.

License

MIT

---

Charts: Example (AreaChart)

This module includes a self‑contained example chart component using Recharts: components/ExampleAreaChart.tsx.

Install Recharts (peer)

pnpm add recharts

Add chart color tokens (host app CSS)

Add CSS variables that the chart references. You can place these in your global CSS (e.g., app/globals.css).

@layer base {
:root {
--chart-1:oklch(0.6460.22241.116);
--chart-2:oklch(0.60.118184.704);
}
.dark {
--chart-1:oklch(0.4880.243264.376);
--chart-2:oklch(0.6960.17162.48);
}
}

Use the example chart

importExampleAreaChartfrom"@/external/activity-graph/components/ExampleAreaChart";exportdefaultfunctionDemo(){return(<divclassName="rounded-md border p-4"><h2className="mb-2 font-semibold">Area Chart</h2><ExampleAreaChart/></div>);}

The example reads --chart-1 and --chart-2 for colors. Adjust tokens or the component to match your theme.