datdot-ui task structure

# datdot-ui task structure ## wireframe-v0 --- ### buttons `@todo` - [ ] Create button library - `@input` [icon]() form # - [ ] add the following states in the buttons - [ ] leading-icon placeholder - [ ] trailing-icon placeholder - [ ] text placeholder - [ ] small, normal, and large padding - [ ] colors: default, secondary, disable, text links, danger, success, info - `@output` [buttons_v0.0.1]() from [comment]() --- ### alert_1 `@todo` - [ ] Create a design for alert_1 box - `@input` [icon]() form # - [ ] Add an icon - [ ] Add a alert's text - `@output` [alert_1_v0.0.1]() from [comment]() --- ### select_account_card `@todo` - [ ] Create select account cards - `@input` [icon]() from # - [ ] add user icon - [ ] add card title - [ ] add card description - `@output` [select_account_card_v0.0.1]() form [comment]() --- ### text_input `@todo` - [ ] design text_input - `@input` [icon]() from # - [ ] add input label - [ ] add input type state - [ ] text, password - [ ] add trailing icons - `@output` [text_input_v0.0.1]() from [comment]() --- ### checkbox_input `@todo` - [ ] design checkbox_input - `@input` [icon]() form # - [ ] add state for checkbox - [ ] state - [ ] checked, unchecked, disabled, danger, success - [ ] add label placeholder (may contian links, icon etc) - `@output` [checkbox_input_v0.0.1]() from [comment]() --- ### radio_input `@todo` - [ ] design radio_input - `@input` [icon]() form # - [ ] add state for radio - [ ] state - [ ] selected, unselected, disabled, danger, success - [ ] add label placeholder (may contian links, icon etc) - `@output` [radio_input_v0.0.1]() from [comment]() --- ### seed_phrase `@todo` - [ ] design seed_phrase text_area - `@input` [icon]() form # - [ ] add a label - [ ] add an icon - [ ] add the hidden and visible state - `@output` [seed_phrase_v0.0.1]() form [comment]() --- ### pill_tag `@todo` - [ ] design pill tags component - [ ] add the following states in the pill tags - [ ] text placeholder - [ ] small, normal, and large padding - [ ] border-radius - [ ] colors: default, secondary, disable, danger, success - `@output` [pill_tag_v0.0.1]() from [comment] --- ### point_tag `@todo` - [ ] design point tags - [ ] add a square point for the tag - [ ] add colors state: default, secondary, primary - `@output` [point_tag_v0.0.1]() from [comment]() --- ### stacked_chart_1 `@todo` - [ ] design stacked chart 1 - [ ] add percentage/proporation section with the covered percentage - `@output` [stacked_chart_1_v0.0.1]() from [comment]() --- ### bar_chart `@todo` - [ ] design bar chart - [ ] add percent/value label on the left - [ ] add days label on the bottom - [ ] add bars for representation - `@output` [bar_chart_v0.0.1]() from [comment]() --- ### select_input_1 `@todo` - [ ] design select inputs - `@input` [icon]() from # - [ ] add input label - [ ] add input text-field - [ ] add dropdown option - [ ] add select options - [ ] add different states - [ ] default, disable, active/selected etc - `@output` [select_input_1_v0.0.1]() from [comment]() --- ### toggle_btn `@todo` - [ ] design toggle btn - [ ] add on and off toggle states - [ ] add different states - [ ] default, disable, active, primary etc - `@output` [toggle_btn_v0.0.1]() from [comment]() --- ### account_signin/signup `@todo` - [ ] design the account signin and signup page - `@input` [select_account_card_v0.0.1]() from # - [ ] add application logo - [ ] add page title - [ ] add first select_account_card with - [ ] icon - user - [ ] title - `Already have account` - [ ] description - `import an existing seed phrase` - [ ] add second select_account_card with - [ ] icon - user plus - [ ] title - `Create new an account` - [ ] description - `will generate a new account and seed phrase` - `@output` [account_signin/signup_v0.0.1]() from [comment]() --- ### create_password `@todo` - [ ] design the create password page - `@input` [text_input_v0.0.1]() from # - `@input` [checkbox_input_v0.0.1]() from # - `@input` [button_1_v0.0.1]() from # - [ ] add app logo - [ ] add the page title `Create Password` - [ ] add input field for new password - [ ] with 8 char validation - [ ] add input field for confirm password - [ ] add checkbox for `I have read and agree to the terms and use` - [ ] add an anchor link terms of use - [ ] add an icon with copy link - [ ] add a secondary btn `Cancel` - [ ] add a disable & active btn Create - `@output` [create_password_v0.0.1]() from [comment]() --- ### import_account `@todo` - [ ] design an import account page - `@input` [seed_phrase_v0.0.1]() from # - `@input` [checkbox_input_v0.0.1]() from # - `@input` [text_input_v0.0.1]() from # - `@input` [button_v0.0.1]() from # - [ ] add app logo - [ ] add page title - [ ] add page desc - [ ] add leading-icon btn of `import JSON` - [ ] add seed phrase input field - [ ] add new password input field - [ ] add confirm password input field - [ ] add checkbox for `I have read and agree to the terms and use` - [ ] add an anchor link terms of use - [ ] add an icon with copy link - [ ] add a secondary btn `Cancel` - [ ] add a disable & active btn `Import` - `@output` [import_account_v0.0.1]() from [comment]() --- ### secret_backup_phrase `@todo` - [ ] design secret backup phrase page - `@input` [button_v0.0.1]() from # - `@input` [alert_1_v0.0.1]() from # - `@input` [seed_phrase_v0.0.1]() from # - [ ] add app logo - [ ] add page title - [ ] add page desc - [ ] add leading-icon btn of `Download phrase` - [ ] add seed phrase input field - [ ] add alert_1 with a leading icon - [ ] add active btn of `next` - `@output` [secret_backup_phrase_v0.0.1]() from [comment]() --- ### welcome_aboard `@todo` - [ ] design welcome aboard page - `@input` [button_v0.0.1]() from #- `@input` [] - [ ] add app logo - [ ] add page title - [ ] add page desc - [ ] add placeholder image - [ ] add active/default btn of `Done` - `@ouput` [welcome_aboard_v0.0.1]() from [comment]() --- ### top_navbar - [ ] design top navbar - `@input` [button_v0.0.1]() from #- `@input` [] - [ ] add app logo - [ ] add page header placeholder (this will change based on passed props) - [ ] add icon btn of `notificiaon` - [ ] add state of unread notificaion - [ ] add icon btn of `profile` - `@output` [top_navbar_v0.0.1]() from [comment]() --- ### account_info `@todo` - [ ] Create a design for account_info - `@input` [Button_1]() form # - [ ] wallet title text - [ ] wallet address - [ ] total assets value - [ ] buy btn - [ ] send btn - `@output` [account_info_v0.0.1]() from [comment]() --- ### hosting/backing_info_card_1 `@todo` - [ ] design hosting & backing info card 1 - `@input` [Button_1]() form # - [ ] add card title placeholder - [ ] add ratio/description placeholder - [ ] add leading icons of arrow-up, and arrow-down - `@output` [hosting/backing_info_card_1_v0.0.1]() from [comment]() --- ### disk_space_info_card `@todo` - [ ] design disk space info card - `@input` [point_tag_v0.0.1]() from # - `@input` [stacked_chart_1_v0.0.1]() from # - `@input` [toggle_btn_v0.0.1]() from # - [ ] add card title placeholder - [ ] add toggle btn - [ ] add point tags with `computer use`, `hosting` and `no use` - [ ] add stacked_chart_1 - `@ouput` [disk_space_info_card_v0.0.1]() from [comment]() --- ### archive_info_card_1 `@todo` - [ ] design archive info card 1 - `@input` [button_v0.0.1]() from # - `@input` [pill_tag_v0.0.1]() from # - `@input` [bar_chart_v0.0.1]() from # - `@input` [toggle_btn_v0.0.1]() from # - [ ] add pill tag with status - [ ] add card title - [ ] add card description - [ ] add size and peer info - [ ] add stage chart - [ ] add icon btn - `@output` [archive_info_card_1_v0.0.1]() from [comment]() --- ### action_menu `@todo` - [ ] design action menu - `@input` [button_v0.0.1]() from # - [ ] add icon btn - [ ] show popover onClick - `@output` [action_menu_v0.0.1]() from [comment]() --- ### card_info `@todo` - [ ] design card info - [ ] add image placeholder - [ ] add title placeholder - [ ] add description placeholder - `@output` [card_info_v0.0.1]() from [comment]() --- ### hosting_&_service_panel `@todo` - [ ] design hosting and service panel/page - `@input` [top_navbar_v0.0.1]() from # - `@input` [card_info_v0.0.1]() from # - `@input` [action_menu_v0.0.1]() from # - `@input` [archive_info_card_1_v0.0.1]() from # - [ ] add top navbar - [ ] add info card for `Need Hosting` - [ ] add info card for `Offer Service` - [ ] add archive_info_card_1 for all the archive info - [ ] add action mennu - `@ouput` [hosting_&_service_panel_v0.0.1]() from [comment]() --- ### hosting_&_service_(choose_service)_panel `@todo` - [ ] design hosting_&_service_(choose_service) panel/page - `@input` [card_info_v0.0.1]() from # - `@input` [action_menu_v0.0.1]() from # - [ ] add page title `Choose service` - [ ] add info card for `Need Hosting` - [ ] add info card for `Offer service` - `@output` [hosting_&_service_(choose_service)_panel_v0.0.1]() from [comment]() --- ### hosting_&_service_(publish data) `@todo` - [ ] design hosting_&_service_(publish data) panel/page - `@input` [select_input_1_v0.0.1]() from # - `@input` [button_v0.0.1]() from # - `@input` [text_input_v0.0.1]() from # - `@input` [action_menu_v0.0.1]() from # - [ ] add page title - [ ] add text_input field for `archive name` - [ ] add disable text_input field for `archive key` - [ ] add text_input for `size` - [ ] attached to it add select_input_1 for `md`,`gb`, etc - [ ] add select_input_1 for status - [ ] add select_input_1 for location - [ ] add buttons for `Cancel` - [ ] add buttons for `Publish` - [ ] add action menu - `@output` [hosting_&_service_(publish data)_v0.0.1]() from [comment]() --- ### dashboard_panel `@todo` - [ ] design dashboard_panel - `@input` [top_navbar_v0.0.1]() from # - `@input` [account_info_v0.0.1]() from # - `@input` [hosting/backing_info_card_1_v0.0.1]() from # - `@input` [disk_space_info_card_v0.0.1]() from # - `@input` [archive_info_card_1_v0.0.1]() from # - `@input` [action menu_v0.0.1]() from # - [ ] add account info - [ ] add hosting and backing info card 1 - [ ] add disk space info card - [ ] add archive info card 1 for all the available archives - [ ] add the action menu - `@output` [dashboard_panel_v0.0.1]() from [comment]() --- ## wireframe-v1 --- ### buttons `@todo` - [ ] Update button's library - `@input` [buttons_v0.0.1]() from # - add border radius designed buttons - `@output` [buttons_v0.0.2]() from [comment]() --- ### login_page `@todo` - [ ] design login page - `@input` [text_input_v0.0.1]() from # - `@input` [button_v0.0.2]() from # - [ ] add page title - [ ] add page description - [ ] add input for `new password` - [ ] add button for `login` - [ ] add button for `Restore account` - `@output` [login_page_v0.0.1]() from [comment]() --- ### profile_sidenav `@todo` - [ ] design profile_sidenav - `@input` [toggle_btn_v0.0.1]() from # - `@input` [button_v0.0.2]() from # - [ ] add back/close panel btn - [ ] add account name nad address - [ ] add text btns(CTA) for following pages - [ ] Change password - [ ] Recovery phrase - [ ] Export wallet - [ ] Create new account - [ ] Import account - [ ] Show test networks - [ ] add toggle button for `show test networks` - [ ] add btn for `logout` - `@output` [profile_sidenav_v0.0.1]() from [comment]() --- ### import_account `@todo` - [ ] update import account page - `@input` [button_v0.0.2]() from # - `@input` [checkbox_input_v0.0.1]() from # - `@input` [text_input_v0.0.1]() from # - `@input` [import_account_v0.0.1]() from # - [ ] update the button with border-radius - [ ] replace `Cancel` button with text_btn `create new account` - `@output` [import_account_v0.0.2]() from [comment]() --- ### create_password `@todo` - [ ] update create password panel/page - `@input` [button_v0.0.2]() from # - `@input` [create_password_v0.0.1]() from # - [ ] update the button with border-radius - [ ] replace `Cancel` button with text_btn `Already have an account` - `@output` [create_password_v0.0.2]() from [comment]() --- ### secret_backup_phrase `@todo` - [ ] update secret_backup_phrase - `@input` [secret_backup_phrase_v0.0.1]() from # - `@input` [button_v0.0.2]() from # - [ ] update page content alignment to center - [ ] update buttons to rounded radius - `@output` [secret_backup_phrase_v0.0.2]() from [comment]() --- ### welcome_aboard `@todo` - [ ] a - `@input` [welcome_aboard_v0.0.1]() from # - [ ] update button to rounded radious - `@output` [welcome_aboard_v0.0.2]() from [comment]() --- ### top_navbar `@todo` - [ ] update top_navbar - `@input` [top_navbar_v0.0.1]() from # - [ ] make the navbar responsive - [ ] remove the navbar header on smaller screen - [ ] add toggle action menu toggle btn **Need confirmation** - `@output` [top_navbar_v0.0.2]() from [comment]() --- ### list_card_1 `@todo` - [ ] design list_card_1 - `@input` [button_v0.0.2]() from # - [ ] add img placeholder - [ ] add title (may contain verified icon) - [ ] add desc - [ ] add value - `@output` [list_card_1_v0.0.1]() from [comment]() --- ### transaction_list `@todo` - [ ] design transaction_list - `@input` [button_v0.0.2]() from # - `@input` [list_card_1_v0.0.1]() from # - [ ] add list title - [ ] add icon button - [ ] add date on the list - [ ] add `list_card_1` - `@output` [transaction_list_v0.0.1]() from [comment]() --- ### hosting/backing_info_card_1 `@todo` - [ ] update hosting/backing_info_card_1 - `@input` [hosting/backing_info_card_1_v0.0.1]() from # - [ ] update replace the leading arrow icons to plus-icon, and minus-icon - [ ] update active state using border - `@output` [hosting/backing_info_card_1_v0.0.2]() from [comment]() --- ### account_logs_list `@todo` - [ ] design account logs list - `@input` [list_card_1_v0.0.1]() from # - `@input` [pill_tag_v0.0.1]() from # - [ ] add account title - [ ] add account address - [ ] add account value/asset - [ ] add list card 1 - `@output` [account_logs_list_v0.0.1]() from [comment]() --- ### line_chart `@todo` - [ ] design line_chart - [ ] add value labels on left - [ ] add day's labels on bottom - `@output` [line_chart_v0.0.1]() from [comment]() --- ### wallet tab `@todo` - [ ] design wallet tab panel/page - `@input` [profile_sidenav_v0.0.1]() from # - `@input` [top_navbar_v0.0.2]() from # - `@input` [hosting/backing_info_card_1_v0.0.2]() from # - `@input` [transaction_list_v0.0.1]() from # - [ ] add top navbar - [ ] add balance info - [ ] add info_card_1 - [ ] with plus/adding ctas - [ ] add transaction_list - `@output` [wallet_tab_v0.0.1]() from [comment]() --- ### archive_info_card_1 `@todo` - [ ] update archive_info_card_1 - `@input` [archive_info_card_1_v0.0.1]() from # - `@input` [line_chart_v0.0.1]() from # - [ ] add the line_chart into the archive info card 1 - `@output` [archive_info_card_1_v0.0.2]() from [comment]() --- ### dashboard_panel `@todo` - [ ] update dashboard panel/page - `@input` [dashboard_panel_v0.0.1]() from # - `@input` [archive_info_card_1_v0.0.2]() from # - [ ] add the line-chart in archive_info_card_1 - `@output` [dashboard_panel_v0.0.2]() from [comment]() --- ## wireframe-v2 --- ### text_input `@todo` - [ ] update text_input - `@input` [text_input_v0.0.1]() from # - [ ] add option for abbr icon/tooltips on label - [ ] add trailing icon - `@output` [text_input_v0.0.2]() from [comment]() --- ### alert_2 `@todo` - [ ] Create a design for alert_2 box - `@input` [icon]() form # - [ ] Add a alert's text - `@output` [alert_2_v0.0.1]() from [comment]() --- ### create_new_account `@todo` - [ ] design create_new_account page - `@input` [text_input_v0.0.2]() from # - `@input` [create_password_v0.0.2]() from # - `@input` [alert_2_v0.0.2]() from # - `@input` [secret_backup_phrase_v0.0.2]() from # - [ ] depricate create_password - [ ] depricate secret_backup_phrase - [ ] design first step - [ ] add page title - [ ] add text_input account name - [ ] add text_input with abbr icons - [ ] add button for `next` - [ ] add alert_2 - [ ] design second step - [ ] add page title - [ ] add user account info - [ ] add seed phrase - [ ] add alert_1 - [ ] add button generator_with_this_seed - [ ] add text_button cancel - `@output` [create_new_account_v0.0.1]() from [comment]() --- ### archive_info_card_2 `@todo` - [ ] design archive_info_card_2 - `@input` [pill_tag_v0.0.1]() from # - [ ] add achive title - [ ] add date - [ ] add pill_tag (optional based on card state) - [ ] add a progress bar - `@output` [archive_info_card_2_v0.0.1]() from [comment]() --- ### content_filter `@todo` - [ ] design content filter - `@input` [button_v0.0.2]() from # - [ ] add buttons for filter - [ ] add text button for sorting - [ ] add icon buttons for sorting - `@output` [content_filter_v0.0.1]() from [comment]() --- ### modal_1 `@todo` - [ ] design modal_1 - `@input` [button_v0.0.2]() from # - [ ] add modal title - [ ] add modal desc - [ ] add secondary btn for `Cancel` - [ ] add primary btn for `Yes` - `@output` [modal_1_v0.0.1]() from [comment]() --- ### archive_info_list `@todo` - [ ] design archive_info_list - `@input` [text_input_v0.0.2]() from # - `@input` [archive_info_card_2_v0.0.1]() from # - `@input` [content_filter_v0.0.1]() from # - [ ] add content filter - [ ] add archive info card 2 - `@output` [archive_info_list_v0.0.1]() from [comment]() --- ### profile_sidenav `@todo` - [ ] update profile_sidenav - `@input` [profile_sidenav_v0.0.1]() from # - [ ] replace user wallet design - [ ] replace the current links with the following - [ ] accounts - [ ] create new account - [ ] export account - [ ] import account via pre-existing seed - [ ] restore account via JSON file - [ ] replace `logout` button with `forgot account` button - `@output` [profile_sidenav_v0.0.2]() from [comment]() --- ### archives_panel `@todo` - [ ] design archives panel/page - `@input` [top_navbar_v0.0.2]() from # - `@input` [text_input_v0.0.2]() from # - `@input` [profile_sidenav_v0.0.2]() from # - `@input` [archive_info_list_v0.0.1]() from # - [ ] add profile sidenav - [ ] add top navbar - [ ] add page title - [ ] add text input with trailing icon for search - [ ] add archive info list - `@output` [archives_panel_v0.0.1]() from [comment]() --- ### transaction_list `@todo` - [ ] update transaction_list - `@input` [transaction_list_v0.0.1]() from # - `@input` [content_filter_v0.0.1]() from # - [ ] add content filter - [ ] add month filter option - `@output` [transaction_list_v0.0.2]() from [comment]() --- ### wallet tab `@todo` - [ ] update wallet tab - `@input` [wallet_tab_v0.0.1]() from # - `@input` [transaction_list_v0.0.2]() from # - [ ] add the updated transaction list into wallet - `@output` [wallet_tab_v0.0.1]() from [comment]() --- ### hosting_&_service_(publish data) `@todo` - [ ] update hosting_&_service_(publish data) pnale/page - `@input` [buttons_v0.0.2]() from # - `@input` [hosting_&_service_(publish data)_v0.0.1]() from # - [ ] update buttons with border-radius - [ ] add buttons for `update` and `done` options - `@output` [hosting_&_service_(publish data)_v0.0.2]() from [comment]() --- ### offer_hosting `@todo` - [ ] design offer hosting panel/page - `@input` [text_input_v0.0.2]() from # - `@input` [select_input_1_v0.0.1]() from # - `@input` [button_v0.0.2]() from - `@input` [checkbox_input_v0.0.1]() from # - `@input` [point_tag_v0.0.1]() from # - `@input` [stacked_chart_1_v0.0.1]() from # - [ ] add point tags with `computer use`, `hosting` and `no use` - [ ] add stacked_chart_1 - [ ] add text input field for `space` - [ ] add select_input for `mb`,`gb` etc - [ ] add select_input for `location` - [ ] add start input - [ ] select_input for `month` - [ ] select_input for `day` - [ ] select_input for `year` - [ ] text_input for `time` - [ ] add end input - [ ] select_input for `month` - [ ] select_input for `day` - [ ] select_input for `year` - [ ] text_input for `time` - [ ] add checkbox_input for `all day` - [ ] add checkbox_input for `I want to register as encode` - [ ] add checkbox_input for `I want to register as attester` - [ ] add button for `Set` - `@output` [offer_hosting_v0.0.1]() from [comment]() --- ### Send funds `@todo` - [ ] design send funds panel/page - `@input` [select_input_1_v0.0.1]() from # - `@input` [text_input_v0.0.2]() from # - `@input` [buttons_v0.0.2]() from # - [ ] add select input for `send account` - [ ] add select input for `receive account` - [ ] text input for amount - [ ] with trailing text `ratio` - [ ] text input existential deposit - `@output` [send_funds_v0.0.1]() from [comment]() --- ## wireframe-v3 --- ### profile sidenav `@todo` - [ ] update profile_sidenav - `@input` [profile_sidenav_v0.0.2]() from # - [ ] make the profile-sidenav responsive to make full-width - `@output` [profile_sidenav_v0.0.3]() from [comment]() --- ## wireframe-v4 --- ### content_filter `@todo` - [ ] update content_filter - `@input` [content_filter_v0.0.1]() from # - [ ] simplify content_filter with just button tags - `@output` [content_filter_v0.0.2]() from [comment]() --- ### buttons `@todo` - [ ] update buttons - `@input` [buttons_v0.0.2]() from # - [ ] add notification tags on the buttons - `@output` [buttons_v0.0.3]() from [comment]() --- ### tool_tip `@todo` - [ ] design tool_tip - `@input` [buttons_v0.0.3]() from # - [ ] add content placeholder like img, text etc - `@output` [tool_tip_v0.0.1]() from [comment]() --- ### feed_grids `@todo` - [ ] design feed_grid - `@input` [tool_tip_v0.0.1]() from # - [ ] add columns and rows grid to show feeds/chunks - [ ] add highlights to differentiate used and free grid columns - `@output` [feed_grids_v0.0.1]() from [comment]() --- ### feed_card_row `@todo` - [ ] design feed_card_row - `@input` [feed_grids_v0.0.1]() from # - [ ] add card header-section - [ ] add row icon - [ ] add user/wallet logo - [ ] add username and wallet address - [ ] add published feed name - [ ] show how much time ago it was updated - [ ] add card body-section - [ ] add user logo - [ ] add username and wallet address - [ ] add date - [ ] add feed title - [ ] add `sponsor` value - [ ] add `size` value - [ ] add the feed_grids - [ ] add card footer-section - [ ] add ratio - [ ] add TX fee - `@output` [feed_card_row_v0.0.1]() from [comment]() --- ### feed_filter `@todo` - [ ] design feed filter - `@input` [content_filter_v0.0.2]() from # - `@input` [button_v0.0.3]() from # - `@input` [text_input_v0.0.2]() from # - `@input` [select_input_1_v0.0.1]() from # - [ ] add icon button with `plus` to add feeds - [ ] add notification button for `feeds` - [ ] add trailing icon text_input for search - [ ] add a select_input_1 with a down-caret - [ ] add content_filter - `@output` [feed_filter_v0.0.1]() from [comment]() --- ### feed_info_lists `@todo` - [ ] design feed_info_lists - `@input` [feed_card_row_v0.0.1]() from # - `@input` [pill_tag_v0.0.1]() from # - `@input` [select_input_1_v0.0.1]() from # - [ ] add list title - [ ] add pill tag - [ ] add select_input_1 with `down-caret` - [ ] add feed_card_rows - `@output` [feed_info_lists_v0.0.1]() from [comment]() --- ### action_menu `@todo` - [ ] update action_menu - `@input` [action_menu_0.0.1]() from # - [ ] depricate action_menu_0.0.1 - [ ] move the action menu to bottom navbar - [ ] add users icon - [ ] add files icon - [ ] add server icon - [ ] add ID icon - `@output` [action_menu_0.0.2]() from [comment]() --- ### feed_panel `@todo` - [ ] design feed_panel/page - `@input` [feed_filter_v0.0.1]() from # - `@input` [feed_info_lists_v0.0.1]() from # - `@input` [action_menu_0.0.2]() from # - [ ] add feed_filter - [ ] add feed info list - [ ] add action menu - `@output` [feed_panel_v0.0.1]() from [comment]() --- ## wireframe-v5 --- ### slider_input `@todo` - [ ] design slider input - `@input` [text_input_v0.0.2]() from # - [ ] add input field for start limit - [ ] add input field for end limit - [ ] add a range slider with 2 handles - [ ] on change of one value or slider will effect the others - `@output` [slider_input_v0.0.1]() from [comment]() --- ### action_menu `@todo` - [ ] update action_menu - `@input` [action_menu_0.0.2]() from # - [ ] update the icons to the following text - [ ] user - [ ] data - [ ] jobs - [ ] apps - `@output` [action_menu_0.0.3]() from [comment]() --- ### feed_grids `@todo` - [ ] update feed grids - `@input` [feed_grids_v0.0.1]() from # - [ ] add slider below the grid to show & slider through activities on the grid - `@output` [feed_grids_v0.0.2]() from [comment]() --- ### feed_card_grid `@todo` - [ ] design feed card grid - `@input` [feed_card_row_v0.0.1]() from # - `@input` [feed_grids_v0.0.2]() from # - [ ] modified the feed_card_row into a card_grid view - [ ] add feed_grids into the card - `@output` [feed_card_grid_v0.0.1]() from [comment]() --- ### feed_info_lists `@todo` - [ ] update the feed_info_list - `@input` [feed_card_grid_v0.0.1]() from # - [ ] add icon btn to toggle grid and list view - [ ] add card grid view - `@output` [feed_info_lists_v0.0.2]() from [comment]() --- ### feed_filter `@todo` - [ ] update feed_filter - `@input` [feed_filter_v0.0.1]() from # - [ ] remove `plus` icon btn from the filter - `@output` [feed_filter_v0.0.2]() from [comment]() --- ### feed_panel `@todo` - [ ] update feed_panel - `@input` [action menu_0.0.3]() from # - `@input` [feed_info_lists_v0.0.2]() from # - `@input` [feed_filter_v0.0.2]() from # - `@input` [button_v0.0.3]() from # - [ ] add the updated action menu - [ ] add the updated feed info lists - [ ] add the updated feed filter - [ ] add icon btn `plus` - [ ] use this to add feed - `@output` [feed_panel_0.0.2]() from [comment]() --- ### hosting_&_service_(publish data)_v0.0.3 (Require questions) `@todo` - [ ] update hosting_&_service_(publish data) - `@input` [hosting_&_service_(publish data)_v0.0.2]() from # - `@input` [slider_input_v0.0.1]() from # - [ ] add slider into the page - [ ] add swarm key into the page - `@output` [hosting_&_service_(publish data)_v0.0.3]() from [comment]() --- ## wireframe-v6 --- ### my_plans_card `@todo` - [ ] my_plans_card - [ ] add clickable cards/buttons with plan title - `@output` [my_plans_card_v0.0.1]() from [comment]() --- ### my_plans_grid `@todo` - [ ] design my_plans_grid - `@input` [my_plans_card_v0.0.1]() from # - [ ] add grids with clickable empty cards/butttons space - [ ] add the my_plans_card within that grid - `@output` [my_plans_grid_v0.0.1]() from [comment]() --- ### select-input_2 `@todo` - [ ] design select-input - `@input` [buttons_v0.0.3]() from # - [ ] add select option list - [ ] add search input for option list - [ ] add icon button for dropdown filter - [ ] add another select in the dropdown containing `my plans`, `available`, and `not available` - [ ] add select footer containing total option number - `@output` [select-input_2_v0.0.1]() from [comment]() --- ### feed-selector `@todo` - [ ] design feed selector - `@input` [select-input_2_v0.0.1]() from # - - `@input` [button_v0.031]() from # - [ ] add icon button with pencil icon to edit feed - [ ] add the select input 2 with all the feeds as options - `@output` [feed-selector_v0.0.1]() from [comment]() --- ### feed_grids `@todo` - [ ] update feed_grids v0.0.2 - `@input` [feed_grids_v0.0.2]() from # - [ ] add labels to the grid - `@output` [feed_grids_v0.0.3]() from [comment]() --- ### label_tag `@todo` - [ ] design label_tag - [ ] design a tag label - [ ] add a text placeholder - `@output` [label_tag_v0.0.1]() from [comment]() --- ### data_container_tab `@todo` - [ ] data_container_tab - `@input` [feed_grids_v0.0.3]() from # - `@input` [label_tag_v0.0.1]() from # - `@input` [pill_tag_v0.0.1]() from # - [ ] add tab title - [ ] add info about `sponsors`, `size`, and `block` with pill tags to show status - [ ] add the label tag with paid ratio - [ ] add the publish by user logo, name and address - [ ] add the date and time when it was published - `@output` [data_container_tab_v0.0.1]() from [comment]() --- ### range_date_input `@todo` - [ ] design range_date_input - [ ] design 2 calender to select specific dates - [ ] add months and years label on top to switch quickly between big time difference - [ ] make the selected dates primary color - [ ] make the dates in-between selected dated secondary color - [ ] add shorten day label on the top row of dates as heading - `@output` [range_date_input_v0.0.1]() from [comment]() --- ### schedule_container_tab `@todo` - [ ] design schedule_container_tab - `@input` [range_date_input_v0.0.1]() from # - [ ] add the range date input - [ ] add the start date, end date, duration and timezone after picking the date - `@output` [schedule_container_tab_v0.0.1]() from [comment]() --- ### list `@todo` - [ ] design list - `@input` [icon_v0.0.1]() from # - [ ] design unstyle list items - [ ] make the list item select-able - [ ] add leading `check` icon on the active list item and make them primary color - `@output` [list_v0.0.1]() from [comment]() --- ### location_container_tab `@todo` - [ ] design location_container_tab - `@input` [list_v0.0.1]() from # - [ ] add the location title - [ ] add the list with all the location - `@output` [location_container_tab_v0.0.1]() from [comment]() --- ### performance_info_card_1 `@todo` - [ ] design performance_info_card_1 - `@input` [icon_v0.0.1]() from # - [ ] add card label placeholder - [ ] add label image/icon placeholder - [ ] add card info placeholder - `@output` [performance_info_card_1_v0.0.1]() from [comment]() --- ### performance_info_card_2 `@todo` - [ ] design performance_info_card_2 - `@input` [icon_v0.0.1]() from # - [ ] add card label placeholder - [ ] add label image/icon placeholder - [ ] add card info placeholder(s) - [ ] make the display flex - [ ] content flows from left to right - `@output` [performance_info_card_2_v0.0.1]() from [comment]() --- ### performance_container_tab `@todo` - [ ] design performance_container_tab - `@input` [performance_info_card_1_v0.0.1]() from # - `@input` [performance_info_card_2_v0.0.1]() from # - [ ] add performance_info_card_1 for - [ ] CPU - [ ] memory - [ ] storage - [ ] add performance_info_card_2 for - [ ] bandwidth - [ ] status - `@output` [performance_container_tab_v0.0.1]() from [comment]() --- ### tab `@todo` - [ ] design tab - `@input` [button_v0.0.3]() from # - [ ] add buttons for the passed props in the tab - [ ] make the tabs togglable when clicked on the specific tab - `@output` [tab_v0.0.1]() from [comment]() --- ### activity_card_1 `@todo` - [ ] design activity_card_1 - [ ] add icon for different status - [ ] add status text placeholder - [ ] add activity info - [ ] add activity date - `@output` [activity_card_1_v0.0.1]() from [comment]() --- ### activity_list `@todo` - [ ] design activity_list - `@input` [activity_card_1_v0.0.1]() from # - `@input` [pill_tag_v0.0.1]() from # - [ ] add list title `activity` - [ ] add pill tag with total activity - [ ] add activity card 1 - `@output` [activity_list_v0.0.1]() from [comment]() --- ### summary_tabs_container `@todo` - [ ] design summary_tabs_container - `@input` [tab_v0.0.1]() from # - `@input` [toggle_btn_v0.0.1]() from # - `@input` [button_v0.0.3]() from # - [ ] add the tabs with following container - `@input` [data_container_tab_v0.0.1]() from # - `@input` [schedule_container_tab_v0.0.1]() from # - `@input` [location_container_tab_v0.0.1]() from # - `@input` [performance_container_tab_v0.0.1]() from # - pass all these inputs as separate tabs - `@output` [summary_tabs_container_v0.0.1]() from [comment]() --- ### my_plans_panel `@todo` - [ ] design my_plans_panel / page - `@input` [action menu_0.0.3]() from # - `@input` [my_plans_grid_v0.0.1]() from # - `@input` [feed-selector_v0.0.1]() from # - `@input` [summary_tabs_container_v0.0.1]() from # - `@input` [activity_list_v0.0.1]() from # - [ ] add page title - [ ] add my plans grid - [ ] add feed selector - [ ] summary tabs container - [ ] add activity list - [ ] add action menu - `@output` [my_plans_panel_v0.0.1]() from [comment]() --- ### my_plans_grid `@todo` - [ ] update my_plans_grid - `@input` [button_v0.0.3]() from # - `@input` [my_plans_grid_v0.0.1]() from # - [ ] make the grid overflow on x-axis - [ ] add `chevron-left` and `chevron-right` icon buttons to slide the grid left and right - `@output` [my_plans_grid_v0.0.2]() from [comment]() --- ### set_time_input `@todo` - [ ] design set_time_input - `@input` [text_input_v0.0.2]() from # - `@input` [checkbox_input_v0.0.1]() from # - `@input` [radio_input_v0.0.1]() from # - [ ] add set time checkbox - [ ] add set time input field - `@output` [set_time_input_v0.0.1]() from [comment]() --- ### custome_time_input `@todo` - [ ] design custome_time_input - `@input` [text_input_v0.0.2]() from # - `@input` [checkbox_input_v0.0.1]() from # - `@input` [radio_input_v0.0.1]() from # - [ ] add repeat day radio btn - [ ] add custom checkbox - [ ] add set day input field - [ ] add radio input for day, week, month, and year - `@output` [custome_time_input_v0.0.1]() from [comment]() --- ### repeat_date_input `@todo` - [ ] design repeat_date_input - `@input` [set_time_input_v0.0.1]() from # - `@input` [custome_time_input_v0.0.1]() from # - [ ] design 2 calender to select specific dates - [ ] add months and years label on top to switch quickly between big time difference - [ ] make the selected dates primary color - [ ] make the next selected date(s) secondary color - [ ] add shorten day label on the top row of dates as heading - `@output` [repeat_date_input_v0.0.1]() from [comment]() --- ### multiple_date_input `@todo` - [ ] design multiple_date_input - `@input` [set_time_input_v0.0.1]() from # - `@input` [custome_time_input_v0.0.1]() from # - [ ] design 2 calender to select specific dates - [ ] add months and years label on top to switch quickly between big time difference - [ ] make the selected dates primary color - [ ] add shorten day label on the top row of dates as heading - `@output` [multiple_date_input_v0.0.1]() from [comment]() --- ### schedule_container_tab `@todo` - [ ] update schedule_container_tab - `@input` [schedule_container_tab_v0.0.1]() from # - `@input` [toggle_btn_v0.0.1]() from # - `@input` [repeat_date_input_v0.0.1]() from # - `@input` [multiple_date_input_v0.0.1]() from # - [ ] add toggle button on the tab header - [ ] add the updated date pickers - `@output` [schedule_container_tab_v0.0.2]() from [comment]() --- ### my_plans_panel `@todo` - [ ] update my_plans_panel - `@input` [my_plans_panel_v0.0.1]() from # - [ ] add `no plan yet` as a label for plans grid - [ ] add button for `cancel` - [ ] add button for `confirm` - `@output` [my_plans_panel_v0.0.2]() from [comment]() --- ## wireframe-v6-1 --- ### toggle_status_card `@todo` - [ ] design toggle_status_card - `@input` [toggle_btn_v0.0.1]() from # - [ ] add card title - [ ] add toggle btn - [ ] add image placeholder - `@output` [toggle_status_card_v0.0.1]() from [comment]() --- ### earned_ratio_info `@todo` - [ ] design earned_ratio_info - `@input` [line_chart_v0.0.1]() from # - [ ] add `earned` title - [ ] add the ratio - [ ] add the line chart - `@output` [earned_ratio_info_v0.0.1]() from [comment]() --- ### network_info `@todo` - [ ] design network_info - `@input` [line_chart_v0.0.1]() from # - `@input` [point_tag_v0.0.1]() from # - [ ] add `Network` title - [ ] add line_chart - [ ] add point tag for `download` - [ ] add point tag for `upload` - `@output` [network_info_v0.0.1]() from [comment]() --- ### donut_chart `@todo` - [ ] design donut_chart - [ ] add a donut chart - [ ] add a percentage value of that chart - [ ] add a label below the chart - `@output` [donut_chart_v0.0.1]() from [comment]() --- ### in_use_space_info `@todo` - [ ] design in_use_space_info - `@input` [donut_chart_v0.0.1]() from # - [ ] add `Currently using` title - [ ] add donut_chart for `CPU` - [ ] add donut_chart for `Memory` - `@output` [in_use_space_info_v0.0.1]() from [comment]() --- ### stacked_chart_1 `@todo` - [ ] design stacked_chart_1 - [ ] add title placeholder - [ ] add progress/usage placeholder - [ ] add the progressbar with progress percent - `@output` [stacked_chart_1_v0.0.1]() from [comment]() --- ### summary_container_tab `@todo` - [ ] design summary_container_tab - `@input` [earned_ratio_info_v0.0.1]() from # - `@input` [network_info_v0.0.1]() from # - `@input` [in_use_space_info_v0.0.1]() from # - `@input` [stacked_chart_1_v0.0.1]() from # - [ ] add all the following inputs - [ ] earned ratio info - [ ] network info - [ ] in use space info - [ ] stacked chart 1 - `@output` [summary_container_tab_v0.0.1]() from [comment]() --- ### user’s-hosting_tabs_container `@todo` - [ ] design user’s-hosting_tabs_container - `@input` [tab_v0.0.1]() from # - `@input` [button_v0.0.3]() from # - [ ] add the tabs with following container - `@input` [summary_container_tab_v0.0.1]() from # - `@input` [schedule_container_tab_v0.0.1]() from # - `@input` [performance_container_tab_v0.0.1]() from # - pass all these inputs as separate tabs - `@output` [user’s-hosting_tabs_container_v0.0.1]() from [comment]() --- ### activity_list `@todo` - [ ] design activity_list - [ ] add the `activity` title - [ ] add the list of all the log text - `@output` [activity_list_v0.0.1]() from [comment]() --- ### jobs_panely `@todo` - [ ] design jobs_panely - `@input` [toggle_status_card_v0.0.1]() from # - `@input` [user’s-hosting_tabs_container_v0.0.1]() from # - `@input` [activity_list_v0.0.1]() from # - [ ] add the toggle status card for the follow - [ ] hosting - [ ] attesting - [ ] encoding - [ ] add text section - [ ] add title `Allow user to host htie data via your disk` - [ ] add desc - [ ] add user’s-hosting_tabs_container - [ ] add activity list - `@output` [jobs_panely_v0.0.1]() from [comment]() --- ## wireframe-v7 --- ### edit_plan_name `@todo` - [ ] design edit_plan_name - `@input` [text_input_v0.0.2]() from # - `@input` [button_v0.0.3]() from # - [ ] add text input for `edit plan name` - [ ] add icon btn for `times`/`x` - [ ] add icon btn for `checkmark` - `@output` [edit_plan_name_v0.0.1]() from [comment]() --- ### chunk_info_card `@todo` - [ ] design chunk_info_card - [ ] add card header - [ ] add sponsors - [ ] add hosters - [ ] add start date and time - [ ] add end date and time - `@output` [chunk_info_card_v0.0.1]() from [comment]() --- ### activity_card_1 `@todo` - [ ] update activity_card_1 - `@input` [activity_card_1_v0.0.1]() from # - [ ] update the status color - [ ] add the logo of the `by` user - [ ] add addres of the `by` user - [ ] add date and time - `@output` [activity_card_1_v0.0.2]() from [comment]() --- ### activity_list `@todo` - [ ] update activity_list - `@input` [activity_list_v0.0.1]() from # - `@input` [activity_card_1_v0.0.2]() from # - `@input` [button_v0.0.3]() from # - [ ] add btn for `down chevron` - `@output` [activity_list_v0.0.2]() from [comment]() --- ### feed_grids `@todo` - [ ] update feed_grids - `@input` [feed_grids_v0.0.3]() from # - `@input` [buttons_v0.0.3]() from # - `@input` [select_input_1_v0.0.1]() from # - [ ] add - [ ] add select input for date input - [ ] add btn for date - `@output` [feed_grids_v0.0.4]() from [comment]() --- ### data_container_tab_2 `@todo` - [ ] update data_container_tab_2 - `@input` [checkbox_input_v0.0.1]() from # - `@input` [button_v0.0.3]() from # - [ ] add text btn for `clear select` - [ ] add checkbox `select all` - [ ] add block ratio and total blocks - [ ] add checkbox equals to total number of blocks - [ ] add grid slider - [ ] add `spend ratio` and `Tx fee` - `@output` [data_container_tab_2_v0.0.1]() from [comment]() --- ### quantity_input `@todo` - [ ] design quantity_input - `@input` [text_input_v0.0.2]() from # - `@input` [buttons_v0.0.3]() from # - [ ] add `-` btn - [ ] add text input for quantity - [ ] add `+` btn - `@output` [quantity_input_v0.0.1]() from [comment]() --- ### new_data_container_tab `@todo` - [ ] update new_data_container_tab - `@input` [pill_tag_v0.0.1]() from # - `@input` [text_input_v0.0.2]() from # - `@input` [checkbox_input_v0.0.1]() from # - `@input` [button_v0.0.3]() from # - [ ] add publish type - [ ] add pill tag for `Hypercore` - [ ] add pill tag for `Hyperdrive` - [ ] add pill tag for `Cabal` - [ ] add swarm key - [ ] add feed address - [ ] add select blocks - [ ] add total block number - [ ] add checkboxes for the total block number - [ ] add text btn for `clear select` - [ ] add checkbox for `select all` - [ ] add checkbox for `Add new plan` - `@output` [new_data_container_tab_v0.0.1]() from [comment]() --- ### publish_tabs_container `@todo` - [ ] design publish_tabs_container - `@input` [data_container_tab_2_v0.0.1]() from # - `@input` [new_data_container_tab_v0.0.1]() from # - `@input` [location_container_v0.0.1]() from # - `@input` [schedule_container_tab_v0.0.1]() from # - `@input` [toggle_btn_v0.0.1]() from # - [ ] add a toggle btn - [ ] add following tabs - [ ] data container tab 2 - [ ] new data container tab - [ ] location container - [ ] schedule container tab - `@output` [publish_tabs_container_v0.0.1]() from [comment]() --- ### summary_tabs_container `@todo` - [ ] update summary_tabs_container - `@input` [summary_tabs_container_v0.0.1]() from # - `@input` [data_container_tab_2_v0.0.1]() from # - [ ] add data container tab 2 - `@output` [summary_tabs_container_v0.0.2]() from [comment]() --- ### my_plans_panel `@todo` - [ ] update my_plans_panel - `@input` [my_plans_panel_v0.0.2]() from # - `@input` [publish_tabs_container_v0.0.1]() from # - `@input` [summary_tabs_container_v0.0.2]() from # - [ ] add publish tabs container - [ ] add summary tabs container - `@output` [my_plans_panel_v0.0.3]() from [comment]() --- ## wireframe-v8 --- ### feed-selector (depricated) `@todo` - [ ] depricate feed-selector_v0.0.1 - `@input` [feed-selector_v0.0.1]() from # - [ ] make a successor of this component `swarm_key_v0.0.1` - `@output` #swarm_key from [comment]() --- ### swarm_key `@todo` - [ ] design swarm_key - `@input` [feed-selector_v0.0.1]() from # - [ ] remove the icon btn - [ ] make the select_input width 100% - `@output` [swarm_key_v0.0.1]() from [comment]() --- ### my_plans_grid `@todo` - [ ] update my_plans_grid - `@input` [my_plans_grid_v0.0.2]() from # - [ ] add icon btn of `+` to add plans - [ ] make the icon btn contraint to right - `@output` [my_plans_grid_v0.0.3]() from [comment]() --- ### feed_grids `@todo` - [ ] update my_plans_grid - `@input` [feed_grids_v0.0.3]() from # - [ ] move the slider to top - [ ] move the grid labels to bottom - [ ] add the grid status chunks above label - `@output` [feed_grids_v0.0.4]() from [comment]() --- ### swarm_container_tab `@todo` - [ ] design swarm_container_tab - `@input` [text_input_v0.0.2]() from # - [ ] add text input for `Swarm key` - [ ] add hyperdrives list - `@output` [swarm_container_tab_v0.0.1]() from [comment]() --- ### location_container_tab `@todo` - [ ] updaye location_container_tab - `@input` [location_container_tab_v0.0.1]() from # - `@input` [button_v0.0.3]() from # - [ ] modified the active/selected item to bordered btns - `@output` [location_container_tab_v0.0.2]() from [comment]() --- ### my_plans_panel `@todo` - [ ] updae my_plans_panel - `@input` [my_plans_panel_v0.0.3]() from # - `@input` [my_plans_grid_v0.0.3]() from # - `@input` [swarm_key_v0.0.1]() from # - `@input` [feed_grids_v0.0.4]() from # - `@input` [swarm_container_tab_v0.0.1]() from # - `@input` [location_container_tab_v0.0.2]() from # - [ ] update the panels/page with - [ ] my plans grid - [ ] swarm key - [ ] add the container tab into information tabs - [ ] add feed_grids into data_tab_container - [ ] add swarm_container_tab - [ ] add location_container_tab - `@output` [my_plans_panel_v0.0.4]() from [comment]() --- ### time_zone_input `@todo` - [ ] design time_zone_input - `@input` [icon_v0.0.1]() from # - [ ] add icons of `chevron-left` and `chevron-right` - [ ] add timezone as select input - `@output` [time_zone_input_v0.0.1]() from [comment]() --- ### timer_input `@todo` - [ ] design timer_input - [ ] make starter time and end timer in the input - `@output` [timer_input_v0.0.1]() from [comment]() --- ### set_runtime_step `@todo` - [ ] design set_runtime_step - `@input` [timer_input_v0.0.1]() from # - `@input` [time_zone_input_v0.0.1]() from # - `@input` [checkbox_input_v0.0.1]() from # - [ ] add checkbox as primary btns for - [ ] All day - [ ] Morning - [ ] Afternoon - [ ] Evening - [ ] Custom - [ ] add the timer input - [ ] add the time zone input - `@output` [set_runtime_step_v0.0.1]() from [comment]() --- ### set_dates_step `@todo` - [ ] design set_dates_step - `@input` [repeat_date_input_v0.0.1]() from # - `@input` [multiple_date_input_v0.0.1]() from # - `@input` [range_date_input_v0.0.1]() from # - [ ] add repear date input - [ ] add multiple input - [ ] add range date input - `@output` [set_dates_step_v0.0.1]() from [comment]() --- ### allowed_resources_step_v0.0.1 `@todo` - [ ] design allowed_resources_step - `@input` [slider_input_v0.0.1]() from # - [ ] add a slider input for `CPU - [ ] add a slider input for `RAM` - [ ] add a slider input for `Disk` - `@output` [allowed_resources_step_v0.0.1]() from [comment]() --- ### allowed_internet_speed_step `@todo` - [ ] design allowed_internet_speed_step - `@input` [slider_input_v0.0.1]() from # - [ ] add a slider input for `Download` - [ ] add a slider input for `Upload` - `@output` [allowed_internet_speed_step_v0.0.1]() from [comment]() --- ### progress_bar `@todo` - [ ] design progress_bar - [ ] add progress label - [ ] add progress percentage based on set values - `@output` [progress_bar_v0.0.1]() from [comment]() --- ### job_info_card `@todo` - [ ] design job_info_card - `@input` [progress_bar_v0.0.1]() from # - `@input` [icon_v0.0.1]() from # - [ ] add title placeholder - [ ] add progress bar placeholders - [ ] add icon placeholder - `@output` [job_info_card_v0.0.1]() from [comment]() --- ### step_wizard_1 `@todo` - [ ] design step_wizard_1 - `@input` [button_v0.0.3]() from # - `@input` [allowed_resources_step_v0.0.1]() from # - `@input` [allowed_internet_speed_step_v0.0.1]() from # - `@input` [set_dates_step_v0.0.1]() from # - `@input` [set_runtime_step_v0.0.1]() from # - [ ] add buttons for the steps container - [ ] active buttons represents the active steps - [ ] make the CTA to toggle steps - `@output` [step_wizard_1_v0.0.1]() from [comment]() --- ### day_selector `@todo` - [ ] design day_selector - [ ] make the day/date btns with status borders(?) - [ ] make them flex and contraint to left - `@output` [day_selector_v0.0.1]() from [comment]() --- ### month_selector `@todo` - [ ] design month_selector - `@input` [icon_v0.0.1]() from # - [ ] make a select_input for `month selector` - [ ] add icons of `chevron-left` and `chevron-right` to toggle months - `@output` [month_selector_v0.0.1]() from [comment]() --- ### pill_options_selector `@todo` - [ ] design pill_options_selector - [ ] make CTA of pill buttons - [ ] make placeholder text for the pills - `@output` [pill_options_selector_v0.0.1]() from [comment]() --- ### schedule_calendar `@todo` - [ ] design schedule_calendar - `@input` [job_info_card_v0.0.1]() from # - [ ] add time frames - [ ] make the schedule calendar slideable (overflow-x) - [ ] add job info card for - [ ] Hosting - [ ] add progrss bar for `CPU` - [ ] add progrss bar for `Memory` - [ ] add progrss bar for `Disk` - [ ] add Bandwidth info - [ ] Attesting - [ ] add progrss bar for `CPU` - [ ] add progrss bar for `Memory` - [ ] add progrss bar for `Disk` - [ ] add Bandwidth info - [ ] Encoding - [ ] add progrss bar for `CPU` - [ ] add progrss bar for `Memory` - [ ] add progrss bar for `Disk` - [ ] add Bandwidth info - `@output` [schedule_calendar_v0.0.1]() from [comment]() --- ### limit_container_tab `@todo` - [ ] design limit_container_tab - `@input` [radio_input_v0.0.1]() from # - `@input` [slider_input_v0.0.1]() from # - [ ] add radio input for - [ ] Hosting - [ ] Attesting - [ ] Encoding - [ ] add slider input for `CPU` - [ ] add slider input for `RAM` - [ ] add slider input for `Disk` - [ ] add slider input for `Download` - [ ] add slider input for `Upload` - `@output` [limit_container_tab_v0.0.1]() from [comment]() --- ### set_new_limits `@todo` - [ ] design set_new_limits - `@input` [step_wizard_1_v0.0.1]() from # - `@input` [limit_container_tab_v0.0.1]() from # - `@input` [schedule_container_tab_v0.0.1]() from # - [ ] add a tab for `Limits` - [ ] add radio input for - [ ] Hosting - [ ] Attesting - [ ] Encoding - [ ] add slider input for `CPU` - [ ] add slider input for `RAM` - [ ] add slider input for `Disk` - [ ] add slider input for `Download` - [ ] add slider input for `Upload` - [ ] add a tab for `Schedule` - [ ] add schedule_container_tab in this tab - `@output` [set_new_limits_v0.0.1]() from [comment]() --- ### avg_disk_space_container `@todo` - [ ] design avg_disk_space_container - [ ] add the title `Avg Diskspace` - [ ] add lables with staked chart - `@output` [avg_disk_space_container_v0.0.1]() from [comment]() --- ### avg_throughput_container `@todo` - [ ] design avg_throughput_container - `@input` [point_tag_v0.0.1]() from # - `@input` [line_chart_v0.0.1]() from # - [ ] add the title `Avg, throughput` - [ ] add the point tag for `download` - [ ] add the point tag for `upload` - [ ] add the line chart - `@output` [avg_throughput_container_v0.0.1]() from [comment]() --- ### availability_container `@todo` - [ ] design availability_container - [ ] add a title `availablity` - [ ] design a hard donut chart - [ ] add total percentage - `@output` [availability_container_v0.0.1]() from [comment]() --- ### latency `@todo` - [ ] design latency - `@input` [line_chart_v0.0.1]() from # - [ ] add title `Latency` - [ ] add a line_chart for `latency` - `@output` []() from [comment]() --- ### performance_container_tab `@todo` - [ ] design performance_container_tab - `@input` [avg_disk_space_container_v0.0.1]() from # - `@input` [avg_throughput_container_v0.0.1]() from # - `@input` [availability_container_v0.0.1]() from # - `@input` [latency_container_v0.0.1]() from # - [ ] add availability_container - [ ] add latency_container - [ ] add avg_throughput_container - [ ] add avg_disk_space_container - `@output` [performance_container_tab_v0.0.1]() from [comment]() --- ### calender_container_tab `@todo` - [ ] design calender_container_tab - `@input` [day_selector_v0.0.1]() from # - `@input` [month_selector_v0.0.1]() from # - `@input` [pill_options_selector_v0.0.1]() from # - `@input` [schedule_calendar_v0.0.1]() from # - [ ] add month selector - [ ] add pill options selecter - [ ] add day selector - [ ] add schedule calendar - `@output` [calender_container_tab_v0.0.1]() from [comment]() --- ### user’s-hosting_tabs_container `@todo` - [ ] update user’s-hosting_tabs_container - `@input` [user’s-hosting_tabs_container_v0.0.1]() from # - `@input` [calender_container_tab_v0.0.1]() from # - `@input` [performance_container_tab_v0.0.1]() from # - [ ] add tabs with - [ ] calander container tab - [ ] performance container tab - `@output` [user’s-hosting_tabs_container_v0.0.2]() from [comment]() --- ### jobs_panel `@todo` - [ ] update jobs_panel - `@input` [jobs_panel_v0.0.1]() from # - `@input` [button_v0.0.3]() from # - `@input` [user’s-hosting_tabs_container_v0.0.2]() from # - `@input` [set_new_limits_v0.0.1]() from # - [ ] add user hosting tabs container - [ ] add icon btn of `plus` to add more jobs - [ ] on click switch to set_new_limits - `@output` [jobs_panel_v0.0.2]() from [comment]() --- ### edit_limits `@todo` - [ ] design edit_limits - `@input` [set_new_limits_v0.0.1]() from # - `@input` [toggle_btn_v0.0.1]() from # - [ ] allow editing limits - [ ] remove the previous radio btns - [ ] allow editing schedule - [ ] adding timer input - [ ] adding timezone selector input - `@output` [edit_limits_v0.0.1]() from [comment]() --- ### jobs_panel `@todo` - [ ] update jobs_panel - `@input` [jobs_panel_v0.0.2]() from # - `@input` [toggle_btn_v0.0.1]() from # - `@input` [user’s-hosting_tabs_container_v0.0.2]() from # - [ ] add toggle btns for - [ ] Hosting - [ ] Attesting - [ ] Encoding - [ ] add user’s-hosting_tabs_container_v0.0.2 - [ ] make the calender tab display flex - `@output` [jobs_panel_v0.0.3]() from [comment]() --- ## wireframe-v9 --- ### day_selector `@todo` - [ ] update day_selector_v0.0.1 - `@input` [day_selector_v0.0.1]() from # - [ ] move the status as the bullet points below the dates - [ ] add Day value below the dates - `@output` [day_selector_v0.0.2]() from [comment]() --- ### jobs_panel `@todo` - [ ] update jobs_panel_v0.0.3 - `@input` [jobs_panel_v0.0.3]() from # - `@input` [day_selector_v0.0.2]() from # - [ ] add the updated days in the jobs panel - `@output` [jobs_panel_v0.0.4]() from [comment]() --- ## wireframe-v10 --- ### plan_info_card `@todo` - [ ] design plan_info_card - `@input` [select_input_1_v0.0.1]() from # - [ ] add a list of - [ ] start date - [ ] end date - [ ] hosting by - [ ] chunks - [ ] location with select option - [ ] Edtimated value - `@output` [plan_info_card_v0.0.1]() from [comment]() --- ### schedule_step `@todo` - [ ] design schedule_step - `@input` [schedule_container_tab_v0.0.1]() from # - `@input` [button_v0.0.3]() from # - [ ] add the schedule container tab content in the schedule step - `@output` [schedule_step_v0.0.1]() from [comment]() --- ### location_step `@todo` - [ ] design location_step - `@input` [location_container_tab_v0.0.2]() from # - `@input` [button_v0.0.3]() from # - [ ] add the same location_container_tab_v0.0.2 in the location step - `@output` [location_step_v0.0.1]() from [comment]() --- ### review_step `@todo` - [ ] design review_step - `@input` [performance_info_card_1_v0.0.1]() from # - `@input` [performance_info_card_2_v0.0.1]() from # - [ ] add `performance_info_card_1` for `duration - [ ] add start date and time - [ ] add end date and time - [ ] Add `performance_info_card_1` for `average chunk price` - [ ] Add `performance_info_card_1` for `Chunks` - [ ] Add `performance_info_card_2` for `hosting by` - [ ] Add `performance_info_card_2` for `location` - [ ] Add `performance_info_card_1` for `totale price` - `@output` [review_step_v0.0.1]() from [comment]() --- ### Estimated_info_container `@todo` - [ ] design Estimated_info_container - `@input` [performance_info_card_1_v0.0.1]() from # - `@input` [select_input_1_v0.0.1]() from # - [ ] Add `performance_info_card_1` for `Check price for hosting duration` - [ ] Add `performance_info_card_1` for `Duration` - [ ] Add `performance_info_card_1` for `average chunk price` - [ ] Add `performance_info_card_1` for `Total price` - [ ] Add select_inputs for - [ ] Month - [ ] Date - [ ] Years - [ ] Time - `@output` [Estimated_info_container_v0.0.1]() from [comment]() --- ### chunk_grid `@todo` - [ ] design chunk_grid - [ ] add a grid of 4 rows and columns overflow-x with - [ ] option to select input - [ ] border chunk for default - [ ] primary_colored chunk for active - `@output` [chunk_grid_v0.0.1]() from [comment]() --- ### create_plan_grid `@todo` - [ ] design create_plan_grid - `@input` [button_v0.0.3]() from # - [ ] add an icon_btn with `+` to add plan - [ ] create placeholder grid to put `plans` - `@output` [create_plan_grid_v0.0.1]() from [comment]() --- ### step_wizard_2 `@todo` - [ ] design step_wizard_2 - `@input` [schedule_step_v0.0.1]() from # - `@input` [location_step_v0.0.1]() from # - `@input` [review_step_v0.0.1]() from # - `@input` [button_v0.0.3]() from # - [ ] add btns to toggle between the steps container - [ ] active buttons represents the active steps - [ ] Schedule - [ ] Location - [ ] Review - [ ] make the CTA to toggle steps - [ ] add the schedule step - [ ] add the location step - [ ] add the review step - [ ] add a default btn for `Previous` - [ ] add a primary btn for `Next` - `@output` [step_wizard_2_v0.0.1]() from [comment]() --- ### activity_container_tab `@todo` - [ ] design activity_container_tab - `@input` [activity_list_v0.0.2]() from # - [ ] add the activity list container tab - [ ] add net activity number in the tab header - `@output` [activity_container_tab_v0.0.1]() from [comment]() --- ### create_new_plan_v0.0.1 `@todo` - [ ] design create_new_plan - `@input` [create_plan_grid_v0.0.1]() from # - `@input` [chunk_grid_v0.0.1]() from # - `@input` [step_wizard_2_v0.0.1]() from # - `@input` [Estimated_info_container_v0.0.1]() from # - `@input` [swarm_container_tab_v0.0.1]() from # - [ ] add the create plan grid - [ ] add the swarm container tab - [ ] add the chunks grid - [ ] add another create plan grid - [ ] add Estimated_info_container - `@output` [create_new_plan_v0.0.1]() from [comment]() --- ### my_plans_panel `@todo` - [ ] update my_plans_panel_v0.0.4 - `@input` [my_plans_panel_v0.0.4]() from # - `@input` [activity_container_tab_v0.0.1]() from # - [ ] add the activity container tab - `@output` [my_plans_panel_v0.0.5]() from [comment]() --- ## wireframe-v12 --- ### range_slider_input `@todo` - [ ] design range_slider_input - `@input` []() from # - [ ] code a input range slider - [ ] add the tool-tip to show the value - `@output` [range_slider_input_v0.0.1]() from [comment]() --- ### chunk_grid `@todo` - [ ] update chunk_grid_v0.0.1 - `@input` [chunk_grid_v0.0.1]() from # - `@input` [range_slider_input_v0.0.1]() from # - [ ] add the range slider input above the grid - `@output` [chunk_grid_v0.0.2]() from [comment]() --- ### data_step `@todo` - [ ] design data_step - `@input` [swarm_container_tab_v0.0.1]() from # - `@input` [swarm_key_v0.0.1]() from # - [ ] add the swarm key - [ ] add the swarm contianer tab - `@output` [data_step_v0.0.1]() from [comment]() --- ### feed_step `@todo` - [ ] design feed_step - `@input` [chunk_grid_v0.0.2]() from # - [ ] add the select chunks list - [ ] add the updated chunk grids - [ ] Add the feed select chunks - [ ] add the updated chunk grids - `@output` [feed_step_v0.0.1]() from [comment]() --- ### duration_step `@todo` - [ ] design duration_step - `@input` [schedule_container_tab_v0.0.2]() from # - [ ] add the scheduel container tab in the duration step - [ ] but only allow the range_date selection from shcedule_contianer_tab - `@output` [duration_step_v0.0.1]() from [comment]() --- ### step_wizard_2 `@todo` - [ ] Update step_wizard_2_v0.0.1 - `@input` [step_wizard_2_v0.0.1]() from # - `@input` [data_step_v0.0.1]() from # - `@input` [feed_step_v0.0.1]() from # - `@input` [duration_step_v0.0.1]() from # - [ ] Make the updated/completed step btn `accent-color` - [ ] add `data_step_v0.0.1` step container - [ ] add `feed_step_v0.0.1` step container - [ ] add `duration_step_v0.0.1` step container - `@output` [step_wizard_2_v0.0.2]() from [comment]() --- ## wireframe v0 --- ### top_navbar `@todo` - [ ] create top navbar - `@input`[button_v0.0.1]() from # - `@input`[logo_v0.0.1]() from # - [ ] add the app logo - [ ] add a title `page title` - [ ] add a icon button `bell` and `user` - `@output` [top_navbar_v0.0.1]() from [comment]() --- ### my_plans_grid `@todo` - [ ] update my_plans_grid_v0.0.3 - `@input` [my_plans_grid_v0.0.3]() from # - [ ] change the `+` icon btn to blue gradient color - [ ] add a dot for active status - [ ] greend color for `active` - [ ] gray color for `inactive` - `@output` [my_plans_grid_v0.0.4]() from [comment]() --- ### my_plans_panel `@todo` - [ ] Update my_plans_panel_v0.0.5 - `@input` [my_plans_panel_v0.0.5]() from # - `@input` [my_plans_grid_v0.0.4]() from # - `@input` [step_wizard_2_v0.0.2]() from # - [ ] add the plans grid - [ ] add the step wizard - `@output` [my_plans_panel_v0.0.6]() from [comment]() --- ## wireframe-v12-1 --- ### chunks_step `@todo` - [ ] depricate feed_step_v0.0.1 - `@input` [feed_step_v0.0.1]() from # - [ ] make a successor of this component `chunks_step_v0.0.1` - [ ] move the chunk grids from `feed_step` to a separate `chunks_step` step - `@output` [chunks_step_v0.0.1]() from [comment]() --- ### feed_step_2 `@todo` - [ ] design feed_step_2 - `@input` [swarm_key_v0.0.1 ]() from # - `@input` [swarm_container_tab_v0.0.1]() from # - [ ] addthe swarm key - [ ] add the swarm container tab - `@output` [feed_step_2_v0.0.1]() from [comment]() --- ### step_wizard_3 `@todo` - [ ] design step_wizard_3 - `@input` [feed_step_2_v0.0.1]() from # - `@input` [chunks_step_v0.0.1]() from # - `@input` [duration_step_v0.0.1]() from # - `@input` [button_v0.0.3]() from # - [ ] Make the updated/completed step btn `accent-color` - [ ] add `chunks_step_v0.0.1` step container - [ ] add `feed_step_v0.0.1` step container - [ ] add `duration_step_v0.0.1` step container - [ ] add text_btn for `Cancel` - [ ] add primary btn for `Next` - [ ] add secondary_btn for `Previous` - `@output` [step_wizard_3_v0.0.1]() from [comment]() --- ### step_wizard_2 `@todo` - [ ] Update step_wizard_2_v0.0.2 - `@input` [step_wizard_2_v0.0.2]() from # - [ ] Remove the `feeds_step` - [ ] Remove the `duration_step` - `@output` [step_wizard_2_v0.0.3]() from [comment]() --- ### my_plans_panel `@todo` - [ ] Updae my_plans_panel_v0.0.6 - `@input` [my_plans_panel_v0.0.6]() from # - `@input` [step_wizard_2_v0.0.3]() from # - `@input` [step_wizard_3_v0.0.1]() from # - [ ] Add the updated `step_wizard_2` - [ ] Add the newly designed `step_wizard_3` - `@output` [my_plans_panel_v0.0.7]() from [comment]() --- ## wireframe-v13 --- ### range_slider_input `@todo` - [ ] update range_slider_input_v0.0.1 - `@input` [range_slider_input_v0.0.1]() from # - [ ] Add a range slider with - [ ] update handles with accent_color - [ ] pin tool-tips with accent_color - `@output` [range_slider_input_v0.0.2]() from [comment]() --- ### chunk_grid `@todo` - [ ] update chunk_grid_v0.0.2 - `@input` [chunk_grid_v0.0.2]() from # - `@input` [range_slider_input_v0.0.2]() from # - [ ] add the range_slider input above the chunk grid - `@output` [chunk_grid_v0.0.3]() from [comment]() --- ### chunks_step `@todo` - [ ] update chunks_step - `@input` [chunks_step_v0.0.1]() from # - `@input` [chunk_grid_v0.0.3]() from # - [ ] Add the updated chunk grid - `@output` [chunks_step_v0.0.2]() from [comment]() --- ### feed_step_2 `@todo` - [ ] update feed_step_2_v0.0.1 - `@input` [feed_step_2_v0.0.1]() from # - [ ] add the hosting data information - [ ] start and end date - `@output` [feed_step_2_v0.0.2]() from [comment]() --- ### duration_step `@todo` - [ ] update duration_step_v0.0.1 - `@input` [duration_step_v0.0.1]() from # - [ ] add the hosting data information - [ ] start and end date - [ ] Add accent colors to selected input value - `@output` [duration_step_v0.0.2]() from [comment]() --- ### complete_step `@todo` - [ ] Design complete_step_v0.0.1 - `@input` [feed_step_2_v0.0.2]() from # - `@input` [chunks_step_v0.0.2]() from # - `@input` [duration_step_v0.0.2]() from # - `@input` [Estimated_info_container_v0.0.1]() from # - [ ] Add feed_step - [ ] Add chunks_step - [ ] Add duration_step - [ ] Add estimated_info_container - `@output` [complete_step_v0.0.1]() from [comment]() --- ### step_wizard_3 `@todo` - [ ] update step_wizard_3_v0.0.1 - `@input` [step_wizard_3_v0.0.1]() from # - `@input` [feed_step_2_v0.0.2]() from # - `@input` [chunks_step_v0.0.2]() from # - `@input` [duration_step_v0.0.2]() from # - `@input` [complete_step_v0.0.1]() from # - [ ] Add feed_step - [ ] Add chunks_step - [ ] Add duration_step - [ ] Add complete_step - `@output` [step_wizard_3_v0.0.2]() from [comment]() --- ### schedule_calendar `@todo` - [ ] update schedule_calendar_v0.0.2 - `@input` [schedule_calendar_v0.0.2]() from # - [ ] Make the months and year select_dropdown - [ ] add row of - [ ] day and date - [ ] make info highlighted with accent color - [ ] make the info display flex - `@output` [schedule_calendar_v0.0.3]() from [comment]() --- ### start_host_chunk `@todo` - [ ] design start_host_chunk_v0.0.1 - `@input` [button_v0.0.3]() from # - [ ] add an leading icon btn with `+` - [ ] following with `Start to host chunks` text - `@output` [start_host_chunk_v0.0.1]() from [comment]() --- ### my_plans_panel `@todo` - [ ] update my_plans_panel_v0.0.7 - `@input` [my_plans_panel_v0.0.7]() from # - `@input` [start_host_chunk_v0.0.1]() from # - `@input` [schedule_calendar_v0.0.3]() from # - `@input` [step_wizard_3_v0.0.2]() from # - [ ] Add the updated schedule calender - [ ] Add the start host chunk - [ ] add the step wizard - `@output` [my_plans_panel_v0.0.8]() from [comment]() --- ### c `@todo` - [ ] a - `@input` []() from # - [ ] - `@output` []() from [comment]() ---

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.