Tadbeer TT Website — Complete System Manual

The foundational architecture of the Tadbeer TT web ecosystem leverages a highly performant, modern technology stack tailored for speed, scalability, and seamless user experiences. The core framework is built upon React 18, bundled and optimized using Vite, providing rapid Hot Module Replacement during development and significantly reduced build times. Styling is meticulously handled via Tailwind CSS, enabling atomic utility classes that map precisely to our designated design system without bloating the final stylesheet.

Data persistence, real-time synchronization, and backend services are entirely managed by Supabase. Supabase provides a robust PostgreSQL database paired with instantaneous real-time web sockets. We primarily interact with four core tables: leads (storing inbound inquiries and applicants), jobs (storing active career opportunities), resources (containing gated downloadable assets), and settings (holding global site configurations). The data flow relies extensively on Supabase's real-time subscriptions, allowing changes made by administrators to instantly reflect across the public site and administrative dashboards without requiring manual browser refreshes.

Several specialized React components act as pillars for our engagement strategy. The StrategySessionModal operates as our primary lead capture overlay, designed to intercept high-intent users with a frictionless data entry form. Complementing this is the WhatsAppButton, a floating action component engineered to be context-aware; it dynamically alters its pre-filled message based on the user's current page (e.g., specific service pages vs. the homepage). The ScrollRewardPopup monitors user scrolling behavior and strategically deploys engagement triggers to maintain attention. To build trust, the SocialProofToasts component periodically displays live activity notifications, simulating a bustling environment. Lastly, the MascotContext provides a centralized, site-wide state management solution for animating our branded mascot seamlessly across route transitions.

The public interface of the Tadbeer TT website is meticulously crafted to guide visitors through an educational and conversion-focused journey. The Homepage serves as the central hub, prominently featuring diagnostic ROI tools that allow prospective clients to tangibly calculate the value proposition of our services. Multiple, strategically placed lead capture entry points are woven throughout the page, designed to naturally capture interest without being overtly intrusive.

Our core offerings are detailed across dedicated Services pages: AI Technology, Digital Marketing, Software Solutions, and Human Capital. Each of these pages is rich with detailed service descriptions, outlining methodologies, deliverables, and expected outcomes. Accompanying these descriptions are context-specific Call To Actions (CTAs) that funnel interested parties into our lead capture pipeline.

To establish authority and demonstrate past successes, the Case Studies section utilizes the CaseStudyDetailPage component for individual, deep-dive analyses. These pages explore client challenges, the implemented solutions, and measurable results. Furthermore, the Resource Library, managed via the ResourceLibraryPage component, offers a repository of highly valuable, gated content. Users can search and filter through guides, templates, and whitepapers, trading their contact information for premium downloads.

The Careers page represents a dynamic integration with our backend. It fetches live job openings directly from the Supabase jobs table in real time. Because of the direct coupling with Supabase, any job posted or modified within the admin panel instantaneously appears or updates on this page. Finally, standard compliance pages, including the Privacy Policy and Terms of Service, provide necessary legal disclosures and maintain regulatory adherence.

Our lead capture mechanism is engineered for maximum conversion and data integrity, primarily facilitated through the StrategySessionModal. This modal presents a structured form designed to gather essential qualifying information from prospective clients. The form collects the following critical data points: company name, industry sector, primary contact person, phone number, email address, and a detailed description of their primary pain point.

The operational sequence of the lead capture flow is rigorous and multi-layered to ensure data reliability and instantaneous system awareness. The flow executes as follows:

1. The user initializes the sequence by filling out the fields within the StrategySessionModal form.
2. Upon attempting to submit, the form executes strict client-side validation logic, ensuring all required fields meet formatting criteria and no malformed data is processed.
3. Following successful validation, a network request is dispatched: supabase.from('leads').insert(leadData). This payload includes the user-provided data along with critical metadata such as the submission timestamp, the referral source, and the specific page URL where the conversion occurred.
4. Immediately upon a successful database insertion response, the system utilizes the standard Web API to dispatch a BroadcastChannel event named tadbeer_leads_sync. This channel broadcasts to any other open browser tabs on the same origin, particularly notifying open administrative panels that a new lead has arrived.
5. Concurrently, a custom Window event named lead-submitted is dispatched. This ensures that if an administrator happens to have the admin panel open in the exact same browser tab (perhaps during testing or via a split-pane interface), the interface will still synchronize perfectly.
6. Simultaneously, the WhatsAppButton updates its internal state. Depending on the page context from which the lead originated (e.g., a specific service page), the WhatsApp pre-filled message is dynamically tailored to provide maximum relevance for immediate, direct communication.

