Synatec Client & Admin Portal 2.

0 &
Lander 2.0
Redevelopment project of Synatec’s Client portal, admin interface and landing pages. The
project is to create a modern and unified system that integrates multiple server management
APIs (Tenantos, Virtfusion and Pterodactyl) and supports multi-tenancy.

Project Summary

Core Deliverables
● 3 Landing Pages
○ baremetal.ae
○ rdp.is
○ gameserve.co
● Back end admin portal
○ Full management suite with multi tenancy support
● Customer portal
○ Customer’s order/invoice management and product/service controls
● Multi-Tenancy Support
○ Independant configuration
○ Seamless integration

Key integrations
● 3 Server Management APIs
○ Tenantos
○ Virtfusion
○ Pterodactyl
● Payment Processors
○ Stripe
○ Paypal
○ Crypto
● Discord notifications via webhook
● Looking Glass functionality
Major Features
● Complete billing and invoice system
● Automated server provisioning and management
● Support ticket system with knowledge base
● Multi-level security with 2FA
● Comprehensive reporting and analytics

Pricing
● Total: $10,000
● Upfront: $3000
● MVP: $3000
● Final Delivery: $4000
● Currency: USD

Schedule
● Estimate delivery date: 2-3 Month
API Integrations
● Tenantos (Dedicated servers)
○ Landing page required before client can be granted access to this API
○ Pulls a list of servers and we filter out which don’t currently have an owner so and
we display these as the products.
● Virtfusion (Virtual servers)
○ Existing connection has been made and this will be groundwork off the seamless
API UI.
● Pterodactyl (Game servers)
○ Client to get access.
● Overall concept
● All API managed by same UI
● Seamless integration across all API
● Multi tenancy ability to disable certain API for certain tenants

Looking Glass
● Core concept
○ Current Page address: https://lg.synatec.co/
○ Takes functionality from Hybula Looking Glass
■ Location, Facility, Looking Glass IPv4 and IPv6, Your IP
■ Target IP or host, execution method (ping, ping6, mtr, mtr6, traceroute,
traceroute6)
○ Separate page within front end of the website so users can check/test the
functionality before purchasing.

Public Facing - Landing Pages

● To follow designs provided/made
● Domains to be implemented
○ baremetal.ae (design pending)
○ rdp.is (design pending)
○ gameserve.co (this page has a design already)
 ● News page on landing pages will pull from the “announcements” in the back end, this will
support multi-tenancy selection.

Admin Back End Portal

Main Pages
● Dashboard Page
○ Doesn’t need expanding on, remains the same as current version
○ Dashboard Item 1 (overview)
■ 3 stats at the top of card
■ Orders today
■ Revenue total today
■ Tickets today
■ Graph Content
■ Line Graph
■ X axis: Last 29 days
■ Display: Orders, Users, Revenue (on same graph)
○ Dashboard Item 2 (tickets)
■ 3 stats at top of card
■ All tickets count
■ Open tickets count
■ Closed tickets count
■ List of last 4 tickets.
■ Ticket number (ID)
■ Client: Customer Name
■ Priority
■ Status
■ Date raised in past tense (3 days ago)
○ Dashboard Item 3 (New users)
■ Bar graph of new users
■ Group data monthly
■ X axis: Rolling 12 months
○ Dashboard Item 4 (New Orders)
■ Bar graph of new orders
■ Group data monthly
■ X axis: Rolling 12 months
● Clients page
○ All Clients
■ ID, User, Email, Created At
■ List view of all clients ordered by ID (default)
■ Allow sorting and filtering.
■ Clear filter button.
 ■ Create client button
○ Create client
■ Show placeholder examples of all fields.
■ First Name, Last Name, Email, Phone, Company Name, Password,
Address, City, State, Country, Zip
■ These fields will be configured per tenant, as they are specific to each.
■ Save button
● Orders Page
○ Order List
■ Columns: Selection box, ID, User, Total Order Value, Created At, (Add
Status for paid or not)
■ Needs ability to see if the user has paid
○ Order View
■ Client, Total, Created At Date, Updated At Date
■ Delete order button (unrecoverable)
■ Products list
■ ID, Name, Cost, Status (paid or not), Active till (expiration date),
Link, Actions (edit,delete)
■ Invoices List
■ ID, Status (paid or not), Created At Date, Paid at Date, Actions
(view)
● Invoices Page
○ List view
■ ID, User, Total, Created At, Paid At, Status (new value to show if paid or
not)
■ Ability to filter and sort: paid/not paid, and other columns.
○ Invoice view
■ Client, Payment method, Reference, Total, Status, Created At Date,
Updated At Date, Paid At Date
■ List of products
■ ID, Name, Price, Discount, Assigned Order
● Products
○ All Products
■ ID, Name, Created At
■ Create product button
○ Create Product
■ Name, Description, Price, Image, Category
■ Save button
■ Link to create category page.
○ All Categories
■ ID, Name, Slug (e.g. custom-dedicated-servers), Parent, Created At
■ Create button
○ Create category
■ Name, Description, Slug, Image, Parent
 ● Support Page
