adserver-dashboard 1.0.0

package/client/src/lib/company-api.ts

@@ -0,0 +1,61 @@
+import { API_CONFIG } from './api-config';
+import { getAccessToken } from './oauth-service';
+
+export interface CompanyType {
+  id: string;
+  name: string;
+  code: string;
+  is_supplier_side: boolean;
+  is_demand_side: boolean;
+  is_parent_company_type: boolean;
+}
+
+export interface DemandSideCompany {
+  id: string;
+  external_id: string;
+  name: string;
+  seat_id?: number;
+  company_type?: CompanyType;
+}
+
+export interface DemandSideCompaniesResponse {
+  success: boolean;
+  message: string;
+  data: DemandSideCompany[];
+  meta: {
+    total: number;
+    limit: number;
+    offset: number;
+  };
+}
+
+export async function fetchDemandSideCompanies(): Promise<DemandSideCompany[]> {
+  const accessToken = getAccessToken();
+  
+  const headers: Record<string, string> = {
+    'Accept': 'application/json',
+    'Content-Type': 'application/json',
+  };
+
+  if (accessToken) {
+    headers['Authorization'] = `Bearer ${accessToken}`;
+  }
+
+  // Use IAM API agencies endpoint instead of demand-side
+  const response = await fetch(`${API_CONFIG.auth}/api/v1/companies/agencies?all=true`, {
+    method: 'GET',
+    headers,
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch agencies: ${response.status}`);
+  }
+
+  const result: DemandSideCompaniesResponse = await response.json();
+
+  if (!result.success) {
+    throw new Error(result.message || 'Failed to fetch agencies');
+  }
+
+  return result.data;
+}

package/client/src/lib/content-hub-api.ts

@@ -0,0 +1,407 @@
+/**
+ * Content Hub API Client
+ * Handles all API calls to the Content Hub microservice
+ */
+
+import { useQuery, useMutation, useInfiniteQuery } from '@tanstack/react-query';
+import { queryClient } from './queryClient';
+import {
+  CONTENT_HUB_CONFIG,
+  type Folder,
+  type FolderCreate,
+  type FolderUpdate,
+  type FolderListResponse,
+  type FolderFilters,
+  type Creative,
+  type CreativeUpload,
+  type CreativeListResponse,
+  type CreativeFilters,
+  type ApiResponse,
+  type ApiError,
+} from '@/types/content-hub';
+
+// Base API client
+class ContentHubClient {
+  private baseUrl: string;
+  private apiPrefix: string;
+  private companyId: string;
+
+  constructor() {
+    this.baseUrl = CONTENT_HUB_CONFIG.BASE_URL;
+    this.apiPrefix = CONTENT_HUB_CONFIG.API_PREFIX;
+    this.companyId = CONTENT_HUB_CONFIG.COMPANY_ID;
+  }
+
+  private buildUrl(path: string, params?: Record<string, any>): string {
+    // For proxy mode (when baseUrl is empty), construct relative path
+    const basePath = this.baseUrl 
+      ? `${this.baseUrl}${this.apiPrefix}${path}`
+      : `${this.apiPrefix}${path}`;
+    
+    // If no params, return the path directly
+    if (!params || Object.keys(params).length === 0) {
+      return basePath;
+    }
+    
+    // Build query string
+    const queryParams = new URLSearchParams();
+    Object.entries(params).forEach(([key, value]) => {
+      if (value !== undefined && value !== null && value !== '') {
+        queryParams.append(key, String(value));
+      }
+    });
+    
+    const queryString = queryParams.toString();
+    return queryString ? `${basePath}?${queryString}` : basePath;
+  }
+
+  private async request<T>(
+    path: string,
+    options?: RequestInit,
+    params?: Record<string, any>
+  ): Promise<T> {
+    const url = this.buildUrl(path, params);
+    
+    const response = await fetch(url, {
+      ...options,
+      headers: {
+        'Content-Type': 'application/json',
+        ...options?.headers,
+      },
+    });
+
+    if (!response.ok) {
+      const error: ApiError = await response.json().catch(() => ({
+        status: response.status,
+        error: response.statusText,
+        message: `HTTP ${response.status}: ${response.statusText}`,
+      }));
+      throw error;
+    }
+
+    return response.json();
+  }
+
+  // Folder APIs
+  async listFolders(filters?: FolderFilters): Promise<FolderListResponse> {
+    // Add company_id for direct API access
+    const params = { ...filters, company_id: this.companyId };
+    return this.request<FolderListResponse>('/folders/', undefined, params);
+  }
+
+  async getFolder(folderId: string): Promise<ApiResponse<Folder>> {
+    return this.request<ApiResponse<Folder>>(`/folders/${folderId}`, undefined, { company_id: this.companyId });
+  }
+
+  async createFolder(data: Omit<FolderCreate, 'company_id'>): Promise<ApiResponse<Folder>> {
+    // Add company_id for direct API access
+    const payload = { ...data, company_id: this.companyId };
+    return this.request<ApiResponse<Folder>>('/folders/', {
+      method: 'POST',
+      body: JSON.stringify(payload),
+    });
+  }
+
+  async updateFolder(folderId: string, data: FolderUpdate): Promise<ApiResponse<Folder>> {
+    return this.request<ApiResponse<Folder>>(`/folders/${folderId}`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async deleteFolder(folderId: string): Promise<ApiResponse<any>> {
+    return this.request<ApiResponse<any>>(`/folders/${folderId}`, {
+      method: 'DELETE',
+    });
+  }
+
+  // Creative APIs
+  async listCreatives(filters?: CreativeFilters): Promise<CreativeListResponse> {
+    // Add company_id for direct API access
+    const params = { ...filters, company_id: this.companyId };
+    return this.request<CreativeListResponse>('/creatives/', undefined, params);
+  }
+
+  async getCreative(creativeId: string): Promise<ApiResponse<Creative>> {
+    return this.request<ApiResponse<Creative>>(`/creatives/${creativeId}`, undefined, { company_id: this.companyId });
+  }
+
+  async uploadCreative(data: Omit<CreativeUpload, 'company_id'>): Promise<ApiResponse<Creative>> {
+    const formData = new FormData();
+    formData.append('file', data.file);
+    // Add company_id for direct API access
+    formData.append('company_id', this.companyId);
+    
+    if (data.folder_id) {
+      formData.append('folder_id', data.folder_id);
+    }
+    
+    if (data.tags && data.tags.length > 0) {
+      formData.append('tags', data.tags.join(','));
+    }
+
+    const url = this.buildUrl('/creatives/');
+    const response = await fetch(url, {
+      method: 'POST',
+      body: formData,
+    });
+
+    if (!response.ok) {
+      const error: ApiError = await response.json().catch(() => ({
+        status: response.status,
+        error: response.statusText,
+        message: `Upload failed: ${response.statusText}`,
+      }));
+      throw error;
+    }
+
+    return response.json();
+  }
+
+  async deleteCreative(creativeId: string, performerId?: string): Promise<ApiResponse<any>> {
+    const params = performerId ? { performer_id: performerId } : undefined;
+    return this.request<ApiResponse<any>>(`/creatives/${creativeId}`, {
+      method: 'DELETE',
+    }, params);
+  }
+
+  async approveCreative(creativeId: string, payload: { reviewer_id: string; comments?: string }): Promise<ApiResponse<Creative>> {
+    return this.request<ApiResponse<Creative>>(`/creatives/${creativeId}/approve`, {
+      method: 'POST',
+      body: JSON.stringify(payload),
+    });
+  }
+
+  async rejectCreative(creativeId: string, payload: { reviewer_id: string; comments?: string }): Promise<ApiResponse<Creative>> {
+    return this.request<ApiResponse<Creative>>(`/creatives/${creativeId}/reject`, {
+      method: 'POST',
+      body: JSON.stringify(payload),
+    });
+  }
+
+  async transcodeCreative(creativeId: string, payload?: any): Promise<ApiResponse<Creative>> {
+    return this.request<ApiResponse<Creative>>(`/creatives/${creativeId}/transcode`, {
+      method: 'POST',
+      body: JSON.stringify(payload || {}),
+    });
+  }
+
+  async getTranscodedVariants(creativeId: string): Promise<ApiResponse<any>> {
+    return this.request<ApiResponse<any>>(`/creatives/${creativeId}/transcodes`, {
+      method: 'GET',
+    });
+  }
+
+  async getTranscodedFiles(creativeId: string): Promise<ApiResponse<any>> {
+    return this.request<ApiResponse<any>>(`/creatives/${creativeId}/transcoded-files`, {
+      method: 'GET',
+    });
+  }
+
+  async listTranscodingJobs(filters?: {
+    creative_id?: string;
+    company_id?: string;
+    status?: string;
+    page?: number;
+    limit?: number;
+  }): Promise<ApiResponse<any>> {
+    const params = new URLSearchParams();
+    if (filters) {
+      Object.entries(filters).forEach(([key, value]) => {
+        if (value !== undefined) {
+          params.append(key, String(value));
+        }
+      });
+    }
+    const queryString = params.toString();
+    return this.request<ApiResponse<any>>(`/transcoding/jobs${queryString ? `?${queryString}` : ''}`, {
+      method: 'GET',
+    });
+  }
+
+  async updateCreative(creativeId: string, data: Partial<Creative>): Promise<ApiResponse<Creative>> {
+    return this.request<ApiResponse<Creative>>(`/creatives/${creativeId}`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  }
+}
+
+// Singleton instance
+export const contentHubClient = new ContentHubClient();
+
+// React Query Hooks
+
+// Folder Hooks
+export function useFolders(filters?: FolderFilters) {
+  return useQuery({
+    queryKey: ['content-hub', 'folders', filters],
+    queryFn: () => contentHubClient.listFolders(filters),
+  });
+}
+
+export function useFolder(folderId: string) {
+  return useQuery({
+    queryKey: ['content-hub', 'folders', folderId],
+    queryFn: () => contentHubClient.getFolder(folderId),
+    enabled: !!folderId,
+  });
+}
+
+export function useCreateFolder() {
+  return useMutation({
+    mutationFn: (data: Omit<FolderCreate, 'company_id'>) => 
+      contentHubClient.createFolder(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['content-hub', 'folders'] });
+    },
+  });
+}
+
+export function useUpdateFolder() {
+  return useMutation({
+    mutationFn: ({ folderId, data }: { folderId: string; data: FolderUpdate }) =>
+      contentHubClient.updateFolder(folderId, data),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['content-hub', 'folders'] });
+      queryClient.invalidateQueries({ queryKey: ['content-hub', 'folders', variables.folderId] });
+    },
+  });
+}
+
+export function useDeleteFolder() {
+  return useMutation({
+    mutationFn: (folderId: string) => contentHubClient.deleteFolder(folderId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['content-hub', 'folders'] });
+    },
+  });
+}
+
+// Creative Hooks
+export function useCreatives(filters?: CreativeFilters) {
+  return useQuery({
+    queryKey: ['content-hub', 'creatives', filters],
+    queryFn: () => contentHubClient.listCreatives(filters),
+  });
+}
+
+export function useInfiniteCreatives(filters?: Omit<CreativeFilters, 'page'>) {
+  return useInfiniteQuery({
+    queryKey: ['content-hub', 'creatives', 'infinite', filters],
+    queryFn: ({ pageParam = 1 }) =>
+      contentHubClient.listCreatives({ ...filters, page: pageParam }),
+    getNextPageParam: (lastPage) => {
+      if (!lastPage?.pagination) return undefined;
+      const { page, total_pages } = lastPage.pagination;
+      return page < total_pages ? page + 1 : undefined;
+    },
+    initialPageParam: 1,
+  });
+}
+
+export function useCreative(creativeId: string) {
+  return useQuery({
+    queryKey: ['content-hub', 'creatives', creativeId],
+    queryFn: () => contentHubClient.getCreative(creativeId),
+    enabled: !!creativeId,
+  });
+}
+
+export function useUploadCreative() {
+  return useMutation({
+    mutationFn: (data: Omit<CreativeUpload, 'company_id'>) =>
+      contentHubClient.uploadCreative(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['content-hub', 'creatives'] });
+      queryClient.invalidateQueries({ queryKey: ['content-hub', 'folders'] });
+    },
+  });
+}
+
+export function useDeleteCreative() {
+  return useMutation({
+    mutationFn: ({ creativeId, performerId }: { creativeId: string; performerId?: string }) => 
+      contentHubClient.deleteCreative(creativeId, performerId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['content-hub', 'creatives'] });
+      queryClient.invalidateQueries({ queryKey: ['content-hub', 'folders'] });
+    },
+  });
+}
+
+export function useApproveCreative() {
+  return useMutation({
+    mutationFn: ({ creativeId, payload }: { creativeId: string; payload: { reviewer_id: string; comments?: string } }) => 
+      contentHubClient.approveCreative(creativeId, payload),
+    onSuccess: (_, { creativeId }) => {
+      queryClient.invalidateQueries({ queryKey: ['content-hub', 'creatives'] });
+      queryClient.invalidateQueries({ queryKey: ['content-hub', 'creatives', creativeId] });
+      queryClient.invalidateQueries({ queryKey: ['content-hub', 'folders'] });
+    },
+  });
+}
+
+export function useRejectCreative() {
+  return useMutation({
+    mutationFn: ({ creativeId, payload }: { creativeId: string; payload: { reviewer_id: string; comments?: string } }) => 
+      contentHubClient.rejectCreative(creativeId, payload),
+    onSuccess: (_, { creativeId }) => {
+      queryClient.invalidateQueries({ queryKey: ['content-hub', 'creatives'] });
+      queryClient.invalidateQueries({ queryKey: ['content-hub', 'creatives', creativeId] });
+      queryClient.invalidateQueries({ queryKey: ['content-hub', 'folders'] });
+    },
+  });
+}
+
+export function useUpdateCreative() {
+  return useMutation({
+    mutationFn: ({ creativeId, data }: { creativeId: string; data: Partial<Creative> }) =>
+      contentHubClient.updateCreative(creativeId, data),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['content-hub', 'creatives'] });
+      queryClient.invalidateQueries({ queryKey: ['content-hub', 'creatives', variables.creativeId] });
+    },
+  });
+}
+
+export function useTranscodeCreative() {
+  return useMutation({
+    mutationFn: ({ creativeId, payload }: { creativeId: string; payload?: any }) =>
+      contentHubClient.transcodeCreative(creativeId, payload),
+    onSuccess: (_, { creativeId }) => {
+      queryClient.invalidateQueries({ queryKey: ['content-hub', 'creatives'] });
+      queryClient.invalidateQueries({ queryKey: ['content-hub', 'creatives', creativeId] });
+      queryClient.invalidateQueries({ queryKey: ['content-hub', 'transcoded-variants', creativeId] });
+    },
+  });
+}
+
+export function useTranscodedVariants(creativeId: string) {
+  return useQuery({
+    queryKey: ['content-hub', 'transcoded-variants', creativeId],
+    queryFn: () => contentHubClient.getTranscodedVariants(creativeId),
+    enabled: !!creativeId,
+  });
+}
+
+export function useTranscodedFiles(creativeId: string) {
+  return useQuery({
+    queryKey: ['content-hub', 'transcoded-files', creativeId],
+    queryFn: () => contentHubClient.getTranscodedFiles(creativeId),
+    enabled: !!creativeId,
+  });
+}
+
+export function useTranscodingJobs(filters?: {
+  creative_id?: string;
+  company_id?: string;
+  status?: string;
+  page?: number;
+  limit?: number;
+}) {
+  return useQuery({
+    queryKey: ['content-hub', 'transcoding-jobs', filters],
+    queryFn: () => contentHubClient.listTranscodingJobs(filters),
+  });
+}

package/client/src/lib/creative-mapper.ts

@@ -0,0 +1,61 @@
+/**
+ * Maps Content Hub creatives to Direct Campaign creative format
+ */
+
+import type { Creative as ContentHubCreative } from '@/types/content-hub';
+import type { InsertDirectCreative } from '@shared/direct-io-schema';
+
+export function mapContentHubToCampaignCreative(
+  contentHubCreative: ContentHubCreative
+): Omit<InsertDirectCreative, 'campaign_id'> & { content_hub_id: string } {
+  // Map Content Hub creative type to Campaign creative type
+  const creativeType = mapCreativeType(contentHubCreative.mime_type || contentHubCreative.format);
+
+  // Build dimensions object only if width and height are available
+  const dimensions = contentHubCreative.width && contentHubCreative.height
+    ? {
+        width: contentHubCreative.width,
+        height: contentHubCreative.height,
+      }
+    : undefined;
+
+  return {
+    creative_name: contentHubCreative.filename,
+    creative_type: creativeType,
+    asset_url: contentHubCreative.cdn_path, // Use cdn_path as asset_url
+    thumbnail_url: contentHubCreative.thumbnail || undefined,
+    duration_seconds: contentHubCreative.duration_seconds || undefined,
+    dimensions,
+    metadata: {
+      ...contentHubCreative.metadata,
+      codec: contentHubCreative.metadata?.codec,
+      format: contentHubCreative.format,
+      mime_type: contentHubCreative.mime_type,
+      file_size: contentHubCreative.size_bytes,
+    },
+    status: 'active',
+    content_hub_id: contentHubCreative.id,
+  };
+}
+
+function mapCreativeType(mimeTypeOrFormat: string): 'image' | 'video' | 'html5' | 'dynamic' {
+  if (!mimeTypeOrFormat) {
+    return 'dynamic';
+  }
+  
+  const type = mimeTypeOrFormat.toLowerCase();
+  
+  if (type.startsWith('image/') || type === 'jpg' || type === 'png' || type === 'gif' || type === 'webp') {
+    return 'image';
+  }
+  
+  if (type.startsWith('video/') || type === 'mp4' || type === 'webm' || type === 'mov') {
+    return 'video';
+  }
+  
+  if (type === 'html5' || type === 'text/html') {
+    return 'html5';
+  }
+  
+  return 'dynamic';
+}

package/client/src/lib/date-utils.ts

@@ -0,0 +1,119 @@
+/**
+ * Date utility functions for timezone-safe date handling
+ * Adapted from MW Planner date utilities
+ */
+
+/**
+ * Converts a Date object to ISO date string (YYYY-MM-DD)
+ * This is timezone-safe and always returns the local date
+ */
+export function toAPIDateString(date: Date | null): string {
+  if (!date || !(date instanceof Date)) {
+    throw new Error("Invalid date provided");
+  }
+
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
+
+/**
+ * Converts an ISO date string (YYYY-MM-DD) to a Date object
+ * This is timezone-safe and creates a Date at midnight local time
+ */
+export function fromAPIDateString(dateString: string): Date {
+  if (!dateString || typeof dateString !== "string") {
+    throw new Error("Invalid date string provided");
+  }
+
+  const [year, month, day] = dateString.split('-').map(Number);
+
+  if (isNaN(year) || isNaN(month) || isNaN(day)) {
+    throw new Error("Invalid date string format");
+  }
+
+  return new Date(year, month - 1, day);
+}
+
+/**
+ * Formats a Date object for display
+ * @param date - The date to format
+ * @param format - The format string (e.g., "dd/MM/yyyy", "MM/dd/yyyy")
+ * @returns Formatted date string
+ */
+export function formatDate(date: Date | null, format: string = "dd/MM/yyyy"): string {
+  if (!date || !(date instanceof Date)) {
+    return "";
+  }
+
+  const day = String(date.getDate()).padStart(2, '0');
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const year = date.getFullYear();
+
+  return format
+    .replace('dd', day)
+    .replace('MM', month)
+    .replace('yyyy', String(year));
+}
+
+/**
+ * Checks if two dates are the same day
+ */
+export function isSameDay(date1: Date | null, date2: Date | null): boolean {
+  if (!date1 || !date2) {
+    return false;
+  }
+  return (
+    date1.getFullYear() === date2.getFullYear() &&
+    date1.getMonth() === date2.getMonth() &&
+    date1.getDate() === date2.getDate()
+  );
+}
+
+/**
+ * Checks if a date is between two other dates (inclusive)
+ */
+export function isDateBetween(
+  date: Date,
+  startDate: Date | null,
+  endDate: Date | null,
+): boolean {
+  if (!startDate || !endDate) {
+    return false;
+  }
+  // Set all dates to start of day for comparison
+  const dateStart = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  const rangeStart = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
+  const rangeEnd = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate());
+
+  return dateStart > rangeStart && dateStart < rangeEnd;
+}
+
+/**
+ * Converts a date range to API format
+ * @param dateRange - Object with from and to dates
+ * @returns Object with start_date and end_date in YYYY-MM-DD format
+ */
+export function toAPIDateRange(from: Date, to: Date) {
+  return {
+    start_date: toAPIDateString(from),
+    end_date: toAPIDateString(to),
+  };
+}
+
+/**
+ * Gets the minimum date for date pickers (today in YYYY-MM-DD format)
+ * @returns Today's date in YYYY-MM-DD format
+ */
+export function getTodayDateString(): string {
+  return toAPIDateString(new Date());
+}
+
+/**
+ * Gets today's date at midnight
+ */
+export function getTodayDate(): Date {
+  const now = new Date();
+  return new Date(now.getFullYear(), now.getMonth(), now.getDate());
+}