Testing this flow is straightforward. A developer or QA engineer can simply navigate to the public site, fill out the modal with test data, and submit. Verification involves opening the Supabase dashboard and confirming the new record exists in the leads table, complete with the accurate page context and timestamp. Concurrently, having the admin panel open in a separate tab should result in an immediate visual update and a notification toast.

The Executive Admin Panel, encapsulated primarily within the robust CareersAdmin.jsx component, serves as the command center for content management, applicant tracking, and system configuration. Access to this secure zone requires navigation to the designated admin route on the live website. Upon arrival, users are presented with an authentication gateway requiring the master administrative password.

The authentication process utilizes the verifyAdminPassword() function, which securely cross-references the provided input against the securely stored credentials within the Supabase admin_settings table. Upon successful verification, a temporary session is established utilizing browser storage: sessionStorage.setItem('tadbeer_admin_auth', 'true') and sessionStorage.setItem('tadbeer_admin_password', password). This strategy ensures that on any subsequent page load or refresh within the same browsing session, the system can automatically restore access by evaluating sessionStorage.getItem('tadbeer_admin_auth') === 'true', eliminating the friction of repetitive password entry while maintaining reasonable security perimeters.

Tab 1: Job Listings

The Job Listings tab provides a comprehensive overview of all currently active recruitment campaigns. The interface presents a clean data table populated with essential columns: title, department, location, type, and current status. Administrators can initiate the creation of a new opportunity by clicking the prominent "+ New Job" button, which summons a detailed configuration form.

The job creation form requires several specific fields to ensure high-quality public postings:

• title: The precise designation of the role (e.g., "Sales Development Representative").
• department: The organizational sector the role belongs to (e.g., "Growth & Sales").
• location: Defaults to "Muscat, Oman", but is fully editable to accommodate remote or international positions.
• type: A controlled dropdown menu offering standardized employment types: "Full-time", "Part-time", "Internship", or "Contract".
• description: A rich, multi-paragraph text area for articulating the scope, responsibilities, and benefits of the role.
• requirements: A specialized text area where administrators input one requirement per line. The backend logic intelligently parses this by splitting on newline characters, storing the data as a structured array within the database.
• formUrl: An external link, typically directing applicants to a dedicated Google Form, Typeform, or internal ATS for specialized intake.

Saving a new job triggers the createJob(pwd, jobData) function, routing through the dedicated supabaseService. Existing roles can be modified via the pencil icon, invoking updateJob(pwd, editingId, jobData). Removals are handled securely through deleteJob(pwd, id), preceded by a protective window.confirm() dialog. Crucially, due to our Supabase Realtime integration, any modifications applied here are instantaneously visible on the public Careers page, entirely bypassing the need for complex cache invalidation strategies.

Tab 2: Applicants

The Applicants tab acts as an integrated Applicant Tracking System (ATS). The underlying data source is powered by the fetchLeads(pwd) function interfacing with Supabase. Because all submissions share the leads table architecture, applicants are programmatically differentiated and filtered based on the presence of job-specific data fields, separating them from general business inquiries.

To manage large volumes of data, powerful filtering mechanisms are provided:

• applicantJobFilter: A dynamic dropdown populated with all current job titles, plus a global 'ALL' selection.
• applicantDateFilter: Temporal filtering allowing selections of 'ALL', 'TODAY', 'THIS_WEEK', 'THIS_MONTH', or 'CUSTOM'. Selecting 'CUSTOM' reveals precise start and end date input controls.
• applicantExpFilter: Experience level segmentation offering 'ALL', 'ENTRY', 'MID', or 'SENIOR'.
• applicantSearchQuery: A highly responsive live text search that simultaneously queries across name, email, and phone number fields.
• applicantSortOrder: Allows toggling between 'NEWEST' and 'OLDEST', re-sorting the currently filtered dataset on the client side.

