= ({ children, value, index, ...other }) => (
+
+ {value === index && {children}}
+
+);
+
+const schema = yup.object({
+ title: yup.string().required('Title is required'),
+ version: yup.string().required('Version is required'),
+ description: yup.string().required('Description is required'),
+ projectId: yup.number().required('Project is required'),
+ sourceBuildId: yup.number().required('Source build is required'),
+ configuration: yup.object({
+ buildFolder: yup.string().required('Build folder is required'),
+ zipContents: yup.boolean().required(),
+ deleteOldPublishedBuilds: yup.boolean().required(),
+ releaseNoteTemplate: yup.string().required('Release note template is required'),
+ storageSettings: yup.object().required(),
+ helpCenterSettings: yup.object().required(),
+ }),
+});
+
+export const PackageForm: React.FC = ({ open, onClose, package: pkg }) => {
+ const [currentTab, setCurrentTab] = React.useState(0);
+ const [selectedProjectId, setSelectedProjectId] = React.useState(null);
+
+ const { data: projectsData } = useProjects();
+ const { data: buildsData } = useProjectBuilds(
+ selectedProjectId || 0,
+ 1,
+ 50,
+ { status: 'Success' }
+ );
+
+ const createMutation = useCreatePackage();
+ const updateMutation = useUpdatePackage();
+
+ const {
+ control,
+ handleSubmit,
+ reset,
+ watch,
+ formState: { errors, isValid },
+ } = useForm({
+ resolver: yupResolver(schema),
+ defaultValues: {
+ title: '',
+ version: '',
+ description: '',
+ projectId: 0,
+ sourceBuildId: 0,
+ configuration: {
+ buildFolder: '',
+ zipContents: true,
+ deleteOldPublishedBuilds: true,
+ releaseNoteTemplate: '',
+ storageSettings: {},
+ helpCenterSettings: {},
+ },
+ },
+ });
+
+ const watchedProjectId = watch('projectId');
+
+ useEffect(() => {
+ if (watchedProjectId) {
+ setSelectedProjectId(watchedProjectId);
+ }
+ }, [watchedProjectId]);
+
+ useEffect(() => {
+ if (pkg) {
+ reset({
+ title: pkg.title,
+ version: pkg.version,
+ description: pkg.description,
+ projectId: pkg.projectId,
+ sourceBuildId: pkg.sourceBuildId,
+ configuration: pkg.configuration || {
+ buildFolder: '',
+ zipContents: true,
+ deleteOldPublishedBuilds: true,
+ releaseNoteTemplate: '',
+ storageSettings: {},
+ helpCenterSettings: {},
+ },
+ });
+ setSelectedProjectId(pkg.projectId);
+ } else {
+ reset({
+ title: '',
+ version: '',
+ description: '',
+ projectId: 0,
+ sourceBuildId: 0,
+ configuration: {
+ buildFolder: '',
+ zipContents: true,
+ deleteOldPublishedBuilds: true,
+ releaseNoteTemplate: '',
+ storageSettings: {},
+ helpCenterSettings: {},
+ },
+ });
+ setSelectedProjectId(null);
+ }
+ }, [pkg, reset]);
+
+ const onSubmit = async (data: CreatePackageRequest) => {
+ try {
+ if (pkg) {
+ await updateMutation.mutateAsync({ id: pkg.id, request: data });
+ } else {
+ await createMutation.mutateAsync(data);
+ }
+ onClose();
+ } catch (error) {
+ console.error('Failed to save package:', error);
+ }
+ };
+
+ const handleClose = () => {
+ setCurrentTab(0);
+ onClose();
+ };
+
+ const projects = projectsData?.data || [];
+ const builds = buildsData?.data || [];
+
+ return (
+
+ );
+};
\ No newline at end of file
diff --git a/src/Frontend/src/components/Packages/PackageList.tsx b/src/Frontend/src/components/Packages/PackageList.tsx
new file mode 100644
index 0000000..29083b2
--- /dev/null
+++ b/src/Frontend/src/components/Packages/PackageList.tsx
@@ -0,0 +1,270 @@
+import React, { useState } from 'react';
+import {
+ Box,
+ Card,
+ CardContent,
+ Typography,
+ Button,
+ TextField,
+ Grid,
+ FormControl,
+ InputLabel,
+ Select,
+ MenuItem,
+ IconButton,
+ Tooltip,
+ Chip,
+ Paper,
+ Table,
+ TableBody,
+ TableCell,
+ TableContainer,
+ TableHead,
+ TableRow,
+ TablePagination,
+} from '@mui/material';
+import {
+ Add as AddIcon,
+ Edit as EditIcon,
+ Delete as DeleteIcon,
+ Publish as PublishIcon,
+ Search as SearchIcon,
+ FilterList as FilterIcon,
+} from '@mui/icons-material';
+import { usePackages, useDeletePackage } from '../../hooks/usePackages';
+import { useProjects } from '../../hooks/useProjects';
+import { Package, PackageStatus, PackageFilter } from '../../types';
+import { StatusChip } from '../common/StatusChip';
+import { LoadingSpinner } from '../common/LoadingSpinner';
+import { ErrorDisplay } from '../common/ErrorDisplay';
+import { format } from 'date-fns';
+
+interface PackageListProps {
+ onCreatePackage: () => void;
+ onEditPackage: (packageItem: Package) => void;
+ onPublishPackage: (packageItem: Package) => void;
+}
+
+export const PackageList: React.FC = ({
+ onCreatePackage,
+ onEditPackage,
+ onPublishPackage,
+}) => {
+ const [page, setPage] = useState(0);
+ const [pageSize, setPageSize] = useState(10);
+ const [filter, setFilter] = useState({});
+ const [showFilters, setShowFilters] = useState(false);
+
+ const { data: packagesData, isLoading, error, refetch } = usePackages(
+ page + 1,
+ pageSize,
+ filter
+ );
+ const { data: projectsData } = useProjects();
+ const deletePackageMutation = useDeletePackage();
+
+ const handleFilterChange = (field: keyof PackageFilter, value: any) => {
+ setFilter(prev => ({ ...prev, [field]: value }));
+ setPage(0);
+ };
+
+ const handleDelete = async (id: number) => {
+ if (window.confirm('Are you sure you want to delete this package?')) {
+ await deletePackageMutation.mutateAsync(id);
+ }
+ };
+
+ const canPublish = (pkg: Package): boolean => {
+ return pkg.status === PackageStatus.Ready || pkg.status === PackageStatus.Failed;
+ };
+
+ const canEdit = (pkg: Package): boolean => {
+ return pkg.status !== PackageStatus.Publishing;
+ };
+
+ if (isLoading) return ;
+ if (error) return ;
+
+ const packages = packagesData?.data || [];
+ const totalCount = packagesData?.totalCount || 0;
+
+ return (
+
+ {/* Header */}
+
+
+ Packages
+
+ }
+ onClick={onCreatePackage}
+ >
+ Create Package
+
+
+
+ {/* Filters */}
+
+
+
+ handleFilterChange('searchTerm', e.target.value)}
+ InputProps={{
+ startAdornment: ,
+ }}
+ />
+ }
+ onClick={() => setShowFilters(!showFilters)}
+ >
+ {showFilters ? 'Hide Filters' : 'Show Filters'}
+
+
+
+ {showFilters && (
+
+
+
+ Project
+
+
+
+
+
+ Status
+
+
+
+
+ )}
+
+
+
+ {/* Packages Table */}
+
+
+
+
+ Title
+ Version
+ Project
+ Status
+ Published Date
+ Actions
+
+
+
+ {packages.map((pkg) => (
+
+
+
+ {pkg.title}
+
+ {pkg.description}
+
+
+
+
+
+
+ {pkg.project?.name || 'Unknown'}
+
+
+
+
+ {pkg.publishDate ? format(new Date(pkg.publishDate), 'MMM dd, yyyy HH:mm') : '-'}
+
+
+
+ {canEdit(pkg) && (
+
+ onEditPackage(pkg)}
+ >
+
+
+
+ )}
+ {canPublish(pkg) && (
+
+ onPublishPackage(pkg)}
+ >
+
+
+
+ )}
+ {canEdit(pkg) && (
+
+ handleDelete(pkg.id)}
+ disabled={deletePackageMutation.isPending}
+ >
+
+
+
+ )}
+
+
+
+ ))}
+ {packages.length === 0 && (
+
+
+
+ No packages found. Create your first package to get started.
+
+
+
+ )}
+
+
+ setPage(newPage)}
+ rowsPerPage={pageSize}
+ onRowsPerPageChange={(e) => {
+ setPageSize(parseInt(e.target.value, 10));
+ setPage(0);
+ }}
+ rowsPerPageOptions={[5, 10, 25, 50]}
+ />
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/Frontend/src/components/Publishing/PublishingDashboard.tsx b/src/Frontend/src/components/Publishing/PublishingDashboard.tsx
new file mode 100644
index 0000000..5b64a3d
--- /dev/null
+++ b/src/Frontend/src/components/Publishing/PublishingDashboard.tsx
@@ -0,0 +1,362 @@
+import React, { useEffect, useState } from 'react';
+import {
+ Box,
+ Typography,
+ Grid,
+ Card,
+ CardContent,
+ List,
+ ListItem,
+ Button,
+ Chip,
+ Alert,
+ IconButton,
+ Tooltip,
+ Dialog,
+ DialogTitle,
+ DialogContent,
+ DialogActions,
+} from '@mui/material';
+import {
+ Cancel as CancelIcon,
+ Refresh as RefreshIcon,
+ PlayArrow as PlayIcon,
+ Stop as StopIcon,
+} from '@mui/icons-material';
+import {
+ useActivePublications,
+ useCancelPublication,
+ useRetryPublication
+} from '../../hooks/usePublications';
+import { useSignalR } from '../../hooks/useSignalR';
+import {
+ Publication,
+ PublishingStep,
+ PublishingProgressUpdate,
+ PublicationStatus,
+ StepStatus
+} from '../../types';
+import { ProgressBar } from '../common/ProgressBar';
+import { StatusChip } from '../common/StatusChip';
+import { LoadingSpinner } from '../common/LoadingSpinner';
+import { ErrorDisplay } from '../common/ErrorDisplay';
+import { format } from 'date-fns';
+
+export const PublishingDashboard: React.FC = () => {
+ const [selectedPublication, setSelectedPublication] = useState(null);
+ const [progressUpdates, setProgressUpdates] = useState>(new Map());
+
+ const {
+ data: activePublications,
+ isLoading,
+ error,
+ refetch
+ } = useActivePublications();
+
+ const {
+ subscribeToPublishingProgress,
+ subscribeToPublicationCompleted,
+ subscribeToPublicationFailed,
+ joinPublicationGroup,
+ leavePublicationGroup,
+ isConnected,
+ } = useSignalR();
+
+ const cancelMutation = useCancelPublication();
+ const retryMutation = useRetryPublication();
+
+ // Subscribe to real-time updates
+ useEffect(() => {
+ const unsubscribeProgress = subscribeToPublishingProgress((update) => {
+ setProgressUpdates(prev => {
+ const publicationUpdates = prev.get(update.publicationId) || [];
+ const newUpdates = [...publicationUpdates, update];
+
+ // Keep only the last 50 updates per publication
+ if (newUpdates.length > 50) {
+ newUpdates.splice(0, newUpdates.length - 50);
+ }
+
+ const newMap = new Map(prev);
+ newMap.set(update.publicationId, newUpdates);
+ return newMap;
+ });
+ });
+
+ const unsubscribeCompleted = subscribeToPublicationCompleted((publicationId) => {
+ console.log(`Publication ${publicationId} completed`);
+ refetch();
+ });
+
+ const unsubscribeFailed = subscribeToPublicationFailed(({ publicationId, error }) => {
+ console.error(`Publication ${publicationId} failed:`, error);
+ refetch();
+ });
+
+ return () => {
+ unsubscribeProgress();
+ unsubscribeCompleted();
+ unsubscribeFailed();
+ };
+ }, [subscribeToPublishingProgress, subscribeToPublicationCompleted, subscribeToPublicationFailed, refetch]);
+
+ // Join publication groups for real-time updates
+ useEffect(() => {
+ if (activePublications?.data) {
+ activePublications.data.forEach(publication => {
+ if (publication.status === PublicationStatus.InProgress) {
+ joinPublicationGroup(publication.id);
+ }
+ });
+ }
+
+ return () => {
+ if (activePublications?.data) {
+ activePublications.data.forEach(publication => {
+ leavePublicationGroup(publication.id);
+ });
+ }
+ };
+ }, [activePublications?.data, joinPublicationGroup, leavePublicationGroup]);
+
+ const handleCancel = async (publication: Publication) => {
+ if (window.confirm(`Are you sure you want to cancel the publication of "${publication.package?.title}"?`)) {
+ await cancelMutation.mutateAsync(publication.id);
+ }
+ };
+
+ const handleRetry = async (publication: Publication) => {
+ await retryMutation.mutateAsync(publication.id);
+ };
+
+ const getLatestProgressForPublication = (publicationId: number): PublishingProgressUpdate | null => {
+ const updates = progressUpdates.get(publicationId);
+ return updates && updates.length > 0 ? updates[updates.length - 1] : null;
+ };
+
+ const calculateOverallProgress = (publication: Publication): number => {
+ const latestUpdate = getLatestProgressForPublication(publication.id);
+ if (latestUpdate) {
+ return latestUpdate.progressPercent;
+ }
+
+ // Fallback to calculating from steps if available
+ if (publication.steps && publication.steps.length > 0) {
+ const completedSteps = publication.steps.filter(step => step.status === StepStatus.Completed).length;
+ return (completedSteps / publication.steps.length) * 100;
+ }
+
+ return 0;
+ };
+
+ if (isLoading) return ;
+ if (error) return ;
+
+ const publications = activePublications?.data || [];
+
+ return (
+
+ {/* Header */}
+
+
+ Publishing Dashboard
+
+
+
+
+
+
+ {isConnected ? 'Live Updates' : 'Disconnected'}
+
+
+
+ refetch()} title="Refresh">
+
+
+
+
+
+ {publications.length === 0 ? (
+
+
+
+ No Active Publications
+
+
+ All publications are completed. Start a new publication from the Packages page.
+
+
+
+ ) : (
+
+ {publications.map((publication) => {
+ const latestProgress = getLatestProgressForPublication(publication.id);
+ const overallProgress = calculateOverallProgress(publication);
+
+ return (
+
+
+
+
+
+
+ {publication.package?.title || 'Unknown Package'}
+
+
+ Version: {publication.package?.version} |
+ Project: {publication.package?.project?.name}
+
+
+
+ {publication.publishedAt && (
+
+ )}
+
+
+
+ {publication.status === PublicationStatus.InProgress && (
+ }
+ onClick={() => handleCancel(publication)}
+ disabled={cancelMutation.isPending}
+ >
+ Cancel
+
+ )}
+ {publication.status === PublicationStatus.Failed && (
+ }
+ onClick={() => handleRetry(publication)}
+ disabled={retryMutation.isPending}
+ >
+ Retry
+
+ )}
+
+
+
+
+
+
+
+
+ {publication.status === PublicationStatus.Failed && (
+
+ Publication failed. Check the details for more information.
+
+ )}
+
+
+
+ );
+ })}
+
+ )}
+
+ {/* Publication Details Dialog */}
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/Frontend/src/components/common/ErrorDisplay.tsx b/src/Frontend/src/components/common/ErrorDisplay.tsx
new file mode 100644
index 0000000..89af6b2
--- /dev/null
+++ b/src/Frontend/src/components/common/ErrorDisplay.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import {
+ Alert,
+ AlertTitle,
+ Box,
+ Button,
+ Typography
+} from '@mui/material';
+import { Refresh as RefreshIcon } from '@mui/icons-material';
+
+interface ErrorDisplayProps {
+ message?: string;
+ error?: Error | null;
+ onRetry?: () => void;
+}
+
+export const ErrorDisplay: React.FC = ({
+ message = 'An error occurred',
+ error,
+ onRetry
+}) => {
+ return (
+
+
+ Error
+
+ {message}
+
+ {error && (
+
+ {error.message}
+
+ )}
+ {onRetry && (
+
+ }
+ onClick={onRetry}
+ variant="outlined"
+ size="small"
+ >
+ Try Again
+
+
+ )}
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/Frontend/src/components/common/LoadingSpinner.tsx b/src/Frontend/src/components/common/LoadingSpinner.tsx
new file mode 100644
index 0000000..29fb511
--- /dev/null
+++ b/src/Frontend/src/components/common/LoadingSpinner.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Box, CircularProgress, Typography } from '@mui/material';
+
+interface LoadingSpinnerProps {
+ message?: string;
+ size?: number;
+}
+
+export const LoadingSpinner: React.FC = ({
+ message = 'Loading...',
+ size = 40
+}) => {
+ return (
+
+
+ {message && (
+
+ {message}
+
+ )}
+
+ );
+};
\ No newline at end of file
diff --git a/src/Frontend/src/components/common/ProgressBar.tsx b/src/Frontend/src/components/common/ProgressBar.tsx
new file mode 100644
index 0000000..a4bb41d
--- /dev/null
+++ b/src/Frontend/src/components/common/ProgressBar.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+ Box,
+ LinearProgress,
+ Typography,
+ Paper,
+ Chip,
+} from '@mui/material';
+import { StepStatus } from '../../types';
+
+interface ProgressBarProps {
+ progress: number;
+ status?: StepStatus;
+ stepName?: string;
+ details?: string;
+ showPercentage?: boolean;
+}
+
+export const ProgressBar: React.FC = ({
+ progress,
+ status,
+ stepName,
+ details,
+ showPercentage = true,
+}) => {
+ const getProgressColor = (status?: StepStatus): 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' => {
+ switch (status) {
+ case StepStatus.Completed:
+ return 'success';
+ case StepStatus.Failed:
+ return 'error';
+ case StepStatus.InProgress:
+ return 'primary';
+ default:
+ return 'primary';
+ }
+ };
+
+ return (
+
+
+
+ {stepName && (
+
+ {stepName}
+
+ )}
+ {status && (
+
+ )}
+
+ {showPercentage && (
+
+ {Math.round(progress)}%
+
+ )}
+
+
+
+
+ {details && (
+
+ {details}
+
+ )}
+
+ );
+};
\ No newline at end of file
diff --git a/src/Frontend/src/components/common/StatusChip.tsx b/src/Frontend/src/components/common/StatusChip.tsx
new file mode 100644
index 0000000..d4f6fd1
--- /dev/null
+++ b/src/Frontend/src/components/common/StatusChip.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import { Chip, ChipProps } from '@mui/material';
+import {
+ BuildStatus,
+ PackageStatus,
+ PublicationStatus,
+ StepStatus
+} from '../../types';
+
+interface StatusChipProps extends Omit {
+ status: BuildStatus | PackageStatus | PublicationStatus | StepStatus;
+}
+
+export const StatusChip: React.FC = ({ status, ...props }) => {
+ const getStatusColor = (status: string): ChipProps['color'] => {
+ switch (status) {
+ case BuildStatus.Success:
+ case PackageStatus.Published:
+ case PublicationStatus.Completed:
+ case StepStatus.Completed:
+ return 'success';
+
+ case BuildStatus.Failure:
+ case PackageStatus.Failed:
+ case PublicationStatus.Failed:
+ case StepStatus.Failed:
+ return 'error';
+
+ case BuildStatus.InProgress:
+ case PackageStatus.Publishing:
+ case PublicationStatus.InProgress:
+ case StepStatus.InProgress:
+ return 'info';
+
+ case PackageStatus.Ready:
+ case PublicationStatus.Queued:
+ case StepStatus.Pending:
+ return 'warning';
+
+ case PackageStatus.Draft:
+ case PublicationStatus.Cancelled:
+ case StepStatus.Skipped:
+ return 'default';
+
+ default:
+ return 'default';
+ }
+ };
+
+ const getStatusIcon = (status: string) => {
+ switch (status) {
+ case BuildStatus.InProgress:
+ case PackageStatus.Publishing:
+ case PublicationStatus.InProgress:
+ case StepStatus.InProgress:
+ return '🔄';
+
+ case BuildStatus.Success:
+ case PackageStatus.Published:
+ case PublicationStatus.Completed:
+ case StepStatus.Completed:
+ return '✅';
+
+ case BuildStatus.Failure:
+ case PackageStatus.Failed:
+ case PublicationStatus.Failed:
+ case StepStatus.Failed:
+ return '❌';
+
+ default:
+ return undefined;
+ }
+ };
+
+ const icon = getStatusIcon(status);
+
+ return (
+
+ );
+};
\ No newline at end of file
diff --git a/src/Frontend/src/contexts/QueryProvider.tsx b/src/Frontend/src/contexts/QueryProvider.tsx
new file mode 100644
index 0000000..e7b727d
--- /dev/null
+++ b/src/Frontend/src/contexts/QueryProvider.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+
+const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ retry: 3,
+ staleTime: 5 * 60 * 1000, // 5 minutes
+ refetchOnWindowFocus: false,
+ },
+ },
+});
+
+interface QueryProviderProps {
+ children: React.ReactNode;
+}
+
+export const QueryProvider: React.FC = ({ children }) => {
+ return (
+
+ {children}
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/Frontend/src/hooks/usePackages.ts b/src/Frontend/src/hooks/usePackages.ts
new file mode 100644
index 0000000..6b5c54f
--- /dev/null
+++ b/src/Frontend/src/hooks/usePackages.ts
@@ -0,0 +1,76 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { packageService } from '../services/packageService';
+import {
+ Package,
+ CreatePackageRequest,
+ PackageFilter,
+ PaginatedResponse
+} from '../types';
+
+export const usePackages = (
+ page: number = 1,
+ pageSize: number = 10,
+ filter?: PackageFilter
+) => {
+ return useQuery>({
+ queryKey: ['packages', page, pageSize, filter],
+ queryFn: () => packageService.getPackages(page, pageSize, filter),
+ keepPreviousData: true,
+ });
+};
+
+export const usePackage = (id: number) => {
+ return useQuery({
+ queryKey: ['package', id],
+ queryFn: () => packageService.getPackage(id),
+ enabled: !!id,
+ });
+};
+
+export const useCreatePackage = () => {
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ mutationFn: (request: CreatePackageRequest) => packageService.createPackage(request),
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['packages'] });
+ },
+ });
+};
+
+export const useUpdatePackage = () => {
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ mutationFn: ({ id, request }: { id: number; request: Partial }) =>
+ packageService.updatePackage(id, request),
+ onSuccess: (_, { id }) => {
+ queryClient.invalidateQueries({ queryKey: ['package', id] });
+ queryClient.invalidateQueries({ queryKey: ['packages'] });
+ },
+ });
+};
+
+export const useDeletePackage = () => {
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ mutationFn: (id: number) => packageService.deletePackage(id),
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['packages'] });
+ },
+ });
+};
+
+export const usePublishPackage = () => {
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ mutationFn: ({ packageId, buildId }: { packageId: number; buildId: number }) =>
+ packageService.publishPackage(packageId, buildId),
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['packages'] });
+ queryClient.invalidateQueries({ queryKey: ['publications'] });
+ },
+ });
+};
\ No newline at end of file
diff --git a/src/Frontend/src/hooks/useProjects.ts b/src/Frontend/src/hooks/useProjects.ts
new file mode 100644
index 0000000..bc91188
--- /dev/null
+++ b/src/Frontend/src/hooks/useProjects.ts
@@ -0,0 +1,56 @@
+import { useQuery } from '@tanstack/react-query';
+import { projectService } from '../services/projectService';
+import { BuildFilter } from '../types';
+
+export const useProjects = () => {
+ return useQuery({
+ queryKey: ['projects'],
+ queryFn: () => projectService.getProjects(),
+ });
+};
+
+export const useProject = (id: number) => {
+ return useQuery({
+ queryKey: ['project', id],
+ queryFn: () => projectService.getProject(id),
+ enabled: !!id,
+ });
+};
+
+export const useProjectBuilds = (
+ projectId: number,
+ page: number = 1,
+ pageSize: number = 10,
+ filter?: BuildFilter
+) => {
+ return useQuery({
+ queryKey: ['project-builds', projectId, page, pageSize, filter],
+ queryFn: () => projectService.getProjectBuilds(projectId, page, pageSize, filter),
+ enabled: !!projectId,
+ keepPreviousData: true,
+ });
+};
+
+export const useBuild = (buildId: number) => {
+ return useQuery({
+ queryKey: ['build', buildId],
+ queryFn: () => projectService.getBuild(buildId),
+ enabled: !!buildId,
+ });
+};
+
+export const useBuildCommits = (buildId: number) => {
+ return useQuery({
+ queryKey: ['build-commits', buildId],
+ queryFn: () => projectService.getBuildCommits(buildId),
+ enabled: !!buildId,
+ });
+};
+
+export const useProjectStatus = () => {
+ return useQuery({
+ queryKey: ['project-status'],
+ queryFn: () => projectService.getProjectStatus(),
+ refetchInterval: 30000, // Refresh every 30 seconds
+ });
+};
\ No newline at end of file
diff --git a/src/Frontend/src/hooks/usePublications.ts b/src/Frontend/src/hooks/usePublications.ts
new file mode 100644
index 0000000..f5ba272
--- /dev/null
+++ b/src/Frontend/src/hooks/usePublications.ts
@@ -0,0 +1,58 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { publicationService } from '../services/publicationService';
+
+export const usePublications = (page: number = 1, pageSize: number = 10) => {
+ return useQuery({
+ queryKey: ['publications', page, pageSize],
+ queryFn: () => publicationService.getPublications(page, pageSize),
+ keepPreviousData: true,
+ });
+};
+
+export const usePublication = (id: number) => {
+ return useQuery({
+ queryKey: ['publication', id],
+ queryFn: () => publicationService.getPublication(id),
+ enabled: !!id,
+ });
+};
+
+export const usePublicationSteps = (publicationId: number) => {
+ return useQuery({
+ queryKey: ['publication-steps', publicationId],
+ queryFn: () => publicationService.getPublicationSteps(publicationId),
+ enabled: !!publicationId,
+ });
+};
+
+export const useActivePublications = () => {
+ return useQuery({
+ queryKey: ['active-publications'],
+ queryFn: () => publicationService.getActivePublications(),
+ refetchInterval: 5000, // Refresh every 5 seconds for active publications
+ });
+};
+
+export const useCancelPublication = () => {
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ mutationFn: (id: number) => publicationService.cancelPublication(id),
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['publications'] });
+ queryClient.invalidateQueries({ queryKey: ['active-publications'] });
+ },
+ });
+};
+
+export const useRetryPublication = () => {
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ mutationFn: (id: number) => publicationService.retryPublication(id),
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['publications'] });
+ queryClient.invalidateQueries({ queryKey: ['active-publications'] });
+ },
+ });
+};
\ No newline at end of file
diff --git a/src/Frontend/src/hooks/useSignalR.ts b/src/Frontend/src/hooks/useSignalR.ts
new file mode 100644
index 0000000..1a05029
--- /dev/null
+++ b/src/Frontend/src/hooks/useSignalR.ts
@@ -0,0 +1,88 @@
+import { useEffect, useCallback } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { signalRService } from '../services/signalRService';
+import { PublishingProgressUpdate, BuildStatusUpdate } from '../types';
+
+export const useSignalR = () => {
+ const queryClient = useQueryClient();
+
+ useEffect(() => {
+ const startConnection = async () => {
+ try {
+ await signalRService.start();
+ } catch (error) {
+ console.error('Failed to start SignalR connection:', error);
+ }
+ };
+
+ startConnection();
+
+ return () => {
+ signalRService.stop();
+ };
+ }, []);
+
+ const subscribeToPublishingProgress = useCallback(
+ (callback: (update: PublishingProgressUpdate) => void) => {
+ return signalRService.subscribe('PublishingProgress', callback);
+ },
+ []
+ );
+
+ const subscribeToBuildStatusUpdates = useCallback(
+ (callback: (update: BuildStatusUpdate) => void) => {
+ return signalRService.subscribe('BuildStatusUpdate', (update) => {
+ // Invalidate related queries when build status changes
+ queryClient.invalidateQueries({ queryKey: ['project-status'] });
+ queryClient.invalidateQueries({ queryKey: ['project-builds'] });
+ callback(update);
+ });
+ },
+ [queryClient]
+ );
+
+ const subscribeToPublicationCompleted = useCallback(
+ (callback: (publicationId: number) => void) => {
+ return signalRService.subscribe('PublicationCompleted', (publicationId) => {
+ // Invalidate publication-related queries
+ queryClient.invalidateQueries({ queryKey: ['publications'] });
+ queryClient.invalidateQueries({ queryKey: ['active-publications'] });
+ queryClient.invalidateQueries({ queryKey: ['publication', publicationId] });
+ callback(publicationId);
+ });
+ },
+ [queryClient]
+ );
+
+ const subscribeToPublicationFailed = useCallback(
+ (callback: (data: { publicationId: number; error: string }) => void) => {
+ return signalRService.subscribe<{ publicationId: number; error: string }>('PublicationFailed', (data) => {
+ // Invalidate publication-related queries
+ queryClient.invalidateQueries({ queryKey: ['publications'] });
+ queryClient.invalidateQueries({ queryKey: ['active-publications'] });
+ queryClient.invalidateQueries({ queryKey: ['publication', data.publicationId] });
+ callback(data);
+ });
+ },
+ [queryClient]
+ );
+
+ const joinPublicationGroup = useCallback(async (publicationId: number) => {
+ await signalRService.joinPublicationGroup(publicationId);
+ }, []);
+
+ const leavePublicationGroup = useCallback(async (publicationId: number) => {
+ await signalRService.leavePublicationGroup(publicationId);
+ }, []);
+
+ return {
+ isConnected: signalRService.isConnected,
+ connectionState: signalRService.connectionState,
+ subscribeToPublishingProgress,
+ subscribeToBuildStatusUpdates,
+ subscribeToPublicationCompleted,
+ subscribeToPublicationFailed,
+ joinPublicationGroup,
+ leavePublicationGroup,
+ };
+};
\ No newline at end of file
diff --git a/src/Frontend/src/main.tsx b/src/Frontend/src/main.tsx
new file mode 100644
index 0000000..c28b964
--- /dev/null
+++ b/src/Frontend/src/main.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+ ,
+)
\ No newline at end of file
diff --git a/src/Frontend/src/pages/DashboardPage.tsx b/src/Frontend/src/pages/DashboardPage.tsx
new file mode 100644
index 0000000..b7b83a7
--- /dev/null
+++ b/src/Frontend/src/pages/DashboardPage.tsx
@@ -0,0 +1,262 @@
+import React from 'react';
+import {
+ Box,
+ Typography,
+ Grid,
+ Card,
+ CardContent,
+ List,
+ ListItem,
+ ListItemText,
+ ListItemIcon,
+ Chip,
+ Paper,
+} from '@mui/material';
+import {
+ Build as BuildIcon,
+ Package as PackageIcon,
+ Publish as PublishIcon,
+ CheckCircle as SuccessIcon,
+ Error as ErrorIcon,
+ Schedule as InProgressIcon,
+} from '@mui/icons-material';
+import { usePackages } from '../hooks/usePackages';
+import { useProjectStatus } from '../hooks/useProjects';
+import { useActivePublications } from '../hooks/usePublications';
+import { StatusChip } from '../components/common/StatusChip';
+import { LoadingSpinner } from '../components/common/LoadingSpinner';
+import { ErrorDisplay } from '../components/common/ErrorDisplay';
+import { PublicationStatus, PackageStatus, BuildStatus } from '../types';
+import { format } from 'date-fns';
+
+export const DashboardPage: React.FC = () => {
+ const { data: packagesData, isLoading: packagesLoading } = usePackages(1, 5);
+ const { data: projectsData, isLoading: projectsLoading } = useProjectStatus();
+ const { data: activePublications, isLoading: publicationsLoading } = useActivePublications();
+
+ const isLoading = packagesLoading || projectsLoading || publicationsLoading;
+
+ if (isLoading) return ;
+
+ const packages = packagesData?.data || [];
+ const projects = projectsData?.data || [];
+ const publications = activePublications?.data || [];
+
+ // Calculate statistics
+ const packageStats = {
+ total: packagesData?.totalCount || 0,
+ published: packages.filter(p => p.status === PackageStatus.Published).length,
+ failed: packages.filter(p => p.status === PackageStatus.Failed).length,
+ publishing: packages.filter(p => p.status === PackageStatus.Publishing).length,
+ };
+
+ const buildStats = {
+ success: projects.filter(p => p.status === BuildStatus.Success).length,
+ failure: projects.filter(p => p.status === BuildStatus.Failure).length,
+ inProgress: projects.filter(p => p.status === BuildStatus.InProgress).length,
+ };
+
+ const publicationStats = {
+ active: publications.filter(p => p.status === PublicationStatus.InProgress).length,
+ queued: publications.filter(p => p.status === PublicationStatus.Queued).length,
+ };
+
+ return (
+
+
+ Dashboard
+
+
+ {/* Statistics Cards */}
+
+
+
+
+
+
+
+ Packages
+
+
+ {packageStats.total}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Projects
+
+
+ {projects.length}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Active Publications
+
+
+ {publicationStats.active}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ System Status
+
+
+ All Systems Operational
+
+
+
+
+
+
+
+
+
+ {/* Recent Activity */}
+
+
+
+
+
+ Recent Packages
+
+
+ {packages.length === 0 ? (
+
+
+
+ ) : (
+ packages.map((pkg) => (
+
+
+
+
+
+
+
+ ))
+ )}
+
+
+
+
+
+
+
+
+
+ Project Build Status
+
+
+ {projects.length === 0 ? (
+
+
+
+ ) : (
+ projects.slice(0, 5).map((project) => (
+
+
+ {project.status === BuildStatus.Success ? (
+
+ ) : project.status === BuildStatus.Failure ? (
+
+ ) : (
+
+ )}
+
+
+
+
+ ))
+ )}
+
+
+
+
+
+ {publications.length > 0 && (
+
+
+
+
+ Active Publications
+
+
+ {publications.map((publication) => (
+
+
+
+
+
+
+
+ ))}
+
+
+
+
+ )}
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/Frontend/src/pages/PackagesPage.tsx b/src/Frontend/src/pages/PackagesPage.tsx
new file mode 100644
index 0000000..8072244
--- /dev/null
+++ b/src/Frontend/src/pages/PackagesPage.tsx
@@ -0,0 +1,146 @@
+import React, { useState } from 'react';
+import {
+ Dialog,
+ DialogTitle,
+ DialogContent,
+ DialogActions,
+ Button,
+ Typography,
+ FormControl,
+ InputLabel,
+ Select,
+ MenuItem,
+} from '@mui/material';
+import { PackageList } from '../components/Packages/PackageList';
+import { PackageForm } from '../components/Packages/PackageForm';
+import { usePublishPackage } from '../hooks/usePackages';
+import { useProjectBuilds } from '../hooks/useProjects';
+import { Package, Build } from '../types';
+
+export const PackagesPage: React.FC = () => {
+ const [showCreateForm, setShowCreateForm] = useState(false);
+ const [editingPackage, setEditingPackage] = useState(null);
+ const [publishingPackage, setPublishingPackage] = useState(null);
+ const [selectedBuildId, setSelectedBuildId] = useState(0);
+
+ const publishMutation = usePublishPackage();
+ const { data: buildsData } = useProjectBuilds(
+ publishingPackage?.projectId || 0,
+ 1,
+ 50,
+ { status: 'Success' }
+ );
+
+ const handleCreatePackage = () => {
+ setShowCreateForm(true);
+ };
+
+ const handleEditPackage = (packageItem: Package) => {
+ setEditingPackage(packageItem);
+ };
+
+ const handlePublishPackage = (packageItem: Package) => {
+ setPublishingPackage(packageItem);
+ setSelectedBuildId(packageItem.sourceBuildId);
+ };
+
+ const handleCloseCreateForm = () => {
+ setShowCreateForm(false);
+ };
+
+ const handleCloseEditForm = () => {
+ setEditingPackage(null);
+ };
+
+ const handleConfirmPublish = async () => {
+ if (publishingPackage && selectedBuildId) {
+ try {
+ await publishMutation.mutateAsync({
+ packageId: publishingPackage.id,
+ buildId: selectedBuildId,
+ });
+ setPublishingPackage(null);
+ setSelectedBuildId(0);
+ } catch (error) {
+ console.error('Failed to publish package:', error);
+ }
+ }
+ };
+
+ const handleCancelPublish = () => {
+ setPublishingPackage(null);
+ setSelectedBuildId(0);
+ };
+
+ const builds = buildsData?.data || [];
+
+ return (
+ <>
+
+
+ {/* Create Package Form */}
+
+
+ {/* Edit Package Form */}
+
+
+ {/* Publish Package Dialog */}
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/Frontend/src/pages/PublishingPage.tsx b/src/Frontend/src/pages/PublishingPage.tsx
new file mode 100644
index 0000000..5c4c1de
--- /dev/null
+++ b/src/Frontend/src/pages/PublishingPage.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { PublishingDashboard } from '../components/Publishing/PublishingDashboard';
+
+export const PublishingPage: React.FC = () => {
+ return ;
+};
\ No newline at end of file
diff --git a/src/Frontend/src/services/api.ts b/src/Frontend/src/services/api.ts
new file mode 100644
index 0000000..e7e6648
--- /dev/null
+++ b/src/Frontend/src/services/api.ts
@@ -0,0 +1,74 @@
+import axios, { AxiosInstance, AxiosResponse } from 'axios';
+import { ApiResponse, PaginatedResponse } from '../types';
+
+class ApiClient {
+ private client: AxiosInstance;
+
+ constructor() {
+ this.client = axios.create({
+ baseURL: '/api',
+ timeout: 10000,
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ });
+
+ this.setupInterceptors();
+ }
+
+ private setupInterceptors() {
+ // Request interceptor to add auth token
+ this.client.interceptors.request.use(
+ (config) => {
+ const token = localStorage.getItem('authToken');
+ if (token) {
+ config.headers.Authorization = `Bearer ${token}`;
+ }
+ return config;
+ },
+ (error) => Promise.reject(error)
+ );
+
+ // Response interceptor for error handling
+ this.client.interceptors.response.use(
+ (response: AxiosResponse) => response,
+ (error) => {
+ if (error.response?.status === 401) {
+ localStorage.removeItem('authToken');
+ window.location.href = '/login';
+ }
+ return Promise.reject(error);
+ }
+ );
+ }
+
+ async get(url: string, params?: Record): Promise> {
+ const response = await this.client.get(url, { params });
+ return response.data;
+ }
+
+ async post(url: string, data?: any): Promise> {
+ const response = await this.client.post(url, data);
+ return response.data;
+ }
+
+ async put(url: string, data?: any): Promise> {
+ const response = await this.client.put(url, data);
+ return response.data;
+ }
+
+ async delete(url: string): Promise> {
+ const response = await this.client.delete(url);
+ return response.data;
+ }
+
+ async getPaginated(
+ url: string,
+ params?: Record
+ ): Promise> {
+ const response = await this.client.get(url, { params });
+ return response.data;
+ }
+}
+
+export const apiClient = new ApiClient();
\ No newline at end of file
diff --git a/src/Frontend/src/services/packageService.ts b/src/Frontend/src/services/packageService.ts
new file mode 100644
index 0000000..369f42f
--- /dev/null
+++ b/src/Frontend/src/services/packageService.ts
@@ -0,0 +1,42 @@
+import { apiClient } from './api';
+import {
+ Package,
+ CreatePackageRequest,
+ PackageFilter,
+ PaginatedResponse,
+ ApiResponse
+} from '../types';
+
+export const packageService = {
+ async getPackages(
+ page: number = 1,
+ pageSize: number = 10,
+ filter?: PackageFilter
+ ): Promise> {
+ return apiClient.getPaginated('/packages', {
+ page,
+ pageSize,
+ ...filter,
+ });
+ },
+
+ async getPackage(id: number): Promise> {
+ return apiClient.get(`/packages/${id}`);
+ },
+
+ async createPackage(request: CreatePackageRequest): Promise> {
+ return apiClient.post('/packages', request);
+ },
+
+ async updatePackage(id: number, request: Partial): Promise> {
+ return apiClient.put(`/packages/${id}`, request);
+ },
+
+ async deletePackage(id: number): Promise> {
+ return apiClient.delete(`/packages/${id}`);
+ },
+
+ async publishPackage(packageId: number, buildId: number): Promise> {
+ return apiClient.post(`/packages/${packageId}/publish`, { buildId });
+ },
+};
\ No newline at end of file
diff --git a/src/Frontend/src/services/projectService.ts b/src/Frontend/src/services/projectService.ts
new file mode 100644
index 0000000..229a989
--- /dev/null
+++ b/src/Frontend/src/services/projectService.ts
@@ -0,0 +1,44 @@
+import { apiClient } from './api';
+import {
+ Project,
+ Build,
+ BuildCommit,
+ BuildFilter,
+ PaginatedResponse,
+ ApiResponse
+} from '../types';
+
+export const projectService = {
+ async getProjects(): Promise> {
+ return apiClient.get('/projects');
+ },
+
+ async getProject(id: number): Promise> {
+ return apiClient.get(`/projects/${id}`);
+ },
+
+ async getProjectBuilds(
+ projectId: number,
+ page: number = 1,
+ pageSize: number = 10,
+ filter?: BuildFilter
+ ): Promise> {
+ return apiClient.getPaginated(`/projects/${projectId}/builds`, {
+ page,
+ pageSize,
+ ...filter,
+ });
+ },
+
+ async getBuild(buildId: number): Promise> {
+ return apiClient.get(`/builds/${buildId}`);
+ },
+
+ async getBuildCommits(buildId: number): Promise> {
+ return apiClient.get(`/builds/${buildId}/commits`);
+ },
+
+ async getProjectStatus(): Promise> {
+ return apiClient.get('/projects/status');
+ },
+};
\ No newline at end of file
diff --git a/src/Frontend/src/services/publicationService.ts b/src/Frontend/src/services/publicationService.ts
new file mode 100644
index 0000000..e3771b0
--- /dev/null
+++ b/src/Frontend/src/services/publicationService.ts
@@ -0,0 +1,36 @@
+import { apiClient } from './api';
+import {
+ Publication,
+ PublishingStep,
+ PaginatedResponse,
+ ApiResponse
+} from '../types';
+
+export const publicationService = {
+ async getPublications(
+ page: number = 1,
+ pageSize: number = 10
+ ): Promise> {
+ return apiClient.getPaginated('/publications', { page, pageSize });
+ },
+
+ async getPublication(id: number): Promise> {
+ return apiClient.get(`/publications/${id}`);
+ },
+
+ async getPublicationSteps(publicationId: number): Promise> {
+ return apiClient.get(`/publications/${publicationId}/steps`);
+ },
+
+ async getActivePublications(): Promise> {
+ return apiClient.get('/publications/active');
+ },
+
+ async cancelPublication(id: number): Promise> {
+ return apiClient.post(`/publications/${id}/cancel`);
+ },
+
+ async retryPublication(id: number): Promise> {
+ return apiClient.post(`/publications/${id}/retry`);
+ },
+};
\ No newline at end of file
diff --git a/src/Frontend/src/services/signalRService.ts b/src/Frontend/src/services/signalRService.ts
new file mode 100644
index 0000000..229a7b9
--- /dev/null
+++ b/src/Frontend/src/services/signalRService.ts
@@ -0,0 +1,108 @@
+import * as signalR from '@microsoft/signalr';
+import { PublishingProgressUpdate, BuildStatusUpdate } from '../types';
+
+export class SignalRService {
+ private connection: signalR.HubConnection | null = null;
+ private listeners: Map void>> = new Map();
+
+ async start(): Promise {
+ if (this.connection?.state === signalR.HubConnectionState.Connected) {
+ return;
+ }
+
+ this.connection = new signalR.HubConnectionBuilder()
+ .withUrl('/hubs/publishing', {
+ accessTokenFactory: () => localStorage.getItem('authToken') || '',
+ })
+ .withAutomaticReconnect()
+ .build();
+
+ this.setupEventHandlers();
+
+ try {
+ await this.connection.start();
+ console.log('SignalR connected successfully');
+ } catch (error) {
+ console.error('SignalR connection failed:', error);
+ throw error;
+ }
+ }
+
+ async stop(): Promise {
+ if (this.connection) {
+ await this.connection.stop();
+ this.connection = null;
+ this.listeners.clear();
+ }
+ }
+
+ private setupEventHandlers(): void {
+ if (!this.connection) return;
+
+ // Publishing progress updates
+ this.connection.on('PublishingProgress', (update: PublishingProgressUpdate) => {
+ this.notifyListeners('PublishingProgress', update);
+ });
+
+ // Build status updates
+ this.connection.on('BuildStatusUpdate', (update: BuildStatusUpdate) => {
+ this.notifyListeners('BuildStatusUpdate', update);
+ });
+
+ // Publication completed
+ this.connection.on('PublicationCompleted', (publicationId: number) => {
+ this.notifyListeners('PublicationCompleted', publicationId);
+ });
+
+ // Publication failed
+ this.connection.on('PublicationFailed', (data: { publicationId: number; error: string }) => {
+ this.notifyListeners('PublicationFailed', data);
+ });
+ }
+
+ private notifyListeners(event: string, data: any): void {
+ const eventListeners = this.listeners.get(event);
+ if (eventListeners) {
+ eventListeners.forEach(callback => callback(data));
+ }
+ }
+
+ subscribe(event: string, callback: (data: T) => void): () => void {
+ if (!this.listeners.has(event)) {
+ this.listeners.set(event, new Set());
+ }
+
+ const eventListeners = this.listeners.get(event)!;
+ eventListeners.add(callback);
+
+ // Return unsubscribe function
+ return () => {
+ eventListeners.delete(callback);
+ if (eventListeners.size === 0) {
+ this.listeners.delete(event);
+ }
+ };
+ }
+
+ async joinPublicationGroup(publicationId: number): Promise {
+ if (this.connection?.state === signalR.HubConnectionState.Connected) {
+ await this.connection.invoke('JoinPublicationGroup', publicationId.toString());
+ }
+ }
+
+ async leavePublicationGroup(publicationId: number): Promise {
+ if (this.connection?.state === signalR.HubConnectionState.Connected) {
+ await this.connection.invoke('LeavePublicationGroup', publicationId.toString());
+ }
+ }
+
+ get connectionState(): signalR.HubConnectionState {
+ return this.connection?.state || signalR.HubConnectionState.Disconnected;
+ }
+
+ get isConnected(): boolean {
+ return this.connection?.state === signalR.HubConnectionState.Connected;
+ }
+}
+
+export const signalRService = new SignalRService();
\ No newline at end of file
diff --git a/src/Frontend/src/types/index.ts b/src/Frontend/src/types/index.ts
new file mode 100644
index 0000000..8bc6d59
--- /dev/null
+++ b/src/Frontend/src/types/index.ts
@@ -0,0 +1,222 @@
+// Core domain types based on implementation.md architecture
+
+export interface User {
+ id: number;
+ username: string;
+ role: string;
+ createdAt: string;
+ lastLogin: string;
+}
+
+export interface Project {
+ id: number;
+ name: string;
+ description: string;
+ ccNetProjectName: string;
+ status: string;
+ createdAt: string;
+ updatedAt: string;
+}
+
+export interface Build {
+ id: number;
+ projectId: number;
+ buildNumber: string;
+ status: BuildStatus;
+ startTime: string;
+ endTime: string;
+ logPath: string;
+ artifactPath: string;
+}
+
+export enum BuildStatus {
+ Success = 'Success',
+ Failure = 'Failure',
+ InProgress = 'InProgress',
+ Unknown = 'Unknown'
+}
+
+export interface BuildCommit {
+ id: number;
+ buildId: number;
+ commitHash: string;
+ comment: string;
+ user: string;
+ commitDate: string;
+ fogBugzCaseId?: string;
+ modifiedFiles: string[];
+ releaseNote?: string;
+}
+
+export interface Package {
+ id: number;
+ title: string;
+ version: string;
+ description: string;
+ projectId: number;
+ sourceBuildId: number;
+ status: PackageStatus;
+ publishDate?: string;
+ createdAt: string;
+ updatedAt: string;
+ project?: Project;
+ sourceBuild?: Build;
+ configuration?: PackageConfiguration;
+}
+
+export enum PackageStatus {
+ Draft = 'Draft',
+ Ready = 'Ready',
+ Publishing = 'Publishing',
+ Published = 'Published',
+ Failed = 'Failed'
+}
+
+export interface PackageConfiguration {
+ id: number;
+ packageId: number;
+ buildFolder: string;
+ zipContents: boolean;
+ deleteOldPublishedBuilds: boolean;
+ releaseNoteTemplate: string;
+ storageSettings: Record;
+ helpCenterSettings: Record;
+ createdAt: string;
+ updatedAt: string;
+}
+
+export interface FogBugzCase {
+ id: number;
+ caseId: number;
+ title: string;
+ project: string;
+ area: string;
+ status: string;
+ lastUpdated: string;
+ isOpen: boolean;
+ events?: FogBugzEvent[];
+}
+
+export interface FogBugzEvent {
+ id: number;
+ caseId: number;
+ eventType: string;
+ user: string;
+ comment: string;
+ statusString: string;
+ eventDate: string;
+ releaseNote?: string;
+ zendeskNumber?: number;
+}
+
+export interface Publication {
+ id: number;
+ packageId: number;
+ status: PublicationStatus;
+ publishedAt?: string;
+ releaseNotesPath?: string;
+ publicationDetails: Record;
+ steps?: PublishingStep[];
+ package?: Package;
+}
+
+export enum PublicationStatus {
+ Queued = 'Queued',
+ InProgress = 'InProgress',
+ Completed = 'Completed',
+ Failed = 'Failed',
+ Cancelled = 'Cancelled'
+}
+
+export interface PublishingStep {
+ id: number;
+ publicationId: number;
+ stepName: string;
+ status: StepStatus;
+ details?: string;
+ startedAt?: string;
+ completedAt?: string;
+ progressPercent: number;
+}
+
+export enum StepStatus {
+ Pending = 'Pending',
+ InProgress = 'InProgress',
+ Completed = 'Completed',
+ Failed = 'Failed',
+ Skipped = 'Skipped'
+}
+
+// API Response types
+export interface ApiResponse {
+ data: T;
+ success: boolean;
+ message?: string;
+ errors?: string[];
+}
+
+export interface PaginatedResponse {
+ data: T[];
+ totalCount: number;
+ pageSize: number;
+ currentPage: number;
+ totalPages: number;
+}
+
+// SignalR Hub types
+export interface PublishingProgressUpdate {
+ publicationId: number;
+ stepName: string;
+ progressPercent: number;
+ status: StepStatus;
+ details?: string;
+ timestamp: string;
+}
+
+export interface BuildStatusUpdate {
+ projectId: number;
+ buildId: number;
+ status: BuildStatus;
+ buildNumber: string;
+ timestamp: string;
+}
+
+// Form types
+export interface CreatePackageRequest {
+ title: string;
+ version: string;
+ description: string;
+ projectId: number;
+ sourceBuildId: number;
+ configuration: {
+ buildFolder: string;
+ zipContents: boolean;
+ deleteOldPublishedBuilds: boolean;
+ releaseNoteTemplate: string;
+ storageSettings: Record;
+ helpCenterSettings: Record;
+ };
+}
+
+export interface PublishPackageRequest {
+ packageId: number;
+ buildId: number;
+}
+
+// Filter and search types
+export interface PackageFilter {
+ projectId?: number;
+ status?: PackageStatus;
+ searchTerm?: string;
+ dateFrom?: string;
+ dateTo?: string;
+}
+
+export interface BuildFilter {
+ projectId?: number;
+ status?: BuildStatus;
+ user?: string;
+ searchTerm?: string;
+ dateFrom?: string;
+ dateTo?: string;
+}
\ No newline at end of file
diff --git a/src/Frontend/tsconfig.json b/src/Frontend/tsconfig.json
new file mode 100644
index 0000000..597bb76
--- /dev/null
+++ b/src/Frontend/tsconfig.json
@@ -0,0 +1,36 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true,
+
+ /* Path mapping */
+ "baseUrl": "./src",
+ "paths": {
+ "@/*": ["*"],
+ "@/components/*": ["components/*"],
+ "@/hooks/*": ["hooks/*"],
+ "@/services/*": ["services/*"],
+ "@/types/*": ["types/*"],
+ "@/utils/*": ["utils/*"]
+ }
+ },
+ "include": ["src"],
+ "references": [{ "path": "./tsconfig.node.json" }]
+}
\ No newline at end of file
diff --git a/src/Frontend/tsconfig.node.json b/src/Frontend/tsconfig.node.json
new file mode 100644
index 0000000..c0febd3
--- /dev/null
+++ b/src/Frontend/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "skipLibCheck": true,
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "allowSyntheticDefaultImports": true
+ },
+ "include": ["vite.config.ts"]
+}
\ No newline at end of file
diff --git a/src/Frontend/vite.config.ts b/src/Frontend/vite.config.ts
new file mode 100644
index 0000000..80dc218
--- /dev/null
+++ b/src/Frontend/vite.config.ts
@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [react()],
+ server: {
+ port: 3000,
+ proxy: {
+ '/api': {
+ target: 'http://localhost:5000',
+ changeOrigin: true,
+ secure: false,
+ },
+ '/hubs': {
+ target: 'http://localhost:5000',
+ changeOrigin: true,
+ secure: false,
+ ws: true,
+ },
+ },
+ },
+ build: {
+ outDir: 'dist',
+ },
+})
\ No newline at end of file