appwrite/app/views/console/home/index.phtml

<?php
$graph = $this->getParam('graph', false);
?>

<div class="cover margin-bottom-small">
    <div class="zone xl margin-bottom-xl margin-top-small">
        <h1 class="margin-bottom-small"
            data-service="projects.get"
            data-event="load,project.update,projects.createPlatform,projects.updatePlatform,projects.deletePlatform"
            data-name="console-project"
            data-param-project-id="{{router.params.project}}"
            data-scope="console">
            <span class="title" data-ls-bind="{{console-project.name}}">&nbsp;</span>&nbsp;&nbsp;
        </h1>

        <ul class="margin-top-negative-small margin-bottom clear">
            <li class="pull-start margin-end margin-bottom-small"><a data-ls-attrs="href=/console/settings?project={{router.params.project}}"><i class="icon-cog"></i> &nbsp;Settings</a> &nbsp;&nbsp;</li>
            <li class="pull-start margin-end margin-bottom-small"><a data-ls-attrs="href=/console/keys?project={{router.params.project}}"><i class="icon-key-inv"></i> &nbsp;API Keys</a> &nbsp;&nbsp;</li>
            <li class="pull-start margin-end margin-bottom-small"><a data-ls-attrs="href=/console/webhooks?project={{router.params.project}}"><i class="icon-link"></i> &nbsp;Webhooks</a> &nbsp;&nbsp;</li>
            <li class="pull-start margin-end margin-bottom-small"><a data-ls-attrs="href=/console/tasks?project={{router.params.project}}"><i class="icon-clock"></i> &nbsp;Tasks</a> &nbsp;&nbsp;</li>
        </ul>
    </div>
</div>

