feat: Implement revenue/profit recap and fixes

- Added a hover-over recap for total revenue and profit, displaying contributing jobs in a popup.
- Fixed the issue where the lower parts of letters in job names were cut off.
- Implemented job ID copy-to-clipboard functionality on click.

src/pages/Index.tsx

@@ -10,6 +10,7 @@ import { IndJob } from '@/lib/types';
 import BatchTransactionForm from '@/components/BatchTransactionForm';
 import { useJobs } from '@/hooks/useDataService';
 import SearchOverlay from '@/components/SearchOverlay';
+import RecapPopover from '@/components/RecapPopover';
 
 const Index = () => {
   const {
@@ -119,6 +120,15 @@ const Index = () => {
     sum + job.income.reduce((sum, tx) => sum + tx.totalPrice, 0), 0
   );
 
+  const calculateJobRevenue = (job: IndJob) => 
+    job.income.reduce((sum, tx) => sum + tx.totalPrice, 0);
+
+  const calculateJobProfit = (job: IndJob) => {
+    const expenditure = job.expenditures.reduce((sum, tx) => sum + tx.totalPrice, 0);
+    const income = job.income.reduce((sum, tx) => sum + tx.totalPrice, 0);
+    return income - expenditure;
+  };
+
   const handleCreateJob = async (jobData: IndJobRecordNoId) => {
     try {
       await createJob(jobData);
@@ -254,7 +264,15 @@ const Index = () => {
             </CardTitle>
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold text-green-400">{formatISK(totalRevenue)}</div>
+            <RecapPopover
+              title="Revenue Breakdown"
+              jobs={regularJobs}
+              calculateJobValue={calculateJobRevenue}
+            >
+              <div className="text-2xl font-bold text-green-400 cursor-pointer hover:text-green-300 transition-colors">
+                {formatISK(totalRevenue)}
+              </div>
+            </RecapPopover>
           </CardContent>
         </Card>
         <Card className="bg-gray-900 border-gray-700 text-white">
@@ -265,9 +283,15 @@ const Index = () => {
             </CardTitle>
           </CardHeader>
           <CardContent>
-            <div className={`text-2xl font-bold ${totalProfit >= 0 ? 'text-green-400' : 'text-red-400'}`}>
-              {formatISK(totalProfit)}
-            </div>
+            <RecapPopover
+              title="Profit Breakdown"
+              jobs={regularJobs}
+              calculateJobValue={calculateJobProfit}
+            >
+              <div className={`text-2xl font-bold cursor-pointer transition-colors ${totalProfit >= 0 ? 'text-green-400 hover:text-green-300' : 'text-red-400 hover:text-red-300'}`}>
+                {formatISK(totalProfit)}
+              </div>
+            </RecapPopover>
           </CardContent>
         </Card>
       </div>