mirror of
https://github.com/Luchexx/wacrm.git
synced 2026-11-02 17:29:45 +00:00
bf90c370fc
Brings Tremor (Apache-2.0) in as the project's chart component
library and converts the response-time chart as the first
integration. Tremor is distributed copy-paste ("Tremor Raw") so
the components live under `src/components/tremor/`; the only
runtime peer dependency added is `recharts`. Two small local
adaptations to the vendored `BarChart`:
- `cx` (Tremor's `clsx`+`twMerge` helper) → our `cn` from
`@/lib/utils`, aliased locally to keep diff vs upstream minimal.
- `@remixicon/react` legend-slider icons →
`lucide-react`'s `ChevronLeft` / `ChevronRight`, since
`lucide-react` is already a project dep.
- `ChartTooltipProps.label` widened from `string` to
`string | number | undefined` to match recharts 3.x (Tremor's
source still types it for recharts 2.x).
Why Tremor and not a wider switch (Mantine, HeroUI):
- The dashboard ships ~700 lines of hand-rolled SVG across three
chart files — a focused charting library is the highest-ROI
addition without touching the wider component surface.
- Tremor is Tailwind-native and built on the same Radix/Base UI
layer as the existing `src/components/ui/*`, so it composes
rather than displaces.
- Apache-2.0 + copy-paste distribution means no upgrade lock-in.
What this PR does
- Adds `src/components/tremor/{bar-chart.tsx,chart-colors.ts,
get-y-axis-domain.ts,use-on-window-resize.ts}` (vendored from
tremorlabs/tremor with the adaptations above).
- Installs `recharts@^3.8.1` (React 19 + Next.js 16 compatible).
- Rewrites `src/components/dashboard/response-time-chart.tsx`:
drops 130 lines of bespoke SVG math (axis scaling, bar
positioning, grid lines, tooltip rendering), reuses the same
card/header/empty-state shell.
Deferred (own follow-up PRs)
- `pipeline-donut.tsx` — has user-customisable per-stage hex
colours; Tremor's palette would override them. Needs either a
small upstream patch or a `colors` override path.
- `conversations-chart.tsx` — area-chart conversion (largest of
the three, 341 lines).
- The previous hand-rolled bar chart drew a horizontal dashed
"target N minutes" reference line. Tremor BarChart doesn't
expose Recharts primitives, so for now the target is promoted
to a header pill (`target 5m`). On-chart reference line is a
follow-up — either via a positioned overlay or an upstream
`referenceLines` prop.
Verification
- `npm run lint` → 0 errors (same 20 pre-existing warnings).
- `npm run typecheck` → clean.
- `npm test` → 319/319 pass.
- `npm run build` → succeeds, dashboard remains a static route.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
83 lines
2.1 KiB
JSON
83 lines
2.1 KiB
JSON
{
|
|
"name": "wacrm",
|
|
"version": "0.2.2",
|
|
"private": true,
|
|
"description": "Self-hostable CRM template for WhatsApp built on Next.js and Supabase — shared inbox, contacts, sales pipelines, broadcasts, and no-code automations.",
|
|
"license": "MIT",
|
|
"author": "Arnas Donauskas",
|
|
"homepage": "https://github.com/ArnasDon/wacrm",
|
|
"repository": {
|
|
"type": "git",
|
|
"url": "git+https://github.com/ArnasDon/wacrm.git"
|
|
},
|
|
"bugs": {
|
|
"url": "https://github.com/ArnasDon/wacrm/issues"
|
|
},
|
|
"keywords": [
|
|
"crm",
|
|
"whatsapp",
|
|
"whatsapp-business-api",
|
|
"nextjs",
|
|
"supabase",
|
|
"automation",
|
|
"broadcast",
|
|
"self-hosted",
|
|
"template"
|
|
],
|
|
"engines": {
|
|
"node": ">=20.0.0"
|
|
},
|
|
"scripts": {
|
|
"dev": "next dev",
|
|
"build": "next build",
|
|
"start": "next start",
|
|
"lint": "eslint",
|
|
"typecheck": "tsc --noEmit",
|
|
"format": "prettier --write .",
|
|
"format:check": "prettier --check .",
|
|
"test": "vitest run",
|
|
"test:watch": "vitest"
|
|
},
|
|
"dependencies": {
|
|
"@base-ui/react": "^1.5.0",
|
|
"@dagrejs/dagre": "^3.0.0",
|
|
"@dnd-kit/core": "^6.3.1",
|
|
"@dnd-kit/sortable": "^10.0.0",
|
|
"@dnd-kit/utilities": "^3.2.2",
|
|
"@supabase/ssr": "^0.10.3",
|
|
"@supabase/supabase-js": "^2.106.2",
|
|
"@xyflow/react": "^12.10.2",
|
|
"class-variance-authority": "^0.7.1",
|
|
"clsx": "^2.1.1",
|
|
"date-fns": "^4.3.0",
|
|
"lucide-react": "^1.16.0",
|
|
"next": "16.2.6",
|
|
"react": "19.2.4",
|
|
"react-dom": "19.2.4",
|
|
"recharts": "^3.8.1",
|
|
"shadcn": "^4.2.0",
|
|
"sonner": "^2.0.7",
|
|
"tailwind-merge": "^3.6.0",
|
|
"tw-animate-css": "^1.4.0"
|
|
},
|
|
"devDependencies": {
|
|
"@tailwindcss/postcss": "^4",
|
|
"@types/node": "^25",
|
|
"@types/react": "^19",
|
|
"@types/react-dom": "^19",
|
|
"eslint": "^9",
|
|
"eslint-config-next": "16.2.6",
|
|
"prettier": "^3.8.3",
|
|
"prettier-plugin-tailwindcss": "^0.8.0",
|
|
"tailwindcss": "^4",
|
|
"typescript": "^6",
|
|
"vitest": "^4.1.7"
|
|
},
|
|
"overrides": {
|
|
"postcss": "^8.5.10",
|
|
"ip-address": "^10.1.1",
|
|
"fast-uri": "^3.1.2",
|
|
"hono": "^4.12.18"
|
|
}
|
|
}
|