<div class="zone xl margin-top-negative-xxl">
    <div class="box margin-bottom dashboard">
        <div
            data-service="projects.getUsage"
            data-event="load"
            data-name="usage"
            data-param-project-id="{{router.params.project}}"
            data-param-range="monthly">

            <?php if (!$graph) : ?>
                <div class="row responsive">
                    <div class="col span-9">
                        <div class="chart pull-end">
                            <div class="content" data-ls-ui-chart></div>
                        </div>

                        <div class="chart-metric">
                            <div class="value margin-bottom-small"><span class="sum" data-ls-bind="{{usage.requests.total|statsTotal}}">N/A</span></div>
                            <div class="metric margin-bottom-small">Requests <span class="tooltip" data-tooltip="Total number of API requests this month"><i class="icon-info-circled"></i></span></div>
                            <div class="range">Current Month</div>
                        </div>
                    </div>
                    <div class="col span-3">
                        <div class="value margin-bottom-small"><span class="sum" data-ls-bind="{{usage.network.total|humanFileSize}}" data-default="0">0</span></div>
                        <div class="metric margin-bottom-small">Bandwidth</div>
                        <div class="range">Current Month</div>
                        <!-- <div class="margin-top dev-feature">
                            <a href="">Full Usage Report <i class="icon-right-open"></i></a>
                        </div> -->
                    </div>
                </div>

                <hr />
            <?php endif; ?>

            <div>
                <div class="row responsive">
                    <div class="col span-3">
                        <div class="value"><span class="sum" data-ls-bind="{{usage.documents.total|statsTotal}}" data-default="0">0</span></div>
                        <div class="margin-top-small"><b class="text-size-small unit">Documents</b></div>
                    </div>
                    <div class="col span-3">
                        <div class="value"><span class="sum" data-ls-bind="{{usage.storage.total|humanFileSize}}" data-default="0">0</span></div>
                        <div class="margin-top-small"><b class="text-size-small unit">Storage</b></div>
                    </div>
                    <div class="col span-3">
                        <div class="value"><span class="sum" data-ls-bind="{{usage.users.total}}" data-default="0">0</span></div>
                        <div class="margin-top-small"><b class="text-size-small unit">Users</b></div>
                    </div>
                    <div class="col span-3">
                        <div class="value"><span class="sum" data-ls-bind="{{usage.tasks.total}}" data-default="0">0</span></div>
                        <div class="margin-top-small"><b class="text-size-small unit">Tasks</b></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="zone xl margin-top-xl clear" data-ls-if="({{console-project}})">
    <h2 class="margin-bottom">Platforms</h2>

    <div class="box margin-bottom" data-ls-if="0 < {{console-project.platforms.length}} && undefined !== {{console-project.platforms}}">
        <ul data-ls-loop="console-project.platforms" data-ls-as="platform" class="list">
            <li class="clear">

                <div data-ui-modal class="modal box close" data-button-text="Update" data-button-class="pull-end">
                    <button type="button" class="close pull-end" data-ui-modal-close=""><i class="icon-cancel"></i></button>

                    <h1>Update Platform</h1>

                    <div data-ls-template="template-{{platform.type}}-update" data-type="script"></div>
                </div>

                <form class="pull-end margin-end"
                    data-analytics-event="submit"
                    data-analytics-category="console"
                    data-analytics-label="Delete Project Platform"
                    data-service="projects.deletePlatform"
                    data-scope="console"
                    data-event="submit"
                    data-confirm="Are you sure you want to delete this platform?"
                    data-success="alert,trigger"
                    data-success-param-alert-text="Deleted platform successfully"
                    data-success-param-trigger-events="projects.deletePlatform"
                    data-failure="alert"
                    data-failure-param-alert-text="Failed to delete platform"
                    data-failure-param-alert-classname="error">
                    <input type="hidden" name="projectId" data-ls-bind="{{router.params.project}}" />
                    <input type="hidden" name="platformId" data-ls-bind="{{platform.$id}}" />

                    <button class="reverse danger">Delete</button>
                </form>

                <div class="margin-bottom-tiny">
                    <img src="" data-ls-attrs="src=/images/clients/{{platform.type}}.png?v=<?php echo APP_CACHE_BUSTER; ?>" class="avatar pull-start margin-end" loading="lazy" width="60" height="60" />
                    <span data-ls-bind="{{platform.name}}"></span>
                </div>

                <p class="margin-bottom-no"><small data-ls-bind="{{platform.hostname}}"></small></p>
            </li>
        </ul>
    </div>

    <div data-ls-if="(!{{console-project.platforms.length}})" class="box dashboard margin-bottom">
        <div class="margin-bottom-small margin-top-small margin-end margin-start">
            <h3 class="margin-bottom-small text-bold">No Platforms Added to Your Project</h3>

            <p class="margin-bottom-no">Add your first platform and build your new application.</p>
        </div>
    </div>

    <div class="pull-end desktops-only tablets-only">
        <a data-ls-attrs="href=/console/keys?project={{router.params.project}}">Manage Your Server API Keys</a>
    </div>

    <div class="drop-list pull-start" data-ls-ui-open="" data-button-text="Add Platform" data-button-class="button" data-blur="1" tabindex="1">
        <ul>
            <li>
                <button class="link web-new"><img src="/images/clients/web.png?v=<?php echo APP_CACHE_BUSTER; ?>" alt="Web Platform Logo" class="avatar xs margin-end" /> New Web App</button>
            </li>
            <li class="disabled">
                <button class="link ios-new"><img src="/images/clients/ios.png?v=<?php echo APP_CACHE_BUSTER; ?>" alt="iOS Platform Logo" class="avatar xs margin-end" /> New iOS App</button>
            </li>
            <li class="disabled">
                <button class="link android-new"><img src="/images/clients/android.png?v=<?php echo APP_CACHE_BUSTER; ?>" alt="Android Platform Logo" class="avatar xs margin-end" /> New Android App</button>
            </li>
            <li class="disabled">
                <button class="link unity-new"><img src="/images/clients/unity.png?v=<?php echo APP_CACHE_BUSTER; ?>" alt="Unity Platform Logo" class="avatar xs margin-end" /> New Unity Game</button>
            </li>
        </ul>
    </div>