○ All support
■ Display all tickets with filters/sorting for status, priority, and date
■ Option to sort by any column
■ Export tickets as CSV for offline analysis
○ Create Ticket
■ User-friendly form for creating new tickets
■ Attach files and screenshots
■ Select service-specific categories
■ Ticket priority and impact assessment
■ Ticket base needs to search knowledge base from the ticket title to try
solve issues preemptively.
○ Single Ticket View
■ Ticket Interface
■ Attach files and images
■ View ticket history and updates
■ Do not make the ticket-view like a messenger style chat.
■ Ticket area design should take inspiration from WHMCS support
system design. Basic reply at the top. Basic column of messages
and who they are targeted to above.
■ Newer messages on the ticket go at the top.
■ Ticket Management Modal
■ Update status: Open, Closed
■ Assign priority levels
■ Assign the admin-user to handle the ticket.
■ Allocation of product related to ticket.
■ Read only view of subject and customer allocated
● Email Logs
○ Logs all emails sent out by automation, including credential resets.

Secondary Pages
● Settings Page (cannot access page due to email verification issue)
● Extensions Page
● Coupons Page
○ List
■ ID, Code, Type, Value, Uses, Created At
○ Create Coupon
■ Code (Coupon Code), Type (Percent/fixed), Status, Max uses (not
required), Time (lifetime /one time) , value euro/percent, assigned
products (not required), start date, end date
● Announcements Page
 ○ List view
■ Id, Title, Published, Created At
○ Create announcement
■ Title, description, published (bool)
■ Selection for which tenants to show to. (Multi-tenancy support)
○ Landing page news
■ The same announcements created in the back end will make up the
“News” page on the landing pages.
● Roles Page
○ List view
■ Id, Name, Created At
○ Create role
■ Name, Permissions (list of bools)
● Taxes Page
○ List
■ Enable Tax bool
■ Tax type
■ Inclusive
■ Exclusive
■ Tax Rates
■ Save
■ Create Tax Rate
■ Name
■ Rate
■ Country
● Logs Page
○ Error Logs
■ List of page error logs
■ Ability to export to support.
○ Debug Logs
■ Ability to export to support.
■ Ability to enable debug logs
● Configurable Options
○ List
■ Id, Name, Description, Created At
○ Create configurable option group
■ Name, Description, Products
● Multi-Tenancy Configuration
○ Domain Management Page
■ List of all domains per tenant
■ Options to add or remove domains
■ Domain-specific settings
○ Configuration Management Page
■ Separate configuration settings per tenant
 ■
Ability to configure what fields are required for the customers of
each website, for example some need addresses and some don’t.
■ Payment provider (shared)
■ Products (shared)
■ Discord integration for alerts (independent for each tenant)
● Knowledge base
○ List view
■ See current knowledge base articles
■ Title, Content
■ Click to see full article
■ Button to create new knowledge base entry
○ Create new
■ Title, Content, Images