Selecting any applicant row triggers setViewingApplicant(applicant), opening a comprehensive detail modal displaying all submitted data. This modal is designed for immediate action, featuring embedded communication tools: a WhatsApp button dynamically linking to wa.me/{phone} and a direct calling button utilizing the tel:{phone} protocol.

The system remains perfectly synchronized with live events via a dedicated real-time subscription: supabase.channel('leads-realtime-admin').on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'leads' }, handler). When this event fires, it automatically triggers a fresh fetchLeads call and displays a localized toast notification stating, "New lead received in real-time!". Cross-tab synchronization is ensured via the BroadcastChannel('tadbeer_leads_sync').onmessage listener, while same-page interactions are handled by the window.addEventListener('lead-submitted', handler) implementation.

Tab 3: Resources

The Resources tab is the management interface for the site's gated content library. Administrators possess full CRUD capabilities (Create, Read, Update, Delete) for all resource items. The creation and editing workflows share a unified form structure designed for flexibility.

The resource configuration form requires meticulous data entry:

• title: The primary display name of the resource asset.
• category: A categorical dropdown mapping to core business areas: 'Digital Transformation', 'AI & Automation', 'HR & Omanization', 'Finance', or 'Marketing'.
• type: Classifies the asset format as a 'Free Guide', 'Whitepaper', 'Case Study', or 'Template'.
• description: A concise summary displayed on the resource card to entice downloads.
• resourceLinkType toggle: A crucial boolean control switching between 'url' and 'file' modes.
  • If set to 'url', the system presents a standard text input for an external hyperlink.
  • If set to 'file', a native file picker is rendered. The handlePDFUpload function intercepts the selected file, converting it into a base64 DataURL. It implements strict validation, rejecting files exceeding 8MB and alerting the administrator via an error message.
• resourceThumbnailType toggle: Operates similarly to the link toggle, offering 'url' or 'file' modes for the visual thumbnail.
  • If 'url', a text input is provided.
  • If 'file', an image picker is displayed. The handleImageUpload function processes the image to a base64 DataURL, enforcing a strict 2MB limit to maintain optimal site performance, rejecting larger files with an appropriate error.
• external toggle: A boolean switch determining if the resource should force opening in a new browser tab upon user interaction.

Persistence operations are handled via createResource(pwd, resourceForm) for new entries and updateResource(pwd, id, resourceForm) for modifications. Deletions require explicit confirmation via deleteResource(pwd, id) to prevent accidental data loss.

Tab 4: Leads

The Leads tab is entirely dedicated to processing inbound business inquiries originating from the StrategySessionModal and other site-wide contact forms. While pulling from the same foundational leads table as the Applicants tab, the dataset is rigorously filtered to exclusively display organizations seeking Tadbeer TT's professional services.

The data table within this tab exposes critical business intelligence fields: company name, primary contact name, email address, direct phone number, the submitted pain point message, the exact page source URL where the conversion took place, and an accurate submission timestamp. A powerful administrative action, clearAllLeads(pwd), is available to purge all records simultaneously. This action is guarded by a severe confirmation dialog. The strictly recommended operational workflow dictates that administrators must execute a full CSV export of the data prior to invoking the clearing function.

Tab 5: Settings

The Settings tab provides deep administrative control over global site behaviors and contact information. Upon initialization, the fetchSettings() function retrieves the active configuration from the Supabase settings table. A localized state variable, settingsForm, maintains a mirror of the defaultSettings structure to manage ongoing edits.

The configuration interface allows manipulation of several key variables:

• WhatsApp number: Defines the global phone number utilized by every instance of the WhatsAppButton across the entire website. This should be updated when the primary intake line changes.
• notification email: Specifies the exact email address designated to receive automated alerts whenever a new lead is captured by the system.
• site banner text: Controls the precise copy displayed within the global announcement banner positioned at the very top of the site.
• banner enabled toggle: A master boolean switch to globally show or hide the announcement banner, useful for toggling promotional campaigns without deleting the associated text.

Submitting changes invokes the updateSettings(pwd, settingsForm) function. This process securely persists the modified data back to Supabase. Thanks to the real-time architecture, these structural modifications take effect globally across the site immediately, without necessitating application restarts or cache purges.