applayout added, sidebar updated
This commit is contained in:
@@ -1,6 +1,4 @@
|
||||
import { useState } from "react";
|
||||
import { TopAppBar } from "@/components/layout/top-app-bar";
|
||||
import { Sidebar } from "@/components/layout/sidebar";
|
||||
import {
|
||||
Card,
|
||||
CardHeader,
|
||||
@@ -10,12 +8,7 @@ import {
|
||||
} from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import {
|
||||
DollarSign,
|
||||
Upload,
|
||||
Image,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import { DollarSign, Upload, Image, X } from "lucide-react";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
@@ -116,228 +109,217 @@ export default function PaymentsPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden bg-gray-100">
|
||||
<Sidebar
|
||||
isMobileOpen={isMobileMenuOpen}
|
||||
setIsMobileOpen={setIsMobileMenuOpen}
|
||||
/>
|
||||
<div>
|
||||
{/* Header */}
|
||||
<div className="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold text-gray-800">Payments</h1>
|
||||
<p className="text-gray-600">
|
||||
Manage patient payments and outstanding balances
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex flex-col overflow-hidden">
|
||||
<TopAppBar toggleMobileMenu={toggleMobileMenu} />
|
||||
<div className="mt-4 md:mt-0 flex items-center space-x-2">
|
||||
<Select
|
||||
defaultValue="all-time"
|
||||
onValueChange={(value) => setPaymentPeriod(value)}
|
||||
>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue placeholder="Select period" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all-time">All Time</SelectItem>
|
||||
<SelectItem value="this-month">This Month</SelectItem>
|
||||
<SelectItem value="last-month">Last Month</SelectItem>
|
||||
<SelectItem value="last-90-days">Last 90 Days</SelectItem>
|
||||
<SelectItem value="this-year">This Year</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main className="flex-1 overflow-y-auto p-4">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold text-gray-800">Payments</h1>
|
||||
<p className="text-gray-600">
|
||||
Manage patient payments and outstanding balances
|
||||
</p>
|
||||
{/* Payment Summary Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium text-gray-500">
|
||||
Outstanding Balance
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center">
|
||||
<DollarSign className="h-5 w-5 text-yellow-500 mr-2" />
|
||||
<div className="text-2xl font-bold">$0</div>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
From 0 outstanding invoices
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="mt-4 md:mt-0 flex items-center space-x-2">
|
||||
<Select
|
||||
defaultValue="all-time"
|
||||
onValueChange={(value) => setPaymentPeriod(value)}
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium text-gray-500">
|
||||
Payments Collected
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center">
|
||||
<DollarSign className="h-5 w-5 text-green-500 mr-2" />
|
||||
<div className="text-2xl font-bold">${0}</div>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
From 0 completed payments
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium text-gray-500">
|
||||
Pending Payments
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center">
|
||||
<DollarSign className="h-5 w-5 text-blue-500 mr-2" />
|
||||
<div className="text-2xl font-bold">$0</div>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
From 0 pending transactions
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* OCR Image Upload Section - not working rn*/}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-xl font-medium text-gray-800">
|
||||
Payment Document OCR
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex gap-4">
|
||||
<div
|
||||
className={`flex-1 border-2 border-dashed rounded-lg p-8 text-center transition-colors ${
|
||||
isDragging
|
||||
? "border-blue-400 bg-blue-50"
|
||||
: uploadedImage
|
||||
? "border-green-400 bg-green-50"
|
||||
: "border-gray-300 bg-gray-50 hover:border-gray-400"
|
||||
}`}
|
||||
onDrop={handleImageDrop}
|
||||
onDragOver={(e) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(true);
|
||||
}}
|
||||
onDragLeave={() => setIsDragging(false)}
|
||||
onClick={() =>
|
||||
document.getElementById("image-upload-input")?.click()
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue placeholder="Select period" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all-time">All Time</SelectItem>
|
||||
<SelectItem value="this-month">This Month</SelectItem>
|
||||
<SelectItem value="last-month">Last Month</SelectItem>
|
||||
<SelectItem value="last-90-days">Last 90 Days</SelectItem>
|
||||
<SelectItem value="this-year">This Year</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Payment Summary Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium text-gray-500">
|
||||
Outstanding Balance
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center">
|
||||
<DollarSign className="h-5 w-5 text-yellow-500 mr-2" />
|
||||
<div className="text-2xl font-bold">$0</div>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
From 0 outstanding invoices
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium text-gray-500">
|
||||
Payments Collected
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center">
|
||||
<DollarSign className="h-5 w-5 text-green-500 mr-2" />
|
||||
<div className="text-2xl font-bold">${0}</div>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
From 0 completed payments
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium text-gray-500">
|
||||
Pending Payments
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center">
|
||||
<DollarSign className="h-5 w-5 text-blue-500 mr-2" />
|
||||
<div className="text-2xl font-bold">$0</div>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
From 0 pending transactions
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* OCR Image Upload Section - not working rn*/}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-xl font-medium text-gray-800">
|
||||
Payment Document OCR
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex gap-4">
|
||||
<div
|
||||
className={`flex-1 border-2 border-dashed rounded-lg p-8 text-center transition-colors ${
|
||||
isDragging
|
||||
? "border-blue-400 bg-blue-50"
|
||||
: uploadedImage
|
||||
? "border-green-400 bg-green-50"
|
||||
: "border-gray-300 bg-gray-50 hover:border-gray-400"
|
||||
}`}
|
||||
onDrop={handleImageDrop}
|
||||
onDragOver={(e) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(true);
|
||||
}}
|
||||
onDragLeave={() => setIsDragging(false)}
|
||||
onClick={() =>
|
||||
document.getElementById("image-upload-input")?.click()
|
||||
}
|
||||
>
|
||||
{uploadedImage ? (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-center space-x-4">
|
||||
<Image className="h-8 w-8 text-green-500" />
|
||||
<div className="text-left">
|
||||
<p className="font-medium text-green-700">
|
||||
{uploadedImage.name}
|
||||
</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
{(uploadedImage.size / 1024 / 1024).toFixed(2)} MB
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
removeUploadedImage();
|
||||
}}
|
||||
className="ml-auto"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
{isExtracting && (
|
||||
<div className="text-sm text-blue-600">
|
||||
Extracting payment information...
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<Upload className="h-12 w-12 text-gray-400 mx-auto" />
|
||||
<div>
|
||||
<p className="text-lg font-medium text-gray-700 mb-2">
|
||||
Upload Payment Document
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 mb-4">
|
||||
Drag and drop an image or click to browse
|
||||
</p>
|
||||
<Button variant="outline" type="button">
|
||||
Choose Image
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-xs text-gray-400">
|
||||
Supported formats: JPG, PNG, GIF • Max size: 10MB
|
||||
{uploadedImage ? (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-center space-x-4">
|
||||
<Image className="h-8 w-8 text-green-500" />
|
||||
<div className="text-left">
|
||||
<p className="font-medium text-green-700">
|
||||
{uploadedImage.name}
|
||||
</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
{(uploadedImage.size / 1024 / 1024).toFixed(2)} MB
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
removeUploadedImage();
|
||||
}}
|
||||
className="ml-auto"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
{isExtracting && (
|
||||
<div className="text-sm text-blue-600">
|
||||
Extracting payment information...
|
||||
</div>
|
||||
)}
|
||||
|
||||
<input
|
||||
id="image-upload-input"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleImageSelect}
|
||||
className="hidden"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col justify-center">
|
||||
<Button
|
||||
onClick={() => {
|
||||
if (!uploadedImage) {
|
||||
toast({
|
||||
title: "No Image Selected",
|
||||
description:
|
||||
"Please upload an image first before extracting information",
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
handleOCRExtraction(uploadedImage);
|
||||
}}
|
||||
disabled={!uploadedImage || isExtracting}
|
||||
className="min-w-32"
|
||||
>
|
||||
{isExtracting ? "Extracting..." : "Extract Info"}
|
||||
</Button>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<Upload className="h-12 w-12 text-gray-400 mx-auto" />
|
||||
<div>
|
||||
<p className="text-lg font-medium text-gray-700 mb-2">
|
||||
Upload Payment Document
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 mb-4">
|
||||
Drag and drop an image or click to browse
|
||||
</p>
|
||||
<Button variant="outline" type="button">
|
||||
Choose Image
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-xs text-gray-400">
|
||||
Supported formats: JPG, PNG, GIF • Max size: 10MB
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Recent Payments table */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Payment's Records</CardTitle>
|
||||
<CardDescription>
|
||||
View and manage all recents patient's claims payments
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<PaymentsRecentTable allowEdit allowDelete />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Recent Payments by Patients*/}
|
||||
<PaymentsOfPatientModal/>
|
||||
</main>
|
||||
<input
|
||||
id="image-upload-input"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleImageSelect}
|
||||
className="hidden"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col justify-center">
|
||||
<Button
|
||||
onClick={() => {
|
||||
if (!uploadedImage) {
|
||||
toast({
|
||||
title: "No Image Selected",
|
||||
description:
|
||||
"Please upload an image first before extracting information",
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
handleOCRExtraction(uploadedImage);
|
||||
}}
|
||||
disabled={!uploadedImage || isExtracting}
|
||||
className="min-w-32"
|
||||
>
|
||||
{isExtracting ? "Extracting..." : "Extract Info"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Recent Payments table */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Payment's Records</CardTitle>
|
||||
<CardDescription>
|
||||
View and manage all recents patient's claims payments
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<PaymentsRecentTable allowEdit allowDelete />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Recent Payments by Patients*/}
|
||||
<PaymentsOfPatientModal />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user