PHPackages                             jaocero/activity-timeline - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. jaocero/activity-timeline

ActiveLibrary[Utility & Helpers](/categories/utility)

jaocero/activity-timeline
=========================

Add timelines to custom pages or infolist entries effortlessly. Plus, it teams up smoothly with Spatie Activitylog for easy tracking.

v1.2.12(1y ago)91170.7k↓63.2%24[3 issues](https://github.com/199ocero/activity-timeline/issues)[2 PRs](https://github.com/199ocero/activity-timeline/pulls)MITPHPPHP ^8.1

Since Jan 6Pushed 9mo ago2 watchersCompare

[ Source](https://github.com/199ocero/activity-timeline)[ Packagist](https://packagist.org/packages/jaocero/activity-timeline)[ Docs](https://github.com/jaocero/activity-timeline)[ GitHub Sponsors](https://github.com/jaocero)[ RSS](/packages/jaocero-activity-timeline/feed)WikiDiscussions 3.x Synced 2d ago

READMEChangelog (10)Dependencies (8)Versions (19)Used By (0)

Activity Timeline
=================

[](#activity-timeline)

[![Header](https://raw.githubusercontent.com/199ocero/activity-timeline/main/art/images/jaocero-activity-timeline.jpeg)](https://raw.githubusercontent.com/199ocero/activity-timeline/main/art/images/jaocero-activity-timeline.jpeg)

[![Latest Version on Packagist](https://camo.githubusercontent.com/08b40d5941838c70f953a4dac97749ff595a1a101da4e224087bb602972bc913/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6a616f6365726f2f61637469766974792d74696d656c696e652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/jaocero/activity-timeline)[![Total Downloads](https://camo.githubusercontent.com/0105dd19eb5c834885335191a787a043645f72dedf4acf1b154c339e87d219ba/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6a616f6365726f2f61637469766974792d74696d656c696e652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/jaocero/activity-timeline)

Add timelines to custom pages or infolist entries effortlessly. Plus, it teams up smoothly with Spatie Activitylog for easy tracking.

Installation
------------

[](#installation)

You can install the package via composer:

```
composer require jaocero/activity-timeline
```

To adhere to Filament's theming approach, you'll be required to employ a personalized theme in order to utilize this plugin.

> **Custom Theme Installation** > [Filament Docs](https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme)

Add the plugin's views to your `tailwind.config.js` file.

```
content: [
    ...'./vendor/jaocero/activity-timeline/resources/views/**/*.blade.php',
]
```

Usage
-----

[](#usage)

This plugin is already accessible within the Infolists builder and now supports both the `->state([])` and `->record()` methods.

```
use JaOcero\ActivityTimeline\Enums\IconAnimation;

public function activityTimelineInfolist(Infolist $infolist): Infolist
{
    return $infolist
        ->state([
            'activities' => [
                    [
                        'title' => "Published Article 🔥 - Published with Laravel Filament and Tailwind CSS",
                        'description' => "Approved and published. Here is the link.",
                        'status' => 'published',
                        'created_at' => now()->addDays(8),
                    ],
                    [
                        'title' => 'Reviewing Article - Final Touches',
                        'description' => "Reviewing the article and making it ready for publication.",
                        'status' => '',
                        'created_at' => now()->addDays(5),
                    ],
                    [
                        'title' => "Drafting Article - Make it ready for review",
                        'description' => 'Drafting the article and making it ready for review.',
                        'status' => 'drafting',
                        'created_at' => now()->addDays(2),
                    ],
                    [
                        'title' => 'Ideation - Looking for Ideas 🤯',
                        'description' => 'Idea for my article.',
                        'status' => 'ideation',
                        'created_at' => now()->subDays(7),
                    ]
                ]
        ])
        ->schema([

         /*
    	    You should enclose the entire components within a personalized "ActivitySection" entry.
            This section functions identically to the repeater entry; you simply have to provide the array state's key.
    	 */

            ActivitySection::make('activities')
                ->label('My Activities')
                ->description('These are the activities that have been recorded.')
                ->schema([
                    ActivityTitle::make('title')
                        ->placeholder('No title is set')
                        ->allowHtml(), // Be aware that you will need to ensure that the HTML is safe to render, otherwise your application will be vulnerable to XSS attacks.
                    ActivityDescription::make('description')
                        ->placeholder('No description is set')
                        ->allowHtml(),
                    ActivityDate::make('created_at')
                        ->date('F j, Y', 'Asia/Manila')
                        ->placeholder('No date is set.'),
                    ActivityIcon::make('status')
                        ->icon(fn (string | null $state): string | null => match ($state) {
                            'ideation' => 'heroicon-m-light-bulb',
                            'drafting' => 'heroicon-m-bolt',
                            'reviewing' => 'heroicon-m-document-magnifying-glass',
                            'published' => 'heroicon-m-rocket-launch',
                            default => null,
                        })
                        /*
                            You can animate icon with ->animation() method.
                            Possible values : IconAnimation::Ping, IconAnimation::Pulse, IconAnimation::Bounce, IconAnimation::Spin or a Closure
                         */
                        ->animation(IconAnimation::Ping)
                        ->color(fn (string | null $state): string | null => match ($state) {
                            'ideation' => 'purple',
                            'drafting' => 'info',
                            'reviewing' => 'warning',
                            'published' => 'success',
                            default => 'gray',
                        }),
                ])
                ->showItemsCount(2) // Show up to 2 items
                ->showItemsLabel('View Old') // Show "View Old" as link label
                ->showItemsIcon('heroicon-m-chevron-down') // Show button icon
                ->showItemsColor('gray') // Show button color and it supports all colors
                ->aside(true)
                ->headingVisible(true) // make heading visible or not
                ->extraAttributes(['class'=>'my-new-class']) // add extra class
        ]);
}
```

When utilizing the `->record()` function, you provide your model in a manner similar to the code showcased below:

```
protected $activities;

public function __construct()
{
    $this->activities = User::query()->with('activities')->where('id', auth()->user()->id)->first();
}

public function activityTimelineInfolist(Infolist $infolist): Infolist
{
    return $infolist
        ->record($this->activities)
        // ... remaining code
}
```

Sometimes, when we don't have any info to show to users, it's important to improve their experience by displaying something. So, I include an empty state, like the one in the [Filament Table Empty State](https://filamentphp.com/docs/3.x/tables/empty-state).

```
public function activityTimelineInfolist(Infolist $infolist): Infolist
{
    return $infolist
        ->state([
            'activities' => []
        )]
        ->schema([
            ActivitySection::make('activities')
                // ... other code
                ->emptyStateHeading('No activities yet.')
                ->emptyStateDescription('Check back later for activities that have been recorded.')
                ->emptyStateIcon('heroicon-o-bolt-slash')
        ])
}
```

Usage with Spatie Activity Log Package
--------------------------------------

[](#usage-with-spatie-activity-log-package)

This plugin works with [spatie/laravel-activitylog](https://github.com/spatie/laravel-activitylog), making it easy to log user actions in your app. It can also automatically log model events, storing everything in the `activity_log` table. To use the plugin, just install `spatie/laravel-activitylog`, set it up, and you're good to go.

### Creating a Custom Page

[](#creating-a-custom-page)

You are required to create a custom page within your `resources` to display all activities based on the record passed to the route.

```
php artisan make:filament-page ViewOrderActivities --resource=OrderResource --type=custom
```

### Including the Page in your Resource Class

[](#including-the-page-in-your-resource-class)

Simply include the custom page in the `getPages()` method so that we can access it.

```
public static function getPages(): array
{
    return [
        // ... other pages
        // The format of route doesn't matter, as long as it includes the route parameter {record}.
        'activities' => Pages\ViewOrderActivities::route('/order/{record}/activities'),
    ];
}
```

In the `actions` method of your table, include an additional custom action. This action should redirect users to the custom page we've generated earlier.

```
public static function table(Table $table): Table
{
    return $table
        ->columns([
            // ...
        ])
        ->filters([
            // ...
        ])
        ->actions([
            Tables\Actions\Action::make('view_activities')
                ->label('Activities')
                ->icon('heroicon-m-bolt')
                ->color('purple')
                ->url(fn ($record) => OrderResource::getUrl('activities', ['record' => $record])),
        ])
        ->bulkActions([
            // ...
        ]);
}
```

### Setting up your Custom Page

[](#setting-up-your-custom-page)

Changes are needed in your custom page. Instead of extending using the regular `Page` class will make use of a specific class called `ActivityTimelinePage` provided by the plugin. Additionally, you should include your resource class.

```
use App\Filament\Resources\OrderResource;
use JaOcero\ActivityTimeline\Pages\ActivityTimelinePage;

class ViewOrderActivities extends ActivityTimelinePage
{
    protected static string $resource = OrderResource::class;
}
```

### Configuration

[](#configuration)

Behind the scenes, the plugin utilizes the previously mentioned infolists entry. We only modify the properties/data, but the logic remains unchanged.

```
use App\Filament\Resources\OrderResource;
use JaOcero\ActivityTimeline\Pages\ActivityTimelinePage;

class ViewOrderActivities extends ActivityTimelinePage
{
    protected static string $resource = OrderResource::class;

    protected function configuration(): array
    {
        return [
            'activity_section' => [
                'label' => 'Activities', // label for the section
                'description' => 'These are the activities that have been recorded.', // description for the section
                'show_items_count' => 0, // show the number of items to be shown
                'show_items_label' => 'Show more', // show button label
                'show_items_icon' => 'heroicon-o-chevron-down', // show button icon,
                'show_items_color' => 'gray', // show button color,
                'aside' => true, // show the section in the aside
                'empty_state_heading' => 'No activities yet', // heading for the empty state
                'empty_state_description' => 'Check back later for activities that have been recorded.', // description for the empty state
                'empty_state_icon' => 'heroicon-o-bolt-slash', // icon for the empty state
                'heading_visible' => true, // show the heading
                'extra_attributes' => [], // extra attributes
            ],
            'activity_title' => [
                'placeholder' => 'No title is set', // this will show when there is no title
                'allow_html' => true, // set true to allow html in the title

                /**
                 * You are free to adjust the state before displaying it on your page.
                 * Take note that the state returns these data below:
                 *      [
                 *       'log_name' => $activity->log_name,
                  *      'description' => $activity->description,
                  *      'subject' => $activity->subject,
                  *      'event' => $activity->event,
                  *      'causer' => $activity->causer,
                  *      'properties' => json_decode($activity->properties, true),
                  *      'batch_uuid' => $activity->batch_uuid,
                  *     ]

                  * If you wish to make modifications, please refer to the default code in the HasSetting trait.
                 */

                // 'modify_state' => function (array $state) {
                //
                // }

            ],
            'activity_description' => [
                'placeholder' => 'No description is set', // this will show when there is no description
                'allow_html' => true, // set true to allow html in the description

                /**
                 * You are free to adjust the state before displaying it on your page.
                 * Take note that the state returns these data below:
                 *      [
                 *       'log_name' => $activity->log_name,
                  *      'description' => $activity->description,
                  *      'subject' => $activity->subject,
                  *      'event' => $activity->event,
                  *      'causer' => $activity->causer,
                  *      'properties' => json_decode($activity->properties, true),
                  *      'batch_uuid' => $activity->batch_uuid,
                  *     ]

                  * If you wish to make modifications, please refer to the default code in the HasSetting trait.
                 */

                // 'modify_state' => function (array $state) {
                //
                // }

            ],
            'activity_date' => [
                'name' => 'created_at', // or updated_at
                'date' => 'F j, Y g:i A', // date format
                'placeholder' => 'No date is set', // this will show when there is no date
                'modify_state' => function ($state) {
                    return new HtmlString($state);
                }
            ],
            'activity_icon' => [
                'icon' => fn (string | null $state): string | null => match ($state) {
                    /**
                     * 'event_name' => 'heroicon-o-calendar',
                     * ... and more
                     */
                    default => null
                },
                'color' => fn (string | null $state): string | null => match ($state) {
                    /**
                     * 'event_name' => 'primary',
                     * ... and more
                     */
                    default => null
                },
            ]
        ];
    }
}
```

Style customization
-------------------

[](#style-customization)

Similar to Filament, this plugin also includes CSS `hook` classes that enable the customization of different HTML elements through CSS.

```
.fi-timeline-section {
    @apply bg-transparent !important;
}
```

This plugin comes with numerous CSS `hook` classes. For a straightforward approach, consider using your browser's developer tools to carefully examine the element and identify these classes.

That's all! If you encounter any issues or have features you'd like to discuss, feel free to chat with me in our Discord channel.

Changelog
---------

[](#changelog)

Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.

Contributing
------------

[](#contributing)

Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.

Security Vulnerabilities
------------------------

[](#security-vulnerabilities)

Please review [our security policy](../../security/policy) on how to report security vulnerabilities.

Credits
-------

[](#credits)

- [Jay-Are Ocero](https://github.com/199ocero)
- [All Contributors](../../contributors)

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

49

—

FairBetter than 94% of packages

Maintenance51

Moderate activity, may be stable

Popularity49

Moderate usage in the ecosystem

Community22

Small or concentrated contributor base

Maturity60

Established project with proven stability

 Bus Factor1

Top contributor holds 84.5% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~27 days

Recently: every ~40 days

Total

19

Last Release

414d ago

Major Versions

v1.2.12 → 3.x-dev2025-05-15

3.x-dev → 4.x-dev2025-05-15

### Community

Maintainers

![](https://www.gravatar.com/avatar/a3f65e8ab85d788265dd22740cba3aaea44029bb79f4e663bd03b4f382809ed4?d=identicon)[199ocero](/maintainers/199ocero)

---

Top Contributors

[![199ocero](https://avatars.githubusercontent.com/u/57591686?v=4)](https://github.com/199ocero "199ocero (98 commits)")[![atmonshi](https://avatars.githubusercontent.com/u/1952412?v=4)](https://github.com/atmonshi "atmonshi (4 commits)")[![yagrasdemonde](https://avatars.githubusercontent.com/u/35835849?v=4)](https://github.com/yagrasdemonde "yagrasdemonde (2 commits)")[![albertobenavides](https://avatars.githubusercontent.com/u/9291085?v=4)](https://github.com/albertobenavides "albertobenavides (2 commits)")[![henryavila](https://avatars.githubusercontent.com/u/8429941?v=4)](https://github.com/henryavila "henryavila (2 commits)")[![bilaliqbalr](https://avatars.githubusercontent.com/u/4525426?v=4)](https://github.com/bilaliqbalr "bilaliqbalr (1 commits)")[![iRaziul](https://avatars.githubusercontent.com/u/51883557?v=4)](https://github.com/iRaziul "iRaziul (1 commits)")[![pablo-gonzalez-helpwan](https://avatars.githubusercontent.com/u/175231585?v=4)](https://github.com/pablo-gonzalez-helpwan "pablo-gonzalez-helpwan (1 commits)")[![Puralogica](https://avatars.githubusercontent.com/u/6037136?v=4)](https://github.com/Puralogica "Puralogica (1 commits)")[![randomnetcat](https://avatars.githubusercontent.com/u/1988485?v=4)](https://github.com/randomnetcat "randomnetcat (1 commits)")[![RixzZ](https://avatars.githubusercontent.com/u/1339272?v=4)](https://github.com/RixzZ "RixzZ (1 commits)")[![SujalRatnaTamrakar](https://avatars.githubusercontent.com/u/42111958?v=4)](https://github.com/SujalRatnaTamrakar "SujalRatnaTamrakar (1 commits)")[![dotmot](https://avatars.githubusercontent.com/u/134087665?v=4)](https://github.com/dotmot "dotmot (1 commits)")

---

Tags

activity-timelinefilamentphpfilamentplugininfolistsspatie-activity-loglaraveltimelinefilamentphpjaoceroactivity-timelinefilament-infolists

###  Code Quality

TestsPest

### Embed Badge

![Health badge](/badges/jaocero-activity-timeline/health.svg)

```
[![Health](https://phpackages.com/badges/jaocero-activity-timeline/health.svg)](https://phpackages.com/packages/jaocero-activity-timeline)
```

###  Alternatives

[rawilk/profile-filament-plugin

Profile & MFA starter kit for filament.

3914.6k](/packages/rawilk-profile-filament-plugin)[stephenjude/filament-jetstream

A Laravel starter kit built with Filament inspired by Jetstream.

17760.2k3](/packages/stephenjude-filament-jetstream)[stephenjude/filament-debugger

About

104162.2k2](/packages/stephenjude-filament-debugger)[codewithdennis/filament-select-tree

The multi-level select field enables you to make single selections from a predefined list of options that are organized into multiple levels or depths.

329530.5k29](/packages/codewithdennis-filament-select-tree)[dotswan/filament-map-picker

Easily pick and retrieve geo-coordinates using a map-based interface in your Filament applications.

128192.3k3](/packages/dotswan-filament-map-picker)[stephenjude/filament-feature-flags

Filament implementation of feature flags and segmentation with Laravel Pennant.

122177.8k1](/packages/stephenjude-filament-feature-flags)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)