</div>

<div data-ui-modal class="modal box close" data-button-alias=".web-new">
    <button type="button" class="close pull-end" data-ui-modal-close=""><i class="icon-cancel"></i></button>

    <h1>New Web App</h1>

    <form
        data-analytics-event="submit"
        data-analytics-category="console"
        data-analytics-label="Create Project Platform (Web)"
        data-service="projects.createPlatform"
        data-scope="console"
        data-event="submit"
        data-success="alert,trigger,reset"
        data-success-param-alert-text="Created new platform successfully"
        data-success-param-trigger-events="projects.createPlatform"
        data-failure="alert"
        data-failure-param-alert-text="Failed to create platform"
        data-failure-param-alert-classname="error">

        <input type="hidden" name="projectId" data-ls-bind="{{router.params.project}}" />
        <input type="hidden" name="type" data-ls-bind="web" />

        <label for="name">Name <span class="tooltip large" data-tooltip="Choose any name that will help you distinguish between your different apps."><i class="icon-question"></i></span></label>
        <input type="text" class="full-width" id="name" name="name" required autocomplete="off" placeholder="My Web App" />

        <label for="hostname">Hostname <span class="tooltip large" data-tooltip="The hostname that your website will use to interact with the <?php echo APP_NAME; ?> APIs in production or development environments."><i class="icon-question"></i></span></label>
        <input name="hostname" type="text" class="margin-bottom" autocomplete="off" placeholder="localhost" required>
        
        <div class="info margin-top margin-bottom">
            <div class="text-bold margin-bottom-small">Next Steps</div>

            <p>After adding your new website, install our JS SDK to integrate with your code and read our <a data-ls-attrs="href={{env.HOME}}/docs/getting-started-for-web" target="_blank">getting started</a> tutorial.</p>

            <div class="margin-bottom-no ide" data-lang="bash" data-lang-label="bash">
                <pre class="line-numbers"><code class="prism language-bash" data-prism>npm install appwrite</code></pre>
            </div>
        </div>

        <button type="submit">Register</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
    </form>
</div>

<script type="text/html" id="template-web-update">
    <form
        data-analytics-event="submit"
        data-analytics-category="console"
        data-analytics-label="Update Project Platform"
        data-service="projects.updatePlatform"
        data-scope="console"
        data-event="submit"
        data-success="alert,trigger"
        data-success-param-alert-text="Updated platform successfully"
        data-success-param-trigger-events="projects.updatePlatform"
        data-failure="alert"
        data-failure-param-alert-text="Failed to update platform"
        data-failure-param-alert-classname="error">

        <input type="hidden" name="projectId" data-ls-bind="{{router.params.project}}" />
        <input type="hidden" name="platformId" data-ls-bind="{{platform.$id}}" />

        <label data-ls-attrs="for=name-{{platform.$id}}">Name <span class="tooltip large" data-tooltip="Choose any name that will help you distinguish between your different apps."><i class="icon-question"></i></span></label>
        <input type="text" class="full-width" data-ls-attrs="id=name-{{platform.$id}}" name="name" required autocomplete="off" data-ls-bind="{{platform.name}}" placeholder="My Web App" />

        <label for="hostname">Hostname <span class="tooltip large" data-tooltip="The hostname that your website will use to interact with the <?php echo APP_NAME; ?> APIs in production or development environments."><i class="icon-question"></i></span></label>
        <input name="hostname" type="text" class="margin-bottom" autocomplete="off" placeholder="localhost" data-ls-bind="{{platform.hostname}}" required />
        
        <hr />

        <button type="submit">Update</button> &nbsp; <button data-ls-ui-trigger="modal-close" type="button" class="reverse">Cancel</button>
    </form>
</script>