Other Details
● Discord Integration
○ Notifications for events coming into discord through webhook.
○ Each multi-tenant (domain) should have its own integration and channel to be
individually monitored.
● Payment methods
○ Should be configurable for each tenant. (Enable/Disable)
○ All tenants share the same api keys. (E.g. all stripe payments go to same stripe)
○ Stripe, Paypal, cryptonomus.com (CryptoCurrency)
○ Automated Server Suspension:
■ Product/service expiration date automation (10 min check)
■ Expiration date suspends the server (if invoice unpaid)
■ Reactivation fee to turn back on (configurable per product/service)
■ Deletion 3 days after unpaid invoice.
○ Delete orders that weren’t paid for 7 days automatically.
○ VNC access to customer servers.
○ Ability to reset server credentials via email
○ When provisioning a new server; the ability to choose an ipv6 network.
○ Ability to email out to customers on mass, for certain products or offers (if
“newsletter” is enabled.
○ Additional IPs
■ Should be charged at 2 euro each on products during purchase
■ Can also be purchased additionally after original purchase as
upgrades
○ Product Retry
■ Needs to be automated, currently if a service goes down or hits 100% usage the
admins need to “Create Extension” and then click Go.
 ■ When 100% ram is hit or other issues that require Create, add an automation to
retry until it works.
■ During downtime product status should be set to pending.
■ When it’s running again, set the status to paid.

Customer Back End Portal

Home Page
● Customer Portal Introduction
○ "Here you can easily manage your existing servers and explore new options.
Whether you need to configure, upgrade, request support or order additional
servers, everything you need is at your fingertips. Enjoy seamless control and
efficient service management."
○ FAQ section for common queries
● Invoices Page
○ Active Subscriptions Overview
■ List of all active subscriptions
■ Renewal dates and payment status
■ Options to upgrade or cancel subscriptions
■ Subscription history and changes
■ Automated renewal reminders
○ Payment History Page
■ Detailed list of past payments
■ Download and export options
■ Payment receipt generation
■ Payment method management
○ Bank Transfer Details
■ Instructions for bank transfers
■ Bank account details
■ Payment confirmation process
■ Currency conversion options
■ Transaction tracking and history
○ Cryptocurrency Wallets Page
■ List of supported cryptocurrencies
■ Wallet addresses and QR codes
■ Transaction history
■ Cryptocurrency exchange rates
■ Security tips for crypto transactions
 ● Tickets Page
○ Ticket Creation Page
■ Basic form to create tickets; Title, Description, Category, Related Service
and Priority
■ Select service-specific categories
■ Ticket priority and impact assessment
■ Ticket base needs to search knowledge base from the ticket title to try
solve issues preemptively.
○ Single Ticket View
■ Ticket Interface
■ Attach files and images
■ View ticket history and updates
■ Do not make the ticket-view like a messenger style chat.
■ Ticket area design should take inspiration from WHMCS support
system design. Basic reply at the top. Basic column of messages
and who they are targeted to above.
■ Newer messages on the ticket go at the top.
■ Email Notifications
■ Notify users on ticket updates via email
■ Customizable notification settings
■ Notification scheduling and frequency
■ Opt-out options for email notifications

Profile Settings Page

● My Details
○ Name
○ Address
○ Country: Select a country
○ Contact details
○ Update button to save changes
● Credits
○ View current credit balance
○ Options to add or redeem credits
○ Credit purchase history
● 2FA (Two-Factor Authentication)
○ Description of 2FA benefits
○ Setup Two Factor Authentication button
○ Instructions for using an authenticator app
○ 2FA status and activity logs
● Browser Sessions
○ List of active sessions
○ Manage and logout from other browsers and devices
○ Example: Windows - Chrome, 000.000.000.000, This device
 ○ Logout Other Browser Sessions button

Shop Page

VPS & RDP Servers Page

● Introduction
○ Overview of virtualized environments and their benefits for scalability and remote
access.
● Plan Categories
○ Brief descriptions of available plan tiers (e.g., Micro, Basic, Standard, etc.)
○ Key features and benefits of each plan category
○ List of plans
■ Name
■ Price
■ CPU (cores)
■ RAM (type and size GB)
■ Disk size (gb)
■ Port speed (gbps)
■ Traffic (tb / unlimited)
● Add to Cart Functionality
○ Options to select and add plans to the shopping cart
○ Cart summary and checkout process
○ Options to choose billing cycle (monthly, quarterly, semiannually , annually)
○ Ability to add coupon codes
○ Payment method selection
○ Order confirmation and tracking
○ Configurable options (if applicable)
■ Location
■ DDos protection
■ Operating system
● Support and Contact Information
○ Details on how to get support or more information about the plans
○ Live chat support availability
○ Support ticket creation and tracking
○ Knowledge base and FAQs
○ Contact form with automated response

Dedicated Servers Page

● Introduction
○ Overview of dedicated servers and their readiness for deployment
● Server List
 ○ List of servers
■ Name (key technical spec summary)
■ Price
■ CPU (cores / threads)
■ RAM (type and size GB)
■ Disk size (gb)
■ Port speed (gbps)
■ Traffic (tb / unlimited)

Announcements Page
● Announcements List
○ Brief snippet of the announcement
○ Publication date and time
○ Link to full announcement content

Reseller WHMCS Addon

● Concept
○ Addon that will connect to Synatec API and allow sellers to utilise said API to
re-sell the servers/products for profit.
● Example
○ Example for dedicated servers
■ https://github.com/novoserve/whmcs-module
■ This is for dedicated servers. Novoserve.php
■ https://www.whmcs.com/
■ https://marketplace.whmcs.com/