@khalisfood/partner-dashboard

Shared partner dashboard component with stat cards, charts, filters, and profit calculator. Designed to be used across multiple frontend apps that share common partner-related UI.

Install

npm install @khalisfood/partner-dashboard

Quick Start

import { Dashboard } from "@khalisfood/partner-dashboard";

function MyPage() {
  return (
    <Dashboard
      stats={{
        newCustomers: 7,
        ordersCount: 12,
        revenue: 1500,
      }}
      chartData={{
        orders: [
          { date: "10 Apr", count: 5 },
          { date: "13 Apr", count: 3 },
        ],
        customers: [
          { date: "10 Apr", count: 4 },
          { date: "13 Apr", count: 3 },
        ],
        revenue: [
          { date: "10 Apr", amount: 800 },
          { date: "13 Apr", amount: 700 },
        ],
      }}
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | stats | DashboardStats | required | Data for stat cards | | chartData | DashboardChartData | required | Data for all charts | | profitPercent | number | 10 | Profit percentage (0–100) | | onProfitChange | (value: number) => void | — | Called when profit slider/input changes | | currency | string | "AZN" | Currency code for formatting | | isDark | boolean | false | Dark mode | | filterState | DashboardFilterState | — | If provided, shows filter UI | | onFilterChange | (filters) => void | — | Called on every filter change | | onFilterApply | (filters) => void | — | Called when Apply is clicked | | onFilterReset | () => void | — | Called when Reset is clicked | | onOrdersClick | () => void | — | Called when Orders stat card is clicked | | onCustomersClick | () => void | — | Called when New Customers stat card is clicked | | DatePickerComponent | ComponentType<DatePickerProps> | — | Custom date picker component | | className | string | — | CSS class for root container |

Types

interface DashboardStats {
  newCustomers: number;
  ordersCount: number;
  revenue: number;
}

interface DashboardChartData {
  orders: { date: string; count: number }[];
  customers: { date: string; count: number }[];
  revenue: { date: string; amount: number }[];
}

interface DashboardFilterState {
  dateRange: {
    fromDate: Date | undefined;
    toDate: Date | undefined;
  };
  profitPercent: number;
}

interface DatePickerProps {
  value: Date | undefined;
  onChange: (date: Date | undefined) => void;
}

Custom DatePicker

The package uses a native <input type="date"> by default. To use your own DatePicker (e.g. shadcn), pass it via DatePickerComponent:

// If your DatePicker already uses value/onChange:
<Dashboard DatePickerComponent={DatePicker} />

// If it uses different prop names, create a wrapper:
function AppDatePicker({ value, onChange }) {
  return <MyDatePicker date={value} onSelect={onChange} />;
}

<Dashboard DatePickerComponent={AppDatePicker} />

Individual Components

Components can also be imported separately:

import {
  StatCard,
  ProfitCard,
  OrdersChart,
  CustomersChart,
  RevenueChart,
  Filters,
  formatCurrency,
} from "@khalisfood/partner-dashboard";

Development

npm install
npm run build
npm run dev        # watch mode

License

MIT © Khalis Food