8.0.0

Samples

/

Full Page Samples

Crm Client List

Prospective Clients

start date

Aug 01, 2020

end date

Aug 03, 2020

546 Results
Contact Date Created Inquiry Source Lead Status Quote Assignee Actions
Jesse

Cortez

(383) 291-9348
jesse.cortez@gmail.com
Aug 2, 2012
Email
hello@companyname.com

Status:

Not Started
$

729

.63
Unassigned
Bill

Buchanan

(831) 345-5824
billbuch@yahoo.com
Aug 2, 2012
Social Media
Facebook

Status:

Negotiation
$

534

.40

Anna Black

Project Coordinator
Effie

Guzman

(158) 243-0782
effieguzman@comcast.net
Aug 2, 2012
Online Quote
Landing Page

Status:

Contract
$

392

.26

Anna Black

Project Coordinator
Rodney

Boone

(385) 927-5970
rodneyboone@gmail.com
Aug 2, 2012
Internal
Referral

Status:

Contract
$

342

.86

Anna Black

Project Coordinator
Barbara

Maxwell

(284) 918-6943
barbaramaxwell4@yahoo.com
Aug 2, 2012
Online Quote
Main Website

Status:

Negotiation
$

145

.01

Anna Black

Project Coordinator
Ellen

Thornton

(688) 492-7492
ellen.thornton@gmail.com
Aug 2, 2012
Social Media
Instagram

Status:

Negotiation
$

25

.27

Anna Black

