# Record Activity Panel
URL: /docs/web/components/record-activity-panel

Record Activity Panel component.

**Demo:**

```tsx
'use client';
// @custom-demo

import { useState } from 'react';

import { RecordActivityPanel } from '@docyrus/ui/components/record-activity-panel';
import { Button } from '@docyrus/ui/primitives/ui/button';
import { cn } from '@docyrus/ui/primitives/lib/utils';

import { PropControls } from '@/components/prop-controls';
import { useDemoData } from '@/data/record-activity-panel-data';

export function RecordActivityPanelDemo() {
  const { props, controls, actions } = useDemoData();
  const [open, setOpen] = useState(false);

  return (
    <div className="w-full">
      <div className="mb-3 flex justify-end">
        <button
          type="button"
          className="inline-flex items-center gap-1.5 rounded-md border border-border bg-background px-3 py-1.5 text-sm font-medium transition-colors hover:bg-accent"
          onClick={() => setOpen(prev => !prev)}>
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" /><circle cx="12" cy="12" r="3" /></svg>
          Configure
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={cn('transition-transform duration-200', open && 'rotate-180')}><path d="m6 9 6 6 6-6" /></svg>
        </button>
      </div>
      <div
        className={cn(
          'grid transition-[grid-template-rows] duration-300 ease-in-out',
          open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
        )}>
        <div className="overflow-hidden">
          <div className="mb-4 rounded-lg border border-border bg-muted/30 p-4 grid gap-6">
            
            <div className="mt-3 flex flex-wrap gap-2">
              
              
              
            </div>
          </div>
        </div>
      </div>
      
    </div>
  );
}
```

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/ui-record-activity-panel
```

**Dependencies:**
- [lucide-react](https://www.npmjs.com/package/lucide-react)

## Usage

```tsx
import { RecordActivityPanel } from "@docyrus/ui/components/record-activity-panel";
import type { RecordActivity } from "@docyrus/ui/components/record-activity-panel";

const activities: RecordActivity[] = [
  {
    id: "act-1",
    description: "Status changed from In Progress to In Review",
    shortDescription: "Status changed",
    icon: null,
    color: "#f59e0b",
    table_name: "tasks",
    operation: "STATUS_UPDATE",
    tenant_data_source_id: { id: "ds-1", name: "Tasks" },
    created_on: "2025-12-17T09:30:00Z",
    created_by: "u-alice",
    created_by_user: { firstname: "Alice", lastname: "Johnson", name: "Alice Johnson", email: "alice@docyrus.com", mobile: null },
    data_source_name: "Tasks",
    title: "Task #341"
  }
];

function Demo() {
  return ;
}
```

## API Reference

| Prop | Type | Default |
|------|------|---------|
| `activities` | `RecordActivity[]` | — |
| `isLoading` | `boolean` | `false` |
| `className` | `string` | — |

## Components

| Component | Description |
|-----------|-------------|
| `RecordActivityPanel` | Public export |