docs: Update README with file metadata tracking details

- Add new section describing file metadata tracking features
- Include screenshot for file metadata view
- Expand feature list with comprehensive metadata management capabilities
- Update user guide with instructions for managing file metadata
- Remove Font Awesome icons from status badges in components
- Improve layout and styling for mobile responsiveness

README.md

@@ -19,6 +19,10 @@ GoMFT is a web-based managed file transfer application built with Go, leveraging
 ![Job Scheduling](screenshots/new.job.gomft.png)
 *Scheduling transfers with flexible cron expressions*
 
+### File Metadata
+![File Metadata](screenshots/file.metadata.gomft.png)
+*Track and manage file metadata with detailed information about transferred files*
+
 ### User Management
 ![User Management](screenshots/user.management.gomft.png)
 *Create user accounts and manage them*
@@ -39,6 +43,16 @@ GoMFT is a web-based managed file transfer application built with Go, leveraging
   - And more via rclone
 - **Scheduled Transfers**: Configure transfers using cron expressions with flexible scheduling options
 - **Transfer Monitoring**: Real-time status updates and detailed transfer logs with bytes and files transferred statistics
+- **File Metadata Tracking**: Complete history and status of all transferred files with detailed information:
+  - Process status (processed, archived, deleted)
+  - File size and hash information
+  - Advanced search and filtering capabilities
+  - Metadata retention for compliance and auditing
+  - Detailed file view with processing timestamps and job association
+  - Powerful filtering by status, filename, job, and date ranges
+  - Advanced search interface with multiple criteria
+  - Bulk management and record deletion capabilities
+  - Responsive design with mobile-friendly interface
 - **Web Interface**: User-friendly interface for managing transfers, built with Templ components
 - **File Pattern Matching**: Support for file patterns to filter files during transfers
 - **File Output Patterns**: Dynamic naming of destination files using patterns with date variables
@@ -201,6 +215,14 @@ GoMFT uses a configuration file located at `./data/gomft/config.json`. On first
    - Check detailed transfer history with performance metrics
    - View job run details including any error messages
 
+7. Manage file metadata:
+   - Navigate to the "Files" section to view all processed files
+   - Use filters to quickly find files by status, job ID, or filename
+   - Click on any file to view detailed metadata including timestamps, size, and hash
+   - Use the advanced search page for complex queries with multiple criteria
+   - Delete file metadata records when no longer needed
+   - View files associated with specific jobs by navigating from the job details
+
 ### User Management
 
 GoMFT uses a role-based access control system:

components/history.templ

@@ -50,15 +50,15 @@ templ HistoryContent(ctx context.Context, data HistoryData) {
 									<p class="text-sm font-medium text-primary-600 dark:text-primary-400 truncate">{ history.Job.Config.Name }</p>
 									if history.Status == "completed" {
 										<span class="ml-2 px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-300">
-											<i class="fas fa-check mr-1"></i> Completed
+											Completed
 										</span>
 									} else if history.Status == "failed" {
 										<span class="ml-2 px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-300">
-											<i class="fas fa-times mr-1"></i> Failed
+											Failed
 										</span>
 									} else {
 										<span class="ml-2 px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-300">
-											<i class="fas fa-sync-alt mr-1"></i> { history.Status }
+											{ history.Status }
 										</span>
 									}
 								</div>

components/jobs.templ

@@ -288,12 +288,10 @@ templ Jobs(ctx context.Context, data JobsData) {
 														</p>
 														if job.Enabled {
 															<span class="ml-2 px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-300">
-																<i class="fas fa-check-circle mr-1"></i>
 																Active
 															</span>
 														} else {
 															<span class="ml-2 px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-secondary-100 dark:bg-secondary-700 text-secondary-800 dark:text-secondary-300">
-																<i class="fas fa-pause-circle mr-1"></i>
 																Inactive
 															</span>
 														}

components/layout.templ

@@ -29,7 +29,7 @@ templ Layout(title string) {
 
 templ LayoutWithContext(title string, ctx context.Context) {
 	<!DOCTYPE html>
-	<html lang="en" class="light h-full">
+	<html lang="en" class="light h-full p-0 m-0">
 		<head>
 			<meta charset="UTF-8"/>
 			<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/>
@@ -128,6 +128,14 @@ templ LayoutWithContext(title string, ctx context.Context) {
 				}
 			</script>
 			<style type="text/tailwindcss">
+				/* Reset default browser margins and padding */
+				html, body {
+					margin: 0;
+					padding: 0;
+					overflow-x: hidden; /* Prevent horizontal scrolling */
+					width: 100%;
+				}
+				
 				@layer components {
 					.btn-primary {
 						@apply px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-all duration-200 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
@@ -277,9 +285,9 @@ templ LayoutWithContext(title string, ctx context.Context) {
 			</style>
 			<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
 		</head>
-		<body class="min-h-screen flex flex-col bg-secondary-50 dark:bg-secondary-900 h-full">
+		<body class="min-h-screen flex flex-col bg-secondary-50 dark:bg-secondary-900 h-full p-0 m-0">
 			if isLoggedIn(ctx) {
-				<nav class="bg-white dark:bg-secondary-800 shadow-sm sticky top-0 z-10">
+				<nav class="bg-white dark:bg-secondary-800 shadow-sm sticky top-0 z-10 w-full">
 					<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 						<div class="flex justify-between h-16">
 							<div class="flex">
@@ -381,9 +389,9 @@ templ LayoutWithContext(title string, ctx context.Context) {
 					x-transition:leave="transition ease-in duration-150"
 					x-transition:leave-start="opacity-100 transform translate-y-0"
 					x-transition:leave-end="opacity-0 transform -translate-y-2"
-					class="sm:hidden bg-white dark:bg-secondary-800 shadow-md"
+					class="sm:hidden bg-white dark:bg-secondary-800 shadow-md w-full left-0 right-0"
 				>
-					<div class="px-2 pt-2 pb-3 space-y-1">
+					<div class="max-w-7xl mx-auto px-2 pt-2 pb-3 space-y-1">
 						<a href="/dashboard" class="block px-3 py-2 rounded-md text-base font-medium text-secondary-700 dark:text-secondary-300 hover:bg-primary-50 dark:hover:bg-secondary-700 hover:text-primary-600 dark:hover:text-primary-400">
 							<i class="fas fa-tachometer-alt mr-2"></i> Dashboard
 						</a>
@@ -434,8 +442,8 @@ templ LayoutWithContext(title string, ctx context.Context) {
 			
 			if isLoggedIn(ctx) {
 				<!-- Mobile Bottom Navigation -->
-				<div class="sm:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-secondary-800 border-t border-secondary-200 dark:border-secondary-700 shadow-lg mobile-nav-container z-10">
+				<div class="sm:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-secondary-800 border-t border-secondary-200 dark:border-secondary-700 shadow-lg w-full p-0 m-0">
-					<div class="grid grid-cols-5 h-16">
+					<div class="grid grid-cols-6 h-16">
 						<a href="/dashboard" class="flex flex-col items-center justify-center text-secondary-500 dark:text-secondary-400 hover:text-primary-600 dark:hover:text-primary-400">
 							<i class="fas fa-tachometer-alt text-lg"></i>
 							<span class="text-xs mt-1">Dashboard</span>