Project Coordinator
Copy to Clipboard
<!-- START TOP AREA --> <%= pb_rails("flex", props: {classname: "flex-container", spacing: "between", padding_top: "md", padding_x: "md" }) do %> <%= pb_rails("flex/flex_item") do %> <%= pb_rails("title", props: { text: "Prospective Clients", tag: "h3", size: 3 }) %> <% end %> <%= pb_rails("flex/flex_item") do %> <%= pb_rails("button", props: { text: "Add Client" }) %> <% end %> <% end %> <!-- END TOP AREA --> <!-- START FILTER --> <%= pb_rails("filter", props: { id:"2", filters: [ {name: "start date", value: "Aug 01, 2020"}, {name: "end date", value: "Aug 03, 2020"} ], sort_menu: [ {item:"Date Created", link:"#", active: true, direction:"desc"}, {item:"Assignee", link:"#", active: false}, {item:"Contact", link:"#", active: false}, {item:"Inquiry Source", link:"#", active: false}, ], results: 546, template: "single", margin_y: "md", margin_x: "md" }) do%> <% example_collection = [ OpenStruct.new(name: "Alabama", value: 1), OpenStruct.new(name: "Alaska", value: 2), OpenStruct.new(name: "Arizona", value: 3), OpenStruct.new(name: "Arkansas", value: 4), OpenStruct.new(name: "California", value: 5), OpenStruct.new(name: "Colorado", value: 6), OpenStruct.new(name: "Connecticut", value: 7), OpenStruct.new(name: "Delaware", value: 8), OpenStruct.new(name: "Florida", value: 9), OpenStruct.new(name: "Georgia", value: 10), ] %> <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %> <%= pb_rails("flex") do %> <%= pb_rails("body", props: {classname: "flex-item"}) do %> <%= pb_rails("text_input", props: { label: "Start Date", value: "Aug 01, 2020", margin_right: "sm" }) %> <% end %> <%= pb_rails("body", props: {classname: "flex-item"}) do %> <%= pb_rails("text_input", props: { label: "End Date", value: "Aug 3, 2020" }) %> <% end %> <% end %> <%= form.actions do |action| %> <%= pb_rails("flex", props: {classname: "flex-container", spacing: "between"}) do %> <%= pb_rails("flex/flex_item") do %> <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%> <% end %> <%= pb_rails("flex/flex_item") do %> <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %> <% end %> <% end %> <% end %> <% end %> <% end %> <!-- END FILTER --> <!-- START TABlE --> <%= pb_rails("flex", props: {orientation: "column", horizontal: "stretch", margin_x: "md"}) do %> <%= pb_rails("table", props: { size: "sm" }) do %> <thead> <tr> <th>Contact</th> <th>Date Created</th> <th>Inquiry Source</th> <th>Lead Status</th> <th>Quote</th> <th>Assignee</th> <th>Actions</th> </tr> </thead> <tbody> <tr> <td> <%= pb_rails("person_contact", props: { first_name: "Jesse", last_name: "Cortez", contacts: [ { contact_type: "cell", contact_value: "3832919348" }, { contact_type: "email", contact_value: "jesse.cortez@gmail.com" } ] }) %> </td> <td> <%= pb_rails("date", props: { date: "2012-08-02T15:49:29Z", size: "xs" }) %> </td> <td> <%= pb_rails("body", props: { text: "Email" }) %> <%= pb_rails("caption", props: { text: "hello@companyname.com", size: 'xs' }) %> </td> <td> <%= pb_rails("progress_pills", props: { steps: 4, active: 0, title:"Status:", value:"Not Started" }) %> </td> <td> <%= pb_rails("currency", props: { amount: "729.63", size: "sm" }) %> </td> <td> <%= pb_rails("body", props: { text: "Unassigned" }) %> </td> <td> <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %> </td> </tr> <tr> <td> <%= pb_rails("person_contact", props: { first_name: "Bill", last_name: "Buchanan", contacts: [ { contact_type: "cell", contact_value: "8313455824" }, { contact_type: "email", contact_value: "billbuch@yahoo.com" } ] }) %> </td> <td> <%= pb_rails("date", props: { date: "2012-08-02T15:49:29Z", size: "xs" }) %> </td> <td> <%= pb_rails("body", props: { text: "Social Media" }) %> <%= pb_rails("caption", props: { text: "Facebook", size: 'xs' }) %> </td> <td> <%= pb_rails("progress_pills", props: { steps: 4, active: 3, title:"Status:", value:"Negotiation" }) %> </td> <td> <%= pb_rails("currency", props: { amount: "534.40", size: "sm" }) %> </td> <td> <%= pb_rails("user", props: { name: "Anna Black", title: "Project Coordinator", orientation: "horizontal", align: "left", avatar_url: "https://randomuser.me/api/portraits/women/44.jpg" }) %> </td> <td> <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %> </td> </tr> <tr> <td> <%= pb_rails("person_contact", props: { first_name: "Effie", last_name: "Guzman", contacts: [ { contact_type: "cell", contact_value: "1582430782" }, { contact_type: "email", contact_value: "effieguzman@comcast.net" } ] }) %> </td> <td> <%= pb_rails("date", props: { date: "2012-08-02T15:49:29Z", size: "xs" }) %> </td> <td> <%= pb_rails("body", props: { text: "Online Quote" }) %> <%= pb_rails("caption", props: { text: "Landing Page", size: 'xs' }) %> </td> <td> <%= pb_rails("progress_pills", props: { steps: 4, active: 4, title:"Status:", value:"Contract" }) %> </td> <td> <%= pb_rails("currency", props: { amount: "392.26", size: "sm" }) %> </td> <td> <%= pb_rails("user", props: { name: "Anna Black", title: "Project Coordinator", orientation: "horizontal", align: "left", avatar_url: "https://randomuser.me/api/portraits/women/44.jpg" }) %> </td> <td> <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %> </td> </tr> <tr> <td> <%= pb_rails("person_contact", props: { first_name: "Rodney", last_name: "Boone", contacts: [ { contact_type: "cell", contact_value: "3859275970" }, { contact_type: "email", contact_value: "rodneyboone@gmail.com" } ] }) %> </td> <td> <%= pb_rails("date", props: { date: "2012-08-02T15:49:29Z", size: "xs" }) %> </td> <td> <%= pb_rails("body", props: { text: "Internal" }) %> <%= pb_rails("caption", props: { text: "Referral", size: 'xs' }) %> </td> <td> <%= pb_rails("progress_pills", props: { steps: 4, active: 4, title:"Status:", value:"Contract" }) %> </td> <td> <%= pb_rails("currency", props: { amount: "342.86", size: "sm" }) %> </td> <td> <%= pb_rails("user", props: { name: "Anna Black", title: "Project Coordinator", orientation: "horizontal", align: "left", avatar_url: "https://randomuser.me/api/portraits/women/44.jpg" }) %> </td> <td> <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %> </td> </tr> <tr> <td> <%= pb_rails("person_contact", props: { first_name: "Barbara", last_name: "Maxwell", contacts: [ { contact_type: "cell", contact_value: "2849186943" }, { contact_type: "email", contact_value: "barbaramaxwell4@yahoo.com" } ] }) %> </td> <td> <%= pb_rails("date", props: { date: "2012-08-02T15:49:29Z", size: "xs" }) %> </td> <td> <%= pb_rails("body", props: { text: "Online Quote" }) %> <%= pb_rails("caption", props: { text: "Main Website", size: 'xs' }) %> </td> <td> <%= pb_rails("progress_pills", props: { steps: 4, active: 3, title:"Status:", value:"Negotiation" }) %> </td> <td> <%= pb_rails("currency", props: { amount: "145.01", size: "sm" }) %> </td> <td> <%= pb_rails("user", props: { name: "Anna Black", title: "Project Coordinator", orientation: "horizontal", align: "left", avatar_url: "https://randomuser.me/api/portraits/women/44.jpg" }) %> </td> <td> <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %> </td> </tr> <tr> <td> <%= pb_rails("person_contact", props: { first_name: "Ellen", last_name: "Thornton", contacts: [ { contact_type: "cell", contact_value: "6884927492" }, { contact_type: "email", contact_value: "ellen.thornton@gmail.com" } ] }) %> </td> <td> <%= pb_rails("date", props: { date: "2012-08-02T15:49:29Z", size: "xs" }) %> </td> <td> <%= pb_rails("body", props: { text: "Social Media" }) %> <%= pb_rails("caption", props: { text: "Instagram", size: 'xs' }) %> </td> <td> <%= pb_rails("progress_pills", props: { steps: 4, active: 3, title:"Status:", value:"Negotiation" }) %> </td> <td> <%= pb_rails("currency", props: { amount: "25.27", size: "sm" }) %> </td> <td> <%= pb_rails("user", props: { name: "Anna Black", title: "Project Coordinator", orientation: "horizontal", align: "left", avatar_url: "https://randomuser.me/api/portraits/women/44.jpg" }) %> </td> <td> <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %> </td> </tr> </tbody> <% end %> <% end %> <!-- END TABLE -->
<!-- START TOP AREA -->
<%= pb_rails("flex", props: {classname: "flex-container", spacing: "between", padding_top: "md", padding_x: "md" }) do %>
    <%= pb_rails("flex/flex_item") do %>
      <%= pb_rails("title", props: { text: "Prospective Clients", tag: "h3", size: 3 }) %>
    <% end %>
    <%= pb_rails("flex/flex_item") do %>
      <%= pb_rails("button", props: { text: "Add Client" }) %>
    <% end %>
<% end %>
<!-- END TOP AREA -->

<!-- START FILTER -->
<%= pb_rails("filter", props: {
  id:"2",
  filters: [
    {name: "start date", value: "Aug 01, 2020"},
    {name: "end date", value: "Aug 03, 2020"}

    ],
  sort_menu: [
    {item:"Date Created", link:"#", active: true, direction:"desc"},
    {item:"Assignee", link:"#", active: false},
    {item:"Contact", link:"#", active: false},
    {item:"Inquiry Source", link:"#", active: false},

  ],
  results: 546,
  template: "single",
  margin_y: "md",
  margin_x: "md"
  }) do%>
<%
  example_collection = [
    OpenStruct.new(name: "Alabama", value: 1),
    OpenStruct.new(name: "Alaska", value: 2),
    OpenStruct.new(name: "Arizona", value: 3),
    OpenStruct.new(name: "Arkansas", value: 4),
    OpenStruct.new(name: "California", value: 5),
    OpenStruct.new(name: "Colorado", value: 6),
    OpenStruct.new(name: "Connecticut", value: 7),
    OpenStruct.new(name: "Delaware", value: 8),
    OpenStruct.new(name: "Florida", value: 9),
    OpenStruct.new(name: "Georgia", value: 10),
  ]
%>

<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>

  <%= pb_rails("flex") do %>
    <%= pb_rails("body", props: {classname: "flex-item"}) do %>
      <%= pb_rails("text_input", props: { label: "Start Date", value: "Aug 01, 2020", margin_right: "sm" }) %>
    <% end %>
    <%= pb_rails("body", props: {classname: "flex-item"}) do %>
      <%= pb_rails("text_input", props: { label: "End Date",  value: "Aug 3, 2020" }) %>
    <% end %>
  <% end %>

  <%= form.actions do |action| %>

  <%= pb_rails("flex", props: {classname: "flex-container", spacing: "between"}) do %>
    <%= pb_rails("flex/flex_item") do %>
        <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
    <% end %>
    <%= pb_rails("flex/flex_item") do %>
        <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
    <% end %>
  <% end %>


  <% end %>
<% end %>

<% end %>
<!-- END FILTER -->

<!-- START TABlE -->

  <%= pb_rails("flex", props: {orientation: "column", horizontal: "stretch", margin_x: "md"}) do %>
      <%= pb_rails("table", props: { size: "sm" }) do %>
        <thead>
          <tr>
            <th>Contact</th>
            <th>Date Created</th>
            <th>Inquiry Source</th>
            <th>Lead Status</th>
            <th>Quote</th>
            <th>Assignee</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <%= pb_rails("person_contact", props: {
                first_name: "Jesse",
                last_name: "Cortez",
                contacts: [
                  {
                    contact_type: "cell",
                    contact_value: "3832919348"
                  },
                  {
                    contact_type: "email",
                    contact_value: "jesse.cortez@gmail.com"
                  }
                ]
              }) %>
            </td>
            <td>
              <%= pb_rails("date", props: { date: "2012-08-02T15:49:29Z", size: "xs" }) %>
            </td>
            <td>
              <%= pb_rails("body", props: { text: "Email" }) %>
              <%= pb_rails("caption", props: { text: "hello@companyname.com", size: 'xs' }) %>
            </td>
            <td>
              <%= pb_rails("progress_pills", props: { steps: 4, active: 0, title:"Status:", value:"Not Started" }) %>
            </td>
            <td>
              <%= pb_rails("currency", props: { amount: "729.63", size: "sm" }) %>
            </td>
            <td>
              <%= pb_rails("body", props: { text: "Unassigned" }) %>
            </td>
            <td>
              <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %>
            </td>
          </tr>
          <tr>
            <td>
              <%= pb_rails("person_contact", props: {
                first_name: "Bill",
                last_name: "Buchanan",
                contacts: [
                  {
                    contact_type: "cell",
                    contact_value: "8313455824"
                  },
                  {
                    contact_type: "email",
                    contact_value: "billbuch@yahoo.com"
                  }
                ]
              }) %>
            </td>
            <td>
              <%= pb_rails("date", props: { date: "2012-08-02T15:49:29Z", size: "xs" }) %>
            </td>
            <td>
              <%= pb_rails("body", props: { text: "Social Media" }) %>
              <%= pb_rails("caption", props: { text: "Facebook", size: 'xs' }) %>
            </td>
            <td>
              <%= pb_rails("progress_pills", props: { steps: 4, active: 3, title:"Status:", value:"Negotiation" }) %>
            </td>
            <td>
              <%= pb_rails("currency", props: { amount: "534.40", size: "sm" }) %>
            </td>
            <td>
              <%= pb_rails("user", props: {
                name: "Anna Black",
                title: "Project Coordinator",
                orientation: "horizontal",
                align: "left",
                avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
                }) %>
            </td>
            <td>
              <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %>
            </td>
          </tr>
          <tr>
            <td>
              <%= pb_rails("person_contact", props: {
                first_name: "Effie",
                last_name: "Guzman",
                contacts: [
                  {
                    contact_type: "cell",
                    contact_value: "1582430782"
                  },
                  {
                    contact_type: "email",
                    contact_value: "effieguzman@comcast.net"
                  }
                ]
              }) %>
            </td>
            <td>
              <%= pb_rails("date", props: { date: "2012-08-02T15:49:29Z", size: "xs" }) %>
            </td>
            <td>
              <%= pb_rails("body", props: { text: "Online Quote" }) %>
              <%= pb_rails("caption", props: { text: "Landing Page", size: 'xs' }) %>
            </td>
            <td>
              <%= pb_rails("progress_pills", props: { steps: 4, active: 4, title:"Status:", value:"Contract" }) %>
            </td>
            <td>
              <%= pb_rails("currency", props: { amount: "392.26", size: "sm" }) %>
            </td>
            <td>
              <%= pb_rails("user", props: {
                name: "Anna Black",
                title: "Project Coordinator",
                orientation: "horizontal",
                align: "left",
                avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
                }) %>
            </td>
            <td>
              <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %>
            </td>
          </tr>
          <tr>
            <td>
              <%= pb_rails("person_contact", props: {
                first_name: "Rodney",
                last_name: "Boone",
                contacts: [
                  {
                    contact_type: "cell",
                    contact_value: "3859275970"
                  },
                  {
                    contact_type: "email",
                    contact_value: "rodneyboone@gmail.com"
                  }
                ]
              }) %>
            </td>
            <td>
              <%= pb_rails("date", props: { date: "2012-08-02T15:49:29Z", size: "xs" }) %>
            </td>
            <td>
              <%= pb_rails("body", props: { text: "Internal" }) %>
              <%= pb_rails("caption", props: { text: "Referral", size: 'xs' }) %>
            </td>
            <td>
              <%= pb_rails("progress_pills", props: { steps: 4, active: 4, title:"Status:", value:"Contract" }) %>
            </td>
            <td>
              <%= pb_rails("currency", props: { amount: "342.86", size: "sm" }) %>
            </td>
            <td>
              <%= pb_rails("user", props: {
                name: "Anna Black",
                title: "Project Coordinator",
                orientation: "horizontal",
                align: "left",
                avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
                }) %>
            </td>
            <td>
              <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %>
            </td>
          </tr>
          <tr>
            <td>
              <%= pb_rails("person_contact", props: {
                first_name: "Barbara",
                last_name: "Maxwell",
                contacts: [
                  {
                    contact_type: "cell",
                    contact_value: "2849186943"
                  },
                  {
                    contact_type: "email",
                    contact_value: "barbaramaxwell4@yahoo.com"
                  }
                ]
              }) %>
            </td>
            <td>
              <%= pb_rails("date", props: { date: "2012-08-02T15:49:29Z", size: "xs" }) %>
            </td>
            <td>
              <%= pb_rails("body", props: { text: "Online Quote" }) %>
              <%= pb_rails("caption", props: { text: "Main Website", size: 'xs' }) %>
            </td>
            <td>
              <%= pb_rails("progress_pills", props: { steps: 4, active: 3, title:"Status:", value:"Negotiation" }) %>
            </td>
            <td>
              <%= pb_rails("currency", props: { amount: "145.01", size: "sm" }) %>
            </td>
            <td>
              <%= pb_rails("user", props: {
                name: "Anna Black",
                title: "Project Coordinator",
                orientation: "horizontal",
                align: "left",
                avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
                }) %>
            </td>
            <td>
              <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %>
            </td>
          </tr>
          <tr>
            <td>
              <%= pb_rails("person_contact", props: {
                first_name: "Ellen",
                last_name: "Thornton",
                contacts: [
                  {
                    contact_type: "cell",
                    contact_value: "6884927492"
                  },
                  {
                    contact_type: "email",
                    contact_value: "ellen.thornton@gmail.com"
                  }
                ]
              }) %>
            </td>
            <td>
              <%= pb_rails("date", props: { date: "2012-08-02T15:49:29Z", size: "xs" }) %>
            </td>
            <td>
              <%= pb_rails("body", props: { text: "Social Media" }) %>
              <%= pb_rails("caption", props: { text: "Instagram", size: 'xs' }) %>
            </td>
            <td>
              <%= pb_rails("progress_pills", props: { steps: 4, active: 3, title:"Status:", value:"Negotiation" }) %>
            </td>
            <td>
              <%= pb_rails("currency", props: { amount: "25.27", size: "sm" }) %>
            </td>
            <td>
              <%= pb_rails("user", props: {
                name: "Anna Black",
                title: "Project Coordinator",
                orientation: "horizontal",
                align: "left",
                avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
                }) %>
            </td>
            <td>
              <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %>
            </td>
          </tr>
        </tbody>
      <% end %>
  <% end %>

<!-- END TABLE -->