121 lines
7.2 KiB
React
121 lines
7.2 KiB
React
import getDateTimeFromDateString from "../../helpers/getDateTimeFromDateString";
|
|
import RouteLinks from "../../RouteLinks";
|
|
import Icons from "../Icons";
|
|
import {Link} from 'react-router-dom'
|
|
|
|
export default function CustomerSubscriptionsView({subscriptions}) {
|
|
return <>
|
|
<div className="pb-5">
|
|
<div className="flex flex-col gap-1">
|
|
<div className="w-full">
|
|
<h4 className="font-semibold text-lg">Subscriptions</h4>
|
|
</div>
|
|
<div className="w-full overflow-x-auto">
|
|
<>
|
|
<table className="py-2 w-full text-sm bg-[aliceblue] dark:bg-transparent rounded-[10px]">
|
|
<thead className="py-2 text-sm text-slate-500 text-left">
|
|
<tr>
|
|
<th scope="col" className="px-2 py-2">
|
|
#
|
|
</th>
|
|
<th scope="col" className="px-2">
|
|
Added/Updated
|
|
</th>
|
|
<th scope="col" className="px-2">
|
|
Product/Server
|
|
</th>
|
|
<th scope="col" className="px-2">
|
|
URL / EXT/ Templates
|
|
</th>
|
|
<th scope="col" className="px-2">
|
|
Status
|
|
</th>
|
|
<th scope="col" className="px-2 text-right">
|
|
Action
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{(subscriptions && subscriptions.length > 0) ? subscriptions?.map((item, index) => (
|
|
<tr key={index} className="py-2 border-t border-dashed border-slate-300">
|
|
<td className="px-2 py-2">
|
|
<div className="text-left">
|
|
<div className="text-base font-semibold">{index + 1}</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-2">
|
|
<div className="text-left">
|
|
<div
|
|
className="text-base font-semibold">{getDateTimeFromDateString(item?.added)}</div>
|
|
<div
|
|
className="text-base font-semibold">{getDateTimeFromDateString(item?.updated)}</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-2">
|
|
<div className="text-left">
|
|
<div className="text-base font-semibold">{item?.product_id}</div>
|
|
<div><a href={`http://${item?.primary_server}:${item?.provision_port}`}
|
|
target='_blank'
|
|
rel="noreferrer">{item?.primary_server}:{item?.provision_port}</a>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-2">
|
|
<div className="text-left">
|
|
<div className="text-base">
|
|
<span className="badge badge-pill badge-primary-inverse">
|
|
<a href={`https://${item?.internal_url}`}
|
|
target='_blank'
|
|
rel="noreferrer">{item?.internal_url}</a>
|
|
</span>
|
|
|
|
<br/>
|
|
<span className="badge badge-warning">
|
|
<a href={`https://${item?.external_url}`}
|
|
target='_blank'
|
|
rel="noreferrer">{item?.external_url}</a>
|
|
</span>
|
|
|
|
<br/>
|
|
<span>Template :</span> {item?.product_template}
|
|
<br/><span>Custom :</span> {item?.custom_template}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-2">
|
|
<div className="text-right">
|
|
<div className="text-base font-semibold">{item?.status}</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-2 text-right">
|
|
<div className='flex items-center justify-end gap-3 md:gap-4'>
|
|
<div
|
|
className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
|
|
<Link to={`/subscription-view/${item?.subscription_uid}`} state={{
|
|
customerID: item?.id,
|
|
subscriptionUID: item?.subscription_uid
|
|
}}>
|
|
<Icons name='eye'/>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))
|
|
:
|
|
<tr className="py-2 border-t border-dashed border-slate-300">
|
|
<td className="px-3 py-2" colSpan={6}>
|
|
<div className="flex justify-center items-center">
|
|
No Record Found
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
} |