-
Notifications
You must be signed in to change notification settings - Fork 88
Billing Page UI design #467
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
18 commits
Select commit
Hold shift + click to select a range
569f716
changed billing page
onkar-saeloun a1bb335
added index page
onkar-saeloun 58cbde4
added header page
onkar-saeloun 6cd4840
added table row page
onkar-saeloun e38e4c0
Merge branch 'organisation-settings-page' of github.com:saeloun/miru-…
onkar-saeloun 352f0ce
Merge branch 'organisation-settings-page' of github.com:saeloun/miru-…
onkar-saeloun 63586eb
changed UI data as per design
onkar-saeloun 3f87e81
changed conditional rendering to visibility
onkar-saeloun 822e505
added wrapper div for scroling action
onkar-saeloun d446c35
added max-height config
onkar-saeloun 5220db4
Merge branch 'develop' of github.com:saeloun/miru-web into billing-page
onkar-saeloun b6741fe
resolved lintel issues
onkar-saeloun c84d983
removed billing from profile
onkar-saeloun 7872c6d
removed design data
onkar-saeloun 77545e7
removed data
onkar-saeloun 5e855f0
added billing page
onkar-saeloun 9a2d479
merged develop branch in billing page
onkar-saeloun 4bd3441
changed import of billing page
onkar-saeloun File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
36 changes: 36 additions & 0 deletions
36
app/javascript/src/components/Profile/Billing/Table/TableHeader.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import * as React from "react"; | ||
|
|
||
| const TableHeader = () => ( | ||
| <tr> | ||
| <th className="px-2 py-1 text-xs font-normal tracking-widest text-left text-miru-black-1000" scope="col"> | ||
| DATE | ||
| </th> | ||
| <th | ||
| scope="col" | ||
| className="px-4 py-1 text-xs font-normal tracking-widest text-left text-miru-black-1000" | ||
| > | ||
| DESCRIPTION | ||
| </th> | ||
| <th | ||
| scope="col" | ||
| className="px-2 py-1 text-xs font-normal tracking-widest text-left text-miru-black-1000" | ||
| > | ||
| TEAM MEMBERS | ||
| </th> | ||
| <th | ||
| scope="col" | ||
| className="px-2 py-1 text-xs font-normal tracking-widest text-center text-miru-black-1000" | ||
| > | ||
| TOTAL BILL AMT | ||
| </th> | ||
| <th | ||
| scope="col" | ||
| className="px-2 py-1 text-xs font-normal tracking-widest text-center text-miru-black-1000" | ||
| > | ||
| PAYMENT TYPE | ||
| </th> | ||
| <th scope="col" className="relative px-6 py-3"></th> | ||
| </tr> | ||
| ); | ||
|
|
||
| export default TableHeader; |
47 changes: 47 additions & 0 deletions
47
app/javascript/src/components/Profile/Billing/Table/TableRow.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import React, { useState } from "react"; | ||
| import { DownloadSimple } from "phosphor-react"; | ||
|
|
||
| const TableRow = ({ | ||
| data | ||
| }) => { | ||
| const [isSending, setIsSending] = useState<boolean>(false); | ||
|
|
||
| return ( | ||
| <> | ||
| <tr className="last:border-b-0 hover:bg-miru-gray-200 group"> | ||
| <td className="px-2 py-4 text-xs font-normal text-miru-dark-purple-1000 "> | ||
| {data.date} | ||
| </td> | ||
|
|
||
| <td className="w-10/12 px-4 py-4 text-xs font-normal text-miru-dark-purple-1000 ftracking-wider"> | ||
| {data.description} | ||
| </td> | ||
|
|
||
| <td className=" px-2 py-4 text-base font-normal tracking-wider text-miru-dark-purple-1000"> | ||
| {data.team_members} | ||
| </td> | ||
|
|
||
| <td className="px-2 py-4 w-2/12 text-center text-xl font-bold tracking-wider text-miru-dark-purple-1000"> | ||
| {data.total_bill_amt} | ||
| </td> | ||
|
|
||
| <td className="px-2 py-4 text-xs font-normal text-miru-dark-purple-1000"> | ||
| {data.payment_type} | ||
| </td> | ||
|
|
||
| <td className="px-2 py-4 text-sm font-medium text-right whitespace-nowrap"> | ||
| <div className="flex items-center h-full"> | ||
| <button | ||
| className="hidden group-hover:block text-miru-han-purple-1000" | ||
| onClick={() => setIsSending(!isSending)} | ||
| > | ||
| <DownloadSimple size={16} /> | ||
| </button> | ||
| </div> | ||
| </td> | ||
| </tr> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default TableRow; |
24 changes: 24 additions & 0 deletions
24
app/javascript/src/components/Profile/Billing/Table/index.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import * as React from "react"; | ||
|
|
||
| import TableHeader from "./TableHeader"; | ||
| import TableRow from "./TableRow"; | ||
|
|
||
| const data = []; | ||
|
|
||
| const Table = () => ( | ||
| <table className="min-w-full mt-1 divide-y divide-gray-200"> | ||
| <thead> | ||
| <TableHeader /> | ||
| </thead> | ||
|
|
||
| <tbody className="min-w-full bg-miru-gray-100 divide-y divide-gray-200"> | ||
| {data.map((data) => ( | ||
| <TableRow | ||
| data={data} | ||
| /> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| ); | ||
|
|
||
| export default Table; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import React from "react"; | ||
| import { Divider } from "common/Divider"; | ||
|
|
||
| import Table from "./Table"; | ||
| import Header from "../Header"; | ||
|
|
||
| const Billing = () => ( | ||
| <> | ||
| <div className="flex flex-col w-4/5"> | ||
| <Header | ||
| title={"Billing"} | ||
| subTitle={"View upcoming bill amount, due date and past bills"} | ||
| showButtons={false} | ||
| /> | ||
| <div className="max-h-70v overflow-scroll"> | ||
| <div className="pb-5 pt-5 pl-5 pr-5 mt-4 bg-miru-gray-100 max-h-40v"> | ||
| <div className="flex flex-row py-2 justify-between"> | ||
| <div className="font-semibold p-2">Next Billing Date</div> | ||
| <div className="font-bold p-2"> | ||
| - | ||
| </div> | ||
| </div> | ||
| <Divider /> | ||
| <div className="flex flex-row py-2 justify-between items-end"> | ||
| <div className="p-2"> | ||
| <p className="font-normal text-xs text-miru-dark-purple-1000">Add-Ons</p> | ||
| <p className="font-semibold">1 team member</p> | ||
| <p className="font-normal text-xs text-miru-dark-purple-400">-$ per user per month</p> | ||
| </div> | ||
| <div className="p-2 text-right"> | ||
| <p className="font-bold mt-2 text-base">-$/mo</p> | ||
| <p className="font-normal text-xs text-miru-dark-purple-400">charged every month </p> | ||
| </div> | ||
| </div> | ||
| <Divider /> | ||
| <div className="flex flex-row py-2 justify-between items-start"> | ||
| <div className="p-2 font-bold text-2xl"> Total </div> | ||
| <div className="p-2 text-right"> | ||
| <p className="font-bold mt-2">-$</p> | ||
| <p className="font-normal text-xs text-miru-dark-purple-400">plus taxes </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="pb-5 pt-5 pl-5 pr-5 mt-4 bg-miru-gray-100 min-h-40v"> | ||
| <p className='font-semibold p-2 text-xl'>Billing History</p> | ||
| <Table /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ); | ||
|
|
||
| export default Billing; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
36 changes: 36 additions & 0 deletions
36
app/javascript/src/components/Profile/Organization/Billing/Table/TableHeader.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import * as React from "react"; | ||
|
|
||
| const TableHeader = () => ( | ||
| <tr> | ||
| <th className="px-2 py-1 text-xs font-normal tracking-widest text-left text-miru-black-1000" scope="col"> | ||
| DATE | ||
| </th> | ||
| <th | ||
| scope="col" | ||
| className="px-4 py-1 text-xs font-normal tracking-widest text-left text-miru-black-1000" | ||
| > | ||
| DESCRIPTION | ||
| </th> | ||
| <th | ||
| scope="col" | ||
| className="px-2 py-1 text-xs font-normal tracking-widest text-left text-miru-black-1000" | ||
| > | ||
| TEAM MEMBERS | ||
| </th> | ||
| <th | ||
| scope="col" | ||
| className="px-2 py-1 text-xs font-normal tracking-widest text-center text-miru-black-1000" | ||
| > | ||
| TOTAL BILL AMT | ||
| </th> | ||
| <th | ||
| scope="col" | ||
| className="px-2 py-1 text-xs font-normal tracking-widest text-center text-miru-black-1000" | ||
| > | ||
| PAYMENT TYPE | ||
| </th> | ||
| <th scope="col" className="relative px-6 py-3"></th> | ||
| </tr> | ||
| ); | ||
|
|
||
| export default TableHeader; |
47 changes: 47 additions & 0 deletions
47
app/javascript/src/components/Profile/Organization/Billing/Table/TableRow.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import React, { useState } from "react"; | ||
| import { DownloadSimple } from "phosphor-react"; | ||
|
|
||
| const TableRow = ({ | ||
| data | ||
| }) => { | ||
| const [isSending, setIsSending] = useState<boolean>(false); | ||
|
|
||
| return ( | ||
| <> | ||
| <tr className="last:border-b-0 hover:bg-miru-gray-200 group"> | ||
| <td className="px-2 py-4 text-xs font-normal text-miru-dark-purple-1000 "> | ||
| {data.date} | ||
| </td> | ||
|
|
||
| <td className="w-10/12 px-4 py-4 text-xs font-normal text-miru-dark-purple-1000 ftracking-wider"> | ||
| {data.description} | ||
| </td> | ||
|
|
||
| <td className=" px-2 py-4 text-base font-normal tracking-wider text-miru-dark-purple-1000"> | ||
| {data.team_members} | ||
| </td> | ||
|
|
||
| <td className="px-2 py-4 w-2/12 text-center text-xl font-bold tracking-wider text-miru-dark-purple-1000"> | ||
| {data.total_bill_amt} | ||
| </td> | ||
|
|
||
| <td className="px-2 py-4 text-xs font-normal text-miru-dark-purple-1000"> | ||
| {data.payment_type} | ||
| </td> | ||
|
|
||
| <td className="px-2 py-4 text-sm font-medium text-right whitespace-nowrap"> | ||
| <div className="flex items-center h-full"> | ||
| <button | ||
| className="hidden group-hover:block text-miru-han-purple-1000" | ||
| onClick={() => setIsSending(!isSending)} | ||
| > | ||
| <DownloadSimple size={16} /> | ||
| </button> | ||
| </div> | ||
| </td> | ||
| </tr> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default TableRow; |
24 changes: 24 additions & 0 deletions
24
app/javascript/src/components/Profile/Organization/Billing/Table/index.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import * as React from "react"; | ||
|
|
||
| import TableHeader from "./TableHeader"; | ||
| import TableRow from "./TableRow"; | ||
|
|
||
| const data = []; | ||
|
|
||
| const Table = () => ( | ||
| <table className="min-w-full mt-1 divide-y divide-gray-200"> | ||
| <thead> | ||
| <TableHeader /> | ||
| </thead> | ||
|
|
||
| <tbody className="min-w-full bg-miru-gray-100 divide-y divide-gray-200"> | ||
| {data.map((data) => ( | ||
| <TableRow | ||
| data={data} | ||
| /> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| ); | ||
|
|
||
| export default Table; |
56 changes: 46 additions & 10 deletions
56
app/javascript/src/components/Profile/Organization/Billing/index.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,53 @@ | ||
| import React from "react"; | ||
| import { Divider } from "common/Divider"; | ||
|
|
||
| import Table from "./Table"; | ||
| import Header from "../../Header"; | ||
|
|
||
| const OrgBilling = () => ( | ||
| <div className="flex flex-col w-4/5"> | ||
| <Header | ||
| title={"Bank Account Details"} | ||
| subTitle={"Settings to receive payment from your employer"} | ||
| /> | ||
| <div className="py-10 pl-10 mt-4 bg-miru-gray-100 h-screen"> | ||
| <p>Billing Page Coming up</p> | ||
| const Billing = () => ( | ||
| <> | ||
| <div className="flex flex-col w-4/5"> | ||
| <Header | ||
| title={"Billing"} | ||
| subTitle={"View upcoming bill amount, due date and past bills"} | ||
| showButtons={false} | ||
| /> | ||
| <div className="max-h-70v overflow-scroll"> | ||
| <div className="pb-5 pt-5 pl-5 pr-5 mt-4 bg-miru-gray-100 max-h-40v"> | ||
| <div className="flex flex-row py-2 justify-between"> | ||
| <div className="font-semibold p-2">Next Billing Date</div> | ||
| <div className="font-bold p-2"> | ||
| - | ||
| </div> | ||
| </div> | ||
| <Divider /> | ||
| <div className="flex flex-row py-2 justify-between items-end"> | ||
| <div className="p-2"> | ||
| <p className="font-normal text-xs text-miru-dark-purple-1000">Add-Ons</p> | ||
| <p className="font-semibold">1 team member</p> | ||
| <p className="font-normal text-xs text-miru-dark-purple-400">-$ per user per month</p> | ||
| </div> | ||
| <div className="p-2 text-right"> | ||
| <p className="font-bold mt-2 text-base">-$/mo</p> | ||
| <p className="font-normal text-xs text-miru-dark-purple-400">charged every month </p> | ||
| </div> | ||
| </div> | ||
| <Divider /> | ||
| <div className="flex flex-row py-2 justify-between items-start"> | ||
| <div className="p-2 font-bold text-2xl"> Total </div> | ||
| <div className="p-2 text-right"> | ||
| <p className="font-bold mt-2">-$</p> | ||
| <p className="font-normal text-xs text-miru-dark-purple-400">plus taxes </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="pb-5 pt-5 pl-5 pr-5 mt-4 bg-miru-gray-100 min-h-40v"> | ||
| <p className='font-semibold p-2 text-xl'>Billing History</p> | ||
| <Table /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ); | ||
|
|
||
| export default OrgBilling; | ||
| export default Billing; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.