Skip to content

Instantly share code, notes, and snippets.

@ardiansyaherwin
Last active May 10, 2023 02:44
Show Gist options
  • Save ardiansyaherwin/3a99b8c516a3e180e0a9f888c14dec26 to your computer and use it in GitHub Desktop.
Save ardiansyaherwin/3a99b8c516a3e180e0a9f888c14dec26 to your computer and use it in GitHub Desktop.

Report Flow

Report Sequence Diagram

UML Source :

@startuml
CampaignList -> CampaignForm: Create Campaign
CampaignForm --> CampaignList: Campaign & Report Created
CampaignList -> CampaignPayment: Pay Campaign
CampaignPayment --> CampaignList: Campaign paid
CampaignList -> CampaignActivity: Running Campaign
CampaignActivity --> CampaignList: Campaign Complete & Campaign Report Updated
CampaignList -> CampaignReport: See Campaign Reports
CampaignReport --> CampaignList: Report has been viewed
@enduml

There are 3 types of reports that the campaign has, as follows:

  1. Laporan,
  2. Partisipan, and
  3. Riwayat

==Laporan==

In general, laporan is divided to 3 section, as follows:

  • Campaign info
  • Report Overview based on selected social media
  • Report Overview based on task given from brands

1. Campaign Info

In this section, there are some info displayed, as follows:

  • Campaign Name
  • Campaign Type
  • Campaign Social Media Platform
  • Campaign Duration (start & end date)

2. Report Overview - Selected Social Media

There are 2 platform of social media that we can choose when create a new campaign, that is Instagram & Tiktok.

For Instagram, this section display some data likes:

  • Reach (number)
  • Impressions (number)
  • Engagement Rate Reach (percentage)

In the contrary, this section for Tiktok isn’t developed yet. So for Tiktok, there is empty data illustration displayed.

3. Report Overview - Task Given

As mentioned above, that Tiktok reports isn’t developed yet, so just Instagram reports that will be displayed in this section.

For Instagram, there are 3 types of activity that brands can choose for the campaign, as follows:

  • Instagram Post
  • Instagram Reels
  • Instagram Story

In this section, there are some info that will be displayed in all types of activity, and the rest will be displayed in just 1 or 2 kinds of activity. The details will be displayed as follows:

Overview Activity Post Reels Story
Report Info Name - - - -
Reach (number) -
Impressions (number) -
Engagement (number) -
ER Reach (percentage) -
Comments (number) -
Likes (number) -
Saved (number) -
Plays (number) -
Shares (number) -
Replies (number) -

:::info For Laporan, there are CTA button located in the top right of the pages that used for export all the reports on this section as PDF. The export function only can be used by user who have role as admin.

:::


==Partisipan==

In this section, there is list of participants data of the campaign displayed on a table. The data displayed are:

  • Nama lengkap (char)
  • Username (char)
  • Followers (number)
  • Engagement Rate (percentage)
  • Domisili (char)
  • Status (char)
  • Tugas XXX (link of the activity in selected platform)

:::info For status, there are 5 possible values that can be used, as follows:

  1. Pending
  2. Approved
  3. Waiting List
  4. Winner
  5. Rejected

*Notes :

Waiting List is no longer used by business team, will be hide in next phase of dev.

:::

:::info For the tugas xxx value, if user click the link, then it will open a new tab in browser and redirect to the link pages.

:::

Above the table, there are 2 filter features that can be used, such as:

  1. Filter by tabs,

    There are 4 tabs that represent some of status that the participants can have, like follows:

    • Semua (the defaults)
    • Approved
    • Winner
    • Rejected

    So, the participants data shown on the table will be based on status selected by user.

    \

  2. Filter by nama lengkap, username, or domisili.

    User can filter the data on the table to find one or more participants data by typing value of nama lengkap, username, or domisili in the search bar. The filters will apply if we type greater than or equal to 3 character in the search bar. If less than 3 character typed, the filters won’t be applies.


In this section, there are another detailed data of participants that can be seen by brands.

If brands clicks the name of participants on the table, there will pop up modal shown that displayed a more detailed data of selected participants.

The data displayed divided into 3 main section, such as:

  • Participants Profile : Username in selected platform, followers, engagement rate, and location.

  • Insight Overview : Total followers, engagement rate, impressions, reach, and profile view.

  • Profil followers :

    The data shown is demographics of :

    • Followers gender (displayed in pie chart),
    • Followers age (displayed in bar chart),
    • Followers province (displayed in percentage bar), and
    • Followers city (displayed in percentage bar).

:::info Users can view the details of other participant data when a pop up is displayed by clicking on the right / left arrow icon that is located besides the modal.

:::

:::info For a star influencer, there will always a star badge icon displayed besides the username.

:::

:::info For Partisipan, there are CTA button located in the top right of the pages that used for export all the reports on this section as CSV.

:::


==Riwayat==

This section displays the campaign log history report. The history report itself is divided into 3 types of log, such as:

  • Campaign log

    In this log, the data displayed is the log of creation and changes on detail data of the campaign itself.

  • Campaign task log

    In this log, the data displayed is the log of creation and changes on campaign task of the campaign itself.

  • Additional periods log

    In this log, the data displayed is the log of creation and changes on additional periods of the campaign itself.


==Notes==

There are some things that can be improve on current Report feature, such as:

  • Add back function on the first slide of participants detail data on pop up modal that will show the last participants on the list.
  • Add next function on the last slide of participants detail data on pop up modal that will show the first participants on the list.
  • Table components can be improved on the technical side. Currently, to meet the design, which wants the first column of the table to be sticky, the table component is rendered twice. It makes the performance when the components rendered not good enough.
  • Participants page files can be restructured for easier reading & maintenance.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment